{"version":3,"file":"src_app_views_pages_user-list_user-list_module_ts.js","mappings":"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","sources":["./src/app/views/pages/user-list/user-list.component.ts","./src/app/views/pages/user-list/user-list.component.html","./src/app/views/pages/user-list/user-list.module.ts","./src/app/views/pages/user-list/user-list.routing.module.ts","./src/app/views/pages/user-list/user-list.services.ts"],"sourcesContent":["import { Component, OnInit, ChangeDetectorRef, ViewChild, HostListener } from '@angular/core';\r\nimport { ColumnMode, SelectionType } from '@swimlane/ngx-datatable';\r\nimport { DatatableComponent } from '@swimlane/ngx-datatable';\r\nimport { UserListService } from './user-list.services'\r\nimport { ScreenSizeService } from '@app/shared/services/screen-size.service';\r\nimport { delay } from 'rxjs/operators';\r\nimport { SCREEN_SIZE } from '@app/shared/types/screen-size.enum';\r\n\r\n@Component({\r\n    selector: 'user-list',\r\n    templateUrl: './user-list.component.html',\r\n    providers: [\r\n        UserListService,\r\n        ScreenSizeService\r\n    ],\r\n})\r\nexport class UserListComponent implements OnInit {\r\n\r\n    temp = [];\r\n    selected = [];\r\n    users = []\r\n    columnMode: ColumnMode = ColumnMode.force;\r\n    SelectionType = SelectionType;\r\n    rowHeight: 'auto' | number = 'auto'\r\n    scrollbarH: boolean = false\r\n\r\n    @ViewChild(DatatableComponent) table: DatatableComponent;\r\n    constructor(private tableSvc: UserListService, private cdr: ChangeDetectorRef, private screenSizeSvc: ScreenSizeService) {  \r\n        this.screenSizeSvc.onResize$.pipe(delay(0)).subscribe(sizes => {\r\n            const sizeTabletAbove = sizes.includes(SCREEN_SIZE.XXL) ||  sizes.includes(SCREEN_SIZE.XL) || sizes.includes(SCREEN_SIZE.LG)\r\n            if(sizeTabletAbove){\r\n                this.rowHeight = 'auto'\r\n                this.scrollbarH = false\r\n                this.columnMode = ColumnMode.force;\r\n            } else {\r\n                this.rowHeight = 68\r\n                this.scrollbarH = true\r\n                this.columnMode = ColumnMode.force;\r\n            }\r\n            this.cdr.markForCheck()\r\n        });\r\n    }\r\n\r\n    @HostListener('window:resize', ['$event'])windowResize(event) {\r\n        this.getScreenWidth(event.target.innerWidth)\r\n    }\r\n\r\n    ngOnInit(): void {\r\n        this.fetch()\r\n    }\r\n\r\n    fetch() {\r\n        this.tableSvc.getUsers().subscribe(data => {\r\n            this.users = data\r\n            this.temp = [...data]\r\n            this.cdr.markForCheck();\r\n        });\r\n    }\r\n\r\n    updateFilter(event) {\r\n        const val = event.target.value.toLowerCase();\r\n        const temp = this.temp.filter(function (d) {\r\n            return d.name.toLowerCase().indexOf(val) !== -1 || !val;\r\n        });\r\n        this.users = temp;\r\n        this.table.offset = 0;\r\n    }\r\n\r\n    onSelect({ selected }) {\r\n        this.selected.splice(0, this.selected.length);\r\n        this.selected.push(...selected);\r\n        console.log('Select Event', this.selected);\r\n    }\r\n    \r\n    onActivate(event) {\r\n        console.log('Activate Event', event);\r\n    }\r\n\r\n    getScreenWidth(size:number) {\r\n        this.screenSizeSvc.onResize(size)\r\n    }\r\n}\r\n","<div class=\"container-fluid p-0\" style=\"width: 98%;\">\r\n    <div class=\"card\">\r\n        <div class=\"card-body\">\r\n            <div class=\"mb-3 d-flex align-items-center justify-content-between\">\r\n                <h4 class=\"mb-2 fw-bolder\">Users List</h4>\r\n                <div class=\"mb-2\">\r\n                    <input\r\n                        type=\"text\"\r\n                        class=\"form-control mb-3\"\r\n                        placeholder=\"Search user by name\"\r\n                        (keyup)=\"updateFilter($event)\"\r\n                    />\r\n                </div>\r\n            </div>\r\n            <div class=\"table-responsive\">\r\n                <ngx-datatable\r\n                    #table\r\n                    [rows]=\"users\"\r\n                    [columnMode]=\"columnMode\"\r\n                    [headerHeight]=\"50\"\r\n                    [footerHeight]=\"50\"\r\n                    [limit]=\"10\"\r\n                    [selected]=\"selected\"\r\n                    [selectionType]=\"SelectionType.checkbox\"\r\n                    (activate)=\"onActivate($event)\"\r\n                    (select)=\"onSelect($event)\"\r\n                    [rowHeight]=\"rowHeight\"\r\n                    [scrollbarH]=\"scrollbarH\"\r\n                >\r\n                    <ngx-datatable-column\r\n                        [width]=\"40\"\r\n                        [sortable]=\"false\"\r\n                        [canAutoResize]=\"false\"\r\n                        [draggable]=\"false\"\r\n                        [resizeable]=\"false\"\r\n                    >\r\n                        <ng-template\r\n                            ngx-datatable-header-template\r\n                            let-value=\"value\"\r\n                            let-allRowsSelected=\"allRowsSelected\"\r\n                            let-selectFn=\"selectFn\"\r\n                        >\r\n                            <div class=\"form-check mb-0\">\r\n                                <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"allRowsSelected\" (change)=\"selectFn(!allRowsSelected)\" />\r\n                            </div>\r\n                        </ng-template>\r\n                        <ng-template\r\n                            ngx-datatable-cell-template\r\n                            let-value=\"value\"\r\n                            let-isSelected=\"isSelected\"\r\n                            let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n                        >\r\n                            <div class=\"form-check mb-0\">\r\n                                <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n                            </div>\r\n                        </ng-template>\r\n                    </ngx-datatable-column>\r\n                    <ngx-datatable-column name=\"Name\" [width]=\"350\">\r\n                        <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n                            <div class=\"d-flex align-items-center\">\r\n                                <avatar [size]=\"38\" [src]=\"row['img']\"></avatar>\r\n                                <div class=\"ms-2\">\r\n                                    <div class=\"text-dark fw-bold\">{{row['name']}}</div>\r\n                                    <div class=\"text-muted\">{{row['email']}}</div>\r\n                                </div>\r\n                            </div>\r\n                        </ng-template>\r\n                    </ngx-datatable-column>\r\n                    <ngx-datatable-column name=\"Phone\" [width]=\"70\">\r\n                        <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n                            {{row['phone']}}\r\n                        </ng-template>\r\n                    </ngx-datatable-column>\r\n                    <ngx-datatable-column name=\"Role\" [width]=\"70\">\r\n                        <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n                            {{row['role']}}\r\n                        </ng-template>\r\n                    </ngx-datatable-column>\r\n                    <ngx-datatable-column name=\"Status\" [width]=\"70\">\r\n                        <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n                            <div class=\"d-flex align-items-center\" [ngClass]=\"row['status'] === 'active'? 'text-success': 'text-danger'\">\r\n                                <span class=\"badge-dot me-2\" [ngClass]=\"row['status'] === 'active'? 'bg-success': 'bg-danger'\"></span>\r\n                                <span class=\"text-capitalize\">{{row['status']}}</span>\r\n                            </div>\r\n                        </ng-template>\r\n                    </ngx-datatable-column>\r\n                    <ngx-datatable-column name=\"Last Online\" [width]=\"70\">\r\n                        <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n                            {{row['lastOnline'] | date: 'dd/MM/yyyy'}}\r\n                        </ng-template>\r\n                    </ngx-datatable-column>\r\n                    <ngx-datatable-column [sortable]=\"false\" cellClass=\"allow-overflow\" [width]=\"40\">\r\n                        <ng-template let-row=\"row\" let-value=\"value\" ngx-datatable-cell-template>\r\n                            <dropdown dropdownClass=\"d-block text-end ms-3\" (click)=\"action.toggle($event)\">\r\n                                <a class=\"px-2\" href=\"javascript:void(0)\">\r\n                                    <i class=\"feather icon-more-vertical\"></i>\r\n                                </a>\r\n                                <dropdown-menu #action alignment=\"right\">\r\n                                    <a dropdownItem href=\"javascript:void(0)\">\r\n                                        <div class=\"d-flex align-items-center\">\r\n                                            <i class=\"feather icon-user-plus\"></i>\r\n                                            <span class=\"ms-2\">Add to group</span>\r\n                                            <span class=\"ms-1\" *ngIf=\"selected.length > 0\">({{selected.length}})</span>\r\n                                        </div>\r\n                                    </a>\r\n                                    <a dropdownItem href=\"javascript:void(0)\">\r\n                                        <div class=\"d-flex align-items-center\">\r\n                                            <i class=\"feather icon-trash-2\"></i>\r\n                                            <span class=\"ms-2\">Delete User</span>\r\n                                            <span class=\"ms-1\" *ngIf=\"selected.length > 0\">({{selected.length}})</span>\r\n                                        </div>\r\n                                    </a>\r\n                                </dropdown-menu>\r\n                            </dropdown>\r\n                        </ng-template>\r\n                    </ngx-datatable-column>\r\n                </ngx-datatable>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</div>","import { NgModule } from '@angular/core';\r\nimport { SharedModule } from '@app/shared/shared.module';\r\nimport { routes } from './user-list.routing.module';\r\nimport { RouterModule } from '@angular/router';\r\nimport { NgxDatatableModule } from '@swimlane/ngx-datatable';\r\nimport { UserListComponent } from './user-list.component';\r\nimport { AvatarModule } from '@app/shared/components/avatar/avatar.module';\r\nimport { DropdownModule } from '@app/shared/components/dropdown/dropdown.module';\r\n\r\n@NgModule({\r\n    declarations: [UserListComponent],\r\n    imports: [ \r\n        SharedModule,\r\n        NgxDatatableModule,\r\n        AvatarModule,\r\n        DropdownModule,\r\n        RouterModule.forChild(routes)\r\n    ],\r\n    exports: [],\r\n    providers: [],\r\n})\r\nexport class UserListModule {}","import { UserListComponent } from './user-list.component';\r\n\r\nexport const routes = [{ path: '', component: UserListComponent }];","import { Injectable } from '@angular/core';\r\nimport { HttpClient } from '@angular/common/http';\r\n\r\ninterface PersonalInfo {\r\n    location: string,\r\n    title: string,\r\n    birthday: string,\r\n    phoneNumber: string,\r\n    facebook: string,\r\n    twitter: string,\r\n    instagram: string,\r\n    site: string,\r\n}\r\n\r\ninterface Users {\r\n    id: string,\r\n    name: string;\r\n    email: string;\r\n    img: string;\r\n    role: string;\r\n    lastOnline: number;\r\n    status: string,\r\n    personalInfo: PersonalInfo\r\n}\r\n \r\n@Injectable({\r\n    providedIn: 'root'\r\n})\r\nexport class UserListService {\r\n    apiUrl = `/api/users`;\r\n \r\n    constructor(private http: HttpClient) {}\r\n \r\n    public getUsers() {\r\n        return this.http.get<Array<any>>(this.apiUrl);\r\n    }\r\n}"],"names":[],"sourceRoot":"webpack:///"}