ngx-techlify-core 11.5.2 → 14.2.1

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

@@ -1,45 +0,0 @@
-<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

@@ -1,172 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,236 +0,0 @@
-<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>