Merge pull request #376 from sartim/develop

User component

src/app/_models/user.ts

@@ -24,4 +24,8 @@ export class UserDetail {
         full_name: string,
         id: string
     };
+    // tslint:disable-next-line:variable-name
+    created_at!: string;
+    // tslint:disable-next-line:variable-name
+    updated_at!: string;
 }

src/app/app.module.ts

@@ -20,6 +20,7 @@ import {CurrencyPipe, UpperCasePipe} from '@angular/common';
 import {AlertComponent} from './_directives';
 import {ScriptHelper} from './_helpers/scripts.helpers';
 import {BreadcrumbComponent} from './breadcrumb/breadcrumb.component';
+import {UserDetailComponent, UserListComponent} from './user';
 
 @NgModule({
     imports: [
@@ -36,6 +37,8 @@ import {BreadcrumbComponent} from './breadcrumb/breadcrumb.component';
         AlertComponent,
         OrderListComponent,
         OrderDetailComponent,
+        UserListComponent,
+        UserDetailComponent,
         CategoryListComponent,
         CategoryDetailComponent,
         ProductListComponent,

src/app/app.routing.ts

@@ -6,6 +6,7 @@ import { LoginComponent } from './login';
 import { RegisterComponent } from './register';
 import { AuthGuard } from './_guards';
 import { CategoryDetailComponent, CategoryListComponent } from './category';
+import { UserDetailComponent, UserListComponent } from './user';
 
 const appRoutes: Routes = [
     { path: '', component: HomeComponent, canActivate: [AuthGuard] },
@@ -15,6 +16,8 @@ const appRoutes: Routes = [
     { path: 'order/detail/:id', component: OrderDetailComponent, canActivate: [AuthGuard] },
     { path: 'category/list', component: CategoryListComponent, canActivate: [AuthGuard] },
     { path: 'category/detail/:id', component: CategoryDetailComponent, canActivate: [AuthGuard] },
+    { path: 'user/list', component: UserListComponent, canActivate: [AuthGuard] },
+    { path: 'user/detail/:id', component: UserDetailComponent, canActivate: [AuthGuard] },
     { path: 'login', component: LoginComponent },
     { path: 'register', component: RegisterComponent },
 

src/app/category/category-list.component.ts

@@ -22,7 +22,6 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 export class CategoryListComponent implements AfterViewInit, OnInit, OnDestroy {
     categories!: Category;
     users: User[] = [];
-    selectedOrder!: Category;
     loggedUser!: User;
     dtOptions: DataTables.Settings = {};
     returnUrl!: string;

src/app/order/order-list.component.ts

@@ -20,7 +20,6 @@ import {DomSanitizer, SafeHtml} from '@angular/platform-browser';
 export class OrderListComponent implements OnInit {
     orders!: Order;
     users: User[] = [];
-    selectedOrder!: Order;
     loggedUser!: User;
     loading = false;
     isPaginationHidden = true;

src/app/product/product-list.component.ts

@@ -22,7 +22,6 @@ import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 export class ProductListComponent implements AfterViewInit, OnInit, OnDestroy {
     products!: Product;
     users: User[] = [];
-    selectedOrder!: Product;
     loggedUser!: User;
     dtOptions: DataTables.Settings = {};
     returnUrl!: string;

src/app/user/index.ts

@@ -0,0 +1,2 @@
+export * from './user-list.component';
+export * from './user-detail.component';

src/app/user/user-detail.component.html

@@ -0,0 +1,50 @@
+<div class="row">
+  <div class="col s12 m12 l12">
+    <div *ngIf="user">
+      <div class="row">
+        <div class="card">
+          <div class="card-content table-card">
+            <form class="col s12">
+            <div class="row" *ngIf="user.id">
+              <label for="id" class="form-label">ID</label>
+              <div class="input-field col s12">
+                <input placeholder="{{user.id}}" disabled value="{{user.id}}" id="id" type="text" class="validate">
+              </div>
+            </div>
+            <div class="row" *ngIf="user.first_name">
+              <label for="first_name" class="form-label">Name</label>
+              <div class="input-field col s12">
+                <input placeholder="{{user.first_name}}" disabled value="{{user.first_name}}" id="first_name" type="text" class="validate">
+              </div>
+            </div>
+              <div class="row" *ngIf="user.first_name">
+              <label for="first_name" class="form-label">Name</label>
+              <div class="input-field col s12">
+                <input placeholder="{{user.last_name}}" disabled value="{{user.last_name}}" id="last_name" type="text" class="validate">
+              </div>
+            </div>
+            <div class="row" *ngIf="user.email">
+              <label for="email" class="form-label">Price</label>
+              <div class="input-field col s12">
+                <input placeholder="{{user.email}}" disabled value="{{user.email}}" id="email" type="text" class="validate">
+              </div>
+            </div>
+            <div class="row">
+              <label for="created_at" class="form-label">Created Date</label>
+              <div class="input-field col s12">
+                <input placeholder="{{user.created_at}}" disabled value="{{user.created_at}}" id="created_at" type="text" class="validate">
+              </div>
+            </div>
+            <div class="row">
+              <label for="updated_at" class="form-label">Updated Date</label>
+              <div class="input-field col s12">
+                <input placeholder="{{user.updated_at}}" disabled value="{{user.updated_at}}" id="updated_at" type="text" class="validate">
+              </div>
+            </div>
+          </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

src/app/user/user-detail.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute} from '@angular/router';
+import { Location } from '@angular/common';
+import {AlertService, AuthenticationService, UserService} from '../_services';
+import { UserDetail } from '../_models';
+
+@Component({
+    moduleId: module.id,
+    templateUrl: 'user-detail.component.html',
+    styles: [`
+        .form-label {
+            margin-left: 10px;
+        }
+    `]
+})
+export class UserDetailComponent implements OnInit {
+    user: UserDetail | undefined;
+
+    constructor(
+        private alertService: AlertService,
+        private authenticationService: AuthenticationService,
+        private userService: UserService,
+        private route: ActivatedRoute,
+        private location: Location) {
+        this.user = new UserDetail();
+    }
+
+    ngOnInit() {
+        const routeParams = this.route.snapshot.paramMap;
+        const idFromRoute = String(routeParams.get('id'));
+        this.userService.getById(idFromRoute).subscribe(
+            (user: UserDetail) => {this.user = user},
+            (error) => {
+                if (error.status === 401) {
+                    this.alertService.error(error);
+                    this.authenticationService.logout();
+                }
+            });
+    }
+
+    private getDel(id: any) {
+      this.userService.getById(id).subscribe(
+          (user: UserDetail) => {this.user = user},
+          (error) => {
+                if (error.status === 401) {
+                    this.alertService.error(error);
+                    this.authenticationService.logout();
+                }
+          });
+    }
+
+    goBack(): void {
+        this.location.back();
+    }
+}

src/app/user/user-list.component.html

@@ -0,0 +1,74 @@
+<div>
+    <div class="row">
+        <div class="col s12 m12 l12">
+            <div class="card">
+                <div class="card-content">
+                    <div class="row">
+                        <div class="col s6 m6 l6">
+                        </div>
+                        <div class="col s6 m6 l6">
+                            <div>
+                                <input type="text" class="header-search-input z-depth-2" placeholder="Search"
+                                value="" onchange="" />
+                           </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col s12 m12 l12">
+            <div class="card">
+                <div class="card-content table-card">
+                    <table class="responsive-table bordered striped highlight" *ngIf="users">
+                        <thead>
+                            <tr>
+                                <th data-field="id">#ID</th>
+                                <th data-field="name">First Name</th>
+                                <th data-field="brand">Last Name</th>
+                                <th data-field="category">Email</th>
+                                <th data-field="created_at">Created Date</th>
+                                <th data-field="updated_at">Updated Date</th>
+                                <th data-field="action">Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr *ngFor="let user of users.results">
+                                <td (click)="gotoDetail(user.id)" class="user_id">{{ user.id }}</td>
+                                <td>{{ user.first_name }}</td>
+                                <td>{{ user.last_name }}</td>
+                                <td>{{ user.email}}</td>
+                                <td>{{ user.created_at }}</td>
+                                <td>{{ user.updated_at }}</td>
+                                <td>
+                                    <div class="table-action">
+                                        <button class="btn btn-flat btn-small" [routerLink]="['/user/detail', user.id]"><i class="large material-icons">edit</i></button>
+                                        <button class="btn btn-flat btn-small" (click)="_delete(user.id)"><i class="large material-icons">delete</i></button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                    <div class="center">
+                        <img class="table-loader" *ngIf="loading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA=="/>
+                    </div>
+                    <div class="table-footer">
+<!--                        <div *ngIf="navigation" class="left-align">-->
+<!--                            Showing {{ startEntry }} to {{ endEntry }} of {{ totalEntries }} entries-->
+<!--                        </div>-->
+                        <div [class.hide]="isPaginationHidden">
+                            <div class="right-align pagination">
+                                <ul class="pagination">
+                                <li class="{{pageSelector}} waves-effect"><a *ngIf="previous" (click)="pageClick(users.previous, false)"><i class="material-icons">chevron_left</i></a></li>
+                                <li (click)="gotoPage($event, startEntry, endEntry)" [innerHtml]="pages"></li>
+                                <li class="{{pageSelector}} waves-effect"><a *ngIf="next" (click)="pageClick(users.next, true)"><i class="material-icons">chevron_right</i></a></li>
+                              </ul>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/app/user/user-list.component.ts

@@ -0,0 +1,125 @@
+import {ActivatedRoute, Router} from '@angular/router';
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, Renderer2} from '@angular/core';
+import {User} from '../_models';
+import {AlertService, AuthenticationService, UserService} from '../_services';
+import {HttpClient} from '@angular/common/http';
+import {CurrencyPipe, UpperCasePipe} from '@angular/common';
+import {ScriptHelper} from '../_helpers/scripts.helpers';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+
+
+@Component({
+    moduleId: module.id,
+    templateUrl: 'user-list.component.html',
+    styles: [`
+        .table-card {
+          overflow:auto;
+          padding: 0;
+        }
+    `]
+})
+export class UserListComponent implements AfterViewInit, OnInit, OnDestroy {
+    users: User;
+    loggedUser!: User;
+    returnUrl!: string;
+    loading = false;
+    isPaginationHidden = true;
+    previous = false;
+    next = false;
+    startEntry = 0;
+    endEntry = 0;
+    totalEntries = 0;
+    entryPoint = 1;
+    pages!: SafeHtml;
+    pageSelector!: string;
+    private f = 0;
+
+    constructor(
+        private sanitizer: DomSanitizer,
+        private elementRef: ElementRef,
+        private alertService: AlertService,
+        private authenticationService: AuthenticationService,
+        private route: ActivatedRoute,
+        private http: HttpClient,
+        private pipeInstance: UpperCasePipe,
+        private pipeCurrencyInstance: CurrencyPipe,
+        private userService: UserService,
+        private helpers: ScriptHelper,
+        private renderer: Renderer2,
+        private router: Router) {
+            this.users = new User();
+    }
+
+    ngOnInit() {
+        this.helpers.initScript();
+        this.startEntry = this.entryPoint;
+        this.endEntry = 20;
+        this.entryPoint = this.entryPoint + 20;
+        this.loadAll(1, this.startEntry, this.endEntry);
+        // tslint:disable-next-line:no-string-literal
+        this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/login';
+    }
+
+    ngAfterViewInit(): void {
+        //
+    }
+
+    gotoDetail(id: number) {
+      this.router.navigate(['/user/detail', id]);
+    }
+
+    pageClick(url: string, isNext: boolean): void {
+        this.isPaginationHidden = true;
+        const page = Number(this.helpers.getParameterByName('page', url));
+        const entry = this.helpers.handlePageEntry(isNext)
+        if (page != null) {
+            if(page !== 0) {
+                this.loadAll(page, entry.startEntry, entry.endEntry);
+            }
+        }
+    }
+
+    private loadAll(page: number, startEntry: number, endEntry: number) {
+        this.loading = true;
+        this.previous = false;
+        this.isPaginationHidden = true;
+        this.users = new User();
+        const loadAll = this.userService.getAll(page);
+        loadAll.subscribe((users: User) => {
+                this.users = users;
+                this.loading = false;
+                this.isPaginationHidden = false;
+                const recordCount = this.users.count;
+                const previousPageUrl = this.users.previous;
+                const nextPageUrl = this.users.next;
+                const pageData = this.helpers.handlePageClick(page, recordCount, previousPageUrl, nextPageUrl, startEntry, endEntry)
+                this.previous = pageData.previous;
+                this.next = pageData.next;
+                this.pageSelector = ''; // disabled
+                this.pages = this.sanitizer.bypassSecurityTrustHtml(pageData.innerHTML);
+            },
+            (error) => {
+                this.loading = false;
+                if (error.status === 401) {
+                    this.alertService.error(error);
+                    this.authenticationService.logout();
+                }
+            });
+    }
+
+    gotoPage(event: Event, startEntry: number, endEntry: number): void {
+        const clickedElement = event.target as HTMLElement;
+        if (clickedElement.classList.contains('current_page')) {
+          const pageNumber = +clickedElement.innerText;
+          this.loadAll(pageNumber, startEntry, endEntry)
+        }
+    }
+
+    _delete(id: string) {
+        alert('You are not authorized to perform action');
+    }
+
+    ngOnDestroy(): void {
+        //
+    }
+}