Skip to content

Commit 16a3bec

Browse files
acoumbacoumb
committed
UI updates
1 parent 5dcce0d commit 16a3bec

File tree

9 files changed

+200
-123
lines changed

9 files changed

+200
-123
lines changed

‎src/Umbraco.Cms.Integrations.Search.Algolia/App_Plugins/UmbracoCms.Integrations/Search/Algolia/css/algolia.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.umb-content-grid {
2+
display:grid;
3+
grid-template-columns: repeat(3, 1fr);
4+
gap:10px;
5+
}

‎src/Umbraco.Cms.Integrations.Search.Algolia/App_Plugins/UmbracoCms.Integrations/Search/Algolia/js/algolia.service.js

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,16 @@
22
return {
33
getContentTypes: function (callback) {
44
contentTypeResource.getAll().then(function (data) {
5-
callback(data.map((item) => { return { id: item.id, alias: item.alias, name: item.name, checked: false } }));
5+
callback(data.filter(item => item.parentId == -1 && !item.isElement).map((item) => {
6+
return {
7+
id: item.id,
8+
icon: item.icon,
9+
alias: item.alias,
10+
name: item.name,
11+
selected: false,
12+
allowRemove: false
13+
}
14+
}));
615
});
716
},
817
getPropertiesByContentTypeId: function (contentTypeId, callback) {
@@ -13,10 +22,11 @@
1322
for (var j = 0; j < data.groups[i].properties.length; j++) {
1423
properties.push({
1524
id: data.groups[i].properties[j].id,
25+
icon: "icon-indent",
1626
alias: data.groups[i].properties[j].alias,
1727
name: data.groups[i].properties[j].label,
18-
display: `Group: ${data.groups[i].name} | Property: ${data.groups[i].properties[j].label}`,
19-
checked: false
28+
group: data.groups[i].name,
29+
selected: false
2030
});
2131
}
2232
}

‎src/Umbraco.Cms.Integrations.Search.Algolia/App_Plugins/UmbracoCms.Integrations/Search/Algolia/js/dashboard.controller.js

Lines changed: 115 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
vm.loading = false;
55

66
vm.searchQuery = "";
7-
vm.searchIndex = {};
7+
vm.selectedSearchIndex = {};
88
vm.searchResults = {};
99

1010
vm.viewState = "list";
@@ -20,89 +20,117 @@
2020
vm.search = search;
2121

2222
function init() {
23-
2423
// contentData property:
2524
// array of objects:
2625
// contentType -> string value
26+
// contentTypeIcon -> string value
2727
// properties -> string array
2828
vm.manageIndex = {
2929
id: 0,
3030
name: "",
31-
selectedContentType: "",
32-
contentTypes: [],
33-
properties: [],
34-
contentData: [],
35-
selectContentType: function (contentType) {
36-
37-
this.properties = [];
38-
39-
var checked = !contentType.checked;
40-
41-
if (checked) {
42-
43-
this.selectedContentType = contentType.alias;
44-
this.contentTypes.find(p => p.alias == contentType.alias).checked = true;
45-
46-
var contentItem = {
47-
contentType: contentType.alias,
48-
properties: []
49-
};
50-
51-
this.contentData.push(contentItem);
31+
selectedContentType: {},
32+
contentTypesList: [],
33+
propertiesList: [],
34+
includeProperties: [
35+
{
36+
"alias": "alias",
37+
"header": "Alias"
38+
},
39+
{
40+
"alias": "group",
41+
"header": "Group"
5242
}
53-
else {
54-
this.contentTypes.find(p => p.alias == contentType.alias).checked = false;
55-
56-
const contentTypeIndex = this.contentData.findIndex((obj) => obj.contentType === contentType.alias);
57-
58-
if (contentTypeIndex > -1) this.contentData.splice(contentTypeIndex, 1);
43+
],
44+
contentData: [],
45+
showProperties: function (contentType) {
5946

60-
this.selectedContentType = "";
47+
this.selectedContentType = contentType;
6148

62-
this.properties = [];
63-
}
64-
},
65-
showProperties: function (contentType) {
6649
algoliaService.getPropertiesByContentTypeId(contentType.id, (response) => {
67-
this.properties = response;
50+
this.propertiesList = response;
6851

69-
var contentTypeData = this.contentData.find(p => p.contentType == contentType.alias);
52+
var contentTypeData = this.contentData.find(obj => obj.contentType == contentType.alias);
7053
if (contentTypeData && contentTypeData.properties.length > 0) {
71-
vm.manageIndex.properties = vm.manageIndex.properties.map((obj) => {
54+
vm.manageIndex.propertiesList = vm.manageIndex.propertiesList.map((obj) => {
7255
if (contentTypeData.properties.find(p => p == obj.alias)) {
73-
obj.checked = true;
56+
obj.selected = true;
7457
}
7558

7659
return obj;
7760
});
7861
}
7962
});
8063
},
64+
removeContentType: function (contentType) {
65+
66+
const contentTypeIndex = this.contentData.map(obj => obj.contentType).indexOf(contentType.alias);
67+
this.contentData.splice(contentTypeIndex, 1);
68+
69+
this.selectedContentType = {};
70+
this.contentTypesList.forEach(obj => {
71+
if (obj.alias == contentType.alias) {
72+
obj.selected = false;
73+
obj.allowRemove = false;
74+
}
75+
});
76+
this.propertiesList = [];
77+
},
8178
selectProperty: function (property) {
82-
var checked = !property.checked;
8379

84-
if (this.contentData.length == 0 || this.contentData.find(p => p.contentType === this.selectedContentType) === undefined) {
85-
notificationsService.warning("Please select the property matching content type.");
86-
return false;
87-
}
80+
var contentDataItem = vm.manageIndex.contentData.find(obj => obj.contentType == vm.manageIndex.selectedContentType.alias);
81+
82+
var selected = !property.selected;
83+
if (selected) {
84+
// mark item selected
85+
vm.manageIndex.propertiesList.find(obj => obj.alias == property.alias).selected = true;
86+
87+
// check if content type exists in the contentData array
88+
if (!contentDataItem) {
89+
var contentItem = {
90+
contentType: vm.manageIndex.selectedContentType.alias,
91+
contentTypeIcon: vm.manageIndex.selectedContentType.icon,
92+
properties: []
93+
};
94+
vm.manageIndex.contentData.push(contentItem);
95+
96+
// select content type
97+
vm.manageIndex.contentTypesList.forEach(obj => {
98+
if (obj.alias == vm.manageIndex.selectedContentType.alias) {
99+
obj.selected = true;
100+
obj.allowRemove = true;
101+
}
102+
});
103+
}
88104

89-
if (checked) {
90-
this.properties.find(p => p.alias == property.alias).checked = true;
91-
this.contentData.find(p => p.contentType === this.selectedContentType).properties.push(property.alias);
105+
// add property
106+
vm.manageIndex.contentData.find(obj => obj.contentType == vm.manageIndex.selectedContentType.alias).properties.push(property.alias);
92107
}
93108
else {
94-
const propertyIndex = this.contentData.find(p => p.contentType === this.selectedContentType).properties.indexOf(property.alias);
95-
if (propertyIndex > -1) this.contentData.find(p => p.contentType === this.selectedContentType).properties.splice(propertyIndex, 1);
109+
// deselect item
110+
vm.manageIndex.propertiesList.find(obj => obj.alias == property.alias).selected = false;
111+
112+
// remove property item
113+
const propertyIndex = vm.manageIndex.contentData
114+
.find(obj => obj.contentType == vm.manageIndex.selectedContentType.alias).properties.indexOf(property.alias);
115+
vm.manageIndex.contentData
116+
.find(obj => obj.contentType == vm.manageIndex.selectedContentType.alias).properties.splice(propertyIndex, 1);
96117

97-
this.properties.find(p => p.alias == property.alias).checked = false;
118+
// remove content type item with no properties and deselect
119+
if (vm.manageIndex.contentData.find(obj => obj.contentType == vm.manageIndex.selectedContentType.alias).properties.length == 0) {
120+
vm.manageIndex.contentTypesList.find(obj => obj.alias == vm.manageIndex.selectedContentType.alias).selected = false;
121+
122+
const contentTypeIndex = vm.manageIndex.contentData.map(obj => obj.contentType).indexOf(vm.manageIndex.selectedContentType.alias);
123+
vm.manageIndex.contentData.splice(contentTypeIndex, 1);
124+
}
98125
}
99126
},
100127
reset: function () {
101128
this.visible = false;
129+
this.id = 0;
102130
this.name = "";
103-
this.selectedContentType = "";
104-
this.contentTypes = [];
105-
this.properties = [];
131+
this.selectedContentType = {};
132+
this.contentTypesList = [];
133+
this.propertiesList = [];
106134
this.contentData = [];
107135
}
108136
};
@@ -120,21 +148,16 @@
120148

121149
function addIndex() {
122150
vm.viewState = "manage";
123-
algoliaService.getContentTypes((response) => vm.manageIndex.contentTypes = response);
151+
algoliaService.getContentTypes((response) => vm.manageIndex.contentTypesList = response);
124152
}
125153

126154
function saveIndex() {
127155

128156
if (vm.manageIndex.name.length == 0 || vm.manageIndex.contentData.length == 0) {
129-
notificationsService.error("Index name and content schema are required");
130-
return false;
131-
}
132-
133-
if (vm.manageIndex.contentData.filter(p => p.properties.length == 0).length > 0) {
134-
notificationsService.error("Selected content types must have at least one property.");
157+
notificationsService.error("Algolia", "Index name and content schema are required.");
135158
return false;
136159
}
137-
160+
138161
vm.loading = true;
139162

140163
umbracoCmsIntegrationsSearchAlgoliaResource
@@ -143,8 +166,9 @@
143166
if (response.success) {
144167
vm.manageIndex.reset();
145168
algoliaService.getContentTypes((response) => vm.manageIndex.contentTypes = response);
169+
notificationsService.success("Algolia", "Index saved.");
146170
} else {
147-
notificationsService.error(response.error);
171+
notificationsService.error("Algolia", response.error);
148172
}
149173

150174
vm.viewState = "list";
@@ -165,10 +189,16 @@
165189

166190
algoliaService.getContentTypes((response) => {
167191

168-
vm.manageIndex.contentTypes = response;
192+
vm.manageIndex.contentTypesList = response;
169193

170194
for (var i = 0; i < vm.manageIndex.contentData.length; i++) {
171-
vm.manageIndex.contentTypes.find(p => p.alias === vm.manageIndex.contentData[i].contentType).checked = true;
195+
196+
vm.manageIndex.contentTypesList.forEach(obj => {
197+
if (obj.alias == vm.manageIndex.contentData[i].contentType) {
198+
obj.selected = true;
199+
obj.allowRemove = true;
200+
}
201+
});
172202
}
173203
});
174204
}
@@ -182,8 +212,9 @@
182212

183213
umbracoCmsIntegrationsSearchAlgoliaResource.buildIndex(model.index.id).then(function (response) {
184214
if (response.failure)
185-
notificationsService.warning("An error has occurred while building the index: " + response.error);
215+
notificationsService.warning("Algolia", "An error has occurred while building the index: " + response.error);
186216
else {
217+
notificationsService.success("Algolia", "Index built successfully.");
187218
vm.loading = false;
188219
overlayService.close();
189220
}
@@ -199,17 +230,32 @@
199230

200231
function searchIndex(index) {
201232
vm.viewState = "search";
202-
vm.searchIndex = index;
233+
vm.selectedSearchIndex = index;
203234
}
204235

205236
function deleteIndex(index) {
206-
umbracoCmsIntegrationsSearchAlgoliaResource.deleteIndex(index.id).then(function (response) {
207-
getIndices();
208-
});
237+
const dialogOptions = {
238+
title: "Delete",
239+
content: "Are you sure you want to delete index <b>" + index.name + "</b>?",
240+
confirmType: "delete",
241+
submit: function () {
242+
umbracoCmsIntegrationsSearchAlgoliaResource.deleteIndex(index.id).then(function (response) {
243+
if (response.success) {
244+
notificationsService.success("Algolia", "Index deleted.");
245+
getIndices();
246+
} else
247+
notificationsService.error("Algolia", response.error);
248+
249+
overlayService.close();
250+
});
251+
}
252+
};
253+
254+
overlayService.confirm(dialogOptions);
209255
}
210256

211257
function search() {
212-
umbracoCmsIntegrationsSearchAlgoliaResource.search(vm.searchIndex.id, vm.searchQuery).then(function (response) {
258+
umbracoCmsIntegrationsSearchAlgoliaResource.search(vm.selectedSearchIndex.id, vm.searchQuery).then(function (response) {
213259
vm.searchResults = response;
214260
});
215261
}

‎src/Umbraco.Cms.Integrations.Search.Algolia/App_Plugins/UmbracoCms.Integrations/Search/Algolia/package.manifest

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,7 @@
77
"~/App_Plugins/UmbracoCms.Integrations/Search/Algolia/js/dashboard.controller.js",
88
"~/App_Plugins/UmbracoCms.Integrations/Search/Algolia/js/algolia.resource.js"
99
],
10-
"css": []
10+
"css": [
11+
"~/App_Plugins/UmbracoCms.Integrations/Search/Algolia/css/algolia.css"
12+
]
1113
}

0 commit comments

Comments
 (0)