import { ChangeDetectionStrategy, Component, ViewChild } from '@angular/core';
import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
import { GetZoneListDocument, LogicalOperator, TypedBaseListComponent, } from '@vendure/admin-ui/core';
import { gql } from 'apollo-angular';
import { combineLatest, EMPTY } from 'rxjs';
import { distinctUntilChanged, map, mapTo, switchMap, tap } from 'rxjs/operators';
import { AddCountryToZoneDialogComponent } from '../add-country-to-zone-dialog/add-country-to-zone-dialog.component';
import { ZoneMemberListComponent } from '../zone-member-list/zone-member-list.component';
import * as i0 from "@angular/core";
import * as i1 from "@vendure/admin-ui/core";
import * as i2 from "@clr/angular";
import * as i3 from "@angular/common";
import * as i4 from "@angular/router";
import * as i5 from "../zone-member-list/zone-member-list.component";
import * as i6 from "@ngx-translate/core";
export const GET_ZONE_LIST = gql `
    query GetZoneList($options: ZoneListOptions) {
        zones(options: $options) {
            items {
                ...ZoneListItem
            }
            totalItems
        }
    }
    fragment ZoneListItem on Zone {
        id
        createdAt
        updatedAt
        name
    }
`;
export class ZoneListComponent extends TypedBaseListComponent {
    constructor(dataService, notificationService, modalService) {
        super();
        this.dataService = dataService;
        this.notificationService = notificationService;
        this.modalService = modalService;
        this.selectedMemberIds = [];
        this.customFields = this.serverConfigService.getCustomFieldsFor('Zone');
        this.filters = this.createFilterCollection()
            .addIdFilter()
            .addDateFilters()
            .addFilter({
            name: 'name',
            type: { kind: 'text' },
            label: _('common.name'),
            filterField: 'name',
        })
            .addCustomFieldFilters(this.customFields)
            .connectToRoute(this.route);
        this.sorts = this.createSortCollection()
            .defaultSort('createdAt', 'DESC')
            .addSort({ name: 'createdAt' })
            .addSort({ name: 'updatedAt' })
            .addSort({ name: 'name' })
            .addCustomFieldSorts(this.customFields)
            .connectToRoute(this.route);
        super.configure({
            document: GetZoneListDocument,
            getItems: data => data.zones,
            setVariables: (skip, take) => ({
                options: {
                    skip,
                    take,
                    filter: {
                        name: {
                            contains: this.searchTermControl.value,
                        },
                        ...this.filters.createFilterInput(),
                    },
                    filterOperator: this.searchTermControl.value ? LogicalOperator.OR : LogicalOperator.AND,
                    sort: this.sorts.createSortInput(),
                },
            }),
            refreshListOnChanges: [this.filters.valueChanges, this.sorts.valueChanges],
        });
    }
    ngOnInit() {
        super.ngOnInit();
        const activeZoneId$ = this.route.paramMap.pipe(map(pm => pm.get('contents')), distinctUntilChanged(), tap(() => (this.selectedMemberIds = [])));
        this.activeZone$ = combineLatest(this.items$, activeZoneId$).pipe(map(([zones, activeZoneId]) => {
            if (activeZoneId) {
                return zones.find(z => z.id === activeZoneId);
            }
        }));
        this.activeIndex$ = combineLatest(this.items$, activeZoneId$).pipe(map(([zones, activeZoneId]) => {
            if (activeZoneId) {
                return zones.findIndex(g => g.id === activeZoneId);
            }
            else {
                return -1;
            }
        }));
    }
    setLanguage(code) {
        this.dataService.client.setContentLanguage(code).subscribe();
    }
    closeMembers() {
        const params = { ...this.route.snapshot.params };
        delete params.contents;
        this.router.navigate(['./', params], { relativeTo: this.route, queryParamsHandling: 'preserve' });
    }
    addToZone(zone) {
        this.modalService
            .fromComponent(AddCountryToZoneDialogComponent, {
            locals: {
                zoneName: zone.name,
                zoneId: zone.id,
            },
            size: 'md',
        })
            .pipe(switchMap(memberIds => memberIds
            ? this.dataService.settings
                .addMembersToZone(zone.id, memberIds)
                .pipe(mapTo(memberIds))
            : EMPTY))
            .subscribe({
            next: result => {
                this.notificationService.success(_(`settings.add-countries-to-zone-success`), {
                    countryCount: result.length,
                    zoneName: zone.name,
                });
                this.refreshMemberList();
            },
            error: err => {
                this.notificationService.error(err);
            },
        });
    }
    refreshMemberList() {
        this.zoneMemberList?.refresh();
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ZoneListComponent, deps: [{ token: i1.DataService }, { token: i1.NotificationService }, { token: i1.ModalService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: ZoneListComponent, selector: "vdr-zone-list", viewQueries: [{ propertyName: "zoneMemberList", first: true, predicate: ZoneMemberListComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left>\n            <vdr-language-selector\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\n                [currentLanguageCode]=\"contentLanguage$ | async\"\n                (languageCodeChange)=\"setLanguage($event)\"\n            /></vdr-ab-left>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"zone-list\"></vdr-action-bar-items>\n            <a\n                class=\"btn btn-primary\"\n                *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\n                [routerLink]=\"['./', 'create']\"\n            >\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'settings.create-new-zone' | translate }}\n            </a>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-split-view [rightPanelOpen]=\"activeZone$ | async\" (closeClicked)=\"closeMembers()\">\n    <ng-template vdrSplitViewLeft>\n        <vdr-data-table-2\n            id=\"zone-list\"\n            [items]=\"items$ | async\"\n            [itemsPerPage]=\"itemsPerPage$ | async\"\n            [totalItems]=\"totalItems$ | async\"\n            [currentPage]=\"currentPage$ | async\"\n            [filters]=\"filters\"\n            [activeIndex]=\"activeIndex$ | async\"\n            (pageChange)=\"setPageNumber($event)\"\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\n        >\n            <vdr-bulk-action-menu\n                locationId=\"zone-list\"\n                [hostComponent]=\"this\"\n                [selectionManager]=\"selectionManager\"\n            />\n            <vdr-dt2-search\n                [searchTermControl]=\"searchTermControl\"\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\n            />\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n                <ng-template let-customerGroup=\"item\">\n                    {{ customerGroup.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-customerGroup=\"item\">\n                    {{ customerGroup.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-customerGroup=\"item\">\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column\n                [heading]=\"'common.name' | translate\" id=\"name\"\n                [optional]=\"false\"\n                [sort]=\"sorts.get('name')\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\n                        ><span>{{ customerGroup.name }}</span>\n                        <clr-icon shape=\"arrow right\"></clr-icon>\n                    </a>\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\n                <ng-template let-customerGroup=\"item\">\n                    <a\n                        class=\"button-small bg-weight-150\"\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\n                        queryParamsHandling=\"preserve\"\n                    >\n                        <span>{{ 'settings.view-zone-members' | translate }}</span>\n                        <clr-icon shape=\"file-group\"></clr-icon>\n                    </a>\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-custom-field-column\n                *ngFor=\"let customField of customFields\"\n                [customField]=\"customField\"\n                [sort]=\"sorts\"\n            />\n        </vdr-data-table-2>\n    </ng-template>\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeZone$ | async)?.name\">\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\n            <button class=\"button-ghost ml-4\" (click)=\"addToZone(activeZone)\">\n                <clr-icon shape=\"plus\"></clr-icon>\n                <span>{{\n                    'settings.add-countries-to-zone' | translate : { zoneName: activeZone.name }\n                }}</span>\n            </button>\n            <vdr-zone-member-list\n                *ngIf=\"activeZone$ | async as activeZone\"\n                locationId=\"zone-members-list\"\n                [selectedMemberIds]=\"selectedMemberIds\"\n                [activeZone]=\"activeZone\"\n                (selectionChange)=\"selectedMemberIds = $event\"\n            />\n        </ng-container>\n    </ng-template>\n</vdr-split-view>\n", styles: [".zone-wrapper{display:flex;height:calc(100% - 50px)}.zone-wrapper .zone-list{flex:1;overflow:auto;margin-top:0}.zone-wrapper .zone-list tr.active{background-color:var(--color-component-bg-200)}.zone-members{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.zone-members.expanded{width:40vw;visibility:visible;opacity:1;padding-inline-start:12px}.zone-members .close-button{margin:0;background:none;border:none;cursor:pointer}.zone-members ::ng-deep table.table{margin-top:0}.zone-members ::ng-deep table.table th{top:0}.zone-members .controls{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "directive", type: i2.ClrIconCustomTag, selector: "clr-icon" }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i1.ActionBarComponent, selector: "vdr-action-bar" }, { kind: "component", type: i1.ActionBarLeftComponent, selector: "vdr-ab-left", inputs: ["grow"] }, { kind: "component", type: i1.ActionBarRightComponent, selector: "vdr-ab-right", inputs: ["grow"] }, { kind: "component", type: i1.LanguageSelectorComponent, selector: "vdr-language-selector", inputs: ["currentLanguageCode", "availableLanguageCodes", "disabled"], outputs: ["languageCodeChange"] }, { kind: "directive", type: i1.IfPermissionsDirective, selector: "[vdrIfPermissions]", inputs: ["vdrIfPermissions", "vdrIfPermissionsElse"] }, { kind: "component", type: i1.ActionBarItemsComponent, selector: "vdr-action-bar-items", inputs: ["locationId"] }, { kind: "component", type: i1.BulkActionMenuComponent, selector: "vdr-bulk-action-menu", inputs: ["locationId", "selectionManager", "hostComponent"] }, { kind: "component", type: i1.DataTable2Component, selector: "vdr-data-table-2", inputs: ["id", "items", "itemsPerPage", "currentPage", "totalItems", "emptyStateLabel", "filters", "activeIndex"], outputs: ["pageChange", "itemsPerPageChange"] }, { kind: "component", type: i1.DataTable2ColumnComponent, selector: "vdr-dt2-column", inputs: ["id", "expand", "heading", "align", "sort", "optional", "hiddenByDefault", "orderable"], exportAs: ["row"] }, { kind: "component", type: i1.DataTable2SearchComponent, selector: "vdr-dt2-search", inputs: ["searchTermControl", "searchTermPlaceholder"] }, { kind: "component", type: i1.DataTableCustomFieldColumnComponent, selector: "vdr-dt2-custom-field-column", inputs: ["customField", "sorts"], exportAs: ["row"] }, { kind: "component", type: i1.SplitViewComponent, selector: "vdr-split-view", inputs: ["rightPanelOpen"], outputs: ["closeClicked"] }, { kind: "directive", type: i1.SplitViewLeftDirective, selector: "[vdrSplitViewLeft]" }, { kind: "directive", type: i1.SplitViewRightDirective, selector: "[vdrSplitViewRight]", inputs: ["splitViewTitle"] }, { kind: "component", type: i1.PageBlockComponent, selector: "vdr-page-block" }, { kind: "component", type: i5.ZoneMemberListComponent, selector: "vdr-zone-member-list", inputs: ["locationId", "members", "selectedMemberIds", "activeZone"], outputs: ["selectionChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1.LocaleDatePipe, name: "localeDate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: ZoneListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'vdr-zone-list', changeDetection: ChangeDetectionStrategy.OnPush, template: "<vdr-page-block>\n    <vdr-action-bar>\n        <vdr-ab-left>\n            <vdr-language-selector\n                [availableLanguageCodes]=\"availableLanguages$ | async\"\n                [currentLanguageCode]=\"contentLanguage$ | async\"\n                (languageCodeChange)=\"setLanguage($event)\"\n            /></vdr-ab-left>\n        <vdr-ab-right>\n            <vdr-action-bar-items locationId=\"zone-list\"></vdr-action-bar-items>\n            <a\n                class=\"btn btn-primary\"\n                *vdrIfPermissions=\"['CreateSettings', 'CreateZone']\"\n                [routerLink]=\"['./', 'create']\"\n            >\n                <clr-icon shape=\"plus\"></clr-icon>\n                {{ 'settings.create-new-zone' | translate }}\n            </a>\n        </vdr-ab-right>\n    </vdr-action-bar>\n</vdr-page-block>\n<vdr-split-view [rightPanelOpen]=\"activeZone$ | async\" (closeClicked)=\"closeMembers()\">\n    <ng-template vdrSplitViewLeft>\n        <vdr-data-table-2\n            id=\"zone-list\"\n            [items]=\"items$ | async\"\n            [itemsPerPage]=\"itemsPerPage$ | async\"\n            [totalItems]=\"totalItems$ | async\"\n            [currentPage]=\"currentPage$ | async\"\n            [filters]=\"filters\"\n            [activeIndex]=\"activeIndex$ | async\"\n            (pageChange)=\"setPageNumber($event)\"\n            (itemsPerPageChange)=\"setItemsPerPage($event)\"\n        >\n            <vdr-bulk-action-menu\n                locationId=\"zone-list\"\n                [hostComponent]=\"this\"\n                [selectionManager]=\"selectionManager\"\n            />\n            <vdr-dt2-search\n                [searchTermControl]=\"searchTermControl\"\n                [searchTermPlaceholder]=\"'common.search-by-name' | translate\"\n            />\n            <vdr-dt2-column [heading]=\"'common.id' | translate\" id=\"id\" [hiddenByDefault]=\"true\">\n                <ng-template let-customerGroup=\"item\">\n                    {{ customerGroup.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-customerGroup=\"item\">\n                    {{ customerGroup.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-customerGroup=\"item\">\n                    {{ customerGroup.updatedAt | localeDate : 'short' }}\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column\n                [heading]=\"'common.name' | translate\" id=\"name\"\n                [optional]=\"false\"\n                [sort]=\"sorts.get('name')\"\n            >\n                <ng-template let-customerGroup=\"item\">\n                    <a class=\"button-ghost\" [routerLink]=\"['./', customerGroup.id]\"\n                        ><span>{{ customerGroup.name }}</span>\n                        <clr-icon shape=\"arrow right\"></clr-icon>\n                    </a>\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-column [heading]=\"'common.view-contents' | translate\" id=\"view-contents\" [optional]=\"false\">\n                <ng-template let-customerGroup=\"item\">\n                    <a\n                        class=\"button-small bg-weight-150\"\n                        [routerLink]=\"['./', { contents: customerGroup.id }]\"\n                        queryParamsHandling=\"preserve\"\n                    >\n                        <span>{{ 'settings.view-zone-members' | translate }}</span>\n                        <clr-icon shape=\"file-group\"></clr-icon>\n                    </a>\n                </ng-template>\n            </vdr-dt2-column>\n            <vdr-dt2-custom-field-column\n                *ngFor=\"let customField of customFields\"\n                [customField]=\"customField\"\n                [sort]=\"sorts\"\n            />\n        </vdr-data-table-2>\n    </ng-template>\n    <ng-template vdrSplitViewRight [splitViewTitle]=\"(activeZone$ | async)?.name\">\n        <ng-container *ngIf=\"activeZone$ | async as activeZone\">\n            <button class=\"button-ghost ml-4\" (click)=\"addToZone(activeZone)\">\n                <clr-icon shape=\"plus\"></clr-icon>\n                <span>{{\n                    'settings.add-countries-to-zone' | translate : { zoneName: activeZone.name }\n                }}</span>\n            </button>\n            <vdr-zone-member-list\n                *ngIf=\"activeZone$ | async as activeZone\"\n                locationId=\"zone-members-list\"\n                [selectedMemberIds]=\"selectedMemberIds\"\n                [activeZone]=\"activeZone\"\n                (selectionChange)=\"selectedMemberIds = $event\"\n            />\n        </ng-container>\n    </ng-template>\n</vdr-split-view>\n", styles: [".zone-wrapper{display:flex;height:calc(100% - 50px)}.zone-wrapper .zone-list{flex:1;overflow:auto;margin-top:0}.zone-wrapper .zone-list tr.active{background-color:var(--color-component-bg-200)}.zone-members{height:100%;width:0;opacity:0;visibility:hidden;overflow:auto;transition:width .3s,opacity .2s .3s,visibility 0s .3s}.zone-members.expanded{width:40vw;visibility:visible;opacity:1;padding-inline-start:12px}.zone-members .close-button{margin:0;background:none;border:none;cursor:pointer}.zone-members ::ng-deep table.table{margin-top:0}.zone-members ::ng-deep table.table th{top:0}.zone-members .controls{display:flex;justify-content:space-between}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.DataService }, { type: i1.NotificationService }, { type: i1.ModalService }]; }, propDecorators: { zoneMemberList: [{
                type: ViewChild,
                args: [ZoneMemberListComponent]
            }] } });
//# sourceMappingURL=data:application/json;base64, 