@churchillliving/se-ui-toolkit 6.53.509 → 6.53.511

package/src/lib/components/base/file/file.component.html

@@ -0,0 +1,101 @@
+<div class="p-d-flex cards-wrapper">
+  <div
+    class="example-box"
+    [class]="width && width.length > 0 ? 'p-col-' + width : 'p-col-12'"
+  >
+    <p-card class="custom-card">
+      <div class="image-wrapper">
+        <!-- Start image file type cases -->
+        <div [ngSwitch]="type">
+          <img
+            alt="ImageCard"
+            [src]="url"
+            [name]="name"
+            [id]="id"
+            *ngSwitchCase="'.image'"
+            [ngStyle]="{ height: height }"
+          />
+
+          <img
+            alt="ImageCard"
+            src="../../../../assets/images/pdf-file.png"
+            [name]="name"
+            [id]="id"
+            *ngSwitchCase="'.pdf'"
+            [ngStyle]="{ height: height }"
+          />
+          <img
+            alt="ImageCard"
+            src="../../../../assets/images/xls.png"
+            [name]="name"
+            [id]="id"
+            *ngSwitchCase="'.excel'"
+            [ngStyle]="{ height: height }"
+          />
+          <img
+            alt="ImageCard"
+            src="../../../../assets/images/doc.png"
+            [name]="name"
+            [id]="id"
+            *ngSwitchCase="'.document'"
+            [ngStyle]="{ height: height }"
+          />
+        </div>
+        <!-- End image file type cases -->
+
+        <!-- start caption functionality-->
+        <div class="edit-caption">
+          <h4
+            class="example-box"
+            (click)="captionClickEvent()"
+            [title]="caption"
+            *ngIf="!editableCaption"
+          >
+            {{ caption }}
+          </h4>
+          <div
+          class="p-d-flex p-flex-column p-ai-end" 
+          *ngIf="editableCaption && allowEditableCaption"
+          >
+            <input
+              type="text"
+              name="caption"
+              [(ngModel)]="caption"
+              pInputText
+              (blur)="captionSave(id, name, url, type, caption)"
+            />
+            <div class="icons">
+              <i
+                class="pi pi-check"
+                (click)="captionSave(id, name, url, type, caption)"
+              ></i>
+              <i class="pi pi-times" (click)="cancel()"></i>
+            </div>
+          </div>
+          <!-- End caption functionality-->
+
+          <!-- start header action button functionality -->
+          <div class="action-buttons">
+            <button
+              pButton
+              type="button"
+              icon="pi pi-arrow-circle-down"
+              (click)="downloadFile(url)"
+              class="p-button-rounded p-button-text"
+              *ngIf="allowDownloadFile"
+            ></button>
+            <button
+              pButton
+              type="button"
+              icon="pi pi-trash"
+              (click)="onDeleteFile(id, name, url, type, caption)"
+              class="p-button-rounded p-button-text"
+              *ngIf="allowDeleteFile"
+            ></button>
+          </div>
+          <!-- End header action button functionality -->
+        </div>
+      </div>
+    </p-card>
+  </div>
+</div>

package/src/lib/components/base/file/file.component.scss

@@ -0,0 +1,98 @@
+/* FOR FUNCTIONALITY USE ONLY! */
+:host ::ng-deep {
+  .custom-card {
+    .action-buttons {
+      // display: flex;
+      // justify-content: flex-end;
+      // background-color: #eee;
+      // position: absolute;
+      // top: 0;
+      // left: 0;
+      // width: 100%;
+      visibility: hidden;
+    }
+    // .p-card-body {
+    //   padding: 0;
+    // }
+    // .p-card-content {
+    //   padding: 0;
+    // }
+    // .p-button.p-button-icon-only {
+    //   padding: 5px;
+    //   height: unset;
+    // }
+    .image-wrapper:hover .action-buttons {
+      visibility: visible;
+    }
+  }
+}
+
+// .cards-wrapper {
+//   width: 100%;
+//   overflow: auto;
+// }
+// .custom-card {
+//   width: 100%;
+//   height: 400px;
+//   .image-wrapper {
+//     position: relative;
+//     img {
+//       width: 100%;
+//       height: 300px;
+//     }
+//   }
+//   h4 {
+//     cursor: pointer;
+//     margin: auto;
+//     text-align: center;
+//     width: 90%;
+//     height: 27px;
+//     padding-bottom: 6px;
+//     overflow: hidden;
+//     white-space: nowrap;
+//     text-overflow: ellipsis;
+//   }
+//   .edit-caption {
+//     input {
+//       height: 27px;
+//       width: 100%;
+//     }
+//     .icons {
+//       position: absolute;
+//       right: 0;
+//       bottom: 2px;
+//       background-color: #fff;
+//       height: 24px;
+//       i {
+//         cursor: pointer;
+//         margin: 5px;
+//       }
+//     }
+//   }
+//}
+
+// .cdk-drag-preview {
+//   box-sizing: border-box;
+//   border-radius: 4px;
+//   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+//     0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+// }
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+// .example-box {
+//   padding: 0 0 1px 0;
+// }
+
+// .example-box:last-child {
+//   border: none;
+// }
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

package/src/lib/components/base/file/file.component.ts

@@ -0,0 +1,114 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ConfirmationService } from 'primeng/api';
+import { ESelectFileType } from '../../../models/form.model';
+
+@Component({
+  selector: 'se-file',
+  templateUrl: './file.component.html',
+  styleUrls: ['./file.component.scss'],
+})
+export class fileComponent implements OnInit {
+  @Input() url: string = '';
+  @Input() caption: string = '';
+  @Input() width: string = '';
+  @Input() height: string = '200px';
+  @Output() onDeleteEvent: EventEmitter<any> = new EventEmitter();
+  @Output() onSaveEvent: EventEmitter<any> = new EventEmitter();
+  @Input() id: number;
+  @Input() name: string = '';
+  @Input() type: any;
+  @Input() allowDownloadFile: boolean = true;
+  @Input() allowEditableCaption: boolean = true;
+  @Input() allowDeleteFile: boolean = true;
+  editableCaption: boolean = false;
+
+  constructor(private confirmationService: ConfirmationService) {}
+
+  ngOnInit(): void {
+    this.checkFileExtension();
+  }
+
+  checkFileExtension() {
+    switch (this.type) {
+      case 'png':
+      case 'jpeg':
+      case 'jfif':
+      case 'jpg': {
+        this.type = '.image';
+        break;
+      }
+      case 'xlsx':
+      case 'xls':
+      case 'xlsm':
+      case 'txt': {
+        this.type = ESelectFileType.EXCEL;
+        break;
+      }
+      case 'pdf':
+      case 'html': {
+        this.type = ESelectFileType.PDF;
+        break;
+      }
+      case 'doc':
+      case 'docx': {
+        this.type = ESelectFileType.DOCUMENT;
+        break;
+      }
+    }
+  }
+
+  downloadFile(url: string) {
+    const link: any = document.createElement('a');
+    link.href = url;
+    link.target = '_blank';
+    link.click();
+  }
+
+  captionClickEvent() {
+    if (this.allowEditableCaption) {
+      this.editableCaption = true;
+    }
+  }
+
+  captionSave(
+    id: number,
+    name: string,
+    url: string,
+    type: any,
+    caption: string
+  ) {
+    let obj = {
+      id: id,
+      name: name,
+      blobfileurl: url,
+      type: type,
+      caption: caption,
+    };
+    if(caption !== null){
+      this.caption = caption;
+      this.editableCaption = false;
+      this.onSaveEvent.emit(obj);
+    }
+  }
+
+  onDeleteFile(
+    id: number,
+    name: string,
+    url: string,
+    type: any,
+    caption: string
+  ) {
+    let obj = {
+      id: id,
+      name: name,
+      blobfileurl: url,
+      type: type,
+      caption: caption,
+    };
+    this.onDeleteEvent.emit(obj);
+  }
+
+  cancel() {
+    this.editableCaption = false;
+  }
+}

package/src/lib/components/base/file-upload/file-upload.component.html

@@ -0,0 +1,11 @@
+<!-- file Upload Component-->
+<input
+  pInputText
+  #fileInput
+  type="file"
+  id="file"
+  [accept]="acceptFileTypes"
+  [multiple]="allowMultiple"
+  (change)="uploadFile(fileInput.files)"
+  (click)="onClickEvent()"
+/>

package/src/lib/components/base/file-upload/file-upload.component.scss

@@ -0,0 +1 @@
+/* FOR FUNCTIONALITY USE ONLY! */

package/src/lib/components/base/file-upload/file-upload.component.ts

@@ -0,0 +1,66 @@
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { ESelectFileType, IFormField } from '../../../models/form.model';
+import { AlertService } from '../../../services/alert.service';
+import { RequestService } from '../../../services/request.service';
+@Component({
+  selector: 'se-file-upload',
+  templateUrl: './file-upload.component.html',
+  styleUrls: ['./file-upload.component.scss'],
+})
+export class FileUploadComponent implements OnInit {
+  @Input() acceptFileTypes: any;
+  @Input() allowMultiple: boolean = false;
+  @Input() fields: any;
+  @Output() fileUrl: EventEmitter<any> = new EventEmitter();
+  @Output() uploadFileOnReturn: EventEmitter<any> = new EventEmitter();
+
+  constructor(
+    private requestService: RequestService,
+    private alertService: AlertService
+  ) {}
+
+  ngOnInit(): void {}
+
+  uploadFile(files: any) {
+    let fileData =  new FormData(); 
+    let chooseFile:boolean = false;
+    for (let i = 0; i < files.length; i++) {
+      if (files[i]) {
+        chooseFile = true;
+        fileData.append(files[i].name, files[i]);
+      }
+    }
+
+    if (fileData && chooseFile) {
+      if (this.fields && this.fields.uniqueKey?.length > 0) {
+        fileData.append('uniqueKey', this.fields?.uniqueKey);
+      }else if(this.fields && this.fields.pathSystemConfig?.length > 0){
+        fileData.append('azureContainer', this.fields.pathSystemConfig);
+      }
+      this.requestService.get<any[], any>('/Upload', fileData).subscribe(
+        (data: any) => {
+          if (data) {
+            this.alertService.success('File Upload Successfully.');
+            if (this.fields?.onReturn) {
+              this.fields.onReturn(data.results);
+              this.uploadFileOnReturn.emit();
+            }
+            this.fileUrl.emit(data.results);
+          }
+        },
+        ({ error }) => {
+          this.alertService.apiError(error);
+          if (this.fields.onReturn) {
+            this.fields.onReturn(error);
+            this.uploadFileOnReturn.emit();
+          }
+        }
+      );
+    }
+  }
+  onClickEvent() {
+    if (this.fields && this.fields.onClick) {
+      this.fields.onClick();
+    }
+  }  
+}

package/src/lib/components/base/filter/filter.component.html

@@ -0,0 +1,9 @@
+<button *ngIf="showDialogFilter" class="align-btn p-mb-2" pButton type="button" icon="pi pi-search-plus" (click)="openFilters()"></button>
+
+<se-global-filters
+*ngIf="globalFilters && !showDialogFilter"
+[globalFilters]="globalFilters"
+(filtersApplied)="globalFiltersApplied($event)"
+[searchGlobalFilterBtn]="searchGlobalFilterBtn"
+[clearGlobalFilterBtn]="clearGlobalFilterBtn"
+></se-global-filters>

package/src/lib/components/base/filter/filter.component.ts

@@ -0,0 +1,46 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { DialogService } from 'primeng/dynamicdialog';
+import { SeGlobalFilterComponent } from '../../shared/global-filters/global-filters.component';
+import { IGlobalFilter } from '../../../models/grid.model';
+
+@Component({
+  selector: 'se-filter',
+  templateUrl: './filter.component.html',
+})
+export class SeFilterComponent implements OnInit {
+  @Input() globalFilters: IGlobalFilter[];
+  @Input() showDialogFilter: boolean = false;
+  @Input() clearGlobalFilterBtn: boolean = false;
+  @Input() searchGlobalFilterBtn: boolean = false;
+  @Output() filtersApplied: EventEmitter<any> = new EventEmitter();
+
+  constructor(public dialogService: DialogService) { }
+
+  /**
+   * Assignment of selected columns on page load
+   */
+  ngOnInit(): void { }
+
+  /**
+   * Opens the filter dialog
+   */
+  openFilters() {
+    const ref = this.dialogService.open(SeGlobalFilterComponent, {
+      header: 'Choose Filters',
+      width: '70%',
+      styleClass: 'global-filter-visible',
+      data: { globalFilters: this.globalFilters, openDialog: true},
+    });
+
+    // Modal response
+    ref.onClose.subscribe((res) => {
+      if (res) {
+        this.filtersApplied.emit(res);
+      }
+    });
+  }
+
+  globalFiltersApplied(event: any){
+    this.filtersApplied.emit(event);
+  }
+}