Skip to content
This repository was archived by the owner on Dec 13, 2021. It is now read-only.

POC: Swap 'Doc Type Picker' with List View's layout control #45

Open
wants to merge 11 commits into
base: develop
Choose a base branch
from
Open

POC: Swap 'Doc Type Picker' with List View's layout control #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
763220f
POC: Swap 'Doc Type Picker' with List View's layout control
Jan 23, 2019
8c51eba
Create build process for Azure Pipelines
Jul 25, 2019
b034480
Merge branch 'azure-pipelines' into develop
Jul 25, 2019
07eb44c
Add new files to solution items
Jul 25, 2019
3d7f0c9
Merge branch 'develop' into feature-24
Jul 25, 2019
e5d7473
Don't add new type to model until after a doctype is selected
Jul 25, 2019
12ebc04
Drop doctype alias to new line
Jul 26, 2019
5949b6b
Remove files from unrelated branch
Jul 26, 2019
b322920
Use confirm dialog before removing doctype
Jul 26, 2019
73bd1d2
Resolve issue with editing existing types
Jul 26, 2019
3421829
Refactor to avoid multiple calls to vm.getContentType in view
Jul 26, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 8 additions & 12 deletions src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/css/innercontent.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
/* Inner Content - Doc Type Picker */

.inner-content__doctypepicker table input,
.inner-content__doctypepicker table select {
width: 100%;
padding-right: 0;
.inner-content__doctypepicker .inner-content__help-container {
text-align: right;
margin-bottom: .5em;
}

.inner-content__doctypepicker table td.icon-navigation,
.inner-content__doctypepicker i.inner-content__help-icon {
vertical-align: middle;
color: #CCC;
}

.inner-content__doctypepicker table td.icon-navigation:hover,
.inner-content__doctypepicker i.inner-content__help-icon:hover {
color: #343434;
}
.inner-content__doctypepicker i.inner-content__help-icon:hover {
color: #343434;
}

.inner-content__doctypepicker table .td-min {
width: 1px;
.inner-content__doctypepicker .list-view-layout__system {
width: 100%;
}


/* Inner Content - Content Overlay Panel */

.inner-content-overlay > .umb-overlay-right > .umb-overlay__form > .umb-overlay-container {
Expand Down
103 changes: 96 additions & 7 deletions src/Our.Umbraco.InnerContent/Web/UI/App_Plugins/InnerContent/js/innercontent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Prevalue Editors
// Prevalue Editors
angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTypePickerController", [

"$scope",
Expand All @@ -7,10 +7,17 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy
function ($scope, innerContentService) {

var vm = this;
vm.docTypes = [];
vm.selectedDocTypes = [];
vm.selectedItems = [];
vm.add = add;
vm.remove = remove;
vm.tooltipMouseOver = tooltipMouseOver;
vm.tooltipMouseLeave = tooltipMouseLeave;
vm.getContentType = getContentType;
vm.openDocTypePicker = openDocTypePicker;
vm.showPrompt = showPrompt;
vm.hidePrompt = hidePrompt;

vm.sortableOptions = {
axis: "y",
Expand All @@ -33,23 +40,35 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy

innerContentService.getAllContentTypes().then(function (docTypes) {
vm.docTypes = docTypes;
initSelectedItems();
updateSelectedDocTypes();

$scope.$watch('vm.selectedItems', _.debounce(function (newVal, oldVal) {
if (newVal !== oldVal) {
updateModel();
}
}, 300), true);
});

if (!$scope.model.value) {
$scope.model.value = [];
add();
}

function add() {
$scope.model.value.push({
icContentTypeGuid: "",
nameTemplate: ""
});
var newItem = {
guid: "",
nameTemplate: "",
icon: "",
name: "",
alias: ""
};
openDocTypePicker(newItem, true);
setDirty();
};

function remove(index) {
$scope.model.value.splice(index, 1);
vm.selectedItems.splice(index, 1);
updateSelectedDocTypes();
setDirty();
};

Expand All @@ -69,6 +88,76 @@ angular.module("umbraco").controller("Our.Umbraco.InnerContent.Controllers.DocTy
};
};

function initSelectedItems() {
vm.selectedItems = _.map($scope.model.value, function (i) {
var docType = getContentType(i.icContentTypeGuid);

return {
guid: i.icContentTypeGuid,
nameTemplate: i.nameTemplate,
icon: docType.icon,
name: docType.name,
alias: docType.alias
};
});
}

function updateSelectedDocTypes() {
vm.selectedDocTypes = _.filter(vm.docTypes, function (i) {
var match = _.find(vm.selectedItems, function (c) {
return c.guid === i.guid;
});

return match !== undefined;
});
};

function updateModel() {
$scope.model.value = _.map(vm.selectedItems, function (i) {
return {
icContentTypeGuid: i.guid,
nameTemplate: i.nameTemplate
};
});
}

function getContentType(guid) {
return _.find(vm.docTypes, function (d) {
return d.guid === guid;
});
};

function openDocTypePicker(item, isNew) {
vm.docTypePicker = {
view: "itempicker",
availableItems: vm.docTypes,
selectedItems: vm.selectedDocTypes,
show: true,
submit: function (model) {
item.guid = model.selectedItem.guid;
item.icon = model.selectedItem.icon;
item.name = model.selectedItem.name;
item.alias = model.selectedItem.alias;

if (isNew === true) {
vm.selectedItems.push(item);
}

updateSelectedDocTypes();
vm.docTypePicker.show = false;
vm.docTypePicker = null;
}
};
};

function showPrompt(item) {
item.promptIsVisible = true;
};

function hidePrompt(item) {
delete item.promptIsVisible;
};

function setDirty() {
if ($scope.propertyForm) {
$scope.propertyForm.$setDirty();
Expand Down
73 changes: 37 additions & 36 deletions ...mbraco.InnerContent/Web/UI/App_Plugins/InnerContent/views/innercontent.doctypepicker.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,42 +1,43 @@
<div class="inner-content__doctypepicker" ng-controller="Our.Umbraco.InnerContent.Controllers.DocTypePickerController as vm">
<div>
<table class="table table-striped">
<thead>
<tr>
<th class="td-min" />
<th>
Document Type
</th>
<th>
Name Template
<i class="icon icon-help-alt inner-content__help-icon"
data-tooltip="Enter an angularjs expression to evaluate against each item for its name."
ng-mouseover="vm.tooltipMouseOver($event)"
ng-mouseleave="vm.tooltipMouseLeave()"></i>
</th>
<th class="td-min" ng-show="model.value.length > 1" />
</tr>
</thead>
<tbody ui-sortable="vm.sortableOptions" ng-model="model.value">
<tr ng-repeat="config in model.value">
<td class="icon icon-navigation"></td>
<td>
<select ng-options="dt.guid as dt.name for dt in vm.docTypes"
ng-model="config.icContentTypeGuid" required></select>
</td>
<td>
<input type="text" ng-model="config.nameTemplate" />
</td>
<td ng-show="model.value.length > 1">
<a class="btn btn-danger" ng-click="vm.remove($index)">Remove</a>
</td>
</tr>
</tbody>
</table>
<div>
<a href="" class="btn" ng-click="vm.add()">Add</a>
<div class="inner-content__help-container">
<i class="icon icon-help-alt inner-content__help-icon"
data-tooltip="Name Template: Enter an angularjs expression to evaluate against each item for its name."
ng-mouseover="vm.tooltipMouseOver($event)"
ng-mouseleave="vm.tooltipMouseLeave()"></i>
</div>
<div class="list-view-layouts" ui-sortable="vm.sortableOptions" ng-model="vm.selectedItems">
<div class="list-view-layout" ng-repeat="item in vm.selectedItems">
<i class="icon-navigation list-view-layout__sort-handle"></i>
<div>
<a href="" ng-click="vm.openDocTypePicker(item)" class="list-view-layout__icon">
<i class="{{ item.icon || 'icon-stop' }}"></i>
</a>
</div>
<div class="list-view-layout__name">
<span class="list-view-layout__name-text">{{ item.name || 'Name' }}</span>
<span class="list-view-layout__system">({{ item.alias || 'alias' }})</span>
</div>
<div class="list-view-layout__path">
<input type="text" ng-model="item.nameTemplate" placeholder="name template..." class="-full-width-input" />
</div>
<div>
<div class="list-view-layout__remove">
<i class="icon-trash" ng-click="vm.showPrompt(item)"></i>
<umb-confirm-action ng-if="item.promptIsVisible"
direction="left"
on-confirm="vm.remove($index)"
on-cancel="vm.hidePrompt(item)">
</umb-confirm-action>
</div>
</div>
</div>
<a href="" class="list-view-add-layout" ng-click="vm.add()">Add Content Type</a>
</div>
<umb-overlay ng-if="vm.docTypePicker.show"
model="vm.docTypePicker"
view="vm.docTypePicker.view"
position="right">
</umb-overlay>
<umb-tooltip ng-if="vm.tooltip.show" event="vm.tooltip.event">
{{vm.tooltip.content}}
</umb-tooltip>
Expand Down