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

observable sorter

Browse Source
This commit is contained in:
Lone Iversen
2023-09-28 14:17:10 +02:00
committed by Jacob Overgaard
parent 5457ab8d95
commit c16474fd14
8 changed files with 101 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.interface.ts
View File

@@ -16,4 +16,7 @@ export interface UmbWorkspaceContextInterface<DataType = unknown> {
getIsNew(): boolean | undefined;
setIsNew(value: boolean): void;
isSorting: Observable<boolean | undefined>;
getIsSorting(): boolean | undefined;
setIsSorting(value: boolean): void;
}

14
src/Umbraco.Web.UI.Client/src/packages/core/workspace/workspace-context/workspace-context.ts
View File

@@ -24,8 +24,11 @@ export abstract class UmbWorkspaceContext<RepositoryType, EntityType extends Umb
#isNew = new UmbBooleanState(undefined);
isNew = this.#isNew.asObservable();
#isSorting = new UmbBooleanState(undefined);
isSorting = this.#isSorting.asObservable();
constructor(host: UmbControllerHostElement, workspaceAlias: string, repository: RepositoryType) {
super(host)
super(host);
this.host = host;
this.workspaceAlias = workspaceAlias;
this.repository = repository;
@@ -43,6 +46,14 @@ export abstract class UmbWorkspaceContext<RepositoryType, EntityType extends Umb
this.#isNew.next(isNew);
}
getIsSorting() {
return this.#isSorting.getValue();
}
setIsSorting(isSorting: boolean) {
this.#isSorting.next(isSorting);
}
protected saveComplete(data: EntityType) {
if (this.modalContext) {
this.submitModal(data);
@@ -60,5 +71,4 @@ export abstract class UmbWorkspaceContext<RepositoryType, EntityType extends Umb
abstract getEntityType(): string; // TODO: consider of this should be on the repository because a repo is responsible for one entity type
abstract getData(): EntityType | undefined;
abstract save(): Promise<void>;
}

20
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-editor.element.ts
View File

@@ -11,15 +11,6 @@ import { UMB_WORKSPACE_CONTEXT } from '@umbraco-cms/backoffice/workspace';
import { generateAlias } from '@umbraco-cms/backoffice/utils';
@customElement('umb-document-type-workspace-editor')
export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
@state()
private _icon?: string;
@state()
private _iconColorAlias?: string;
// TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors.
#workspaceContext?: UmbDocumentTypeWorkspaceContext;
@state()
private _name?: string;
@@ -29,6 +20,15 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
@state()
private _aliasLocked = true;
@state()
private _icon?: string;
@state()
private _iconColorAlias?: string;
// TODO: Color should be using an alias, and look up in some dictionary/key/value) of project-colors.
#workspaceContext?: UmbDocumentTypeWorkspaceContext;
private _modalContext?: UmbModalManagerContext;
constructor() {
@@ -59,7 +59,7 @@ export class UmbDocumentTypeWorkspaceEditorElement extends UmbLitElement {
}
this.removeControllerByAlias('_observeIsNew');
},
'_observeIsNew'
'_observeIsNew',
);
}

36
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace-sorter.ts Normal file
View File

@@ -0,0 +1,36 @@
import {
DocumentTypePropertyTypeContainerResponseModel,
PropertyTypeContainerModelBaseModel,
} from '@umbraco-cms/backoffice/backend-api';
import { UmbSorterConfig } from '@umbraco-cms/backoffice/sorter';
const SORTER_CONFIG_HORIZONTAL: UmbSorterConfig<PropertyTypeContainerModelBaseModel> = {
compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => {
return element.getAttribute('data-umb-tabs-id') === model.id;
},
querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => {
return container.querySelector(`[data-umb-tabs-id='` + modelEntry.id + `']`);
},
identifier: 'content-type-tabs-sorter',
itemSelector: '[data-umb-tabs-id]',
containerSelector: '#tabs-group',
disabledItemSelector: '[inherited]',
resolveVerticalDirection: () => {
return false;
},
};
const SORTER_CONFIG_VERTICAL: UmbSorterConfig<PropertyTypeContainerModelBaseModel> = {
compareElementToModel: (element: HTMLElement, model: DocumentTypePropertyTypeContainerResponseModel) => {
return element.getAttribute('data-umb-property-id') === model.id;
},
querySelectModelToElement: (container: HTMLElement, modelEntry: PropertyTypeContainerModelBaseModel) => {
return container.querySelector(`[data-umb-property-id='` + modelEntry.id + `']`);
},
identifier: 'content-type-property-sorter',
itemSelector: '[data-umb-property-id]',
containerSelector: '#property-list',
disabledItemSelector: '[inherited]',
};
export { SORTER_CONFIG_VERTICAL, SORTER_CONFIG_HORIZONTAL };

2
src/Umbraco.Web.UI.Client/src/packages/documents/document-types/workspace/document-type-workspace.context.ts
View File

@@ -120,6 +120,7 @@ export class UmbDocumentTypeWorkspaceContext
if (!data) return undefined;
this.setIsNew(true);
this.setIsSorting(false);
//this.#draft.next(data);
return { data } || undefined;
// TODO: Is this wrong? should we return { data }??
@@ -130,6 +131,7 @@ export class UmbDocumentTypeWorkspaceContext
if (!data) return undefined;
this.setIsNew(false);
this.setIsSorting(false);
//this.#draft.next(data);
return { data } || undefined;
// TODO: Is this wrong? should we return { data }??

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

@@ -18,14 +18,13 @@ const SORTER_CONFIG: UmbSorterConfig<DocumentTypePropertyTypeResponseModel> = {
return element.getAttribute('data-umb-property-id') === model.id;
},
querySelectModelToElement: (container: HTMLElement, modelEntry: DocumentTypePropertyTypeResponseModel) => {
return container.querySelector('data-umb-property-id[' + modelEntry.id + ']');
return container.querySelector('data-umb-property-id=[' + modelEntry.id + ']');
},
placeholderClass: 'select',
identifier: 'content-type-property-sorter',
itemSelector: '[data-umb-property-id]',
disabledItemSelector: '[inherited]',
containerSelector: '#property-list',
resolveVerticalDirection: () => false,
};
@customElement('umb-document-type-workspace-view-edit-properties')
@@ -175,11 +174,11 @@ export class UmbDocumentTypeWorkspaceViewEditPropertiesElement extends UmbLitEle
)}
</div>
<uui-button
label=${this.localize.term('contentTypeEditor_addProprety')}
label=${this.localize.term('contentTypeEditor_addProperty')}
id="add"
look="placeholder"
href=${ifDefined(this._modalRouteNewProperty)}>
<umb-localize key="contentTypeEditor_addProprety">Add property</umb-localize>
<umb-localize key="contentTypeEditor_addProperty">Add property</umb-localize>
</uui-button> `;
}

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

@@ -1,6 +1,6 @@
import { UmbDocumentTypeWorkspaceContext } from '../../document-type-workspace.context.js';
import { css, html, customElement, property, state, repeat, ifDefined } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from "@umbraco-cms/backoffice/style";
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import { UmbContentTypeContainerStructureHelper } from '@umbraco-cms/backoffice/content-type';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import { PropertyTypeContainerModelBaseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -59,11 +59,15 @@ export class UmbDocumentTypeWorkspaceViewEditTabElement extends UmbLitElement {
@state()
_hasProperties = false;
@state()
_sortModeActive?: boolean;
constructor() {
super();
this.consumeContext(UMB_WORKSPACE_CONTEXT, (context) => {
this._groupStructureHelper.setStructureManager((context as UmbDocumentTypeWorkspaceContext).structure);
this.observe(context.isSorting, (isSorting) => (this._sortModeActive = isSorting));
});
this.observe(this._groupStructureHelper.containers, (groups) => {
this._groups = groups;

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

@@ -83,7 +83,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement
private _activePath = '';
@state()
private sortModeActive = false;
private sortModeActive?: boolean;
@state()
private _buttonDisabled: boolean = false;
@@ -130,11 +130,14 @@ export class UmbDocumentTypeWorkspaceViewEditElement
},
'_observeGroups',
);
this.observe(this._workspaceContext.isSorting, (isSorting) => (this.sortModeActive = isSorting));
}
#changeMode() {
this.sortModeActive = !this.sortModeActive;
if (!this._tabs || !this.sortModeActive) return;
this._workspaceContext?.setIsSorting(!this.sortModeActive);
if (!this._tabs) return;
this.sorter = new UmbSorterController(this, this.config);
this.sorter.setModel(this._tabs);
}
@@ -381,6 +384,7 @@ export class UmbDocumentTypeWorkspaceViewEditElement
placeholder="Unnamed"
label=${tab.name!}
value="${tab.name!}"
auto-width
@change=${(e: InputEvent) => this.#tabNameChanged(e, tab)}
@blur=${(e: InputEvent) => this.#tabNameChanged(e, tab)}
@input=${() => (this._buttonDisabled = true)}
@@ -440,21 +444,6 @@ export class UmbDocumentTypeWorkspaceViewEditElement
static styles = [
UmbTextStyles,
css`
uui-tab .no-edit {
pointer-events: none;
}
.no-edit uui-input {
pointer-events: auto;
}
.--umb-sorter-placeholder::after {
content: '';
position: absolute;
inset: 2px;
border: 1px dashed var(--uui-color-divider-emphasis);
}
#buttons-wrapper {
flex: 1;
display: flex;
@@ -500,20 +489,12 @@ export class UmbDocumentTypeWorkspaceViewEditElement
border-right: 1px solid var(--uui-color-border);
}
uui-tab:not(:hover, :focus) .trash {
opacity: 0;
transition: opacity 120ms;
}
.inherited {
vertical-align: sub;
}
uui-input:not(:focus, :hover) {
border: 1px solid transparent;
.no-edit uui-input {
pointer-events: auto;
}
.no-edit {
pointer-events: none;
display: inline-flex;
padding-left: var(--uui-size-space-3);
border: 1px solid transparent;
@@ -526,9 +507,29 @@ export class UmbDocumentTypeWorkspaceViewEditElement
transition: opacity 120ms;
}
uui-tab:not(:hover, :focus) .trash {
opacity: 0;
transition: opacity 120ms;
}
uui-input:not(:focus, :hover) {
border: 1px solid transparent;
}
.inherited {
vertical-align: sub;
}
.--umb-sorter-placeholder > * {
visibility: hidden;
}
.--umb-sorter-placeholder::after {
content: '';
position: absolute;
inset: 2px;
border: 1px dashed var(--uui-color-divider-emphasis);
}
`,
];
}