import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../core/http.service";
import * as i2 from "@angular/forms";
import * as i3 from "ngx-infinite-scroll";
import * as i4 from "@angular/material/sort";
import * as i5 from "@angular/material/table";
import * as i6 from "@angular/flex-layout/flex";
import * as i7 from "../timeline-filter/timeline-filter.component";
import * as i8 from "@angular/common";
let LoginHistoryForUserComponent = class LoginHistoryForUserComponent {
    constructor(http, fb) {
        this.http = http;
        this.fb = fb;
        this.loginHistoryList = [];
        this.pageEvent = { page: 1, perPage: 25, lastPage: 1 };
        this.filters = {
            sort_by: 'created_at|desc',
        };
        this.displayedColumns = ['index', 'created_at'];
        this.historyFilterForm = this.fb.group({
            'duration': [''],
            'date_from': [''],
            'date_to': ['']
        });
    }
    ngOnInit() {
        this.filters.user_id = this.userId;
        this.historyFilterForm.valueChanges
            .pipe(debounceTime(500), distinctUntilChanged(), untilDestroyed(this))
            .subscribe((value) => {
            value.date_from = value.date_from ? value.date_from.toISOString() : '';
            value.date_to = value.date_to ? value.date_to.toISOString() : '';
            this.filterChange(value);
        });
        this.initializeData();
    }
    onTimelineChange(range) {
        let date_from = range?.date_from ? new Date(range.date_from) : '';
        let date_to = range?.date_to ? new Date(range.date_to) : '';
        this.historyFilterForm.patchValue({
            date_from,
            date_to
        });
    }
    initializeData() {
        this.http.get(`api/user-login-history`, { params: { ...this.filters, ...this.pageEvent } })
            .pipe(untilDestroyed(this))
            .subscribe((result) => {
            this.loginHistoryList = this.loginHistoryList.concat(result.data);
            this.pageEvent.page = result.current_page;
            this.pageEvent.lastPage = result.last_page;
        });
    }
    filterChange(event) {
        this.filters = {
            ...this.filters,
            ...event
        };
        this.reload();
    }
    onScroll() {
        if (this.pageEvent.lastPage > this.pageEvent.page) {
            this.pageEvent.page += 1;
            this.initializeData();
        }
    }
    reload() {
        this.loginHistoryList = [];
        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: LoginHistoryForUserComponent, deps: [{ token: i1.HttpService }, { token: i2.UntypedFormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: LoginHistoryForUserComponent, selector: "app-login-history-for-user", inputs: { userId: "userId" }, ngImport: i0, template: "<div class=\"mat-typography m-4\">\n    <form [formGroup]=\"historyFilterForm\" fxLayoutAlign=\" start center\">\n        <app-timeline-filter formControlName=\"duration\" (selectionChange)=\"onTimelineChange($event)\"></app-timeline-filter>\n    </form>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"loginHistoryList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"login-history-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let loginHistory; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Login</th>\n                    <td mat-cell *matCellDef=\"let loginHistory;\">\n                        {{loginHistory?.created_at | date:'medium' }}\n                    </td>\n                </ng-container>\n\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>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"], dependencies: [{ kind: "directive", type: i3.InfiniteScrollDirective, selector: "[infiniteScroll], [infinite-scroll], [data-infinite-scroll]", inputs: ["infiniteScrollDistance", "infiniteScrollUpDistance", "infiniteScrollThrottle", "infiniteScrollDisabled", "infiniteScrollContainer", "scrollWindow", "immediateCheck", "horizontal", "alwaysCallback", "fromRoot"], outputs: ["scrolled", "scrolledUp"] }, { kind: "directive", type: i4.MatSort, selector: "[matSort]", inputs: ["matSortActive", "matSortStart", "matSortDirection", "matSortDisableClear", "matSortDisabled"], outputs: ["matSortChange"], exportAs: ["matSort"] }, { kind: "component", type: i4.MatSortHeader, selector: "[mat-sort-header]", inputs: ["mat-sort-header", "arrowPosition", "start", "disabled", "sortActionDescription", "disableClear"], exportAs: ["matSortHeader"] }, { kind: "component", type: i5.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: i5.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: i5.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "directive", type: i5.MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: i5.MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: i5.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "directive", type: i5.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: i5.MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "component", type: i5.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "component", type: i5.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "directive", type: i6.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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i7.TimelineFilterComponent, selector: "app-timeline-filter", inputs: ["defaultValue", "required", "disabled", "value", "timelines", "dateFrom", "dateTo", "appearance", "showClearButton", "form", "labelText"], outputs: ["selectionChange"] }, { kind: "pipe", type: i8.DatePipe, name: "date" }] }); }
};
LoginHistoryForUserComponent = __decorate([
    UntilDestroy()
], LoginHistoryForUserComponent);
export { LoginHistoryForUserComponent };
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: LoginHistoryForUserComponent, decorators: [{
            type: Component,
            args: [{ selector: 'app-login-history-for-user', template: "<div class=\"mat-typography m-4\">\n    <form [formGroup]=\"historyFilterForm\" fxLayoutAlign=\" start center\">\n        <app-timeline-filter formControlName=\"duration\" (selectionChange)=\"onTimelineChange($event)\"></app-timeline-filter>\n    </form>\n\n    <section>\n        <div class=\"scroll-container\" infiniteScroll [infiniteScrollDistance]=\"2\" [infiniteScrollThrottle]=\"50\"\n            (scrolled)=\"onScroll()\" [scrollWindow]=\"false\">\n            <table mat-table [dataSource]=\"loginHistoryList\" matSort class=\"w-100 mt-1\" multiTemplateDataRows\n                id=\"login-history-table\">\n\n                <!-- Index Column -->\n                <ng-container matColumnDef=\"index\">\n                    <th mat-header-cell *matHeaderCellDef> # </th>\n                    <td mat-cell *matCellDef=\"let loginHistory; let i = dataIndex\"> {{ i+1 }} </td>\n                </ng-container>\n\n                <ng-container matColumnDef=\"created_at\">\n                    <th mat-header-cell *matHeaderCellDef mat-sort-header> Last Login</th>\n                    <td mat-cell *matCellDef=\"let loginHistory;\">\n                        {{loginHistory?.created_at | date:'medium' }}\n                    </td>\n                </ng-container>\n\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>\n", styles: [".scroll-container{max-height:800px;overflow-y:auto}\n"] }]
        }], ctorParameters: () => [{ type: i1.HttpService }, { type: i2.UntypedFormBuilder }], propDecorators: { userId: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 