New interface for document types

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/Components/ItemGroupPicker/itemGroupPicker.controller.js

@@ -0,0 +1,45 @@
+(function() {
+
+    "use strict";
+
+    function ItemGroupPickerController($scope) {
+
+        var vm = this;
+
+        vm.availableItems = $scope.model.availableItems;
+        vm.model = {
+            selection: []
+        };
+
+        if ($scope.model.selection) {
+            vm.model.selection = $scope.model.selection;
+        }
+
+        vm.close = close;
+        vm.submit = submit;
+        vm.selectItem = selectItem;
+
+        function selectItem(item) {
+            if (vm.model.selection.includes(item)) {
+                vm.model.selection.splice(vm.model.selection.indexOf(item), 1);
+            } else {
+                vm.model.selection.push(item);
+            }
+        }
+
+        function close() {
+            if ($scope.model.close) {
+                $scope.model.close();
+            }
+        }
+
+        function submit() {
+            if ($scope.model.submit) {
+                $scope.model.submit(vm.model);
+            }
+        }
+    }
+
+    angular.module("umbraco").controller("SeoToolkit.MetaFields.ItemGroupPickerController", ItemGroupPickerController);
+
+})();

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/ContentApps/DocumentSettings/Dialog/settingDialog.html → src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/Components/ItemGroupPicker/itemGroupPicker.html

@@ -1,4 +1,4 @@
-<form ng-controller="SeoToolkit.DocumentSettings.SettingDialogController as vm">
+<div ng-controller="SeoToolkit.MetaFields.ItemGroupPickerController as vm">
     <umb-editor-view>
         <umb-editor-header name="model.title"
                            name-locked="true"
@@ -9,10 +9,18 @@
         <umb-editor-container>
             <umb-box>
                 <umb-box-content>
-                    <div class="control-group umb-control-group">
-                        <div class="umb-el-wrap"
-                             ng-include="model.field.editor.view">
-                        </div>
+                    <div class="umb-tree">
+                        <ul>
+                            <li class="umb-tree-item" ng-repeat="item in vm.availableItems">
+                                <div class="umb-tree-item__inner">
+                                    <umb-icon icon="icon-check" class="umb-tree-icon" ng-show="vm.model.selection.includes(item)"></umb-icon>
+                                    <umb-icon icon="icon-autofill" class="umb-tree-icon" ng-show="!vm.model.selection.includes(item)"></umb-icon>
+                                    <a class="umb-tree-item__label" ng-click="vm.selectItem(item)">
+                                        {{item.name}}
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
                     </div>
                 </umb-box-content>
             </umb-box>
@@ -35,4 +43,4 @@
             </umb-editor-footer-content-right>
         </umb-editor-footer>
     </umb-editor-view>
-</form>
+</div>

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/ContentApps/DocumentSettings/documentSettings.controller.js

@@ -46,27 +46,6 @@
             editorService.contentTypePicker(editor);
         }
 
-        vm.openSettingDialog = function (field) {
-            const editor = {
-                title: "Field",
-                view: "/App_Plugins/SeoToolkit/MetaFields/Interface/ContentApps/DocumentSettings/Dialog/settingDialog.html",
-                size: "small",
-                field: field,
-                hasInheritance: vm.model.inheritance != null,
-                groups: editorState.getCurrent().groups,
-                submit: function (model) {
-                    field = model.field;
-
-                    editorService.close();
-                },
-                close: function () {
-                    editorService.close();
-                }
-            }
-
-            editorService.open(editor);
-        }
-
         vm.toggleUseInheritedValue = function (item, value) {
             item.useInheritedValue = value;
         }
@@ -80,6 +59,8 @@
 
         $scope.$on("seoSettingsSubmitting",
             function () {
+                $scope.$broadcast("SeoToolkit.SaveField");
+
                 save();
             });
 

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/ContentApps/DocumentSettings/documentSettings.html

@@ -14,23 +14,24 @@
             </div>
         </div>
     </div>
-    <div class="control-group umb-control-group" ng-repeat="field in vm.model.fields">
+    <div class="control-group umb-control-group --label-on-top" ng-repeat="field in vm.model.fields">
         <div class="umb-el-wrap">
             <div class="control-header">
                 <label class="control-label">{{field.title}}</label>
-                <small class="control-description">
-                    {{field.description}}
-                </small>
-            </div>
-            <div class="controls">
-                <span ng-if="!field.useInheritedValue">{{vm.formatFieldValue(field)}}</span>
-                <b ng-if="field.useInheritedValue">Inherited value</b>
-
                 <div style="float: right;">
-                    <a class="btn btn-success" ng-click="vm.openSettingDialog(field)" ng-if="!field.useInheritedValue">Open settings</a>
                     <a class="btn" ng-click="vm.toggleUseInheritedValue(field, false)" ng-if="field.useInheritedValue">Override</a>
                     <a class="btn" ng-click="vm.toggleUseInheritedValue(field, true)" ng-if="!field.useInheritedValue && vm.model.inheritance != null">Use inherited</a>
                 </div>
+                <small class="control-description">
+                    {{field.description}}
+                </small>
+            </div>
+            <div class="controls" ng-if="!field.useInheritedValue">
+                <seo-field-editor field="field" has-inheritance="vm.model.inheritance != null"></seo-field-editor>
+            </div>
+            <div class="alert alert-info flex items-center" role="alert" ng-if="field.useInheritedValue">
+                <umb-icon icon="icon-info" class="medium mr2"></umb-icon>
+                <span>This field uses the value of the inherited component.</span>
             </div>
         </div>
     </div>

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/SeoFieldEditors/FieldsEditor/fieldsEditor.controller.js

@@ -1,15 +1,28 @@
 (function () {
     "use strict";
 
-    function fieldsEditorController($scope, $http, notificationsService) {
+    function fieldsEditorController($scope, $http, notificationsService, editorState, editorService, eventsService) {
 
         var vm = this;
 
+        //TODO: Check if inheritance works as expected
         vm.field = $scope.field;
         vm.hasInheritance = $scope.hasInheritance;
         vm.customSelectedFields = [];
         vm.customBaseFields = [];
         vm.loading = true;
+        vm.sortableOptions = {
+            axis: "y",
+            containment: "parent",
+            distance: 10,
+            opacity: 0.7,
+            tolerance: "pointer",
+            scroll: true,
+            zIndex: 6000
+        };
+
+        vm.removeField = removeField;
+        vm.openFieldPicker = openFieldPicker;
 
         function init() {
 
@@ -38,12 +51,11 @@
                 });
                 fields.forEach(function (d) {
                     if (vm.field.value) {
-                        const currentField = vm.field.value.find(function(v) {
+                        const currentField = vm.field.value.find(function (v) {
                             return d.value === v.value;
                         });
                         if (currentField) {
                             selectedFields.push(d);
-                            return;
                         }
                     }
                     vm.customBaseFields.push(d);
@@ -67,8 +79,34 @@
             });
         }
 
+        function openFieldPicker() {
+            const editor = {
+                title: "Field",
+                view: "/App_Plugins/SeoToolkit/MetaFields/Interface/Components/ItemGroupPicker/itemGroupPicker.html",
+                size: "small",
+                availableItems: vm.customBaseFields.map(function (item) { return item; }),
+                selection: vm.customSelectedFields.map(function (item) { return item; }),
+                submit: model => {
+                    vm.customSelectedFields = model.selection;
+                    editorService.close();
+                },
+                close: function () {
+                    editorService.close();
+                }
+            }
+
+            editorService.open(editor);
+        }
+
+        function removeField(field) {
+            const index = vm.customSelectedFields.indexOf(field);
+            if (index >= 0) {
+                vm.customSelectedFields.splice(index, 1);
+            }
+        }
+
         function getAllContentFields(fields) {
-            return $scope.model.groups.flatMap(function (g) {
+            return editorState.getCurrent().groups.flatMap(function (g) {
                 return g.properties;
             }).filter(function (g) {
                 return fields.includes(g.editor);

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/SeoFieldEditors/FieldsEditor/fieldsEditor.html

@@ -3,19 +3,33 @@
     <umb-load-indicator ng-if="vm.loading"></umb-load-indicator>
 
     <div ng-show="!vm.loading">
-        <div class="control-header">
-            <label class="control-label">{{vm.field.title}}</label>
-            <small class="control-description">
-                {{vm.field.description}}
-            </small>
-        </div>
-        <div class="controls">
-            <div class="umb-property-editor">
-                <dynamic-select-box base-list="vm.customBaseFields" selected-list="vm.customSelectedFields" field="vm.field">
-
-                </dynamic-select-box>
+        <div class="umb-nested-content__items" ui-sortable="vm.sortableOptions" ng-model="vm.customSelectedFields">
+            <div ng-repeat="field in vm.customSelectedFields">
+                <div class="umb-nested-content__item">
+                    <div class="umb-nested-content__header-bar">
+                        <div class="umb-nested-content__heading">
+                            <umb-icon icon="icon-autofill" class="icon"></umb-icon>
+                            <div class="umb-nested-content__item-name --has-icon">
+                                {{field.name}}
+                            </div>
+                        </div>
+                        <div class="umb-nested-content__icons">
+                            <button type="button" class="umb-nested-content__icon umb-nested-content__icon--delete" ng-click="vm.removeField(field)">
+                                <umb-icon icon="icon-trash" class="icon"></umb-icon>
+                                <span class="sr-only">
+                                    <localize key="general_delete">Delete</localize>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </div>
         </div>
+        <div class="umb-nested-content__footer-bar" aria-hidden="false">
+            <button type="button" class="btn-reset umb-nested-content__add-content umb-focus" ng-class="{ '--disabled': false }" ng-click="vm.openFieldPicker($event)">
+                 <span>Add fields</span>
+            </button>
+        </div>
         <small class="control-description">
             Fields to determine the meta field will be checked from top to bottom.
         </small>

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/SeoFieldEditors/PropertyEditor/propertyEditor.html

@@ -1,15 +1,7 @@
 <div class="umb-el-wrap" ng-controller="SeoToolkit.SeoFieldEditors.PropertyEditorController as vm">
-    <div class="control-header">
-        <label class="control-label">{{vm.field.title}}</label>
-        <small class="control-description">
-            {{vm.field.description}}
-        </small>
-    </div>
-    <div class="controls">
-        <umb-property-editor model="vm.model">
-        </umb-property-editor>
-        <small class="control-description" ng-if="vm.field.editor.config.extraInformation">
-            {{vm.field.editor.config.extraInformation}}
-        </small>
-    </div>
+    <umb-property-editor model="vm.model">
+    </umb-property-editor>
+    <small class="control-description" ng-if="vm.field.editor.config.extraInformation">
+        {{vm.field.editor.config.extraInformation}}
+    </small>
 </div>

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/Interface/SeoFieldEditors/seoFieldEditor.directive.js

@@ -0,0 +1,17 @@
+angular.module("umbraco.directives")
+    .directive('seoFieldEditor', function () {
+        return {
+            restrict: 'E',
+            template: '<ng-include src="getTemplateUrl()"/>',
+            scope: {
+                field: '=',
+                hasInheritance: '<'
+            },
+            controller: function ($scope) {
+                //function used on the ng-include to resolve the template
+                $scope.getTemplateUrl = function () {
+                    return $scope.field.editor.view;
+                }
+            }
+        }
+    });

src/SeoToolkit.Umbraco.MetaFields/App_Plugins/SeoToolkit/MetaFields/package.manifest

@@ -1,12 +1,13 @@
 {
   "javascript": [
     "~/App_Plugins/SeoToolkit/MetaFields/Interface/ContentApps/DocumentSettings/documentSettings.controller.js",
-    "~/App_Plugins/SeoToolkit/MetaFields/Interface/ContentApps/DocumentSettings/Dialog/settingDialog.controller.js",
     "~/App_Plugins/SeoToolkit/MetaFields/Interface/ContentApps/SeoSettings/seoSettings.controller.js",
     "~/App_Plugins/SeoToolkit/MetaFields/Interface/Components/DynamicSelectBox/dynamicSelectBox.controller.js",
     "~/App_Plugins/SeoToolkit/MetaFields/Interface/Previewers/BaseTags/baseTagsFieldPreviewer.controller.js",
     "~/App_Plugins/SeoToolkit/MetaFields/Interface/SeoFieldEditors/FieldsEditor/fieldsEditor.controller.js",
-    "~/App_Plugins/SeoToolkit/MetaFields/Interface/SeoFieldEditors/PropertyEditor/propertyEditor.controller.js"
+    "~/App_Plugins/SeoToolkit/MetaFields/Interface/SeoFieldEditors/PropertyEditor/propertyEditor.controller.js",
+    "~/App_Plugins/SeoToolkit/MetaFields/Interface/Components/ItemGroupPicker/itemGroupPicker.controller.js",
+    "~/App_Plugins/SeoToolkit/MetaFields/Interface/SeoFieldEditors/seoFieldEditor.directive.js"
   ],
   "css": [
     "~/App_Plugins/SeoToolkit/MetaFields/css/main.css"