umb-property-editor-ui-multi-url-picker
`;
+ return html`
+
+ Link
+ ${this._renderLinkUrlInput()}
+
+
+ Anchor / querystring
+
+
+ + + ${this._renderTrees()} +
+
+ + +
+ Debug
+
+ `;
+ }
+
+ return nothing;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-debug': UmbDebug;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
index 77c784844f..31fabab8cb 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
@@ -31,3 +31,5 @@ import './input-document-picker/input-document-picker.element';
import './empty-state/empty-state.element';
import './color-picker/color-picker.element';
+
+import './debug/debug.element';
\ No newline at end of file
From 98f98e2e2891697e197eb80b9d0dc75610f082e6 Mon Sep 17 00:00:00 2001
From: Warren Buckley
+
+ Events
+ +
- Debug
-
Date: Tue, 14 Feb 2023 12:08:10 +0000
Subject: [PATCH 005/116] Remove debug element from main umb-app
---
src/Umbraco.Web.UI.Client/src/app.ts | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts
index f556e4ae86..22ab81b634 100644
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -149,9 +149,7 @@ export class UmbApp extends UmbLitElement {
}
render() {
- return html`
-
Date: Tue, 14 Feb 2023 12:08:30 +0000
Subject: [PATCH 006/116] Rework based on Mads notes
---
.../context-api/provide/context-provider.ts | 14 ++++++
.../dashboard-published-status.element.ts | 1 +
.../shared/components/debug/debug.element.ts | 46 +++++++++++--------
3 files changed, 41 insertions(+), 20 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts
index ddad843889..3f32cc247b 100644
--- a/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts
+++ b/src/Umbraco.Web.UI.Client/libs/context-api/provide/context-provider.ts
@@ -31,6 +31,9 @@ export class UmbContextProvider {
public hostConnected() {
this.host.addEventListener(umbContextRequestEventType, this._handleContextRequest);
this.host.dispatchEvent(new UmbContextProvideEventImplementation(this._contextAlias));
+
+ // Listen to our debug event 'umb:debug-contexts'
+ this.host.addEventListener('umb:debug-contexts', this._handleDebugContextRequest);
}
/**
@@ -54,6 +57,17 @@ export class UmbContextProvider {
event.callback(this.#instance);
};
+ private _handleDebugContextRequest = (event: Event) => {
+
+
+ console.log('Context Alias:', this._contextAlias);
+ console.log('Context Instance:', this.#instance);
+
+ // Do I update an array on the event which
+ // The Debug element can then render in UI?!
+ console.log('Event:', event);
+ };
+
destroy(): void {
// I want to make sure to call this, but for now it was too overwhelming to require the destroy method on context instances.
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
index c91b095df2..58a1db4df7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/dashboards/published-status/dashboard-published-status.element.ts
@@ -133,6 +133,7 @@ export class UmbDashboardPublishedStatusElement extends UmbLitElement {
render() {
return html`
+
div {
padding:10px;
}
@@ -43,6 +43,9 @@ export class UmbDebug extends LitElement {
@property({reflect: true, type: Boolean})
enabled = false;
+ @property({type: Array})
+ contextAliases = ['UmbTemplateDetailStore', 'umbLanguageStore'];
+
@state()
private _debugPaneOpen = false;
@@ -50,22 +53,18 @@ export class UmbDebug extends LitElement {
this._debugPaneOpen = !this._debugPaneOpen;
}
- constructor() {
- super();
+ connectedCallback(): void {
+ super.connectedCallback();
- // Get outer element
- const app = window.document.querySelector('umb-app');
+ // Create event that bubbles up through the DOM
+ const event = new CustomEvent('umb:debug-contexts', {
+ bubbles: true,
+ composed: true
+ });
- app?.addEventListener(umbContextRequestEventType as unknown as UmbContextRequestEventImplementation, (e) => {
- // Console.log event
- console.log('Some event', e.type);
- console.log('Some event thing', e);
- console.log('Some event thing', e.contextAlias);
-
- });
-
- //this.addEventListener('click', (e) => console.log(e.type, e.target.localName));
- }
+ // Dispatch it
+ this.dispatchEvent(event);
+ }
render() {
@@ -78,7 +77,14 @@ export class UmbDebug extends LitElement {
`;
From 5c2236fe409c71ef905b2e6757e0637c57d67a94 Mon Sep 17 00:00:00 2001
From: Warren Buckley
-
+ Events
- -
+
+
+
+
- `;
+ `;
}
-
+
return nothing;
}
}
From c4fa350b047a2bc5d9c5d09c97e07081d341e05d Mon Sep 17 00:00:00 2001
From: Warren Buckley
+
Events
+${this._publishedStatusText}
-
Events
+
+
Context Aliases to consume
+-
+ ${this.contextAliases.map((ctxAlias) =>
+ html`
- ${ctxAlias} ` + )} +
Context Aliases to consume
-
- ${this.contextAliases.map((ctxAlias) =>
- html`
- ${ctxAlias} ` - )} + ${this._renderContextAliases()}
-
+ ${this._renderInstance(instance)}
+
-
${this._renderInstance(instance)}
-
+ if (this.enabled) {
+ return html`
+
-
+
`;
- }
+ }
- return nothing;
+ return nothing;
}
private _renderContextAliases() {
@@ -94,14 +98,13 @@ export class UmbDebug extends LitElement {
for (const [alias, instance] of this.contextAliases) {
aliases.push(
- html`
-
+
@@ -80,13 +84,13 @@ export class UmbDebug extends LitElement {
+ -
${this._renderContextAliases()}
-
- ${this._renderInstance(instance)}
-
-
+ ${this._renderInstance(instance)}
+
-
${this._renderInstance(instance)}
-
${this._renderInstance(instance)}
${this._publishedStatusText}
-
-
+ if (this.enabled) {
+ return this.useDialog ? this._renderDialog() : this._renderPanel();
+ } else {
+ return nothing;
+ }
+
+ }
-
From 4c7277ac9a721475d693ce03650dbd690f8e46d1 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
-
Context: ${alias}
@@ -124,10 +175,6 @@ export class UmbDebug extends LitElement {
if (key.startsWith('_')) {
continue;
}
- // Goes KABOOM - if try to loop over the class/object
- // instanceKeys.push(html` ${key} = ${instance[key]} `);
-
- // console.log(`key: ${key} = ${value} TYPEOF: ${typeof value}`);
const value = instance[key];
if (typeof value === 'string') {
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
new file mode 100644
index 0000000000..56f898c6d5
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
@@ -0,0 +1,163 @@
+import { css, html, nothing, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { UmbModalHandler, UmbModalLayoutElement } from '@umbraco-cms/modal';
+
+@customElement('umb-debug-modal-layout')
+export class UmbDebugModalLayout extends UmbModalLayoutElement {
+ static styles = [
+ UUITextStyles,
+ css`
+ uui-dialog-layout {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+
+ padding: var(--uui-size-space-5);
+ box-sizing: border-box;
+ }
+
+ uui-scroll-container {
+ overflow-y: scroll;
+ max-height: 100%;
+ min-height: 0;
+ flex: 1;
+ }
+
+ uui-icon {
+ vertical-align: text-top;
+ color: var(--uui-color-danger);
+ }
+
+ .context {
+ padding:15px 0;
+ border-bottom:1px solid var(--uui-color-danger-emphasis);
+ }
+
+ h3 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ h3 > span {
+ border-radius: var(--uui-size-4);
+ background-color: var(--uui-color-danger);
+ color: var(--uui-color-danger-contrast);
+ padding: 8px;
+ font-size: 12px;
+ }
+
+
+ ul {
+ margin-top: 0;
+ }
+ `,
+ ];
+
+
+ // the modal handler will be injected into the element when the modal is opened.
+ @property({ attribute: false })
+ modalHandler?: UmbModalHandler;
+
+ private _handleClose() {
+ /* Optional data of any type can be applied to the close method to pass it
+ to the modal parent through the onClose promise. */
+ //this.modalHandler?.close('MY DATA');
+ this.modalHandler?.close();
+ }
+
+ render() {
+ return html`
+
+
+
+ ${this._renderContextAliases()}
+
+ Close
+
+ `;
+ }
+
+ private _renderContextAliases() {
+ if(!this.data) {
+ return nothing;
+ }
+
+ const aliases = [];
+ for (const [alias, instance] of this.data.contexts) {
+ aliases.push(
+ html`
+ Callable Function `);
+ } else if (typeof instance === 'object') {
+ const methodNames = this.getClassMethodNames(instance);
+ if (methodNames.length) {
+ instanceKeys.push(
+ html`
+ ${key} = ${value} `);
+ } else {
+ instanceKeys.push(html`${key} Type (${typeof value}) `);
+ }
+ }
+ } else {
+ instanceKeys.push(html`Context is a primitive with value: ${instance} `);
+ }
+
+ return instanceKeys;
+ }
+
+
+ private getClassMethodNames(klass: any) {
+ const isGetter = (x: any, name: string): boolean => !!(Object.getOwnPropertyDescriptor(x, name) || {}).get;
+ const isFunction = (x: any, name: string): boolean => typeof x[name] === 'function';
+ const deepFunctions = (x: any): any =>
+ x !== Object.prototype &&
+ Object.getOwnPropertyNames(x)
+ .filter((name) => isGetter(x, name) || isFunction(x, name))
+ .concat(deepFunctions(Object.getPrototypeOf(x)) || []);
+ const distinctDeepFunctions = (klass: any) => Array.from(new Set(deepFunctions(klass)));
+
+ const allMethods =
+ typeof klass.prototype === 'undefined'
+ ? distinctDeepFunctions(klass)
+ : Object.getOwnPropertyNames(klass.prototype);
+ return allMethods.filter((name: any) => name !== 'constructor' && !name.startsWith('_'));
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-debug-modal-layout': UmbDebugModalLayout;
+ }
+}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
index c9602d9759..b09a13320e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
@@ -31,4 +31,5 @@ import './input-document-picker/input-document-picker.element';
import './empty-state/empty-state.element';
import './color-picker/color-picker.element';
-import './debug/debug.element';
\ No newline at end of file
+import './debug/debug.element';
+import './debug/debug.modal.element';
\ No newline at end of file
From 92ca98559351cff57f1177f9bccb840eb99c3d07 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Wed, 15 Feb 2023 20:49:05 +0100
Subject: [PATCH 018/116] add methods to update data
---
.../language/language-workspace.context.ts | 18 +++++++++++++++++-
1 file changed, 17 insertions(+), 1 deletion(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
index 0a3c3ed935..2cb542b90a 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
@@ -41,7 +41,23 @@ export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext {
return 'language';
}
- public destroy(): void {
+ setName(name: string) {
+ this.#data.update({ name });
+ }
+
+ setMandatory(isMandatory: boolean) {
+ this.#data.update({ isMandatory });
+ }
+
+ setDefault(isDefault: boolean) {
+ this.#data.update({ isDefault });
+ }
+
+ setFallbackLanguage(isoCode: string) {
+ this.#data.update({ fallbackIsoCode: isoCode });
+ }
+
+ destroy(): void {
this.#data.complete();
}
}
From cb4aa5e126d6b99c0d81cac6549dfdfda3c7d808 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Wed, 15 Feb 2023 20:49:26 +0100
Subject: [PATCH 019/116] rename file + use methods on context
---
.../languages/workspace/language/manifests.ts | 2 +-
....ts => edit-language-workspace-view.element.ts} | 14 +++-----------
2 files changed, 4 insertions(+), 12 deletions(-)
rename src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/{workspace-view-language-edit.element.ts => edit-language-workspace-view.element.ts} (95%)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts
index 1c686ba026..fbde1593b7 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts
@@ -30,7 +30,7 @@ const workspaceViews: Array = [
type: 'workspaceView',
alias: 'Umb.WorkspaceView.Language.Edit',
name: 'Language Workspace Edit View',
- loader: () => import('./views/edit/workspace-view-language-edit.element'),
+ loader: () => import('./views/edit/edit-language-workspace-view.element'),
weight: 90,
meta: {
workspaces: ['Umb.Workspace.Language'],
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/edit-language-workspace-view.element.ts
similarity index 95%
rename from src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts
rename to src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/edit-language-workspace-view.element.ts
index 0b134088ec..54486c6929 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/workspace-view-language-edit.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/edit-language-workspace-view.element.ts
@@ -72,14 +72,8 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
this.consumeContext('umbWorkspaceContext', (instance) => {
this.#languageWorkspaceContext = instance;
- if (!this.#languageWorkspaceContext) return;
-
this.observe(this.#languageWorkspaceContext.data, (language) => {
this.language = language;
-
- if (this._startData === null) {
- this._startData = language;
- }
});
this.observe(this.#languageWorkspaceContext.getAvailableCultures(), (cultures) => {
this._availableCultures = cultures;
@@ -133,23 +127,21 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
#handleDefaultChange(event: UUIBooleanInputEvent) {
if (event instanceof UUIBooleanInputEvent) {
const target = event.composedPath()[0] as UUIToggleElement;
-
- this.#languageWorkspaceContext?.update({ isDefault: target.checked });
+ this.#languageWorkspaceContext?.setDefault(target.checked);
}
}
#handleMandatoryChange(event: UUIBooleanInputEvent) {
if (event instanceof UUIBooleanInputEvent) {
const target = event.composedPath()[0] as UUIToggleElement;
-
- this.#languageWorkspaceContext?.update({ isMandatory: target.checked });
+ this.#languageWorkspaceContext?.setMandatory(target.checked);
}
}
#handleFallbackChange(event: UUIComboboxEvent) {
if (event instanceof UUIComboboxEvent) {
const target = event.composedPath()[0] as UUIComboboxElement;
- this.#languageWorkspaceContext?.update({ fallbackIsoCode: target.value.toString() });
+ this.#languageWorkspaceContext?.setFallbackLanguage(target.value.toString());
}
}
From 76aa423eadedcb12c0fadb75ff020a0a30321a25 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Wed, 15 Feb 2023 22:00:24 +0100
Subject: [PATCH 020/116] add crud methods to repo
---
.../repository/language.repository.ts | 50 ++++++++++++++++++-
1 file changed, 49 insertions(+), 1 deletion(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
index ee727facb9..252b7bb753 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
@@ -3,7 +3,7 @@ import { UmbLanguageStore, UMB_LANGUAGE_STORE_CONTEXT_TOKEN } from './language.s
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { UmbContextConsumerController } from '@umbraco-cms/context-api';
import { UmbNotificationService, UMB_NOTIFICATION_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/notification';
-import { ProblemDetailsModel } from '@umbraco-cms/backend-api';
+import { LanguageModel, ProblemDetailsModel } from '@umbraco-cms/backend-api';
export class UmbLanguageRepository {
#init!: Promise;
@@ -65,4 +65,52 @@ export class UmbLanguageRepository {
return { data, error, asObservable: () => this.#languageStore!.data };
}
+
+ async update(language: LanguageModel) {
+ await this.#init;
+
+ const { data, error } = await this.#detailDataSource.update(language);
+
+ if (data) {
+ const notification = { data: { message: `Language saved` } };
+ this.#notificationService?.peek('positive', notification);
+ this.#languageStore?.append(data);
+ }
+
+ return { data, error };
+ }
+
+ async create(language: LanguageModel) {
+ await this.#init;
+
+ const { data, error } = await this.#detailDataSource.update(language);
+
+ if (data) {
+ this.#languageStore?.append(data);
+ const notification = { data: { message: `Language created` } };
+ this.#notificationService?.peek('positive', notification);
+ }
+
+ return { data, error };
+ }
+
+ async delete(key: string) {
+ await this.#init;
+
+ if (!key) {
+ const error: ProblemDetailsModel = { title: 'Language key is missing' };
+ return { error };
+ }
+
+ const { error } = await this.#detailDataSource.delete(key);
+
+ if (!error) {
+ const notification = { data: { message: `Language deleted` } };
+ this.#notificationService?.peek('positive', notification);
+ }
+
+ this.#languageStore?.remove([key]);
+
+ return { error };
+ }
}
From e87bbe6e127140dc45d939ddfdbe8b9021125400 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Wed, 15 Feb 2023 22:00:44 +0100
Subject: [PATCH 021/116] use new workspace action
---
.../languages/workspace/language/manifests.ts | 32 ++++++++++---------
1 file changed, 17 insertions(+), 15 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts
index fbde1593b7..157ef29fc5 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/manifests.ts
@@ -1,3 +1,4 @@
+import { UmbSaveWorkspaceAction } from '../../../../shared/workspace-actions/save.action';
import type { ManifestWorkspace, ManifestWorkspaceAction, ManifestWorkspaceView } from '@umbraco-cms/models';
const workspace: ManifestWorkspace = {
@@ -10,21 +11,6 @@ const workspace: ManifestWorkspace = {
},
};
-const workspaceActions: Array = [
- {
- type: 'workspaceAction',
- alias: 'Umb.WorkspaceAction.Language.Save',
- name: 'Save Language Workspace Action',
- loader: () =>
- import('../../../../shared/components/workspace/workspace-action/save/workspace-action-node-save.element'),
- meta: {
- workspaces: ['Umb.Workspace.Language'],
- look: 'primary',
- color: 'positive',
- },
- },
-];
-
const workspaceViews: Array = [
{
type: 'workspaceView',
@@ -41,4 +27,20 @@ const workspaceViews: Array = [
},
];
+const workspaceActions: Array = [
+ {
+ type: 'workspaceAction',
+ alias: 'Umb.WorkspaceAction.Language.Save',
+ name: 'Save Language Workspace Action',
+ meta: {
+ workspaces: ['Umb.Workspace.Language'],
+ look: 'primary',
+ color: 'positive',
+ label: 'Save',
+ repositoryAlias: 'Umb.Repository.Language',
+ api: UmbSaveWorkspaceAction,
+ },
+ },
+];
+
export const manifests = [workspace, ...workspaceViews, ...workspaceActions];
From 95273e55e72f157751452cd8d8e63cfe3c0d4e68 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Wed, 15 Feb 2023 22:01:28 +0100
Subject: [PATCH 022/116] clean up
---
.../language-root-workspace.element.ts | 21 +++-----
.../language/language-workspace.context.ts | 14 +++--
.../language/language-workspace.element.ts | 17 +++----
.../edit-language-workspace-view.element.ts | 51 ++++++++-----------
4 files changed, 45 insertions(+), 58 deletions(-)
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 de838499d4..557c30e9b5 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
@@ -1,22 +1,16 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
-import {
- UmbLanguageStore,
- UmbLanguageStoreItemType,
- UMB_LANGUAGE_STORE_CONTEXT_TOKEN,
-} from '../../repository/language.store';
import { UmbTableColumn, UmbTableConfig, UmbTableItem } from '../../../../shared/components/table';
-import { UmbWorkspaceEntityElement } from '../../../../shared/components/workspace/workspace-entity-element.interface';
+import { UmbLanguageRepository } from '../../repository/language.repository';
import { UmbLitElement } from '@umbraco-cms/element';
+import { LanguageModel } from '@umbraco-cms/backend-api';
-import '../language/language-workspace.element';
import './language-root-table-delete-column-layout.element';
import './language-root-table-name-column-layout.element';
-import { UmbLanguageRepository } from '../../repository/language.repository';
@customElement('umb-language-root-workspace')
-export class UmbLanguageRootWorkspaceElement extends UmbLitElement implements UmbWorkspaceEntityElement {
+export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
@@ -72,14 +66,11 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement implements Um
#languageRepository = new UmbLanguageRepository(this);
- load(): void {
+ connectedCallback() {
+ super.connectedCallback();
this.#observeLanguages();
}
- create(): void {
- // Not relevant for this workspace
- }
-
async #observeLanguages() {
const { asObservable } = await this.#languageRepository.requestLanguages();
@@ -88,7 +79,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement implements Um
}
}
- #createTableItems(languages: Array) {
+ #createTableItems(languages: Array) {
this._tableItems = languages.map((language) => {
return {
key: language.isoCode ?? '',
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
index 2cb542b90a..9182536bcd 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.context.ts
@@ -1,13 +1,13 @@
import { UmbLanguageRepository } from '../../repository/language.repository';
+import { UmbWorkspaceContext } from '../../../../shared/components/workspace/workspace-context/workspace-context';
import type { LanguageModel } from '@umbraco-cms/backend-api';
import { ObjectState } from '@umbraco-cms/observable-api';
import { UmbControllerHostInterface } from '@umbraco-cms/controller';
-import { UmbWorkspaceContext } from 'src/backoffice/shared/components/workspace/workspace-context/workspace-context';
export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext {
#host: UmbControllerHostInterface;
#languageRepository: UmbLanguageRepository;
- #isNew = false;
+ isNew = false;
#data = new ObjectState(undefined);
data = this.#data.asObservable();
@@ -21,7 +21,7 @@ export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext {
async load(isoCode: string) {
const { data } = await this.#languageRepository.requestByIsoCode(isoCode);
if (data) {
- this.#isNew = false;
+ this.isNew = false;
this.#data.update(data);
}
}
@@ -29,7 +29,7 @@ export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext {
async createScaffold() {
const { data } = await this.#languageRepository.createDetailsScaffold();
if (!data) return;
- this.#isNew = true;
+ this.isNew = true;
this.#data.update(data);
}
@@ -45,6 +45,10 @@ export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext {
this.#data.update({ name });
}
+ setCulture(isoCode: string) {
+ this.#data.update({ isoCode });
+ }
+
setMandatory(isMandatory: boolean) {
this.#data.update({ isMandatory });
}
@@ -53,7 +57,7 @@ export class UmbLanguageWorkspaceContext extends UmbWorkspaceContext {
this.#data.update({ isDefault });
}
- setFallbackLanguage(isoCode: string) {
+ setFallbackCulture(isoCode: string) {
this.#data.update({ fallbackIsoCode: isoCode });
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
index 4ad4c78bb7..48f9bb6d9b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/language-workspace.element.ts
@@ -5,7 +5,6 @@ import { UUIInputElement, UUIInputEvent } from '@umbraco-ui/uui';
import { UmbWorkspaceEntityElement } from '../../../../shared/components/workspace/workspace-entity-element.interface';
import { UmbLanguageWorkspaceContext } from './language-workspace.context';
import { UmbLitElement } from '@umbraco-cms/element';
-import '../../../../shared/components/workspace/workspace-action/save/workspace-action-node-save.element.ts';
import { LanguageModel } from '@umbraco-cms/backend-api';
@customElement('umb-language-workspace')
@@ -30,6 +29,14 @@ export class UmbLanguageWorkspaceElement extends UmbLitElement implements UmbWor
#languageWorkspaceContext = new UmbLanguageWorkspaceContext(this);
+ constructor() {
+ super();
+
+ this.observe(this.#languageWorkspaceContext.data, (data) => {
+ this._language = data;
+ });
+ }
+
load(key: string): void {
this.#languageWorkspaceContext.load(key);
}
@@ -38,14 +45,6 @@ export class UmbLanguageWorkspaceElement extends UmbLitElement implements UmbWor
this.#languageWorkspaceContext.createScaffold();
}
- async connectedCallback() {
- super.connectedCallback();
-
- this.observe(this.#languageWorkspaceContext.data, (data) => {
- this._language = data;
- });
- }
-
#handleInput(event: UUIInputEvent) {
if (event instanceof UUIInputEvent) {
const target = event.composedPath()[0] as UUIInputElement;
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/edit-language-workspace-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/edit-language-workspace-view.element.ts
index 54486c6929..88281fa10b 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/edit-language-workspace-view.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/workspace/language/views/edit/edit-language-workspace-view.element.ts
@@ -5,16 +5,12 @@ import { repeat } from 'lit/directives/repeat.js';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { UmbLanguageWorkspaceContext } from '../../language-workspace.context';
-import {
- UmbLanguageStore,
- UmbLanguageStoreItemType,
- UMB_LANGUAGE_STORE_CONTEXT_TOKEN,
-} from '../../../../repository/language.store';
+import { UmbCultureRepository } from '../../../../../cultures/repository/culture.repository';
import { UmbLitElement } from '@umbraco-cms/element';
import { CultureModel, LanguageModel } from '@umbraco-cms/backend-api';
-@customElement('umb-workspace-view-language-edit')
-export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
+@customElement('umb-edit-language-workspace-view')
+export class UmbEditLanguageWorkspaceViewElement extends UmbLitElement {
static styles = [
UUITextStyles,
css`
@@ -50,13 +46,13 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
];
@property()
- language?: UmbLanguageStoreItemType;
+ language?: LanguageModel;
@state()
- private _languages: UmbLanguageStoreItemType[] = [];
+ private _languages: LanguageModel[] = [];
@state()
- private _availableCultures: CultureModel[] = [];
+ private _cultures: CultureModel[] = [];
@state()
private _search = '';
@@ -65,6 +61,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
private _startData: LanguageModel | null = null;
#languageWorkspaceContext?: UmbLanguageWorkspaceContext;
+ #cultureRepository = new UmbCultureRepository(this);
constructor() {
super();
@@ -75,18 +72,14 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
this.observe(this.#languageWorkspaceContext.data, (language) => {
this.language = language;
});
- this.observe(this.#languageWorkspaceContext.getAvailableCultures(), (cultures) => {
- this._availableCultures = cultures;
- });
});
+ }
- this.consumeContext(UMB_LANGUAGE_STORE_CONTEXT_TOKEN, (instance: UmbLanguageStore) => {
- if (!instance) return;
-
- instance.getAll().subscribe((languages: Array) => {
- this._languages = languages;
- });
- });
+ protected async firstUpdated() {
+ const { data } = await this.#cultureRepository.requestCultures();
+ if (data) {
+ this._cultures = data.items;
+ }
}
#handleLanguageChange(event: Event) {
@@ -95,13 +88,13 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
const isoCode = target.value.toString();
if (isoCode) {
- this.#languageWorkspaceContext?.update({ isoCode });
+ this.#languageWorkspaceContext?.setCulture(isoCode);
// If the language name is not set, we set it to the name of the selected language.
if (!this.language?.name) {
- const language = this._availableCultures.find((culture) => culture.name === isoCode);
- if (language) {
- this.#languageWorkspaceContext?.update({ name: language.name });
+ const culture = this._cultures.find((culture) => culture.name === isoCode);
+ if (culture && culture.englishName) {
+ this.#languageWorkspaceContext?.setName(culture.englishName);
}
}
} else {
@@ -141,12 +134,12 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
#handleFallbackChange(event: UUIComboboxEvent) {
if (event instanceof UUIComboboxEvent) {
const target = event.composedPath()[0] as UUIComboboxElement;
- this.#languageWorkspaceContext?.setFallbackLanguage(target.value.toString());
+ this.#languageWorkspaceContext?.setFallbackCulture(target.value.toString());
}
}
get #filteredCultures(): Array {
- return this._availableCultures.filter((culture) => {
+ return this._cultures.filter((culture) => {
return culture.englishName?.toLowerCase().includes(this._search.toLowerCase());
});
}
@@ -162,7 +155,7 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
}
get #fromAvailableCultures() {
- return this._availableCultures.find((culture) => culture.name === this.language?.isoCode);
+ return this._cultures.find((culture) => culture.name === this.language?.isoCode);
}
#renderCultureWarning() {
@@ -259,10 +252,10 @@ export class UmbWorkspaceViewLanguageEditElement extends UmbLitElement {
}
}
-export default UmbWorkspaceViewLanguageEditElement;
+export default UmbEditLanguageWorkspaceViewElement;
declare global {
interface HTMLElementTagNameMap {
- 'umb-workspace-view-language-edit': UmbWorkspaceViewLanguageEditElement;
+ 'umb-edit-language-workspace-view': UmbEditLanguageWorkspaceViewElement;
}
}
From 69722aa3003c9792bd6a29d6f7d017b137f81cfd Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Wed, 15 Feb 2023 22:12:38 +0100
Subject: [PATCH 023/116] register delete language entity action + language
repository
---
.../languages/entity-actions/manifests.ts | 22 +++++++++++++++++++
.../settings/languages/manifests.ts | 4 +++-
.../languages/repository/manifests.ts | 13 +++++++++++
3 files changed, 38 insertions(+), 1 deletion(-)
create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/entity-actions/manifests.ts
create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/manifests.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/entity-actions/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/entity-actions/manifests.ts
new file mode 100644
index 0000000000..84b57075b0
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/entity-actions/manifests.ts
@@ -0,0 +1,22 @@
+import { UmbDeleteEntityAction } from '../../../shared/entity-actions/delete/delete.action';
+import { ManifestEntityAction } from '@umbraco-cms/extensions-registry';
+
+const entityType = 'language';
+const repositoryAlias = 'Umb.Repository.Languages';
+
+const entityActions: Array = [
+ {
+ type: 'entityAction',
+ alias: 'Umb.EntityAction.Language.Delete',
+ name: 'Delete Language Entity Action',
+ meta: {
+ entityType,
+ repositoryAlias,
+ icon: 'umb:trash',
+ label: 'Delete',
+ api: UmbDeleteEntityAction,
+ },
+ },
+];
+
+export const manifests = [...entityActions];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/manifests.ts
index 450deac4e9..c7e92f8c72 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/manifests.ts
@@ -1,4 +1,6 @@
+import { manifests as repositoryManifests } from './repository/manifests';
import { manifests as treeManifests } from './sidebar-menu-item/manifests';
+import { manifests as entityActions } from './entity-actions/manifests';
import { manifests as workspaceManifests } from './workspace/manifests';
-export const manifests = [...treeManifests, ...workspaceManifests];
+export const manifests = [...repositoryManifests, ...entityActions, ...treeManifests, ...workspaceManifests];
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/manifests.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/manifests.ts
new file mode 100644
index 0000000000..7020f13c22
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/manifests.ts
@@ -0,0 +1,13 @@
+import { UmbLanguageRepository } from '../repository/language.repository';
+import { ManifestRepository } from 'libs/extensions-registry/repository.models';
+
+export const LANGUAGE_REPOSITORY_ALIAS = 'Umb.Repository.Languages';
+
+const repository: ManifestRepository = {
+ type: 'repository',
+ alias: LANGUAGE_REPOSITORY_ALIAS,
+ name: 'Languages Repository',
+ class: UmbLanguageRepository,
+};
+
+export const manifests = [repository];
From ee46ae2084e092d20c580d2e2293b504a1f2786d Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Thu, 16 Feb 2023 09:50:27 +0100
Subject: [PATCH 024/116] multiurl
---
.../input-media-picker.element.ts | 5 +-
.../input-multi-url-picker.element.ts | 49 ++++++-
.../src/core/mocks/data/data-type.data.ts | 2 +-
.../modal-layout-multi-url-picker.element.ts | 121 ++++++++++++------
4 files changed, 128 insertions(+), 49 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
index 90e4c0e49d..381726055c 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-media-picker/input-media-picker.element.ts
@@ -21,8 +21,9 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
}
#add-button {
text-align: center;
- min-height: 160px;
+ height: 202px;
}
+
uui-icon {
display: block;
margin: 0 auto;
@@ -168,7 +169,7 @@ export class UmbInputMediaPickerElement extends FormControlMixin(UmbLitElement)
return html` ${this._items?.map((item) => this._renderItem(item))} ${this._renderButton()} `;
}
private _renderButton() {
- if (this.max == 1 && this._items && this._items.length > 0) return;
+ if (this._items && this.max && this._items.length >= this.max) return;
return html`
;
@@ -115,28 +138,40 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
}
private _openPicker() {
- const modalHandler = this._modalService?.multiUrlPicker();
+ const modalHandler = this._modalService?.multiUrlPicker({ treeItem: this._selectedKeys[0], target: this.target });
modalHandler?.onClose().then(({ selection }: any) => {
- //this._setSelection(selection);
- console.log(selection);
+ this.selectedKeys[0] = selection.treeItem;
+ this.target = selection.target;
+ this.url = selection.href;
});
}
render() {
- return html`${this._items?.map((item) => this._renderItem(item))}
+ return html`${this._urls?.map((url) => this._renderItem(url))}
Add `;
}
- private _renderItem(item: FolderTreeItemModel) {
- // TODO: remove when we have a way to handle trashed items
- const tempItem = item as FolderTreeItemModel & { isTrashed: boolean };
+ private _renderItem(url: Url) {
+ return html`
+
+ `;
+ // TODO: remove when we have a way to handle trashed items
+ //const tempItem = item as FolderTreeItemModel & { isTrashed: boolean };
+
+ /*
return html`
${tempItem.isTrashed ? html` Trashed ` : nothing}
`;
+ */
+ }
+ private _renderItemIcon(url: Url) {
+ if (url.href === 'key') return html``;
+ if (url.target === true) return html``;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
index 45783537fd..b733792ff9 100644
--- a/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/mocks/data/data-type.data.ts
@@ -327,7 +327,7 @@ export const data: Array = [
data: [
{
alias: 'validationLimit',
- value: { max: 1 },
+ value: { max: 2 },
},
],
},
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.element.ts
index aafb22eb9e..39a56104f1 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.element.ts
@@ -1,12 +1,17 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, query, state } from 'lit/decorators.js';
+import { UUIBooleanInputEvent, UUIInputElement, UUIToggleElement } from '@umbraco-ui/uui';
import { UmbModalLayoutElement } from '../modal-layout.element';
export interface UmbModalMultiUrlPickerData {
- title?: string;
+ UrlString?: string;
+ anchorString?: string;
+ linkTitle?: string;
+ target?: boolean;
hideAnchor?: boolean;
- selection?: string;
+ treeItem?: string;
+ ignoreUserStartNodes?: boolean;
}
import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
@@ -33,11 +38,13 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement
- Link Title
- Target
- Open the link in a new tab
+ Open the link in a new tab
@@ -112,13 +141,27 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement - `; - } else { - return html`Link
+ Anchor / querystring
+
@@ -137,7 +180,7 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement`; } } From c9e27de687c94bd8bbe495848f4eb6d332f9850e Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 16 Feb 2023 13:09:32 +0100 Subject: [PATCH 025/116] linkpicker --- .../input-multi-url-picker.element.ts | 140 ++++++++---------- ...property-editor-ui-color-picker.element.ts | 1 - ...erty-editor-ui-multi-url-picker.element.ts | 11 +- .../src/core/mocks/data/data-type.data.ts | 19 ++- .../modal-layout-link-picker.element.ts} | 120 +++++++++------ .../modal-layout-multi-url-picker.stories.ts | 4 +- .../src/core/modal/modal.service.ts | 12 +- 7 files changed, 161 insertions(+), 146 deletions(-) rename src/Umbraco.Web.UI.Client/src/core/modal/layouts/{multi-url-picker/modal-layout-multi-url-picker.element.ts => link-picker/modal-layout-link-picker.element.ts} (56%) rename src/Umbraco.Web.UI.Client/src/core/modal/layouts/{multi-url-picker => link-picker}/modal-layout-multi-url-picker.stories.ts (89%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts index 38bb0cb82d..6f8be61e30 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts @@ -4,14 +4,19 @@ import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; import { UmbLitElement } from '@umbraco-cms/element'; -import { DocumentTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api'; +import { DocumentTreeItemModel, EntityTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbObserverController } from '@umbraco-cms/observable-api'; -export type OverlaySize = 'small' | 'medium' | 'large'; -export interface Url { - title: string; - href: string; - target: boolean; +export interface Link { + icon?: string; + name?: string; + published?: boolean; + queryString?: string; + target?: string; + trashed?: boolean; + udi?: string; + url?: string; } @customElement('umb-input-multi-url-picker') @@ -70,108 +75,81 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen @property({ type: Boolean, attribute: 'hide-anchor' }) hideAnchor?: boolean; + @property() + ignoreUserStartNodes?: boolean; + /** * @type {"small" | "medium" | "large"} * @attr * @default "small" */ @property() - overlaySize: OverlaySize = 'small'; - - // TODO: do we need both selectedKeys and value? If we just use value we follow the same pattern as native form controls. - private _selectedKeys: Array = [];
- public get selectedKeys(): Array {
- return this._selectedKeys;
- }
- public set selectedKeys(keys: Array) {
- this._selectedKeys = keys;
- super.value = keys.join(',');
- }
+ overlaySize?: 'small' | 'medium' | 'large' | 'full';
@property()
- public set value(keysString: string) {
- if (keysString !== this._value) {
- this.selectedKeys = keysString.split(/[ ,]+/);
- }
- }
-
- @property()
- target = false;
-
- @property()
- title = '';
-
- @property()
- url = '';
-
- @state()
- private _urls?: Url[] = [
- {
- title: 'Cake',
- href: 'google.com',
- target: true,
- },
- ];
-
- @state()
- private _items?: Array;
+ links: Array = [];
private _modalService?: UmbModalService;
+ private _pickedItemsObserver?: UmbObserverController;
constructor() {
super();
- this.addValidator(
- 'rangeUnderflow',
- () => this.minMessage,
- () => !!this.min && this._selectedKeys.length < this.min
- );
- this.addValidator(
- 'rangeOverflow',
- () => this.maxMessage,
- () => !!this.max && this._selectedKeys.length > this.max
- );
-
this.consumeContext(UMB_MODAL_SERVICE_CONTEXT_TOKEN, (instance) => {
this._modalService = instance;
});
}
- private _openPicker() {
- const modalHandler = this._modalService?.multiUrlPicker({ treeItem: this._selectedKeys[0], target: this.target });
- modalHandler?.onClose().then(({ selection }: any) => {
- this.selectedKeys[0] = selection.treeItem;
- this.target = selection.target;
- this.url = selection.href;
+ private async _observePickedDocumentsOrMedias() {
+ this._pickedItemsObserver?.destroy();
+ }
+
+ private _removeItem(index: number) {
+ this.links.splice(index, 1);
+ this.requestUpdate();
+ }
+
+ private _openPicker(data?: Link, index?: number) {
+ const modalHandler = this._modalService?.linkPicker(
+ {
+ name: data?.name || undefined,
+ published: data?.published || undefined,
+ queryString: data?.queryString || undefined,
+ target: data?.target || undefined,
+ trashed: data?.trashed || undefined,
+ udi: data?.udi || undefined,
+ url: data?.url || undefined,
+ },
+ {
+ hideAnchor: this.hideAnchor,
+ ignoreUserStartNodes: this.ignoreUserStartNodes,
+ overlaySize: this.overlaySize || 'small',
+ }
+ );
+ modalHandler?.onClose().then((newUrl: Link) => {
+ if (!newUrl) return;
+
+ if (index !== undefined && index >= 0) this.links[index] = newUrl;
+ else this.links.push(newUrl);
+ this.requestUpdate();
});
}
render() {
- return html`${this._urls?.map((url) => this._renderItem(url))}
+ return html`${this.links?.map((link, index) => this._renderItem(link, index))}
Add `;
}
- private _renderItem(url: Url) {
- return html`
-
+ private _renderItem(link: Link, index: number) {
+ return html`
+
+ Remove
+
`;
-
- // TODO: remove when we have a way to handle trashed items
- //const tempItem = item as FolderTreeItemModel & { isTrashed: boolean };
-
- /*
- return html`
-
- ${tempItem.isTrashed ? html` Trashed ` : nothing}
-
-
- `;
- */
- }
- private _renderItemIcon(url: Url) {
- if (url.href === 'key') return html``;
- if (url.target === true) return html``;
}
}
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
index ce6b39d155..453b358ee0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/color-picker/property-editor-ui-color-picker.element.ts
@@ -2,7 +2,6 @@ import { html } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { UUIColorSwatchesEvent } from '@umbraco-ui/uui';
-import '../../../../shared/components/color-picker/color-picker.element';
import { UmbLitElement } from '@umbraco-cms/element';
import type { DataTypePropertyModel } from '@umbraco-cms/backend-api';
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
index a6d394ba46..0bf35f6cee 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/property-editors/uis/multi-url-picker/property-editor-ui-multi-url-picker.element.ts
@@ -3,9 +3,7 @@ import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, property, state } from 'lit/decorators.js';
import { ifDefined } from 'lit-html/directives/if-defined.js';
import { UmbInputMultiUrlPickerElement } from '../../../components/input-multi-url-picker/input-multi-url-picker.element';
-import type { OverlaySize } from '../../../components/input-multi-url-picker/input-multi-url-picker.element';
import { UmbLitElement } from '@umbraco-cms/element';
-import type { DataTypePropertyData } from '@umbraco-cms/models';
/**
* @element umb-property-editor-ui-multi-url-picker
@@ -22,7 +20,7 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement {
public set value(value: string[]) {
this._value = value || [];
}
-
+ /*
@property({ type: Array, attribute: false })
public set config(config: DataTypePropertyData[]) {
const overlaySize = config.find((x) => x.alias === 'overlaySize');
@@ -30,22 +28,19 @@ export class UmbPropertyEditorUIMultiUrlPickerElement extends UmbLitElement {
const hideAnchor = config.find((x) => x.alias === 'hideAnchor');
if (hideAnchor) this._hideAnchor = hideAnchor.value;
- }
+ }*/
- @state()
- private _overlaySize?: OverlaySize;
@state()
private _hideAnchor?: boolean;
private _onChange(event: CustomEvent) {
- this._value = (event.target as UmbInputMultiUrlPickerElement).selectedKeys;
+ //this._value = (event.target as UmbInputMultiUrlPickerElement);
this.dispatchEvent(new CustomEvent('property-value-change'));
}
render() {
return html` = [
parentKey: null,
propertyEditorAlias: 'Umbraco.MultiUrlPicker',
propertyEditorUiAlias: 'Umb.PropertyEditorUI.MultiUrlPicker',
- data: [],
+ data: [
+ {
+ alias: 'hideAnchor',
+ value: false,
+ },
+ {
+ alias: 'ignoreUserStartNodes',
+ value: false,
+ },
+ {
+ alias: 'maxNumber',
+ value: null,
+ },
+ {
+ alias: 'minNumber',
+ value: null,
+ },
+ ],
},
{
type: 'data-type',
diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts
similarity index 56%
rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.element.ts
rename to src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts
index 39a56104f1..972150db4f 100644
--- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-link-picker.element.ts
@@ -1,23 +1,28 @@
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, query, state } from 'lit/decorators.js';
-import { UUIBooleanInputEvent, UUIInputElement, UUIToggleElement } from '@umbraco-ui/uui';
+import { UUIBooleanInputEvent, UUIInputElement } from '@umbraco-ui/uui';
import { UmbModalLayoutElement } from '../modal-layout.element';
-
-export interface UmbModalMultiUrlPickerData {
- UrlString?: string;
- anchorString?: string;
- linkTitle?: string;
- target?: boolean;
- hideAnchor?: boolean;
- treeItem?: string;
- ignoreUserStartNodes?: boolean;
-}
-
import { UmbTreeElement } from '../../../../backoffice/shared/components/tree/tree.element';
+export interface LinkPickerData {
+ icon?: string;
+ name?: string;
+ published?: boolean;
+ queryString?: string;
+ target?: string;
+ trashed?: boolean;
+ udi?: string;
+ url?: string;
+}
+
+export interface LinkPickerConfig {
+ hideAnchor?: boolean;
+ ignoreUserStartNodes?: boolean;
+ overlaySize?: 'small' | 'medium' | 'large' | 'full';
+}
@customElement('umb-modal-layout-multi-url-picker')
-export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement {
+export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement {
static styles = [
UUITextStyles,
css`
@@ -53,16 +58,19 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement
+ @input=${() => (this._link.name = this._linkTitleInput.value as string)}
+ .value="${this._link.name ?? ''}">
Target
Open the link in a new tab
+ label="Toggle if link should open in a new tab"
+ .checked="${this._link.target === '_blank' ? true : false}"
+ @change="${(e: UUIBooleanInputEvent) =>
+ e.target.checked ? (this._link.target = '_blank') : (this._link.target = '')}">
+ Open the link in a new tab
+
@@ -147,30 +167,32 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement + .value="${this._link.udi ?? this._link.url ?? ''}" + @input=${() => (this._link.url = this._linkInput.value as string)} + .disabled="${this._link.udi ? true : false}"> `; } private _renderAnchorInput() { - if (this._layout.hideAnchor) return; + if (this._layout.hideAnchor) return nothing; return html`Anchor / querystring
Link to page
-
@@ -180,7 +202,7 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement`; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts similarity index 89% rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.stories.ts rename to src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts index 4bb37b0aaf..d41ed207e7 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts @@ -1,5 +1,5 @@ import '../../../../backoffice/shared/components/body-layout/body-layout.element'; -import './modal-layout-multi-url-picker.element'; +import './modal-layout-link-picker.element'; import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit'; @@ -7,7 +7,7 @@ import { html } from 'lit'; import type { UmbModalLayoutMultiUrlPickerElement, UmbModalMultiUrlPickerData, -} from './modal-layout-multi-url-picker.element'; +} from './modal-layout-link-picker.element'; export default { title: 'API/Modals/Layouts/Multi Url Picker', diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts index 9d3debf9ef..21f790dcda 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts @@ -5,7 +5,7 @@ import './layouts/media-picker/modal-layout-media-picker.element'; import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element'; import './layouts/modal-layout-current-user.element'; import './layouts/icon-picker/modal-layout-icon-picker.element'; -import './layouts/multi-url-picker/modal-layout-multi-url-picker.element'; +import './layouts/link-picker/modal-layout-link-picker.element'; import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; import { BehaviorSubject } from 'rxjs'; @@ -15,7 +15,7 @@ import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element'; import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element'; import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layout-media-picker.element'; -import type { UmbModalMultiUrlPickerData } from './layouts/multi-url-picker/modal-layout-multi-url-picker.element'; +import type { LinkPickerConfig, LinkPickerData } from './layouts/link-picker/modal-layout-link-picker.element'; import { UmbModalHandler } from './modal-handler'; import { UmbContextToken } from '@umbraco-cms/context-api'; @@ -95,8 +95,12 @@ export class UmbModalService { * @return {*} {UmbModalHandler} * @memberof UmbModalService */ - public multiUrlPicker(data?: UmbModalMultiUrlPickerData): UmbModalHandler { - return this.open('umb-modal-layout-multi-url-picker', { data, type: 'sidebar', size: 'small' }); + public linkPicker(data?: LinkPickerData, config?: LinkPickerConfig): UmbModalHandler { + return this.open('umb-modal-layout-multi-url-picker', { + data, + type: 'sidebar', + size: config?.overlaySize || 'small', + }); } /** From ec7059ee263e681c0880085dc76e2baa534ff14f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen
Date: Thu, 16 Feb 2023 13:17:54 +0100
Subject: [PATCH 026/116] add dropdown element to supply styles to the uui
popover element
---
.../components/dropdown/dropdown.element.ts | 55 +++++++++++++++++++
1 file changed, 55 insertions(+)
create mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts
new file mode 100644
index 0000000000..8f6ce7868a
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/dropdown/dropdown.element.ts
@@ -0,0 +1,55 @@
+import { UUITextStyles } from '@umbraco-ui/uui-css';
+import { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { UmbLitElement } from '@umbraco-cms/element';
+
+@customElement('umb-dropdown')
+export class UmbDropdownElement extends UmbLitElement {
+ static styles = [
+ UUITextStyles,
+ css`
+ #container {
+ display: inline-block;
+ }
+
+ #dropdown {
+ overflow: hidden;
+ z-index: -1;
+ background-color: var(--uui-combobox-popover-background-color, var(--uui-color-surface));
+ border: 1px solid var(--uui-color-border);
+ border-radius: var(--uui-border-radius);
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ box-shadow: var(--uui-shadow-depth-3);
+ width: 500px;
+ }
+ `,
+ ];
+
+ @property({ type: Boolean, reflect: true })
+ open = false;
+
+ render() {
+ return html`
+
+
+ `;
+ }
+
+ #renderDropdown() {
+ return html`
+
Date: Thu, 16 Feb 2023 13:18:03 +0100
Subject: [PATCH 027/116] import dropdown element
---
.../src/backoffice/shared/components/index.ts | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
index 2d6e7725aa..565fd6e060 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/index.ts
@@ -8,6 +8,7 @@ import './ref-property-editor-ui/ref-property-editor-ui.element';
import './content-property/content-property.element';
import './table/table.element';
import './code-block/code-block.element';
+import './dropdown/dropdown.element';
import './extension-slot/extension-slot.element';
import './workspace/workspace-layout/workspace-layout.element';
From 4c8cb817961c30371f703a6b1016d0474bef40b0 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Thu, 16 Feb 2023 13:18:30 +0100
Subject: [PATCH 028/116] use requestItems in delete action instead of
treeItems
---
.../backoffice/shared/entity-actions/delete/delete.action.ts | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-actions/delete/delete.action.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-actions/delete/delete.action.ts
index 58e9d919ae..3521026991 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-actions/delete/delete.action.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/entity-actions/delete/delete.action.ts
@@ -4,7 +4,7 @@ import { UmbControllerHostInterface } from '@umbraco-cms/controller';
import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal';
export class UmbDeleteEntityAction<
- T extends { delete(unique: string): Promise; requestTreeItems(uniques: Array): any }
+ T extends { delete(unique: string): Promise; requestItems(uniques: Array): any }
> extends UmbEntityActionBase {
#modalService?: UmbModalService;
@@ -19,7 +19,7 @@ export class UmbDeleteEntityAction<
async execute() {
if (!this.repository || !this.#modalService) return;
- const { data } = await this.repository.requestTreeItems([this.unique]);
+ const { data } = await this.repository.requestItems([this.unique]);
if (data) {
const item = data[0];
From 70fe4a6bc4bde1d97133cca9e9e4963d71d8fba1 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Thu, 16 Feb 2023 13:18:46 +0100
Subject: [PATCH 029/116] add method to language repo to request items
---
.../languages/repository/language.repository.ts | 15 +++++++++++++++
1 file changed, 15 insertions(+)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
index 252b7bb753..814f361eea 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/settings/languages/repository/language.repository.ts
@@ -53,6 +53,8 @@ export class UmbLanguageRepository {
return this.#detailDataSource.get(isoCode);
}
+ // TODO: maybe this should be renamed to something more generic.
+ // Revisit when collection are in place
async requestLanguages({ skip, take } = { skip: 0, take: 1000 }) {
await this.#init;
@@ -94,6 +96,19 @@ export class UmbLanguageRepository {
return { data, error };
}
+ async requestItems(isoCode: Array) {
+ // HACK: filter client side until we have a proper server side endpoint
+ const { data, error } = await this.requestLanguages();
+
+ let items = undefined;
+
+ if (data) {
+ items = data.items = data.items.filter((x) => isoCode.includes(x.isoCode!));
+ }
+
+ return { data: items, error };
+ }
+
async delete(key: string) {
await this.#init;
From 14dd992decad18f7150811379ac78462c63948f4 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
Date: Thu, 16 Feb 2023 13:18:57 +0100
Subject: [PATCH 030/116] add todo
---
.../workspace/language-root/language-root-workspace.element.ts | 1 +
1 file changed, 1 insertion(+)
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 557c30e9b5..7f103017db 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
@@ -128,6 +128,7 @@ export class UmbLanguageRootWorkspaceElement extends UmbLitElement {
color="default"
href="section/settings/language/create/root">
+
-
+ private _toggleDebugPane() {
+ this._debugPaneOpen = !this._debugPaneOpen;
+ }
+
+ private _openDialog() {
+ const modalHandler = this._modalService?.open('umb-debug-modal-layout', { size: 'medium', type: 'sidebar', data:{ contexts: this.contexts }});
+
+ modalHandler?.onClose().then((data) => {
+ // if any data is supplied on close, it will be available here.
+ console.log('modal closed data', data);
+ });
+ }
+
+
+
+ private _renderDialog() {
+ return html`
+ Context Aliases to consume
--
- ${this._renderContextAliases()}
-
+
+
+
`;
+ }
+
+ private _renderPanel(){
+ return html`
+
+
+
+
+
`;
}
private _renderContextAliases() {
const aliases = [];
- for (const [alias, instance] of this.contextAliases) {
+ for (const [alias, instance] of this.contexts) {
aliases.push(
html`
+
- `;
- }
-
- return nothing;
+
+
Context Aliases to consume
+-
+ ${this._renderContextAliases()}
+
+
`
+ );
+ }
+
+ return aliases;
+ }
+
+ private _renderInstance(instance: any) {
+ const instanceKeys: TemplateResult[] = [];
+
+ if (typeof instance === 'function') {
+ return instanceKeys.push(html`${alias} ${typeof instance}
+ ${this._renderInstance(instance)} +Methods
+-
+ ${methodNames.map((methodName) => html`
- ${methodName} `)} +
Properties
`); + + for (const key in instance) { + if (key.startsWith('_')) { + continue; + } + + const value = instance[key]; + if (typeof value === 'string') { + instanceKeys.push(html`
-
- Link
- ${this._renderLinkUrlInput()}
-
-
- Anchor / querystring
-
+ ${this._renderLinkUrlInput()} ${this._renderAnchorInput()}
@@ -112,13 +141,27 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement - `; - } else { - return html`
@@ -137,7 +180,7 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement`; } } From c9e27de687c94bd8bbe495848f4eb6d332f9850e Mon Sep 17 00:00:00 2001 From: Lone Iversen <108085781+loivsen@users.noreply.github.com> Date: Thu, 16 Feb 2023 13:09:32 +0100 Subject: [PATCH 025/116] linkpicker --- .../input-multi-url-picker.element.ts | 140 ++++++++---------- ...property-editor-ui-color-picker.element.ts | 1 - ...erty-editor-ui-multi-url-picker.element.ts | 11 +- .../src/core/mocks/data/data-type.data.ts | 19 ++- .../modal-layout-link-picker.element.ts} | 120 +++++++++------ .../modal-layout-multi-url-picker.stories.ts | 4 +- .../src/core/modal/modal.service.ts | 12 +- 7 files changed, 161 insertions(+), 146 deletions(-) rename src/Umbraco.Web.UI.Client/src/core/modal/layouts/{multi-url-picker/modal-layout-multi-url-picker.element.ts => link-picker/modal-layout-link-picker.element.ts} (56%) rename src/Umbraco.Web.UI.Client/src/core/modal/layouts/{multi-url-picker => link-picker}/modal-layout-multi-url-picker.stories.ts (89%) diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts index 38bb0cb82d..6f8be61e30 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts @@ -4,14 +4,19 @@ import { customElement, property, state } from 'lit/decorators.js'; import { ifDefined } from 'lit-html/directives/if-defined.js'; import { FormControlMixin } from '@umbraco-ui/uui-base/lib/mixins'; import { UmbLitElement } from '@umbraco-cms/element'; -import { DocumentTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api'; +import { DocumentTreeItemModel, EntityTreeItemModel, FolderTreeItemModel } from '@umbraco-cms/backend-api'; import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal'; +import { UmbObserverController } from '@umbraco-cms/observable-api'; -export type OverlaySize = 'small' | 'medium' | 'large'; -export interface Url { - title: string; - href: string; - target: boolean; +export interface Link { + icon?: string; + name?: string; + published?: boolean; + queryString?: string; + target?: string; + trashed?: boolean; + udi?: string; + url?: string; } @customElement('umb-input-multi-url-picker') @@ -70,108 +75,81 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen @property({ type: Boolean, attribute: 'hide-anchor' }) hideAnchor?: boolean; + @property() + ignoreUserStartNodes?: boolean; + /** * @type {"small" | "medium" | "large"} * @attr * @default "small" */ @property() - overlaySize: OverlaySize = 'small'; - - // TODO: do we need both selectedKeys and value? If we just use value we follow the same pattern as native form controls. - private _selectedKeys: Array
@@ -147,30 +167,32 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement + .value="${this._link.udi ?? this._link.url ?? ''}" + @input=${() => (this._link.url = this._linkInput.value as string)} + .disabled="${this._link.udi ? true : false}"> `; } private _renderAnchorInput() { - if (this._layout.hideAnchor) return; + if (this._layout.hideAnchor) return nothing; return html`
@@ -180,7 +202,7 @@ export class UmbModalLayoutMultiUrlPickerElement extends UmbModalLayoutElement`; } } diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.stories.ts b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts similarity index 89% rename from src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.stories.ts rename to src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts index 4bb37b0aaf..d41ed207e7 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/layouts/multi-url-picker/modal-layout-multi-url-picker.stories.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/layouts/link-picker/modal-layout-multi-url-picker.stories.ts @@ -1,5 +1,5 @@ import '../../../../backoffice/shared/components/body-layout/body-layout.element'; -import './modal-layout-multi-url-picker.element'; +import './modal-layout-link-picker.element'; import { Meta, Story } from '@storybook/web-components'; import { html } from 'lit'; @@ -7,7 +7,7 @@ import { html } from 'lit'; import type { UmbModalLayoutMultiUrlPickerElement, UmbModalMultiUrlPickerData, -} from './modal-layout-multi-url-picker.element'; +} from './modal-layout-link-picker.element'; export default { title: 'API/Modals/Layouts/Multi Url Picker', diff --git a/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts b/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts index 9d3debf9ef..21f790dcda 100644 --- a/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts +++ b/src/Umbraco.Web.UI.Client/src/core/modal/modal.service.ts @@ -5,7 +5,7 @@ import './layouts/media-picker/modal-layout-media-picker.element'; import './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element'; import './layouts/modal-layout-current-user.element'; import './layouts/icon-picker/modal-layout-icon-picker.element'; -import './layouts/multi-url-picker/modal-layout-multi-url-picker.element'; +import './layouts/link-picker/modal-layout-link-picker.element'; import { UUIModalSidebarSize } from '@umbraco-ui/uui-modal-sidebar'; import { BehaviorSubject } from 'rxjs'; @@ -15,7 +15,7 @@ import type { UmbModalConfirmData } from './layouts/confirm/modal-layout-confirm import type { UmbModalContentPickerData } from './layouts/content-picker/modal-layout-content-picker.element'; import type { UmbModalPropertyEditorUIPickerData } from './layouts/property-editor-ui-picker/modal-layout-property-editor-ui-picker.element'; import type { UmbModalMediaPickerData } from './layouts/media-picker/modal-layout-media-picker.element'; -import type { UmbModalMultiUrlPickerData } from './layouts/multi-url-picker/modal-layout-multi-url-picker.element'; +import type { LinkPickerConfig, LinkPickerData } from './layouts/link-picker/modal-layout-link-picker.element'; import { UmbModalHandler } from './modal-handler'; import { UmbContextToken } from '@umbraco-cms/context-api'; @@ -95,8 +95,12 @@ export class UmbModalService { * @return {*} {UmbModalHandler} * @memberof UmbModalService */ - public multiUrlPicker(data?: UmbModalMultiUrlPickerData): UmbModalHandler { - return this.open('umb-modal-layout-multi-url-picker', { data, type: 'sidebar', size: 'small' }); + public linkPicker(data?: LinkPickerData, config?: LinkPickerConfig): UmbModalHandler { + return this.open('umb-modal-layout-multi-url-picker', { + data, + type: 'sidebar', + size: config?.overlaySize || 'small', + }); } /** From ec7059ee263e681c0880085dc76e2baa534ff14f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen
+
+ `;
+ }
+}
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'umb-dropdown': UmbDropdownElement;
+ }
+}
From 4d951f75c1b7e98395718784a3b57a804df11546 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen
- This will delete language ${this.value.name}.
-
- Are you sure you want to delete?
- `,
- color: 'danger',
- confirmLabel: 'Delete',
- });
-
- modalHandler?.onClose().then(({ confirmed }) => {
- if (confirmed) {
- this.#languageStore?.delete([this.value.isoCode!]);
- }
- });
+ #onClose() {
+ this._isOpen = false;
}
render() {
+ // TODO: we need to use conditionals on each action here. But until we have that in place
+ // we'll just remove all actions on the default language.
if (this.value.isDefault) return nothing;
- return html`
-
-
- ${repeat(
- this.#filteredCultures,
- (language) => language.name,
- (language) =>
- html`
- ${language.englishName}
- `
- )}
-
-
+
${this.language.isoCode}
${this._publishedStatusText}
-
+ contextsTemplates.push(
+ html`
+
Context: ${alias}
- (${typeof instance})
+ (${typeof instance})
Callable Function `);
+ return instanceTemplates.push(html`Callable Function `);
} else if (typeof instance === 'object') {
const methodNames = this.getClassMethodNames(instance);
if (methodNames.length) {
- instanceKeys.push(html`Methods - ${methodNames.join(', ')} `);
+ instanceTemplates.push(
+ html`
+
+ Methods
+
+ `);
}
+ instanceTemplates.push(html`Properties `);
+
for (const key in instance) {
if (key.startsWith('_')) {
continue;
@@ -183,16 +194,16 @@ export class UmbDebug extends UmbLitElement {
const value = instance[key];
if (typeof value === 'string') {
- instanceKeys.push(html`${key} = ${value} `);
+ instanceTemplates.push(html`${key} = ${value} `);
} else {
- instanceKeys.push(html`${key} (${typeof value}) `);
+ instanceTemplates.push(html`${key} (${typeof value}) `);
}
}
} else {
- instanceKeys.push(html`Context is a primitive with value: ${instance} `);
+ instanceTemplates.push(html`Context is a primitive with value: ${instance} `);
}
- return instanceKeys;
+ return instanceTemplates;
}
private getClassMethodNames(klass: any) {
From fb54bd7ddd4bafa4d7f2e1373a2b227ba8e31aec Mon Sep 17 00:00:00 2001
From: Warren Buckley
Date: Thu, 16 Feb 2023 21:20:16 +0000
Subject: [PATCH 063/116] Remove uneeded code now
---
.../components/debug/debug.modal.element.ts | 83 +------------------
1 file changed, 4 insertions(+), 79 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
index b47b026e6c..eed378d006 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
@@ -1,7 +1,7 @@
-import { css, html, nothing, TemplateResult } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css';
-import { UmbModalHandler, UmbModalLayoutElement } from '@umbraco-cms/modal';
+import { UmbModalLayoutElement } from '@umbraco-cms/modal';
@customElement('umb-debug-modal-layout')
export class UmbDebugModalLayout extends UmbModalLayoutElement {
@@ -65,87 +65,12 @@ export class UmbDebugModalLayout extends UmbModalLayoutElement {
- ${this._renderContextAliases()}
+ ${this.data.content}
Close
`;
}
-
- private _renderContextAliases() {
- if(!this.data) {
- return nothing;
- }
-
- const aliases = [];
- for (const [alias, instance] of this.data.contexts) {
- aliases.push(
- html`
- Callable Function `);
- } else if (typeof instance === 'object') {
- const methodNames = this.getClassMethodNames(instance);
- if (methodNames.length) {
- instanceKeys.push(
- html`
- ${key} = ${value} `);
- } else {
- instanceKeys.push(html`${key} Type (${typeof value}) `);
- }
- }
- } else {
- instanceKeys.push(html`Context is a primitive with value: ${instance} `);
- }
-
- return instanceKeys;
- }
-
-
- private getClassMethodNames(klass: any) {
- const isGetter = (x: any, name: string): boolean => !!(Object.getOwnPropertyDescriptor(x, name) || {}).get;
- const isFunction = (x: any, name: string): boolean => typeof x[name] === 'function';
- const deepFunctions = (x: any): any =>
- x !== Object.prototype &&
- Object.getOwnPropertyNames(x)
- .filter((name) => isGetter(x, name) || isFunction(x, name))
- .concat(deepFunctions(Object.getPrototypeOf(x)) || []);
- const distinctDeepFunctions = (klass: any) => Array.from(new Set(deepFunctions(klass)));
-
- const allMethods =
- typeof klass.prototype === 'undefined'
- ? distinctDeepFunctions(klass)
- : Object.getOwnPropertyNames(klass.prototype);
- return allMethods.filter((name: any) => name !== 'constructor' && !name.startsWith('_'));
- }
}
declare global {
From 6bf96716ea2184a1bcb2e342a55c9ce5de9fccac Mon Sep 17 00:00:00 2001
From: Warren Buckley
Date: Thu, 16 Feb 2023 21:24:48 +0000
Subject: [PATCH 064/116] Specify an interface/type for the modal like others
in codebase
---
.../shared/components/debug/debug.modal.element.ts | 10 +++++++---
1 file changed, 7 insertions(+), 3 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
index eed378d006..d86045c85e 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
@@ -1,10 +1,14 @@
-import { css, html } from 'lit';
+import { css, html, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { UmbModalLayoutElement } from '@umbraco-cms/modal';
+export interface UmbDebugModalData {
+ content: TemplateResult | string;
+}
+
@customElement('umb-debug-modal-layout')
-export class UmbDebugModalLayout extends UmbModalLayoutElement {
+export class UmbDebugModalLayout extends UmbModalLayoutElement {
static styles = [
UUITextStyles,
css`
@@ -65,7 +69,7 @@ export class UmbDebugModalLayout extends UmbModalLayoutElement {
- ${this.data.content}
+ ${this.data?.content}
Close
From 430ccc7ea405eee444ebb20d944d51e9e25f7bff Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 17 Feb 2023 09:16:44 +0100
Subject: [PATCH 065/116] set class as default export
---
.../components/debug/debug.modal.element.ts | 15 +++++----------
1 file changed, 5 insertions(+), 10 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
index d86045c85e..d9d370aaf0 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.modal.element.ts
@@ -8,7 +8,7 @@ export interface UmbDebugModalData {
}
@customElement('umb-debug-modal-layout')
-export class UmbDebugModalLayout extends UmbModalLayoutElement {
+export default class UmbDebugModalLayout extends UmbModalLayoutElement {
static styles = [
UUITextStyles,
css`
@@ -34,8 +34,8 @@ export class UmbDebugModalLayout extends UmbModalLayoutElement
-
-
- ${this.data?.content}
-
+ ${this.data?.content}
Close
`;
From 6ab0bd77d11f2dd1d1f5c2560ff1fbb178d7ffa4 Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 17 Feb 2023 09:17:02 +0100
Subject: [PATCH 066/116] add properties to a sub-ul list
---
.../shared/components/debug/debug.element.ts | 18 ++++++++++++++----
1 file changed, 14 insertions(+), 4 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index 324d7b84d9..d4f23a9f0f 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -182,10 +182,11 @@ export class UmbDebug extends UmbLitElement {
${methodNames.map((methodName) => html`${methodName} `)}
- `);
+ `
+ );
}
- instanceTemplates.push(html`Properties `);
+ const props: TemplateResult[] = [];
for (const key in instance) {
if (key.startsWith('_')) {
@@ -194,11 +195,20 @@ export class UmbDebug extends UmbLitElement {
const value = instance[key];
if (typeof value === 'string') {
- instanceTemplates.push(html`${key} = ${value} `);
+ props.push(html`${key} = ${value} `);
} else {
- instanceTemplates.push(html`${key} (${typeof value}) `);
+ props.push(html`${key} (${typeof value}) `);
}
}
+
+ instanceTemplates.push(html`
+
+ Properties
+
+ `);
} else {
instanceTemplates.push(html`Context is a primitive with value: ${instance} `);
}
From 29667b8bb70c23cfc6595a03b9f75954c935331d Mon Sep 17 00:00:00 2001
From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com>
Date: Fri, 17 Feb 2023 09:17:30 +0100
Subject: [PATCH 067/116] lazily load the modal layout
---
.../shared/components/debug/debug.element.ts | 73 ++++++++-----------
1 file changed, 32 insertions(+), 41 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
index d4f23a9f0f..84aff299aa 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/debug/debug.element.ts
@@ -5,21 +5,18 @@ import { UmbContextDebugRequest } from '@umbraco-cms/context-api';
import { UmbLitElement } from '@umbraco-cms/element';
import { UmbModalService, UMB_MODAL_SERVICE_CONTEXT_TOKEN } from '@umbraco-cms/modal';
-// TODO: Ask Jacob how to lazily load this depending on a property
-import './debug.modal.element';
-
@customElement('umb-debug')
export class UmbDebug extends UmbLitElement {
static styles = [
UUITextStyles,
- css`
+ css`
#container {
display: block;
font-family: monospace;
z-index: 10000;
- position:relative;
+ position: relative;
width: 100%;
padding: 10px 0;
}
@@ -75,14 +72,13 @@ export class UmbDebug extends UmbLitElement {
this._modalService = modalService;
});
}
-
+
connectedCallback(): void {
super.connectedCallback();
// Dispatch it
this.dispatchEvent(
new UmbContextDebugRequest((contexts: Map) => {
-
// The Contexts are collected
// When travelling up through the DOM from this element
// to the root of which then uses the callback prop
@@ -94,56 +90,52 @@ export class UmbDebug extends UmbLitElement {
}
render() {
- if (this.enabled) {
- return this.dialog ? this._renderDialog() : this._renderPanel();
+ if (this.enabled) {
+ return this.dialog ? this._renderDialog() : this._renderPanel();
} else {
return nothing;
}
-
}
private _toggleDebugPane() {
this._debugPaneOpen = !this._debugPaneOpen;
}
- private _openDialog() {
+ private async _openDialog() {
// Open a modal that uses the HTML component called 'umb-debug-modal-layout'
- this._modalService?.open('umb-debug-modal-layout', {
- size: 'small',
- type: 'sidebar',
- data:{
- content: this._renderContextAliases()
- }
+ await import('./debug.modal.element.js');
+ this._modalService?.open('umb-debug-modal-layout', {
+ size: 'medium',
+ type: 'sidebar',
+ data: {
+ content: this._renderContextAliases(),
+ },
});
}
-
-
private _renderDialog() {
- return html`
-
Context Aliases to consume
-
${this._renderContextAliases()}
-
${this._renderInstance(instance)}
-
+ ${methodNames.map((methodName) => html`
- ${methodName} `)} +
-
`
- );
- }
-
- return aliases;
- }
-
- private _renderInstance(instance: any) {
- const instanceKeys: TemplateResult[] = [];
-
- if (typeof instance === 'function') {
- return instanceKeys.push(html`${alias} ${typeof instance}
- ${this._renderInstance(instance)} -Methods
--
- ${methodNames.map((methodName) => html`
- ${methodName} `)} -
Properties
`); - - for (const key in instance) { - if (key.startsWith('_')) { - continue; - } - - const value = instance[key]; - if (typeof value === 'string') { - instanceKeys.push(html`-
+ ${props}
+
-
-
-
`;
+ return html`
+
+
+
`;
}
- private _renderPanel(){
- return html`
-
-
-
+ private _renderPanel() {
+ return html`
+ html`
Context: ${alias}
(${typeof instance})
+
+
-
`;
}
private _renderContextAliases() {
@@ -151,8 +143,7 @@ export class UmbDebug extends UmbLitElement {
for (const [alias, instance] of this.contexts) {
contextsTemplates.push(
- html`
-
-
+
-
+ -
- ${this._renderContextAliases()}
-
+
`;
+
+
- -
+ ${this._renderContextAliases()}
+
-
From f53eff66013a5d6c07f7e4db01b2898a4b181fc1 Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Fri, 17 Feb 2023 09:56:46 +0100
Subject: [PATCH 068/116] update
---
.../input-multi-url-picker/input-multi-url-picker.element.ts | 4 +++-
.../property-editor-ui-multi-url-picker.element.ts | 2 +-
2 files changed, 4 insertions(+), 2 deletions(-)
diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
index bc65dcb756..7512bcde08 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-multi-url-picker/input-multi-url-picker.element.ts
@@ -83,7 +83,7 @@ export class UmbInputMultiUrlPickerElement extends FormControlMixin(UmbLitElemen
@property()
overlaySize?: 'small' | 'medium' | 'large' | 'full';
- @property()
+ @property({ attribute: 'urls' })
multiUrls: Array
@@ -203,8 +210,8 @@ export class UmbModalLayoutLinkPickerElement extends UmbModalLayoutElement<