From c928133e9b9e24e6f77aba2df6d6ce6db0612fdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Fri, 14 Jun 2019 13:07:01 +0200 Subject: [PATCH 001/121] first version --- .../src/less/components/card.less | 30 +++ .../datatypeconfigurationpicker.controller.js | 129 +++++++++++ .../datatypeconfigurationpicker.html | 70 ++++++ .../datatypepicker.controller.js | 217 ++++++------------ .../datatypepicker/datatypepicker.html | 105 +++------ src/Umbraco.Web.UI/Umbraco/config/lang/da.xml | 9 +- src/Umbraco.Web.UI/Umbraco/config/lang/en.xml | 9 +- .../Umbraco/config/lang/en_us.xml | 7 +- 8 files changed, 352 insertions(+), 224 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js create mode 100644 src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html diff --git a/src/Umbraco.Web.UI.Client/src/less/components/card.less b/src/Umbraco.Web.UI.Client/src/less/components/card.less index 8324698685..a01140af23 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/card.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/card.less @@ -141,6 +141,36 @@ color: @ui-option-type-hover; } +.umb-card-grid .umb-card-grid-item-slot { + position: relative; + display: block; + width: 100%; + padding-top: 100%; + border-radius: 3px; + + box-sizing: border-box; + border:1px dashed @ui-action-discreet-border; + + &:hover, &:focus { + color:@ui-action-discreet-type-hover; + border-color:@ui-action-discreet-border-hover; + } + + > span { + position: absolute; + top: 10px; + bottom: 10px; + left: 10px; + right: 10px; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + background-color: transparent; + } +} + + .umb-card-grid a { color: @ui-option-type; text-decoration: none; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js new file mode 100644 index 0000000000..f636072ca8 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.controller.js @@ -0,0 +1,129 @@ +/** + * @ngdoc controller + * @name Umbraco.Editors.DataTypeConfigurationPickerController + * @function + * + * @description + * The controller for the content type editor data type configuration picker dialog + */ + +(function() { + "use strict"; + + function DataTypeConfigurationPicker($scope, $filter, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) { + + var vm = this; + + vm.configs = []; + + vm.loading = true; + + vm.newConfig = newConfig; + vm.pickConfig = pickConfig; + vm.close = close; + + function activate() { + setTitle(); + load(); + } + + function setTitle() { + if (!$scope.model.title) { + localizationService.localize("defaultdialogs_selectEditorConfiguration") + .then(function(data){ + $scope.model.title = data; + }); + } + } + + function load() { + + dataTypeResource.getGroupedDataTypes().then(function(configs) { + + console.log("configs:"); + console.log(configs); + + + console.log("$scope.model") + console.log($scope.model) + + var filteredConfigs = []; + + _.each(configs, function(configGroup) { + for(var i = 0; i + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+ + + + diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js index c86f55b255..c3b219d295 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.controller.js @@ -10,33 +10,24 @@ (function() { "use strict"; - function DataTypePicker($scope, $filter, dataTypeResource, dataTypeHelper, contentTypeResource, localizationService, editorService) { + function DataTypePicker($scope, $filter, dataTypeResource, contentTypeResource, localizationService, editorService) { var vm = this; - + + vm.showDataTypes = true; + vm.dataTypes = []; + vm.loading = true; + vm.loadingConfigs = false; vm.searchTerm = ""; - vm.showTabs = false; - vm.tabsLoaded = 0; - vm.typesAndEditors = []; - vm.userConfigured = []; - vm.loading = false; - vm.tabs = []; - vm.labels = {}; - - vm.onTabChange = onTabChange; - vm.filterItems = filterItems; - vm.showDetailsOverlay = showDetailsOverlay; - vm.hideDetailsOverlay = hideDetailsOverlay; - vm.pickEditor = pickEditor; - vm.pickDataType = pickDataType; + vm.searchResult = null; + + vm.pickType = pickType; vm.close = close; + vm.searchTermChanged = searchTermChanged; function activate() { setTitle(); - loadTabs(); - getGroupedDataTypes(); - getGroupedPropertyEditors(); - + loadTypes(); } function setTitle() { @@ -44,132 +35,86 @@ localizationService.localize("defaultdialogs_selectEditor") .then(function(data){ $scope.model.title = data; - }); + } + ); } } - - function loadTabs() { - - var labels = ["contentTypeEditor_availableEditors", "contentTypeEditor_reuse"]; - - localizationService.localizeMany(labels) - .then(function(data){ - vm.labels.availableDataTypes = data[0]; - vm.labels.reuse = data[1]; - - vm.tabs = [{ - active: true, - id: 1, - label: vm.labels.availableDataTypes, - alias: "Default", - typesAndEditors: [] - }, { - active: false, - id: 2, - label: vm.labels.reuse, - alias: "Reuse", - userConfigured: [] - }]; - - }); - } - - function getGroupedPropertyEditors() { - - vm.loading = true; - - dataTypeResource.getGroupedPropertyEditors().then(function(data) { - vm.tabs[0].typesAndEditors = data; - vm.typesAndEditors = data; - vm.tabsLoaded = vm.tabsLoaded + 1; - checkIfTabContentIsLoaded(); - }); - - } - - function getGroupedDataTypes() { - - vm.loading = true; - - dataTypeResource.getGroupedDataTypes().then(function(data) { - vm.tabs[1].userConfigured = data; - vm.userConfigured = data; - vm.tabsLoaded = vm.tabsLoaded + 1; - checkIfTabContentIsLoaded(); - }); - - } - - function checkIfTabContentIsLoaded() { - if (vm.tabsLoaded === 2) { + + function loadTypes() { + + dataTypeResource.getGroupedPropertyEditors().then(function(dataTypes) { + vm.dataTypes = dataTypes; vm.loading = false; - vm.showTabs = true; - } - } - - function onTabChange(selectedTab) { - vm.tabs.forEach(function(tab) { - tab.active = false; }); - selectedTab.active = true; + + } + + function loadConfigurations() { + + vm.loading = true; + vm.loadingConfigs = true; + + dataTypeResource.getGroupedDataTypes().then(function(configs) { + vm.configs = configs; + vm.loading = false; + performeSearch(); + }); + } - function filterItems() { - // clear item details - $scope.model.itemDetails = null; - - if (vm.searchTerm) { - vm.showTabs = false; - - var regex = new RegExp(vm.searchTerm, "i"); - vm.filterResult = { - userConfigured: filterCollection(vm.userConfigured, regex), - typesAndEditors: filterCollection(vm.typesAndEditors, regex) - }; + + function searchTermChanged() { + + vm.showDataTypes = (vm.searchTerm === ""); + + if(vm.loadingConfigs !== true) { + loadConfigurations() } else { - vm.filterResult = null; - vm.showTabs = true; + performeSearch(); } + } - + + function performeSearch() { + + if (vm.searchTerm) { + if (vm.configs) { + + var regex = new RegExp(vm.searchTerm, "i"); + vm.searchResult = { + configs: filterCollection(vm.configs, regex), + dataTypes: filterCollection(vm.dataTypes, regex) + }; + } + } else { + vm.searchResult = null; + } + + } + function filterCollection(collection, regex) { return _.map(_.keys(collection), function (key) { return { group: key, - dataTypes: $filter('filter')(collection[key], function (dataType) { + entries: $filter('filter')(collection[key], function (dataType) { return regex.test(dataType.name) || regex.test(dataType.alias); }) } }); } - function showDetailsOverlay(property) { - - var propertyDetails = {}; - propertyDetails.icon = property.icon; - propertyDetails.title = property.name; - - $scope.model.itemDetails = propertyDetails; - - } - - function hideDetailsOverlay() { - $scope.model.itemDetails = null; - } - - function pickEditor(propertyEditor) { - + + function pickType(dataType) { + var dataTypeSettings = { - propertyEditor: propertyEditor, + dataType: dataType, property: $scope.model.property, contentTypeName: $scope.model.contentTypeName, - create: true, - view: "views/common/infiniteeditors/datatypesettings/datatypesettings.html", + view: "views/common/infiniteeditors/datatypeconfigurationpicker/datatypeconfigurationpicker.html", + size: "small", submit: function(model) { - contentTypeResource.getPropertyTypeScaffold(model.dataType.id).then(function(propertyType) { - submit(model.dataType, propertyType, true); - editorService.close(); - }); + editorService.close(); + $scope.model.submit(model); }, close: function() { editorService.close(); @@ -179,31 +124,7 @@ editorService.open(dataTypeSettings); } - - function pickDataType(selectedDataType) { - selectedDataType.loading = true; - dataTypeResource.getById(selectedDataType.id).then(function(dataType) { - contentTypeResource.getPropertyTypeScaffold(dataType.id).then(function(propertyType) { - selectedDataType.loading = false; - submit(dataType, propertyType, false); - }); - }); - } - - function submit(dataType, propertyType, isNew) { - // update property - $scope.model.property.config = propertyType.config; - $scope.model.property.editor = propertyType.editor; - $scope.model.property.view = propertyType.view; - $scope.model.property.dataTypeId = dataType.id; - $scope.model.property.dataTypeIcon = dataType.icon; - $scope.model.property.dataTypeName = dataType.name; - - $scope.model.updateSameDataTypes = isNew; - - $scope.model.submit($scope.model); - } - + function close() { if($scope.model.close) { $scope.model.close(); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html index fd859b9e2e..5d29f58665 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/datatypepicker/datatypepicker.html @@ -15,13 +15,12 @@ -
- - -
- - - -
- -
-
-
-
{{key}}
- -
-
- + + + +
+
+
{{key}}
+ +
- -
-
-
-
+ + +
+
+
+
{{result.group}}
-
    -
  • +
  • @@ -103,18 +73,17 @@
-
-
-
+
+
+
{{result.group}}
-