Skip to content

Commit 6f29de5

Browse files
nathanwoulfenathanwoulfe
committed
import context as type, destructure repository response, set selected state on load in index definition
1 parent d830790 commit 6f29de5

File tree

4 files changed

+120
-112
lines changed

4 files changed

+120
-112
lines changed

‎src/Umbraco.Cms.Integrations.Search.Algolia/Client/src/dashboard/search-management-dashboard/views/algolia-dashboard-overview.ts‎

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
} from "@umbraco-cms/backoffice/external/lit";
99
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
1010
import { UMB_MODAL_MANAGER_CONTEXT, UMB_CONFIRM_MODAL } from "@umbraco-cms/backoffice/modal";
11-
import { type AlgoliaIndexContext, ALGOLIA_CONTEXT_TOKEN } from '@umbraco-integrations/algolia/context';
11+
import { ALGOLIA_CONTEXT_TOKEN } from '@umbraco-integrations/algolia/context';
1212
import type {
1313
IndexConfigurationModel
1414
} from "@umbraco-integrations/algolia/generated";
@@ -17,7 +17,7 @@ const elementName = "algolia-dashboard-overview";
1717

1818
@customElement(elementName)
1919
export class AlgoliaDashboardOverviewElement extends UmbElementMixin(LitElement) {
20-
#algoliaIndexContext?: AlgoliaIndexContext;
20+
#algoliaIndexContext!: typeof ALGOLIA_CONTEXT_TOKEN.TYPE;
2121

2222
@state()
2323
private _loading = false;
@@ -28,8 +28,8 @@ export class AlgoliaDashboardOverviewElement extends UmbElementMixin(LitElement)
2828
constructor() {
2929
super();
3030

31-
this.consumeContext(ALGOLIA_CONTEXT_TOKEN, (_instance) => {
32-
this.#algoliaIndexContext = _instance;
31+
this.consumeContext(ALGOLIA_CONTEXT_TOKEN, (context) => {
32+
this.#algoliaIndexContext = context;
3333
});
3434
}
3535

@@ -41,8 +41,10 @@ export class AlgoliaDashboardOverviewElement extends UmbElementMixin(LitElement)
4141
async #getIndices() {
4242
this._loading = true;
4343

44-
var response = await this.#algoliaIndexContext?.getIndices();
45-
this._indices = response?.data as IndexConfigurationModel[];
44+
const { data } = await this.#algoliaIndexContext!.getIndices();
45+
if (data) {
46+
this._indices = data;
47+
}
4648

4749
this._loading = false;
4850
}
@@ -66,14 +68,12 @@ export class AlgoliaDashboardOverviewElement extends UmbElementMixin(LitElement)
6668
}
6769
}
6870
);
69-
await modalContext
70-
?.onSubmit()
71-
.then(async () => {
72-
this._loading = true;
73-
await this.#algoliaIndexContext?.buildIndex(index);
74-
this._loading = false;
75-
})
76-
.catch(() => undefined);
71+
72+
await modalContext.onSubmit().catch(() => undefined);
73+
74+
this._loading = true;
75+
await this.#algoliaIndexContext?.buildIndex(index);
76+
this._loading = false;
7777
}
7878

7979
async #onDeleteIndex(index: IndexConfigurationModel) {
@@ -92,15 +92,13 @@ export class AlgoliaDashboardOverviewElement extends UmbElementMixin(LitElement)
9292
}
9393
}
9494
);
95-
modalContext
96-
?.onSubmit()
97-
.then(async () => {
98-
this._loading = true;
99-
await this.#algoliaIndexContext?.deleteIndex(index.id);
100-
this.#getIndices();
101-
this._loading = false;
102-
})
103-
.catch(() => undefined);
95+
96+
await modalContext.onSubmit().catch(() => undefined);
97+
98+
this._loading = true;
99+
await this.#algoliaIndexContext?.deleteIndex(index.id);
100+
this.#getIndices();
101+
this._loading = false;
104102
}
105103

106104
#renderIndicesList() {

‎src/Umbraco.Cms.Integrations.Search.Algolia/Client/src/dashboard/search-management-dashboard/views/algolia-index.ts‎

Lines changed: 86 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,8 @@ import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
1111
import {
1212
UMB_NOTIFICATION_CONTEXT,
1313
} from "@umbraco-cms/backoffice/notification";
14-
15-
import { type AlgoliaIndexContext, ALGOLIA_CONTEXT_TOKEN } from '@umbraco-integrations/algolia/context';
16-
14+
import type { UUIInputEvent } from "@umbraco-cms/backoffice/external/uui";
15+
import { ALGOLIA_CONTEXT_TOKEN } from '@umbraco-integrations/algolia/context';
1716
import type {
1817
IndexConfigurationModel,
1918
ContentTypeDtoModel
@@ -23,7 +22,7 @@ const elementName = "algolia-index";
2322

2423
@customElement(elementName)
2524
export class AlgoliaIndexElement extends UmbElementMixin(LitElement) {
26-
#algoliaIndexContext?: AlgoliaIndexContext;
25+
#algoliaIndexContext!: typeof ALGOLIA_CONTEXT_TOKEN.TYPE;
2726

2827
@property()
2928
indexId!: string;
@@ -39,23 +38,21 @@ export class AlgoliaIndexElement extends UmbElementMixin(LitElement) {
3938
private _contentTypes: Array<ContentTypeDtoModel> = [];
4039

4140
@state()
42-
private _showContentTypeProperties: boolean;
41+
private _showContentTypeProperties = false;
4342

4443
constructor() {
4544
super();
4645

47-
this.consumeContext(ALGOLIA_CONTEXT_TOKEN, (_instance) => {
48-
this.#algoliaIndexContext = _instance;
46+
this.consumeContext(ALGOLIA_CONTEXT_TOKEN, (context) => {
47+
this.#algoliaIndexContext = context;
4948
});
50-
51-
this._showContentTypeProperties = false;
5249
}
5350

54-
connectedCallback() {
51+
async connectedCallback() {
5552
super.connectedCallback();
5653

5754
if (this.indexId.length > 0) {
58-
this.#getContentTypesWithIndex();
55+
await this.#getContentTypesWithIndex();
5956
this.#getIndex();
6057
}
6158
else {
@@ -64,38 +61,54 @@ export class AlgoliaIndexElement extends UmbElementMixin(LitElement) {
6461
}
6562

6663
async #getContentTypes() {
67-
var response = await this.#algoliaIndexContext?.getContentTypes();
68-
this._contentTypes = response?.data as Array<ContentTypeDtoModel>;
64+
const { data } = await this.#algoliaIndexContext.getContentTypes();
65+
if (!data) return;
66+
67+
this._contentTypes = data;
6968
}
7069

7170
async #getContentTypesWithIndex() {
72-
var response = await this.#algoliaIndexContext?.getContentTypesWithIndex(Number(this.indexId));
73-
this._contentTypes = response?.data as Array<ContentTypeDtoModel>;
71+
const { data } = await this.#algoliaIndexContext.getContentTypesWithIndex(Number(this.indexId));
72+
if (!data) return;
73+
74+
this._contentTypes = data;
7475
}
7576

7677
async #getIndex() {
77-
var response = await this.#algoliaIndexContext?.getIndexById(Number(this.indexId));
78-
this._model = response?.data as IndexConfigurationModel;
78+
const { data } = await this.#algoliaIndexContext.getIndexById(Number(this.indexId));
79+
if (!data) return;
80+
81+
this._model = data;
82+
83+
if (this._model.contentData.length) {
84+
this._showContentTypeProperties = true;
85+
}
7986
}
8087

88+
#handleNameChange(e: UUIInputEvent) {
89+
this._model.name = e.target.value.toString();
90+
}
91+
8192
async #contentTypeSelected(id: number) {
8293
this._contentTypes = this._contentTypes.map((obj) => {
83-
if (obj.id == id) {
94+
if (obj.id === id) {
8495
obj.selected = true;
8596
}
8697
return obj;
8798
});
99+
88100
this._showContentTypeProperties = true;
89101
}
90102

91103
async #contentTypeDeselected(id: number) {
92104
this._contentTypes = this._contentTypes.map((obj) => {
93-
if (obj.id == id) {
105+
if (obj.id === id) {
94106
obj.selected = false;
95107
}
96108
return obj;
97109
});
98-
this._showContentTypeProperties = false;
110+
111+
this._showContentTypeProperties = this._contentTypes.filter(x => x.selected).length !== 0;
99112
}
100113

101114
async #contentTypePropertySelected(contentType: ContentTypeDtoModel | undefined, id: number) {
@@ -134,27 +147,21 @@ export class AlgoliaIndexElement extends UmbElementMixin(LitElement) {
134147
async #handleSubmit(e: SubmitEvent) {
135148
e.preventDefault();
136149

137-
const form = e.target as HTMLFormElement;
138-
const formData = new FormData(form);
139-
140-
const indexName = this.indexId.length > 0
141-
? this._model.name
142-
: formData.get("indexName") as string;
143-
144-
if (indexName.length == 0 || this._contentTypes === undefined || this._contentTypes.filter(obj => obj.selected).length == 0) {
150+
if (this._model.name.length == 0 || this._contentTypes === undefined || this._contentTypes?.filter(obj => obj.selected).length == 0) {
145151
this.#showError("Index name and content schema are required.");
146152
return;
147153
}
148154

149155
const indexConfiguration: IndexConfigurationModel = {
150156
id: 0,
151-
name: indexName,
157+
name: this._model.name,
152158
contentData: []
153159
};
154160

155161
if (this.indexId.length > 0) {
156162
indexConfiguration.id = Number(this.indexId);
157163
}
164+
158165
indexConfiguration.contentData = this._contentTypes;
159166

160167
await this.#algoliaIndexContext?.saveIndex(indexConfiguration);
@@ -174,12 +181,13 @@ export class AlgoliaIndexElement extends UmbElementMixin(LitElement) {
174181
return html`
175182
${this._contentTypes.map((contentType) => {
176183
return html`
177-
<uui-ref-node id="dc_${contentType.alias}_${contentType.id}"
178-
selectable
179-
name=${contentType.name}
180-
@selected=${() => this.#contentTypeSelected(contentType.id)}
181-
@deselected=${() => this.#contentTypeDeselected(contentType.id)}>
182-
<uui-icon slot="icon" name=${contentType.icon}></uui-icon>
184+
<uui-ref-node
185+
selectable
186+
?selected=${contentType.selected}
187+
name=${contentType.name}
188+
@selected=${() => this.#contentTypeSelected(contentType.id)}
189+
@deselected=${() => this.#contentTypeDeselected(contentType.id)}>
190+
<umb-icon slot="icon" name=${contentType.icon}></umb-icon>
183191
${contentType.selected ? html`<uui-tag size="s" slot="tag" color="positive">Selected</uui-tag>` : ''}
184192
<uui-action-bar slot="actions">
185193
<uui-button label="Remove" color="danger">
@@ -195,29 +203,33 @@ export class AlgoliaIndexElement extends UmbElementMixin(LitElement) {
195203
private renderContentTypeProperties() {
196204
if (this._showContentTypeProperties === false) return nothing;
197205

198-
const selectedContentType = this._contentTypes.find((obj) => obj.selected == true);
206+
const selectedContentTypes = this._contentTypes.filter((obj) => obj.selected == true);
199207

200-
if (selectedContentType === undefined) return nothing;
208+
if (!selectedContentTypes?.length) return nothing;
201209

202210
return html`
203-
<uui-form-layout-item>
204-
<uui-label slot="label">${selectedContentType.name} Properties</uui-label>
205-
<div class="alg-col-3">
206-
${selectedContentType.properties.map((property) => {
207-
return html`
208-
<uui-card-content-node selectable
209-
@selected=${() => this.#contentTypePropertySelected(selectedContentType, property.id)}
210-
@deselected=${() => this.#contentTypePropertyDeselected(selectedContentType, property.id)}
211-
name=${property.name}>
212-
${property.selected ? html`<uui-tag size="s" slot="tag" color="positive">Selected</uui-tag>` : ''}
213-
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
214-
<li><span style="font-weight: 700">Group: </span> ${property.group}</li>
215-
</ul>
216-
</uui-card-content-node>
217-
`;
218-
})}
219-
</div>
220-
</uui-form-layout-item>
211+
${selectedContentTypes.map(selectedContentType => html`
212+
<uui-form-layout-item>
213+
<uui-label slot="label">${selectedContentType.name} Properties</uui-label>
214+
<div id="grid">
215+
${selectedContentType.properties.map((property) => {
216+
return html`
217+
<uui-card-content-node
218+
selectable
219+
?selected=${property.selected}
220+
@selected=${() => this.#contentTypePropertySelected(selectedContentType, property.id)}
221+
@deselected=${() => this.#contentTypePropertyDeselected(selectedContentType, property.id)}
222+
name=${property.name}>
223+
${property.selected ? html`<uui-tag size="s" slot="tag" color="positive">Selected</uui-tag>` : ''}
224+
<ul style="list-style: none; padding-inline-start: 0px; margin: 0;">
225+
<li><span style="font-weight: 700">Group: </span> ${property.group}</li>
226+
</ul>
227+
</uui-card-content-node>
228+
`;
229+
})}
230+
</div>
231+
</uui-form-layout-item>
232+
`)}
221233
`;
222234
}
223235

@@ -226,22 +238,25 @@ export class AlgoliaIndexElement extends UmbElementMixin(LitElement) {
226238
<uui-box headline=${this.indexId.length > 0 ? "Create Index Definition" : "Edit Index Definition"}>
227239
<uui-form>
228240
<form id="manageIndexFrm" name="manageIndexFrm" @submit=${this.#handleSubmit}>
229-
<uui-form-layout-item>
230-
<uui-label slot="label" for="inName" required="">Name</uui-label>
231-
<span class="alg-description" slot="description">Please enter a name for the index. After save,<br /> you will not be able to change it.</span>
232-
<div>
233-
<uui-input type="text" name="indexName" label="indexName" ?disabled=${this.indexId.length > 0} .value=${this._model.name} style="width: 17%"></uui-input>
234-
</div>
235-
</uui-form-layout-item>
236-
237-
<div class="alg-col-2">
238-
<uui-form-layout-item>
239-
<uui-label slot="label">Document Types</uui-label>
240-
<span class="alg-description" slot="description">Please select the document types you would like to index, and choose the fields to include.</span>
241+
<umb-property-layout
242+
label="Name"
243+
description="Please enter a name for the index. After save, you will not be able to change it.">
244+
<uui-input
245+
slot="editor"
246+
?disabled=${this.indexId.length > 0}
247+
.value=${this._model.name}
248+
@change=${this.#handleNameChange}></uui-input>
249+
</umb-property-layout>
250+
251+
<umb-property-layout
252+
label="Document Types"
253+
description="Please select the document types you would like to index, and choose the fields to include.">
254+
<div slot="editor">
241255
${this.renderContentTypes()}
242-
</uui-form-layout-item>
243-
${this.renderContentTypeProperties()}
244-
</div>
256+
${this.renderContentTypeProperties()}
257+
</div>
258+
</umb-property-layout>
259+
245260
<uui-button type="submit" label=${this.localize.term("buttons_save")} look="primary" color="positive"></uui-button>
246261
</form>
247262
</uui-form>
@@ -251,16 +266,7 @@ export class AlgoliaIndexElement extends UmbElementMixin(LitElement) {
251266

252267
static styles = [
253268
css`
254-
.center {
255-
display: grid;
256-
place-items: center;
257-
}
258-
.alg-col-2 {
259-
display: grid;
260-
grid-template-columns: 25% 60%;
261-
gap: 20px;
262-
}
263-
.alg-col-3 {
269+
#grid {
264270
display: grid;
265271
grid-template-columns: 33% 33% 33%;
266272
gap: 10px;

0 commit comments

Comments
 (0)