@formicoidea/labre-core 0.48.0 → 0.49.0

package/dist/_pkgs/data-view/view-presets/flat/flat-view-ui.js

@@ -0,0 +1,266 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { popFilterableSimpleMenu, popupTargetFromElement, } from '../../../affine-components/context-menu/index.js';
+import { translateKey } from '../../../affine-shared/services/index.js';
+import { OPEN_LABEL } from '../../../affine-components/translations.js';
+import { CenterPeekIcon } from '@blocksuite/icons/lit';
+import { stdContext } from '../../../std/index.js';
+import { consume } from '@lit/context';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { renderCellStatus } from '../../core/component/cell-status/cell-status.js';
+import { GroupTitle } from '../../core/group-by/group-title.js';
+import { hideGroupAction, renderGroupToggle, } from '../../core/group-by/group-visibility.js';
+import { isNewTabClick } from '../../core/utils/new-tab-click.js';
+import { renderUniLit } from '../../core/utils/uni-component/uni-component.js';
+import { DataViewUIBase, DataViewUILogicBase, } from '../../core/view/data-view-base.js';
+/**
+ * The UI logic both ungrouped presets share. Neither has a selection model of
+ * its own: a cell edits through the cell host (`dv-standalone-cell`), with the
+ * very renderer and popups a table cell mounts, and a click anywhere else on
+ * a card or a row opens the row through the root's detail panel, the path
+ * the table's and the kanban's open buttons take. Grouped (B8), each group
+ * draws under the table's group header; drag and drop of rows between groups
+ * is not offered: a row changes group by editing its value.
+ */
+export class FlatViewUILogic extends DataViewUILogicBase {
+    constructor() {
+        super(...arguments);
+        this.clearSelection = () => { };
+        this.focusFirstCell = () => { };
+        this.showIndicator = (_evt) => false;
+        this.hideIndicator = () => { };
+        this.moveTo = (_id, _evt) => { };
+        this.addRow = (position, groupKey) => {
+            if (this.view.readonly$.value)
+                return;
+            const rowId = this.view.rowAdd(position, groupKey);
+            if (rowId)
+                this.openRow(rowId);
+            return rowId;
+        };
+        /** A Ctrl/Cmd click asks the host for a new tab (ADR 0035 §9a). */
+        this.openRow = (rowId, newTab = false) => {
+            this.root.openDetailPanel({ view: this.view, rowId, newTab });
+        };
+    }
+}
+let FlatViewUI = (() => {
+    let _classSuper = DataViewUIBase;
+    let _std_decorators;
+    let _std_initializers = [];
+    let _std_extraInitializers = [];
+    return class FlatViewUI extends _classSuper {
+        constructor() {
+            super(...arguments);
+            this.#std_accessor_storage = __runInitializers(this, _std_initializers, void 0);
+            this.onRowClick = (__runInitializers(this, _std_extraInitializers), (event) => {
+                const rowId = event.currentTarget.dataset.rowId;
+                if (rowId)
+                    this.logic.openRow(rowId, isNewTabClick(event));
+            });
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _std_decorators = [consume({ context: stdContext })];
+            __esDecorate(this, null, _std_decorators, { kind: "accessor", name: "std", static: false, private: false, access: { has: obj => "std" in obj, get: obj => obj.std, set: (obj, value) => { obj.std = value; } }, metadata: _metadata }, _std_initializers, _std_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        #std_accessor_storage;
+        /** Absent outside an editor (a unit test): the wordings read English. */
+        get std() { return this.#std_accessor_storage; }
+        set std(value) { this.#std_accessor_storage = value; }
+        wording([key, fallback]) {
+            return this.std ? translateKey(this.std, key, fallback) : fallback;
+        }
+        get view() {
+            return this.logic.view;
+        }
+        /**
+         * One property's value, drawn and edited by the cell renderer a table cell
+         * mounts. `readonly` draws the value only and lets a click through to the
+         * card or row, which is how the title opens its row.
+         */
+        renderCell(property, rowId, readonly = false) {
+            const view = this.view;
+            const cell = property.cellGetOrCreate(rowId);
+            // As a table cell: a value not yet hydrated mounts no renderer, so nothing
+            // can be edited over it (ADR 0035 §9e).
+            const status = renderCellStatus(cell);
+            if (status) {
+                return html `<span data-property-id="${property.id}">${status}</span>`;
+            }
+            return html `<dv-standalone-cell
+      data-property-id="${property.id}"
+      .cell="${cell}"
+      .readonly="${readonly ||
+                view.readonly$.value ||
+                property.readonly$.value}"
+      .onEditingChange="${(editing) => view.lockRows(editing)}"
+    ></dv-standalone-cell>`;
+        }
+        renderOpenButton(rowId) {
+            const label = this.wording(OPEN_LABEL);
+            return html `<button
+      class="dv-flat-open"
+      data-testid="dv-flat-open"
+      aria-label="${label}"
+      title="${label}"
+      @click="${(event) => {
+                event.stopPropagation();
+                this.logic.openRow(rowId, isNewTabClick(event));
+            }}"
+    >
+      ${CenterPeekIcon()}
+    </button>`;
+        }
+        renderHeaderWidget() {
+            const headerWidget = this.logic.headerWidget;
+            if (!headerWidget)
+                return nothing;
+            return renderUniLit(headerWidget, { dataViewLogic: this.logic });
+        }
+        /**
+         * The view's rows through `renderBody`: once, or once per visible group
+         * under its header, then the hidden groups (B8, PRD REQ-DB-13 and 16). A
+         * folded group keeps its header only.
+         */
+        renderGrouped(renderBody) {
+            const trait = this.view.groupTrait;
+            const groups = trait.visibleGroups$.value;
+            if (!groups)
+                return renderBody(this.view.rows$.value);
+            return html `${repeat(groups, group => group.key, group => this.renderGroup(group, renderBody))} <dv-hidden-groups .groupTrait="${trait}"></dv-hidden-groups>`;
+        }
+        renderGroup(group, renderBody) {
+            const collapsed = group.manager.collapsed$(group.key).value;
+            const wording = (pair) => this.wording(pair);
+            return html `<section
+      class="dv-flat-group"
+      data-testid="dv-flat-group"
+      data-group-key="${group.key}"
+    >
+      <div class="dv-flat-group-header">
+        ${renderGroupToggle(group, wording)}
+        <div class="dv-flat-group-title">
+          ${GroupTitle(group, {
+                readonly: this.view.readonly$.value,
+                clickAdd: () => this.logic.addRow('start', group.key),
+                clickOps: (event) => {
+                    popFilterableSimpleMenu(popupTargetFromElement(event.currentTarget), [hideGroupAction(group, wording)]);
+                },
+            })}
+        </div>
+      </div>
+      ${collapsed ? nothing : renderBody(group.rows, group)}
+    </section>`;
+        }
+    };
+})();
+export { FlatViewUI };
+/** The group header both presets draw, the table's title and count. */
+export const flatGroupStyles = css `
+  .dv-flat-group {
+    display: flex;
+    flex-direction: column;
+    padding-top: 8px;
+  }
+
+  .dv-flat-group-header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    min-height: 32px;
+  }
+
+  .dv-flat-group-title {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+    overflow: hidden;
+  }
+
+  .dv-flat-group-header:hover .group-header-op,
+  .dv-flat-group-header:focus-within .group-header-op {
+    visibility: visible;
+    opacity: 1;
+  }
+
+  @media (pointer: coarse) {
+    .dv-flat-group-header {
+      min-height: 44px;
+    }
+  }
+`;
+/** The open button both presets draw, shown on hover or keyboard focus. */
+export const flatOpenButtonStyles = css `
+  .dv-flat-open {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+    border-radius: 4px;
+    background-color: var(--affine-background-primary-color);
+    color: var(--affine-icon-color);
+    cursor: pointer;
+    visibility: hidden;
+  }
+
+  .dv-flat-open svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .dv-flat-open:focus-visible {
+    visibility: visible;
+    outline: 2px solid var(--affine-primary-color);
+    outline-offset: 1px;
+  }
+
+  @media (hover: hover) {
+    .dv-flat-open:hover {
+      background-color: var(--affine-hover-color);
+    }
+  }
+`;

package/dist/_pkgs/data-view/view-presets/gallery/define.d.ts

@@ -0,0 +1,14 @@
+import { FlatSingleView, type FlatViewDataType } from '../flat/flat-view-manager.js';
+export declare const galleryViewType: {
+    type: "gallery";
+    createModel: <Data extends import("../../index.js").DataViewDataType>(model: import("../../index.js").DataViewModelConfig<Data>) => import("../../index.js").DataViewModel<"gallery", Data> & {
+        createMeta: (renderer: import("../../index.js").DataViewRendererConfig) => import("../../index.js").ViewMeta<"gallery", Data>;
+    };
+};
+export type GalleryViewData = FlatViewDataType<typeof galleryViewType.type>;
+export declare class GallerySingleView extends FlatSingleView<GalleryViewData> {
+    get type(): string;
+}
+export declare const galleryViewModel: import("../../index.js").DataViewModel<"gallery", GalleryViewData> & {
+    createMeta: (renderer: import("../../index.js").DataViewRendererConfig) => import("../../index.js").ViewMeta<"gallery", GalleryViewData>;
+};

package/dist/_pkgs/data-view/view-presets/gallery/define.js

@@ -0,0 +1,15 @@
+import { viewType } from '../../core/view/data-view.js';
+import { VIEW_NAME_GALLERY } from '../../translations.js';
+import { FlatSingleView, flatViewDefaultData, } from '../flat/flat-view-manager.js';
+export const galleryViewType = viewType('gallery');
+export class GallerySingleView extends FlatSingleView {
+    get type() {
+        return this.data$.value?.mode ?? galleryViewType.type;
+    }
+}
+export const galleryViewModel = galleryViewType.createModel({
+    defaultName: VIEW_NAME_GALLERY[1],
+    defaultNameKey: VIEW_NAME_GALLERY[0],
+    dataViewManager: GallerySingleView,
+    defaultData: flatViewDefaultData,
+});

package/dist/_pkgs/data-view/view-presets/gallery/effect.d.ts

@@ -0,0 +1 @@
+export declare function galleryEffects(): void;

package/dist/_pkgs/data-view/view-presets/gallery/effect.js

@@ -0,0 +1,4 @@
+import { GalleryViewUI } from './gallery-view.js';
+export function galleryEffects() {
+    customElements.define('dv-gallery-view-ui', GalleryViewUI);
+}

package/dist/_pkgs/data-view/view-presets/gallery/gallery-view.d.ts

@@ -0,0 +1,27 @@
+import { FlatViewUI, FlatViewUILogic } from '../flat/flat-view-ui.js';
+import type { GallerySingleView } from './define.js';
+/**
+ * The gallery preset (ADR 0035 §1, B6): one card per row, its title then its
+ * visible properties, each drawn by the cell a table draws. A card is a
+ * kanban card out of its column, flat as every document surface is (DESIGN.md,
+ * the Flat-Page Rule): a hairline, no shadow.
+ *
+ * ponytail: no cover image on the card. The product asks for none in v2.0
+ * (PRD REQ-DB-1 to 16); the upgrade is a stored `header.coverColumn`, as the
+ * kanban's, drawn above the title with the image property's renderer.
+ */
+export declare class GalleryViewUILogic extends FlatViewUILogic<GallerySingleView> {
+    renderer: import("../../../affine-shared/types/uni-component.js").UniComponent<unknown, {}>;
+}
+export declare class GalleryViewUI extends FlatViewUI<GalleryViewUILogic> {
+    static styles: import("lit").CSSResult[];
+    connectedCallback(): void;
+    private renderCard;
+    private renderNewCard;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'dv-gallery-view-ui': GalleryViewUI;
+    }
+}

package/dist/_pkgs/data-view/view-presets/gallery/gallery-view.js

@@ -0,0 +1,179 @@
+import { PlusIcon } from '@blocksuite/icons/lit';
+import { cssVarV2 } from '@toeverything/theme/v2';
+import { css, html, nothing, unsafeCSS } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
+import { groupToggleStyles } from '../../core/group-by/group-visibility.js';
+import { createUniComponentFromWebComponent } from '../../core/utils/uni-component/uni-component.js';
+import { DATA_VIEW_NEW_PAGE } from '../../translations.js';
+import { flatGroupStyles, flatOpenButtonStyles, FlatViewUI, FlatViewUILogic, } from '../flat/flat-view-ui.js';
+/**
+ * The gallery preset (ADR 0035 §1, B6): one card per row, its title then its
+ * visible properties, each drawn by the cell a table draws. A card is a
+ * kanban card out of its column, flat as every document surface is (DESIGN.md,
+ * the Flat-Page Rule): a hairline, no shadow.
+ *
+ * ponytail: no cover image on the card. The product asks for none in v2.0
+ * (PRD REQ-DB-1 to 16); the upgrade is a stored `header.coverColumn`, as the
+ * kanban's, drawn above the title with the image property's renderer.
+ */
+export class GalleryViewUILogic extends FlatViewUILogic {
+    constructor() {
+        super(...arguments);
+        this.renderer = createUniComponentFromWebComponent(GalleryViewUI);
+    }
+}
+export class GalleryViewUI extends FlatViewUI {
+    static { this.styles = [
+        flatOpenButtonStyles,
+        flatGroupStyles,
+        groupToggleStyles,
+        css `
+      dv-gallery-view-ui {
+        display: block;
+      }
+
+      .dv-gallery {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 12px;
+        padding: 4px 0 8px;
+      }
+
+      .dv-gallery-card {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+        min-height: 72px;
+        padding: 8px;
+        box-sizing: border-box;
+        border: 1px solid ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+        border-radius: 8px;
+        background-color: var(--affine-background-primary-color);
+        cursor: pointer;
+      }
+
+      .dv-gallery-card-title {
+        padding: 2px 32px 4px 4px;
+        font-weight: 500;
+        font-size: var(--data-view-cell-text-size);
+        line-height: var(--data-view-cell-text-line-height);
+        overflow: hidden;
+      }
+
+      .dv-gallery-card-property {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        min-height: 28px;
+        padding: 0 4px;
+        border-radius: 4px;
+        overflow: hidden;
+      }
+
+      .dv-gallery-card-property-icon {
+        display: flex;
+        flex-shrink: 0;
+        color: var(--affine-icon-color);
+      }
+
+      .dv-gallery-card-property-icon svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      .dv-gallery-card-property dv-standalone-cell {
+        flex: 1;
+      }
+
+      .dv-gallery-card:focus-within .dv-flat-open {
+        visibility: visible;
+      }
+
+      .dv-gallery-new {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 4px;
+        min-height: 72px;
+        border: 1px dashed ${unsafeCSS(cssVarV2.layer.insideBorder.border)};
+        border-radius: 8px;
+        background: transparent;
+        color: var(--affine-text-secondary-color);
+        font-family: inherit;
+        font-size: var(--data-view-cell-text-size);
+        cursor: pointer;
+      }
+
+      .dv-gallery-new svg {
+        width: 16px;
+        height: 16px;
+      }
+
+      @media (hover: hover) {
+        .dv-gallery-card:hover,
+        .dv-gallery-new:hover,
+        .dv-gallery-card-property:hover {
+          background-color: var(--affine-hover-color);
+        }
+
+        .dv-gallery-card:hover .dv-flat-open {
+          visibility: visible;
+        }
+      }
+
+      @media (pointer: coarse) {
+        .dv-gallery-card-property {
+          min-height: 44px;
+        }
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.dataset.testid = 'dv-gallery-view';
+    }
+    renderCard(rowId) {
+        const view = this.view;
+        const title = view.titleProperty$.value;
+        return html `<div
+      class="dv-gallery-card"
+      data-testid="dv-gallery-card"
+      data-row-id="${rowId}"
+      @click="${this.onRowClick}"
+    >
+      ${title
+            ? html `<div class="dv-gallery-card-title">
+            ${this.renderCell(title, rowId, true)}
+          </div>`
+            : nothing}
+      ${repeat(view.bodyProperties$.value, property => property.id, property => html `<div class="dv-gallery-card-property">
+            <uni-lit
+              class="dv-gallery-card-property-icon"
+              .uni="${property.icon}"
+            ></uni-lit>
+            ${this.renderCell(property, rowId)}
+          </div>`)}
+      ${this.renderOpenButton(rowId)}
+    </div>`;
+    }
+    renderNewCard(groupKey) {
+        if (this.view.readonly$.value)
+            return nothing;
+        return html `<button
+      class="dv-gallery-new"
+      data-testid="dv-flat-new"
+      @click="${() => this.logic.addRow('end', groupKey)}"
+    >
+      ${PlusIcon()}<span>${this.wording(DATA_VIEW_NEW_PAGE)}</span>
+    </button>`;
+    }
+    render() {
+        return html `${this.renderHeaderWidget()}
+    ${this.renderGrouped((rows, group) => html `<div class="dv-gallery">
+          ${repeat(rows, row => row.rowId, row => this.renderCard(row.rowId))}
+          ${this.renderNewCard(group?.key)}
+        </div>`)}`;
+    }
+}

package/dist/_pkgs/data-view/view-presets/gallery/index.d.ts

@@ -0,0 +1,2 @@
+export * from './define.js';
+export * from './renderer.js';

package/dist/_pkgs/data-view/view-presets/gallery/index.js

@@ -0,0 +1,2 @@
+export * from './define.js';
+export * from './renderer.js';

package/dist/_pkgs/data-view/view-presets/gallery/renderer.d.ts

@@ -0,0 +1 @@
+export declare const galleryViewMeta: import("../../index.js").ViewMeta<"gallery", import("./define.js").GalleryViewData>;

package/dist/_pkgs/data-view/view-presets/gallery/renderer.js

@@ -0,0 +1,11 @@
+import { createIcon } from '../../core/utils/uni-icon.js';
+import { galleryViewModel } from './define.js';
+import { GalleryViewUILogic } from './gallery-view.js';
+// One UI for both: the cards reflow, and a tap opens the row or edits a value.
+export const galleryViewMeta = galleryViewModel.createMeta({
+    icon: createIcon('GridIcon'),
+    pcLogic: () => GalleryViewUILogic,
+    // Named, not left to the pc fallback: a touch screen draws this UI on
+    // purpose (B5, `mobile-editing.unit.spec.ts`).
+    mobileLogic: () => GalleryViewUILogic,
+});

package/dist/_pkgs/data-view/view-presets/index.d.ts

@@ -1,9 +1,14 @@
 export * from './calendar/index.js';
 export * from './convert.js';
+export * from './flat/flat-view-manager.js';
+export * from './gallery/index.js';
 export * from './kanban/index.js';
+export * from './list/index.js';
 export * from './table/index.js';
 export declare const viewPresets: {
     tableViewMeta: import("../index.js").ViewMeta<"table", import("./index.js").TableViewData>;
     kanbanViewMeta: import("../index.js").ViewMeta<"kanban", import("./index.js").KanbanViewData>;
     calendarViewMeta: import("../index.js").ViewMeta<"calendar", import("./index.js").CalendarViewData>;
+    galleryViewMeta: import("../index.js").ViewMeta<"gallery", import("./index.js").GalleryViewData>;
+    listViewMeta: import("../index.js").ViewMeta<"list", import("./index.js").ListViewData>;
 };

package/dist/_pkgs/data-view/view-presets/index.js

@@ -1,12 +1,19 @@
 import { calendarViewMeta } from './calendar/index.js';
+import { galleryViewMeta } from './gallery/index.js';
 import { kanbanViewMeta } from './kanban/index.js';
+import { listViewMeta } from './list/index.js';
 import { tableViewMeta } from './table/index.js';
 export * from './calendar/index.js';
 export * from './convert.js';
+export * from './flat/flat-view-manager.js';
+export * from './gallery/index.js';
 export * from './kanban/index.js';
+export * from './list/index.js';
 export * from './table/index.js';
 export const viewPresets = {
     tableViewMeta: tableViewMeta,
     kanbanViewMeta: kanbanViewMeta,
     calendarViewMeta: calendarViewMeta,
+    galleryViewMeta: galleryViewMeta,
+    listViewMeta: listViewMeta,
 };

package/dist/_pkgs/data-view/view-presets/kanban/define.js

@@ -1,10 +1,12 @@
 import { BlockSuiteError, ErrorCode } from '../../../global/exceptions/index.js';
 import { defaultGroupBy, getGroupByService, t } from '../../core/index.js';
 import { viewType } from '../../core/view/data-view.js';
+import { VIEW_NAME_KANBAN } from '../../translations.js';
 import { KanbanSingleView } from './kanban-view-manager.js';
 export const kanbanViewType = viewType('kanban');
 export const kanbanViewModel = kanbanViewType.createModel({
-    defaultName: 'Kanban View',
+    defaultName: VIEW_NAME_KANBAN[1],
+    defaultNameKey: VIEW_NAME_KANBAN[0],
     dataViewManager: KanbanSingleView,
     defaultData: viewManager => {
         const groupByService = getGroupByService(viewManager.dataSource);

package/dist/_pkgs/data-view/view-presets/kanban/kanban-view-manager.js

@@ -4,7 +4,8 @@ import { evalFilter } from '../../core/filter/eval.js';
 import { generateDefaultValues } from '../../core/filter/generate-default-values.js';
 import { FilterTrait, filterTraitKey } from '../../core/filter/trait.js';
 import { emptyFilterGroup } from '../../core/filter/utils.js';
-import { GroupTrait, groupTraitKey, sortByManually, } from '../../core/group-by/trait.js';
+import { groupPropertiesOps } from '../../core/group-by/group-properties.js';
+import { GroupTrait, groupTraitKey } from '../../core/group-by/trait.js';
 import { fromJson } from '../../core/property/utils.js';
 import { PropertyBase } from '../../core/view-manager/property.js';
 import { SingleViewBase } from '../../core/view-manager/single-view.js';
@@ -52,58 +53,9 @@ export class KanbanSingleView extends SingleViewBase {
                     };
                 });
             },
-            sortGroup: ids => sortByManually(ids, v => v, this.view?.groupProperties.map(v => v.key) ?? []),
-            sortRow: (key, rows) => {
-                const property = this.view?.groupProperties.find(v => v.key === key);
-                return sortByManually(rows, v => v.rowId, property?.manuallyCardSort ?? []);
-            },
-            changeGroupSort: keys => {
-                const map = new Map(this.view?.groupProperties.map(v => [v.key, v]));
-                this.dataUpdate(() => {
-                    return {
-                        groupProperties: keys.map(key => {
-                            const property = map.get(key);
-                            if (property) {
-                                return property;
-                            }
-                            return {
-                                key,
-                                hide: false,
-                                manuallyCardSort: [],
-                            };
-                        }),
-                    };
-                });
-            },
-            changeRowSort: (groupKeys, groupKey, keys) => {
-                const map = new Map(this.view?.groupProperties.map(v => [v.key, v]));
-                this.dataUpdate(() => {
-                    return {
-                        groupProperties: groupKeys.map(key => {
-                            if (key === groupKey) {
-                                const group = map.get(key);
-                                return group
-                                    ? {
-                                        ...group,
-                                        manuallyCardSort: keys,
-                                    }
-                                    : {
-                                        key,
-                                        hide: false,
-                                        manuallyCardSort: keys,
-                                    };
-                            }
-                            else {
-                                return (map.get(key) ?? {
-                                    key,
-                                    hide: false,
-                                    manuallyCardSort: [],
-                                });
-                            }
-                        }),
-                    };
-                });
-            },
+            ...groupPropertiesOps(() => this.view?.groupProperties ?? [], groupProperties => {
+                this.dataUpdate(() => ({ groupProperties }));
+            }),
         }));
         this.mainProperties$ = computed(() => {
             return (this.data$.value?.header ?? {