yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update tab name

Browse Source
This commit is contained in:
Niels Lyngsø
2023-04-12 14:30:03 +02:00
parent efc1e03eea
commit 9dec24ce5d
4 changed files with 61 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit-tab.element.ts
View File

@@ -78,7 +78,7 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
#onAddGroup = () => {
// Idea, maybe we can gather the sortOrder from the last group rendered and add 1 to it?
this._groupStructureHelper.addGroup(this._ownerTabId);
this._groupStructureHelper.addContainer(this._ownerTabId);
};
render() {

16
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/workspace/views/design/document-type-workspace-view-edit.element.ts
View File

@@ -142,13 +142,25 @@ export class UmbDocumentTypeWorkspaceViewEditElement extends UmbLitElement {
: ''}
${repeat(
this._tabs,
(tab) => tab.id,
(tab) => tab.id! + tab.name,
(tab) => {
// TODO: make better url folder name:
const path = this._routerPath + '/tab/' + encodeURI(tab.name || '');
return html`<uui-tab label=${tab.name!} .active=${path === this._activePath} href=${path}>
${path === this._activePath
? html` <uui-input label="Tab name" look="placeholder" value=${tab.name!} placeholder="Enter a name">
? html` <uui-input
label="Tab name"
look="placeholder"
value=${tab.name!}
placeholder="Enter a name"
@change=${(e: InputEvent) => {
const newName = (e.target as HTMLInputElement).value;
// Update the current URL, so we are still on this specific tab:
window.history.replaceState(null, '', this._routerPath + '/tab/' + encodeURI(newName));
this._tabsStructureHelper.partialUpdateContainer(tab.id, {
name: newName,
});
}}>
<!-- todo only if its part of root: -->
<uui-button
label="Remove tab"

16
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-container-structure-helper.class.ts
View File

@@ -7,6 +7,7 @@ import { ArrayState, BooleanState, UmbObserverController } from '@umbraco-cms/ba
export class UmbWorkspaceContainerStructureHelper {
#host: UmbControllerHostElement;
#init;
#workspaceContext?: UmbDocumentWorkspaceContext;
@@ -31,10 +32,10 @@ export class UmbWorkspaceContainerStructureHelper {
this.#containers.sortBy((a, b) => (a.sortOrder || 0) - (b.sortOrder || 0));
new UmbContextConsumerController(host, UMB_ENTITY_WORKSPACE_CONTEXT, (context) => {
this.#init = new UmbContextConsumerController(host, UMB_ENTITY_WORKSPACE_CONTEXT, (context) => {
this.#workspaceContext = context as UmbDocumentWorkspaceContext;
this._observeOwnerContainers();
});
}).asPromise();
}
public setType(value?: PropertyContainerTypes) {
@@ -152,9 +153,16 @@ export class UmbWorkspaceContainerStructureHelper {
/** Manipulate methods: */
async addGroup(ownerKey?: string, sortOrder?: number) {
async addContainer(ownerId?: string, sortOrder?: number) {
if (!this.#workspaceContext) return;
await this.#workspaceContext.structure.createContainer(null, ownerKey, this._childType, sortOrder);
await this.#workspaceContext.structure.createContainer(null, ownerId, this._childType, sortOrder);
}
async partialUpdateContainer(groupId?: string, partialUpdate?: Partial<PropertyTypeContainerResponseModelBaseModel>) {
await this.#init;
if (!this.#workspaceContext || !groupId || !partialUpdate) return;
return await this.#workspaceContext.structure.updateContainer(null, groupId, partialUpdate);
}
}

53
src/Umbraco.Web.UI.Client/src/backoffice/shared/components/workspace/workspace-context/workspace-structure-manager.class.ts
View File

@@ -27,7 +27,7 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
#documentTypeRepository: R;
#rootDocumentTypeKey?: string;
#rootDocumentTypeId?: string;
#documentTypeObservers = new Array<UmbControllerInterface>();
#documentTypes = new ArrayState<T>([], (x) => x.id);
readonly documentTypes = this.#documentTypes.asObservable();
@@ -62,7 +62,7 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
public async loadType(id?: string) {
this._reset();
this.#rootDocumentTypeKey = id;
this.#rootDocumentTypeId = id;
const promiseResult = this._loadType(id);
this.#init = promiseResult;
@@ -78,7 +78,7 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
const { data } = await this.#documentTypeRepository.createScaffold(parentId);
if (!data) return {};
this.#rootDocumentTypeKey = data.id;
this.#rootDocumentTypeId = data.id;
this.#init = this._observeDocumentType(data);
await this.#init;
@@ -139,13 +139,13 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
/** Public methods for consuming structure: */
rootDocumentType() {
return this.#documentTypes.getObservablePart((x) => x.find((y) => y.id === this.#rootDocumentTypeKey));
return this.#documentTypes.getObservablePart((x) => x.find((y) => y.id === this.#rootDocumentTypeId));
}
getRootDocumentType() {
return this.#documentTypes.getValue().find((y) => y.id === this.#rootDocumentTypeKey);
return this.#documentTypes.getValue().find((y) => y.id === this.#rootDocumentTypeId);
}
updateRootDocumentType(entry: T) {
this.#documentTypes.updateOne(this.#rootDocumentTypeKey, entry);
this.#documentTypes.updateOne(this.#rootDocumentTypeId, entry);
}
// We could move the actions to another class?
@@ -157,7 +157,7 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
sortOrder?: number
) {
await this.#init;
documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeKey!;
documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeId!;
const container: PropertyTypeContainerResponseModelBaseModel = {
id: generateGuid(),
@@ -175,9 +175,24 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
return container;
}
async updateContainer(
documentTypeId: string | null,
groupKey: string,
partialUpdate: Partial<PropertyTypeContainerResponseModelBaseModel>
) {
await this.#init;
documentTypeId = documentTypeId ?? this.#rootDocumentTypeId!;
const frozenContainers = this.#documentTypes.getValue().find((x) => x.id === documentTypeId)?.containers ?? [];
const containers = partialUpdateFrozenArray(frozenContainers, partialUpdate, (x) => x.id === groupKey);
this.#documentTypes.updateOne(documentTypeId, { containers });
}
async removeContainer(documentTypeKey: string | null, containerId: string | null = null) {
await this.#init;
documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeKey!;
documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeId!;
const frozenContainers = this.#documentTypes.getValue().find((x) => x.id === documentTypeKey)?.containers ?? [];
const containers = frozenContainers.filter((x) => x.id !== containerId);
@@ -185,9 +200,9 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
this.#documentTypes.updateOne(documentTypeKey, { containers });
}
async createProperty(documentTypeKey: string | null, containerId: string | null = null, sortOrder?: number) {
async createProperty(documentTypeId: string | null, containerId: string | null = null, sortOrder?: number) {
await this.#init;
documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeKey!;
documentTypeId = documentTypeId ?? this.#rootDocumentTypeId!;
const property: PropertyTypeResponseModelBaseModel = {
id: generateGuid(),
@@ -195,27 +210,27 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
//sortOrder: sortOrder ?? 0,
};
const properties = [...(this.#documentTypes.getValue().find((x) => x.id === documentTypeKey)?.properties ?? [])];
const properties = [...(this.#documentTypes.getValue().find((x) => x.id === documentTypeId)?.properties ?? [])];
properties.push(property);
this.#documentTypes.updateOne(documentTypeKey, { properties });
this.#documentTypes.updateOne(documentTypeId, { properties });
return property;
}
async updateProperty(
documentTypeKey: string | null,
propertyKey: string,
documentTypeId: string | null,
propertyId: string,
partialUpdate: Partial<DocumentTypePropertyTypeResponseModel>
) {
await this.#init;
documentTypeKey = documentTypeKey ?? this.#rootDocumentTypeKey!;
documentTypeId = documentTypeId ?? this.#rootDocumentTypeId!;
const frozenProperties = this.#documentTypes.getValue().find((x) => x.id === documentTypeKey)?.properties ?? [];
const frozenProperties = this.#documentTypes.getValue().find((x) => x.id === documentTypeId)?.properties ?? [];
const properties = partialUpdateFrozenArray(frozenProperties, partialUpdate, (x) => x.id === propertyKey);
const properties = partialUpdateFrozenArray(frozenProperties, partialUpdate, (x) => x.id === propertyId);
this.#documentTypes.updateOne(documentTypeKey, { properties });
this.#documentTypes.updateOne(documentTypeId, { properties });
}
/*
@@ -229,7 +244,7 @@ export class UmbWorkspacePropertyStructureManager<R extends UmbDocumentTypeRepos
rootDocumentTypeObservablePart<PartResult>(mappingFunction: MappingFunction<T, PartResult>) {
return this.#documentTypes.getObservablePart((docTypes) => {
const docType = docTypes.find((x) => x.id === this.#rootDocumentTypeKey);
const docType = docTypes.find((x) => x.id === this.#rootDocumentTypeId);
return docType ? mappingFunction(docType) : undefined;
});
}