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

Replace compositions checkboxes (#6956)

Browse Source
This commit is contained in:
Bjarne Fyrstenborg
2020-07-23 15:47:58 +02:00
committed by GitHub
parent f50f4baa3a
commit 34749ec233
3 changed files with 81 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/src/common/directives/components/umbgroupsbuilder.directive.js
View File

@@ -281,6 +281,8 @@
},
selectCompositeContentType: function (selectedContentType) {
var deferred = $q.defer();
//first check if this is a new selection - we need to store this value here before any further digests/async
// because after that the scope.model.compositeContentTypes will be populated with the selected value.
var newSelection = scope.model.compositeContentTypes.indexOf(selectedContentType.alias) === -1;
@@ -308,7 +310,10 @@
//based on the selection, we need to filter the available composite types list
filterAvailableCompositions(selectedContentType, newSelection).then(function () {
deferred.resolve({ selectedContentType, newSelection });
// TODO: Here we could probably re-enable selection if we previously showed a throbber or something
}, function () {
deferred.reject();
});
});
}
@@ -318,10 +323,14 @@
//based on the selection, we need to filter the available composite types list
filterAvailableCompositions(selectedContentType, newSelection).then(function () {
deferred.resolve({ selectedContentType, newSelection });
// TODO: Here we could probably re-enable selection if we previously showed a throbber or something
}, function () {
deferred.reject();
});
}
return deferred.promise;
}
};

50
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.controller.js
View File

@@ -1,15 +1,17 @@
(function () {
"use strict";
function CompositionsController($scope, $location, $filter, overlayService, localizationService) {
function CompositionsController($scope, $location, $filter, $timeout, overlayService, localizationService) {
var vm = this;
var oldModel = null;
vm.showConfirmSubmit = false;
vm.loading = false;
vm.isSelected = isSelected;
vm.openContentType = openContentType;
vm.selectCompositeContentType = selectCompositeContentType;
vm.submit = submit;
vm.close = close;
@@ -23,10 +25,13 @@
$scope.model.title = "Compositions";
}
// group the content types by their container paths
// Group the content types by their container paths
vm.availableGroups = $filter("orderBy")(
_.map(
_.groupBy($scope.model.availableCompositeContentTypes, function (compositeContentType) {
compositeContentType.selected = isSelected(compositeContentType.contentType.alias);
return compositeContentType.contentType.metaData.containerPath;
}), function (group) {
return {
@@ -39,12 +44,12 @@
});
}
function isSelected(alias) {
if ($scope.model.contentType.compositeContentTypes.indexOf(alias) !== -1) {
return true;
}
return false;
}
function openContentType(contentType, section) {
@@ -52,6 +57,43 @@
$location.path(url);
}
function selectCompositeContentType(compositeContentType) {
vm.loading = true;
var contentType = compositeContentType.contentType;
$scope.model.selectCompositeContentType(contentType).then(function (response) {
Utilities.forEach(vm.availableGroups, function (group) {
Utilities.forEach(group.compositeContentTypes, function (obj) {
if (obj.allowed === false) {
obj.selected = false;
}
});
});
$timeout(function () {
vm.loading = false;
}, 500);
}, function () {
$timeout(function () {
vm.loading = false;
}, 500);
});
// Check if the template is already selected.
var index = $scope.model.contentType.compositeContentTypes.indexOf(contentType.alias);
if (index === -1) {
$scope.model.contentType.compositeContentTypes.push(contentType.alias);
} else {
$scope.model.contentType.compositeContentTypes.splice(index, 1);
}
}
function submit() {
if ($scope.model && $scope.model.submit) {

54
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/compositions/compositions.html
View File

@@ -19,38 +19,39 @@
<div class="umb-control-group">
<div class="form-search">
<i class="icon-search"></i>
<input
type="text"
style="width: 100%"
ng-model="searchTerm"
class="umb-search-field search-query input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
<input type="text"
style="width: 100%"
ng-model="searchTerm"
class="umb-search-field search-query input-block-level"
localize="placeholder"
placeholder="@placeholders_filter"
umb-auto-focus
no-dirty-check />
</div>
</div>
<div class="umb-control-group">
<localize key="contentTypeEditor_compositionsDescription"></localize>
</div>
<umb-empty-state
ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
position="center">
<umb-empty-state ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
position="center">
<localize key="contentTypeEditor_noAvailableCompositions"></localize>
</umb-empty-state>
<umb-empty-state
ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1">
<umb-empty-state ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1">
<localize key="contentTypeEditor_compositionInUse"></localize>
</umb-empty-state>
<div ng-show="vm.loading" style="min-height: 20px; position: absolute; left: 0; right: 0; z-index: 1;">
<umb-load-indicator></umb-load-indicator>
</div>
<div ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1 && model.whereCompositionUsed.length > 0">
<h5><localize key="contentTypeEditor_compositionUsageHeading"></localize></h5>
<p><localize key="contentTypeEditor_compositionUsageSpecification"></localize></p>
<ul class="umb-checkbox-list">
<li class="umb-checkbox-list__item"
<li class="umb-checkbox-list__item"
ng-repeat="contentTypeEntity in model.whereCompositionUsed">
<a ng-click="vm.openContentType(contentTypeEntity.contentType, model.section)">
<i class="{{contentTypeEntity.contentType.icon}}"></i>
@@ -68,20 +69,17 @@
</li>
<li class="umb-checkbox-list__item"
ng-repeat="compositeContentType in group.compositeContentTypes | orderBy:'contentType.name' | filter:searchTerm"
ng-class="{'-disabled': compositeContentType.allowed===false || compositeContentType.inherited, '-selected': vm.isSelected(compositeContentType.contentType.alias)}">
<div class="umb-checkbox-list__item-checkbox"
ng-class="{ '-selected': model.compositeContentTypes.indexOf(compositeContentType.contentType.alias)+1 }">
<input type="checkbox"
id="umb-overlay-comp-{{compositeContentType.contentType.key}}"
checklist-model="model.compositeContentTypes"
checklist-value="compositeContentType.contentType.alias"
ng-change="model.selectCompositeContentType(compositeContentType.contentType)"
ng-disabled="compositeContentType.allowed===false || compositeContentType.inherited" />
ng-class="{'-disabled': compositeContentType.allowed === false || compositeContentType.inherited, '-selected': compositeContentType.selected}">
<div class="umb-checkbox-list__item-checkbox" ng-class="{'-selected': compositeContentType.selected }">
<umb-checkbox input-id="umb-overlay-comp-{{compositeContentType.contentType.key}}"
model="compositeContentType.selected"
on-change="vm.selectCompositeContentType(compositeContentType)"
disabled="compositeContentType.allowed === false || compositeContentType.inherited">
</umb-checkbox>
</div>
<label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': compositeContentType.allowed===false}">
<label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': compositeContentType.allowed === false}">
<i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon"></i>
{{ compositeContentType.contentType.name }}
<span class="umb-checkbox-list__item-caption" ng-if="compositeContentType.inherited">(inherited)</span>