@umbraco-cms/backoffice 14.0.0--preview004-d0befea1 → 14.0.0--preview004-cc87bfe3

package/dist-cms/packages/dictionary/dictionary/entity-actions/import/import-dictionary-modal.element.js

@@ -4,159 +4,182 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { UmbDictionaryRepository } from '../../repository/dictionary.repository.js';
+import '../../components/dictionary-item-input/dictionary-item-input.element.js';
 import { css, html, customElement, query, state, when } from '../../../../../external/lit/index.js';
 import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbModalBaseElement, } from '../../../../core/modal/index.js';
+import { UmbId } from '../../../../core/id/index.js';
 export let UmbImportDictionaryModalLayout = class UmbImportDictionaryModalLayout extends UmbModalBaseElement {
+    #fileReader;
+    #fileContent = [];
+    #handleClose() {
+        this.modalContext?.reject();
+    }
+    #submit() {
+        // TODO: Gotta do a temp file upload before submitting, so that the server can use it
+        console.log('submit:', this._temporaryFileId, this._parentId);
+        //this.modalContext?.submit({ temporaryFileId: this._temporaryFileId, parentId: this._parentId });
+    }
     constructor() {
-        super(...arguments);
-        this._showUploadView = true;
-        this._showImportView = false;
-        this._showErrorView = false;
-        this._selection = [];
-        this.#detailRepo = new UmbDictionaryRepository(this);
+        super();
+        this.#fileReader = new FileReader();
+        this.#fileReader.onload = (e) => {
+            if (typeof e.target?.result === 'string') {
+                const fileContent = e.target.result;
+                this.#dictionaryItemBuilder(fileContent);
+            }
+        };
     }
-    static { this.styles = [
-        UmbTextStyles,
-        css `
-			uui-input {
-				width: 100%;
-			}
-		`,
-    ]; }
-    #detailRepo;
-    async #importDictionary() {
-        if (!this._uploadedDictionaryTempId)
-            return;
-        this.modalContext?.submit({
-            temporaryFileId: this._uploadedDictionaryTempId,
-            parentId: this._selection[0],
-        });
+    connectedCallback() {
+        super.connectedCallback();
+        this._parentId = this.data?.unique ?? undefined;
     }
-    #handleClose() {
-        this.modalContext?.reject();
+    #dictionaryItemBuilder(htmlString) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(htmlString, 'text/xml');
+        const elements = doc.childNodes;
+        this.#fileContent = this.#makeDictionaryItems(elements);
+        this.requestUpdate();
     }
-    #submitForm() {
-        this._form?.requestSubmit();
+    #makeDictionaryItems(nodeList) {
+        const items = [];
+        const list = [];
+        nodeList.forEach((node) => {
+            if (node.nodeType === Node.ELEMENT_NODE && node.nodeName === 'DictionaryItem') {
+                list.push(node);
+            }
+        });
+        list.forEach((item) => {
+            items.push({
+                name: item.getAttribute('Name') ?? '',
+                children: this.#makeDictionaryItems(item.childNodes) ?? undefined,
+            });
+        });
+        return items;
     }
-    async #handleSubmit(e) {
+    #onUpload(e) {
         e.preventDefault();
-        if (!this._form.checkValidity())
-            return;
         const formData = new FormData(this._form);
-        const uploadData = {
-            temporaryFileId: formData.get('file')?.toString() ?? '',
-        };
-        // TODO: fix this upload experience. We need to update our form so it gets temporary file id from the server:
-        const { data } = await this.#detailRepo.upload(uploadData);
-        if (!data)
-            return;
-        this._uploadedDictionaryTempId = data;
-        // TODO: We need to find another way to gather the data of the uploaded dictionary, to represent the dictionaryItems? See further below.
-        //this._uploadedDictionary = data;
-        if (!this._uploadedDictionaryTempId) {
-            this._showErrorView = true;
-            this._showImportView = false;
-            return;
+        const file = formData.get('file');
+        this.#fileReader.readAsText(file);
+        this._temporaryFileId = file ? UmbId.new() : undefined;
+    }
+    #onParentChange(event) {
+        this._parentId = event.target.selectedIds[0] || undefined;
+        //console.log((event.target as UmbDictionaryItemInputElement).selectedIds[0] || undefined);
+    }
+    async #onFileInput() {
+        requestAnimationFrame(() => {
+            this._form.requestSubmit();
+        });
+    }
+    #onClear() {
+        this._temporaryFileId = '';
+    }
+    render() {
+        return html ` <umb-body-layout headline=${this.localize.term('general_import')}>
+			<uui-box>
+				${when(this._temporaryFileId, () => this.#renderImportDestination(), () => this.#renderUploadZone())}
+			</uui-box>
+			<uui-button
+				slot="actions"
+				type="button"
+				label=${this.localize.term('general_cancel')}
+				@click=${this.#handleClose}></uui-button>
+		</umb-body-layout>`;
+    }
+    #renderFileContents(items) {
+        return html `${items.map((item) => {
+            return html `${item.name}
+				<div>${this.#renderFileContents(item.children)}</div>`;
+        })}`;
+    }
+    #renderImportDestination() {
+        return html `
+			<div id="wrapper">
+				<div>
+					<strong><umb-localize key="visuallyHiddenTexts_dictionaryItems">Dictionary items</umb-localize>:</strong>
+					<div id="item-list">${this.#renderFileContents(this.#fileContent)}</div>
+				</div>
+				<div>
+					<strong><umb-localize key="actions_chooseWhereToImport">Choose where to import</umb-localize>:</strong>
+					Work in progress<br />
+					${this._parentId
+        // TODO
+        // <umb-dictionary-item-input
+        //	@change=${this.#onParentChange}
+        //	.selectedIds=${this._parentId ? [this._parentId] : []}
+        //	max="1">
+        //	</umb-dictionary-item-input>
         }
-        this._showErrorView = false;
-        this._showUploadView = false;
-        this._showImportView = true;
+				</div>
+
+				${this.#renderNavigate()}
+			</div>
+		`;
     }
-    /*
-    #handleSelectionChange(e: CustomEvent) {
-        e.stopPropagation();
-        const element = e.target as UmbTreeElement;
-        this._selection = element.selection;
+    #renderNavigate() {
+        return html `<div id="nav">
+			<uui-button label=${this.localize.term('general_import')} look="secondary" @click=${this.#onClear}>
+				<uui-icon name="icon-arrow-left"></uui-icon>
+				${this.localize.term('general_back')}
+			</uui-button>
+			<uui-button
+				type="button"
+				label=${this.localize.term('general_import')}
+				look="primary"
+				@click=${this.#submit}></uui-button>
+		</div>`;
     }
-    */
-    #renderUploadView() {
-        return html `<p>
-				To import a dictionary item, find the ".udt" file on your computer by clicking the "Import" button (you'll be
-				asked for confirmation on the next screen)
-			</p>
+    #renderUploadZone() {
+        return html `<umb-localize key="dictionary_importDictionaryItemHelp"></umb-localize>
 			<uui-form>
-				<form id="form" name="form" @submit=${this.#handleSubmit}>
+				<form id="form" name="form" @submit=${this.#onUpload}>
 					<uui-form-layout-item>
-						<uui-label for="file" slot="label" required>File</uui-label>
-						<div>
-							<uui-input-file
-								accept=".udt"
-								name="file"
-								id="file"
-								required
-								required-message="File is required"></uui-input-file>
-						</div>
+						<uui-label for="file" slot="label" required>${this.localize.term('formFileUpload_pickFile')}</uui-label>
+						<uui-input-file
+							accept=".udt"
+							name="file"
+							id="file"
+							@input=${this.#onFileInput}
+							required
+							required-message=${this.localize.term('formFileUpload_pickFile')}></uui-input-file>
 					</uui-form-layout-item>
 				</form>
-			</uui-form>
-			<uui-button slot="actions" type="button" label="Cancel" @click=${this.#handleClose}></uui-button>
-			<uui-button slot="actions" type="button" label="Import" look="primary" @click=${this.#submitForm}></uui-button>`;
+			</uui-form>`;
     }
-    /// TODO => Tree view needs isolation and single-select option
-    #renderImportView() {
-        //TODO: gather this data in some other way, we cannot use the feedback from the server anymore. can we use info about the file directly? or is a change to the end point required?
-        /*
-        if (!this._uploadedDictionary?.dictionaryItems) return;
-
-        return html`
-            <b>Dictionary items</b>
-            <ul>
-                ${repeat(
-                    this._uploadedDictionary.dictionaryItems,
-                    (item) => item.name,
-                    (item) => html`<li>${item.name}</li>`
-                )}
-            </ul>
-            <hr />
-            <b>Choose where to import dictionary items (optional)</b>
-            <umb-tree
-                alias="Umb.Tree.Dictionary"
-                @selection-change=${this.#handleSelectionChange}
-                .selection=${this._selection}
-                selectable></umb-tree>
+    static { this.styles = [
+        UmbTextStyles,
+        css `
+			uui-input {
+				width: 100%;
+			}
+			#item-list {
+				padding: var(--uui-size-3) var(--uui-size-4);
+				border: 1px solid var(--uui-color-border);
+				border-radius: var(--uui-border-radius);
+			}
+			#item-list div {
+				padding-left: 20px;
+			}
 
-            <uui-button slot="actions" type="button" label="Cancel" @click=${this.#handleClose}></uui-button>
-            <uui-button
-                slot="actions"
-                type="button"
-                label="Import"
-                look="primary"
-                @click=${this.#importDictionary}></uui-button>
-        `;
-        */
-    }
-    // TODO => Determine what to display when dictionary import/upload fails
-    #renderErrorView() {
-        return html `Something went wrong`;
-    }
-    render() {
-        return html ` <umb-body-layout headline="Import">
-			${when(this._showUploadView, () => this.#renderUploadView())}
-			${when(this._showImportView, () => this.#renderImportView())}
-			${when(this._showErrorView, () => this.#renderErrorView())}
-		</umb-body-layout>`;
-    }
+			#wrapper {
+				display: flex;
+				flex-direction: column;
+				gap: var(--uui-size-3);
+			}
+		`,
+    ]; }
 };
-__decorate([
-    query('#form')
-], UmbImportDictionaryModalLayout.prototype, "_form", void 0);
 __decorate([
     state()
-], UmbImportDictionaryModalLayout.prototype, "_uploadedDictionaryTempId", void 0);
+], UmbImportDictionaryModalLayout.prototype, "_parentId", void 0);
 __decorate([
     state()
-], UmbImportDictionaryModalLayout.prototype, "_showUploadView", void 0);
+], UmbImportDictionaryModalLayout.prototype, "_temporaryFileId", void 0);
 __decorate([
-    state()
-], UmbImportDictionaryModalLayout.prototype, "_showImportView", void 0);
-__decorate([
-    state()
-], UmbImportDictionaryModalLayout.prototype, "_showErrorView", void 0);
-__decorate([
-    state()
-], UmbImportDictionaryModalLayout.prototype, "_selection", void 0);
+    query('#form')
+], UmbImportDictionaryModalLayout.prototype, "_form", void 0);
 UmbImportDictionaryModalLayout = __decorate([
     customElement('umb-import-dictionary-modal')
 ], UmbImportDictionaryModalLayout);

package/dist-cms/packages/dictionary/dictionary/entity-actions/import/import.action.js

@@ -1,4 +1,4 @@
-import { UmbTextStyles } from "../../../../../shared/style/index.js";
+import { UmbTextStyles } from '../../../../../shared/style/index.js';
 import { UmbEntityActionBase } from '../../../../core/entity-action/index.js';
 import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UMB_IMPORT_DICTIONARY_MODAL, } from '../../../../core/modal/index.js';
 export default class UmbImportDictionaryEntityAction extends UmbEntityActionBase {
@@ -11,16 +11,10 @@ export default class UmbImportDictionaryEntityAction extends UmbEntityActionBase
         });
     }
     async execute() {
-        // TODO: what to do if modal service is not available?
         if (!this.#modalContext)
             return;
         const modalContext = this.#modalContext?.open(UMB_IMPORT_DICTIONARY_MODAL, { unique: this.unique });
-        // TODO: get type from modal result
-        const { temporaryFileId, parentId } = await modalContext.onSubmit();
-        if (!temporaryFileId)
-            return;
-        const result = await this.repository?.import(temporaryFileId, parentId);
-        // TODO => get location header to route to new item
-        console.log(result);
+        const { parentId, temporaryFileId } = await modalContext.onSubmit();
+        await this.repository?.import(temporaryFileId, parentId);
     }
 }

package/dist-cms/packages/dictionary/dictionary/index.d.ts

@@ -1,2 +1,3 @@
 export * from './repository/index.js';
 export * from './tree/index.js';
+export * from './components/index.js';

package/dist-cms/packages/dictionary/dictionary/index.js

@@ -1,2 +1,3 @@
 export * from './repository/index.js';
 export * from './tree/index.js';
+export * from './components/index.js';