tweaks for admin: pages, entities, classes and portals html files

This commit is contained in:
Alex Martzios 2022-06-21 12:22:28 +03:00
parent b7f5f17b6a
commit 3559b7a7ca
5 changed files with 169 additions and 132 deletions

View File

@ -29,7 +29,12 @@
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search class" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div>
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<button class="uk-button uk-button-secondary" [class]="getSelectedDivIds().length == 0 ? 'uk-disabled':''" [disabled]="getSelectedDivIds().length == 0">
Bulk Actions
<span *ngIf="getSelectedDivIds().length > 0">
({{getSelectedDivIds().length}})
</span>
</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
@ -93,11 +98,11 @@
</div>
</div>
<modal-alert #editModal (alertOutput)="divIdSaveConfirmed($event)"
[okDisabled]="classForm && (classForm.invalid || !classForm.dirty)">
[okDisabled]="classForm && (classForm.invalid || !classForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="classForm" [formGroup]="classForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div input [formInput]="classForm.get('name')" placeholder="Class Name"></div>
<div input [formInput]="classForm.get('pages')" placeholder="Pages" [options]="allPages" type="chips"></div>
<div input [formInput]="classForm.get('portalType')" placeholder="Portal Type" [options]="portalUtils.portalTypes" type="select"></div>
</form>
</modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteDivIds($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteDivIds($event)" classTitle="uk-background-primary uk-light"></modal-alert>

View File

@ -30,6 +30,38 @@
</div>
<div class="uk-width-2-5@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search entity" class="uk-width-expand"></div>
<div>
<button utton class="uk-button uk-button-secondary" [class]="getSelectedEntities().length == 0 ? 'uk-disabled':''" [disabled]="getSelectedEntities().length == 0">
Bulk Actions
<span *ngIf="getSelectedEntities().length > 0">
({{getSelectedEntities().length}})
</span>
</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator">
<a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true,getSelectedEntities())"><i></i>
Enable
</a>
</li>
<li *ngIf="!isPortalAdministrator">
<a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false,getSelectedEntities())"><i></i>
Disable
</a>
</li>
<li *ngIf="isPortalAdministrator">
<a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div *ngIf="isPortalAdministrator">
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newEntity()">
<icon name="add" [flex]="true"></icon>
@ -39,37 +71,11 @@
</div>
</div>
</div>
<div *ngIf="!showLoading && checkboxes.length > 0" class="uk-padding">
<div
class="uk-display-inline"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one entity"><input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
[ngModel]="getSelectedEntities().length ==checkboxes.length"/>
<span *ngIf="getSelectedEntities().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedEntities().length}} entities selected </span>
<a class="uk-margin-left ">Actions </a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedEntities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one entity">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(true,getSelectedEntities())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="toggleEntities(false,getSelectedEntities())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedEntities().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedEntities()"><i></i> Delete </a></li>
</ul>
</div>
</div>
</div>
<div *ngIf="!showLoading">
<table *ngIf="checkboxes.length > 0 " class="uk-table uk-table-striped uk-table-large">
<thead>
<tr>
<th class="uk-width-small"></th>
<th><input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox" [ngModel]="getSelectedEntities().length == checkboxes.length"/></th>
<th>Name</th>
<th *ngIf="!isPortalAdministrator">Status</th>
<th *ngIf="!isPortalAdministrator">Enable/Disable</th>
@ -111,11 +117,11 @@
</div>
</div>
<modal-alert #editModal (alertOutput)="entitySaveConfirmed($event)"
[okDisabled]="entityForm && (entityForm.invalid || !entityForm.dirty)">
[okDisabled]="entityForm && (entityForm.invalid || !entityForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="entityForm" [formGroup]="entityForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div input [formInput]="entityForm.get('name')" placeholder="Entity Name"></div>
<div input [formInput]="entityForm.get('pid')" placeholder="Entity Pid"></div>
</form>
</modal-alert>
<modal-alert #relatedPages [overflowBody]="false" (alertOutput)="continueToggling($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteEntities($event)"></modal-alert>
<modal-alert #relatedPages [overflowBody]="false" (alertOutput)="continueToggling($event)" classTitle="uk-background-primary uk-light"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteEntities($event)" classTitle="uk-background-primary uk-light"></modal-alert>

View File

@ -118,7 +118,7 @@
</div>
</div>
<modal-alert #editModal (alertOutput)="menuItemSaveConfirmed($event)"
[okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)">
[okDisabled]="menuItemForm && (menuItemForm.invalid || !menuItemForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="menuItemForm" [formGroup]="menuItemForm" class="uk grid uk-child-width-1-1" uk-grid>
<div dashboard-input [formInput]="menuItemForm.get('title')" type="text" label="Name"
placeholder="Write a name"></div>
@ -164,4 +164,4 @@
</div>
</form>
</modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteMenuItem($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeleteMenuItem($event)" classTitle="uk-background-primary uk-light"></modal-alert>

View File

@ -28,6 +28,38 @@
</div>
<div class="uk-width-2-5@m uk-width-1-1 uk-flex uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search page" class="uk-width-expand"></div>
<div>
<button utton class="uk-button uk-button-secondary" [class]="getSelectedPages().length == 0 ? 'uk-disabled':''" [disabled]="getSelectedPages().length == 0">
Bulk Actions
<span *ngIf="getSelectedPages().length > 0">
({{getSelectedPages().length}})
</span>
</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator">
<a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true,getSelectedPages())"><i></i>
Enable
</a>
</li>
<li *ngIf="!isPortalAdministrator">
<a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false,getSelectedPages())"><i></i>
Disable
</a>
</li>
<li *ngIf="isPortalAdministrator">
<a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedPages()"><i></i>
Delete
</a>
</li>
</ul>
</div>
</div>
<div *ngIf="isPortalAdministrator">
<button class="uk-button uk-button-default uk-flex uk-flex-middle" (click)="newPage()">
<icon name="add" [flex]="true"></icon>
@ -36,98 +68,79 @@
</div>
</div>
</div>
<div *ngIf="checkboxes.length > 0" class="uk-section uk-section-small">
<div
class="uk-display-inline"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : null"
title="Select at least one page"><input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
[ngModel]="getSelectedPages().length ==checkboxes.length"/>
<span *ngIf="getSelectedPages().length > 0" class="uk-margin-left uk-text-muted">
{{getSelectedPages().length}} pages selected </span>
<a class="uk-margin-left">Actions</a>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPages().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
title="Select at least one page">
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(true,getSelectedPages())"><i></i> Enable
</a></li>
<li *ngIf="!isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="togglePages(false,getSelectedPages())"><i></i> Disable
</a>
</li>
<li *ngIf="isPortalAdministrator"><a [class]="getSelectedPages().length == 0 ? 'uk-disabled' : ''"
(click)="confirmDeleteSelectedPages()"><i></i> Delete </a></li>
</ul>
</div>
<div *ngIf="checkboxes.length > 0" class="uk-padding uk-padding-remove-bottom">
<div class="uk-display-inline">
<label>
<input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
[ngModel]="getSelectedPages().length ==checkboxes.length"/>
<span class="uk-margin-medium-left uk-text-emphasis">Select all</span>
</label>
</div>
</div>
<ul *ngIf="checkboxes.length > 0" class="uk-list pages">
<li *ngFor="let check of checkboxes; let i=index" class="uk-card uk-card-default uk-margin-bottom">
<div class="uk-grid uk-grid-divider uk-padding" uk-grid>
<div class="uk-grid uk-width-expand" uk-grid>
<div class=""><input id="{{check.page._id}}" class="uk-checkbox" type="checkbox"
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
<div class="top uk-padding uk-grid" uk-grid>
<div class="inputDiv">
<input id="{{check.page._id}}" class="uk-checkbox" type="checkbox"
name="pagescb[]" value="{{check.page._id}}" [(ngModel)]="check.checked">
</div>
<div class="infoDiv uk-width-expand uk-text-small">
<div class="uk-margin-bottom uk-text-large uk-text-bold">{{check.page.name}}</div>
<div *ngIf="check.page.entities && check.page.entities.length > 0">
<span class="uk-text-meta">Entities: </span>{{getEntitiesAsString(check.page)}}
</div>
<div class="uk-width-expand">
<div class="title uk-margin-medium-bottom">Name</div>
<div class="name uk-margin-medium-bottom" href="#">{{check.page.name}}</div>
<div *ngIf="check.page.entities && check.page.entities.length > 0"><span
class="title">Entities: </span>
{{getEntitiesAsString(check.page)}}</div>
<div class=" uk-margin-small-bottom"><span class="title">Route: </span> {{check.page.route}}</div>
<div *ngIf="!pagesType" class=" uk-margin-small-bottom"><span
class="title">Type: </span> {{check.page.type}}</div>
<div *ngIf="!portal" class=" uk-margin-small-bottom">
<span class="title">Portal type: </span>{{check.page.portalType}}
</div>
<div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom">
<span class="title">Portal PID: </span>{{check.page.portalPid}}
</div>
<div class=" uk-margin-small-bottom">
<span class="uk-text-meta">Route: </span>{{check.page.route}}
</div>
<div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
check.page.right) || pageWithDivIds.includes(check.page._id) )" class="uk-width-1-4">
<div class="title uk-margin-medium-bottom">Help texts</div>
<div class=" uk-margin-small-bottom">
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
class="helpContents"
[queryParams]="{pageId: check.page._id}"
routerLink="../helptexts">
Manage page help texts
<span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span>
</a>
</div>
<div>
<a *ngIf="pageWithDivIds.includes(check.page._id)"
[queryParams]="{ pageId: check.page._id}"
routerLink="../classContents">Manage class help texts
<span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
</a>
</div>
<div *ngIf="!pagesType" class=" uk-margin-small-bottom">
<span class="uk-text-meta">Type: </span>{{check.page.type}}
</div>
<div *ngIf="!isPortalAdministrator" class="uk-width-1-4">
<div class="title uk-margin-medium-bottom">Enable/disable</div>
<mat-slide-toggle [checked]="check.page.isEnabled"
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
</mat-slide-toggle>
<div *ngIf="!portal" class=" uk-margin-small-bottom">
<span class="uk-text-meta">Portal type: </span>{{check.page.portalType}}
</div>
<div *ngIf="!portal && check.page.portalPid" class=" uk-margin-small-bottom">
<span class="uk-text-meta">Portal PID: </span>{{check.page.portalPid}}
</div>
</div>
<div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)" class="uk-width-1-5">
<div class="uk-flex uk-flex-center uk-flex-column uk-height-1-1">
<div class="uk-flex uk-flex-center">
<div class="actions">
<button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
class="uk-button uk-button-secondary uk-margin-top uk-flex uk-flex-middle" (click)="editPage(i)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-small-left"> Edit</span>
</button>
<button class="uk-button uk-button-danger uk-margin-top uk-flex uk-flex-middle" (click)="confirmDeletePage(check.page._id)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-small-left"> Delete</span>
</button>
</div>
</div>
</div>
<div class="bottom uk-card-footer uk-flex uk-flex-right">
<div *ngIf="!isPortalAdministrator && ((check.page.top || check.page.bottom || check.page.left ||
check.page.right) || pageWithDivIds.includes(check.page._id) )" class="">
<div>
<a *ngIf="check.page.top || check.page.bottom || check.page.left || check.page.right"
class="uk-button uk-button-link uk-text-uppercase"
[queryParams]="{pageId: check.page._id}"
routerLink="../helptexts">
Manage page help texts
<span *ngIf="pageHelpContentsCount[check.page._id]">({{pageHelpContentsCount[check.page._id]}})</span>
</a>
</div>
<div>
<a *ngIf="pageWithDivIds.includes(check.page._id)" class="uk-button uk-button-link uk-text-uppercase"
[queryParams]="{ pageId: check.page._id}"
routerLink="../classContents">Manage class help texts
<span *ngIf="pageClassContentsCount[check.page._id]">({{pageClassContentsCount[check.page._id]}})</span>
</a>
</div>
</div>
<div *ngIf="!isPortalAdministrator" class="uk-margin-medium-left uk-flex uk-flex-middle">
<mat-slide-toggle [checked]="check.page.isEnabled"
(change)="($event.source.checked = check.page.isEnabled);togglePages(!check.page.isEnabled,[check.page._id])"
uk-tooltip="title:<div class='uk-padding-small uk-width-large'><div class='uk-text-bold '>Disable a page to hide it from community dashboard portal.</div><div class=' uk-margin-top'>If the page is disabled, a message 'Can't find that page' will appear in case the url of that page is loaded. If the disabled page belongs to the menu, the link will be removed from menu, too.</div></div>">
</mat-slide-toggle>
<span class="uk-margin-small-left uk-text-small uk-text-emphasis">Enable</span>
</div>
<div *ngIf="isPortalAdministrator || (check.page.portalType == properties.adminToolsPortalType && check.page.portalPid == portal)">
<div class="uk-flex uk-flex-middle">
<button [disabled]="!portal && check.page.portalPid" [attr.uk-tooltip]="((!portal && check.page.portalPid)?'This page belongs to ' + check.page.portalPid:null)"
class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="editPage(i)">
<icon name="edit" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Edit</span>
</button>
<button class="uk-button uk-button-link uk-flex uk-flex-middle uk-margin-left" (click)="confirmDeletePage(check.page._id)">
<icon name="delete" [flex]="true"></icon>
<span class="uk-margin-xsmall-left"> Delete</span>
</button>
</div>
</div>
</div>
@ -142,7 +155,7 @@
</div>
</div>
<modal-alert #editModal (alertOutput)="pageSaveConfirmed($event)"
[okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)">
[okDisabled]="pageForm && (pageForm.invalid || !pageForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="pageForm" [formGroup]="pageForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div input placeholder="Route" [formInput]="pageForm.get('route')"></div>
<div input placeholder="Name" [formInput]="pageForm.get('name')"></div>
@ -157,20 +170,28 @@
<div class="uk-form-label uk-text-bold uk-margin-bottom">Select if this page have helptext at:</div>
<div class="uk-grid uk-grid-small uk-child-width-1-4" uk-grid>
<div>
<label class="uk-margin-small-right">Top</label>
<input type="checkbox" class="uk-checkbox" formControlName="top">
<label>
<input type="checkbox" class="uk-checkbox" formControlName="top">
<span class="uk-margin-small-left">Top</span>
</label>
</div>
<div>
<label class="uk-margin-small-right">Right</label>
<input type="checkbox" class="uk-checkbox" formControlName="right">
<label>
<input type="checkbox" class="uk-checkbox" formControlName="right">
<span class="uk-margin-small-left">Right</span>
</label>
</div>
<div>
<label class="uk-margin-small-right">Bottom</label>
<input type="checkbox" class="uk-checkbox" formControlName="bottom">
<label>
<input type="checkbox" class="uk-checkbox" formControlName="bottom">
<span class="uk-margin-small-left">Bottom</span>
</label>
</div>
<div>
<label class="uk-margin-small-right">Left</label>
<input type="checkbox" class="uk-checkbox" formControlName="left">
<label>
<input type="checkbox" class="uk-checkbox" formControlName="left">
<span class="uk-margin-small-left">Left</span>
</label>
</div>
</div>
<div class="uk-text-danger uk-margin-top">
@ -181,4 +202,4 @@
</form>
</modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePages($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePages($event)" classTitle="uk-background-primary uk-light"></modal-alert>

View File

@ -28,9 +28,14 @@
</div>
<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
<div search-input [expandable]="true" [searchControl]="filterForm.get('keyword')" searchInputClass="outer" placeholder="Search portal"
[bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
[bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
<div>
<button class="uk-button uk-button-secondary">Bulk Actions</button>
<button class="uk-button uk-button-secondary" [class]="getSelectedPortals().length == 0 ? 'uk-disabled':''" [disabled]="getSelectedPortals().length == 0">
Bulk Actions
<span *ngIf="getSelectedPortals().length > 0">
({{getSelectedPortals().length}})
</span>
</button>
<div uk-dropdown="mode: click">
<ul class="uk-nav uk-dropdown-nav"
[attr.uk-tooltip]="getSelectedPortals().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
@ -87,7 +92,7 @@
</div>
</div>
<modal-alert #editModal (alertOutput)="portalSaveConfirmed($event)"
[okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)">
[okDisabled]="portalForm && (portalForm.invalid || !portalForm.dirty)" classTitle="uk-background-primary uk-light">
<form *ngIf="portalForm" [formGroup]="portalForm" class="uk-grid uk-child-width-1-1" uk-grid>
<div input [formInput]="portalForm.get('name')" placeholder="Portal Name"></div>
<div input [formInput]="portalForm.get('type')" placeholder="Portal Type"
@ -98,4 +103,4 @@
</form>
</modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePortals($event)"></modal-alert>
<modal-alert #deleteModal [overflowBody]="false" (alertOutput)="confirmedDeletePortals($event)" classTitle="uk-background-primary uk-light"></modal-alert>