@yuuvis/client-framework 2.1.27 → 2.1.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/yuuvis-client-framework-forms.mjs +50 -15
- package/fesm2022/yuuvis-client-framework-forms.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs +1 -1
- package/fesm2022/yuuvis-client-framework-object-form.mjs.map +1 -1
- package/fesm2022/yuuvis-client-framework-tile-list.mjs +35 -32
- package/fesm2022/yuuvis-client-framework-tile-list.mjs.map +1 -1
- package/forms/lib/elements/data-grid/data-grid/data-grid.component.d.ts +13 -6
- package/package.json +4 -4
- package/tile-list/lib/tile-list/tile-list.component.d.ts +7 -6
|
@@ -17,12 +17,12 @@ import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
|
|
|
17
17
|
import { coerceBooleanProperty } from '@angular/cdk/coercion';
|
|
18
18
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
19
19
|
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
|
|
20
|
+
import * as i2$1 from '@angular/material/paginator';
|
|
21
|
+
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
20
22
|
import { YUV_ICONS, ObjectTypeIconComponent } from '@yuuvis/client-framework/icons';
|
|
21
23
|
import * as i3 from '@yuuvis/client-framework/list';
|
|
22
24
|
import { ListItemDirective, YuvListModule } from '@yuuvis/client-framework/list';
|
|
23
25
|
import { YmtMatIconRegistryService, YmtButtonDirective } from '@yuuvis/material';
|
|
24
|
-
import * as i2$1 from '@angular/material/paginator';
|
|
25
|
-
import { MatPaginatorModule } from '@angular/material/paginator';
|
|
26
26
|
import { MatDialogModule, MatDialog } from '@angular/material/dialog';
|
|
27
27
|
import * as i1$3 from '@yuuvis/client-framework/split-view';
|
|
28
28
|
import { YuvSplitViewModule } from '@yuuvis/client-framework/split-view';
|
|
@@ -165,8 +165,7 @@ class TileListComponent {
|
|
|
165
165
|
#elRef;
|
|
166
166
|
#events;
|
|
167
167
|
#listItemsEffect;
|
|
168
|
-
//
|
|
169
|
-
#openContextMenu;
|
|
168
|
+
// #openContextMenu = signal<{ event: MouseEvent } | null>(null);
|
|
170
169
|
#contextFlag;
|
|
171
170
|
onContextMenu(event) {
|
|
172
171
|
event.preventDefault();
|
|
@@ -246,8 +245,7 @@ class TileListComponent {
|
|
|
246
245
|
this._keyManager.destroy();
|
|
247
246
|
this._keyManager = new ActiveDescendantKeyManager(this.listItems() || []).withWrap();
|
|
248
247
|
});
|
|
249
|
-
//
|
|
250
|
-
this.#openContextMenu = signal(null);
|
|
248
|
+
// #openContextMenu = signal<{ event: MouseEvent } | null>(null);
|
|
251
249
|
this.#contextFlag = signal(false);
|
|
252
250
|
this.#currBusy = false;
|
|
253
251
|
this._busy = signal(false);
|
|
@@ -277,6 +275,7 @@ class TileListComponent {
|
|
|
277
275
|
* retrieved. Buckets should be unique so be sure to use a unique namespace.
|
|
278
276
|
*/
|
|
279
277
|
this.bucket = input();
|
|
278
|
+
this.pageSize = input(SearchService.DEFAULT_QUERY_SIZE);
|
|
280
279
|
/**
|
|
281
280
|
* Sets up the ability to select multile tiles
|
|
282
281
|
*/
|
|
@@ -289,7 +288,7 @@ class TileListComponent {
|
|
|
289
288
|
this.applyFlavor(f);
|
|
290
289
|
});
|
|
291
290
|
/**
|
|
292
|
-
* The search query to be executed
|
|
291
|
+
* The search query to be executed. This may be a SearchQuery object or a CMIS query statement.
|
|
293
292
|
*/
|
|
294
293
|
this.query = input();
|
|
295
294
|
this.#preselect = signal([]);
|
|
@@ -334,7 +333,7 @@ class TileListComponent {
|
|
|
334
333
|
this.#query = this.query();
|
|
335
334
|
if (this.#query && this.oc)
|
|
336
335
|
untracked(() => {
|
|
337
|
-
this
|
|
336
|
+
this.#executeQuery(this.#query || undefined);
|
|
338
337
|
this.empytIcon.set(YUV_ICONS.refresh);
|
|
339
338
|
});
|
|
340
339
|
});
|
|
@@ -347,6 +346,9 @@ class TileListComponent {
|
|
|
347
346
|
this.items.findIndex((item) => item.id === dmsObject.id) >= 0 && this.updateTileList([dmsObject]);
|
|
348
347
|
});
|
|
349
348
|
}
|
|
349
|
+
getPageSize() {
|
|
350
|
+
return typeof this.#query === 'string' ? this.pageSize() : this.#query?.size || this.pageSize();
|
|
351
|
+
}
|
|
350
352
|
contextMenuHandler(event, index) {
|
|
351
353
|
if (!coerceBooleanProperty(this.tiles()[index].elRef.nativeElement.ariaSelected)) {
|
|
352
354
|
this._selectByIndex(index, event);
|
|
@@ -392,7 +394,7 @@ class TileListComponent {
|
|
|
392
394
|
this.goToPage(this.pagination.page);
|
|
393
395
|
}
|
|
394
396
|
else
|
|
395
|
-
this
|
|
397
|
+
this.#executeQuery(this.query() || undefined);
|
|
396
398
|
}
|
|
397
399
|
}
|
|
398
400
|
applyFlavor(flavor) {
|
|
@@ -425,18 +427,15 @@ class TileListComponent {
|
|
|
425
427
|
this.#select(this._lastSelection - 1);
|
|
426
428
|
}
|
|
427
429
|
}
|
|
428
|
-
changePage(
|
|
429
|
-
|
|
430
|
-
if (this.#query)
|
|
431
|
-
this.#query.size = pageSize;
|
|
432
|
-
this.goToPage(pageIndex + 1);
|
|
430
|
+
changePage(pe) {
|
|
431
|
+
this.goToPage(pe.pageIndex + 1);
|
|
433
432
|
}
|
|
434
433
|
goToPage(page) {
|
|
435
434
|
if (!this.#query)
|
|
436
435
|
return;
|
|
437
436
|
this._busy.set(true);
|
|
438
437
|
this.#searchService
|
|
439
|
-
.getPage(this.#query, page)
|
|
438
|
+
.getPage(this.#query, page, this.getPageSize())
|
|
440
439
|
.pipe(finalize(() => this._busy.set(false)))
|
|
441
440
|
.subscribe({
|
|
442
441
|
next: (res) => {
|
|
@@ -491,17 +490,22 @@ class TileListComponent {
|
|
|
491
490
|
_selectionToTileData() {
|
|
492
491
|
return this._selection.map((idx) => this.items[idx]);
|
|
493
492
|
}
|
|
494
|
-
|
|
495
|
-
|
|
493
|
+
/**
|
|
494
|
+
* Executes a search query.
|
|
495
|
+
* @param query The search query to execute. This may be a SearchQuery object or a string. If it's a string, it is supposed to
|
|
496
|
+
* be a CMIS query statement.
|
|
497
|
+
*/
|
|
498
|
+
#executeQuery(query) {
|
|
499
|
+
if (query && this.#system.system && !this._busy()) {
|
|
496
500
|
this.searchExecuted = false;
|
|
497
501
|
// reset items to avoid old data being shown while new stuff is loaded
|
|
498
502
|
this.items = [];
|
|
499
|
-
// q.fields = Object.keys(this.#system.system.allFields);
|
|
500
|
-
q.fields = undefined;
|
|
501
503
|
this._busy.set(true);
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
.
|
|
504
|
+
const isSearchQuery = query && typeof query !== 'string';
|
|
505
|
+
if (isSearchQuery) {
|
|
506
|
+
query.fields = undefined;
|
|
507
|
+
}
|
|
508
|
+
(isSearchQuery ? this.#searchService.search(query) : this.#searchService.searchCmis(query, this.getPageSize()))
|
|
505
509
|
.pipe(finalize(() => this._busy.set(false)))
|
|
506
510
|
.subscribe({
|
|
507
511
|
next: (res) => {
|
|
@@ -519,13 +523,13 @@ class TileListComponent {
|
|
|
519
523
|
}
|
|
520
524
|
#setupPagination(searchResult) {
|
|
521
525
|
this.pagination = undefined;
|
|
522
|
-
|
|
523
|
-
|
|
526
|
+
this.pagination = searchResult.paging
|
|
527
|
+
? {
|
|
524
528
|
total: searchResult.totalNumItems,
|
|
525
|
-
pages:
|
|
526
|
-
page:
|
|
527
|
-
}
|
|
528
|
-
|
|
529
|
+
pages: searchResult.paging.totalPages,
|
|
530
|
+
page: searchResult.paging.page
|
|
531
|
+
}
|
|
532
|
+
: undefined;
|
|
529
533
|
}
|
|
530
534
|
#mapToTileData(objects) {
|
|
531
535
|
return objects.map((dmsObject) => {
|
|
@@ -619,16 +623,15 @@ class TileListComponent {
|
|
|
619
623
|
next: (res) => {
|
|
620
624
|
this.oc = res;
|
|
621
625
|
const q = this.query();
|
|
622
|
-
q && this
|
|
626
|
+
q && this.#executeQuery(q);
|
|
623
627
|
}
|
|
624
628
|
});
|
|
625
629
|
}
|
|
626
630
|
ngOnDestroy() {
|
|
627
631
|
this._keyManager?.destroy();
|
|
628
|
-
// this.searchResultSubscription.unsubscribe();
|
|
629
632
|
}
|
|
630
633
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
631
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"
|
|
634
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.12", type: TileListComponent, isStandalone: true, selector: "yuv-tile-list", inputs: { bucket: { classPropertyName: "bucket", publicName: "bucket", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, multiselect: { classPropertyName: "multiselect", publicName: "multiselect", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, flavor: { classPropertyName: "flavor", publicName: "flavor", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, preselect: { classPropertyName: "preselect", publicName: "preselect", isSignal: true, isRequired: false, transformFunction: null }, highlights: { classPropertyName: "highlights", publicName: "highlights", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemSelect: "itemSelect", tileCopy: "tileCopy", tileCut: "tileCut", busy: "busy", queryResult: "queryResult", selectionChange: "selectionChange", itemDblClick: "itemDblClick", ctxMenu: "ctxMenu" }, host: { attributes: { "tabindex": "0", "role": "listbox" }, listeners: { "contextmenu": "onContextMenu($event)", "mousedown": "onMouseDown($event)", "keydown.control.c": "onCopy($event)", "keydown.control.x": "onCut($event)", "keydown": "onKeydown($event)" }, properties: { "class.pagination": "this.pagination" } }, providers: [], queries: [{ propertyName: "emptyContent", first: true, predicate: ["empty"], descendants: true, isSignal: true }], viewQueries: [{ propertyName: "tiles", predicate: TileComponent, descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ListItemDirective, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"getPageSize()\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: var(--tile-border-width, 1px) solid var(--ymt-outline-variant);--tile-border-width: 1px;--tile-icon-size: initial;--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host .tiles{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TileComponent, selector: "yuv-tile", inputs: ["tile", "actionContext"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: YuvListModule }, { kind: "directive", type: i3.ListItemDirective, selector: "[yuvListItem]", inputs: ["disabled", "active", "selected"] }, { kind: "directive", type: ClickDoubleDirective, selector: "[click.single],[click.double]", inputs: ["debounceTime"], outputs: ["click.double", "click.single"] }, { kind: "directive", type: DragSelectDirective, selector: "[yuvDragSelect]", inputs: ["yuvDragSelect"], outputs: ["dragSelectChange", "dragSelect"] }, { kind: "directive", type: DragSelectItemDirective, selector: "[yuvDragSelectItem]" }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i2$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
|
|
632
635
|
}
|
|
633
636
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImport: i0, type: TileListComponent, decorators: [{
|
|
634
637
|
type: Component,
|
|
@@ -646,7 +649,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.12", ngImpo
|
|
|
646
649
|
], host: {
|
|
647
650
|
tabindex: '0',
|
|
648
651
|
role: 'listbox'
|
|
649
|
-
}, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"
|
|
652
|
+
}, template: "<div\n class=\"tiles\"\n [yuvDragSelect]=\"{ disabled: !this.multiselect() || isTouchDevice }\"\n (dragSelectChange)=\"onDragSelectChange($event)\"\n (dragSelect)=\"onDragSelect($event)\"\n>\n @for (i of items; track i.id) {\n <yuv-tile\n yuvDragSelectItem\n yuvListItem\n [attr.aria-selected]=\"selection().includes(i.id)\"\n (click.single)=\"select(i, $event)\"\n (click.double)=\"itemDblClick.emit(i)\"\n [ngClass]=\"{ selected: selection().includes(i.id), last: $last }\"\n [actionContext]=\"options()?.actionContext\"\n [tile]=\"i\"\n [ngStyle]=\"highlightStyles()[i.id]\"\n (contextmenu)=\"contextMenuHandler($event, $index)\"\n ></yuv-tile>\n } @empty {\n <div class=\"empyt-list\">\n @if (searchExecuted && emptyContent()) {\n <ng-content></ng-content>\n }\n </div>\n }\n <div class=\"offset\" (click)=\"clearSelection()\"></div>\n</div>\n@if (pagination) {\n <mat-paginator\n class=\"paginator\"\n [length]=\"pagination?.total\"\n [pageSize]=\"getPageSize()\"\n (page)=\"changePage($event)\"\n hidePageSize\n >\n </mat-paginator>\n}\n", styles: [":host{--tile-current-background: var(--ymt-focus-background);--tile-on-current: var(--ymt-on-focus-background);--tile-selected-background: var(--ymt-selection-background);--tile-on-selected: var(--ymt-on-selection-background);--tile-selected-icon-fill: var(--ymt-primary);--tile-gap: 0px;--tile-border: var(--tile-border-width, 1px) solid var(--ymt-outline-variant);--tile-border-width: 1px;--tile-icon-size: initial;--paging-background: var(--ymt-surface);display:flex;flex-direction:column}:host .tiles{overflow-y:auto;display:flex;flex-flow:column;height:100%}:host .tiles yuv-tile{flex:0 0 auto}:host .tiles .offset{flex:1 1 auto}:host .paginator{border-block-start:1px solid var(--ymt-outline-variant);font:inherit;background-color:var(--paging-background)}:host yuv-tile{cursor:pointer}:host yuv-tile:not(.last){border:var(--tile-border);border-width:var(--tile-border-width);margin-block-end:var(--tile-gap)}:host .empyt-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}\n"] }]
|
|
650
653
|
}], ctorParameters: () => [], propDecorators: { onContextMenu: [{
|
|
651
654
|
type: HostListener,
|
|
652
655
|
args: ['contextmenu', ['$event']]
|