vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/sharedComponents/bulk-responsibility-view/bulk-responsibility-view.component.html

@@ -0,0 +1,566 @@
+
+<ng-container *ngIf="responsibilityType === 'singleTab'">
+<div class="bulk-view">
+    <div class="bulk-view-head">
+        <h2 class="bulk-view-title">
+            {{fileName}}
+        </h2>
+    </div>
+    <div class="bulk-view-body">
+        <div class="exel-view">
+            <div class="exel-view-row head">
+                <div class="exel-view-column sl-no">#</div>
+                <div class="exel-view-column" *ngFor="let heading of responsibilityBulkUpload?.header"
+                    [class.large]="heading && heading.startsWith('Inherent')">
+                    <ng-container *ngIf="heading && !(heading.startsWith('Due')) && !(heading.startsWith('Oversight'))">
+                        {{(heading.includes('*')? heading.replace('*', '') : heading)}}
+                        <span *ngIf="heading.includes('*')" class="required">*</span>
+                    </ng-container>
+                    <ng-container *ngIf="heading && heading.startsWith('Due')">
+                        <div class="exel-view-row">
+                            <div class="exel-view-column large">Due Date</div>
+                        </div>
+                        <div class="exel-view-row multi-column">
+                            <div class="exel-view-column">Day</div>
+                            <div class="exel-view-column">Month</div>
+                        </div>
+                    </ng-container>
+                    <ng-container *ngIf="heading && heading.startsWith('Oversight')">
+                        <div class="exel-view-row">
+                            <div class="exel-view-column large">Oversight </div>
+                        </div>
+                        <div class="exel-view-row multi-column">
+                            <div class="exel-view-column">Always Notify</div>
+                            <div class="exel-view-column">Notify on Failure</div>
+                        </div>
+                    </ng-container>
+                </div>
+
+            </div>
+            <div class="exel-view-row" *ngFor="let report of responsibilityBulkUpload?.reports; let i = index">
+                <div class="exel-view-column sl-no" [class.error]="!report.isValid">{{i+1}}</div>
+
+                <div class="exel-view-column" [class.error]="!report.responsibilityName">{{report?.responsibilityName}}
+                    <i *ngIf="!report?.responsibilityName" class="icons"
+                        [appTooltip]="'Enter a name for this responsibility.'" placement="bottom-right" type="white"
+                        delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                </div>
+                <div class="exel-view-column" [class.error]="report?.assignor && ((report?.assignor == report?.alwaysNotify) || (report?.assignor == report?.notifyOnFailure))">
+                    {{report?.assignor}}
+                    <i *ngIf="((report?.assignor) && (report?.notifyOnFailure == report?.assignor||report?.alwaysNotify == report?.assignor))"
+                        class="icons"
+                        [appTooltip]="'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'"
+                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                    </i>
+<!--
+                    <i *ngIf="((report?.assignor) && (report?.reviewer == report?.assignor))"
+                        class="icons"
+                        [appTooltip]="'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'"
+                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                    </i>     -->
+                </div>
+                <div class="exel-view-column" [class.error]="!report?.assignee || ((report?.assignee == report?.reviewer)
+                || (report?.assignee == report?.alwaysNotify) || (report?.assignee == report?.notifyOnFailure)) || (!report?.isValidUser)">
+                    {{report?.assignee}}
+
+                    <i *ngIf="((report?.assignee) && (report?.notifyOnFailure == report?.assignee||report?.alwaysNotify == report?.assignee))"
+                        class="icons"
+                        [appTooltip]="'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'"
+                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                    </i>
+
+                    <i *ngIf="((report?.assignee) && (report?.reviewer == report?.assignee))"
+                        class="icons"
+                        [appTooltip]="'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'"
+                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                    </i>
+                    <i *ngIf="(!report?.assignee) || (!report?.isValidUser)"
+                    class="icons"
+                    [appTooltip]="'Select the user responsible for completing this responsibility. '"
+                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                    </i>
+                </div>
+                <div class="exel-view-column" id="resCategory" *ngIf="report?.responsibilityCategory!==null">{{report?.responsibilityCategory}}</div>
+                <div class="exel-view-column" [class.error]="!report.frequency">{{report?.frequency}}
+                    <i *ngIf="!report?.frequency" class="icons" [appTooltip]="'Select a frequency for this responsibility.'"
+                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                </div>
+                <div class="exel-view-column multi-column">
+                    <div class="exel-view-row">
+                        <div class="exel-view-column" [class.error]="!report.isValidDueDate">{{report?.day}}
+                            <i *ngIf="!report?.isValidDueDate" class="icons" [appTooltip]="'Invalid Due Date.'"
+                                placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                            <i *ngIf="report?.isPastDate" class="icons" [appTooltip]="'This date occurs in the past. Select a future date.'"
+                                placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                        </div>
+                        <div class="exel-view-column" [class.error]="!report.isValidDueDate">{{report?.month}}
+                            <i *ngIf="!report?.isValidDueDate" class="icons" [appTooltip]="'Invalid Due Date.'"
+                                placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                            <i *ngIf="report?.isPastDate" class="icons" [appTooltip]="'This date occurs in the past. Select a future date.'"
+                                placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                        </div>
+                    </div>
+                </div>
+                <div class="exel-view-column">{{report?.responsibilityWindow}}</div>
+                <div class="exel-view-column">{{report?.failedAfter}}</div>
+                <div class="exel-view-column">{{report?.reportClass}}</div>
+                <div class="exel-view-column">{{report?.responsibilityCenter}}</div>
+                <div class="exel-view-column"
+                    [class.error]="report?.reviewer && ((report?.reviewer == report?.alwaysNotify) ||  (report?.reviewer == report?.notifyOnFailure)
+                      || (report?.reviewer == report?.assignee) )">
+                    {{report?.reviewer}}
+
+                    <i *ngIf="(report?.reviewer) && ((report?.reviewer == report?.alwaysNotify) || (report?.reviewer == report?.notifyOnFailure))"
+                        class="icons"
+                        [appTooltip]="'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'"
+                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                    </i>
+
+                    <i *ngIf="report?.reviewer && (report?.reviewer == report?.assignee)" class="icons"
+                        [appTooltip]="'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'"
+                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                    </i>
+                    <!-- <i *ngIf="(report?.reviewer && report?.assignor)"
+                        class="icons"
+                        [appTooltip]="((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'"
+                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                    </i> -->
+                </div>
+                <div class="exel-view-column">{{report?.reviewToBeCompletedWithin}}</div>
+                <div class="exel-view-column">{{report?.reviewWillBeFailedAfter}}</div>
+                <div class="exel-view-column">{{report?.formatForResponsibility}}</div>
+                <div class="exel-view-column">{{report?.notes}}</div>
+                <div class="exel-view-column">{{report?.documentEvidenceRequired}}</div>
+                <div class="exel-view-column multi-column">
+                    <div class="exel-view-row">
+                        <div class="exel-view-column" [class.error]="report?.alwaysNotify && ((report?.alwaysNotify == report?.reviewer)
+                        || (report?.alwaysNotify == report?.assignor) || (report?.alwaysNotify == report?.assignee) ||
+                        ((!report?.assignor)&&(report?.alwaysNotify == defaultOwner)))">
+                            {{report?.alwaysNotify}}
+                            <i *ngIf="(report?.alwaysNotify) && ((report?.reviewer == report?.alwaysNotify))"
+                                class="icons"
+                                [appTooltip]="'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'"
+                                placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                            </i>
+
+                            <i *ngIf="report?.alwaysNotify && (report?.alwaysNotify == report?.assignee)" class="icons"
+                                [appTooltip]="'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'"
+                                placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                            </i>
+                            <i *ngIf="((report?.alwaysNotify && report?.assignor) && (report?.alwaysNotify == report?.assignor)) ||((report?.alwaysNotify && (!report?.assignor)) && (report?.alwaysNotify == defaultOwner))"
+                                class="icons"
+                                [appTooltip]="((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'"
+                                placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                            </i>
+                        </div>
+                        <div class="exel-view-column" [class.error]="report?.notifyOnFailure && ((report?.notifyOnFailure == report?.reviewer)
+                        || (report?.notifyOnFailure == report?.assignor) || (report?.notifyOnFailure == report?.assignee) ||
+                        ((!report?.assignor)&&(report?.notifyOnFailure == defaultOwner)))">
+                            {{report?.notifyOnFailure}}
+                            <i *ngIf="(report?.notifyOnFailure) && ((report?.reviewer == report?.notifyOnFailure))"
+                            class="icons"
+                            [appTooltip]="'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+
+                        <i *ngIf="report?.notifyOnFailure && (report?.notifyOnFailure == report?.assignee)" class="icons"
+                            [appTooltip]="'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+                        <i *ngIf="((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))"
+                            class="icons"
+                            [appTooltip]="((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+                        </div>
+                    </div>
+                </div>
+
+
+                <div class="exel-view-column">{{report?.keyResponsibility}}</div>
+                <div class="exel-view-column">{{report?.objective}}</div>
+
+            </div>
+        </div>
+    </div>
+    <div class="bulk-view-footer">
+        <div class="left">
+            <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be
+                uploaded.</p>
+        </div>
+        <div class="right">
+            <button (click)="close()" id="bulk-resp-cancel" >Cancel</button>
+            <button (click)="submit()" id="bulk-resp-confirm" [disabled]="finalResponsibilities<1" class="blue">Confirm</button>
+        </div>
+    </div>
+</div>
+<app-loader  *ngIf="loader"></app-loader>
+
+</ng-container>
+
+<!-- --------------------------------------------------------------------upward is new one-------------------- -->
+<app-loader  *ngIf="loader"></app-loader>
+
+
+
+
+
+
+<!-- HTML for multiple tabs -->
+<ng-container *ngIf="responsibilityType === 'multiTab'">
+    <div class="bulk-view">
+        <div class="bulk-view-head">
+            <h2 class="bulk-view-title">
+                {{fileName}}
+            </h2>
+        </div>
+        <div class="bulk-view-body bulk">
+            <div class="exel-view">
+                <div class="exel-view-row head">
+                    <div class="exel-view-column sl-no">#</div>
+                    <div class="exel-view-column">Responsibility Name <span class="required">*</span></div>
+                    <div class="exel-view-column" *ngIf="responsibilityBulkUpload?.header.includes('Program')" [class.three-column]="true">
+                        <div class="exel-view-row">
+                            <div class="exel-view-column large">Program</div>
+                        </div>
+                        <div class="exel-view-row multi-column" [class.three-column]="true">
+                            <div class="exel-view-column">Program Type</div>
+                            <div class="exel-view-column">Program</div>
+                            <div class="exel-view-column">Program Category</div>
+                        </div>
+                    </div>
+                    <div class="exel-view-column">Entrusted By</div>
+                    <div class="exel-view-column" [class.two-column]="true">
+                        <div class="exel-view-row">
+                            <div class="exel-view-column large">Entrust To <span class="required">*</span></div>
+                        </div>
+                        <div class="exel-view-row multi-column" [class.two-column]="true">
+                            <div class="exel-view-column">Person or Group<span class="required">*</span></div>
+                            <div class="exel-view-column">All or Any Persons</div>
+                        </div>
+                    </div>
+                    <div class="exel-view-column">Key Responsibility?</div>
+                    <div class="exel-view-column" [class.five-column]="tabType === 'frequency' || tabType === 'onCompletion'" [class.three-column]="tabType === 'ongoing'">
+                        <div class="exel-view-row">
+                            <!-- <div class="exel-view-column large">Frequency of Occurrence and Completion Window <span class="required">*</span></div> -->
+                            <div class="exel-view-column large">{{responsibilityBulkUpload?.header.includes('Program') ? responsibilityBulkUpload?.header[8]?.slice(0, -1) : responsibilityBulkUpload?.header[5]?.slice(0, -1)}}<span class="required">*</span></div>
+                        </div>
+                        <div class="exel-view-row multi-column" [class.five-column]="tabType === 'frequency' || tabType === 'onCompletion'" [class.three-column]="tabType === 'ongoing'">
+                            <ng-container *ngIf="tabType === 'frequency'">
+                                <div class="exel-view-column">Frequency <span class="required">*</span></div>
+                                <div class="exel-view-column">Due Date <span class="info-text">(Day)</span></div>
+                                <div class="exel-view-column">Due Date <span class="info-text">(Month)</span></div>
+                                <div class="exel-view-column">Start <span class="info-text">(No. of days before the due date)</span></div>
+                                <div class="exel-view-column">Fail <span class="info-text" appTooltip="(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)" placement="bottom" delay="0" type="black" [tooltipMandatory]="false">(No. of days after the due date. Select "0" if the responsibility must be completed on the due date)</span></div>
+                            </ng-container>
+                            <ng-container *ngIf="tabType === 'ongoing'">
+                                <div class="exel-view-column">Ongoing Frequency <span class="required">*</span></div>
+                                <div class="exel-view-column">Set a Reminder?</div>
+                                <div class="exel-view-column">Frequency of Reminder</div>
+                            </ng-container>
+                            <ng-container *ngIf="tabType === 'onCompletion'">
+                                <div class="exel-view-column">On Completion of Frequency <span class="required">*</span></div>
+                                <div class="exel-view-column">Parent Responsibility<span class="info-text">(Day)</span></div>
+                                <div class="exel-view-column">Due Date <span class="info-text" appTooltip="(No. of days after completion of the Parent Responsibility)" placement="bottom" delay="0" type="black" [tooltipMandatory]="false">(No. of days after completion of the Parent Responsibility)</span></div>
+                                <div class="exel-view-column">Start <span class="info-text" appTooltip="(No. of days before the due date)" placement="bottom" delay="0" type="black" [tooltipMandatory]="false">(No. of days before the due date)</span></div>
+                                <div class="exel-view-column">Fail <span class="info-text" appTooltip="(No. of days after the due date. Select '0' if the responsibility must be completed on the due date)" placement="bottom" delay="0" type="black" [tooltipMandatory]="false">(No. of days after the due date. Select "0" if the responsibility must be completed on the due date)</span></div>
+                            </ng-container>
+                        </div>
+                    </div>
+                    <div class="exel-view-column">Responsibility Centre</div>
+                    <div class="exel-view-column">Risk Class</div>
+                    <div class="exel-view-column">Objective</div>
+                    <div class="exel-view-column">Notes</div>
+                    <div class="exel-view-column" [class.two-column]="true">
+                        <div class="exel-view-row">
+                            <div class="exel-view-column large">Format & Evidence</div>
+                        </div>
+                        <div class="exel-view-row multi-column" [class.two-column]="true" [class.three-column]="false">
+                            <div class="exel-view-column" [class.small-column]="true">Format</div>
+                            <div class="exel-view-column">Format For Responsibility (link)</div>
+                            <div class="exel-view-column" [class.small-column]="true">Evidence</div>
+                        </div>
+                    </div>
+                    <!-- <div class="exel-view-column">Assessments or Checkpoints</div> -->
+                    <div class="exel-view-column" [class.three-column]="true">
+                        <div class="exel-view-row">
+                            <div class="exel-view-column large">Review of Responsibility</div>
+                        </div>
+                        <div class="exel-view-row multi-column" [class.three-column]="true">
+                            <div class="exel-view-column">Reviewer</div>
+                            <div class="exel-view-column">Review Start <span class="info-text">(No. of days before the due date)</span></div>
+                            <div class="exel-view-column">Review Fail <span class="info-text" appTooltip="(No. of days after the due date. Select '0' if the responsibility must be reviewed on the due date)" placement="bottom" delay="0" type="black" [tooltipMandatory]="false">(No. of days after the due date. Select "0" if the responsibility must be reviewed on the due date)</span></div>
+                        </div>
+                    </div>
+                    <div class="exel-view-column" [class.two-column]="true">
+                        <div class="exel-view-row">
+                            <div class="exel-view-column large">Overseer</div>
+                        </div>
+                        <div class="exel-view-row multi-column" [class.two-column]="true">
+                            <div class="exel-view-column">Always Notify</div>
+                            <div class="exel-view-column">Notify on Failure</div>
+                        </div>
+                    </div>
+                    <!-- <div class="exel-view-column">Overseer</div> -->
+    
+                </div>
+                <div class="exel-view-row" *ngFor="let report of responsibilityBulkUpload?.reports; let i = index">
+                    <div class="exel-view-column sl-no" [class.error]="!report?.isValid">{{i+1}}</div>
+                    <div class="exel-view-column" [class.error]="!report.responsibilityName">{{report?.responsibilityName}} <i *ngIf="!report.responsibilityName" class="icons" [appTooltip]="'Enter a name for this responsibility.'"  placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i></div>
+                    <div class="exel-view-column multi-column" *ngIf="responsibilityBulkUpload?.header.includes('Program')" [class.error]="false" [class.three-column]="true">
+                        <div class="exel-view-row multi-column" [class.three-column]="true">
+                            <div class="exel-view-column">{{report?.programType}}</div>
+                            <div class="exel-view-column">{{report?.program}}</div>
+                            <div class="exel-view-column">{{report?.programCategory}}</div>
+                        </div>
+                    </div>
+                    <div class="exel-view-column" [class.error]="report?.assignor && (report?.notifyOnFailure == report?.assignor || report?.assignor == report?.overseer)">{{report?.assignor}}
+                        <i *ngIf="((report?.assignor) && (report?.overseer == report?.assignor || report?.notifyOnFailure == report?.assignor))"
+                            class="icons"
+                            [appTooltip]="'The Overseer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+                        <!-- <i *ngIf="((report?.assignor) && (report?.reviewer === report?.assignor))"
+                            class="icons"
+                            [appTooltip]="'The Reviewer cannot also be the Assignor of this responsibility. Select another user as the Assignor.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i> -->
+                    </div>
+                    <div class="exel-view-column multi-column" [class.two-column]="true">
+                        <div class="exel-view-row multi-column" [class.two-column]="true">
+                            <div class="exel-view-column" [class.error]="!report?.assignee || report?.assignee == report?.reviewer || !report?.userValidateWithProgram?.isValidAssignee || report?.overseer === report?.assignee  || (!report?.isValidUser)">{{report?.assignee}}
+                                <!-- || (!report?.isValidUser) -->
+                                <i *ngIf="((report?.assignee) && (report?.overseer == report?.assignee))"
+                                    class="icons"
+                                    [appTooltip]="'The Overseer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                                <i *ngIf="((report?.assignee) && (report?.reviewer == report?.assignee))"
+                                    class="icons"
+                                    [appTooltip]="'The Reviewer cannot also be the Assignee of this responsibility. Select another user as the Assignee.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                                <i *ngIf="(!report?.assignee) || (!report?.isValidUser)"
+                                    class="icons"
+                                    [appTooltip]="'Select the user responsible for completing this responsibility. '"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                                <i *ngIf="(report?.assignee) && !report?.userValidateWithProgram?.isValidAssignee"
+                                    class="icons"
+                                    [appTooltip]="'This user is not associated with the selected Program.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                            </div>
+                            <div class="exel-view-column">{{report?.assigneeType}}</div>
+                        </div>
+                    </div>
+                    <div class="exel-view-column">{{report?.keyResponsibility}}</div>
+                    <div class="exel-view-column multi-column" [class.five-column]="tabType === 'frequency' || tabType === 'onCompletion'" [class.three-column]="tabType === 'ongoing'">
+                        <ng-container *ngIf="tabType === 'frequency'">
+                            <div class="exel-view-row multi-column" [class.five-column]="true">
+                                <div class="exel-view-column" [class.error]="!report?.frequency">{{report?.frequency}}
+                                    <i *ngIf="!report?.frequency" class="icons" [appTooltip]="'Select a frequency for this responsibility.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                                </div>
+                                <div class="exel-view-column" [class.error]="!report?.validDate || report?.isPastDate">{{report?.day}}
+                                    <i *ngIf="!report?.validDate" class="icons" [appTooltip]="'Invalid Due Date.'"
+                                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                                    <i *ngIf="report?.isPastDate" class="icons" [appTooltip]="'This date occurs in the past. Select a future date.'"
+                                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                                </div>
+                                <div class="exel-view-column" [class.error]="!report?.validDate || report?.isPastDate">{{report?.month}}
+                                    <i *ngIf="!report?.validDate" class="icons" [appTooltip]="'Invalid Due Date.'"
+                                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                                    <i *ngIf="report?.isPastDate" class="icons" [appTooltip]="'This date occurs in the past. Select a future date.'"
+                                        placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                                </div>
+                                <div class="exel-view-column">{{report?.responsibilityWindow}}</div>
+                                <div class="exel-view-column">{{report?.failedAfter}}</div>
+                            </div>
+                        </ng-container>
+                        <ng-container *ngIf="tabType === 'ongoing'">
+                            <div class="exel-view-row multi-column" [class.three-column]="true">
+                                <div class="exel-view-column" [class.error]="!report?.frequency">{{report?.frequency}}
+                                    <i *ngIf="!report?.frequency" class="icons" [appTooltip]="'Select a frequency for this responsibility.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                                </div>
+                                <div class="exel-view-column">{{report?.setReminder}}</div>
+                                <div class="exel-view-column">{{report?.frequencyReminder}}</div>
+                            </div>
+                        </ng-container>
+                        <ng-container *ngIf="tabType === 'onCompletion'">
+                            <div class="exel-view-row multi-column" [class.five-column]="true">
+                                <div class="exel-view-column" [class.error]="!report?.frequency">{{report?.frequency}}
+                                    <i *ngIf="!report?.frequency" class="icons" [appTooltip]="'Select a frequency for this responsibility.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                                </div>
+                                <div class="exel-view-column" [class.error]="!report?.parentResponsibility">{{report?.parentResponsibility}}
+                                    <i *ngIf="!report?.parentResponsibility" class="icons" [appTooltip]="'Select a parent responsibility on whose completion this responsibility will become active.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;</i>
+                                </div>
+                                <div class="exel-view-column">{{report?.dueDate}}</div>
+                                <div class="exel-view-column">{{report?.responsibilityWindow}}</div>
+                                <div class="exel-view-column">{{report?.failedAfter}}</div>
+                            </div>
+                        </ng-container>
+                    </div>
+                    <div class="exel-view-column">{{report?.responsibilityCenter}}</div>
+                    <div class="exel-view-column">{{report?.reportClass}}</div>
+                    <div class="exel-view-column">{{report?.objective}}</div>
+                    <div class="exel-view-column">{{report?.notes}}</div>
+                    <div class="exel-view-column multi-column" [class.two-column]="true">
+                        <div class="exel-view-row multi-column" [class.two-column]="true">
+                            <div class="exel-view-column multi-column">
+                                <div class="exel-view-row multi-column">
+                                    <div class="exel-view-column" [class.small-column]="true">{{report?.isFormat}}</div>
+                                    <div class="exel-view-column">{{report?.formatForResponsibility}}</div>
+                                </div>
+                            </div>
+                            <div class="exel-view-column" [class.small-column]="true">{{report?.documentEvidenceRequired}}</div>
+                        </div>
+                    </div>
+                    <!-- <div class="exel-view-column">{{report?.assessments}}</div> -->
+                    <div class="exel-view-column multi-column" [class.three-column]="true">
+                        <div class="exel-view-row multi-column" [class.three-column]="true">
+                            <div class="exel-view-column" [class.error]="report?.reviewer && ((report?.reviewer === report?.overseer)
+                            || (report?.reviewer === report?.assignee) || !report?.userValidateWithProgram?.isValidReviewer )">{{report?.reviewer}}
+                        <i *ngIf="(report?.reviewer) && ((report?.reviewer === report?.overseer))"
+                            class="icons"
+                            [appTooltip]="'The Overseer cannot also be the Reviewer of this responsibility. Select another user as the Reviewer'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+    
+                        <i *ngIf="report?.reviewer && (report?.reviewer === report?.assignee)" class="icons"
+                            [appTooltip]="'The Assignee cannot also be the Reviewer of this responsibility. Select another user as the Reviewer.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+                        <!-- <i *ngIf="(report?.reviewer && report?.reviewer === report?.assignor)"
+                            class="icons"
+                            [appTooltip]="((report?.assignor)?'The Assignor cannot also be the Reviewer of this responsibility.':'You cannot be a Reviewer of this responsibility since you are the assignor. ') +'Select another user as the Reviewer'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i> -->
+                        <i *ngIf="report?.reviewer && !report?.userValidateWithProgram?.isValidReviewer"
+                            class="icons"
+                            [appTooltip]="'This user is not associated with the selected Program.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+                            </div>
+                            <div class="exel-view-column">{{report?.reviewToBeCompletedWithin}}</div>
+                            <div class="exel-view-column">{{report?.reviewWillBeFailedAfter}}</div>
+                        </div>
+                    </div>
+
+                    <div class="exel-view-column multi-column" [class.two-column]="true">
+                        <div class="exel-view-row multi-column" [class.two-column]="true">
+                            <div class="exel-view-column" [class.error]="report?.overseer && ((report?.reviewer === report?.overseer)
+                            || (report?.overseer === report?.assignee) || (report?.overseer === report?.assignor) || !report?.userValidateWithProgram?.isValidOverseer )">
+                            {{report?.overseer}}
+                                <i *ngIf="(report?.overseer) && ((report?.reviewer === report?.overseer))"
+                                class="icons"
+                                [appTooltip]="'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'"
+                                placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+
+                                <i *ngIf="report?.overseer && (report?.overseer === report?.assignee)" class="icons"
+                                    [appTooltip]="'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                                <i *ngIf="((report?.overseer && report?.assignor) && (report?.overseer == report?.assignor)) ||((report?.overseer && (!report?.assignor)) && (report?.overseer == defaultOwner))"
+                                    class="icons"
+                                    [appTooltip]="((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                                <i *ngIf="(report?.overseer) && !report?.userValidateWithProgram?.isValidOverseer"
+                                    class="icons"
+                                    [appTooltip]="'This user is not associated with the selected Program.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                            </div>
+                            <div class="exel-view-column" [class.error]="report?.notifyOnFailure && ((report?.reviewer === report?.notifyOnFailure)
+                            || (report?.notifyOnFailure === report?.assignee) || ((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner)) || !report?.userValidateWithProgram?.isValidNotifyOnFailure )">
+                                {{report?.notifyOnFailure}}
+                                <i *ngIf="(report?.notifyOnFailure) && ((report?.reviewer === report?.notifyOnFailure))"
+                                    class="icons"
+                                    [appTooltip]="'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+
+                                <i *ngIf="report?.notifyOnFailure && (report?.notifyOnFailure === report?.assignee)" class="icons"
+                                    [appTooltip]="'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                                <i *ngIf="((report?.notifyOnFailure && report?.assignor) && (report?.notifyOnFailure == report?.assignor)) ||((report?.notifyOnFailure && (!report?.assignor)) && (report?.notifyOnFailure == defaultOwner))"
+                                    class="icons"
+                                    [appTooltip]="((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                                <i *ngIf="(report?.notifyOnFailure) && !report?.userValidateWithProgram?.isValidNotifyOnFailure"
+                                    class="icons"
+                                    [appTooltip]="'This user is not associated with the selected Program.'"
+                                    placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                                </i>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- <div class="exel-view-column" [class.error]="(report?.overseer) && ((report?.overseer === report?.assignee) ||(report?.reviewer === report?.overseer) || (report?.overseer == report?.assignor) || (!report?.userValidateWithProgram?.isValidOverseer))">
+                        {{report?.overseer}}
+                        <i *ngIf="(report?.overseer) && ((report?.reviewer === report?.overseer))"
+                            class="icons"
+                            [appTooltip]="'The Reviewer cannot also be the Overseer of this responsibility. Select another user as the Overseer.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+
+                        <i *ngIf="report?.overseer && (report?.overseer === report?.assignee)" class="icons"
+                            [appTooltip]="'The Assignee cannot also be the Overseer of this responsibility. Select another user as the Overseer'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+                        <i *ngIf="((report?.overseer) && (report?.overseer == report?.assignor))"
+                            class="icons"
+                            [appTooltip]="((report?.assignor)?'The Assignor cannot also be the Overseer of this responsibility. ':'You cannot be an Overseer of this responsibility since you are the Assignor. ') +'Select another user as the Overseer.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+                        <i *ngIf="!report?.userValidateWithProgram?.isValidOverseer"
+                            class="icons"
+                            [appTooltip]="'Selected user is not a valid overseer for selected program.'"
+                            placement="bottom-right" type="white" delay="0" [tooltipMandatory]=true>&#xe932;
+                        </i>
+                    </div> -->
+                </div>
+    
+    
+    
+    
+    
+    
+                <!-- ------------------------------------------------old code dynamic------------------------------------------------- -->
+    
+                <!-- *ngFor="let report of responsibilityBulkUpload?.reports; let i = index" -->
+            </div>
+        </div>
+        <div class="bulk-view-option">
+            <button *ngIf="bulkUpload?.frequency?.reports?.length" [class.active]="tabType === 'frequency'" (click)="selectedTab.emit('frequency')">Frequency Responsibilities</button>
+            <button *ngIf="bulkUpload?.ongoing?.reports?.length" [class.active]="tabType === 'ongoing'" (click)="selectedTab.emit('ongoing')">Ongoing Responsibilities</button>
+            <button *ngIf="bulkUpload?.onCompletion?.reports?.length" [class.active]="tabType === 'onCompletion'" (click)="selectedTab.emit('onCompletion')">On Completion Responsibilities</button>
+        </div>
+        <div class="bulk-view-footer">
+            <!-- <div class="left">
+                <p>{{finalResponsibilities}} out of {{responsibilityBulkUpload?.reports?.length}} responsibilities will be
+                    uploaded.</p>
+            </div> -->
+            <div class="left">
+                <p>{{finalResponsibilities}} out of {{responsibilityMultiTabBulkUpload?.length}} {{responsibilityMultiTabBulkUpload?.length > 1 ? 'responsibilities' : 'responsibility'}} will be
+                    uploaded.</p>
+            </div>
+            <div class="right">
+                <button (click)="close()" id="bulk-resp-cancel">Cancel</button>
+                <button (click)="submit()" id="bulk-resp-confirm" [disabled]="!isConfirmClickable" class="blue">Confirm</button>
+                <!-- finalResponsibilities < 1 -->
+            </div>
+        </div>
+    </div>
+    <app-loader  *ngIf="loader"></app-loader>
+    
+</ng-container>
+    
+    <!-- --------------------------------------------------------------------upward is new one-------------------- -->