ngx-techlify-core 11.4.8 → 11.5.2

package/src/lib/login-history-for-user/login-history-for-user.component.ts

@@ -0,0 +1,94 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { PageEvent } from '../data-table/data-table.model';
+import { HttpService } from '../core/http.service';
+import { TimelineValue } from '../timeline-filter';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-login-history-for-user',
+  templateUrl: './login-history-for-user.component.html',
+  styleUrls: ['./login-history-for-user.component.scss']
+})
+export class LoginHistoryForUserComponent implements OnInit {
+
+  loginHistoryList: any[] = [];
+  pageEvent: PageEvent = { page: 1, perPage: 25, lastPage: 1 };
+  filters: any = {
+    sort_by: 'created_at|desc',
+  };
+  historyFilterForm: FormGroup;
+  displayedColumns: any[] = ['index', 'created_at'];
+  @Input() userId: any;
+
+  constructor(
+    private http: HttpService,
+    private fb: FormBuilder,
+  ) {
+    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: any) => {
+        value.date_from = value.date_from ? (value.date_from as Date).toISOString() : '';
+        value.date_to = value.date_to ? (value.date_to as Date).toISOString() : '';
+        this.filterChange(value);
+      });
+    this.initializeData();
+  }
+
+  onTimelineChange(range: TimelineValue) {
+    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: any) => {
+        this.loginHistoryList = this.loginHistoryList.concat(result.data);
+        this.pageEvent.page = result.current_page;
+        this.pageEvent.lastPage = result.last_page;
+      });
+  }
+
+  filterChange(event: any) {
+    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
+  }
+
+}

package/src/lib/login-history-for-user/login-history-for-user.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoginHistoryForUserRoutingModule } from './login-history-for-user-routing.module';
+import { LoginHistoryForUserComponent } from './login-history-for-user.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MaterialModule } from '../material.module';
+import { TimelineFilterModule } from '../timeline-filter/timeline-filter.module';
+
+
+@NgModule({
+  declarations: [LoginHistoryForUserComponent],
+  imports: [
+    CommonModule,
+    LoginHistoryForUserRoutingModule,
+    InfiniteScrollModule,
+    MaterialModule,
+    FlexLayoutModule,
+    ReactiveFormsModule,
+    TimelineFilterModule
+  ],
+  exports: [LoginHistoryForUserComponent]
+})
+export class LoginHistoryForUserModule { }

package/src/lib/material.module.ts

@@ -0,0 +1,68 @@
+import { MatTooltipModule } from '@angular/material/tooltip';
+/*
+ * This module imports and re-exports all Angular Material modules for convenience,
+ * so only 1 module import is needed in your feature modules.
+ * See https://material.angular.io/guide/getting-started#step-3-import-the-component-modules.
+ *
+ * To optimize your production builds, you should only import the components used in your app.
+ */
+
+import { NgModule } from "@angular/core";
+import {
+  MatCommonModule,
+  MatLineModule,
+  MatNativeDateModule,
+  MatOptionModule,
+  MatPseudoCheckboxModule,
+  MatRippleModule
+} from "@angular/material/core";
+import { MatButtonModule } from "@angular/material/button";
+import { MatCheckboxModule } from "@angular/material/checkbox";
+import { MatDialogModule } from "@angular/material/dialog";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import { MatIconModule } from "@angular/material/icon";
+import { MatInputModule } from "@angular/material/input";
+import { MatMenuModule } from "@angular/material/menu";
+import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
+import { MatSelectModule } from "@angular/material/select";
+import { MatSortModule } from "@angular/material/sort";
+import { MatTableModule } from "@angular/material/table";
+import { MatCardModule } from "@angular/material/card";
+import { MatDividerModule } from "@angular/material/divider";
+import { MatChipsModule } from "@angular/material/chips";
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import { MatListModule } from '@angular/material/list'
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatSidenavModule } from '@angular/material/sidenav';
+
+
+@NgModule({
+  exports: [
+    MatButtonModule,
+    MatCheckboxModule,
+    MatCommonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatLineModule,
+    MatMenuModule,
+    MatNativeDateModule,
+    MatOptionModule,
+    MatProgressSpinnerModule,
+    MatPseudoCheckboxModule,
+    MatRippleModule,
+    MatSelectModule,
+    MatSortModule,
+    MatTableModule,
+    MatCardModule,
+    MatDividerModule,
+    MatChipsModule,
+    MatDatepickerModule,
+    MatListModule,
+    MatTooltipModule,
+    MatButtonToggleModule,
+    MatSidenavModule
+  ]
+})
+export class MaterialModule { }

package/src/lib/note/comment-form/comment-form.component.html

@@ -0,0 +1,45 @@
+<form (ngSubmit)="submit()" [formGroup]="commentFormGroup">
+  <div fxLayout="column" class="my-2" [ngClass]="{ 'border border-primary shadow rounded ': view}">
+    <div *ngIf="!view" fxLayout="column">
+      <mat-form-field appearance="outline" style="background-color:white;">
+        <mat-label>Comment</mat-label>
+        <textarea matInput rows="5" placeholder="Add a comment..." formControlName="note" autocomplete="off"></textarea>
+      </mat-form-field>
+
+      <div fxLayout fxLayoutGap="1rem" class="mt-2">
+        <span fxFlex></span>
+        <button *ngIf="_commentData" mat-button type="button" (click)="view = !view">
+          Cancel
+        </button>
+        <button mat-raised-button color="primary" type="submit">
+          {{ _commentData ? "Update" : "Post comment" }}
+        </button>
+      </div>
+    </div>
+
+    <div fxLayout="column" *ngIf="view" class="p-2 m-2">
+      <div fxLayout="row wrap" fxLayoutGap=".5rem">
+        <div fxFlex="20%" fxLayoutAlign="start">
+          <button mat-icon-button type="button" style="color:grey">
+            <mat-icon style="font-size:60px">account_circle</mat-icon>
+          </button>
+        </div>
+        <div fxFlex="75%">
+          <div fxLayout="column" fxLayoutGap=".5rem">
+            <div class="font-weight-bold">{{ _commentData?.creator?.name }}</div>
+            <div class="text-muted">{{ _commentData.updated_at | date:'medium' }}</div>
+          </div>
+        </div>
+      </div>
+      <app-read-more class="mt-2" [text]="_commentData.note"></app-read-more>
+      <div fxLayout class="mt-1" fxLayoutGap="1rem" *ngIf="isLoggedIn && currentUser.id === _commentData.creator_id">
+        <a href="javascript:;" (click)="editComment()">
+          Edit
+        </a>
+        <a href="javascript:;" (click)="deleteComment()">
+          Delete
+        </a>
+      </div>
+    </div>
+  </div>
+</form>

package/src/lib/note/comment-form/comment-form.component.scss

@@ -0,0 +1,7 @@
+
+:host ::ng-deep {
+    .mat-form-field-wrapper {
+        padding-bottom: 0 !important;
+        margin: 0 !important;
+    }
+}

package/src/lib/note/comment-form/comment-form.component.spec.ts

@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { CommentFormComponent } from "./comment-form.component";
+
+describe("CommentFormComponent", () => {
+  let component: CommentFormComponent;
+  let fixture: ComponentFixture<CommentFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [CommentFormComponent]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CommentFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should create", () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/note/comment-form/comment-form.component.ts

@@ -0,0 +1,84 @@
+import {
+  Component,
+  OnInit,
+  Input,
+  Output,
+  EventEmitter,
+  OnDestroy
+} from "@angular/core";
+import { FormGroup, FormBuilder } from "@angular/forms";
+import { CredentialsService } from "../../core/credentials.service";
+
+@Component({
+  selector: "app-comment-form",
+  templateUrl: "./comment-form.component.html",
+  styleUrls: ["./comment-form.component.scss"]
+})
+export class CommentFormComponent implements OnInit, OnDestroy {
+  commentFormGroup: FormGroup;
+  view: boolean;
+  _commentData: any;
+
+  @Input() set commentData(data: any) {
+    this.view = !!data;
+    this._commentData = data;
+    this.commentFormGroup.patchValue(data);
+  }
+
+  @Output() action = new EventEmitter();
+
+  constructor(private fb: FormBuilder,
+    private credentialService: CredentialsService
+  ) {
+    this.createForm();
+  }
+
+  ngOnInit() { }
+
+  get isLoggedIn() {
+    return this.credentialService.isAuthenticated;
+  }
+
+  get currentUser() {
+    return this.credentialService.credentials.user;
+  }
+
+  private createForm() {
+    //TODO: Finialize and add more validations.
+    this.commentFormGroup = this.fb.group({
+      id: [""],
+      note: [""],
+      model_type: [""],
+      related_model_id: [""],
+    });
+  }
+
+  submit() {
+    if (this.commentFormGroup.get("note").value) {
+      if (this._commentData) {
+        this.view = !this.view;
+      }
+      this.action.emit({ type: "save", value: this.commentFormGroup.value });
+      this.commentFormGroup.reset();
+    } else if (this.commentFormGroup.get("id").value) {
+      this.deleteComment();
+    }
+  }
+
+  hideEdit() {
+    if (this.commentFormGroup.get("id").value) {
+      this.view = !this.view;
+    }
+  }
+
+  editComment() {
+    this.view = !this.view;
+    this.commentFormGroup.patchValue(this._commentData);
+  }
+
+  deleteComment() {
+    this.action.emit({ type: "delete", value: this.commentFormGroup.value });
+  }
+
+  ngOnDestroy() { }
+}

package/src/lib/note/note-form/note-form.component.html

@@ -0,0 +1,26 @@
+<form [formGroup]="noteFormGroup" (ngSubmit)="submit()">
+    <div fxLayout="column" class="mat-typography">
+        <div mat-dialog-title class="text-center">
+            <div>{{data?.labelText}}</div>
+        </div>
+
+        <div mat-dialog-content fxLayout="column">
+            <div fxLayout="row wrap" fxLayoutAlign="space-between">
+                <mat-form-field fxFlex="100%">
+                    <textarea matInput formControlName="note" placeholder="{{data?.labelText}}" autocomplete="off"
+                        required></textarea>
+                    <mat-error *ngIf="isFieldValid('note')">{{
+                        getErrorMessage("note")
+                        }}</mat-error>
+                </mat-form-field>
+
+                <div class="my-2" fxLayout="row" fxLayoutGap="30px" fxLayoutAlign="end" fxFlex="100%">
+                    <button mat-raised-button type="button" (click)="cancel()">
+                        Cancel
+                    </button>
+                    <button mat-raised-button type="submit" color="primary">Save</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</form>

package/src/lib/note/note-form/note-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoteFormComponent } from './note-form.component';
+
+describe('NoteFormComponent', () => {
+  let component: NoteFormComponent;
+  let fixture: ComponentFixture<NoteFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoteFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NoteFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/lib/note/note-form/note-form.component.ts

@@ -0,0 +1,93 @@
+import { Component, OnInit, Inject } from "@angular/core";
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { NoteService } from "../note.service";
+import { FormValidatorService } from '../../core/form-validator.service';
+import { AlertService } from "../../core/alert.service";
+
+const errorMessages: any = {
+  note: {
+    required: "Note is required"
+  }
+};
+
+@Component({
+  selector: 'app-note-form',
+  templateUrl: './note-form.component.html',
+  styleUrls: ['./note-form.component.css']
+})
+export class NoteFormComponent implements OnInit {
+
+  updateMode: boolean;
+  noteFormGroup: FormGroup;
+  noteFormFirstAttempt: boolean;
+
+  constructor(
+    public dialogRef: MatDialogRef<NoteFormComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private fb: FormBuilder,
+    private formValidatorService: FormValidatorService,
+    private alertService: AlertService,
+    private noteService: NoteService
+  ) {
+    this.createForm();
+  }
+
+  /** Method to create a form **/
+  private createForm() {
+    //TODO: Finialize and add more validations.
+    this.noteFormGroup = this.fb.group({
+      id: [""],
+      note: ["", Validators.compose([Validators.required])],
+      model_type: [""],
+      related_model_id: [""],
+    });
+  }
+
+  ngOnInit() {
+    if (this.data.update) {
+      this.updateMode = true;
+    }
+    this.noteFormGroup.patchValue(this.data.note);
+  }
+
+  //Method to trigger login
+  async submit() {
+    this.noteFormFirstAttempt = true;
+    if (this.noteFormGroup.valid) {
+      const model = this.noteFormGroup.value;
+      const result = this.updateMode
+        ? await this.noteService.editNote(model)
+        : await this.noteService.addNote(model);
+
+      this.alertService.addAlert(
+        `${this.data?.labelText} saved successfully`,
+        "success"
+      );
+      this.dialogRef.close(result);
+    }
+  }
+
+  cancel() {
+    this.dialogRef.close();
+  }
+
+  /**Method to evaluate form fields*/
+  isFieldValid(field: string) {
+    return this.formValidatorService.isFieldValid(
+      field,
+      this.noteFormGroup,
+      this.noteFormFirstAttempt
+    );
+  }
+
+  /**Method to find error in form fields*/
+  getErrorMessage(field: string) {
+    return this.formValidatorService.getErrorMessage(
+      field,
+      this.noteFormGroup,
+      errorMessages
+    );
+  }
+
+}

package/src/lib/note/note-list/note-list.component.css

@@ -0,0 +1,4 @@
+.scroll-container{
+    max-height: 400px;
+    overflow-y: auto;
+}

package/src/lib/note/note-list/note-list.component.html

@@ -0,0 +1,58 @@
+<div fxLayout="column" fxLayoutGap="1.5rem" class="m-4" *ngIf="!commentsView">
+
+  <div fxLayout fxLayoutAlign="center center" fxLayoutGap="1rem">
+    <h3 class="m-0 font-weight-bold mr-3">{{labelText}}s</h3>
+    <button class="d-print-none" *ngIf="!readonly" mat-raised-button color="primary" type="button" (click)="addNote()">+
+      Add</button>
+  </div>
+
+  <div class="w-100 scroll-container" infiniteScroll [infiniteScrollDistance]="1" [infiniteScrollThrottle]="50"
+    (scrolled)="onScroll()" [scrollWindow]="false">
+    <table mat-table [dataSource]="notes" class="w-100" multiTemplateDataRows>
+
+      <!-- Index Column -->
+      <ng-container matColumnDef="index">
+        <th mat-header-cell *matHeaderCellDef> # </th>
+        <td mat-cell *matCellDef="let note; let i = dataIndex"> {{ i+1 }} </td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="note">
+        <th mat-header-cell *matHeaderCellDef> {{labelText}} </th>
+        <td mat-cell *matCellDef="let note">
+          {{note?.note}}
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell *matHeaderCellDef class="d-print-none"> Actions </th>
+        <td mat-cell *matCellDef="let note" class="d-print-none">
+          <button type="button" mat-icon-button (click)="editNote(note)">
+            <mat-icon>edit</mat-icon>
+          </button>
+          <button type="button" mat-icon-button (click)="deleteNote(note)">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+
+</div>
+
+<div fxLayout="column" fxLayoutGap="1.5rem" *ngIf="commentsView">
+  <div fxLayout fxLayoutAlign="center center" fxLayoutGap="1rem">
+    <h3 class="m-0 font-weight-bold mr-3">{{labelText}}s</h3>
+  </div>
+
+  <div fxLayout="column" fxLayoutAlign="start" fxFlex="100%">
+    <div class="w-100 scroll-container jumbotron" infiniteScroll [infiniteScrollDistance]="1"
+      [infiniteScrollThrottle]="50" (scrolled)="onScroll()" [scrollWindow]="false">
+      <app-comment-form [commentData]="comment" (action)="commentAction($event)" *ngFor="let comment of notes">
+      </app-comment-form>
+      <app-comment-form (action)="commentAction($event)"></app-comment-form>
+    </div>
+  </div>
+</div>

package/src/lib/note/note-list/note-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoteListComponent } from './note-list.component';
+
+describe('NoteListComponent', () => {
+  let component: NoteListComponent;
+  let fixture: ComponentFixture<NoteListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoteListComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NoteListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});