Skip to content

Commit b58c97f

Browse files
abjernerabjerner
committed
Added support for global redirects events in the backoffice
- introduced "redirects.onModalLoad" event for when the add redirect or edit redirect modal is loaded - introduced "redirects.onDashboardLoad" event for when the dashboard is loaded
1 parent bf924ba commit b58c97f

File tree

5 files changed

+111
-14
lines changed

5 files changed

+111
-14
lines changed

‎src/Skybrud.Umbraco.Redirects/Manifests/RedirectsPackageManifestReader.cs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ public async Task<IEnumerable<PackageManifest>> ReadPackageManifestsAsync() {
3636
{"@skybrud-redirects/modals/add", $"/App_Plugins/{alias}/Modals/add-redirect.js?v={cacheBuster}" },
3737
{"@skybrud-redirects/modals/edit", $"/App_Plugins/{alias}/Modals/edit-redirect.js?v={cacheBuster}"},
3838
{"@skybrud-redirects/elements/destination", $"/App_Plugins/{alias}/Elements/Destination.js?v={cacheBuster}"},
39-
{"@skybrud-redirects/elements/from-now", $"/App_Plugins/{alias}/Elements/FromNow.js?v={cacheBuster}"}
39+
{"@skybrud-redirects/elements/from-now", $"/App_Plugins/{alias}/Elements/FromNow.js?v={cacheBuster}"},
40+
{"@skybrud-redirects/events", $"/App_Plugins/{alias}/Events/Index.js?v={cacheBuster}"}
4041
}
4142
}
4243
}

‎src/Skybrud.Umbraco.Redirects/wwwroot/Elements/Dashboard.js

Lines changed: 58 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ import { RedirectsService } from "@skybrud-redirects/service";
1111
import { REDIRECTS_ADD_REDIRECT_MODAL } from "@skybrud-redirects/modals/add";
1212
import { REDIRECTS_EDIT_REDIRECT_MODAL } from "@skybrud-redirects/modals/edit";
1313

14+
import { RedirectsDashboardLoadEvent } from "@skybrud-redirects/events";
15+
1416
function ucfirst(value) {
1517
return String(value).charAt(0).toUpperCase() + String(value).slice(1);
1618
}
@@ -87,6 +89,31 @@ export class RedirectsDashboardElement extends UmbElementMixin(LitElement) {
8789
{ name: this.localize.term("redirects_url"), value: "url" }
8890
];
8991

92+
this.addButton = {
93+
alias: "add",
94+
label: this.localize.term("redirects_addRedirect"),
95+
action: this.add,
96+
look: "primary",
97+
color: "positive",
98+
subButtons: []
99+
};
100+
101+
this.reloadButton = {
102+
alias: "reload",
103+
label: this.localize.term("redirects_reload"),
104+
action: this.reload,
105+
look: "outline",
106+
color: "default",
107+
subButtons: []
108+
};
109+
110+
this.dashboard = {
111+
addButton: this.addButton,
112+
reloadButton: this.reloadButton,
113+
buttons: [this.addButton, this.reloadButton],
114+
requestUpdate: self.requestUpdate
115+
};
116+
90117
RedirectsService.getRootNodes().then(function (res) {
91118

92119
const temp = [
@@ -112,6 +139,10 @@ export class RedirectsDashboardElement extends UmbElementMixin(LitElement) {
112139
this._notificationContext = instance;
113140
});
114141

142+
window.dispatchEvent(new RedirectsDashboardLoadEvent("redirects.onDashboardLoad", {
143+
dashboard: self.dashboard
144+
}));
145+
115146
}
116147

117148
updateRedirects(page) {
@@ -132,6 +163,7 @@ export class RedirectsDashboardElement extends UmbElementMixin(LitElement) {
132163
self.pagination = res.data.pagination;
133164
self.loading = false;
134165
self.refreshing = false;
166+
self.reloadButton.state = null;
135167
self.requestUpdate();
136168
}, 200);
137169
});
@@ -207,6 +239,7 @@ export class RedirectsDashboardElement extends UmbElementMixin(LitElement) {
207239

208240
reload() {
209241
this.refreshing = true;
242+
this.reloadButton.state = "waiting";
210243
this.updateRedirects();
211244
}
212245

@@ -270,7 +303,6 @@ export class RedirectsDashboardElement extends UmbElementMixin(LitElement) {
270303
}
271304

272305
renderDestinationWarning(item) {
273-
console.log(item.url + " => ", item);
274306
if (item.destination.null) return html`<small class=\"warning\">${this.localize.term("redirects_deleted")}</small>`;
275307
if (item.destination.trashed) return html`<small class=\"warning\">${this.localize.term("redirects_trashed")}</small>`;
276308
if (item.destination.published === false) return html`<small class=\"warning\">${this.localize.term("redirects_unpublished")}</small>`;
@@ -295,13 +327,28 @@ export class RedirectsDashboardElement extends UmbElementMixin(LitElement) {
295327
</uui-select>
296328
<uui-input id="search" label="${typeToSearch}" style="flex: 1;" placeholder="${typeToSearch}" @keyup=${this.onKeyUp}></uui-input>
297329
</div>
298-
<div style="justify-self: right;">
299-
<uui-button look="primary" color="positive" label="Add" @click=${this.add}>
300-
${this.localize.term("redirects_addRedirect")}
301-
</uui-button>
302-
<uui-button look="outline" color="default" label="Reload" state="${this.refreshing ? 'waiting' : ''}" @click=${this.reload}>
303-
${this.localize.term("redirects_reload")}
304-
</uui-button>
330+
<div style="justify-self: right; display: flex; gap: 10px;">
331+
${repeat(this.dashboard.buttons, (button) => button.alias, (button) => html`
332+
<uui-button-group>
333+
<uui-button look="${button.look}" color="${button.color}" label="${button.label}" state="${button.state}" @click=${button.action}>
334+
${button.label}
335+
</uui-button>
336+
${when(button.subButtons?.length > 0, () => html`
337+
<uui-button popovertarget="my-popover" look="${button.look}" color="${button.color}">
338+
<uui-symbol-more></uui-symbol-more>
339+
</uui-button>
340+
<uui-popover-container id="my-popover" placement="bottom-end">
341+
<div style="display: flex; flex-direction: column;">
342+
${repeat(button.subButtons, (sub) => sub.alias, (sub) => html`
343+
<uui-button look="${sub.look}" label="${sub.label}" @click=${sub.action}>
344+
${sub.label}
345+
</uui-button>
346+
`)}
347+
</div>
348+
</uui-popover-container>
349+
`)}
350+
</uui-button-group>
351+
`)}
305352
</div>
306353
</div>
307354
${when(this.redirects?.length > 0, () => html`
@@ -378,6 +425,9 @@ export class RedirectsDashboardElement extends UmbElementMixin(LitElement) {
378425
:host > div {
379426
padding: 20px;
380427
}
428+
uui-symbol-more {
429+
fill: #fff;
430+
}
381431
.warning {
382432
color: red;
383433
}

‎src/Skybrud.Umbraco.Redirects/wwwroot/Events/Index.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export class RedirectsDashboardLoadEvent extends Event {
2+
constructor(evName, eventInit = {}) {
3+
super(evName, { ...eventInit })
4+
this.dashboard = eventInit.dashboard || {};
5+
}
6+
}
7+
8+
export class RedirectsModalLoadEvent extends Event {
9+
constructor(evName, eventInit = {}) {
10+
super(evName, { ...eventInit })
11+
this.action = eventInit.action || "";
12+
this.redirect = eventInit.redirect ?? {};
13+
this.tabs = Array.isArray(eventInit.tabs) ? eventInit.tabs : [];
14+
}
15+
}

‎src/Skybrud.Umbraco.Redirects/wwwroot/Modals/add-redirect.element.js

Lines changed: 17 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
66
import { RedirectsService } from "@skybrud-redirects/service";
77
import "@skybrud-redirects/elements/destination";
88

9+
import { RedirectsModalLoadEvent } from "@skybrud-redirects/events";
10+
911
export class AddRedirectModelElement extends UmbModalBaseElement {
1012

1113
get rootNodes() {
@@ -35,6 +37,11 @@ export class AddRedirectModelElement extends UmbModalBaseElement {
3537
this._notificationContext = instance;
3638
});
3739

40+
this.redirect = {
41+
redirectType: "permanent",
42+
forward: false
43+
};
44+
3845
RedirectsService.getRootNodes().then(function (res) {
3946

4047
const temp = [
@@ -47,6 +54,11 @@ export class AddRedirectModelElement extends UmbModalBaseElement {
4754

4855
self.rootNodes = temp;
4956

57+
window.dispatchEvent(new RedirectsModalLoadEvent("redirects.onModalLoad", {
58+
action: "add",
59+
redirect: self.redirect
60+
}));
61+
5062
});
5163

5264
}
@@ -166,8 +178,8 @@ export class AddRedirectModelElement extends UmbModalBaseElement {
166178
<small>${property("redirectTypeDescription")}</small>
167179
</div>
168180
<div>
169-
<uui-radio-group name="redirectType">
170-
<uui-radio id="redirectTypePermanent" value="permanent" label="${term("permanent")}" checked="checked"></uui-radio>
181+
<uui-radio-group name="redirectType" value="${this.redirect.redirectType}">
182+
<uui-radio id="redirectTypePermanent" value="permanent" label="${term("permanent")}"></uui-radio>
171183
<uui-radio id="redirectTypeTemporary" value="temporary" label="${term("temporary")}"></uui-radio>
172184
</uui-radio-group>
173185
</div>
@@ -178,9 +190,9 @@ export class AddRedirectModelElement extends UmbModalBaseElement {
178190
<small>${property("forwardQueryStringDescription")}</small>
179191
</div>
180192
<div>
181-
<uui-radio-group name="forward">
182-
<uui-radio id="forwardEnabled" value="enabled" label="${term("enabled")}"></uui-radio>
183-
<uui-radio id="forwardDisabled" value="disabled" label="${term("disabled")}" checked="true"></uui-radio>
193+
<uui-radio-group name="forward" value="${this.redirect.forward}">
194+
<uui-radio id="forwardEnabled" value="true" label="${term("enabled")}"></uui-radio>
195+
<uui-radio id="forwardDisabled" value="false" label="${term("disabled")}"></uui-radio>
184196
</uui-radio-group>
185197
</div>
186198
</div>

‎src/Skybrud.Umbraco.Redirects/wwwroot/Modals/edit-redirect.element.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';
66
import { RedirectsService } from "@skybrud-redirects/service";
77
import "@skybrud-redirects/elements/destination";
88

9+
import { RedirectsModalLoadEvent } from "@skybrud-redirects/events";
10+
911
export class EditRedirectModalElement extends UmbModalBaseElement {
1012

1113
get tab() {
@@ -36,6 +38,8 @@ export class EditRedirectModalElement extends UmbModalBaseElement {
3638

3739
this.submitButtonState = null;
3840

41+
this.tabs = [];
42+
3943
this.rootNodes = [
4044
{ name: self.localize.term("redirects_allSites"), value: "00000000-0000-0000-0000-000000000000", selected: true }
4145
];
@@ -92,6 +96,12 @@ export class EditRedirectModalElement extends UmbModalBaseElement {
9296

9397
self.rootNodes = temp;
9498

99+
window.dispatchEvent(new RedirectsModalLoadEvent("redirects.onModalLoad", {
100+
action: "edit",
101+
redirect: redirect,
102+
tabs: self.tabs
103+
}));
104+
95105
});
96106

97107

@@ -243,6 +253,12 @@ export class EditRedirectModalElement extends UmbModalBaseElement {
243253
<uui-icon slot="icon" name="info"></uui-icon>
244254
${this.localize.term("redirectsTabs_info")}
245255
</uui-tab>
256+
${repeat(self.tabs, (tab) => tab.alias, (tab) => html`
257+
<uui-tab @click="${() => this.changeTab(tab.alias)}" label="${tab.name ?? this.localize.term("redirectsTabs_" + tab.alias)}">
258+
<uui-icon slot="icon" name="${tab.icon}"></uui-icon>
259+
${tab.name ?? this.localize.term("redirectsTabs_" + tab.alias)}
260+
</uui-tab>
261+
`)}
246262
</uui-tab-group>
247263
</div>
248264
`)}
@@ -307,6 +323,9 @@ export class EditRedirectModalElement extends UmbModalBaseElement {
307323
</uui-box>
308324
`)}
309325
${when(this.tab === "info", () => this.renderInfo())}
326+
${repeat(self.tabs, (tab) => tab.alias, (tab) => html`
327+
${when(this.tab === tab.alias, () => tab.render())}
328+
`)}
310329
<div slot="actions">
311330
<uui-button id="cancel" label="${this.localize.term("general_cancel")}" @click="${this.handleCancel}"></uui-button>
312331
<uui-button id="save" color="positive" look="primary" label="${term("save")}" ?disabled="${this.tab === "info"}" state="${this.submitButtonState}" ${this.tab === "info" ? "disabled" : ""} @click="${this.handleConfirm}"></uui-button>

0 commit comments

Comments
 (0)