ngx-techlify-core 11.5.0 → 11.5.2

package/src/lib/techlify-update/techlify-update-history/techlify-update-history.component.ts

@@ -0,0 +1,142 @@
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { untilDestroyed } from '@ngneat/until-destroy';
+import { AlertService } from './../../core/alert.service';
+import { UpdateViewComponent } from './../update-view/update-view.component';
+import { TechlifyUpdateService } from './../techlify-update.service';
+import { FormControl, FormBuilder } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { Component, OnInit } from '@angular/core';
+import { debounceTime } from 'rxjs/operators';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-techlify-update-history',
+  templateUrl: './techlify-update-history.component.html',
+  styleUrls: ['./techlify-update-history.component.scss']
+})
+export class TechlifyUpdateHistoryComponent implements OnInit {
+  techlifyUpdates: any[] = [];
+  displayedColumns: string[] = [
+    'index',
+    'title',
+    'version',
+    'released_on',
+    'learn_more_link',
+    'description',
+    'creator',
+    'actions'
+  ];
+  page: number = 1;
+  lastPage: number;
+  perPage: number = 25;
+  isWorking: boolean = false;
+  filterFormGroup: FormGroup;
+
+  constructor(
+    private dialog: MatDialog,
+    private techlifyUpdateService: TechlifyUpdateService,
+    private fb: FormBuilder,
+    private alertService: AlertService
+  ) {
+    this.filterFormGroup = this.fb.group({
+      search: new FormControl(''),
+      version: new FormControl(''),
+      sort_by: new FormControl('released_on|DESC'),
+    });
+  }
+
+  ngOnInit() {
+    this.loadData();
+    this.listenChanges();
+    this.updateCurrentUserUpdates();
+  }
+
+  listenChanges() {
+    this.filterFormGroup.valueChanges.pipe(debounceTime(500), untilDestroyed(this))
+      .subscribe(changes => {
+        this.reload();
+      });
+  }
+
+  ngOnDestroy() { }
+
+  async loadData() {
+    try {
+      this.isWorking = true;
+      var filters: any = this.filterFormGroup.value;
+      filters.perPage = this.perPage;
+      filters.page = this.page;
+      let result: any = await this.techlifyUpdateService.getTechlifyUpdates(
+        filters
+      );
+      this.lastPage = result.last_page || this.page;
+      this.techlifyUpdates = this.techlifyUpdates.concat(result.data);
+    } catch (error) {
+      this.alertService.addAlert("Unable to process, try later", "warn");
+    }
+    finally {
+      this.isWorking = false;
+    }
+  }
+
+  reload() {
+    this.techlifyUpdates = [];
+    this.page = 1;
+    if (!this.isWorking) {
+      this.loadData();
+    }
+  }
+
+  onScroll() {
+    if (!this.isWorking && this.page < this.lastPage) {
+      this.page += 1;
+      this.loadData();
+    }
+  }
+
+  resetFieldValue(field: string) {
+    this.filterFormGroup.get(field).setValue("");
+  }
+
+  sortColumn(event) {
+    var direction = event.direction.toString().toUpperCase();
+    this.assignFilter(event.active, direction);
+  }
+
+  assignFilter(column, direction) {
+    switch (column) {
+      case 'title': {
+        return this.filterFormGroup.get('sort_by').setValue("title|" + direction);
+      }
+      case 'released_on': {
+        return this.filterFormGroup.get('sort_by').setValue("released_on|" + direction);
+      }
+      case 'version': {
+        return this.filterFormGroup.get('sort_by').setValue("version|" + direction);
+      }
+      default: {
+        return this.filterFormGroup.get('sort_by').setValue("created_at|DESC");
+      }
+    };
+  }
+
+  openUpdateView(techlifyUpdate: any): void {
+    const dialogRef = this.dialog.open(UpdateViewComponent, {
+      width: "800px",
+      autoFocus: false,
+      data: {
+        techlifyUpdate: techlifyUpdate,
+        isFromHistory: true,
+      } // Any data passed here will be injected into the model
+    });
+  }
+
+  async updateCurrentUserUpdates() {
+    try {
+      await this.techlifyUpdateService.updateCurrentUserUpdates();
+    } catch (error) {
+      this.alertService.addAlert("Unable to process, try later", "warn");
+    }
+  }
+}

package/src/lib/techlify-update/techlify-update-history/techlify-update-history.module.ts

@@ -0,0 +1,25 @@
+import { ReactiveFormsModule } from '@angular/forms';
+import { TechlifyUpdateHistoryRoutingModule } from './techlify-update-history-routing.module';
+import { ReadMoreModule } from '../../read-more/read-more.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TechlifyUpdateHistoryComponent } from './techlify-update-history.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { MaterialModule } from '../../material.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ActionPopupModule } from '../../action-popup/action-popup.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    InfiniteScrollModule,
+    FlexLayoutModule,
+    MaterialModule,
+    ActionPopupModule,
+    ReadMoreModule,
+    TechlifyUpdateHistoryRoutingModule
+  ],
+  declarations: [TechlifyUpdateHistoryComponent]
+})
+export class TechlifyUpdateHistoryModule { }

package/src/lib/techlify-update/techlify-update-routing.module.ts

@@ -0,0 +1,21 @@
+import { TechlifyUpdatesListComponent } from './techlify-updates-list/techlify-updates-list.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+const routes: Routes = [
+  { path: '', redirectTo: 'all', pathMatch: 'full' },
+  { path: 'all', component: TechlifyUpdatesListComponent },
+
+  //fallback
+  {
+    path: '**',
+    redirectTo: 'all',
+    pathMatch: 'full'
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class TechlifyUpdateRoutingModule { }

package/src/lib/techlify-update/techlify-update.module.ts

@@ -0,0 +1,27 @@
+import { ReadMoreModule } from '../read-more/read-more.module';
+import { TechlifyUpdateFormModule } from './techlify-update-form/techlify-update-form.module';
+import { TechlifyUpdateRoutingModule } from './techlify-update-routing.module';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TechlifyUpdatesListComponent } from './techlify-updates-list/techlify-updates-list.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MaterialModule } from '../material.module';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { ActionPopupModule } from '../action-popup/action-popup.module';
+
+@NgModule({
+  declarations: [TechlifyUpdatesListComponent],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    InfiniteScrollModule,
+    FlexLayoutModule,
+    MaterialModule,
+    ActionPopupModule,
+    TechlifyUpdateRoutingModule,
+    TechlifyUpdateFormModule,
+    ReadMoreModule,
+  ]
+})
+export class TechlifyUpdateModule { }

package/src/lib/techlify-update/techlify-update.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TechlifyUpdateService } from './techlify-update.service';
+
+describe('TechlifyUpdateService', () => {
+  let service: TechlifyUpdateService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TechlifyUpdateService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

package/src/lib/techlify-update/techlify-update.service.ts

@@ -0,0 +1,42 @@
+import { HttpService } from '../core/http.service';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TechlifyUpdateService {
+
+  constructor(private http: HttpService) { }
+
+  getTechlifyUpdates(filters: any) {
+    return this.http.get(`api/techlify-updates`, { params: filters }).toPromise();
+  }
+
+  createTechlifyUpdate(techlifyUpdate: any) {
+    return this.http.post(`api/techlify-updates`, techlifyUpdate).toPromise();
+  }
+
+  updateTechlifyUpdate(techlifyUpdate: any) {
+    return this.http.put(`api/techlify-updates/${techlifyUpdate.id}`, techlifyUpdate).toPromise();
+  }
+
+  deleteTechlifyUpdate(techlifyUpdateId: any) {
+    return this.http.delete(`api/techlify-updates/${techlifyUpdateId}`).toPromise();
+  }
+
+  getTechlifyUpdate(techlifyUpdateId: any) {
+    return this.http.get(`api/techlify-updates/${techlifyUpdateId}`).toPromise();
+  }
+
+  getNewUpdateForCurrentUser() {
+    return this.http.get(`api/current-user-techlify-updates`).toPromise();
+  }
+
+  createUpdateViewRecord(techlifyUpdateView: any) {
+    return this.http.post(`api/techlify-update-views`, techlifyUpdateView).toPromise();
+  }
+
+  updateCurrentUserUpdates() {
+    return this.http.get(`api/techlify-updates/update-view`).toPromise();
+  }
+}

package/src/lib/techlify-update/techlify-updates-list/techlify-updates-list.component.html

@@ -0,0 +1,104 @@
+<section class="p-4" fxLayout="column">
+  <h3 class="primary-color text-center">
+    App Updates
+    <button mat-raised-button (click)="modifyTechlifyUpdate()" class="primary-bg text-white">
+      <mat-icon>
+        add
+      </mat-icon>
+      Create
+    </button>
+  </h3>
+  <form [formGroup]="filterFormGroup" fxLayout="row wrap" fxLayoutGap="0.5rem" fxFlex="100%" style="font-size: 12px;">
+    <mat-form-field fxFlex="0 1 calc(100% - 0.5rem)" fxFlex.gt-md="0 1 calc(15% - 0.5rem)" appearance="outline"
+      fxFlex.gt-sm="0 1 calc(20% - 0.5rem)">
+      <input type="text" matInput formControlName="search" placeholder="Title" autocomplete="off" />
+      <button mat-button *ngIf="filterFormGroup.get('search').value" matSuffix mat-icon-button
+        (click)="resetFieldValue('search')">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+    <mat-form-field fxFlex="0 1 calc(100% - 0.5rem)" fxFlex.gt-md="0 1 calc(15% - 0.5rem)" appearance="outline"
+      fxFlex.gt-sm="0 1 calc(20% - 0.5rem)">
+      <input type="text" matInput formControlName="version" placeholder="Version" autocomplete="off" />
+      <button mat-button *ngIf="filterFormGroup.get('version').value" matSuffix mat-icon-button
+        (click)="resetFieldValue('version')">
+        <mat-icon>close</mat-icon>
+      </button>
+    </mat-form-field>
+  </form>
+
+  <table mat-table [dataSource]="techlifyUpdates" class="mat-elevation-z8 w-100" matSort multiTemplateDataRows
+    (matSortChange)="sortColumn($event)" infiniteScroll [infiniteScrollDistance]="2" [infiniteScrollThrottle]="50"
+    (scrolled)="onScroll()">
+
+    <!-- Index Column -->
+    <ng-container matColumnDef="index">
+      <th mat-header-cell *matHeaderCellDef> # </th>
+      <td mat-cell *matCellDef="let element;let i=dataIndex"> {{ i+1 }} </td>
+    </ng-container>
+
+    <!-- Course Column -->
+    <ng-container matColumnDef="title">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Title </th>
+      <td mat-cell *matCellDef="let element"> {{element?.title}} </td>
+    </ng-container>
+
+    <!-- Version Column -->
+    <ng-container matColumnDef="version">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Version </th>
+      <td mat-cell *matCellDef="let element"> {{element?.version}} </td>
+    </ng-container>
+
+    <!-- Released On Column -->
+    <ng-container matColumnDef="released_on">
+      <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear> Released On </th>
+      <td mat-cell *matCellDef="let element"> {{element?.released_on | date:'mediumDate'}} </td>
+    </ng-container>
+
+    <!-- Learn More Link Column -->
+    <ng-container matColumnDef="learn_more_link">
+      <th mat-header-cell *matHeaderCellDef> Learn more link </th>
+      <td mat-cell *matCellDef="let element">
+        <a [href]="element?.learn_more_link" target="_blank">
+          {{element?.learn_more_link}}
+        </a>
+      </td>
+    </ng-container>
+
+    <!-- Description Column -->
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <td mat-cell *matCellDef="let element">
+        <app-read-more [text]="element?.description" [maxLength]="50"></app-read-more>
+      </td>
+    </ng-container>
+
+    <!-- Creator Column -->
+    <ng-container matColumnDef="creator">
+      <th mat-header-cell *matHeaderCellDef> Creator </th>
+      <td mat-cell *matCellDef="let element">
+        {{element?.creator?.name}}
+        <div fxLayout class="small">
+          {{element?.created_at | date : 'mediumDate'}}
+        </div>
+      </td>
+    </ng-container>
+
+    <!-- Actions Column -->
+    <ng-container matColumnDef="actions">
+      <th mat-header-cell *matHeaderCellDef> Actions </th>
+      <td mat-cell *matCellDef="let element" class="secondary-color">
+        <button type="button" class="secondary-color" mat-icon-button (click)="modifyTechlifyUpdate(element)">
+          <mat-icon>edit</mat-icon>
+        </button>
+
+        <button type="button" class="secondary-color" mat-icon-button (click)="deleteTechlifyUpdate(element)">
+          <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>
+</section>

package/src/lib/techlify-update/techlify-updates-list/techlify-updates-list.component.spec.ts

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

package/src/lib/techlify-update/techlify-updates-list/techlify-updates-list.component.ts

@@ -0,0 +1,167 @@
+import { UntilDestroy } from '@ngneat/until-destroy';
+import { untilDestroyed } from '@ngneat/until-destroy';
+import { ActionPopup } from './../../action-popup/action-popup.model';
+import { ActionPopupComponent } from './../../action-popup/action-popup.component';
+import { TechlifyUpdateFormComponent } from './../techlify-update-form/techlify-update-form.component';
+import { TechlifyUpdateService } from './../techlify-update.service';
+import { FormControl, FormBuilder } from '@angular/forms';
+import { FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { AlertService } from '../../core/alert.service';
+import { Component, OnInit } from '@angular/core';
+import { debounceTime } from 'rxjs/operators';
+
+@UntilDestroy()
+@Component({
+  selector: 'app-techlify-updates-list',
+  templateUrl: './techlify-updates-list.component.html',
+  styleUrls: ['./techlify-updates-list.component.scss']
+})
+export class TechlifyUpdatesListComponent implements OnInit {
+  techlifyUpdates: any[] = [];
+  displayedColumns: string[] = [
+    'index',
+    'title',
+    'version',
+    'released_on',
+    'learn_more_link',
+    'description',
+    'creator',
+    'actions'
+  ];
+  page: number = 1;
+  lastPage: number;
+  perPage: number = 25;
+  isWorking: boolean = false;
+  filterFormGroup: FormGroup;
+
+  constructor(
+    private dialog: MatDialog,
+    private alertService: AlertService,
+    private techlifyUpdateService: TechlifyUpdateService,
+    private fb: FormBuilder,
+  ) {
+    this.filterFormGroup = this.fb.group({
+      search: new FormControl(''),
+      version: new FormControl(''),
+      sort_by: new FormControl('released_on|DESC'),
+    });
+  }
+
+  ngOnInit() {
+    this.loadData();
+    this.listenChanges();
+  }
+
+  listenChanges() {
+    this.filterFormGroup.valueChanges.pipe(debounceTime(500), untilDestroyed(this))
+      .subscribe(changes => {
+        this.reload();
+      });
+  }
+
+  ngOnDestroy() { }
+
+  async loadData() {
+    try {
+      this.isWorking = true;
+      var filters: any = this.filterFormGroup.value;
+      filters.perPage = this.perPage;
+      filters.page = this.page;
+      let result: any = await this.techlifyUpdateService.getTechlifyUpdates(
+        filters
+      );
+      this.lastPage = result.last_page || this.page;
+      this.techlifyUpdates = this.techlifyUpdates.concat(result.data);
+    } catch (error) {
+      this.alertService.addAlert("Unable to process, try later", "warn");
+    }
+    finally {
+      this.isWorking = false;
+    }
+  }
+
+  reload() {
+    this.techlifyUpdates = [];
+    this.page = 1;
+    if (!this.isWorking) {
+      this.loadData();
+    }
+  }
+
+  onScroll() {
+    if (!this.isWorking && this.page < this.lastPage) {
+      this.page += 1;
+      this.loadData();
+    }
+  }
+
+  modifyTechlifyUpdate(model?: any) {
+    const dialogRef = this.dialog.open(TechlifyUpdateFormComponent, {
+      width: "600px",
+      data: {
+        techlifyUpdateDetails: model,
+      }
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      if (result) {
+        this.reload();
+      }
+    });
+  }
+
+  async deleteTechlifyUpdate(model: any) {
+    const dialogRef = this.dialog.open(ActionPopupComponent, {
+      width: "400px",
+      data: <ActionPopup>{
+        title: "Delete Update",
+        message: `Are you sure to delete this update?`
+      },
+      autoFocus: false
+    });
+
+    dialogRef.afterClosed().subscribe(async result => {
+      if (result) {
+        //Action confirmed
+        try {
+          await this.techlifyUpdateService.deleteTechlifyUpdate(model.id);
+          this.alertService.addAlert(
+            "Successfully deleted the update",
+            "success"
+          );
+          this.reload();
+        } catch (error) {
+          this.alertService.addAlert("Unable to process, try later", "warn");
+        }
+      }
+    });
+  }
+
+  resetFieldValue(field: string) {
+    this.filterFormGroup.get(field).setValue("");
+  }
+
+  sortColumn(event) {
+    var direction = event.direction.toString().toUpperCase();
+    this.assignFilter(event.active, direction);
+  }
+
+  assignFilter(column, direction) {
+    switch (column) {
+      case 'title': {
+        return this.filterFormGroup.get('sort_by').setValue("title|" + direction);
+      }
+      case 'released_on': {
+        return this.filterFormGroup.get('sort_by').setValue("released_on|" + direction);
+      }
+      case 'version': {
+        return this.filterFormGroup.get('sort_by').setValue("version|" + direction);
+      }
+      default: {
+        return this.filterFormGroup.get('sort_by').setValue("created_at|DESC");
+      }
+    };
+  }
+
+}

package/src/lib/techlify-update/update-notifier/update-notifier-snack/update-notifier-snack.component.html

@@ -0,0 +1,39 @@
+<div fxLayout="column">
+  <div fxLayout="row wrap" fxLayoutAlign="space-between">
+    <div fxLayout="row wrap" fxLayoutGap="1rem">
+      <span fxLayoutAlign="center center">
+        <mat-icon class="large-icon primary-color">
+          <span class="material-icons-outlined">
+            grading
+          </span>
+        </mat-icon>
+      </span>
+      <div fxLayout="column">
+        <h5 class="primary-color text-truncate" matTooltip="{{techlifyUpdate?.title}}" matTooltipPosition="below">
+          App Update: {{techlifyUpdate?.title}}
+        </h5>
+        <small class="text-muted">
+          Version : {{techlifyUpdate?.version}}
+        </small>
+      </div>
+    </div>
+    <div fxLayoutAlign="end center" class="text-muted">
+      <button mat-icon-button type="button" (click)="close()">
+        <mat-icon>clear</mat-icon>
+      </button>
+    </div>
+  </div>
+  <div fxLayout="row" class="text-muted" style="margin-top: 1rem;" [innerHtml]="descriptionText">
+  </div>
+  <div fxLayout="row" fxLayoutAlign="space-between">
+    <button type="button" mat-button class="primary-color" (click)="openUpdateHistory()">
+      <mat-icon>
+        history
+      </mat-icon>
+      Update History
+    </button>
+    <button type="button" mat-raised-button class="primary-bg text-white" (click)="openUpdateView()">
+      View
+    </button>
+  </div>
+</div>

package/src/lib/techlify-update/update-notifier/update-notifier-snack/update-notifier-snack.component.scss

@@ -0,0 +1,57 @@
+.large-icon {
+  transform: scale(1.5);
+}
+
+.primary-color {
+  color: #009fdd !important;
+}
+
+.primary-bg {
+  background-color: #009fdd !important;
+}
+
+.text-muted {
+  color: lightgrey;
+}
+
+.text-white {
+  color: lightgrey;
+}
+
+.text-truncate {
+  width: 400px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+@media screen and (max-width: 1440px) {
+  .text-truncate {
+    width: 350px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .text-truncate {
+    width: 220px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin: 0;
+  }
+}
+
+  @media screen and (max-width: 1024px) {
+    .text-truncate {
+      width: 190px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin: 0;
+    }
+}