import { __decorate } from "tslib";
import { Component, ViewChild } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { MatSort } from '@angular/material/sort';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { EmailSubscriptionUserFormComponent } from '../email-subscription-user-form/email-subscription-user-form.component';
import { Logger } from '../../../core/logger.service';
import { ActionPopupComponent } from '../../../action-popup/action-popup.component';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
import * as i2 from "../../../core/http.service";
import * as i3 from "@angular/router";
import * as i4 from "@angular/common";
import * as i5 from "ngx-infinite-scroll";
import * as i6 from "@angular/material/button";
import * as i7 from "@angular/material/form-field";
import * as i8 from "@angular/material/icon";
import * as i9 from "@angular/material/core";
import * as i10 from "@angular/material/select";
import * as i11 from "@angular/material/sort";
import * as i12 from "@angular/material/table";
import * as i13 from "@angular/flex-layout/flex";
import * as i14 from "@angular/forms";
import * as i15 from "../email-subscription-user-list-filter/email-subscription-user-list-filter.component";
const log = new Logger('EmailSubscriptionUser list');
let EmailSubscriptionUserListComponent = class EmailSubscriptionUserListComponent {
    constructor(dialog, http, router) {
        this.dialog = dialog;
        this.http = http;
        this.router = router;
        this.esUserList = [];
        this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
        this.filters = {
            sort_by: 'created_at|desc',
        };
        this.displayColumns = new UntypedFormControl(['index', 'user.name', 'email_type.title', 'creator.name', 'created_at', 'actions']);
        this.displayedColumns = [];
        this.availableDisplayColumns = [
            { order: 1, value: 'index', name: 'Index' },
            { order: 2, value: 'user.name', name: 'User' },
            { order: 3, value: 'email_type.title', name: 'Email Type' },
            { order: 4, value: 'creator.name', name: 'Creator' },
            { order: 5, value: 'actions', name: 'Actions' }
        ];
    }
    ngOnInit() {
        this.displayedColumns = this.displayColumns.value;
        this.initializeData();
        if (this.sort) {
            this.sort.sortChange.pipe(untilDestroyed(this))
                .subscribe((value) => {
                this.changeSort(value);
            });
        }
    }
    get selectedColumns() {
        return this.availableDisplayColumns
            .filter(col => this.displayColumns.value.some((x) => x === col.value))
            .sort((a, b) => (a.order > b.order) ? 1 : ((b.order > a.order) ? -1 : 0))
            .map(col => col.value);
    }
    columnsChange() {
        this.displayedColumns = this.selectedColumns;
    }
    initializeData() {
        this.http.get(`api/email-subscription-users`, { params: { ...this.filters, ...this.pageEvent } })
            .pipe(untilDestroyed(this))
            .subscribe((result) => {
            this.esUserList = this.esUserList.concat(result.data);
            this.pageEvent.page = result.current_page;
            this.pageEvent.lastPage = result.last_page;
        });
    }
    filterChange(event) {
        this.filters = {
            ...this.filters,
            ...event
        };
        this.reload();
    }
    addEmailSubscriptionUser() {
        const dialogRef = this.dialog.open(EmailSubscriptionUserFormComponent, {
            width: '800px',
            autoFocus: false,
            data: {} // Any data passed here will be injected into the model
        });
        dialogRef.afterClosed().subscribe((result) => {
            if (result) {
                log.debug(result);
                this.reload();
            }
        });
    }
    editEmailSubscriptionUser(event, esUser) {
        event.stopPropagation();
        const dialogRef = this.dialog.open(EmailSubscriptionUserFormComponent, {
            width: '800px',
            autoFocus: false,
            data: {
                esUser: esUser
            } // Any data passed here will be injected into the model
        });
        dialogRef.afterClosed().subscribe((result) => {
            if (result) {
                log.debug(result);
                this.reload();
            }
        });
    }
    deleteEmailSubscriptionUser(event, esUser) {
        event.stopPropagation();
        const dialogRef = this.dialog.open(ActionPopupComponent, {
            width: '400px',
            data: {
                title: 'Delete Subscription',
                message: `Are you sure to proceed delete the esUser ${esUser.name}?`
            },
            autoFocus: false
        });
        dialogRef.afterClosed().subscribe(result => {
            if (result) {
                //Action confirmed
                this.http.delete(`api/email-subscription-users/${esUser?.id}`)
                    .pipe(untilDestroyed(this))
                    .subscribe((result) => {
                    this.esUserList = this.esUserList.filter(x => x.id !== esUser.id);
                });
            }
        });
    }
    onScroll() {
        if (this.pageEvent.lastPage > this.pageEvent.page) {
            this.pageEvent.page += 1;
            this.initializeData();
        }
    }
    changeSort(event) {
        if (event.direction) {
            this.filters.sort_by = `${event.active}|${event.direction}`;
            this.reload();
        }
    }
    reload() {
        this.esUserList = [];
        this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
        this.initializeData();
    }
    ngOnDestroy() {
        //Until destroyed uses it
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailSubscriptionUserListComponent, deps: [{ token: i1.MatDialog }, { token: i2.HttpService }, { token: i3.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EmailSubscriptionUserListComponent, selector: "app-email-subscription-user-list", viewQueries: [{ propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }], ngImport: i0, template: "<div class=\"mat-typography m-4\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <app-email-subscription-user-list-filter (valueChange)=\"filterChange($event)\">\n        </app-email-subscription-user-list-filter>\n        <div class=\"ml-2\">\n            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addEmailSubscriptionUser()\">+\n                User Subscription</button>\n        </div>\n        <span fxFlex></span>\n        <mat-form-field appearance=\"outline\" class=\"no-padding\">\n            <mat-label>Columns</mat-label>\n            <mat-select [formControl]=\"displayColumns\" multiple (selectionChange)=\"columnsChange()\">\n                <mat-option *ngFor=\"let column of availableDisplayColumns\" [value]=\"column.value\">{{column.name}}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n\n\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"esUserList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"email-subscription-user-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let esUser; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"user.name\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> User </th>\n                    <td mat-cell *matCellDef=\"let esUser;\"> {{ esUser?.user?.name }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"email_type.title\">\n                    <th mat-header-cell *matHeaderCellDef> Email Type </th>\n                    <td mat-cell *matCellDef=\"let esUser;\"> {{ esUser?.email_type?.title }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"creator.name\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Creator</th>\n                    <td mat-cell *matCellDef=\"let esUser;\">\n                        {{esUser?.creator?.name }}\n                    </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Created On</th>\n                    <td mat-cell *matCellDef=\"let esUser;\">\n                        {{esUser?.created_at | date:'medium' }}\n                    </td>\n                </ng-container>\n\n                <!-- Actions Column -->\n                <ng-container matColumnDef=\"actions\">\n                    <th mat-header-cell *matHeaderCellDef> Actions </th>\n                    <td mat-cell *matCellDef=\"let esUser\">\n                        <button type=\"button\" mat-icon-button (click)=\"deleteEmailSubscriptionUser($event,esUser)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                        <button type=\"button\" mat-icon-button (click)=\"editEmailSubscriptionUser($event,esUser)\">\n                            <mat-icon>edit</mat-icon>\n                        </button>\n                    </td>\n                </ng-container>\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns;\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n        </div>\n\n    </section>\n</div>", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "component", type: i6.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i7.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i7.MatLabel, selector: "mat-label" }, { kind: "component", type: i8.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i9.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i11.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i11.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i12.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i12.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i12.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i12.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i12.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i12.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i12.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i12.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i12.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i12.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i13.DefaultLayoutDirective, selector: "  [fxLayout], [fxLayout.xs], [fxLayout.sm], [fxLayout.md],  [fxLayout.lg], [fxLayout.xl], [fxLayout.lt-sm], [fxLayout.lt-md],  [fxLayout.lt-lg], [fxLayout.lt-xl], [fxLayout.gt-xs], [fxLayout.gt-sm],  [fxLayout.gt-md], [fxLayout.gt-lg]", inputs: ["fxLayout", "fxLayout.xs", "fxLayout.sm", "fxLayout.md", "fxLayout.lg", "fxLayout.xl", "fxLayout.lt-sm", "fxLayout.lt-md", "fxLayout.lt-lg", "fxLayout.lt-xl", "fxLayout.gt-xs", "fxLayout.gt-sm", "fxLayout.gt-md", "fxLayout.gt-lg"] }, { kind: "directive", type: i13.DefaultLayoutAlignDirective, selector: "  [fxLayoutAlign], [fxLayoutAlign.xs], [fxLayoutAlign.sm], [fxLayoutAlign.md],  [fxLayoutAlign.lg], [fxLayoutAlign.xl], [fxLayoutAlign.lt-sm], [fxLayoutAlign.lt-md],  [fxLayoutAlign.lt-lg], [fxLayoutAlign.lt-xl], [fxLayoutAlign.gt-xs], [fxLayoutAlign.gt-sm],  [fxLayoutAlign.gt-md], [fxLayoutAlign.gt-lg]", inputs: ["fxLayoutAlign", "fxLayoutAlign.xs", "fxLayoutAlign.sm", "fxLayoutAlign.md", "fxLayoutAlign.lg", "fxLayoutAlign.xl", "fxLayoutAlign.lt-sm", "fxLayoutAlign.lt-md", "fxLayoutAlign.lt-lg", "fxLayoutAlign.lt-xl", "fxLayoutAlign.gt-xs", "fxLayoutAlign.gt-sm", "fxLayoutAlign.gt-md", "fxLayoutAlign.gt-lg"] }, { kind: "directive", type: i13.DefaultFlexDirective, selector: "  [fxFlex], [fxFlex.xs], [fxFlex.sm], [fxFlex.md],  [fxFlex.lg], [fxFlex.xl], [fxFlex.lt-sm], [fxFlex.lt-md],  [fxFlex.lt-lg], [fxFlex.lt-xl], [fxFlex.gt-xs], [fxFlex.gt-sm],  [fxFlex.gt-md], [fxFlex.gt-lg]", inputs: ["fxFlex", "fxFlex.xs", "fxFlex.sm", "fxFlex.md", "fxFlex.lg", "fxFlex.xl", "fxFlex.lt-sm", "fxFlex.lt-md", "fxFlex.lt-lg", "fxFlex.lt-xl", "fxFlex.gt-xs", "fxFlex.gt-sm", "fxFlex.gt-md", "fxFlex.gt-lg"] }, { kind: "directive", type: i14.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i14.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i15.EmailSubscriptionUserListFilterComponent, selector: "app-email-subscription-user-list-filter", outputs: ["valueChange"] }, { kind: "pipe", type: i4.DatePipe, name: "date" }] }); }
};
EmailSubscriptionUserListComponent = __decorate([
    UntilDestroy()
], EmailSubscriptionUserListComponent);
export { EmailSubscriptionUserListComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EmailSubscriptionUserListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-email-subscription-user-list', template: "<div class=\"mat-typography m-4\">\n    <div fxLayout=\"row\" fxLayoutAlign=\"start center\">\n        <app-email-subscription-user-list-filter (valueChange)=\"filterChange($event)\">\n        </app-email-subscription-user-list-filter>\n        <div class=\"ml-2\">\n            <button mat-raised-button color=\"primary\" type=\"button\" (click)=\"addEmailSubscriptionUser()\">+\n                User Subscription</button>\n        </div>\n        <span fxFlex></span>\n        <mat-form-field appearance=\"outline\" class=\"no-padding\">\n            <mat-label>Columns</mat-label>\n            <mat-select [formControl]=\"displayColumns\" multiple (selectionChange)=\"columnsChange()\">\n                <mat-option *ngFor=\"let column of availableDisplayColumns\" [value]=\"column.value\">{{column.name}}\n                </mat-option>\n            </mat-select>\n        </mat-form-field>\n    </div>\n\n\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"esUserList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"email-subscription-user-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let esUser; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n                <ng-container matColumnDef=\"user.name\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> User </th>\n                    <td mat-cell *matCellDef=\"let esUser;\"> {{ esUser?.user?.name }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"email_type.title\">\n                    <th mat-header-cell *matHeaderCellDef> Email Type </th>\n                    <td mat-cell *matCellDef=\"let esUser;\"> {{ esUser?.email_type?.title }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"creator.name\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Creator</th>\n                    <td mat-cell *matCellDef=\"let esUser;\">\n                        {{esUser?.creator?.name }}\n                    </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Created On</th>\n                    <td mat-cell *matCellDef=\"let esUser;\">\n                        {{esUser?.created_at | date:'medium' }}\n                    </td>\n                </ng-container>\n\n                <!-- Actions Column -->\n                <ng-container matColumnDef=\"actions\">\n                    <th mat-header-cell *matHeaderCellDef> Actions </th>\n                    <td mat-cell *matCellDef=\"let esUser\">\n                        <button type=\"button\" mat-icon-button (click)=\"deleteEmailSubscriptionUser($event,esUser)\">\n                            <mat-icon>delete</mat-icon>\n                        </button>\n                        <button type=\"button\" mat-icon-button (click)=\"editEmailSubscriptionUser($event,esUser)\">\n                            <mat-icon>edit</mat-icon>\n                        </button>\n                    </td>\n                </ng-container>\n                <tr mat-header-row *matHeaderRowDef=\"displayedColumns;\"></tr>\n                <tr mat-row *matRowDef=\"let row; columns: displayedColumns;\"></tr>\n            </table>\n        </div>\n\n    </section>\n</div>", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatDialog }, { type: i2.HttpService }, { type: i3.Router }], propDecorators: { sort: [{
                type: ViewChild,
                args: [MatSort, { static: true }]
            }] } });
//# sourceMappingURL=data:application/json;base64, 