ngx-techlify-core 11.4.8 → 11.5.2

package/src/lib/entity-files/entity-file-form/entity-file-form.component.html

@@ -0,0 +1,45 @@
+<form [formGroup]="entityFileGroup" (ngSubmit)="submit()">
+  <div fxLayout="column" class="mat-typography">
+    <div mat-dialog-title class="text-center">
+      <div>Entity File</div>
+    </div>
+    <div mat-dialog-content fxLayout="column" fxLayoutAlign.="start">
+      <ng-container *ngIf="!hideTitleAndDetails">
+        <mat-form-field>
+          <input type="text" matInput formControlName="title" placeholder="Title" autocomplete="off">
+        </mat-form-field>
+        <mat-form-field>
+          <textarea matInput formControlName="details" placeholder="Details" autocomplete="off"></textarea>
+        </mat-form-field>
+      </ng-container>
+      <ng-container *ngIf="useTechlifyTags">
+        <mat-form-field>
+          <mat-label>Tag</mat-label>
+          <app-techlify-tagger-tag-form-field modelType="entity-file" formControlName="tag_ids"
+            [modelId]="entityFileGroup.get('id').value" placeholder="Enter new tag"></app-techlify-tagger-tag-form-field>
+        </mat-form-field>
+      </ng-container>
+      <ng-template #fileUpload>
+        <section fxFlex="100%">
+          <div>Entity File*</div>
+          <app-file-dropper [config]="fileConfig" (fileChanged)="fileChanged($event)" [fileArray]="fileList">
+          </app-file-dropper>
+          <div class="text-danger" *ngIf="isFieldValid('url')">
+            {{getErrorMessage("url")}}
+          </div>
+        </section>
+      </ng-template>
+      <div fxFlex="100%" class="mt-2" *ngIf="entityFileGroup.get('url').value;else fileUpload;">
+        <app-document-viewer [file]="entityFileGroup.get('file').value" [fileUrl]="entityFileGroup.get('url').value"
+          [config]="this.viewerConfig" (remove)="removeFile()" [disableEdit]="updateMode">
+        </app-document-viewer>
+      </div>
+      <div class="mt-4 mb-2" fxLayout="row" fxLayoutGap="30px" fxLayoutAlign="end" fxFlex="100%">
+        <button mat-raised-button type="button" (click)="dialogRef.close()">
+          Cancel
+        </button>
+        <button mat-raised-button type="submit" color="primary">Save</button>
+      </div>
+    </div>
+  </div>
+</form>

package/src/lib/entity-files/entity-file-form/entity-file-form.component.ts

@@ -0,0 +1,172 @@
+import { Component, OnInit, Inject } from "@angular/core";
+import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { FormGroup, FormBuilder, Validators } from "@angular/forms";
+import { EntityFileService } from '../entity-file.service';
+import { FileDropperConfig } from '../../file-dropper/file-dropper.model';
+import { ViewerConfig } from '../../document-viewer/viewer-config.model';
+import { FormValidatorService } from '../../core/form-validator.service';
+import { AlertService } from "../../core/alert.service";
+
+const errorMessages: any = {
+  url: {
+    required: "File is required"
+  },
+};
+
+@Component({
+  selector: 'entity-file-form',
+  templateUrl: './entity-file-form.component.html',
+  styleUrls: ['./entity-file-form.component.css']
+})
+export class EntityFileFormComponent implements OnInit {
+
+  entityFileGroup: FormGroup;
+  assignmentFileFirstAttempt: boolean;
+  updateMode: boolean;
+  fileConfig: FileDropperConfig;
+  fileList: any[] = [];
+  viewerConfig: ViewerConfig;
+  hideTitleAndDetails: boolean;
+
+  /**
+   * Should we allow tagging entity-files?
+   */
+  useTechlifyTags: boolean = false;
+
+  constructor(
+    public dialogRef: MatDialogRef<EntityFileFormComponent>,
+    @Inject(MAT_DIALOG_DATA) public data: any,
+    private formValidatorService: FormValidatorService,
+    private fb: FormBuilder,
+    private entityFileService: EntityFileService,
+    private alertService: AlertService
+  ) {
+    this.createForm();
+  }
+
+  /** Method to create a form **/
+  private createForm() {
+    //TODO: Finialize and add more validations.
+    this.entityFileGroup = this.fb.group({
+      id: [''],
+      title: [''],
+      details: [''],
+      entity_type: [''],
+      entity_id: [],
+      file: ['', Validators.required],
+      url: ['', Validators.required],
+      file_size: ['', Validators.required],
+      tag_ids: [[]]
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.data.entity) {
+      this.entityFileGroup.get('entity_type').setValue(this.data.entity.entity_type);
+      this.entityFileGroup.get('entity_id').setValue(this.data.entity.entity_id);
+    }
+    if (this.data.file) {
+      this.updateMode = true;
+      this.entityFileGroup.patchValue(this.data.file);
+    }
+
+    if (this.data?.hideTitleAndDetails) {
+      this.hideTitleAndDetails = this.data?.hideTitleAndDetails;
+    }
+
+    if (this.data?.useTechlifyTags) {
+      this.useTechlifyTags = this.data?.useTechlifyTags;
+    }
+
+    //File dropper config
+    this.fileConfig = {
+      fileId: "subjectFile",
+      containerId: "subjectFileContainer",
+      styles: {
+        height: "200px"
+      },
+      multiple: false,
+      acceptFile: "*",
+      maxSize: 10,
+      acceptFileText: "All Files"
+    };
+
+    this.viewerConfig = {
+      viewerStyle: {
+        height: '200px',
+        width: '100%'
+      }
+    }
+  }
+
+
+  //Method to trigger submit
+  async submit() {
+    this.assignmentFileFirstAttempt = true;
+    if (!this.entityFileGroup.valid) {
+      return;
+    }
+    const model = this.entityFileGroup.value;
+
+    if (this.hideTitleAndDetails) {
+      model.title = model.file;
+    }
+    model.tag_ids = model.tag_ids.toString();
+
+    const result: any = this.updateMode
+      ? await this.entityFileService.updateEntityFile(model)
+      : await this.entityFileService.createEntityFile(model);
+    this.dialogRef.close(result.item);
+    this.alertService.addAlert(
+      "File submitted successfully",
+      "success"
+    );
+
+  }
+
+  async fileChanged(event: any) {
+    this.fileList = event;
+
+    if (this.fileList.length > 0) {
+
+      const result: any = await this.entityFileService.uploadEntityFile(
+        this.fileList[0],
+      );
+      this.entityFileGroup.patchValue(result.item);;
+      this.fileList = [];
+    }
+  }
+
+
+  async removeFile() {
+    if (this.entityFileGroup.value.file) {
+      try {
+        this.entityFileGroup.patchValue({
+          file: "",
+          url: ""
+        });
+      } catch (error) {
+        this.alertService.addAlert("Unable to remove file, try later", "warn");
+      }
+    }
+  }
+
+  /**Method to evaluate form fields*/
+  isFieldValid(field: string) {
+    return this.formValidatorService.isFieldValid(
+      field,
+      this.entityFileGroup,
+      this.assignmentFileFirstAttempt
+    );
+  }
+
+  /**Method to find error in form fields*/
+  getErrorMessage(field: string) {
+    return this.formValidatorService.getErrorMessage(
+      field,
+      this.entityFileGroup,
+      errorMessages
+    );
+  }
+
+}

package/src/lib/entity-files/entity-file.service.ts

@@ -0,0 +1,46 @@
+import { Injectable } from '@angular/core';
+import { HttpService } from '../core/http.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class EntityFileService {
+
+  constructor(private http: HttpService) { }
+
+  getEntityFiles(filters: any) {
+    return this.http.get(`api/entity-files`, { params: filters }).toPromise();
+  }
+
+  createEntityFile(model: any) {
+    return this.http.post("api/entity-files", model).toPromise();
+  }
+
+  updateEntityFile(model: any) {
+    return this.http.put(`api/entity-files/${model.id}`, model).toPromise();
+  }
+
+  deleteEntityFile(model: any) {
+    return this.http.delete(`api/entity-files/${model.id}`).toPromise();
+  }
+
+  uploadEntityFile(file: File, params?: any) {
+    const formData: FormData = new FormData();
+    formData.append("fileData", file, file.name);
+    if (params?.entity_id) {
+      formData.append('entity_id', params.entity_id);
+      formData.append('entity_type', params.entity_type);
+    }
+    return this.http
+      .skipHeader()
+      .post(
+        "api/entity-files-upload",
+        formData,
+      ).toPromise();
+  }
+
+  bulkUpdate(model) {
+    return this.http.post(`api/entity-files/bulk-update`, model).toPromise();
+  }
+
+}

package/src/lib/entity-files/entity-files-view-all.component.html

@@ -0,0 +1,236 @@
+<mat-drawer-container>
+  <mat-drawer style="z-index: 1;" fxLayout="column" [fxHide]="!this.documentIds.length" fxHide.xs fxHide.sm fxHide.lt-md
+    mode="side" position="end" opened>
+    <mat-card class="update_card" *ngIf="this.documentIds.length">
+      <mat-card-header>
+        <mat-card-title>
+          <div mat-dialog-title class="mt-2 ml-2 text-center">
+            <div>Update Selected Rows</div>
+          </div>
+        </mat-card-title>
+      </mat-card-header>
+      <mat-card-content fxLayout="column">
+        <form [formGroup]="updateRowForm">
+          <div fxLayout="column">
+
+            <mat-form-field fxFlex="100%" class="px-1">
+              <input matInput formControlName="title" placeholder="Title" autocomplete="off" />
+              <button mat-button *ngIf="updateRowForm.get('title').value || updateRowForm.get('title').value===0"
+                matSuffix mat-icon-button style="color:red" (click)="resetFieldValueOfRow('title', $event)">
+                <mat-icon>close</mat-icon>
+              </button>
+              <button mat-button matSuffix mat-icon-button type="button" style="color:green" *ngIf="(updateRowForm.get('title').value || updateRowForm.get('title').value===0)
+                && updateRowForm.get('title').valid" (click)="bulkUpdate('title')">
+                <mat-icon>done</mat-icon>
+              </button>
+            </mat-form-field>
+
+            <mat-form-field fxFlex="100%" class="px-1">
+              <textarea matInput formControlName="details" placeholder="Details" autocomplete="off"></textarea>
+              <button mat-button *ngIf="updateRowForm.get('details').value || updateRowForm.get('details').value===0"
+                matSuffix mat-icon-button style="color:red" (click)="resetFieldValueOfRow('details', $event)">
+                <mat-icon>close</mat-icon>
+              </button>
+              <button mat-button matSuffix mat-icon-button type="button" style="color:green" *ngIf="(updateRowForm.get('details').value || updateRowForm.get('details').value===0)
+                && updateRowForm.get('details').valid" (click)="bulkUpdate('details')">
+                <mat-icon>done</mat-icon>
+              </button>
+            </mat-form-field>
+
+            <ng-container *ngIf="useTechlifyTags">
+              <mat-form-field>
+                <mat-label>Tag</mat-label>
+                <app-techlify-tagger-tag-form-field modelType="entity-file" formControlName="tag_ids"
+                  placeholder="Enter new tag">
+                </app-techlify-tagger-tag-form-field>
+                <button mat-button *ngIf="updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0"
+                  matSuffix mat-icon-button style="color:red" (click)="resetFieldValueOfRow('tag_ids', $event)">
+                  <mat-icon>close</mat-icon>
+                </button>
+                <button mat-button matSuffix mat-icon-button type="button" style="color:green" *ngIf="(updateRowForm.get('tag_ids').value || updateRowForm.get('tag_ids').value===0)
+                  && updateRowForm.get('tag_ids').valid" (click)="bulkUpdate('tag_ids')">
+                  <mat-icon>done</mat-icon>
+                </button>
+              </mat-form-field>
+            </ng-container>
+          </div>
+        </form>
+      </mat-card-content>
+    </mat-card>
+
+  </mat-drawer>
+
+  <mat-drawer-content>
+    <div class="mat-typography" *ngIf="!displayMode">
+      <div fxLayout="row" fxLayoutGap="1rem">
+        <mat-card [fxFlex]="this.documentIds.length ? '100%' : '70%'">
+          <mat-card-title>
+            <div fxLayout fxLayoutGap="1rem">
+              <h3 class="font-weight-bold primary-color" fxLayout="center center">
+                <mat-icon>
+                  <span class="material-icons">
+                    description
+                  </span>
+                </mat-icon>
+                {{title}}s
+              </h3>
+              <div>
+                <button type="button" class="mx-1" mat-raised-button color="primary" (click)="addEntityFile()"
+                  *ngIf="!viewOnly">
+                  <mat-icon>
+                    <span class="material-icons">
+                      add_circle_outline
+                    </span>
+                  </mat-icon>
+                  {{title}}
+                </button>
+              </div>
+            </div>
+          </mat-card-title>
+          <mat-card-subtitle>
+            <form [formGroup]="filterFormGroup" style="font-size: 10px;" fxLayout fxLayoutGap="1rem">
+              <mat-form-field *ngIf="!removeSearch" appearance="outline">
+                <mat-label>Search</mat-label>
+                <input type="text" matInput formControlName="title" placeholder="Search" name="title"
+                  autocomplete="off" />
+                <button mat-button *ngIf="filters.title" matSuffix mat-icon-button
+                  (click)="resetFieldValue($event, 'title')">
+                  <mat-icon>close</mat-icon>
+                </button>
+              </mat-form-field>
+              <mat-form-field appearance="outline" *ngIf="useTechlifyTags && !isWorking">
+                <mat-label>Tag</mat-label>
+                <app-searchable-selector formControlName="tag_ids" apiUrl="api/techlify-tagger-tags" [multiple]="true"
+                  placeHolder="Tag">
+                </app-searchable-selector>
+                <button mat-icon-button matSuffix *ngIf="filterFormGroup.get('tag_ids').value.length"
+                  (click)="resetFieldValue($event, 'tag_ids')">
+                  <mat-icon>close</mat-icon>
+                </button>
+              </mat-form-field>
+              <button mat-icon-button (click)="reload()" *ngIf="isReload" type="button" matTooltip="Refresh">
+                <mat-icon>
+                  <span class="material-icons">
+                    refresh
+                  </span>
+                </mat-icon>
+              </button>
+            </form>
+          </mat-card-subtitle>
+          <mat-card-content class="entity-file-card">
+            <table mat-table [dataSource]="dataSource" class="w-100" matSort multiTemplateDataRows infiniteScroll
+              [infiniteScrollDistance]="1.5" [infiniteScrollThrottle]="50" (scrolled)="onScroll()">
+
+              <!-- Select Column -->
+              <ng-container matColumnDef="select">
+                <th mat-header-cell *matHeaderCellDef style="width:30px">
+                  <mat-checkbox name="employee" [(ngModel)]="isAllSelected" (change)="selectAll()">
+                  </mat-checkbox>
+                </th>
+                <td mat-cell *matCellDef="let element" style="width:30px">
+                  <mat-checkbox name="employee[{{element?.id}}]" (click)="$event.stopPropagation()"
+                    [(ngModel)]="element.is_selected" (change)="employeeListModified($event, element)"
+                    [disabled]="!entityFiles.length">
+                  </mat-checkbox>
+                </td>
+              </ng-container>
+
+              <!-- 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>
+
+              <!-- Title Column -->
+              <ng-container matColumnDef="title">
+                <th mat-header-cell *matHeaderCellDef> Title </th>
+                <td mat-cell *matCellDef="let element">
+                  <div>
+                    <span>
+                      {{element.title}}
+                    </span>
+                    <span>
+                      <a href="{{element.url}}" target="_blank" class="text-decoration-none text-muted">
+                        <button mat-icon-button type="button">
+                          <mat-icon>download</mat-icon>
+                        </button>
+                      </a>
+                    </span>
+                  </div>
+                </td>
+              </ng-container>
+
+              <!-- Details Column -->
+              <ng-container matColumnDef="details">
+                <th mat-header-cell *matHeaderCellDef> Details </th>
+                <td mat-cell *matCellDef="let element">
+                  <app-read-more [text]="element.details" [maxLength]="50"></app-read-more>
+                </td>
+              </ng-container>
+
+              <!-- File size Column -->
+              <ng-container matColumnDef="file_size">
+                <th mat-header-cell *matHeaderCellDef> File Size </th>
+                <td mat-cell *matCellDef="let element"> {{ sizeOf(element.file_size)}} </td>
+              </ng-container>
+
+              <!-- Tags Column -->
+              <ng-container matColumnDef="tag">
+                <th mat-header-cell *matHeaderCellDef> Tag </th>
+                <td mat-cell *matCellDef="let element" class="p-1">
+                  <mat-chip-list aria-label="Tags">
+                    <mat-chip *ngFor="let taggerModel of element.tags">
+                      {{taggerModel?.tag?.title}}
+                    </mat-chip>
+                  </mat-chip-list>
+                </td>
+              </ng-container>
+
+              <!-- Uploaded On Column -->
+              <ng-container matColumnDef="uploaded_on">
+                <th mat-header-cell *matHeaderCellDef> Uploaded On </th>
+                <td mat-cell *matCellDef="let element">
+                  <div>
+                    {{element.created_at | date: 'mediumDate'}}
+                  </div>
+                  <div class="text-muted">
+                    By {{element.creator?.name}}
+                  </div>
+                </td>
+              </ng-container>
+
+              <!-- Actions Column -->
+              <ng-container matColumnDef="actions">
+                <th mat-header-cell *matHeaderCellDef> Actions </th>
+                <td mat-cell *matCellDef="let element" style="min-width:110px" class="text-muted">
+                  <button type="button" mat-icon-button (click)="editEntityFile(element)">
+                    <mat-icon>edit</mat-icon>
+                  </button>
+                  <button type="button" mat-icon-button (click)="deleteEntityFile(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>
+          </mat-card-content>
+        </mat-card>
+        <section fxFlex="30%" *ngIf="!this.documentIds.length">
+          <app-file-dropper [config]="fileConfig" (fileChanged)="fileChanged($event)" [fileArray]="fileList">
+          </app-file-dropper>
+        </section>
+      </div>
+    </div>
+  </mat-drawer-content>
+
+  <div fxLayout="row wrap" fxLayoutGap="1rem" class="mat-typography p-4" *ngIf="displayMode">
+    <div *ngFor="let efile of entityFiles">
+      <app-document-viewer [file]="efile.file" [fileUrl]="efile.url" [config]="this.viewerConfig" [disableEdit]="true">
+      </app-document-viewer>
+      <a href="{{efile.url}}" target="_blank">
+        <button mat-button type="button">View</button>
+      </a>
+    </div>
+  </div>