streamlines how the disabled check boxes work - will perform better too - fixes re-allowing the checkbox on refilter for ancestors.

This commit is contained in:
Shannon
2016-01-13 16:59:14 +01:00
parent 54669ee2bc
commit 88b8cfb2bd
3 changed files with 60 additions and 58 deletions

View File

@@ -148,10 +148,12 @@
var found = _.find(filteredAvailableCompositeTypes, function (f) {
return current.contentType.alias === f.contentType.alias;
});
//allow if the item was found in the response (allowed) list -
// and ensure its set to allowed if it is currently checked
current.allowed = (selectedContentTypeAliases.indexOf(current.contentType.alias) !== -1) ||
((found !== null && found !== undefined) ? found.allowed : false);
// and ensure its set to allowed if it is currently checked,
// DO not allow if it's a locked content type.
current.allowed = scope.model.lockedCompositeContentTypes.indexOf(current.contentType.alias) === -1 &&
(selectedContentTypeAliases.indexOf(current.contentType.alias) !== -1) || ((found !== null && found !== undefined) ? found.allowed : false);
});
});
@@ -167,6 +169,20 @@
}
function setupAvailableContentTypesModel(result) {
scope.compositionsDialogModel.availableCompositeContentTypes = result;
//iterate each one and set it up
_.each(scope.compositionsDialogModel.availableCompositeContentTypes, function (c) {
//set the inherited flags
c.inherited = false;
if (scope.model.lockedCompositeContentTypes.indexOf(c.contentType.alias) > -1) {
c.inherited = true;
}
// convert icons for composite content types
iconHelper.formatContentTypeIcons([c.contentType]);
});
}
/* ---------- DELETE PROMT ---------- */
scope.togglePrompt = function (object) {
@@ -312,12 +328,7 @@
$q.all([
//get available composite types
availableContentTypeResource(scope.model.id, [], propAliasesExisting).then(function (result) {
scope.compositionsDialogModel.availableCompositeContentTypes = result;
var contentTypes = _.map(scope.compositionsDialogModel.availableCompositeContentTypes, function(c) {
return c.contentType;
});
// convert icons for composite content types
iconHelper.formatContentTypeIcons(contentTypes);
setupAvailableContentTypesModel(result);
}),
//get content type count
countContentTypeResource().then(function(result) {

View File

@@ -5,7 +5,6 @@
var vm = this;
vm.isDisabled = isDisabled;
vm.isSelected = isSelected;
function isSelected(alias) {
@@ -13,12 +12,6 @@
return true;
}
}
function isDisabled(alias) {
if($scope.model.contentType.lockedCompositeContentTypes.indexOf(alias) !== -1) {
return true;
}
}
}
angular.module("umbraco").controller("Umbraco.Overlays.CompositionsOverlay", CompositionsOverlay);

View File

@@ -1,56 +1,54 @@
<div ng-controller="Umbraco.Overlays.CompositionsOverlay as vm">
<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"
placeholder="Filter..."
umb-auto-focus>
</div>
<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"
placeholder="Filter..."
umb-auto-focus>
</div>
</div>
<div class="umb-control-group">
<small>Inherit tabs and properties from an existing document type. New tabs will be added to the current document type or merged if a tab with an identical name exists.</small>
<small>Inherit tabs and properties from an existing document type. New tabs will be added to the current document type or merged if a tab with an identical name exists.</small>
</div>
<umb-empty-state
ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
position="center">
There are no content types available to use as a composition.
</umb-empty-state>
<umb-empty-state
ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1"
position="center">
This content type is used in a composition, and therefore cannot be composed itself.
</umb-empty-state>
<umb-empty-state
ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes <= 1"
position="center">
There are no content types available to use as a composition.
</umb-empty-state>
<umb-empty-state
ng-if="model.availableCompositeContentTypes.length === 0 && model.totalContentTypes > 1"
position="center">
This content type is used in a composition, and therefore cannot be composed itself.
</umb-empty-state>
<ul class="umb-checkbox-list">
<li class="umb-checkbox-list__item"
ng-repeat="compositeContentType in model.availableCompositeContentTypes | filter:searchTerm"
ng-class="{'-disabled': vm.isDisabled(compositeContentType.contentType.alias), '-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" />
</div>
<li class="umb-checkbox-list__item"
<label for="umb-overlay-comp-{{compositeContentType.contentType.key}}" class="umb-checkbox-list__item-text" ng-class="{'-faded': vm.isDisabled(compositeContentType.contentType.alias)}">
<i class="{{ compositeContentType.contentType.icon }} umb-checkbox-list__item-icon"></i>
{{ compositeContentType.contentType.name }}
<span class="umb-checkbox-list__item-caption" ng-if="vm.isDisabled(compositeContentType.contentType.alias)">(inherited)</span>
</label>
ng-repeat="compositeContentType in model.availableCompositeContentTypes | filter:searchTerm"
ng-class="{'-disabled': compositeContentType.allowed===false, '-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"/>
</div>
</li>
<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>
</label>
</li>
</ul>
</div>
</div>