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

temp remove sorting

Browse Source
This commit is contained in:
Mads Rasmussen
2023-12-19 14:21:17 +01:00
parent f1b522db36
commit d99d34db3d
1 changed files with 4 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/components/stylesheet-rule-input/stylesheet-rule-input.element.ts
View File

@@ -1,12 +1,13 @@
import { UmbStylesheetRule } from '../../types.js'; import { UmbStylesheetRule } from '../../types.js';
import { UMB_STYLESHEET_RULE_SETTINGS_MODAL } from './stylesheet-rule-settings-modal.token.js'; import { UMB_STYLESHEET_RULE_SETTINGS_MODAL } from './stylesheet-rule-settings-modal.token.js';
import { UmbChangeEvent } from '@umbraco-cms/backoffice/event'; import { UmbChangeEvent } from '@umbraco-cms/backoffice/event';
import { css, html, customElement, ifDefined, repeat, property } from '@umbraco-cms/backoffice/external/lit'; import { css, html, customElement, repeat, property } from '@umbraco-cms/backoffice/external/lit';
import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui'; import { FormControlMixin } from '@umbraco-cms/backoffice/external/uui';
import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal'; import { UMB_MODAL_MANAGER_CONTEXT_TOKEN, UmbModalManagerContext } from '@umbraco-cms/backoffice/modal';
import { UmbSorterConfig, UmbSorterController } from '@umbraco-cms/backoffice/sorter';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element'; import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
// TODO: add sorting when we have a generic sorting component/functionality for ref lists
@customElement('umb-stylesheet-rule-input') @customElement('umb-stylesheet-rule-input')
export class UmbStylesheetRuleInputElement extends FormControlMixin(UmbLitElement) { export class UmbStylesheetRuleInputElement extends FormControlMixin(UmbLitElement) {
@property({ type: Array, attribute: false }) @property({ type: Array, attribute: false })
@@ -14,44 +15,18 @@ export class UmbStylesheetRuleInputElement extends FormControlMixin(UmbLitElemen
#modalManager: UmbModalManagerContext | undefined; #modalManager: UmbModalManagerContext | undefined;
/*
#sorter = new UmbSorterController(this, {
...SORTER_CONFIG,
performItemInsert: ({ item, newIndex }) => {
return this.#findNewSortOrder(item, newIndex) ?? false;
},
performItemRemove: () => {
//defined so the default does not run
return true;
},
});
*/
constructor() { constructor() {
super(); super();
this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (modalContext) => { this.consumeContext(UMB_MODAL_MANAGER_CONTEXT_TOKEN, (modalContext) => {
this.#modalManager = modalContext; this.#modalManager = modalContext;
}); });
//this.#sorter.setModel(this._rules);
} }
protected getFormElement() { protected getFormElement() {
return undefined; return undefined;
} }
#findNewSortOrder(rule: UmbStylesheetRule, newIndex: number) {
const rules = [...this.getRules()].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
const oldIndex = rules.findIndex((r) => r.name === rule.name);
if (oldIndex === -1) return false;
rules.splice(oldIndex, 1);
rules.splice(newIndex, 0, rule);
this.setRules(rules.map((r, i) => ({ ...r, sortOrder: i })));
return true;
}
#openRuleSettings = (rule: UmbStylesheetRule | null = null) => { #openRuleSettings = (rule: UmbStylesheetRule | null = null) => {
if (!this.#modalManager) throw new Error('Modal context not found'); if (!this.#modalManager) throw new Error('Modal context not found');
@@ -93,10 +68,7 @@ export class UmbStylesheetRuleInputElement extends FormControlMixin(UmbLitElemen
this.rules, this.rules,
(rule, index) => rule.name + index, (rule, index) => rule.name + index,
(rule, index) => html` (rule, index) => html`
<umb-stylesheet-rule-ref <umb-stylesheet-rule-ref name=${rule.name} detail=${rule.selector}>
name=${rule.name}
detail=${rule.selector}
data-umb-rule-name="${ifDefined(rule?.name)}">
<uui-action-bar slot="actions"> <uui-action-bar slot="actions">
<uui-button @click=${() => this.#editRule(rule, index)} label="Edit ${rule.name}">Edit</uui-button> <uui-button @click=${() => this.#editRule(rule, index)} label="Edit ${rule.name}">Edit</uui-button>
<uui-button @click=${() => this.#removeRule(rule)} label="Remove ${rule.name}">Remove</uui-button> <uui-button @click=${() => this.#removeRule(rule)} label="Remove ${rule.name}">Remove</uui-button>
@@ -129,15 +101,3 @@ declare global {
'umb-stylesheet-rule-input': UmbStylesheetRuleInputElement; 'umb-stylesheet-rule-input': UmbStylesheetRuleInputElement;
} }
} }
const SORTER_CONFIG: UmbSorterConfig<UmbStylesheetRule> = {
compareElementToModel: (element: HTMLElement, model: UmbStylesheetRule) => {
return element.getAttribute('data-umb-rule-name') === model.name;
},
querySelectModelToElement: (container: HTMLElement, modelEntry: UmbStylesheetRule) => {
return container.querySelector('data-umb-rule-name[' + modelEntry.name + ']');
},
identifier: 'stylesheet-rules-sorter',
itemSelector: 'umb-stylesheet-rich-text-editor-rule',
containerSelector: '#rules-container',
};