vcomply-workflow-engine 2.0.4 → 2.0.167

package/projects/vx-workflow-engine/src/lib/sharedComponents/program-listing/program-listing.component.html

@@ -0,0 +1,259 @@
+<div class="program-listing" [class.animate]="animation" *ngIf="!showCategories && !hideProgramsList">
+    <div class="program-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4">
+        <div class="vx-fs-14 vx-fw-500 vx-label-txt">Select a Program</div>
+    </div>
+    <div class="program-listing-body">
+        <div class="filter-card-row">
+            <div class="filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100" [class.active]="activeTab == 'regulations'" (click)="changeTab('regulations')">
+                <div class="left">
+                    <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">REGULATIONS</label>
+                    <p *ngIf="programData?.SelectedRegulationProgramsCount> 0">
+                        {{programData?.SelectedRegulationProgramsCount}}
+                        {{(programData?.SelectedRegulationProgramsCount==1)?'Program':'Programs'}} selected
+                    </p>
+                </div>
+                <!-- <span class="counter">{{programData?.AllRegulationProgramsCount}}</span> -->
+                <span class="counter">{{programTabDataCount?.allRegulationProgramsCount}}</span>
+            </div>
+            <div class="filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100" [class.active]="activeTab == 'standards'" (click)="changeTab('standards')">
+                <div class="left">
+                    <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">STANDARDS</label>
+                    <p *ngIf="programData?.SelectedStandardProgramsCount> 0">
+                        {{programData?.SelectedStandardProgramsCount}}
+                        {{(programData?.SelectedStandardProgramsCount==1)?'Program':'Programs'}} selected
+                    </p>
+                </div>
+                <!-- <span class="counter">{{programData?.AllStandardProgramsCount}}</span> -->
+                <span class="counter">{{programTabDataCount?.allStandardProgramsCount}}</span>
+            </div>
+            <div class="filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100" [class.active]="activeTab == 'internal_controls'"
+                (click)="changeTab('internal_controls')">
+                <div class="left">
+                    <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">INTERNAL CONTROLS</label>
+                    <p *ngIf="programData?.SelectedInternalControlsProgramsCount> 0">
+                        {{programData?.SelectedInternalControlsProgramsCount}}
+                        {{(programData?.SelectedInternalControlsProgramsCount==1)?'Program':'Programs'}} selected
+                    </p>
+                </div>
+                <!-- <span class="counter">{{programData?.AllInternalControlsProgramsCount}}</span> -->
+                <span class="counter">{{programTabDataCount?.allInternalControlsProgramsCount}}</span>
+            </div>
+            <div class="filter-card vx-bg-white vx-d-flex vx-justify-between vx-align-center vx-pt-2 vx-pb-2 vx-pl-3 vx-pr-3 vx-w-100" [class.active]="activeTab == 'others'" (click)="changeTab('others')">
+                <div class="left">
+                    <label class="vx-paragraph-txt vx-fw-500 vx-tt-uppercase vx-d-flex vx-justify-between vx-align-center">OTHERS</label>
+                    <p *ngIf="programData?.SelectedOthersProgramsCount> 0">
+                        {{programData?.SelectedOthersProgramsCount}}
+                        {{(programData?.SelectedOthersProgramsCount==1)?'Program':'Programs'}} selected
+                    </p>
+                </div>
+                <!-- <span class="counter">{{programData?.AllOthersProgramsCount}}</span> -->
+                <span class="counter">{{programTabDataCount?.allOthersProgramsCount}}</span>
+            </div>
+        </div>
+        <div class="search-block">
+            <i class="icons">&#xe90b;</i>
+            <input type="text" #searchProgram (keyup.enter)="handleSearch($event.target.value)"
+                placeholder="Search Programs" />
+        </div>
+        <!-- mode === 'EDIT' -->
+        <div *ngIf="mode === 'EDIT' && programData?.AllViewOnlyProgramCount" class="program-listing-tab vx-d-flex vx-align-center">
+            <button (click)="setProgramSubTab('PROGRAMS')" class="vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4" [class.active]="programSubTab === 'PROGRAMS'">PROGRAMS <span class="count vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4">{{programData?.AllProgramsCount}}</span></button>
+            <button (click)="setProgramSubTab('OTHER_PROGRAMS')" class="vx-fs-11 vx-fw-600 vx-paragraph-txt vx-tt-uppercase vx-p-0 vx-pb-2 vx-m-0 vx-d-flex vx-align-center vx-lh-4" [class.active]="programSubTab === 'OTHER_PROGRAMS'">OTHER PROGRAMS <span class="count vx-pl-1 vx-pr-1 vx-d-flex vx-align-center vx-justify-center vx-ml-2 vx-lh-4">{{programData?.AllViewOnlyProgramCount}}</span></button>
+        </div>
+        <app-pagination *ngIf="programData.totalPages > 1" [start]="programData.from" [end]="programData.to" [total]="programData.totalRecords" [pageCount]="programData.totalPages" [currentPage]="programData.currentPage" (selectedPage)="changePage($event,'program')"></app-pagination>
+        <div class="program-listing-part vx-mb-4" [class.with-category-list]="!showCategories && !hideProgramsList" [class.with-pagination]="programData.totalPages > 1">
+            <app-no-data *ngIf="programData?.data?.length===0 && !loader"
+                [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'"
+                [noDataText]="'No Data Found'"></app-no-data>
+
+            <div class="program-listing-item" [class.active]="showCategories && currentProgram?._id == program?._id" *ngFor="let program of programData.data;let i = index" [class.final-select]="false">
+                <!-- after category was select & user move to back and edit then final-select class was show -->
+                <!-- [class.disabled]="currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') && programSubTab !== 'OTHER_PROGRAMS'" -->
+                <div class="table-row main-list" [class.active]="selectedProgramsId?.includes(program?._id)" [class.disabled]="feature.isFeatureEnabled('ff_deprecate_primary_program_flag') ? false : (currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') && programSubTab !== 'OTHER_PROGRAMS')">
+                    <div class="table-column serial">
+                        <div class="sr-no" [appTooltip]="i+programData.from" placement="bottom" delay="0" type="black" [tooltipMandatory]="true">{{i+programData.from}}</div>
+                        <!-- [disabled]="currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM')" -->
+                        <app-cs-checkbox
+                            *ngIf="programSubTab !== 'OTHER_PROGRAMS'"
+                            [disabled]="feature.isFeatureEnabled('ff_deprecate_primary_program_flag') ? false : (currentProgram?._id === program?._id && (mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM'))"
+                            [ngValue]="selectedProgramsId?.includes(program?._id)"
+                            (ngValueChange)="selectProgram($event,program)"
+                        ></app-cs-checkbox>
+                        <!-- <app-cs-radio [name]="'t'" [checked]="currentProgram?._id == program?._id" (checkedEvent)="selectProgram($event.target.checked,program)"></app-cs-radio> -->
+                    </div>
+                    <div class="table-column name">
+                        <div class="name-inner">
+                            <div class="name-with-count">
+                                <div class="value" [appTooltip]="program?.item_name" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{program?.name}}</div>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="table-column primary-program" >
+                        <ng-container *ngIf="!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')">
+                            <app-cs-switch
+                                *ngIf="!(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') || currentProgram?._id === program?._id"
+                                [disabled]="currentProgram?._id === program?._id"
+                                [ngValue]='currentProgram?._id === program?._id' 
+                                (ngValueChange)="setPrimaryProgram($event, program)"
+                            >{{currentProgram?._id === program?._id ? 'PRIMARY PROGRAM' : 'SET AS PRIMARY PROGRAM'}}</app-cs-switch>
+                        </ng-container>
+                    </div>
+                    <!-- <div class="table-column action">
+                        <button class="arrow" *ngIf="program?.child_id?.length" [class.disabled]="false"
+                            [disabled]="false">
+                            <i *ngIf="!(showCategories && currentProgram?._id == program?._id)"
+                                (click)="selectProgram($event,program)" class="icons">&#xe970;</i>
+                            <i *ngIf="showCategories && currentProgram?._id == program?._id" class="icons">&#xe9e8;</i>
+                        </button>
+                    </div> -->
+                </div>
+
+            </div>
+        </div>
+
+        <app-floating-bar *ngIf="feature.isFeatureEnabled('ff_deprecate_primary_program_flag')" [selectedData]="(selectedProgramsDetail?.length) ? selectedProgramsDetail : []" [displayElementKey]="'name'"
+            [singularText]="'Program selected'" [pluralText]="'Programs selected'" (closeEvent)="openCategories()"
+            (deleteEvent)="deleteEvent($event)" [isDisabled]="((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true" (closeList)="close()" [elementId]="'category_id'">
+        </app-floating-bar>
+
+        <app-floating-bar *ngIf="!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')" [selectedData]="(selectedProgramsDetail?.length) ? selectedProgramsDetail : []" [displayElementKey]="'name'"
+            [singularText]="'Program selected'" [pluralText]="'Programs selected'" (closeEvent)="openCategories()"
+            (deleteEvent)="deleteEvent($event)" [isDisabled]="((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true" (closeList)="close()" [defaultSelected]="currentProgram" [nonRemovableUsersList]="(mode === 'EDIT' || openedFrom === 'PROGRAM_WORKROOM') ? viewOnlyProgramsCategoryId : [currentProgram?.category_id]" [elementId]="'category_id'">
+        </app-floating-bar>
+    </div>
+    <ng-container *ngIf="!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')">
+        <div class="program-listing-confirmation" *ngIf="displayConfirmationMessage">
+            <div class="confirmation-top">
+                <div class="icon-block"><i class="icons">&#xe930;</i></div>
+                <div class="text">Once you select this Program, all default values associated with this Program will also be updated.</div>
+            </div>
+            <div class="confirmation-bottom">
+                <div class="message">Are you sure you would like to proceed?</div>
+                <div class="button-group">
+                    <button class="no-btn" (click)="saveChanges(false)">NO</button>
+                    <button class="yes-btn" (click)="saveChanges(true)">YES</button>
+                </div>
+            </div>
+        </div>
+        <div class="program-listing-confirmation" *ngIf="isPrimaryConfirmation && !isPrimaryUnchecked">
+            <div class="confirmation-top">
+                <div class="icon-block"><i class="icons">&#xe930;</i></div>
+                <div class="text" [innerHTML]="primaryConfirmationMessage"></div>
+            </div>
+            <div class="confirmation-bottom">
+                <div class="message">Are you sure you would like to proceed?</div>
+                <div class="button-group">
+                    <button class="no-btn" (click)="updatePrimaryProgram(false)">NO</button>
+                    <button class="yes-btn" (click)="updatePrimaryProgram(true)">YES</button>
+                </div>
+            </div>
+        </div>
+
+        <div class="program-listing-confirmation error-confirmation" *ngIf="isPrimaryUnchecked">
+            <div class="confirmation-top">
+                <div class="vx-d-flex vx-align-center">
+                    <div class="icon-block"><i class="icons">&#xe930;</i></div>
+                    <div class="text vx-pr-4">You cannot deselect this Program since this is the <em>Primary Program</em> for this responsibility. To proceed, first select another Program as the <em>Primary Program</em>.</div>
+                </div>
+                <button class="ok-btn" (click)="updatePrimaryProgram(false)">OK</button>
+            </div>
+        </div>
+    </ng-container>
+    <!-- <app-floating-bar [selectedData]="(currentProgram?.category_id)?[currentProgram]:[]" [displayElementKey]="'name'"
+        [singularText]="'Program selected'" [pluralText]="'Programs selected'" (closeEvent)="openCategories()"
+        (deleteEvent)="deleteEvent($event)" [isDisabled]="((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true " (closeList)="close()">
+    </app-floating-bar> -->
+
+    <!-- ((currentProgram?.category_id)?[currentProgram]:[])?.length ? false :true  -->
+
+    <app-loader *ngIf="loader"></app-loader>
+</div>
+<div class="program-listing" [class.animate]="animation" *ngIf="showCategories || hideProgramsList">
+    <div class="program-listing-head vx-d-flex vx-align-center vx-justify-between vx-pl-4 vx-pr-4">
+        <div class="vx-fs-14 vx-fw-500 vx-label-txt">
+            <button class="back-btn vx-fs-16 vx-p-0 vx-mr-2" (click)="backToPrograms()"><i class="icons">&#xe91d;</i></button>
+            <!-- <span *ngIf="currentProgram?.name"> {{currentProgram?.name}} > </span> -->
+             Program  >  Select Program Categories
+        </div>
+    </div>
+    <div class="program-listing-body">
+        <div class="search-block">
+            <i class="icons">&#xe90b;</i>
+            <input type="text" #searchCategory (keyup.enter)="categorySearch($event.target.value)"
+                placeholder="Search Categories" />
+        </div>
+        <app-pagination *ngIf="categoryData.totalPages > 1" class="category-pagination" [start]="categoryData.from" [end]="categoryData.to" [total]="categoryData.totalRecords" [pageCount]="categoryData.totalPages" [currentPage]="categoryData.currentPage" (selectedPage)="changePage($event,'category')"></app-pagination>
+        <div class="program-listing-part vx-mb-4" [class.with-category-pagination]="categoryData.totalPages > 1">
+            <app-no-data *ngIf="categoryData?.data?.length===0 && !loader" [noDataImage]="'https://cdn.v-comply.com/libraries/workflow-engine/assets/workflow/search-data.svg'" [noDataText]="'No Data Found'"></app-no-data>
+
+            <ng-container *ngIf="!loader && categoryData.data?.length">
+                <ng-container *ngIf="false">
+                    <div class="selected-area" *ngIf="!loader && (currentProgram?.name ? categoryData.data?.length : programData?.data?.length)">
+                        <app-cs-checkbox *ngIf="checkCategoriesSelection()=='checked'" [ngValue]="true" (ngValueChange)="selectAllCategories(false)">Deselect All</app-cs-checkbox>
+                        <app-cs-checkbox-indeterminate *ngIf="checkCategoriesSelection()=='indeterminate'" [ngValue]="true" (ngValueChange)="selectAllCategories(false)">Deselect All</app-cs-checkbox-indeterminate>
+                        <app-cs-checkbox *ngIf="checkCategoriesSelection()=='unchecked'" [ngValue]="false" (ngValueChange)="selectAllCategories(true)">Select All</app-cs-checkbox>
+                    </div>
+                </ng-container>
+                <div class="table-head">
+                    <div class="table-row">
+                        <div class="table-column serial">#</div>
+                        <div class="table-column category-name">CATEGORIES</div>
+                        <div class="table-column category-within">WITHIN</div>
+                    </div>
+                </div>
+                <div class="program-listing-item" [class.active]="subList" *ngFor="let category of categoryData.data;let i = index" [class.active]="selectedIds.includes(category.category_id)">
+                    <div class="table-row main-list" [class.disabled]="false">
+                        <div class="table-column serial">
+                            <div class="sr-no" [appTooltip]="i + categoryData?.from" placement="bottom" delay="0" type="black"
+                                [tooltipMandatory]="true">{{i + categoryData?.from}}</div>
+                            <app-cs-checkbox [ngValue]="selectedIds.includes(category.category_id)"
+                                (ngValueChange)="selectCategory($event,category)"></app-cs-checkbox>
+                        </div>
+                        <div class="table-column category-name">
+                            <div class="name-inner">
+                                <div class="name-with-count">
+                                    <div class="value" [appTooltip]="category?.name" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{category?.name}}</div>
+                                </div>
+                                <!-- <div class="within-part" *ngIf="category?.parent_category_name?.length>0">
+                                    <span class="within-box">Within</span>
+                                    <span class="value" [appTooltip]="'South Africa > America > India'" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">
+                                        <span *ngFor="let parent of category?.parent_category_name;let j=index">{{(j!=(category?.parent_category_name?.length-1))?
+                                            parent+' < ':parent}} </span>
+                                    </span>
+                                </div> -->
+                            </div>
+                        </div>
+                        <div class="table-column category-within" *ngIf="category?.parent_category_name?.length > 0">
+                            <div *ngFor="let parent of category?.parent_category_name; let last = last" class="within-name" [appTooltip]="category?.parent_category_name?.slice()?.reverse()?.join(' > ')" placement="bottom-left" delay="0" type="black" [tooltipMandatory]="false">{{parent}} 
+                                <span *ngIf="!last"> >&nbsp;  </span>
+                            </div>
+                            <div *ngIf="category?.parent_category_ids?.includes(currentProgram?.category_id) && !feature.isFeatureEnabled('ff_deprecate_primary_program_flag')" class="primary-label">PRIMARY</div>
+                        </div>
+                    </div>
+                </div>
+            </ng-container>
+        </div>
+
+        <app-floating-bar [selectedData]="categoryData.selectedCategories" [displayElementKey]="'name'"
+        [singularText]="'Program Category selected'"
+        [pluralText]="'Program Categories selected'" (closeEvent)="save()"
+        (deleteEvent)="removeCategories($event)" (closeList)="backToPrograms()">
+        </app-floating-bar>
+    </div>
+    <ng-container *ngIf="!feature.isFeatureEnabled('ff_deprecate_primary_program_flag')">
+        <div class="program-listing-confirmation" *ngIf="displayConfirmationMessage">
+            <div class="confirmation-top">
+                <div class="icon-block"><i class="icons">&#xe930;</i></div>
+                <div class="text">Once you select this Program, all default values associated with this Program will also be updated.</div>
+            </div>
+            <div class="confirmation-bottom">
+                <div class="message">Are you sure you would like to proceed?</div>
+                <div class="button-group">
+                    <button class="no-btn" (click)="saveChanges(false)">NO</button>
+                    <button class="yes-btn" (click)="saveChanges(true)">YES</button>
+                </div>
+            </div>
+        </div>
+    </ng-container>
+    <app-loader *ngIf="loader"></app-loader>
+ </div>