MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[develop | DONE | ADDED] topics/indicators: add condition to hide all "edit" actions when stakeholder is NOT a copy

This commit is contained in:
Alex Martzios 2024-04-12 13:57:56 +03:00
parent c7817731f0
commit 6d9d118d57
4 changed files with 58 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
monitor-admin/topic/indicators.component.html
View File

@ -4,9 +4,9 @@
<div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid> <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
<div *ngFor="let number of numbers; let i=index"> <div *ngFor="let number of numbers; let i=index">
<div class="section"> <div class="section">
<div class="tools"> <div *ngIf="isEditable" class="tools">
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<a [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')" <a *ngIf="isCurator" [class.uk-disabled]="editing" class="" (click)="createSection(i, 'number')"
uk-tooltip="Create a new section"> uk-tooltip="Create a new section">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
</a> </a>
@ -17,25 +17,29 @@
</div> </div>
</div> </div>
<div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom"> <div *ngIf="numberSections.at(i)" class="uk-margin-medium-bottom">
<div input [formInput]="numberSections.at(i).get('title')" <div *ngIf="isEditable" input [formInput]="numberSections.at(i).get('title')"
(focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')" (focusEmitter)="saveSection($event, numberSections.at(i), i, 'number')"
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div> class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
<h5 *ngIf="!isEditable" class="uk-margin-remove">{{numberSections.at(i).get('title').value}}</h5>
</div> </div>
<div [id]="'number-' + number._id" class="uk-grid uk-grid-small uk-grid-match" <div [id]="'number-' + number._id" class="uk-grid uk-grid-small uk-grid-match"
uk-sortable="group: number" uk-grid> [attr.uk-sortable]="isEditable ? 'group: number': null" uk-grid>
<ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="number.indicators" let-indicator let-j="index">
<div *ngIf="indicator" [id]="indicator._id" <div *ngIf="indicator" [id]="indicator._id"
[ngClass]="getNumberClassBySize(indicator.width)"> [ngClass]="getNumberClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative"> <div class="uk-card uk-card-default uk-padding-small number-card uk-position-relative">
<div *ngIf="!dragging" <div *ngIf="!dragging"
class="uk-position-top-right uk-margin-small-right uk-margin-small-top"> class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
<a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing"> <icon *ngIf="!isEditable && showVisibility" [flex]="true"
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
ratio="0.6"></icon>
<a *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
<icon [flex]="true"
[name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
ratio="0.6"></icon> ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element class="uk-dropdown" <div #element *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-dropdown"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0"> uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator"> <ng-container *ngIf="isCurator">
@ -79,7 +83,7 @@
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div *ngIf="isCurator" class="uk-margin-top"> <div *ngIf="isCurator && isEditable" class="uk-margin-top">
<div class="uk-grid uk-grid-small" uk-grid> <div class="uk-grid uk-grid-small" uk-grid>
<div [ngClass]="getNumberClassBySize('small')"> <div [ngClass]="getNumberClassBySize('small')">
<a class="uk-card uk-card-default number-card uk-padding-small uk-flex uk-flex-middle uk-link-reset" <a class="uk-card uk-card-default number-card uk-padding-small uk-flex uk-flex-middle uk-link-reset"
@ -96,7 +100,7 @@
</div> </div>
</div> </div>
</div> </div>
<div> <div *ngIf="isEditable && isCurator">
<ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container> <ng-container *ngTemplateOutlet="new_section; context:{type: 'number'}"></ng-container>
</div> </div>
</div> </div>
@ -106,9 +110,9 @@
<div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid> <div class="uk-grid uk-grid-large uk-child-width-1-1" uk-grid>
<div *ngFor="let chart of charts; let i=index"> <div *ngFor="let chart of charts; let i=index">
<div class="section uk-margin-top uk-padding-small"> <div class="section uk-margin-top uk-padding-small">
<div class="tools"> <div *ngIf="isEditable" class="tools">
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<a [class.uk-disabled]="editing" class="" (click)="createSection(i)" <a *ngIf="isCurator" [class.uk-disabled]="editing" class="" (click)="createSection(i)"
title="Create a new section"> title="Create a new section">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
</a> </a>
@ -120,25 +124,29 @@
</div> </div>
<div *ngIf="chartSections.at(i)" <div *ngIf="chartSections.at(i)"
class="uk-margin-medium-bottom"> class="uk-margin-medium-bottom">
<div input [formInput]="chartSections.at(i).get('title')" <div *ngIf="isEditable" input [formInput]="chartSections.at(i).get('title')"
(focusEmitter)="saveSection($event, chartSections.at(i), i)" (focusEmitter)="saveSection($event, chartSections.at(i), i)"
class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div> class="uk-width-1-3@m uk-width-1-1" placeholder="Title" inputClass="border-bottom"></div>
<h5 *ngIf="!isEditable" class="uk-margin-remove">{{chartSections.at(i).get('title').value}}</h5>
</div> </div>
<div [id]="'chart-' + chart._id" class="uk-grid uk-grid-small uk-grid-match" <div [id]="'chart-' + chart._id" class="uk-grid uk-grid-small uk-grid-match"
uk-sortable="group: chart" uk-grid> [attr.uk-sortable]="isEditable ? 'group: chart': null" uk-grid>
<ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index"> <ng-template ngFor [ngForOf]="chart.indicators" let-indicator let-j="index">
<div *ngIf="indicator" [id]="indicator._id" <div *ngIf="indicator" [id]="indicator._id"
[ngClass]="getChartClassBySize(indicator.width)"> [ngClass]="getChartClassBySize(indicator.width)">
<div class="uk-card uk-card-default uk-card-body uk-position-relative"> <div class="uk-card uk-card-default uk-card-body uk-position-relative">
<div *ngIf="!dragging" <div *ngIf="!dragging"
class="uk-position-top-right uk-margin-small-right uk-margin-small-top"> class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
<a class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing"> <icon *ngIf="!isEditable && showVisibility" [flex]="true"
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
ratio="0.6"></icon>
<a *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-link-reset uk-flex uk-flex-middle" [class.uk-disabled]="editing">
<icon [flex]="true"
[name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)" [name]="stakeholderUtils.visibilityIcon.get(indicator.visibility)"
ratio="0.6"></icon> ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element class="uk-dropdown" <div #element *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-dropdown"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0"> uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator"> <ng-container *ngIf="isCurator">
@ -214,7 +222,7 @@
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div *ngIf="isCurator" class="uk-margin-top"> <div *ngIf="isCurator && isEditable" class="uk-margin-top">
<div class="uk-grid uk-grid-small uk-grid-match" uk-grid> <div class="uk-grid uk-grid-small uk-grid-match" uk-grid>
<div [ngClass]="getChartClassBySize('small')"> <div [ngClass]="getChartClassBySize('small')">
<div class=" uk-card uk-card-default uk-card-body clickable" <div class=" uk-card uk-card-default uk-card-body clickable"
@ -236,7 +244,7 @@
</div> </div>
</div> </div>
</div> </div>
<div> <div *ngIf="isEditable && isCurator">
<ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container> <ng-container *ngTemplateOutlet="new_section; context:{type: 'chart'}"></ng-container>
</div> </div>
</div> </div>
@ -288,10 +296,10 @@
class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left" class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="indicator.activePath !== i" [class.uk-invisible-hover]="indicator.activePath !== i"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle"> <a *ngIf="isEditable && isCurator" class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element <div #element *ngIf="isEditable && isCurator"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body"> uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngIf="i > 0"> <li *ngIf="i > 0">
@ -486,10 +494,10 @@
class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left" class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="indicator.activePath !== i" [class.uk-invisible-hover]="indicator.activePath !== i"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle"> <a *ngIf="isEditable && isCurator" class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element <div #element *ngIf="isEditable && isCurator"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body"> uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: .uk-modal-body">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<li *ngIf="i > 0"> <li *ngIf="i > 0">

4
monitor-admin/topic/indicators.component.ts
View File

@ -1566,4 +1566,8 @@ export class IndicatorsComponent extends IndicatorStakeholderBaseComponent imple
document.body.removeChild(tempBox); document.body.removeChild(tempBox);
NotificationHandler.rise('Copied to clipboard'); NotificationHandler.rise('Copied to clipboard');
} }
get isEditable(): boolean {
return this.stakeholder.copy || this.stakeholder.defaultId == null || this.stakeholder.defaultId == '-1';
}
} }

32
monitor-admin/topic/topic.component.html
View File

@ -28,12 +28,15 @@
</span> </span>
<span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="topicIndex !== i" <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="topicIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle"> <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)" ratio="0.6"></icon>
<a *ngIf="isEditable && (isCurator || showVisibillity)" class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(topic.visibility)"
ratio="0.6"></icon> ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body"> <div #element *ngIf="isEditable && (isCurator || showVisibillity)"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator"> <ng-container *ngIf="isCurator">
<li> <li>
@ -106,12 +109,14 @@
<span class="uk-width-expand uk-text-truncate">{{category.name}}</span> <span class="uk-width-expand uk-text-truncate">{{category.name}}</span>
<span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="categoryIndex !== j" <span class="uk-margin-xsmall-left hide-on-close" [class.uk-invisible-hover]="categoryIndex !== j"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle"> <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)" ratio="0.6"></icon>
<a *ngIf="isEditable && (isCurator || showVisibility)" class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(category.visibility)"
ratio="0.6"></icon> ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element <div #element *ngIf="isEditable && (isCurator || showVisibility)"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body"> uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; flip: false; container: body">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator"> <ng-container *ngIf="isCurator">
@ -175,7 +180,7 @@
</div> </div>
</a> </a>
</li> </li>
<li *ngIf="isCurator"> <li *ngIf="isCurator && isEditable">
<a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle"> <a (click)="editCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
<span class="hide-on-close">Create new category</span> <span class="hide-on-close">Create new category</span>
@ -183,7 +188,7 @@
</li> </li>
</ul> </ul>
</li> </li>
<li *ngIf="isCurator" class="hide-on-close"> <li *ngIf="isCurator && isEditable" class="hide-on-close">
<a (click)="editTopicOpen(-1); $event.preventDefault()"> <a (click)="editTopicOpen(-1); $event.preventDefault()">
<div class="uk-flex uk-flex-middle"> <div class="uk-flex uk-flex-middle">
<div class="uk-width-auto"> <div class="uk-width-auto">
@ -235,12 +240,15 @@
<span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left" <span class="uk-flex uk-flex-column uk-flex-center uk-margin-small-left"
[class.uk-invisible-hover]="subCategoryIndex !== i" [class.uk-invisible-hover]="subCategoryIndex !== i"
(click)="$event.stopPropagation();$event.preventDefault()"> (click)="$event.stopPropagation();$event.preventDefault()">
<a class="uk-link-reset uk-flex uk-flex-middle"> <icon *ngIf="!isEditable && showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
<icon *ngIf="showVisibility" [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)" ratio="0.6"></icon>
<a *ngIf="isEditable && (isCurator || showVisibility)" class="uk-link-reset uk-flex uk-flex-middle">
<icon [flex]="true" [name]="stakeholderUtils.visibilityIcon.get(subCategory.visibility)"
ratio="0.6"></icon> ratio="0.6"></icon>
<icon [flex]="true" name="more_vert"></icon> <icon [flex]="true" name="more_vert"></icon>
</a> </a>
<div #element uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: body"> <div #element *ngIf="isEditable && (isCurator || showVisibility)"
uk-dropdown="mode: click; pos: bottom-left; offset: 5; delay-hide: 0; container: body">
<ul class="uk-nav uk-dropdown-nav"> <ul class="uk-nav uk-dropdown-nav">
<ng-container *ngIf="isCurator"> <ng-container *ngIf="isCurator">
<li> <li>
@ -318,7 +326,7 @@
</span> </span>
</li> </li>
</ng-template> </ng-template>
<li *ngIf="isCurator"> <li *ngIf="isCurator && isEditable">
<a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle"> <a (click)="editSubCategoryOpen(); $event.preventDefault()" class="uk-flex uk-flex-middle">
<icon name="add" [flex]="true"></icon> <icon name="add" [flex]="true"></icon>
<span class="uk-text-uppercase">Create new subcategory</span> <span class="uk-text-uppercase">Create new subcategory</span>

4
monitor-admin/topic/topic.component.ts
View File

@ -759,4 +759,8 @@ export class TopicComponent extends StakeholderBaseComponent implements OnInit,
this.visibilityModal.alertFooter = false; this.visibilityModal.alertFooter = false;
this.visibilityModal.open(); this.visibilityModal.open();
} }
get isEditable(): boolean {
return this.stakeholder.copy || this.stakeholder.defaultId == null || this.stakeholder.defaultId == '-1';
}
} }