improve validation on UI

Author: darryldecode

src/Darryldecode/Backend/Public/backend/cb/app/contents/controller.contents.js

@@ -69,6 +69,13 @@ angular.module('cb.group').controller('ContentsController', ['$scope','$timeout'
     // saves new content
     $scope.content.save = function () {
 
+        var validation = checkRequiredFields();
+
+        if( ! validation.success ) {
+            AlertService.showAlert(validation.message);
+            return false;
+        }
+
         var dataToBeSave = {
             title: $scope.content.title,
             slug: $scope.content.slug,
@@ -114,6 +121,13 @@ angular.module('cb.group').controller('ContentsController', ['$scope','$timeout'
     // update content
     $scope.content.updateSave = function () {
 
+        var validation = checkRequiredFields();
+
+        if( ! validation.success ) {
+            AlertService.showAlert(validation.message);
+            return false;
+        }
+
         var dataToBeUpdated = {
             title: $scope.content.title,
             slug: $scope.content.slug,
@@ -459,4 +473,33 @@ angular.module('cb.group').controller('ContentsController', ['$scope','$timeout'
         });
         return taxString;
     }
+
+    // this will check all custom fields that are required
+    function checkRequiredFields() {
+
+        var result = {
+            success: true,
+            message: ''
+        };
+
+        angular.forEach($scope.contentType.form_groups, function(group, i) {
+            angular.forEach(group.fields, function(field, i) {
+                if( field.data.required == true ) {
+
+                    if( ! $scope.content.customFields.hasOwnProperty(group.form_name) ) {
+                        result.success = false;
+                        result.message = field.data.label + ' is required!';
+                        return;
+                    }
+
+                    if( (!$scope.content.customFields[group.form_name].hasOwnProperty(field.data.name)) || ($scope.content.customFields[group.form_name][field.data.name].length == 0) ) {
+                        result.success = false;
+                        result.message = field.data.label + ' is required!';
+                    }
+                }
+            });
+        });
+
+        return result;
+    }
 }]);

src/Darryldecode/Backend/Public/backend/cb/app/custom-fields/fields/display/gallery.html

@@ -24,8 +24,8 @@ <h4>{{f.data.label}} {{(f.data.required) ? '*' : ''}}</h4>
     <!-- edit mode -->
     <div class="edit-field edit-field-{{f.key}}-{{$index}}">
         <div class="form-group text-left">
-            <label>Field Name:</label>
-            <textarea class="form-control" data-ng-model="f.data.label"></textarea>
+            <label>Field Key:</label>
+            <textarea class="form-control" data-ng-model="f.data.name"></textarea>
         </div>
         <div class="form-group text-left">
             <label>Label:</label>
@@ -35,5 +35,9 @@ <h4>{{f.data.label}} {{(f.data.required) ? '*' : ''}}</h4>
             <label>Description:</label>
             <textarea class="form-control" data-ng-model="f.data.description"></textarea>
         </div>
+        <div class="form-group text-left">
+            <td>Required?</td>
+            <td><input data-ng-model="f.data.required" type="checkbox"></td>
+        </div>
     </div>
 </div>

src/Darryldecode/Backend/Public/backend/cb/app/custom-fields/fields/display/image.html

@@ -23,7 +23,7 @@ <h4>{{f.data.label}} {{(f.data.required) ? '*' : ''}}</h4>
     <!-- edit mode -->
     <div class="edit-field edit-field-{{f.key}}-{{$index}}">
         <div class="form-group text-left">
-            <label>Field Name:</label>
+            <label>Field Key:</label>
             <textarea class="form-control" data-ng-model="f.data.name"></textarea>
         </div>
         <div class="form-group text-left">
@@ -34,5 +34,9 @@ <h4>{{f.data.label}} {{(f.data.required) ? '*' : ''}}</h4>
             <label>Description:</label>
             <textarea class="form-control" data-ng-model="f.data.description"></textarea>
         </div>
+        <div class="form-group text-left">
+            <td>Required?</td>
+            <td><input data-ng-model="f.data.required" type="checkbox"></td>
+        </div>
     </div>
 </div>