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

package/src/lib/components/add-task/add-task.component.html

@@ -0,0 +1,654 @@
+<div class="card group-delete py-0">
+    <div *ngIf="type ==='createtask'" class="card-body py-0 d-flex flex-start flex-column p-9 ">
+        <div class="modal-header px-0 py-5">
+            <div class="symbol symbol-75px symbol-circle">
+                <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="4" y="4" width="48" height="48" rx="24" fill="#DAF1FF" />
+                    <rect x="4" y="4" width="48" height="48" rx="24" stroke="#EAF8FF" stroke-width="8" />
+                    <path
+                        d="M30 18H22C21.4696 18 20.9609 18.2107 20.5858 18.5858C20.2107 18.9609 20 19.4696 20 20V36C20 36.5304 20.2107 37.0391 20.5858 37.4142C20.9609 37.7893 21.4696 38 22 38H34C34.5304 38 35.0391 37.7893 35.4142 37.4142C35.7893 37.0391 36 36.5304 36 36V24M30 18L36 24M30 18V24H36M28 34V28M25 31H31"
+                        stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+
+            </div>
+        </div>
+
+        <div class="modal-body scroll-y w-100 p-1  scroll custom-scroll" >
+            <form [formGroup]="taskForm">
+                <ng-container *ngFor="let section of getSections?.controls; let i = index">
+                    <ng-container [formGroup]="section">
+                        <ng-container *ngFor="let question of getQuestions(i)?.controls; let j = index">
+                            <ng-container [formGroup]="question">
+                                <div class="fv-row mb-3 fv-plugins-icon-container">
+                                    <label class="label-name my-2">
+                                        Task Name<span class="text-danger">*</span>
+                                    </label>
+                                    <input [formControl]="taskForm.controls.checklistName" type="text"
+                                        placeholder="Enter Task Name" class="form-control mb-5">
+                                    <div
+                                        class="fv-plugins-message-container fv-plugins-message-container--enabled invalid-feedback">
+                                    </div>
+                                </div>
+
+                                <div class="text-gray-600">This Task is linked to </div>
+                                <div class="fv-row mb-3 fv-plugins-icon-container">
+                                    <label class="label-name my-2">
+                                        {{question.get('qno')?.value}}. {{question.get('qname')?.value}}
+
+                                    </label>
+                                </div>
+                                <div class="row px-5" *ngIf="inputData.answerType==='video'">
+                                    <div class="col-md-6" *ngFor="let item of displayedUserAnswers">
+                                        <div class="title-ref my-3">Uploaded Video</div>
+                                        <video controls class="recap-img p-3"
+                                            src="{{environment.TraxAnswerCDN}}{{item.answer}}">
+                                        </video>
+                                    </div>
+                                </div>
+                                <div class="row px-5"
+                                    *ngIf="inputData.answerType==='image'||inputData.answerType==='descriptiveImage'||inputData.answerType==='multipleImage'">
+                                    <div class="col-md-6" *ngFor="let item of displayedUserAnswers">
+                                        <div class="title-ref my-3">Uploaded Image</div>
+                                        <img class="img-logo" src="{{environment.TraxAnswerCDN}}{{item.answer}}" alt="">
+                                    </div>
+                                </div>
+                                <div class="row px-5"
+                                    *ngIf="inputData.answerType==='multiplechoicesingle'||inputData.answerType==='yes/no'||inputData.answerType==='date'||inputData.answerType==='time' ||inputData.answerType==='multiplechoicemultiple'||inputData.answerType==='linearscale'||inputData.answerType==='descriptive' ">
+                                    <div class="row" *ngFor="let item of displayedUserAnswers">
+                                        <span class="mt-1">{{item.answer}}</span>
+                                    </div>
+                                </div>
+                                <div class="fv-row mb-3 fv-plugins-icon-container">
+                                    <label class="label-name my-2">
+                                        Task Description<span class="text-danger">*</span>
+                                    </label>
+                                    <textarea [formControl]="taskForm.controls.checklistDescription"
+                                        class="form-control form-control" placeholder="Enter a comment"
+                                        name="Main entrance signage is cracked, and lights are flickering. Please retake the image"
+                                        rows="4"></textarea>
+                                </div>
+
+                                <div class="fv-row mb-3 fv-plugins-icon-container">
+                                    <label class="label-name my-2">
+                                        Response Type
+                                    </label>
+                                    <select (change)="onQuestionChange($event, i, j)" formControlName="answerType"
+                                        class="form-select mb-5">
+                                        <option *ngFor="let answer of answerTypes" [value]="answer.value">
+                                            {{answer.label}}</option>
+                                    </select>
+
+                                </div>
+                                <div class="fv-row mb-3 fv-plugins-icon-container" *ngIf="question.get('answerType')?.value !=='time'">
+                                    <label class="label-name1 my-3" >
+                                        Answer Options
+                                    </label>
+                                    <div class="form-check form-switch text-left align-items-center btn-sec my-2" *ngIf="question.get('answerType')?.value == 'dropdown'" style="padding-left:0px !important">
+                                        <input class="form-check-input mx-0 pointer" type="checkbox" name="toc" value="1" ngDefaultControl formControlName="allowMultiple">
+                                        <label class="form-check-label pointer fs-16px" for="flexSwitchCheckDefault">Allow Multiple Response</label>
+                                        
+                                    </div>
+                                    <div [id]="'question-' + i + j" class="question-container mb-10">
+                                        <ng-container *ngIf="question.get('answerType')?.value === 'descriptive'">
+                                            <div class="d-flex mb-5">
+                                                <div class="form-check">
+                                                    <input formControlName="descriptivetype"
+                                                        class="form-check-input cursor-pointer" type="radio"
+                                                        value="text" [id]="'descriptivetype_text' + i + j">
+                                                    <label class="cursor-pointer dscriptiveType"
+                                                        [for]="'descriptivetype_text' + i + j">Text</label>
+                                                </div>
+                                                <div class="form-check ms-5">
+                                                    <input formControlName="descriptivetype"
+                                                        class="form-check-input cursor-pointer" type="radio"
+                                                        value="number" [id]="'descriptivetype_number' + i + j">
+                                                    <label class="cursor-pointer dscriptiveType"
+                                                        [for]="'descriptivetype_number' + i + j">Number</label>
+                                                </div>
+                                            </div>
+
+                                        </ng-container>
+
+                                        <ng-container *ngIf="question.get('answerType')?.value === 'yes/no'">
+                                            <ng-container
+                                                *ngFor="let answer of getAnswers(i, j).controls; let k = index">
+                                                <ng-container [formGroup]="answer">
+                                                    <div class="row">
+                                                        <div class="col-12 mb-5">
+                                                            <div class="input-group ">
+                                                                <input formControlName="answer" type="text"
+                                                                    class="form-control"
+                                                                    placeholder="Enter answer here">
+
+                                                            </div>
+                                                            <ng-container
+                                                                *ngIf="answer.get('answer')?.invalid && answer.get('answer')?.touched">
+                                                                <div *ngIf="answer.get('answer')?.hasError('required')|| answer.get('answer')?.hasError('whitespace')"
+                                                                    class="text-danger mt-2">* Answer is required</div>
+                                                            </ng-container>
+                                                        </div>
+                                                    </div>
+                                                </ng-container>
+                                            </ng-container>
+                                        </ng-container>
+
+                                        <ng-container
+                                            *ngIf="question.get('answerType')?.value === 'multiplechoicesingle' || question.get('answerType')?.value === 'multiplechoicemultiple' || question.get('answerType')?.value === 'dropdown'">
+                                            <ng-container
+                                                *ngFor="let answer of getAnswers(i, j).controls; let k = index">
+                                                <ng-container [formGroup]="answer">
+                                                    <div class="row">
+                                                        <div class="col-12 mb-5">
+                                                            <div class="input-group ">
+                                                                <input formControlName="answer" type="text"
+                                                                    class="form-control"
+                                                                    placeholder="Enter answer here">
+
+                                                                <button *ngIf="isInvalidAnswer(i,j)"
+                                                                    class="btn btn-outline" type="button">
+                                                                    <svg class="cursor-pointer"  (click)="onAnswerDelete(i, j, k)"
+                                                                        xmlns="http://www.w3.org/2000/svg"
+                                                                        matTooltip="Delete answer"
+                                                                        matTooltipPosition="above"
+                                                                        matTooltipClass="custom-test" width="20"
+                                                                        height="20" viewBox="0 0 20 20" fill="none">
+                                                                        <path _ngcontent-ng-c1491044170=""
+                                                                            d="M15 5L5 15M5 5L15 15" stroke="#667085"
+                                                                            stroke-width="1.66667"
+                                                                            stroke-linecap="round"
+                                                                            stroke-linejoin="round"></path>
+                                                                    </svg>
+                                                                </button>
+                                                            </div>
+                                                            <ng-container
+                                                                *ngIf="answer.get('answer')?.invalid && answer.get('answer')?.touched">
+                                                                <div *ngIf="answer.get('answer')?.hasError('required')||answer.get('answer')?.hasError('whitespace')"
+                                                                    class="text-danger mt-2">* Answer is required</div>
+                                                            </ng-container>
+                                                        </div>
+
+
+
+
+                                                    </div>
+                                                </ng-container>
+                                            </ng-container>
+
+
+                                            <div (click)="addNewAnswer(i, j, 'multiplechoicesingle')"
+                                                class="add-reference-btn mb-5 d-flex justify-content-center">
+                                                Add More Answer
+                                            </div>
+                                        </ng-container>
+
+                                        <ng-container
+                                            *ngIf="question.get('answerType')?.value === 'descriptiveImage' || question.get('answerType')?.value === 'image' || question.get('answerType')?.value === 'image/video'">
+
+
+
+                                            <ng-container
+                                                *ngFor="let answer of getAnswers(i, j).controls; let k = index">
+                                                <ng-container [formGroup]="answer">
+                                                    <div class="row">
+                                                        <div class="col-12 mb-5">
+
+
+
+
+                                                            <div class="row">
+                                                                <div class="col-6">
+                                                                    <div
+                                                                        class="d-flex align-items-center justify-content-between">
+
+
+                                                                        <div>
+                                                                            <div class="form-check form-switch ps-0">
+                                                                                <input
+                                                                                    [formControl]="question.controls.allowUploadfromGallery"
+                                                                                    class="form-check-input me-3"
+                                                                                    type="checkbox" role="switch"
+                                                                                    [id]="'allow_upload_from_gallery' + i + j">
+                                                                                <label
+                                                                                    class="form-check-label check-label"
+                                                                                    [for]="'allow_upload_from_gallery' + i + j">Allow
+                                                                                    upload from gallery</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </ng-container>
+                                            </ng-container>
+
+
+                                        </ng-container>
+
+                                        <ng-container *ngIf="question.get('answerType')?.value === 'video'">
+                                            <div class="row">
+                                                <div class="col-12 mb-5">
+                                                    <div class="form-check form-switch ps-0">
+                                                        <input formControlName="allowUploadfromGallery"
+                                                            class="form-check-input me-3" type="checkbox" role="switch"
+                                                            [id]="'allow_upload_from_gallery' + i + j">
+                                                        <label class="form-check-label check-label"
+                                                            [for]="'allow_upload_from_gallery' + i + j">Allow
+                                                            upload from gallery</label>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </ng-container>
+
+                                        <ng-container *ngIf="question.get('answerType')?.value === 'multipleImage'">
+                                            <ng-container
+                                                *ngFor="let answer of getAnswers(i, j).controls; let k = index">
+                                                <ng-container [formGroup]="answer">
+                                                    <div class="row">
+                                                        <div class="col-12 mb-5">
+                                                            <div class="row">
+                                                                <div class="col-6">
+                                                                    <div
+                                                                        class="d-flex align-items-center justify-content-between">
+                                                                        <div>
+                                                                            <div class="form-check form-switch ps-0">
+                                                                                <input
+                                                                                    [formControl]="question.controls.allowUploadfromGallery"
+                                                                                    class="form-check-input me-3"
+                                                                                    type="checkbox" role="switch"
+                                                                                    [id]="'allow_upload_from_gallery' + i + j">
+                                                                                <label
+                                                                                    class="form-check-label check-label"
+                                                                                    [for]="'allow_upload_from_gallery' + i + j">Allow
+                                                                                    upload from gallery</label>
+                                                                            </div>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                                <div class="col-6" *ngIf="question.controls.descriptivetype">
+                                                                    <div class="d-flex align-items-center h-100">
+                                                                        <div class="form-check">
+                                                                            <input [formControl]="question.controls.descriptivetype"
+                                                                                class="form-check-input cursor-pointer"
+                                                                                type="radio" value="text"
+                                                                                [id]="'descriptive_answer_validation_text' + i + j + k">
+                                                                            <label class="cursor-pointer dscriptiveType"
+                                                                                [for]="'descriptive_answer_validation_text' + i + j + k">Text</label>
+                                                                        </div>
+                                                                        <div class="form-check ms-5">
+                                                                            <input [formControl]="question.controls.descriptivetype"
+                                                                                class="form-check-input cursor-pointer"
+                                                                                type="radio" value="number"
+                                                                                [id]="'descriptive_answer_validation_number' + i + j + k">
+                                                                            <label class="cursor-pointer dscriptiveType"
+                                                                                [for]="'descriptive_answer_validation_number' + i + j + k">Number</label>
+                                                                        </div>
+                                                                    </div>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </ng-container>
+                                            </ng-container>
+
+
+                                        </ng-container>
+
+                                        <ng-container
+                                            *ngIf="question.get('answerType')?.value === 'time'">
+                                        </ng-container>
+                                        <ng-container *ngIf="question.get('answerType')?.value === 'date' && getAnswers(i, j)?.length">
+                                            <ng-container [formGroup]="getAnswers(i, j).at(0)">
+                                                <div class="d-flex answervalidation">
+                                                    <input class="" type="checkbox"
+                                                        style="width:16px;height:16px;cursor: pointer;"
+                                                        value="1"
+                                                        formControlName="historicDate">
+                                                    <div class="checkbox mt-1 mx-2"
+                                                        style="cursor: default;">
+                                                        <span class="form-check-label check-label">Allow Historic Dates on Date Picker</span>
+                                                    </div>
+                                                </div>
+                                            </ng-container>
+                                        </ng-container>
+
+                                        <ng-container *ngIf="question.get('answerType')?.value === 'linearscale'">
+                                             <ng-container *ngIf="getAnswers(i, j)?.length">
+                                                <ng-container [formGroup]="getAnswers(i, j).at(0)">
+                                                    <div class="row">
+                                                        <div class="col-md-4">
+                                                            <div class="dropText">
+                                                                Select Type
+                                                            </div>
+                                                            <div class="mt-2">
+                                                                <select class="form-select" formControlName="linearType" (change)="updateLinearTypeRange($event, i, j)">
+                                                                    <option value="number">Whole Number</option>
+                                                                    <option value="degree">Degree °C</option>
+                                                                    <option value="percentage">Percentage</option>
+                                                                </select>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-4">
+                                                            <div class="dropText">
+                                                                Min Value
+                                                            </div>
+                                                            <div class="mt-2">
+                                                                <lib-counter style="width: 40%" formControlName="rangeStart" [step]="1" placeholder="0" [type]="getAnswers(i, j).at(0)?.get('linearType')?.value ?? 'number'"></lib-counter>
+                                                            </div>
+                                                        </div>
+                                                        <div class="col-md-4">
+                                                            <div class="dropText">
+                                                                Max Value
+                                                            </div>
+                                                            <div class="mt-2">
+                                                                <lib-counter style="width: 40%" formControlName="rangeEnd" [step]="1" placeholder="100" [type]="getAnswers(i, j).at(0)?.get('linearType')?.value ?? 'number'"></lib-counter>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                    <ng-container *ngIf="getAnswers(i, j).at(0)?.invalid && getAnswers(i, j).at(0)?.touched">
+                                                        <div *ngIf="getAnswers(i, j).at(0)?.hasError('invalidRange')"
+                                                            class="text-danger mt-2">* Min value must be less than max value.</div>
+                                                    </ng-container>
+                                                </ng-container>
+                                            </ng-container>
+                                        </ng-container>
+
+
+                                    </div>
+
+
+
+
+
+
+                                </div>
+                            </ng-container>
+                        </ng-container>
+                    </ng-container>
+                </ng-container>
+                <div class="row mb-3 fv-plugins-icon-container ">
+                    <div class="col-md-6">
+                        <label class="label-name my-2">
+                            Due date
+                        </label>
+
+                        <div class="d-flex align-items-center position-relative my-1">
+                            <span class="svg-icon svg-icon-1 position-absolute ms-3">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
+                                    fill="none">
+                                    <path
+                                        d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                                        stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                        stroke-linejoin="round" />
+                                </svg>
+                            </span>
+                            <input class="fx-date-range form-control ps-14" type="text" matInput ngxDaterangepickerMd
+                                [drops]="'down'" [opens]="'right'" [showCustomRangeLabel]="false"
+                                [alwaysShowCalendars]="false" [autoApply]="true" [singleDatePicker]="true"
+                                [ngModelOptions]="{standalone: true}" [keepCalendarOpeningWithRange]="true"
+                                [showCancel]="true" autocomplete="off" [(ngModel)]="selectedDate"
+                                (startDateChanged)="onStartDateChange($event)" [isCustomDate]="isCustomDate"
+                                [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                                (datesUpdated)="datechange($event)" name="daterange" [readonly]="true" />
+                        </div>
+                    </div>
+                    <div class="col-md-6">
+                        <label class="label-name my-2">Due time</label>
+                        <div class="position-relative w-100">
+                          <button
+                            type="button"
+                            (click)="openDropdown($event)"
+                            class="btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px"
+                          >
+                            <span class="svg-icon svg-icon-1 position-absolute">
+                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                <path
+                                  d="M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z"
+                                  stroke="#667085"
+                                  stroke-width="1.66667"
+                                  stroke-linecap="round"
+                                  stroke-linejoin="round"
+                                />
+                              </svg>
+                            </span>
+                            <span class="ps-12">{{ selectedItem }}</span>
+                          </button>
+                          <div *ngIf="dropDown" class="card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0">
+                            <ul class="list-unstyled">
+                              <li
+                                *ngFor="let item of timeDetails"
+                                [ngClass]="selectedItem === item.text ? 'active' : ''"
+                                class="camera px-5 items fw-semibold cursor-pointer py-2"
+                                [class.disabled]="isDisabled(item.text)"
+                                (click)="selectItem(item.text)"
+                              >
+                                {{ item.text }}
+                              </li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                      
+                </div>
+
+                <div class="fv-row mb-3 fv-plugins-icon-container">
+                    <label class="label-name my-2">
+                        Assign to
+                    </label>
+                    <input type="text" class="form-control" [value]="this.checklistInfo?.submittedBy" [disabled]="true">
+
+                </div>
+                <div class="fv-row my-3 fv-plugins-icon-container">
+                    <div class="border-attach col-md-3 cursor-pointer" *ngIf="this.uploadedFiles.length<3" (click)="fileInput.click()">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                            <path
+                                d="M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831"
+                                stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                        <span class="ms-3">Add Attachment</span>
+                        <input #fileInput type="file" accept=".png, .jpg, .jpeg, .svg, .gif" (change)="uploadFile($event,0,0,0)" hidden />
+                      </div>
+                    <div class="row">
+                      <div class="col-md-4 image-preview mt-2" *ngFor="let item of uploadedFiles; let i = index">
+                        <button class="remove-icon" (click)="removeImage(i)">✖</button>
+                        <img src="{{environment.TraxAnswerCDN}}{{item}}" alt="Preview" />  
+                      </div>  
+                      </div>  
+                </div>                  
+                
+            </form>
+
+        </div>
+        <div class=" w-100 modal-footer px-0 pt-3 pb-5">
+            <div role="group" class="d-flex mt-3 w-100">
+                <button class="btn btn-outline w-100 me-3" (click)="cancel()">Cancel</button>
+                <button id="alert-toast" class="btn btn-primary w-100 ms-3" [disabled]="!this.taskForm.valid||submitted"
+                    (click)="onSubmit()">Create
+                    Task</button>
+            </div>
+        </div>
+
+    </div>
+
+    <div *ngIf="type ==='redo'" class="card-body py-0 d-flex flex-start flex-column p-9 scroll ">
+        <div class="my-5">
+            <div class="symbol symbol-75px symbol-circle">
+                <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <rect x="4" y="4" width="48" height="48" rx="24" fill="#DAF1FF" />
+                    <rect x="4" y="4" width="48" height="48" rx="24" stroke="#EAF8FF" stroke-width="8" />
+                    <path
+                        d="M39 20.0001V26.0001M39 26.0001H33M39 26.0001L34.36 21.6401C33.2853 20.5648 31.9556 19.7793 30.4952 19.3568C29.0348 18.9344 27.4911 18.8888 26.0083 19.2243C24.5255 19.5598 23.1518 20.2655 22.0155 21.2755C20.8791 22.2855 20.0172 23.5669 19.51 25.0001M17 36.0001V30.0001M17 30.0001H23M17 30.0001L21.64 34.3601C22.7147 35.4354 24.0444 36.2209 25.5048 36.6433C26.9652 37.0657 28.5089 37.1113 29.9917 36.7758C31.4745 36.4403 32.8482 35.7346 33.9845 34.7247C35.1209 33.7147 35.9828 32.4333 36.49 31.0001"
+                        stroke="#00A3FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+                </svg>
+
+            </div>
+        </div>
+        <ng-container *ngFor="let section of getSections?.controls; let i = index">
+            <ng-container [formGroup]="section">
+                <ng-container *ngFor="let question of getQuestions(i)?.controls; let j = index">
+                    <ng-container [formGroup]="question">
+
+                        <div class="modal-body scroll-y w-100 p-1">
+                            <h5 class="label-name1 my-2">
+                                Redo
+                            </h5>
+                            <h5 class="label-name1 my-2">
+                                {{checklistInfo.checklistName}}
+                            </h5>
+                            <div class="text-gray-600">
+                                {{question.get('qno')?.value}}. {{question.get('qname')?.value}}
+                            </div>
+                            <div class="row px-5" *ngIf="inputData.answerType==='video'">
+                                <div class="col-md-6" *ngFor="let item of displayedUserAnswers">
+                                    <div class="title-ref my-3">Uploaded Video</div>
+                                    <video controls class="recap-img p-3 video-size"
+                                        src="{{environment.TraxAnswerCDN}}{{item.answer}}">
+                                    </video>
+                                </div>
+                            </div>
+                            <div class="row px-5"
+                                *ngIf="inputData.answerType==='image'||inputData.answerType==='descriptiveImage'||inputData.answerType==='multipleImage'">
+                                <div class="col-md-6" *ngFor="let item of displayedUserAnswers">
+                                    <div class="title-ref my-3">Uploaded Image</div>
+                                    <img class="img-logo" src="{{environment.TraxAnswerCDN}}{{item.answer}}" alt="">
+                                </div>
+                            </div>
+                            <div class="row px-5"
+                                *ngIf="inputData.answerType==='multiplechoicesingle'||inputData.answerType==='yes/no'||inputData.answerType==='multiplechoicemultiple'||inputData.answerType==='date'||inputData.answerType==='time'||inputData.answerType==='linearscale'||inputData.answerType==='descriptive' || inputData.answerType==='dropdown' ">
+                                <div class="col-md-12" *ngFor="let item of displayedUserAnswers">
+                                    <span class="mt-1">{{item.answer}}</span>
+                                </div>
+                            </div>
+
+                            <form [formGroup]="taskForm">
+
+                                <div class="fv-row mb-3 fv-plugins-icon-container">
+                                    <label class="label-name my-2">
+                                        Comment
+                                    </label>
+                                    <textarea [formControl]="taskForm.controls.checklistDescription"
+                                        class="form-control form-control" placeholder="Enter a comment"
+                                        name="Main entrance signage is cracked, and lights are flickering. Please retake the image"
+                                        rows="4"></textarea>
+                                </div>
+                                <!-- <div class="fv-row my-3 fv-plugins-icon-container">
+                                    <div class="border-attach col-md-3 cursor-pointer" (click)="fileInput.click()">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                          <path
+                                            d="M17.8666 9.2081L10.2082 16.8664C9.27005 17.8046 7.99757 18.3317 6.67075 18.3317C5.34393 18.3317 4.07145 17.8046 3.13325 16.8664C2.19505 15.9282 1.66797 14.6558 1.66797 13.3289C1.66797 12.0021 2.19505 10.7296 3.13325 9.79144L10.7916 2.1331C11.4171 1.50763 12.2654 1.15625 13.1499 1.15625C14.0345 1.15625 14.8828 1.50763 15.5082 2.1331C16.1337 2.75857 16.4851 3.60689 16.4851 4.49144C16.4851 5.37598 16.1337 6.2243 15.5082 6.84977L7.84158 14.5081C7.52885 14.8208 7.10469 14.9965 6.66242 14.9965C6.22014 14.9965 5.79598 14.8208 5.48325 14.5081C5.17051 14.1954 4.99482 13.7712 4.99482 13.3289C4.99482 12.8867 5.17051 12.4625 5.48325 12.1498L12.5582 5.0831"
+                                            stroke="#344054" stroke-width="1.67" stroke-linecap="round" stroke-linejoin="round"
+                                          />
+                                        </svg>
+                                        <span class="ms-3">Add Attachment</span>
+                                        <input #fileInput type="file" accept=".png, .jpg, .jpeg, .svg, .gif" (change)="uploadFile($event,0,0,0)" hidden />
+                                      </div>
+                                      <div class="row">
+                
+                                      <div class="col-md-4 image-preview mt-2" *ngFor="let item of uploadedFiles; let i = index">
+                                        <button class="remove-icon" (click)="removeImage(i)">✖</button>
+                                        <img [src]="item" alt="Preview" />
+                                      </div>
+                                    </div>
+                                </div> -->
+
+
+                                <!-- <div class="row mb-3 fv-plugins-icon-container ">
+                                    <div class="col-md-6">
+                                        <label class="label-name my-2">
+                                            Due date
+                                        </label>
+                                        <div class="d-flex align-items-center position-relative my-1">
+                                            <span class="svg-icon svg-icon-1 position-absolute ms-3">
+                                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                                                    viewBox="0 0 20 20" fill="none">
+                                                    <path
+                                                        d="M13.3333 1.66663V4.99996M6.66667 1.66663V4.99996M2.5 8.33329H17.5M4.16667 3.33329H15.8333C16.7538 3.33329 17.5 4.07948 17.5 4.99996V16.6666C17.5 17.5871 16.7538 18.3333 15.8333 18.3333H4.16667C3.24619 18.3333 2.5 17.5871 2.5 16.6666V4.99996C2.5 4.07948 3.24619 3.33329 4.16667 3.33329Z"
+                                                        stroke="#344054" stroke-width="1.67" stroke-linecap="round"
+                                                        stroke-linejoin="round" />
+                                                </svg>
+                                            </span>
+                                            <input class="fx-date-range form-control ps-14" type="text" matInput
+                                                ngxDaterangepickerMd [drops]="'down'" [opens]="'right'"
+                                                [showCustomRangeLabel]="false" [alwaysShowCalendars]="false"
+                                                [autoApply]="true" [singleDatePicker]="true"
+                                                [ngModelOptions]="{standalone: true}"
+                                                [keepCalendarOpeningWithRange]="true" [showCancel]="true"
+                                                autocomplete="off" [(ngModel)]="selectedDate"
+                                                (startDateChanged)="onStartDateChange($event)"
+                                                [isCustomDate]="isCustomDate"
+                                                [locale]="{ format: 'DD-MM-YYYY', firstDay: 1, monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] }"
+                                                (datesUpdated)="datechange($event)" name="daterange"
+                                                [readonly]="true" />
+                                        </div>
+                                    </div>
+                                    <div class="col-md-6">
+                                        <label class="label-name my-2">Due time</label>
+                                        <div class="position-relative w-100">
+                                          <button
+                                            type="button"
+                                            (click)="openDropdown($event)"
+                                            class="btn btn-default w-100 btn-outline btn-outline-default rounded-3 mt-1 text-nowrap border-val d-flex justify-content-between h-45px"
+                                          >
+                                            <span class="svg-icon svg-icon-1 position-absolute">
+                                              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+                                                <path
+                                                  d="M13.3333 1.6665V4.99984M6.66667 1.6665V4.99984M2.5 8.33317H17.5M4.16667 3.33317H15.8333C16.7538 3.33317 17.5 4.07936 17.5 4.99984V16.6665C17.5 17.587 16.7538 18.3332 15.8333 18.3332H4.16667C3.24619 18.3332 2.5 17.587 2.5 16.6665V4.99984C2.5 4.07936 3.24619 3.33317 4.16667 3.33317Z"
+                                                  stroke="#667085"
+                                                  stroke-width="1.66667"
+                                                  stroke-linecap="round"
+                                                  stroke-linejoin="round"
+                                                />
+                                              </svg>
+                                            </span>
+                                            <span class="ps-12">{{ selectedItem }}</span>
+                                          </button>
+                                          <div *ngIf="dropDown" class="card py-1 w-100 position-absolute z-1 h-200px scroll-y top-50px end-0">
+                                            <ul class="list-unstyled">
+                                              <li
+                                                *ngFor="let item of timeDetails"
+                                                [ngClass]="selectedItem === item.text ? 'active' : ''"
+                                                class="camera px-5 items fw-semibold cursor-pointer py-2"
+                                                [class.disabled]="isDisabled(item.text)"
+                                                (click)="selectItem(item.text)"
+                                              >
+                                                {{ item.text }}
+                                              </li>
+                                            </ul>
+                                          </div>
+                                        </div>
+                                      </div>
+                                </div> -->
+
+                                <div class="fv-row mb-3 fv-plugins-icon-container">
+                                    <label class="label-name my-2">
+                                        Assign to
+                                    </label>
+                                    <input type="text" class="form-control" [value]="this.checklistInfo?.submittedBy"
+                                        [disabled]="true">
+
+                                </div>
+                                <!-- <div class="form-check">
+                                    <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+                                    <label class="form-check-label label-name" for="flexCheckDefault">
+                                        Mandatory image response
+                                    </label>
+                                </div> -->
+                                <div class="mt-5 w-100">
+                                    <div role="group" class="d-flex mt-3 mb-15">
+                                        <button class="btn btn-outline w-100 me-3" (click)="cancel()">Cancel</button>
+                                        <button id="alert-toast" class="btn btn-primary w-100 ms-3" [disabled]="submitted"
+                                            (click)="onSubmit()">Submit</button>
+                                    </div>
+                                </div>
+
+
+                            </form>
+
+                        </div>
+                    </ng-container>
+                </ng-container>
+            </ng-container>
+        </ng-container>
+
+    </div>
+</div>