import { ChangeDetectionStrategy, Component } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { GetRoleListDocument, ROLE_FRAGMENT, TypedBaseListComponent, } from '@vendure/admin-ui/core';
import { CUSTOMER_ROLE_CODE, SUPER_ADMIN_ROLE_CODE } from '@vendure/common/lib/shared-constants';
import { gql } from 'apollo-angular';
import * as i0 from "@angular/core";
import * as i1 from "@clr/angular";
import * as i2 from "@angular/common";
import * as i3 from "@angular/router";
import * as i4 from "@vendure/admin-ui/core";
import * as i5 from "@ngx-translate/core";
export const GET_ROLE_LIST = gql `
    query GetRoleList($options: RoleListOptions) {
        roles(options: $options) {
            items {
                ...Role
            }
            totalItems
        }
    }
    ${ROLE_FRAGMENT}
`;
export class RoleListComponent extends TypedBaseListComponent {
    constructor() {
        super();
        this.initialLimit = 3;
        this.displayLimit = {};
        this.filters = this.createFilterCollection()
            .addIdFilter()
            .addDateFilters()
            .addFilter({
            name: 'code',
            type: { kind: 'text' },
            label: _('common.code'),
            filterField: 'code',
        })
            .connectToRoute(this.route);
        this.sorts = this.createSortCollection()
            .defaultSort('createdAt', 'DESC')
            .addSort({ name: 'createdAt' })
            .addSort({ name: 'updatedAt' })
            .addSort({ name: 'code' })
            .addSort({ name: 'description' })
            .connectToRoute(this.route);
        super.configure({
            document: GetRoleListDocument,
            getItems: data => data.roles,
            setVariables: (skip, take) => ({
                options: {
                    skip,
                    take,
                    filter: {
                        code: {
                            contains: this.searchTermControl.value,
                        },
                        ...this.filters.createFilterInput(),
                    },
                    sort: this.sorts.createSortInput(),
                },
            }),
            refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
        });
    }
    toggleDisplayLimit(role) {
        if (this.displayLimit[role.id] === role.permissions.length) {
            this.displayLimit[role.id] = this.initialLimit;
        }
        else {
            this.displayLimit[role.id] = role.permissions.length;
        }
    }
    isDefaultRole(role) {
        return role.code === SUPER_ADMIN_ROLE_CODE || role.code === CUSTOMER_ROLE_CODE;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RoleListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: RoleListComponent, selector: "vdr-role-list", usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"role-list\"></vdr-action-bar-items>\n            <a\n                class=\"btn btn-primary\"\n                *vdrIfPermissions=\"['CreateAdministrator']\"\n                [routerLink]=\"['./', 'create']\"\n            >\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'settings.create-new-role' | translate }}\n            </a>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-data-table-2\n    id=\"role-list\"\n    [items]=\"items$ | async\"\n    [itemsPerPage]=\"itemsPerPage$ | async\"\n    [totalItems]=\"totalItems$ | async\"\n    [currentPage]=\"currentPage$ | async\"\n    [filters]=\"filters\"\n    (pageChange)=\"setPageNumber($event)\"\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\n>\n    <vdr-bulk-action-menu\n        locationId=\"role-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    />\n    <vdr-dt2-search\n        [searchTermControl]=\"searchTermControl\"\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\n    />\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n        <ng-template let-role=\"item\">\n            {{ role.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n        [hiddenByDefault]=\"true\"\n        [sort]=\"sorts.get('createdAt')\"\n    >\n        <ng-template let-role=\"item\">\n            {{ role.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n        [hiddenByDefault]=\"true\"\n        [sort]=\"sorts.get('updatedAt')\"\n    >\n        <ng-template let-role=\"item\">\n            {{ role.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.description' | translate\" id=\"description\"\n        [optional]=\"false\"\n        [sort]=\"sorts.get('description')\"\n    >\n        <ng-template let-role=\"item\">\n            <a\n                *ngIf=\"!isDefaultRole(role); else defaultRole\"\n                class=\"button-ghost\"\n                [routerLink]=\"['./', role.id]\"\n                ><span>{{ role.description }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n            <ng-template #defaultRole>\n                {{ role.description }}\n            </ng-template>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\n        <ng-template let-role=\"item\">\n            <span *ngIf=\"!isDefaultRole(role)\">{{ role.code }}</span>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'settings.channel' | translate\" id=\"channel\">\n        <ng-template let-role=\"item\">\n            <ng-container *ngIf=\"!isDefaultRole(role)\">\n                <vdr-chip *ngFor=\"let channel of role.channels\">\n                    <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\n                    <div class=\"ml-1\">{{ channel.code | channelCodeToLabel | translate }}</div>\n                </vdr-chip>\n            </ng-container>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'settings.permissions' | translate\" id=\"permissions\">\n        <ng-template let-role=\"item\">\n            <ng-container *ngIf=\"!isDefaultRole(role); else defaultRole\">\n                <div class=\"permissions-list\">\n                    <vdr-chip\n                        *ngFor=\"let permission of role.permissions | slice : 0 : displayLimit[role.id] || 3\"\n                        >{{ permission }}</vdr-chip\n                    >\n                    <button\n                        class=\"button-small\"\n                        *ngIf=\"role.permissions.length > initialLimit\"\n                        (click)=\"toggleDisplayLimit(role)\"\n                    >\n                        <ng-container\n                            *ngIf=\"(displayLimit[role.id] || 0) < role.permissions.length; else collapse\"\n                        >\n                            <clr-icon shape=\"plus\"></clr-icon>\n                            {{ role.permissions.length - initialLimit }}\n                        </ng-container>\n                        <ng-template #collapse>\n                            <clr-icon shape=\"minus\"></clr-icon>\n                        </ng-template>\n                    </button>\n                </div>\n            </ng-container>\n            <ng-template #defaultRole>\n                <span class=\"default-role-label\">{{ 'settings.default-role-label' | translate }}</span>\n            </ng-template>\n        </ng-template>\n    </vdr-dt2-column>\n</vdr-data-table-2>\n", styles: [".default-role-label{color:var(--color-grey-400)}.permissions-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\n"], dependencies: [{ kind: "directive", type: i1.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i4.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i4.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i4.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i4.ChipComponent, selector: "vdr-chip", inputs: ["icon", "invert", "colorFrom", "colorType"], outputs: ["iconClick"] }, { kind: "directive", type: i4.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i4.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i4.ChannelBadgeComponent, selector: "vdr-channel-badge", inputs: ["channelCode"] }, { kind: "component", type: i4.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i4.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i4.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i4.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i4.PageBlockComponent, selector: "vdr-page-block" }, { kind: "pipe", type: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SlicePipe, name: "slice" }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }, { kind: "pipe", type: i4.ChannelLabelPipe, name: "channelCodeToLabel" }, { kind: "pipe", type: i4.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: RoleListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-role-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left> </vdr-ab-left>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"role-list\"></vdr-action-bar-items>\n            <a\n                class=\"btn btn-primary\"\n                *vdrIfPermissions=\"['CreateAdministrator']\"\n                [routerLink]=\"['./', 'create']\"\n            >\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'settings.create-new-role' | translate }}\n            </a>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-data-table-2\n    id=\"role-list\"\n    [items]=\"items$ | async\"\n    [itemsPerPage]=\"itemsPerPage$ | async\"\n    [totalItems]=\"totalItems$ | async\"\n    [currentPage]=\"currentPage$ | async\"\n    [filters]=\"filters\"\n    (pageChange)=\"setPageNumber($event)\"\n    (itemsPerPageChange)=\"setItemsPerPage($event)\"\n>\n    <vdr-bulk-action-menu\n        locationId=\"role-list\"\n        [hostComponent]=\"this\"\n        [selectionManager]=\"selectionManager\"\n    />\n    <vdr-dt2-search\n        [searchTermControl]=\"searchTermControl\"\n        [searchTermPlaceholder]=\"'catalog.filter-by-name' | translate\"\n    />\n    <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n        <ng-template let-role=\"item\">\n            {{ role.id }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.created-at' | translate\" id=\"created-at\"\n        [hiddenByDefault]=\"true\"\n        [sort]=\"sorts.get('createdAt')\"\n    >\n        <ng-template let-role=\"item\">\n            {{ role.createdAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.updated-at' | translate\" id=\"updated-at\"\n        [hiddenByDefault]=\"true\"\n        [sort]=\"sorts.get('updatedAt')\"\n    >\n        <ng-template let-role=\"item\">\n            {{ role.updatedAt | localeDate : 'short' }}\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column\n        [heading]=\"'common.description' | translate\" id=\"description\"\n        [optional]=\"false\"\n        [sort]=\"sorts.get('description')\"\n    >\n        <ng-template let-role=\"item\">\n            <a\n                *ngIf=\"!isDefaultRole(role); else defaultRole\"\n                class=\"button-ghost\"\n                [routerLink]=\"['./', role.id]\"\n                ><span>{{ role.description }}</span>\n                <clr-icon shape=\"arrow right\"></clr-icon>\n            </a>\n            <ng-template #defaultRole>\n                {{ role.description }}\n            </ng-template>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'common.code' | translate\" id=\"code\" [sort]=\"sorts.get('code')\">\n        <ng-template let-role=\"item\">\n            <span *ngIf=\"!isDefaultRole(role)\">{{ role.code }}</span>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'settings.channel' | translate\" id=\"channel\">\n        <ng-template let-role=\"item\">\n            <ng-container *ngIf=\"!isDefaultRole(role)\">\n                <vdr-chip *ngFor=\"let channel of role.channels\">\n                    <vdr-channel-badge [channelCode]=\"channel.code\"></vdr-channel-badge>\n                    <div class=\"ml-1\">{{ channel.code | channelCodeToLabel | translate }}</div>\n                </vdr-chip>\n            </ng-container>\n        </ng-template>\n    </vdr-dt2-column>\n    <vdr-dt2-column [heading]=\"'settings.permissions' | translate\" id=\"permissions\">\n        <ng-template let-role=\"item\">\n            <ng-container *ngIf=\"!isDefaultRole(role); else defaultRole\">\n                <div class=\"permissions-list\">\n                    <vdr-chip\n                        *ngFor=\"let permission of role.permissions | slice : 0 : displayLimit[role.id] || 3\"\n                        >{{ permission }}</vdr-chip\n                    >\n                    <button\n                        class=\"button-small\"\n                        *ngIf=\"role.permissions.length > initialLimit\"\n                        (click)=\"toggleDisplayLimit(role)\"\n                    >\n                        <ng-container\n                            *ngIf=\"(displayLimit[role.id] || 0) < role.permissions.length; else collapse\"\n                        >\n                            <clr-icon shape=\"plus\"></clr-icon>\n                            {{ role.permissions.length - initialLimit }}\n                        </ng-container>\n                        <ng-template #collapse>\n                            <clr-icon shape=\"minus\"></clr-icon>\n                        </ng-template>\n                    </button>\n                </div>\n            </ng-container>\n            <ng-template #defaultRole>\n                <span class=\"default-role-label\">{{ 'settings.default-role-label' | translate }}</span>\n            </ng-template>\n        </ng-template>\n    </vdr-dt2-column>\n</vdr-data-table-2>\n", styles: [".default-role-label{color:var(--color-grey-400)}.permissions-list{max-width:500px;display:flex;flex-wrap:wrap;align-items:center;gap:4px}\n"] }]
        }], ctorParameters: function () { return []; } });
//# sourceMappingURL=data:application/json;base64, 