tango-app-ui-analyse-trax 3.9.2 → 3.9.3

package/src/lib/components/add-checklist/checklist-popup/checklist-popup.component.ts

@@ -0,0 +1,621 @@
+import { Component, Input, ViewChild, ElementRef, ChangeDetectorRef, OnChanges, SimpleChanges, OnInit } from "@angular/core";
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ToastService } from 'tango-app-ui-shared';
+import * as XLSX from 'xlsx';
+import { TraxService } from "../../../services/trax.service";
+import { takeUntil,Subject } from 'rxjs';
+import { Router } from '@angular/router';
+import { NgbActiveModal, NgbModal } from "@ng-bootstrap/ng-bootstrap";
+import dayjs from 'dayjs';
+
+@Component({
+  selector: "lib-checklist-popup",
+  templateUrl: "./checklist-popup.component.html",
+  styleUrl: "./checklist-popup.component.scss",
+})
+export class ChecklistPopupComponent implements OnInit {
+  checklistForm: FormGroup;
+  @Input() clientId: string;
+  @Input() type: string;
+  @Input() checklistData: any;
+  @ViewChild("afterValidation") afterValidation: any;
+  @ViewChild("file") fileInput!: ElementRef;
+  @ViewChild("file1") fileInput1!: ElementRef;
+
+  fileName: any;
+  fileSize: any;
+  sectionDetails: any = [
+    {
+      name: "Section 1",
+      sectionNumber: 1,
+      questions: [],
+    },
+  ];
+  private detach = new Subject();
+  excelData: any = [];
+  excelError: any;
+  dayjs = dayjs;
+
+  constructor(
+    private fb: FormBuilder,
+    private toast: ToastService,
+    private sopService: TraxService,
+    private router: Router,
+    public dialogRef: NgbActiveModal,
+    private dialog: NgbModal,
+    private cd: ChangeDetectorRef,
+  ) {
+    this.checklistForm = this.fb.group({
+      name: [""],
+      description: [""],
+      mode: ["individual"],
+    });
+  }
+
+  ngOnInit(): void {
+    if (this.type != "create") {
+      this.checklistForm.get("mode")?.setValue("bulk");
+    }
+  }
+
+  get mode() {
+    return this.checklistForm.value.mode;
+  }
+
+  selectMode(mode: string) {
+    this.checklistForm.patchValue({ mode });
+  }
+
+  onFileSelected(event: any) {
+    this.excelData = [];
+    this.excelError = null;
+    this.sectionDetails = [];
+    const file = event.target.files[0];
+    const target: DataTransfer = <DataTransfer>event.target;
+    let isExcelFile = !!target.files[0].name.match(/(.xls|.xlsx)/);
+    if (!isExcelFile) {
+      this.toast.getErrorToast("Please Upload a valid xlsx file");
+    }
+    if (isExcelFile) {
+      const reader: FileReader = new FileReader();
+      reader.readAsBinaryString(target.files[0]);
+      reader.onload = (e: any) => {
+        const bstr: string = e.target.result;
+        const wb: XLSX.WorkBook = XLSX.read(bstr, { type: "binary" });
+        const wsname: string = wb.SheetNames[0];
+        const ws: XLSX.WorkSheet = wb.Sheets[wsname];
+        let data = XLSX.utils.sheet_to_json(ws, { defval: "" });
+        if (!data.length) {
+          this.toast.getErrorToast("Please upload a valid file");
+        }
+        this.excelData = data;
+        let error: any = [];
+        let questionList: any = [];
+        this.excelData.forEach((ele: any, index: number) => {
+          if (!ele?.["Section Name"]?.toString()?.trim()) {
+            error.push(`Invalid Section Name - A${index + 2}`);
+          }
+          if (!ele?.["Question"]?.toString()?.trim()) {
+            error.push(`Invalid Question Name - B${index + 2}`);
+          }
+          if (!ele?.["Answer Type"]?.trim()) {
+            error.push(`Invalid Answer Type - C${index + 2}`);
+          }
+          if (
+            ele?.["Answer Type"]?.trim() &&
+            [
+              "Multiple Choice Single",
+              "Multiple Choice Multiple",
+              "Dropdown",
+            ].includes(ele?.["Answer Type"]) &&
+            !ele?.["Answer Options"]?.toString()?.trim()
+          ) {
+            error.push(`Invalid Answer Options - D${index + 2}`);
+          }
+
+          let qName: string =
+            ele?.["Section Name"]?.toString()?.trim().toLowerCase() +
+            ele?.["Question"]?.toString()?.trim().toLowerCase();
+          if (!questionList.includes(qName)) {
+            questionList.push(qName);
+          } else {
+            error.push(`${ele?.["Question"]?.trim()} question is Duplicated`);
+          }
+        });
+        if (error.length) {
+          const popupcontent = {
+            displayprop: false,
+            imagesrc: `<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 56 56" fill="none"><rect x="4" y="4" width="48" height="48" rx="24" fill="#FEF0C7"/><path d="M27.9998 24.0012V28.0012M27.9998 32.0012H28.0098M26.2898 18.8612L17.8198 33.0012C17.6451 33.3036 17.5527 33.6465 17.5518 33.9957C17.5508 34.3449 17.6413 34.6883 17.8142 34.9917C17.9871 35.2951 18.2365 35.5479 18.5375 35.725C18.8385 35.9021 19.1806 35.9973 19.5298 36.0012H36.4698C36.819 35.9973 37.1611 35.9021 37.4621 35.725C37.7631 35.5479 38.0124 35.2951 38.1854 34.9917C38.3583 34.6883 38.4488 34.3449 38.4478 33.9957C38.4468 33.6465 38.3544 33.3036 38.1798 33.0012L29.7098 18.8612C29.5315 18.5673 29.2805 18.3243 28.981 18.1557C28.6814 17.987 28.3435 17.8984 27.9998 17.8984C27.656 17.8984 27.3181 17.987 27.0186 18.1557C26.7191 18.3243 26.468 18.5673 26.2898 18.8612Z" stroke="#DC6803" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="4" y="4" width="48" height="48" rx="24" stroke="#FFFAEB" stroke-width="8"/></svg>`,
+            title: `Invalid details!`,
+            content: `Please provide correct and complete store information.`,
+            buttontype: "error",
+            error: error,
+          };
+          this.excelError = popupcontent;
+          return;
+        }
+        let sectionNumber = 0;
+        let answerType: any = {
+          "Descriptive Answer": "descriptive",
+          "A/B Question": "yes/no",
+          "Multiple Choice Single": "multiplechoicesingle",
+          "Multiple Choice Multiple": "multiplechoicemultiple",
+          "Capture Image with Description": "descriptiveImage",
+          "Capture Image as answer": "image",
+          "Capture video as answer": "video",
+          "Capture Multiple Image": "multipleImage",
+          Date: "date",
+          "Linear Scale": "linearscale",
+          "Capture Image/Video as Answer": "image/video",
+          Time: "time",
+          Dropdown: "dropdown",
+        };
+        let secDetails: any = data.reduce((acc: any, ele: any) => {
+          let sectionName = ele["Section Name"]?.toString()?.trim().toLowerCase();
+          if (!acc?.[sectionName]) {
+            sectionNumber++;
+            acc[`${sectionName}`] = {
+              name: ele["Section Name"]?.toString()?.trim(),
+              sectionNumber: sectionNumber,
+              questions: [
+                {
+                  qno: 1,
+                  qname: ele["Question"]?.toString()?.trim(),
+                  oldQname: ele["Question"]?.toString()?.trim(),
+                  answerType: answerType[`${ele["Answer Type"]}`],
+                  answers: this.findAnswer(
+                    answerType[`${ele["Answer Type"]}`],
+                    ele["Answer Options"],
+                  ),
+                  runAI: false,
+                  runAIDefault: false,
+                  allowUploadfromGallery: false,
+                  linkType: false,
+                  multiQuestionReferenceImage: [],
+                  questionReferenceImage: "",
+                  runAIFeatures: [],
+                  disableRunAI: false,
+                  runAIDescription: "",
+                  allowMultiple: false,
+                  compliance: false,
+                  descriptivetype: "text",
+                },
+              ],
+            };
+          } else {
+            acc[`${sectionName}`].questions.push({
+              qno: acc[`${sectionName}`].questions.length + 1,
+              qname: ele["Question"]?.toString()?.trim(),
+              oldQname: ele["Question"]?.toString()?.trim(),
+              answerType: answerType[`${ele["Answer Type"]}`],
+              answers: this.findAnswer(
+                answerType[`${ele["Answer Type"]}`],
+                ele["Answer Options"],
+              ),
+              runAI: false,
+              runAIDefault: false,
+              allowUploadfromGallery: false,
+              linkType: false,
+              multiQuestionReferenceImage: [],
+              questionReferenceImage: "",
+              runAIFeatures: [],
+              disableRunAI: false,
+              runAIDescription: "",
+              allowMultiple: false,
+              compliance: false,
+              descriptivetype: "text",
+            });
+          }
+          return acc;
+        }, {});
+        this.sectionDetails = Object.values(secDetails);
+        if (this.fileInput) {
+          this.fileInput.nativeElement.value = "";
+        }
+        if (this.fileInput1) {
+          this.fileInput1.nativeElement.value = "";
+        }
+      };
+    }
+
+    if (file) {
+      this.fileName = file.name;
+      this.fileSize = Math.round(file.size / 1024);
+    }
+  }
+
+  onDragOver(event: any) {
+    event.preventDefault();
+  }
+
+  onDrop(event: any) {
+    event.preventDefault();
+
+    const file = event.dataTransfer.files[0];
+
+    if (file) {
+      this.fileName = file.name;
+      this.fileSize = Math.round(file.size / 1024);
+    }
+  }
+
+  Reupload() {
+    if (this.fileInput) {
+      this.fileInput.nativeElement.value = "";
+    }
+    if (this.fileInput1) {
+      this.fileInput1.nativeElement.value = "";
+    }
+    let ele = document.getElementById("kt_account_team_size_select_2");
+    ele?.click();
+    this.cd.detectChanges();
+  }
+
+  createChecklist() {
+    if (!this.checklistForm.value.name) {
+      this.toast.getErrorToast("Checklist Name is missing");
+      return;
+    }
+    if (!this.excelData.length && this.mode == "bulk") {
+      this.toast.getErrorToast("Please upload a valid file");
+      return;
+    }
+    let params = {
+      checklistName: this.checklistForm.value.name?.trim(),
+      checklistDescription: this.checklistForm.value.description?.trim(),
+      sections: this.sectionDetails,
+      clientId: this.clientId,
+      submitType: "save",
+    };
+    this.sopService
+      .createChecklist(params)
+      .pipe(takeUntil(this.detach))
+      .subscribe(
+        (res: any) => {
+          if (res) {
+            if (res?.code == 200) {
+              this.toast.getSuccessToast("Checklist created successfully");
+              this.router.navigateByUrl(
+                `/manage/trax/createChecklist?checklistId=${res.data.checklistId}`,
+              );
+              this.dialogRef.dismiss();
+            } else {
+              this.toast.getErrorToast("Unable to create checklist!");
+            }
+          } else {
+            this.toast.getErrorToast("Unable to create checklist!");
+          }
+        },
+        (error: any) => {
+          let err =
+            error?.error?.error?.message ||
+            "Unable to create checklist!Server Error!";
+          this.toast.getErrorToast(err);
+        },
+      );
+  }
+
+  findAnswer(type: string, options: string) {
+    let answer: any = [];
+
+    switch (type) {
+      case "yes/no":
+        answer = [
+          {
+            answer: "Yes",
+            answeroptionNumber: 1,
+            sopFlag: false,
+            validation: false,
+            validationType: "Capture Image",
+            linkedQuestion: 0,
+            showLinked: false,
+            referenceImage: "",
+            runAI: false,
+            allowUploadfromGallery: false,
+            complianceScore: 0,
+          },
+          {
+            answer: "No",
+            answeroptionNumber: 2,
+            sopFlag: false,
+            validation: false,
+            validationType: "Capture Image",
+            linkedQuestion: 0,
+            showLinked: false,
+            referenceImage: "",
+            runAI: false,
+            allowUploadfromGallery: false,
+            complianceScore: 0,
+          },
+        ];
+        return answer;
+        break;
+      case "descriptive":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            nestedQuestion: [],
+            descriptivetype: "text",
+          },
+        ];
+        return answer;
+        break;
+      case "multiplechoicesingle":
+        answer = [];
+        options.split(",").forEach((ele: any) => {
+          if (ele.trim()) {
+            answer.push({
+              answer: ele,
+              sopFlag: false,
+              validation: false,
+              validationType: "Capture Image",
+              linkedQuestion: 0,
+              showLinked: false,
+              referenceImage: [],
+              runAI: false,
+              allowUploadfromGallery: false,
+              nestedQuestion: [],
+              complianceScore: 0,
+            });
+          }
+        });
+        return answer;
+        break;
+      case "multiplechoicemultiple":
+        answer = [];
+        options.split(",").forEach((ele: any) => {
+          if (ele?.trim()) {
+            answer.push({
+              answer: ele,
+              sopFlag: false,
+              validation: false,
+              validationType: "Capture Image",
+              linkedQuestion: 0,
+              showLinked: false,
+              referenceImage: [],
+              runAI: false,
+              allowUploadfromGallery: false,
+              nestedQuestion: [],
+              complianceScore: 0,
+            });
+          }
+        });
+        return answer;
+        break;
+      case "descriptiveImage":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            nestedQuestion: [],
+          },
+        ];
+        return answer;
+        break;
+      case "image":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            nestedQuestion: [],
+            matchedCount: 0,
+            notMatchedCount: 0,
+          },
+        ];
+        return answer;
+        break;
+      case "video":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            nestedQuestion: [],
+          },
+        ];
+        return answer;
+        break;
+      case "multipleImage":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            nestedQuestion: [],
+          },
+        ];
+        return answer;
+        break;
+      case "date":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            nestedQuestion: [],
+            historicDate: false,
+            startDate: this.dayjs().format("DD-MM-YYYY"),
+            endDate: this.dayjs().format("DD-MM-YYYY"),
+            matchedCount: 0,
+            notMatchedCount: 0,
+          },
+        ];
+        return answer;
+        break;
+      case "linearscale":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            rangeStart: 0,
+            rangeEnd: 100,
+            nestedQuestion: [],
+            linearType: "number",
+            minValue: 0,
+            maxValue: 100,
+            matchedCount: 0,
+            notMatchedCount: 0,
+          },
+        ];
+        return answer;
+        break;
+      case "time":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            nestedQuestion: [],
+          },
+        ];
+        return answer;
+        break;
+      case "image/video":
+        answer = [
+          {
+            answer: "",
+            sopFlag: false,
+            validation: false,
+            validationType: "",
+            validationAnswer: "",
+            referenceImage: [],
+            showLinked: false,
+            linkedQuestion: 0,
+            nestedQuestion: [],
+            limit: false,
+            videoLimit: 0,
+            imageLimit: 0,
+          },
+        ];
+        return answer;
+        break;
+      case "dropdown":
+        answer = [];
+        options.split(",").forEach((ele: any) => {
+          if (ele?.trim()) {
+            answer.push({
+              answer: ele,
+              sopFlag: false,
+              validation: false,
+              validationType: "Capture Image",
+              linkedQuestion: 0,
+              showLinked: false,
+              referenceImage: [],
+              runAI: false,
+              allowUploadfromGallery: false,
+              nestedQuestion: [],
+              complianceScore: 0,
+            });
+          }
+        });
+        return answer;
+        break;
+      default:
+        return [];
+    }
+  }
+
+  downloadTemplate() {
+    this.sopService
+      .downloadQuestion(this.checklistData.checklistId)
+      .pipe(takeUntil(this.detach))
+      .subscribe(
+        (res: any) => {
+          if (res) {
+            this.sopService.saveAsExcelFile(res, "Checklist Question");
+          } else {
+            this.toast.getErrorToast("Unable to download template!");
+          }
+        },
+        (error: any) => {
+          this.toast.getErrorToast("Unable to download template!");
+        },
+      );
+  }
+
+  updateChecklist() {
+    if (!this.checklistData.checkListName) {
+      this.toast.getErrorToast("Checklist Name is missing");
+      return;
+    }
+    if (!this.excelData.length) {
+      this.toast.getErrorToast("Please upload a valid file");
+      return;
+    }
+    let params = {
+      checklistName: this.checklistData.checkListName?.trim(),
+      checklistDescription: this.checklistData.checkListDescription?.trim(),
+      sections: this.sectionDetails,
+      clientId: this.checklistData.clientId,
+      submitType: "save",
+    };
+    this.sopService
+      .getUpdateChecklist(this.checklistData.checklistId, params)
+      .pipe(takeUntil(this.detach))
+      .subscribe(
+        (res: any) => {
+          if (res) {
+            if (res?.code == 200) {
+              this.dialogRef.close("reload");
+              this.toast.getSuccessToast("Checklist updated successfully");
+            } else {
+              this.toast.getErrorToast("Unable to update checklist!");
+            }
+          } else {
+            this.toast.getErrorToast("Unable to update checklist!");
+          }
+        },
+        (error) => {
+          let err =
+            error?.error?.error?.message ||
+            "Unable to update checklist!Server Error!";
+          this.toast.getErrorToast(err);
+        },
+      );
+  }
+}

package/src/lib/components/add-checklist/counter/counter.component.html

@@ -0,0 +1,43 @@
+<div class="counter-container" [class.disable-counter]="disabled">
+  <svg
+    role="button"
+    width="15"
+    height="14"
+    viewBox="0 0 15 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    (click)="decrement()"
+  >
+    <path d="M3.76294 7H11.9296" stroke="#667085" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+  </svg>
+
+  <input
+    type="text"
+    [attr.inputmode]="type === 'degree' ? 'text' : 'numeric'"
+    [attr.pattern]="type === 'degree' ? null : '[0-9]*'"
+    [value]="displayValue ?? value"
+    [placeholder]="placeholder"
+    [disabled]="disabled"
+    (input)="onInput($event)"
+    (blur)="onBlur()"
+    class="center"
+  />
+
+  <svg
+    role="button"
+    width="15"
+    height="14"
+    viewBox="0 0 15 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    (click)="increment()"
+  >
+    <path
+      d="M7.15389 2.9165V11.0832M3.07056 6.99984H11.2372"
+      stroke="#667085"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</div>

package/src/lib/components/add-checklist/counter/counter.component.scss

@@ -0,0 +1,49 @@
+$text-color: #667085;
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.counter-container {
+  @include flex-center;
+  border-radius: 8px;
+  background-color: white;
+  border: 0.49px solid #d0d5dd;
+  padding: 10px;
+  justify-content: space-between;
+
+  input {
+    border: none;
+    text-align: center;
+    vertical-align: middle;
+    background-color: transparent;
+    min-width: 20px;
+    width: 100%;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+
+  input:focus {
+    outline: 0;
+    box-shadow: none;
+  }
+}
+
+.disable-counter {
+  color: var(--bs-gray-500) !important;
+  background-color: var(--bs-gray-200) !important;
+  border-color: var(--bs-gray-300) !important;
+  pointer-events: none;
+  opacity: 1;
+}