From 73a61e65de73d9602689ebaf4eff4dede70957bc Mon Sep 17 00:00:00 2001
From: Bjarne Fyrstenborg <bjarne_fyrstenborg@hotmail.com>
Date: Thu, 5 Sep 2019 17:40:28 +0200
Subject: [PATCH] v8: Use umbCheckbox in packager (#6258)

---
 .../components/forms/umbcheckbox.directive.js |  13 +-
 .../forms/umbradiobutton.directive.js         |  41 +++--
 .../views/components/forms/umb-checkbox.html  |   4 +-
 .../components/forms/umb-radiobutton.html     |  15 +-
 .../src/views/packages/edit.controller.js     | 150 +++++++++++++++---
 .../src/views/packages/edit.html              |  65 +++-----
 6 files changed, 197 insertions(+), 91 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
index 47381a15c0..f8643ad191 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
@@ -22,14 +22,14 @@
 </pre>
 
 @param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked.
-@param {string} input-id Set the <code>id</code> of the checkbox.
+@param {string} inputId Set the <code>id</code> of the checkbox.
 @param {string} value Set the value of the checkbox.
 @param {string} name Set the name of the checkbox.
 @param {string} text Set the text for the checkbox label.
-@param {string} server-validation-field Set the <code>val-server-field</code> of the checkbox.
+@param {string} serverValidationField Set the <code>val-server-field</code> of the checkbox.
 @param {boolean} disabled Set the checkbox to be disabled.
 @param {boolean} required Set the checkbox to be required.
-@param {string} on-change Callback when the value of the checkbox changed by interaction.
+@param {callback} onChange Callback when the value of the checkbox change by interaction.
 
 **/
 
@@ -40,8 +40,8 @@
     function UmbCheckboxController($timeout) {
         
         var vm = this;
-        
-        vm.callOnChange = function() {
+
+        if (vm.onChange) {
             $timeout(function() {
                 vm.onChange({model:vm.model, value:vm.value});
             }, 0);
@@ -49,7 +49,6 @@
         
     }
     
-    
     var component = {
         templateUrl: 'views/components/forms/umb-checkbox.html',
         controller: UmbCheckboxController,
@@ -63,7 +62,7 @@
             serverValidationField: "@",
             disabled: "<",
             required: "<",
-            onChange: "&"
+            onChange: "&?"
         }
     };
 
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
index 351ba2fee2..933107527b 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
@@ -27,31 +27,40 @@
 @param {string} text Set the text for the radiobutton label.
 @param {boolean} disabled Set the radiobutton to be disabled.
 @param {boolean} required Set the radiobutton to be required.
+@param {callback} onChange Callback when the value of the radiobutton change by interaction.
 
 **/
 
 (function () {
     'use strict';
 
-    function RadiobuttonDirective() {
-        var directive = {
-            restrict: 'E',
-            replace: true,
-            templateUrl: 'views/components/forms/umb-radiobutton.html',
-            scope: {
-                model: "=",
-                value: "@",
-                name: "@",
-                text: "@",
-                disabled: "=",
-                required: "="
-            }
-        };
+    function UmbRadiobuttonController($timeout) {
 
-        return directive;
+        var vm = this;
 
+        if (vm.onChange) {
+            $timeout(function () {
+                vm.onChange({ model: vm.model, value: vm.value });
+            }, 0);
+        }
+        
     }
 
-    angular.module('umbraco.directives').directive('umbRadiobutton', RadiobuttonDirective);
+    var component = {
+        templateUrl: 'views/components/forms/umb-radiobutton.html',
+        controller: UmbRadiobuttonController,
+        controllerAs: 'vm',
+        bindings: {
+            model: "=",
+            value: "@",
+            name: "@",
+            text: "@",
+            disabled: "=",
+            required: "=",
+            onChange: "&?"
+        }
+    };
+
+    angular.module('umbraco.directives').component('umbRadiobutton', component);
 
 })();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
index d40263c6b6..2f90905c7d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
@@ -1,4 +1,4 @@
-<label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': disabled }">
+<label class="checkbox umb-form-check umb-form-check--checkbox" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
     <input type="checkbox"
            id="{{vm.inputId}}"
            name="{{vm.name}}"
@@ -8,7 +8,7 @@
            ng-model="vm.model"
            ng-disabled="vm.disabled"
            ng-required="vm.required"
-           ng-change="vm.callOnChange()"/>
+           ng-change="vm.onChange()"/>
 
     <span class="umb-form-check__state" aria-hidden="true">
         <span class="umb-form-check__check">
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
index 877e55a1c5..4f630409e2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
@@ -1,13 +1,14 @@
-<label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': disabled }">
-    <input type="radio" name="{{name}}"
-        value="{{value}}"
+<label class="radio umb-form-check umb-form-check--radiobutton" ng-class="{ 'umb-form-check--disabled': vm.disabled }">
+    <input type="radio" name="{{vm.name}}"
+        value="{{vm.value}}"
         class="umb-form-check__input"
-        ng-model="model"
-        ng-disabled="disabled"
-        ng-required="required" />
+        ng-model="vm.model"
+        ng-disabled="vm.disabled"
+        ng-required="vm.required"
+        ng-change="vm.onChange()" />
 
     <span class="umb-form-check__state" aria-hidden="true">
         <span class="umb-form-check__check"></span>
     </span>
-    <span class="umb-form-check__text">{{text}}</span>
+    <span class="umb-form-check__text">{{vm.text}}</span>
 </label>
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js
index 623621c536..d6bfb38b88 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js
@@ -5,6 +5,9 @@
 
         const vm = this;
 
+        const packageId = $routeParams.id;
+        const create = $routeParams.create;
+
         vm.showBackButton = true;
 
         // open all expansion panels
@@ -24,38 +27,48 @@
         vm.downloadFile = downloadFile;
         vm.contributorsEditor = null;
 
-        vm.buttonLabel = "";
+        vm.selectDocumentType = selectDocumentType;
+        vm.selectTemplate = selectTemplate;
+        vm.selectStyleSheet = selectStyleSheet;
+        vm.selectMacro = selectMacro;
+        vm.selectLanguage = selectLanguage;
+        vm.selectDictionaryItem = selectDictionaryItem;
+        vm.selectDataType = selectDataType;
 
-        vm.versionRegex = /^(\d+\.)(\d+\.)(\*|\d+)$/;
+        vm.labels = {};
 
-        const packageId = $routeParams.id;
-        const create = $routeParams.create;
+        vm.versionRegex = /^(\d+\.)(\d+\.)(\*|\d+)$/;  
 
         function onInit() {
 
             if (create) {
-                //pre populate package with some values
+                // Pre populate package with some values
                 packageResource.getEmpty().then(scaffold => {
                     vm.package = scaffold;
 
+                    loadResources();
+
                     buildContributorsEditor(vm.package);
 
                     vm.loading = false;
                 });
 
-                localizationService.localize("general_create").then(function(value) {
-                    vm.buttonLabel = value;
+                localizationService.localize("general_create").then(function (value) {
+                    vm.labels.button = value;
                 });
             } else {
-                // load package
+                // Load package
                 packageResource.getCreatedById(packageId).then(createdPackage => {
                     vm.package = createdPackage;
 
+                    loadResources();
+
                     buildContributorsEditor(vm.package);
 
                     vm.loading = false;
-                    // get render model for content node
-                    if(vm.package.contentNodeId) {
+
+                    // Get render model for content node
+                    if (vm.package.contentNodeId) {
                         entityResource.getById(vm.package.contentNodeId, "Document")
                             .then((entity) => {
                                 vm.contentNodeDisplayModel = entity;
@@ -64,71 +77,86 @@
 
                 });
 
-                localizationService.localize("buttons_save").then(function (value) {
-                    vm.buttonLabel = value;
+                localizationService.localizeMany(["buttons_save", "packager_includeAllChildNodes"]).then(function (values) {
+                    vm.labels.button = values[0];
+                    vm.labels.includeAllChildNodes = values[1];
                 });
-            }
 
-            // get all doc types
+            }
+        }
+
+        function loadResources() {
+
+            // Get all document types
             entityResource.getAll("DocumentType").then(documentTypes => {
                 // a package stores the id as a string so we 
                 // need to convert all ids to string for comparison
                 documentTypes.forEach(documentType => {
                     documentType.id = documentType.id.toString();
+                    documentType.selected = vm.package.documentTypes.indexOf(documentType.id) !== -1;
                 });
                 vm.documentTypes = documentTypes;
             });
 
-            // get all templates
+            // Get all templates
             entityResource.getAll("Template").then(templates => {
                 // a package stores the id as a string so we 
                 // need to convert all ids to string for comparison
                 templates.forEach(template => {
                     template.id = template.id.toString();
+                    template.selected = vm.package.templates.indexOf(template.id) >= 0;
                 });
                 vm.templates = templates;
             });
 
-            // get all stylesheets
+            // Get all stylesheets
             entityResource.getAll("Stylesheet").then(stylesheets => {
+                stylesheets.forEach(stylesheet => {
+                    stylesheet.selected = vm.package.stylesheets.indexOf(stylesheet.name) >= 0;
+                });
                 vm.stylesheets = stylesheets;
             });
 
+            // Get all macros
             entityResource.getAll("Macro").then(macros => {
                 // a package stores the id as a string so we 
                 // need to convert all ids to string for comparison
                 macros.forEach(macro => {
                     macro.id = macro.id.toString();
+                    macro.selected = vm.package.macros.indexOf(macro.id) !== -1;
                 });
                 vm.macros = macros;
             });
 
-            // get all languages
+            // Get all languages
             entityResource.getAll("Language").then(languages => {
                 // a package stores the id as a string so we 
                 // need to convert all ids to string for comparison
                 languages.forEach(language => {
                     language.id = language.id.toString();
+                    language.selected = vm.package.languages.indexOf(language.id) !== -1;
                 });
                 vm.languages = languages;
             });
 
-            // get all dictionary items
+            // Get all dictionary items
             entityResource.getAll("DictionaryItem").then(dictionaryItems => {
                 // a package stores the id as a string so we 
                 // need to convert all ids to string for comparison
                 dictionaryItems.forEach(dictionaryItem => {
                     dictionaryItem.id = dictionaryItem.id.toString();
+                    dictionaryItem.selected = vm.package.dictionaryItems.indexOf(dictionaryItem.id) !== -1;
                 });
                 vm.dictionaryItems = dictionaryItems;
             });
 
-            // get all data types items
+            // Get all data types
             entityResource.getAll("DataType").then(dataTypes => {
                 // a package stores the id as a string so we 
                 // need to convert all ids to string for comparison
                 dataTypes.forEach(dataType => {
                     dataType.id = dataType.id.toString();
+                    dataType.selected = vm.package.dataTypes.indexOf(dataType.id) !== -1;
                 });
                 vm.dataTypes = dataTypes;
             });
@@ -271,6 +299,90 @@
             vm.package.packageView = null;
         }
 
+        function selectDocumentType(doctype) {
+
+            // Check if the document type is already selected.
+            var index = vm.package.documentTypes.indexOf(doctype.id);
+
+            if (index === -1) {
+                vm.package.documentTypes.push(doctype.id);
+            } else {
+                vm.package.documentTypes.splice(index, 1);
+            }
+        }
+
+        function selectTemplate(template) {
+
+            // Check if the template is already selected.
+            var index = vm.package.templates.indexOf(template.id);
+
+            if (index === -1) {
+                vm.package.templates.push(template.id);
+            } else {
+                vm.package.templates.splice(index, 1);
+            }
+        }
+
+        function selectStyleSheet(stylesheet) {
+
+            // Check if the style sheet is already selected.
+            var index = vm.package.stylesheets.indexOf(stylesheet.name);
+
+            if (index === -1) {
+                vm.package.stylesheets.push(stylesheet.name);
+            } else {
+                vm.package.stylesheets.splice(index, 1);
+            }
+        }
+
+        function selectMacro(macro) {
+
+            // Check if the macro is already selected.
+            var index = vm.package.macros.indexOf(macro.id);
+
+            if (index === -1) {
+                vm.package.macros.push(macro.id);
+            } else {
+                vm.package.macros.splice(index, 1);
+            }
+        }
+
+        function selectLanguage(language) {
+
+            // Check if the language is already selected.
+            var index = vm.package.languages.indexOf(language.id);
+
+            if (index === -1) {
+                vm.package.languages.push(language.id);
+            } else {
+                vm.package.languages.splice(index, 1);
+            }
+        }
+
+        function selectDictionaryItem(dictionaryItem) {
+
+            // Check if the dictionary item is already selected.
+            var index = vm.package.dictionaryItems.indexOf(dictionaryItem.id);
+
+            if (index === -1) {
+                vm.package.dictionaryItems.push(dictionaryItem.id);
+            } else {
+                vm.package.dictionaryItems.splice(index, 1);
+            }
+        }
+
+        function selectDataType(dataType) {
+
+            // Check if the dictionary item is already selected.
+            var index = vm.package.dataTypes.indexOf(dataType.id);
+
+            if (index === -1) {
+                vm.package.dataTypes.push(dataType.id);
+            } else {
+                vm.package.dataTypes.splice(index, 1);
+            }
+        }
+
         function buildContributorsEditor(pkg) {
             
             vm.contributorsEditor = {
diff --git a/src/Umbraco.Web.UI.Client/src/views/packages/edit.html b/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
index 7a95fd9214..53a8e58b58 100644
--- a/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
+++ b/src/Umbraco.Web.UI.Client/src/views/packages/edit.html
@@ -132,21 +132,18 @@
                             </a>
 
                             <label style="padding-left: 0;">
-                                <input type="checkbox" ng-model="vm.package.contentLoadChildNodes" ng-disabled="!vm.package.contentNodeId" />
-                                <localize key="packager_includeAllChildNodes">Include all child nodes</localize>
+                                <umb-checkbox model="vm.package.contentLoadChildNodes"
+                                                disabled="!vm.package.contentNodeId"
+                                                text="{{vm.labels.includeAllChildNodes}}" />
                             </label>
-
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_documentTypes">
                             <div ng-repeat="doctype in ::vm.documentTypes | orderBy:'name'">
                                 <label>
-                                    <input
-                                        type="checkbox"
-                                        ng-model="doctype.selected"
-                                        checklist-model="vm.package.documentTypes"
-                                        checklist-value="doctype.id" />
-                                    {{doctype.name}}
+                                    <umb-checkbox model="doctype.selected"
+                                                  on-change="vm.selectDocumentType(doctype)"
+                                                  text="{{doctype.name}}" />
                                 </label>
                             </div>
                         </umb-control-group>
@@ -154,11 +151,9 @@
                         <umb-control-group label="@treeHeaders_templates">
                             <div ng-repeat="template in ::vm.templates | orderBy:'name'">
                                 <label>
-                                    <input
-                                        type="checkbox"
-                                        checklist-model="vm.package.templates"
-                                        checklist-value="template.id" />
-                                    {{template.name}}
+                                    <umb-checkbox model="template.selected"
+                                                  on-change="vm.selectTemplate(template)"
+                                                  text="{{template.name}}" />
                                 </label>
                             </div>
                         </umb-control-group>
@@ -166,11 +161,9 @@
                         <umb-control-group label="@treeHeaders_stylesheets">
                             <div ng-repeat="stylesheet in ::vm.stylesheets | orderBy:'name'">
                                 <label>
-                                    <input
-                                        type="checkbox"
-                                        checklist-model="vm.package.stylesheets"
-                                        checklist-value="stylesheet.name" />
-                                    {{stylesheet.path}}
+                                    <umb-checkbox model="stylesheet.selected"
+                                                  on-change="vm.selectStyleSheet(stylesheet)"
+                                                  text="{{stylesheet.path}}" />
                                 </label>
                             </div>
                         </umb-control-group>
@@ -178,23 +171,19 @@
                         <umb-control-group label="@treeHeaders_macros">
                             <div ng-repeat="macro in ::vm.macros | orderBy:'name'">
                                 <label>
-                                    <input type="checkbox"
-                                           checklist-model="vm.package.macros"
-                                           checklist-value="macro.id" />
-                                    {{macro.name}}
+                                    <umb-checkbox model="macro.selected"
+                                                  on-change="vm.selectMacro(macro)"
+                                                  text="{{macro.name}}" />
                                 </label>
                             </div>
-
                         </umb-control-group>
 
                         <umb-control-group label="@treeHeaders_languages">
                             <div ng-repeat="language in ::vm.languages | orderBy:'name'">
                                 <label>
-                                    <input
-                                        type="checkbox"
-                                        checklist-model="vm.package.languages"
-                                        checklist-value="language.id" />
-                                    {{language.name}}
+                                    <umb-checkbox model="language.selected"
+                                                  on-change="vm.selectLanguage(language)"
+                                                  text="{{language.name}}" />
                                 </label>
                             </div>
                         </umb-control-group>
@@ -202,11 +191,9 @@
                         <umb-control-group label="@treeHeaders_dictionary">
                             <div ng-repeat="dictionaryItem in ::vm.dictionaryItems | orderBy:'name'">
                                 <label>
-                                    <input
-                                        type="checkbox"
-                                        checklist-model="vm.package.dictionaryItems"
-                                        checklist-value="dictionaryItem.id" />
-                                    {{dictionaryItem.name}}
+                                    <umb-checkbox model="dictionaryItem.selected"
+                                                  on-change="vm.selectDictionaryItem(dictionaryItem)"
+                                                  text="{{dictionaryItem.name}}" />
                                 </label>
                             </div>
                         </umb-control-group>
@@ -214,11 +201,9 @@
                         <umb-control-group label="@treeHeaders_dataTypes">
                             <div ng-repeat="dataType in ::vm.dataTypes | orderBy:'name'">
                                 <label>
-                                    <input
-                                        type="checkbox"
-                                        checklist-model="vm.package.dataTypes"
-                                        checklist-value="dataType.id" />
-                                    {{dataType.name}}
+                                    <umb-checkbox model="dataType.selected"
+                                                  on-change="vm.selectDataType(dataType)"
+                                                  text="{{dataType.name}}" />
                                 </label>
                             </div>
                         </umb-control-group>
@@ -325,7 +310,7 @@
                                 action="vm.createOrUpdatePackage(editPackageForm)"
                                 state="vm.buttonState"
                                 button-style="success"
-                                label="{{vm.buttonLabel}}"
+                                label="{{vm.labels.button}}"
                                 disabled="vm.loading">
                     </umb-button>