Adding post stages to edit/modify dialog T1498

Summary: adding the stages functionality on top of the new pattern library styling

Test Plan: modify any post (/posts/:id/edit)  or create (/posts/create) a post and confirm styles are correctly applied. Verify stages are made visible as expected and priority is correctly applied.  Assure that the logic and UI response (save button, link active, buttons active) is correct when post stages are marked/unmarked as complete and required post attributes are error-free or not.

Reviewers: vladimir, lkamau, aMoniker, hollycorbett

Subscribers: vladimir, lkamau, aMoniker, rjmackay

Maniphest Tasks: T1498

Differential Revision: https://phabricator.ushahidi.com/D847

app/common/locales/en.json

@@ -170,6 +170,9 @@
         "unselect_all" : "Unselect All",
         "per_page" : "{{count}} posts",
         "post_details" : "Post Details",
+        "steps" : "This post's steps",
+        "mark_complete" : "Mark as Complete",
+        "complete" : "Complete",
         "type_details" : "{{type}} Details",
         "edit_post" : "Edit Post",
         "history" : "History",
@@ -191,6 +194,7 @@
             "create_type" : "Create {{type}}",
             "edit_type" : "Edit {{type}}: {{title}}",
             "change_type" : "Change type",
+            "incomplete_step" : "The required step {{stage}} is not marked complete",
             "save" : "Save",
             "publish" : "Publish to...",
             "publish_to" : "Publish to {{role}}",

app/post/controllers/post-create-controller.js

@@ -32,9 +32,10 @@ function (
     });
 
     $scope.chooseForm = function (form) {
-        $scope.active_form = form;
+        $scope.activeForm = form;
         $scope.post.form = { id: form.id };
 
+        that.fetchStages($scope.post.form.id);
         that.fetchAttributes($scope.post.form.id);
     };
 
@@ -43,7 +44,7 @@ function (
     };
 
     $scope.goBack = function () {
-        $scope.active_form = null;
+        $scope.activeForm = null;
     };
 
 }];

app/post/controllers/post-edit-controller.js

@@ -28,14 +28,17 @@ function (
     $scope.is_edit = true;
 
     $scope.post_options = $scope.post = PostEndpoint.get({ id: $routeParams.id }, function (post) {
+
         var tags = [];
         post.tags.map(function (tag) {
             tags.push(parseInt(tag.id));
         });
         post.tags = tags;
 
+        post.completed_stages = post.completed_stages.map(parseInt);
+
         $scope.post = post;
-        $scope.active_form = FormEndpoint.get({ id: post.form.id }, function (form) {
+        $scope.activeForm = FormEndpoint.get({ id: post.form.id }, function (form) {
             // Set page title to post title, if there is one available.
             if (post.title && post.title.length) {
                 $translate('post.modify.edit_type', { type: form.name, title: post.title }).then(function (title) {
@@ -44,6 +47,7 @@ function (
             }
         });
 
+        that.fetchStages($scope.post.form.id);
         that.fetchAttributes($scope.post.form.id);
     });
 

app/post/controllers/post-modify-controller.js

@@ -7,6 +7,7 @@ module.exports = [
     'RoleHelper',
     'TagEndpoint',
     'FormEndpoint',
+    'FormStageEndpoint',
     'FormAttributeEndpoint',
     'Notify',
     '_',
@@ -19,6 +20,7 @@ function (
     RoleHelper,
     TagEndpoint,
     FormEndpoint,
+    FormStageEndpoint,
     FormAttributeEndpoint,
     Notify,
     _
@@ -27,10 +29,9 @@ function (
     $scope.availableRoles = RoleHelper.roles();
     $scope.getRoleDisplayName = RoleHelper.getRole;
     $scope.everyone = $filter('translate')('post.modify.everyone');
-    $scope.active_form
 
-    this.fetchAttributes = function (form_id) {
-        FormAttributeEndpoint.query({formId: form_id}).$promise.then(function (attrs) {
+    this.fetchAttributes = function (formId) {
+        FormAttributeEndpoint.query({formId: formId}).$promise.then(function (attrs) {
             // Initialize values on post (helps avoid madness in the template)
             attrs.map(function (attr) {
                 if (!$scope.post.values[attr.key]) {
@@ -41,6 +42,12 @@ function (
         });
     };
 
+    this.fetchStages = function (formId) {
+        $scope.stages = FormStageEndpoint.query({ formId: formId }, function (stages) {
+            $scope.setVisibleStage($scope.stages[0].id);
+        });
+    };
+
     $scope.allowedChangeStatus = function () {
         return $scope.post_options.$resolved && $scope.post_options.allowed_privileges.indexOf('change_status') !== -1;
     };
@@ -49,6 +56,60 @@ function (
         $scope.post.status = 'draft';
     };
 
+    $scope.setVisibleStage = function (stageId) {
+        $scope.visibleStage = stageId;
+    };
+
+    $scope.isFirstStage = function (stageId) {
+
+        if (!_.isEmpty($scope.stages)) {
+            return stageId === $scope.stages[0].id;
+        }
+        return 0;
+
+    };
+
+    $scope.isStageValid = function (stageId) {
+
+        if ($scope.isFirstStage(stageId)) {
+
+            // The first stage is assumed to contain the title, content, and the tags
+            //  - these are not stored in attributes and do not have a 'required' field
+            //   thus, if any of these are invalid, the first stage is not ready to complete
+
+            if ($scope.form.title.$invalid || $scope.form.content.$invalid || $scope.form.tags.$invalid) {
+                return false;
+            }
+        }
+
+        // now checking all other post attributes that are required
+        return _.chain($scope.attributes)
+        .where({form_stage_id : stageId, required: true})
+        .reduce(function (isValid, attr) {
+            if (_.isUndefined($scope.form['values_' + attr.key]) || $scope.form['values_' + attr.key].$invalid) {
+                return false;
+            }
+            return isValid;
+        }, true)
+        .value();
+    };
+
+    $scope.stageIsComplete = function (stageId) {
+        return _.includes($scope.post.completed_stages, stageId);
+    };
+
+    $scope.toggleStageCompletion = function (stageId) {
+
+        stageId = parseInt(stageId);
+
+        if (_.includes($scope.post.completed_stages, stageId)) {
+            $scope.post.completed_stages = _.without($scope.post.completed_stages, stageId);
+
+        } else if ($scope.isStageValid(stageId)) {
+            $scope.post.completed_stages.push(stageId);
+        }
+    };
+
     $scope.postIsPublishedTo = function () {
 
         if ($scope.post.status === 'draft') {
@@ -64,21 +125,62 @@ function (
 
     $scope.publishPostTo = function (role) {
 
+        // first check if stages required have been marked complete
+        var requiredStages = _.where($scope.stages, {required: true}),
+            errors = [];
+
+        _.each(requiredStages, function (stage) {
+            // if this stage isn't complete, add to errors
+            if (_.indexOf($scope.post.completed_stages, stage.id) === -1) {
+                errors.push($filter('translate')('post.modify.incomplete_step', { stage: stage.label }));
+            }
+        });
+
+        if (errors.length) {
+            Notify.showAlerts(errors);
+            return;
+        }
+
         $scope.post.status = 'published';
         if (role) {
             $scope.post.published_to = [role];
         } else {
             $scope.post.published_to = [];
         }
+    };
+
+    $scope.canSavePost = function () {
+        var valid = true;
+        if ($scope.post.status === 'published') {
+            // first check if stages required have been marked complete
+            var requiredStages = _.where($scope.stages, {required: true}) ;
+
+            valid = _.reduce(requiredStages, function (isValid, stage) {
+                // if this stage isn't complete, add to errors
+                if (_.indexOf($scope.post.completed_stages, stage.id) === -1) {
+                    return false;
+                }
+
+                return isValid;
+            }, valid);
+
+            valid = _.reduce($scope.post.completed_stages, function (isValid, stageId) {
+                return $scope.isStageValid(stageId) && isValid;
+            }, valid);
+        }
 
+        return valid;
     };
 
     $scope.savePost = function () {
+        if (!$scope.canSavePost()) {
+            return;
+        }
+
         $scope.saving_post = true;
 
         // Avoid messing with original object
-        post = _.clone($scope.post);
-        post.values = _.clone(post.values);
+        var post = angular.copy($scope.post);
 
         // Clean up post values object
         _.each(post.values, function (value, key) {

app/post/services/entities/post-entity.js

@@ -10,7 +10,8 @@ function (
             content: '',
             locale: CONST.DEFAULT_LOCALE,
             status: 'draft',
-            values: {}
+            values: {},
+            completed_stages: []
         }, data);
     };
 }];