From 4e4f4c97d260aae0ba00c1abb8c1cd25e41e8adc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?=
 <26099018+JesmoDev@users.noreply.github.com>
Date: Wed, 18 Jan 2023 04:59:45 +0100
Subject: [PATCH] added language routing

---
 ...e-root-table-name-column-layout.element.ts | 24 ++++++++++
 .../language-root-workspace.element.ts        | 44 ++++---------------
 .../src/core/mocks/data/languages.data.ts     |  2 +-
 3 files changed, 33 insertions(+), 37 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-name-column-layout.element.ts

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-name-column-layout.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-name-column-layout.element.ts
new file mode 100644
index 0000000000..1298434a4a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-table-name-column-layout.element.ts
@@ -0,0 +1,24 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('umb-language-root-table-name-column-layout')
+export class UmbLanguageRootTableNameColumnLayoutElement extends LitElement {
+	static styles = [UUITextStyles, css``];
+
+	@property({ attribute: false })
+	value!: any;
+
+	render() {
+		console.log('this.value', this.value);
+		if (!this.value) return nothing;
+
+		return html`<a href=${'section/settings/language/edit/' + this.value.key}>${this.value.name}</a>`;
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'umb-language-root-table-name-column-layout': UmbLanguageRootTableNameColumnLayoutElement;
+	}
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts
index a85f13da1f..0a956bcaa5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language-root/language-root-workspace.element.ts
@@ -16,6 +16,7 @@ import { UmbLanguageStore } from '../../language.store';
 
 import '../language/language-workspace.element';
 import './language-root-table-delete-column-layout.element';
+import './language-root-table-name-column-layout.element';
 
 @customElement('umb-language-root-workspace')
 export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
@@ -39,39 +40,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 	];
 
 	@state()
-	private _languages: Array<LanguageDetails> = [
-		{
-			id: 1,
-			name: 'English',
-			isoCode: 'en',
-			isDefault: true,
-			isMandatory: true,
-		},
-		{
-			id: 2,
-			name: 'Danish',
-			isoCode: 'da',
-			isDefault: false,
-			isMandatory: false,
-			fallbackLanguageId: 1,
-		},
-		{
-			id: 3,
-			name: 'German',
-			isoCode: 'de',
-			isDefault: false,
-			isMandatory: false,
-			fallbackLanguageId: 1,
-		},
-		{
-			id: 4,
-			name: 'French',
-			isoCode: 'fr',
-			isDefault: false,
-			isMandatory: false,
-			fallbackLanguageId: 1,
-		},
-	];
+	private _languages: Array<LanguageDetails> = [];
 
 	@state()
 	private _tableConfig: UmbTableConfig = {
@@ -83,6 +52,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 		{
 			name: 'Language',
 			alias: 'languageName',
+			elementName: 'umb-language-root-table-name-column-layout',
 		},
 		{
 			name: 'ISO Code',
@@ -128,7 +98,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 		});
 	}
 
-	private _createTableItems(languages: Array<Language>) {
+	private _createTableItems(languages: Array<LanguageDetails>) {
 		this._tableItems = languages.map((language) => {
 			return {
 				key: language.id?.toString() ?? '',
@@ -136,7 +106,10 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 				data: [
 					{
 						columnAlias: 'languageName',
-						value: language.name,
+						value: {
+							name: language.name,
+							key: language.key,
+						},
 					},
 					{
 						columnAlias: 'isoCode',
@@ -166,7 +139,6 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
 	}
 
 	render() {
-		// return html`<umb-language-workspace></umb-language-workspace>`;
 		return html`
 			<umb-body-layout no-header-background>
 				<uui-button id="add-language" slot="header" label="Add language" look="outline" color="default"></uui-button>
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts
index 171c7924b4..698024af09 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/languages.data.ts
@@ -22,7 +22,7 @@ class UmbLanguagesData extends UmbData<LanguageDetails> {
 export const data: Array<LanguageDetails> = [
 	{
 		id: 1,
-		key: '1234',
+		key: uuidv4(),
 		name: 'English',
 		isoCode: 'en',
 		isDefault: true,