Add Content Workflow AngularJS

Universal UI workflow built in AngularJS to enable use of the add content feature from anywhere within the media intelligence family of products.

How to use the add content workflow

TL;DR; See example implementation here or pull this repo down and run locally to see the workflow in action. Copy-paste is your friend!

1. Include the minified JS bundle in your project

   • Staging Assets URL: https://assets.meltwater.io/workflows/ng-mi-add-content/staging/add-content-workflow.min.js
   • Production Assets URL: https://assets.meltwater.io/workflows/ng-mi-add-content/add-content-workflow.min.js

2. Ensure the following peer dependencies are included in your project. Newer versions of these dependencies may work just fine. Pirates will let you know ahead of time if you are required to update any of these dependencies for a new version of this module to work properly.

   <!-- CSS --> 
   <link rel="stylesheet" href="https://assets.meltwater.io/angular-material/v1.1.8/angular-material.with-ie10.min.css" />
   <link rel="stylesheet" href="https://assets.meltwater.io/gaf-ng-components/v5.50.1/gaf-ng-components.min.css" />
   
   <!-- JS -->
   <script src="https://assets.meltwater.io/ajax-googleapis/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
   <script src="https://assets.meltwater.io/ajax-googleapis/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
   <script src="https://assets.meltwater.io/ajax-googleapis/ajax/libs/angularjs/1.6.9/angular-aria.min.js"></script>
   <script src="https://assets.meltwater.io/ajax-googleapis/ajax/libs/angularjs/1.6.9/angular-animate.min.js"></script>
   <script src="https://assets.meltwater.io/ajax-googleapis/ajax/libs/angularjs/1.6.9/angular-messages.min.js"></script>
   <script src="https://assets.meltwater.io/ajax-googleapis/ajax/libs/angularjs/1.6.9/angular-sanitize.min.js"></script>
   <script src="https://assets.meltwater.io/ajax-googleapis/ajax/libs/angularjs/1.6.9/angular-cookies.min.js"></script>
   <script src="https://assets.meltwater.io/cdnjs/ajax/libs/angular-translate/2.15.1/angular-translate.min.js"></script>
   <script src="https://assets.meltwater.io/cdnjs/ajax/libs/angular-translate-storage-cookie/2.15.1/angular-translate-storage-cookie.min.js"></script>
   <script src="https://assets.meltwater.io/cdnjs/ajax/libs/angular-translate-loader-static-files/2.15.1/angular-translate-loader-static-files.min.js"></script>
   <script src="https://assets.meltwater.io/cdnjs/ajax/libs/angular-translate-interpolation-messageformat/2.15.1/angular-translate-interpolation-messageformat.min.js"></script>
   <script src="https://assets.meltwater.io/ajax-googleapis/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
   <script src="https://assets.meltwater.io/cdnjs/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
   <script src="https://assets.meltwater.io/cdnjs/ajax/libs/moment-timezone/0.5.21/moment-timezone-with-data-2012-2022.min.js"></script>
   <script src="https://assets.meltwater.io/gaf-ng-components/v5.50.1/gaf-ng-components.min.js"></script>

3. You will also need @meltwater/node-translation version 1.11.109 or greater

4. Use the module in your AngularJS app by adding it to your app module dependencies angular.module('app', ['ngMaterial', 'mwAppComponents', 'MW.AddContentWorkflow']);

5. Use the AddContentWorkflowService in a component controller

    app.component('yourComponent', {
       template: `...`,
       controller: function(AddContentWorkflowService, $mdToast) {
           `...`
       }
    })

6. Call the openWorkflow method on the service to launch the workflow. IMPORTANT: You must pass in language, timezone, and countryCode so that dates are properly formatted, translations are properly shown and, most importantly, regional restrictions are properly enforced.

   app.component('yourComponent', {
       template: `...`,
       controller: function(AddContentWorkflowService, $mdToast) {
            this.openAddContent = function(event) {
             
                // In a production app, you will get these values from actual user object
                var userObject = {
                    _id: 'YOUR_USER_ID',
                    language: 'en',
                    timezone: 'America/New_York',
                    countryCode: 'us',
                    activeCompanyId: 'YOUR_COMPANY_ID'
                };
                // var preSelectedTagNames = ['TagName']; // This is optional.  If tag names are specified, these tags will be selected in the details step of the flow
                
                // This function returns an $mdDialog promise, which you can use to determine whether
                // the initiation of adding the content was successful or not
                AddContentWorkflowService.openWorkflow(event, {
                   userObject: userObject,
                   // preSelectedTags: preSelectedTags // Optional here as well
                })
                    .then(function() {
                        $mdToast.show(
                            $mdToast.simple()
                                .textContent('Content added!')
                        );
                    })
                    .catch(function(error) {
                    
                        // $mdDialog.cancel() is called internally and will also cause this catch to fire, 
                        // so make sure there is an actual error before showing an error message to the user
                        
                        if (error) {
                            console.error('Error adding content', error);
                            $mdToast.show(
                                $mdToast.simple()
                                    .textContent('Error adding content...')
                            );
                        }
                    })
           }
       }
    })

That should be all you need to do to start adding content from within your AngularJS app. If you have any problems or questions about how to implement, hit us up on slack in #eng-team-pirates and we will be happy to help!

How to use the content status workflow

TL;DR; check out example implementation here

1. Follow the steps to include the necessary dependencies for the add content workflow
2. Calling the service to show this dialog is very similar to the add content workflow and is as follows:

   AddContentWorkflowService.openContentStatusDialog(event, { documents: documents })
       .then(function (documents) {
           $mdToast.show(
               $mdToast.simple()
                   .textContent('Content status reviewed')
           );
       })
       .catch(function (error) {
           // $mdDialog.cancel() is called internally and will also cause this catch to fire,
           // so make sure there is an actual error before showing an error message to the user
   
           if (error) {
               console.error('Error reviewing content status', error);
               $mdToast.show(
                   $mdToast.simple()
                       .textContent('Error reviewing content status...')
               );
           }
       })

   The openContentStatusDialog method expects the event as the first argument, and a config object with at least a documents property, which is just an Array of documents in the "fairhair" format (the format returned by Keystone)
3. Handle the promise returned from the openContentStatusDialog method and you will receive one argument to the callback which will be an array of documents that have been extended with reach and other enrichments. None of the properties you passed in will be overridden, so if you change the title or description or another field value, they will be preserved.

Run the dev environment locally

So you want to know even more about how this thing works, or you feel like submitting a PR. Alright, that's fair, let's get this running locally for you.

1. run npm link in the workflow-core and then in the angularjs workflow npm link @meltwater/add-content-workflow-core
2. Make sure you are logged into staging.meltwater.net, as the workflow will be using your gyda token to make requests to the add-content-bff
3. Run npm start, wait a few moments, your default browser should open automatically
4. Lean back in your chair and bask in warm feelings you got from how stupidly easy that was

Contact us

Pirates is a welcoming team. We like feedback, we like PRs, some of us like foosball. Hit us up in the slack channel #eng-team-pirates with any suggestions or to notify us of a PR you have submitted to make add-content-workflow-angularjs even better.