Merge branch 'main' into feature/rich-text-editor

src/Umbraco.Web.UI.Client/src/packages/core/modal/token/create-dictionary-modal.token.ts

@@ -2,12 +2,13 @@ import { Observable } from '@umbraco-cms/backoffice/external/rxjs';
 import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
 
 export interface UmbCreateDictionaryModalData {
-	unique: string | null;
+	parentId: string | null;
 	parentName?: Observable<string | undefined>;
 }
 
 export interface UmbCreateDictionaryModalResult {
-	name?: string;
+	name: string;
+	parentId: string | null;
 }
 
 export const UMB_CREATE_DICTIONARY_MODAL = new UmbModalToken<

src/Umbraco.Web.UI.Client/src/packages/translation/dashboards/dictionary/dashboard-translation-dictionary.element.ts

@@ -134,15 +134,18 @@ export class UmbDashboardTranslationDictionaryElement extends UmbLitElement {
 		if (!this.#modalContext) return;
 		if (!this.#repo) return;
 
-		const modalContext = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL, { unique: null });
+		const modalContext = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL, { parentId: null });
 
-		// TODO: get type from modal result
-		const { name } = await modalContext.onSubmit();
-		if (!name) return;
+		const { name, parentId } = await modalContext.onSubmit();
+		if (!name || parentId === undefined) return;
 
-		const { data } = await this.#repo.createScaffold(null);
-		console.log(data);
-		// TODO => get location header to route to new item
+		const { data: url } = await this.#repo.create({ name, parentId });
+
+		if (!url) return;
+		//TODO: Why do we need to extract the id like this?
+		const id = url.substring(url.lastIndexOf('/') + 1);
+
+		history.pushState({}, '', `/section/translation/workspace/dictionary-item/edit/${id}`);
 	}
 
 	render() {

src/Umbraco.Web.UI.Client/src/packages/translation/dictionary/entity-actions/create/create-dictionary-modal.element.ts

@@ -36,9 +36,11 @@ export class UmbCreateDictionaryModalElement extends UmbModalBaseElement<
 		if (!form || !form.checkValidity()) return;
 
 		const formData = new FormData(form);
+		const name = formData.get('name') as string;
 
 		this.modalContext?.submit({
-			name: formData.get('name') as string,
+			name,
+			parentId: this.data?.parentId ?? null,
 		});
 	}
 

src/Umbraco.Web.UI.Client/src/packages/translation/dictionary/entity-actions/create/create.action.ts

@@ -10,9 +10,6 @@ import {
 	UMB_CREATE_DICTIONARY_MODAL,
 } from '@umbraco-cms/backoffice/modal';
 
-// TODO: temp import
-import './create-dictionary-modal-layout.element.js';
-
 export default class UmbCreateDictionaryEntityAction extends UmbEntityActionBase<UmbDictionaryRepository> {
 	static styles = [UUITextStyles];
 
@@ -40,17 +37,19 @@ export default class UmbCreateDictionaryEntityAction extends UmbEntityActionBase
 		// TODO: how can we get the current entity detail in the modal? Passing the observable
 		// feels a bit hacky. Works, but hacky.
 		const modalContext = this.#modalContext?.open(UMB_CREATE_DICTIONARY_MODAL, {
-			unique: this.unique,
+			parentId: this.unique,
 			parentName: this.#sectionSidebarContext.headline,
 		});
 
-		// TODO: get type from modal result
-		const { name } = await modalContext.onSubmit();
-		if (!name) return;
+		const { name, parentId } = await modalContext.onSubmit();
+		if (!name || parentId === undefined) return;
 
-		const { data } = await this.repository.createScaffold(this.unique, { name });
+		const { data: url } = await this.repository.create({ name, parentId });
+		if (!url) return;
 
-		// TODO => get location header to route to new item
-		console.log(data);
+		//TODO: Why do we need to extract the id like this?
+		const id = url.substring(url.lastIndexOf('/') + 1);
+
+		history.pushState({}, '', `/section/translation/workspace/dictionary-item/edit/${id}`);
 	}
 }

src/Umbraco.Web.UI.Client/src/packages/translation/dictionary/entity-actions/manifests.ts

@@ -107,7 +107,7 @@ const modals: Array<ManifestModal> = [
 		type: 'modal',
 		alias: 'Umb.Modal.CreateDictionary',
 		name: 'Create Dictionary Modal',
-		loader: () => import('./create/create-dictionary-modal-layout.element.js'),
+		loader: () => import('./create/create-dictionary-modal.element.js'),
 	},
 	{
 		type: 'modal',