Skip to content

Instantly share code, notes, and snippets.

@ivanferrer

ivanferrer/gist:fe8a5ee0e3f9d0013285805b098787e8

Created December 3, 2024 20:56
Show Gist options
  • Save ivanferrer/fe8a5ee0e3f9d0013285805b098787e8 to your computer and use it in GitHub Desktop.
Save ivanferrer/fe8a5ee0e3f9d0013285805b098787e8 to your computer and use it in GitHub Desktop.
Download ZIP
teste
Raw
gistfile1.txt
<div class="appraisal-results-content mb-4" *ngIf="model && dataShow">
<div class="card mb-4 pt-4" *ngIf="model" [class.bt-none]="scatterChartData?.length > 0">
<div class="page-list-container">
<div class="row" *ngIf="(scatterChartData?.length > 0 && getMode() === 'SectionScoresNineBox')">
<div class="col">
<div class="d-flex area-toggle">
<div class="switch-ninebox">
<div style="width: 200px;">
<input class="checkbox" id="checkboxSwitch" type="checkbox" />
<label class="switch-label" for="checkboxSwitch"
*ngIf="scatterChartMode == 'matrix'">
<label class="off" for="checkboxSwitch"
(click)="$event.preventDefault(); changeArea('matrix');"
translate>ANALYSIS_RESULTS.MATRIX</label>
<label class="on" for="checkboxSwitch"
(click)="$event.preventDefault(); changeArea('graph');"
translate>ANALYSIS_RESULTS.GRAPH</label>
</label>
<label class="switch-label" for="checkboxSwitch"
*ngIf="scatterChartMode == 'graph'">
<label class="on" for="checkboxSwitch"
(click)="$event.preventDefault(); changeArea('matrix');"
translate>ANALYSIS_RESULTS.MATRIX</label>
<label class="off" for="checkboxSwitch"
(click)="$event.preventDefault(); changeArea('graph');"
translate>ANALYSIS_RESULTS.GRAPH</label>
</label>
</div>
</div>
<div class="tags-ninebox" *ngIf="showPhotos && !model.disableNineboxEdit && scatterChartMode !== 'graph'">
<a href="javascript:void(0)" (click)="attribTags()"><i
class="icon-tag mr-2"></i><span
translate>ANALYSIS_RESULTS.FORM_TAGS.ASSIGN_TAGS</span></a>
</div>
<div *ngIf="getMode() === 'SectionScoresNineBox'" class="hide-sucessor">
<label class="custom-control custom-checkbox">
<input class="custom-control-input" type="checkbox"
[checked]="hideSucessor == true" [(ngModel)]="hideSucessor">
<span class="custom-control-label"
translate>ANALYSIS_RESULTS.HIDE_SUCESSOR</span>
</label>
</div>
</div>
</div>
</div>
<ng-container *ngIf="showAttribTags && showPhotos && getMode() === 'SectionScoresNineBox' && scatterChartMode !== 'graph'">
<div class="container-grey pb-3">
<div class="attrib-tags-peoples mb-3">
<label class="form-label"
translate>ANALYSIS_RESULTS.FORM_TAGS.SELECTED_PEOPLE</label>
<div class="d-flex justify-content-between w-100">
<div class="w-100">
<tags-autocomplete #tagAutoCompletePeople
(submitTags)="groupTags.peoples = $event"
[placeholder]="placeholdersTags.selectedPeople" [multiple]="true"
[unique]="true" [data]="addedTags" (resetTags)="resetTags('peoples')"
[hasPhoto]="true" additionalClasses="peoples" [tags]="allParticipants">
</tags-autocomplete>
</div>
</div>
</div>
<div class="attrib-tags mb-4">
<label class="form-label" translate>ANALYSIS_RESULTS.FORM_TAGS.TAGS</label>
<div class="d-flex justify-content-between w-100">
<div class="w-100">
<tags-autocomplete #tagAutoCompleteTags
(submitTags)="groupTags.tags = $event;" (resetTags)="resetTags('tags')"
[placeholder]="placeholdersTags.assignTags" [unique]="true"
[hasPhoto]="false" [forceSelection]="false" [validateOptions]="true"
additionalClasses="tags" [tags]="savedTags">
</tags-autocomplete>
</div>
</div>
</div>
<div class="d-flex justify-content-end ml-auto">
<button class="btn btn--secondary"
(click)="closeAttribTags()">{{'COMMON.CANCEL'|translate}}</button>
<button class="ml-2 btn btn--primary"
[disabled]="groupTags.tags.length == 0 || groupTags.peoples.length == 0"
(click)="saveTags()">{{'COMMON.SAVE'|translate}}</button>
</div>
</div>
</ng-container>
<div class="card-body"
*ngIf="!isNineBoxOrScoreDistributionMode() && radarChartData?.length > 0 && radarChartLabels?.length > 0">
<div class="row">
<div class="col-lg-12" *ngIf="getType() == 'bar'">
<div style="display: block" *ngIf="radarChartData && radarChartData.length > 0">
<canvas id="graphCanvas" baseChart [datasets]="radarChartData"
[labels]="radarChartLabels" [colors]="barCharColors" [chartType]="'bar'"
[options]="barOptions">
</canvas>
</div>
</div>
<div class="col-lg-12" *ngIf="getType() == ''">
<div style="display: block" *ngIf="radarChartData && radarChartData.length > 0">
<canvas id="graphCanvas" baseChart [datasets]="radarChartData"
[labels]="radarChartLabels"
[chartType]="radarChartLabels.length > 2 ? 'radar' : 'bar'"
[colors]="barCharColors"
[options]="radarChartLabels.length > 2 ? radarOptions : barOptions">
</canvas>
</div>
</div>
</div>
</div>
<div class="card-body"
*ngIf="isScoreDistributionMode() && distributionScoresChartData?.length > 0 && distributionScoresChartLabels?.length > 0">
<div class="row">
<div class="col-lg-12">
<span class="d-block mb-3 distibution-total-participant">
{{ 'ANALYSIS_RESULTS.LABEL_DISTITBUTION_SCORES_TOTAL_PARTICIPANTS' | translate}}
{{ distributionScoresData.totalParticipants }}
</span>
<div style="display: block">
<canvas id="graphCanvas" baseChart [datasets]="distributionScoresChartData"
[labels]="distributionScoresChartLabels" [colors]="barCharColors"
[chartType]="'bar'" [options]="distributionChartOptions">
</canvas>
</div>
</div>
<div class="col-md-12 text-center mb-3">
<a href="#" (click)="$event.preventDefault(); openDistributionScoresConfiguration()"
class="nine-box-axis-label nav-link"><i class="fas fa-cog"></i>{{
getResultFinalNameTranslated(distributionScoresData.distributionResultName) }}
</a>
</div>
</div>
</div>
<div class="card-body"
*ngIf="scatterChartData?.length > 0 && getMode() === 'SectionScoresNineBox'">
<ng-container *ngIf="scatterChartMode === 'graph'">
<div class="row">
<div class="col-lg-12">
<div style="display: block"
*ngIf="scatterChartData && scatterChartData.length > 0">
<canvas id="scatterChartCanvas" baseChart #scatterChartCanvas="base-chart"
[legend]="showScatterLegend" [colors]="scatterChartColors"
[datasets]="scatterChartData" [options]="scatterOptions"
chartType="scatter">
</canvas>
</div>
</div>
<div class="col-lg-12">
<div *ngIf="!showScatterLegend && legendData">
<ul class="scatter-chart-legend">
<li *ngFor="let item of legendData; let i = index"
class="custom-legend-item">
<span class="custom-legend-title"
[ngClass]="{'removed-data-item' : scatterChartData[item.datasetIndex]?.hidden}"
(click)="hideOrShowDataScatterChart(item.datasetIndex)"
[ngStyle]="{'background-color': item.fillStyle, 'stroke': item.strokeStyle}">{{
item.text }}
</span>
</li>
</ul>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="scatterGrid && scatterChartMode === 'matrix'">
<div *ngIf="scoreCache && scoreCache.length > 0"
class="d-flex flex-column text-center mb-3">
<span class="changed-not-saved-msg mb-1"
translate>ANALYSIS_RESULTS.SCORES_NOT_SAVED_MSG</span>
<a href (click)="saveScoreOverridesAndClearSocoreInCache($event)"
translate>ANALYSIS_RESULTS.SAVE_CHANGED_SCORES</a>
</div>
<div class="row mt-2 mb-1">
<div class="col-1 y-axis">
<div class="rotate-title"><a class="nine-box-axis-label nav-link" href="#"
(click)="$event.preventDefault(); customizeRangesY()"><i
class="fas fa-cog"></i> {{
getResultFinalNameTranslated(model?.scatterYLabel) }}</a>
</div>
<div class="rotate-high scatter-scale">{{ getNineBoxRange('Y').highLabel == null
? ('ANALYSIS_RESULTS.LEVELS.HIGH' | translate) :
getNineBoxRange('Y').highLabel }}</div>
<div class="rotate-medium scatter-scale">{{ getNineBoxRange('Y').middleLabel ==
null ? ('ANALYSIS_RESULTS.LEVELS.MEDIUM' | translate) :
getNineBoxRange('Y').middleLabel }}</div>
<div class="rotate-low scatter-scale">{{ getNineBoxRange('Y').lowLabel == null ?
('ANALYSIS_RESULTS.LEVELS.LOW' | translate) : getNineBoxRange('Y').lowLabel
}}</div>
</div>
<div class="col-11" id="ninebox_groups">
<div class="row" *ngFor="let row of scatterGrid; let ridx = index ;">
<div class="col-4 nine-box-cell c-{{ridx}}-{{cidx}}"
[style.background]="corQuadrante(ridx*3+cidx)"
*ngFor="let col of row; let cidx = index">
<div class="nine-box-details"
[ngClass]="{'cursor-default': model.disableNineboxEdit}"
(click)="openNineBoxTitleModal(ridx*3+cidx)">
<ng-container>
<ng-container
*ngIf="nineboxLabels && nineboxLabels[ridx*3+cidx];else noNineBoxLabelTemplate">
<span container="body" class="nine-box__title"
[ngClass]="{'cursor-default': model.disableNineboxEdit}"
[ngbTooltip]="nineboxLabels[ridx*3+cidx]">
{{nineboxLabelsTruncated[ridx*3+cidx]}}
</span>
</ng-container>
<ng-template #noNineBoxLabelTemplate>
<button class="nine-box__title-button" type="button"
name="button">
<i *ngIf="!model.disableNineboxEdit"
class="fas fa-edit"></i>
</button>
</ng-template>
</ng-container>
<span class="nine-box__user-count">
<i class="fas fa-user"></i> {{ col.length }}
({{ pct(col.length, scatterCount) }})
</span>
</div>
<div *ngIf="getPermission().canNineboxCalibrate; else ninboxCardViewOnly"
class="nine-box-scrollable"
[style.background]="corQuadrante(ridx*3+cidx)" #nineboxItems
[dragula]="NINE_BOX_GROUP"
id="scroll_{{ridx*3+cidx}}_{{cidx}}_{{ridx}}" [attr.data-x]="cidx"
[attr.data-y]="ridx">
<ng-content
*ngTemplateOutlet="ninboxCardContent"
></ng-content>
</div>
<ng-template #ninboxCardViewOnly>
<div
class="nine-box-scrollable"
[style.background]="corQuadrante(ridx*3+cidx)" #nineboxItems
id="scroll_{{ridx*3+cidx}}_{{cidx}}_{{ridx}}" [attr.data-x]="cidx"
[attr.data-y]="ridx">
<ng-content
*ngTemplateOutlet="ninboxCardContent"
></ng-content>
</div>
</ng-template>
<ng-template #ninboxCardContent>
<span id="{{p.id}}" enterTheViewportNotifier
(visibilityChange)="updateShowProfilePhotos($event, p.id)"
[elementId]="p.id" [observer]="showPhotoObserver"
[eventChange]="photoVisibilityChange" notDisconnect="true"
class="nine-box-item" [class.modified]="wasModified(p)"
[class.invert]="wasChangedNotSaved(p)"
*ngFor="let p of col; let idx = index"
[ngbTooltip]="nineBoxTooltip" tooltipClass="tooltip-ninebox"
[attr.data-id]="p.id" container="body"
(click)="showRightModal(p); ">
<div class="d-flex flex-column ">
<div class="d-flex align-items-center">
<span class="mask-photo-container">
<ng-container *ngIf="showPhotoCheck[p.id]">
<span
*ngIf="((getPhotoUrl(getPartipantEmailById(p.id)) | async) != 'color-model' && (getPhotoUrl(getPartipantEmailById(p.id)) | async) != '/assets/img/participant.jpg'); else colorModel"
class="mask-photo"
[ngStyle]="{'background': 'url(' + (getPhotoUrl(getPartipantEmailById(p.id)) | async) + ') no-repeat center center', 'background-size': 'contain' }">
</span>
<ng-template #colorModel>
<span class="top-image">
<color-photo [name]="p.label"
[notLoadPhoto]="true"
[size]="'small'" [isShadow]="false"
[addTooltip]="false">
</color-photo>
</span>
</ng-template>
</ng-container>
<i class="icon-status is-inative-icon"
*ngIf="p.isInactiveUser">
</i>
</span>
<div class="d-flex flex-column justify-content-start">
<span class="pl-3 name-label">{{ p.label }}</span>
<div class="tags-info"
*ngIf="(p?.tags && p?.tags.length) || (p.successionInfo && !hideSucessor &&(p.successionInfo.successorToCount || p.successionInfo.succeededByCount)) || p.hasNineBoxComment">
<div class="total-tags" *ngIf="p?.tags"><i
class="icon-tag mr-2"></i>
{{p?.tags?.length || '0'}}</div>
<ng-container
*ngIf="p.successionInfo && !hideSucessor">
<div class="total-up"
*ngIf="p.successionInfo.successorToCount">
<i
class="fas fa-arrow-alt-circle-up mr-2"></i>
{{p.successionInfo.successorToCount ||
'0'}}</div>
<div class="total-down"
*ngIf="p.successionInfo.succeededByCount">
<i
class="fas fa-arrow-alt-circle-down mr-2"></i>
{{p.successionInfo.succeededByCount ||
'0'}}</div>
</ng-container>
<div class="total-comment"
*ngIf="p.hasNineBoxComment"><i
class="fas fa-comment-dots mr-1 ml-1"></i>
</div>
</div>
</div>
</div>
</div>
<ng-template #nineBoxTooltip>
<div class="d-flex flex-column">
<span class="text-left d-flex align-items-center pb-2">
<i class="icon-user mr-2"
[class.user-active]="!p.isInactiveUser"
[class.user-inactive]="p.isInactiveUser"></i>
<span class="name-change">{{ p.label }}</span>
{{ p.additionalInfo ? ' (' + p.additionalInfo + ')'
: '' }}</span>
<span class="text-left"><span class="purple-light">{{
getResultFinalNameTranslated(model.scatterXLabel)
}}:</span>
{{ formatNumber(p.data[0].sectionSectionOrFinalScoreX, p.data[0].decimalPlaces, p.data[0].sectionSectionOrFinalScoreX_Pct) }}</span>
<span class="text-left"><span class="purple-light">{{
getResultFinalNameTranslated(model.scatterYLabel)
}}:</span>
{{ formatNumber(p.data[0].sectionSectionOrFinalScoreY, p.data[0].decimalPlaces, p.data[0].sectionSectionOrFinalScoreY_Pct) }}</span>
<ng-container *ngIf="p.successionInfo && !hideSucessor">
<span class="text-left">
<ng-container
*ngIf="p.successionInfo.successorTo">
<div class="d-flex flex-column">
<div class="pb-1 mt-2">
<span
class="text-right succession-count mr-1">
<i style=" color: #B49DFA;"
class="fas fa-arrow-alt-circle-up"></i>
</span>
<span class="purple-light">
<span class="mr-1" translate>
ANALYSIS_RESULTS.SCATTER_LABEL.SUCCESSOR_TO
</span>
</span>
</div>
<span>{{ p.successionInfo.successorTo
}}</span>
</div>
</ng-container>
</span>
<span class="text-left">
<ng-container
*ngIf="p.successionInfo.succeededBy">
<div class="d-flex flex-column">
<div class="pb-1 mt-2">
<span
class="text-right succession-count mr-1">
<i style=" color: #B49DFA;"
class="fas fa-arrow-alt-circle-down"></i>
</span>
<span class="purple-light">
<span class="mr-1"
translate>ANALYSIS_RESULTS.SCATTER_LABEL.SUCCEEDED_BY
</span>
</span>
</div>
<span>{{ p.successionInfo.succeededBy
}}</span>
</div>
</ng-container>
</span>
</ng-container>
<ng-container *ngIf="p.tags && p.tags.length > 0">
<span
class="text-left d-flex flex-column mt-1 mb-2">
<span class="tag-title pb-1"
translate>ANALYSIS_RESULTS.FORM_TAGS.TAGS</span>
<div class="d-flex tag-box">
<span *ngFor="let tag of p?.tags"
class="text-tag">
{{tag}}
</span>
</div>
</span>
</ng-container>
</div>
</ng-template>
</span>
</ng-template>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-1 y-axis"></div>
<div class="col-11 text-center">
<div class="row mb-1">
<div class="col-4 text-center scatter-scale">{{
getNineBoxRange('X').lowLabel == null ? ('ANALYSIS_RESULTS.LEVELS.LOW' |
translate) : getNineBoxRange('X').lowLabel }}
</div>
<div class="col-4 text-center scatter-scale">
{{ getNineBoxRange('X').middleLabel == null ?
('ANALYSIS_RESULTS.LEVELS.MEDIUM' | translate) :
getNineBoxRange('X').middleLabel }}
</div>
<div class="col-4 text-center scatter-scale">
{{ getNineBoxRange('X').highLabel == null ?
('ANALYSIS_RESULTS.LEVELS.HIGH' | translate) :
getNineBoxRange('X').highLabel }}
</div>
</div>
<div class="row">
<div class="col">
<a href="#" (click)="$event.preventDefault(); customizeRangesX()"
class="nine-box-axis-label nav-link base">
<i class="fas fa-cog"></i>
{{ getResultFinalNameTranslated(model?.scatterXLabel) }}
</a>
</div>
</div>
</div>
</div>
</ng-container>
</div>
<div class="card-body" *ngIf="model?.resultsWereLimited && modeFilter == 'bar' ">
<div class="col-lg-12 mt-2" *ngIf="filtered == 'participant'">
<div class="alert alert-info" translate="ANALYSIS_RESULTS.RESULTS_LIMITED"></div>
</div>
<div class="col-lg-12 mt-2" *ngIf="filtered == 'level'">
<div class="alert alert-info" translate="ANALYSIS_RESULTS.RESULTS_LIMITED_LEVEL"></div>
</div>
<div class="col-lg-12 mt-2" *ngIf="filtered == 'department'">
<div class="alert alert-info" translate="ANALYSIS_RESULTS.RESULTS_LIMITED_DEPARTMENT">
</div>
</div>
<div class="col-lg-12 mt-2" *ngIf="filtered == 'jobTitle'">
<div class="alert alert-info" translate="ANALYSIS_RESULTS.RESULTS_LIMITED_JOBTITLE">
</div>
</div>
</div>
<div class="card-body" *ngIf="model?.resultsWereLimited && modeFilter == 'radar' ">
<div class="col-lg-12 mt-2" *ngIf="filtered == 'participant'">
<div class="alert alert-info" translate="ANALYSIS_RESULTS.RESULTS_LIMITED_RADAR"></div>
</div>
<div class="col-lg-12 mt-2" *ngIf="filtered == 'level'">
<div class="alert alert-info" translate="ANALYSIS_RESULTS.RESULTS_LIMITED_LEVEL_RADAR">
</div>
</div>
<div class="col-lg-12 mt-2" *ngIf="filtered == 'department'">
<div class="alert alert-info"
translate="ANALYSIS_RESULTS.RESULTS_LIMITED_DEPARTMENT_RADAR">
</div>
</div>
<div class="col-lg-12 mt-2" *ngIf="filtered == 'jobTitle'">
<div class="alert alert-info"
translate="ANALYSIS_RESULTS.RESULTS_LIMITED_JOBTITLE_RADAR"></div>
</div>
</div>
<div class="row"
*ngIf="getMode() === 'SectionScoresNineBox' && scatterChartMode == 'matrix'">
<div class="legend-scatter mb-4">
<div class="d-flex justify-content-center align-items-center w-100 gap-50">
<div class="d-flex align-items-center">
<span class="legend-text strong-text" translate>ANALYSIS_RESULTS.LEGEND</span>
</div>
<div class="d-flex align-items-center leg-red">
<i class="calibred-icon mr-2"></i>
<span class="legend-text" translate>ANALYSIS_RESULTS.TEXT_8</span>
</div>
<div class="d-flex align-items-center leg-yellow">
<i class="fas fa-comment-dots mr-2"></i>
<span class="legend-text"
translate>ANALYSIS_RESULTS.NINE_BOX_COMMENT_LEGEND</span>
</div>
<div class="d-flex align-items-center leg-purple">
<i class="fas fa-arrow-alt-circle-up mr-2"></i>
<span class="legend-text" translate>ANALYSIS_RESULTS.TEXT_6</span>
</div>
<div class="d-flex align-items-center leg-purple">
<i class="fas fa-arrow-alt-circle-down mr-2"></i>
<span class="legend-text" translate>ANALYSIS_RESULTS.TEXT_7</span>
</div>
<div class="d-flex align-items-center leg-red">
<i class="text-danger-legend mr-2"></i>
<span class="legend-text" translate>ANALYSIS_RESULTS.LEGENT_INACTIVE</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card" *ngIf="!isScoreDistributionMode()">
<div class="select-columns mr-3 ml-3">
<div class="d-flex " [formGroup]="tableColumnForm">
<div class="d-flex mr-3 mb-3 mt-3" *ngIf="form.get('mode').value === 'SectionScoresNineBox' && model.page?.content?.length > 0
&& scatterChartData?.length > 0">
<div class="btn-group mr-3">
<button class="btn btn--secondary no-shadow mb-0"
(click)="exportDataExcelNineBox()">
<i class="fas fa-download mr-1"></i>
<span translate="ANALYSIS_RESULTS.EXPORT_DATA"></span>
</button>
<div class="btn-group" ngbDropdown placement="bottom-right" role="group"
aria-label="Button group with nested dropdown">
<button ngbDropdownToggle
class="btn dropdown-toggle-split btn--secondary no-shadow"></button>
<div class="dropdown-menu
dropdown-menu-right" ngbDropdownMenu>
<button class="dropdown-item" (click)="exportUserSuccession()">
<i class="fas fa-download mr-1"></i>
<span translate="ANALYSIS_RESULTS.EXPORT_SUCCESSION_DATA"></span>
</button>
</div>
</div>
</div>
<ss-multiselect-dropdown class="ml-2" [options]="showHideColumns?.options"
[settings]="multiSelectOptionsShowHideOptions" formControlName="columns"
(ngModelChange)="onItemSelect($event)" (onSelect)="onItemSelect($event)"
(onSelectAll)="onItemSelect($event)" [texts]="multiSelectTexts.showHideColumns"
(keypress)="searchFilter($event);">
</ss-multiselect-dropdown>
</div>
<div class="d-flex mr-3 mb-3 mt-3" *ngIf="form.get('mode').value === 'SectionScoresNineBox' && model.page?.content?.length > 0
&& scatterChartData?.length < 1">
<div class="btn-group mr-3">
<button class="btn btn--secondary no-shadow mb-0"
(click)="exportDataExcelNineBox()">
<i class="fas fa-download mr-1"></i>
<span translate="ANALYSIS_RESULTS.EXPORT_DATA"></span>
</button>
<div class="btn-group" ngbDropdown placement="bottom-right" role="group"
aria-label="Button group with nested dropdown">
<button ngbDropdownToggle
class="btn dropdown-toggle-split btn--secondary no-shadow"></button>
<div class="dropdown-menu
dropdown-menu-right" ngbDropdownMenu>
<button class="dropdown-item" (click)="exportUserSuccession()">
<i class="fas fa-download mr-1"></i>
<span translate="ANALYSIS_RESULTS.EXPORT_SUCCESSION_DATA"></span>
</button>
</div>
</div>
</div>
<ss-multiselect-dropdown class="ml-2" [options]="showHideColumns?.options"
[settings]="multiSelectOptionsShowHideOptions" formControlName="columns"
(ngModelChange)="onItemSelect($event)" (onSelect)="onItemSelect($event)"
(onSelectAll)="onItemSelect($event)" [texts]="multiSelectTexts.showHideColumns"
(keypress)="searchFilter($event);">
</ss-multiselect-dropdown>
</div>
<div class="d-flex mr-3 mb-3 mt-3"
*ngIf="!isNineBoxOrScoreDistributionMode() && model.page?.content?.length > 0">
<div class="btn-group mr-3">
<button class="btn btn--secondary no-shadow mb-0" (click)="exportDataExcel()">
<i class="fas fa-download mr-1"></i>
<b><span translate="ANALYSIS_RESULTS.EXPORT_DATA"></span></b>
</button>
<div class="btn-group" ngbDropdown placement="bottom-right" role="group"
aria-label="Button group with nested dropdown">
<button ngbDropdownToggle
class="btn dropdown-toggle-split btn--secondary no-shadow"></button>
<div class="dropdown-menu
dropdown-menu-right" ngbDropdownMenu>
<button class="dropdown-item" (click)="exportUserSuccession()">
<i class="fas fa-download mr-1"></i>
<span translate="ANALYSIS_RESULTS.EXPORT_SUCCESSION_DATA"></span>
</button>
</div>
</div>
</div>
<ss-multiselect-dropdown class="ml-2" [options]="showHideColumns?.options"
(ngModelChange)="onItemSelect($event)" [(ngModel)]="showHideColumns.optionModel"
(onSelect)="onItemSelect($event)" (onSelectAll)="onItemSelect($event)"
[settings]="multiSelectOptionsShowHideOptions" formControlName="columns"
[texts]="multiSelectTexts.showHideColumns" (keypress)="searchFilter($event);">
</ss-multiselect-dropdown>
</div>
</div>
</div>
<div class="table-wrapper table-responsive table-appraisal-results"
*ngIf="model.page?.content?.length > 0; else noData">
<scroll-content contentName="table.table-results.analytics">
<table class="table table-hover mb-0 table-results analytics"
[ngClass]="{'custom-control-label-safari': platform.SAFARI}">
<thead>
<tr>
<th *ngIf="showColumnValue(1)"
[attr.class]="'fixed-column sortable ' + getTableHeaderClass('jobTitle')
"
[ngClass]="{'active-scroll': showColumnValue(1) && isFixedColumn}"
(click)="sort('appraisalName')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.APPRAISALNAME_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(2)"
[attr.class]="'fixed-column sortable ' + getTableHeaderClass('participantName')"
[ngClass]="{'active-scroll': !showColumnValue(1) && showColumnValue(2) && isFixedColumn}"
(click)="sort('participantName')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.PARTICIPANT_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(3)">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.MANAGERS_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(4)"
[attr.class]="'sortable ' + getTableHeaderClass('department')"
(click)="sort('department')">
{{ personCustomFieldWrapper['department'] | customFieldsTranslate:'ANALYSIS_RESULTS.COLUMN_HEADERS.DEPARTMENT_HEADER' }}
</th>
<th *ngIf="showColumnValue(5)"
[attr.class]="'sortable ' + getTableHeaderClass('jobTitle')"
(click)="sort('jobTitle')">
{{ personCustomFieldWrapper['jobTitle'] | customFieldsTranslate:'ANALYSIS_RESULTS.COLUMN_HEADERS.ROLE_HEADER' }}
</th>
<th *ngIf="showColumnValue(6)"
[attr.class]="'sortable ' + getTableHeaderClass('level')"
(click)="sort('level')">
{{ personCustomFieldWrapper['level'] |
customFieldsTranslate:'ANALYSIS_RESULTS.COLUMN_HEADERS.LEVEL_HEADER' }}
</th>
<ng-container *ngFor="let customNumber of [1, 2, 3, 4, 5 ,6]">
<th *ngIf="showColumnValue(customNumber + 6)"
[attr.class]="'sortable ' + getTableHeaderClass('custom' + customNumber)"
(click)="sort('custom' + customNumber)">
{{ personCustomFieldWrapper['custom' + customNumber] |
customFieldsTranslate:'PEOPLE.CUSTOM.CUSTOM'+ customNumber
+'_FIELD_NAME' }}
</th>
</ng-container>
<ng-container *ngIf="showColunsNotInAppraisal[organizationId]">
<ng-container
*ngFor="let customNumber of showColunsNotInAppraisal[organizationId].customNumber; let index=index">
<th *ngIf="showColumnValue(12 + (index + 1))"
[attr.class]="'sortable ' + getTableHeaderClass('custom' + customNumber)"
(click)="sort('custom' + customNumber)">
{{ personCustomFieldWrapper['custom' + customNumber] |
customFieldsTranslate:'PEOPLE.CUSTOM.CUSTOM'+ customNumber
+'_FIELD_NAME' }}
</th>
</ng-container>
</ng-container>
<ng-container *ngFor="let customNumber of [1, 2, 3, 4]">
<th *ngIf="showColumnValue(customNumber + 14)"
[attr.class]="'sortable ' + getTableHeaderClass('customDate' + customNumber)"
(click)="sort('customDate' + customNumber)">
{{ personCustomFieldWrapper['customDate' + customNumber] |
customFieldsTranslate:'PEOPLE.CUSTOM.CUSTOM_DATE'+ customNumber
+'_FIELD_NAME' }}
</th>
</ng-container>
<th *ngIf="showColumnValue(19)"
[attr.class]="'sortable ' + getTableHeaderClass('sectionName')"
(click)="sort('sectionName')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.SECTION_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(20)"
[attr.class]="'sortable ' + getTableHeaderClass('competencyName')"
(click)="sort('competencyName')">
{{ 'ANALYSIS_RESULTS.COLUMN_HEADERS.' + (form.get('mode').value !==
'GoalOkrScores' ? 'COMPETENCY_HEADER' : 'GOAL_AND_OKR_HEADER') | translate}}
</th>
<th *ngIf="showColumnValue(21)"
[attr.class]="'sortable ' + getTableHeaderClass('competencyAttributeName')"
(click)="sort('competencyAttributeName')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.COMPETENCY_ATTRIBUTE_HEADER' |
translate}}
</th>
<th *ngIf="showColumnValue(22)"
[attr.class]="'sortable ' + getTableHeaderClass('selfScore')"
(click)="sort('selfScore')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.SELF_SCORE_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(23)"
[attr.class]="'sortable ' + getTableHeaderClass('managerScore')"
(click)="sort('managerScore')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.MANAGER_SCORE_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(24)"
[attr.class]="'sortable ' + getTableHeaderClass('reporteeScore')"
(click)="sort('reporteeScore')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.REPORTEE_SCORE_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(25)"
[attr.class]="'sortable ' + getTableHeaderClass('peerScore')"
(click)="sort('peerScore')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.PEER_SCORE_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(26)"
[attr.class]="'sortable ' + getTableHeaderClass('clientScore')"
(click)="sort('clientScore')">
{{
evaluationTypeCustomLabelService.customLabelAsParameter('ANALYSIS_RESULTS.COLUMN_HEADERS.CUSTOM_SCORE_HEADER',
'customLabel', getEvaluationTypesCustomLabel(), 'ClientEvaluations', false)
}}
</th>
<th *ngIf="showColumnValue(27)"
[attr.class]="'sortable ' + getTableHeaderClass('score')"
(click)="sort('score')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.SCORE_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(28)"
[attr.class]="'sortable ' + getTableHeaderClass('score')"
(click)="sort('score')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.APPRAISAL_FINAL_SCORE_HEADER' |
translate}}
</th>
<th *ngIf="showColumnValue(29)"
[attr.class]="'sortable ' + getTableHeaderClass('score')"
(click)="sort('score')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.FINAL_SCORE_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(30)"
[attr.class]="'sortable ' + getTableHeaderClass('status')"
(click)="sort('status')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.STATUS_HEADER' | translate}}
</th>
<th *ngIf="showColumnValue(31)"
[attr.class]="'sortable ' + getTableHeaderClass('successionExistRisk')"
(click)="sort('successionExistRisk')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.SUCCESSION_EXIST_RISK_HEADER' |
translate}}
</th>
<th *ngIf="showColumnValue(32)"
[attr.class]="'sortable ' + getTableHeaderClass('successionExistImpact')"
(click)="sort('successionExistImpact')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.SUCCESSION_EXIST_IMPACT_HEADER' |
translate}}
</th>
<th [className]="'text-center ' + 'sortable ' + getTableHeaderClass('isSuccessor')"
*ngIf="showColumnValue(33)" (click)="sort('isSuccessor')">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.SUCCESSION_IS_SUCCESSOR_HEADER' |
translate}}
</th>
<th *ngIf="showColumnValue(34)">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.SUCCESSION_SUCCESSOR_TO_HEADER' |
translate}}
</th>
<th *ngIf="showColumnValue(35)">
{{'ANALYSIS_RESULTS.COLUMN_HEADERS.SUCCESSION_SUCCEEDED_BY_HEADER' |
translate}}
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of model.page.content">
<td *ngIf="showColumnValue(1)"
[ngClass]="{
'active-scroll': showColumnValue(1) && isFixedColumn
}"
class="fixed-column">{{item.appraisalName}}</td>
<td *ngIf="showColumnValue(2)"
[ngClass]="{
'active-scroll': !showColumnValue(1) && showColumnValue(2) && isFixedColumn
}"
class="fixed-column">
<a href="#" (click)="showReport(item.participantId, $event)">
{{ item.participantName }}
</a>
</td>
<td *ngIf="showColumnValue(3)"> {{ item.managerNames }}</td>
<td *ngIf="showColumnValue(4)">{{item.department}}</td>
<td *ngIf="showColumnValue(5)">{{item.jobTitle}}</td>
<td *ngIf="showColumnValue(6)">{{item.level}}</td>
<ng-container *ngFor="let customNumber of [1, 2, 3, 4, 5 ,6]">
<td *ngIf="showColumnValue(customNumber + 6)">{{ item['custom' +
customNumber] }}
</td>
</ng-container>
<ng-container *ngIf="showColunsNotInAppraisal[organizationId]">
<ng-container
*ngFor="let customNumber of showColunsNotInAppraisal[organizationId].customNumber; let index = index">
<td *ngIf="showColumnValue(12 + (index + 1))">{{ item['custom' +
customNumber] }}
</td>
</ng-container>
</ng-container>
<ng-container *ngFor="let customNumber of [1, 2, 3, 4]">
<td *ngIf="showColumnValue(customNumber + 14)">
{{ item['customDate' + customNumber] | date:'dd/MM/y' }}</td>
</ng-container>
<td *ngIf="showColumnValue(19)">{{item.sectionName}}</td>
<td *ngIf="showColumnValue(20)">{{item.competencyName}}</td>
<td *ngIf="showColumnValue(21)">{{ item.competencyAttributeName }}</td>
<td *ngIf="showColumnValue(22)">{{ formatNumber(item.selfScore,
item.decimalPlaces) }}</td>
<td *ngIf="showColumnValue(23)">{{ formatNumber(item.managerScore,
item.decimalPlaces) }}</td>
<td *ngIf="showColumnValue(24)">{{ formatNumber(item.reporteeScore,
item.decimalPlaces) }}</td>
<td *ngIf="showColumnValue(25)">{{ formatNumber(item.peerScore,
item.decimalPlaces) }}</td>
<td *ngIf="showColumnValue(26)">{{ formatNumber(item.clientScore,
item.decimalPlaces) }}</td>
<td *ngIf="showColumnValue(27)">{{ formatNumber(item.score, item.decimalPlaces)
}}</td>
<td *ngIf="showColumnValue(28)">
{{ formatNumber(item.originalFinalScore, item.decimalPlaces) }}</td>
<td *ngIf="showColumnValue(29)">{{ formatNumber(item.score, item.decimalPlaces)
}}</td>
<td *ngIf="showColumnValue(30)">{{ getStatus(item.status)}}</td>
<td *ngIf="showColumnValue(31)">
<ng-container *ngIf="item.successionExistRisk">
{{ 'SUCCESSION.SELECT_LIST_VALUES.EXIST_RISK.' +
item.successionExistRisk | translate}}
</ng-container>
</td>
<td *ngIf="showColumnValue(32)">
<ng-container *ngIf="item.successionExistImpact">
{{ 'SUCCESSION.SELECT_LIST_VALUES.EXIST_IMPACT.' +
item.successionExistImpact | translate}}
</ng-container>
</td>
<td class="text-center" *ngIf="showColumnValue(33)">
<ng-container *ngIf="item.isSuccessor"><i
class="fas fa-check text-success"></i>
</ng-container>
</td>
<td *ngIf="showColumnValue(34)">{{item.successorPersonsNames }}</td>
<td *ngIf="showColumnValue(35)">{{item.succeededPersonsNames}}</td>
</tr>
</tbody>
</table>
</scroll-content>
<div class="card-footer d-flex align-items-center justify-content-end table-footer"
*ngIf="model.page?.content?.length > 0">
<ngb-pagination [maxSize]="7" [pageSize]="model.page.size"
[collectionSize]="model.page.totalElements" (pageChange)="onPageChanged($event - 1)"
[page]="model.page.number + 1" [boundaryLinks]="true">
</ngb-pagination>
</div>
</div>
</div>
<ng-template #noData>
<div class="card">
<div class="card-body text-center temp">
<ng-container *ngIf="errorMessage">
{{ errorMessage }}
</ng-container>
<ng-container *ngIf="!errorMessage">
{{'ANALYSIS_RESULTS.MSG_NO_RESULTS' | translate}}
</ng-container>
</div>
</div>
</ng-template>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment