Skip to content

Commit c5daefd

Browse files
acoumbacoumb
committed
UI updates, toast and dialogs.
1 parent 587f265 commit c5daefd

File tree

3 files changed

+198
-64
lines changed

3 files changed

+198
-64
lines changed

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

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,20 @@
1212
gap: 10px;
1313
}
1414

15+
.alg-toast {
16+
top: 0;
17+
left: 0;
18+
right: 0;
19+
height: 100vh;
20+
padding: var(--uui-size-layout-4);
21+
}
22+
23+
24+
.alg-dialog {
25+
display: none;
26+
left: 50%;
27+
top: 50%;
28+
position: absolute;
29+
transform: translate(-70%,-70%);
30+
z-index: 1;
31+
}

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

Lines changed: 138 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
function dashboardController(notificationsService, overlayService, eventsService, algoliaService, umbracoCmsIntegrationsSearchAlgoliaResource) {
1+
function dashboardController(algoliaService, umbracoCmsIntegrationsSearchAlgoliaResource) {
22
var vm = this;
33

44
const CREATE_INDEX_DEFINITION = "Create Index Definition";
55
const EDIT_INDEX_DEFINITION = "Edit Index Definition";
66

77
vm.loading = false;
8+
vm.delete = false;
89

910
vm.searchQuery = "";
1011
vm.selectedSearchIndex = {};
@@ -23,6 +24,10 @@
2324
vm.search = search;
2425
vm.back = back;
2526

27+
vm.showToast = showToast;
28+
vm.showDeleteDialog = showDeleteDialog;
29+
vm.showBuildDialog = showBuildDialog;
30+
2631
function init() {
2732
/* contentData property:
2833
[
@@ -77,6 +82,10 @@
7782
}
7883
});
7984
},
85+
hideProperties: function () {
86+
this.selectedContentType = {};
87+
this.propertiesList = [];
88+
},
8089
removeContentType: function (contentType) {
8190

8291
const contentTypeIndex = this.contentData.map(obj => obj.contentType.alias).indexOf(contentType.alias);
@@ -176,10 +185,12 @@
176185

177186
function saveIndex() {
178187

179-
console.log(vm.manageIndex.name);
180-
181188
if (vm.manageIndex.name.length == 0 || vm.manageIndex.contentData.length == 0) {
182-
notificationsService.error("Algolia", "Index name and content schema are required.");
189+
vm.showToast({
190+
color: 'danger',
191+
headline: 'Algolia',
192+
message: 'Index name and content schema are required.'
193+
});
183194
return false;
184195
}
185196

@@ -191,9 +202,17 @@
191202
if (response.success) {
192203
vm.manageIndex.reset();
193204
algoliaService.getContentTypes((response) => vm.manageIndex.contentTypes = response);
194-
notificationsService.success("Algolia", "Index saved.");
205+
vm.showToast({
206+
color: 'positive',
207+
headline: 'Algolia',
208+
message: 'Index saved.'
209+
});
195210
} else {
196-
notificationsService.error("Algolia", response.error);
211+
vm.showToast({
212+
color: 'danger',
213+
headline: 'Algolia',
214+
message: response.error
215+
});
197216
}
198217

199218
vm.viewState = "list";
@@ -230,28 +249,7 @@
230249
}
231250

232251
function buildIndex(index) {
233-
const dialogOptions = {
234-
view: "/App_Plugins/UmbracoCms.Integrations/Search/Algolia/views/index.build.html",
235-
index: index,
236-
submit: function (model) {
237-
vm.loading = true;
238-
239-
umbracoCmsIntegrationsSearchAlgoliaResource.buildIndex(model.index.id).then(function (response) {
240-
if (response.failure)
241-
notificationsService.warning("Algolia", "An error has occurred while building the index: " + response.error);
242-
else {
243-
notificationsService.success("Algolia", "Index built successfully.");
244-
vm.loading = false;
245-
overlayService.close();
246-
}
247-
});
248-
},
249-
close: function () {
250-
overlayService.close();
251-
}
252-
};
253-
254-
overlayService.open(dialogOptions);
252+
vm.showBuildDialog(index);
255253
}
256254

257255
function searchIndex(index) {
@@ -260,24 +258,7 @@
260258
}
261259

262260
function deleteIndex(index) {
263-
const dialogOptions = {
264-
title: "Delete",
265-
content: "Are you sure you want to delete index <b>" + index.name + "</b>?",
266-
confirmType: "delete",
267-
submit: function () {
268-
umbracoCmsIntegrationsSearchAlgoliaResource.deleteIndex(index.id).then(function (response) {
269-
if (response.success) {
270-
notificationsService.success("Algolia", "Index deleted.");
271-
getIndices();
272-
} else
273-
notificationsService.error("Algolia", response.error);
274-
275-
overlayService.close();
276-
});
277-
}
278-
};
279-
280-
overlayService.confirm(dialogOptions);
261+
vm.showDeleteDialog(index);
281262
}
282263

283264
function search() {
@@ -295,6 +276,117 @@
295276

296277
vm.viewState = "list";
297278
}
279+
280+
/* Toast Config properties:
281+
* color
282+
* headline
283+
* message
284+
*/
285+
function showToast(config) {
286+
const con = document.querySelector('uui-toast-notification-container');
287+
288+
const toast = document.createElement('uui-toast-notification');
289+
toast.color = config.color;
290+
291+
const toastLayout = document.createElement('uui-toast-notification-layout');
292+
toastLayout.headline = config.headline;
293+
toast.appendChild(toastLayout);
294+
295+
const messageEl = document.createElement('span');
296+
messageEl.innerHTML = config.message;
297+
toastLayout.appendChild(messageEl);
298+
299+
if (con) {
300+
con.appendChild(toast);
301+
}
302+
}
303+
304+
/* delete handlers */
305+
function showDeleteDialog(index) {
306+
const dialog = document.getElementById('deleteDialog');
307+
dialog.style.display = "block";
308+
309+
const p = document.createElement('p');
310+
p.innerHTML = "Are you sure you want to delete index <b>" + index.name + "</b>?";
311+
312+
const dialogLayout = dialog.querySelector('uui-dialog-layout');
313+
dialogLayout.appendChild(p);
314+
315+
// event listeners
316+
var btnCancel = dialog.querySelector('#btnCancel');
317+
btnCancel.addEventListener('click', closeDeleteDialog);
318+
319+
var btnDelete = dialog.querySelector('#btnDelete');
320+
btnDelete.addEventListener('click', function () {
321+
umbracoCmsIntegrationsSearchAlgoliaResource.deleteIndex(index.id).then(function (response) {
322+
if (response.success) {
323+
vm.showToast({
324+
color: 'positive',
325+
headline: 'Algolia',
326+
message: 'Index deleted'
327+
});
328+
getIndices();
329+
} else {
330+
vm.showToast({
331+
color: 'danger',
332+
headline: 'Algolia',
333+
message: 'An error has occurred: ' + response.error
334+
});
335+
}
336+
337+
closeDeleteDialog();
338+
});
339+
});
340+
}
341+
342+
function closeDeleteDialog() {
343+
const dialog = document.getElementById('deleteDialog');
344+
dialog.style.display = "none";
345+
346+
const dialogLayout = dialog.querySelector('uui-dialog-layout');
347+
const p = dialogLayout.querySelector('p');
348+
dialogLayout.removeChild(p);
349+
}
350+
351+
/* build index handlers */
352+
function showBuildDialog(index) {
353+
const dialog = document.getElementById('buildDialog');
354+
dialog.style.display = "block";
355+
356+
// add event listeners
357+
var btnCancel = dialog.querySelector('#btnCancel');
358+
btnCancel.addEventListener('click', closeBuildDialog);
359+
360+
var btnBuild = dialog.querySelector('#btnBuild');
361+
btnBuild.addEventListener('click', function () {
362+
vm.loading = true;
363+
364+
umbracoCmsIntegrationsSearchAlgoliaResource.buildIndex(index.id).then(function (response) {
365+
if (response.failure) {
366+
vm.showToast({
367+
color: 'warning',
368+
headline: 'Algolia',
369+
message: 'An error has occurred while building the index: ' + response.error
370+
});
371+
}
372+
else {
373+
vm.showToast({
374+
color: 'positive',
375+
headline: 'Algolia',
376+
message: 'Index built successfully'
377+
});
378+
vm.loading = false;
379+
}
380+
});
381+
382+
closeBuildDialog();
383+
});
384+
}
385+
386+
function closeBuildDialog() {
387+
const dialog = document.getElementById('buildDialog');
388+
dialog.style.display = "none";
389+
}
298390
}
299391

300392
angular.module("umbraco")

‎src/Umbraco.Cms.Integrations.Search.Algolia/App_Plugins/UmbracoCms.Integrations/Search/Algolia/views/dashboard.html

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ <h5>Manage Algolia Indices</h5>
4545
<uui-icon-registry-essential>
4646
<uui-ref-node ng-repeat="item in index.contentData" name="{{ item.contentType.name }}"
4747
detail="{{ item.propertiesDescription.join(', ') }}">
48-
<uui-icon slot="icon" name="document"></uui-icon>
48+
<umb-icon slot="icon" icon="{{ item.contentType.icon }}"></umb-icon>
4949
</uui-ref-node>
5050
</uui-icon-registry-essential>
5151
</uui-table-cell>
@@ -94,9 +94,14 @@ <h5>Manage Algolia Indices</h5>
9494
<uui-label slot="label">Document Types</uui-label>
9595
<span slot="description">Please select the document types you would like to index, and choose the fields to include.</span>
9696
<uui-icon-registry-essential>
97-
<uui-ref-node ng-repeat="contentType in vm.manageIndex.contentTypesList"
97+
<uui-ref-node selectable
98+
ng-attr-selected="{{contentType.selected || undefined}}"
99+
ng-repeat="contentType in vm.manageIndex.contentTypesList"
100+
ng-on-selected="vm.manageIndex.showProperties(contentType)"
101+
ng-on-unselected="vm.manageIndex.hideProperties()"
98102
name="{{ contentType.name }}"
99103
detail="{{ contentType.alias }}">
104+
<umb-icon slot="icon" icon="{{ contentType.icon }}"></umb-icon>
100105
<uui-tag ng-if="contentType.selected" size="s" slot="tag" color="positive">Selected</uui-tag>
101106
<uui-action-bar slot="actions">
102107
<uui-button label="Choose properties"
@@ -117,25 +122,14 @@ <h5>Manage Algolia Indices</h5>
117122
<uui-label slot="label">{{ vm.manageIndex.selectedContentType.name }} Properties</uui-label>
118123
<uui-icon-registry-essential>
119124
<div class="alg-col-3">
120-
<uui-card-content-node ng-repeat="property in vm.manageIndex.propertiesList"
125+
<uui-card-content-node selectable
126+
ng-attr-selected="{{property.selected || undefined}}"
127+
ng-on-selected="vm.manageIndex.selectProperty(property)"
128+
ng-on-unselected="vm.manageIndex.removeProperty(property)"
129+
ng-repeat="property in vm.manageIndex.propertiesList"
121130
name="{{ property.name }}">
122131
<uui-tag ng-if="property.selected" size="s" slot="tag" color="positive">Selected</uui-tag>
123-
<uui-action-bar slot="actions">
124-
<uui-button label="Select"
125-
color="positive"
126-
ng-if="!property.selected"
127-
ng-click="vm.manageIndex.selectProperty(property)">
128-
<uui-icon name="add"></uui-icon>
129-
</uui-button>
130-
<uui-button label="Remove"
131-
color="danger"
132-
ng-if="property.selected"
133-
ng-click="vm.manageIndex.removeProperty(property)">
134-
<uui-icon name="delete"></uui-icon>
135-
</uui-button>
136-
</uui-action-bar>
137132
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
138-
<li><span style="font-weight: 700">Selected:</span> {{ property.selected }}</li>
139133
<li><span style="font-weight: 700">Alias:</span> {{ property.alias }}</li>
140134
<li><span style="font-weight: 700">Group: </span> {{ property.group }}</li>
141135
</ul>
@@ -193,3 +187,34 @@ <h5>Manage Algolia Indices</h5>
193187
</div>
194188
</div>
195189

190+
<!-- Notifications -->
191+
<uui-toast-notification-container auto-close="5000" bottom-up="" class="alg-toast">
192+
</uui-toast-notification-container>
193+
194+
<uui-icon-registry-essential>
195+
<uui-dialog class="alg-dialog" id="deleteDialog">
196+
<uui-dialog-layout>
197+
<span slot="headline">
198+
<uui-icon name="delete"></uui-icon> Delete
199+
</span>
200+
<!-- Content goes here -->
201+
<uui-button id="btnCancel" slot="actions">Cancel</uui-button>
202+
<uui-button id="btnDelete" slot="actions" look="primary" color="danger">Delete</uui-button>
203+
</uui-dialog-layout>
204+
</uui-dialog>
205+
<uui-dialog class="alg-dialog" id="buildDialog">
206+
<uui-dialog-layout>
207+
<span slot="headline">
208+
<uui-icon name="settings"></uui-icon> Build index
209+
</span>
210+
<p class="umb-alert umb-alert--warning mb2">
211+
This will cause the index to be built.<br>
212+
Depending on how much content there is in your site this could take a while.<br>
213+
It is not recommended to rebuild an index during times of high website traffic
214+
or when editors are editing content.
215+
</p>
216+
<uui-button id="btnCancel" slot="actions">Cancel</uui-button>
217+
<uui-button id="btnBuild" slot="actions" look="primary" color="danger">Build</uui-button>
218+
</uui-dialog-layout>
219+
</uui-dialog>
220+
</uui-icon-registry-essential>

0 commit comments

Comments
 (0)