yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v8: Use umbCheckbox in packager (#6258)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2019-09-05 17:40:28 +02:00
committed by Sebastiaan Janssen
parent 0534dba12b
commit 73a61e65de
6 changed files with 197 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbcheckbox.directive.js
View File

@@ -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: "&?"
}
};

41
src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbradiobutton.directive.js
View File

@@ -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);
})();

4
src/Umbraco.Web.UI.Client/src/views/components/forms/umb-checkbox.html
View File

@@ -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">

15
src/Umbraco.Web.UI.Client/src/views/components/forms/umb-radiobutton.html
View File

@@ -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>

150
src/Umbraco.Web.UI.Client/src/views/packages/edit.controller.js
View File

@@ -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 = {

65
src/Umbraco.Web.UI.Client/src/views/packages/edit.html
View File

@@ -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>