css clean up on platform buttons and other ui fixes
This commit is contained in:
parent
0609065ab8
commit
2e5b3b2d8d
|
@ -126,7 +126,7 @@ export class DescriptionStatusListingComponent extends BaseListingComponent<Desc
|
|||
{
|
||||
prop: nameof<DescriptionStatus>(x => x.internalStatus),
|
||||
sortable: true,
|
||||
languageName: 'PLAN-STATUS-LISTING.FIELDS.STATUS',
|
||||
languageName: 'PLAN-STATUS-LISTING.FIELDS.INTERNAL-STATUS',
|
||||
cellTemplate: this.status
|
||||
},
|
||||
{
|
||||
|
|
|
@ -90,19 +90,19 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
<button *ngIf="canAddNewVersion(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/new-version/', row.id])">
|
||||
</a>
|
||||
<a *ngIf="canAddNewVersion(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/new-version/', row.id])">
|
||||
<mat-icon>queue</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.NEW-VERSION' | translate}}
|
||||
</button>
|
||||
<button *ngIf="canClone(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/clone/', row.id])">
|
||||
</a>
|
||||
<a *ngIf="canClone(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/clone/', row.id])">
|
||||
<mat-icon>content_copy</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.CLONE' | translate}}
|
||||
</button>
|
||||
<button *ngIf="canViewVersions(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/versions/', row.groupId])">
|
||||
</a>
|
||||
<a *ngIf="canViewVersions(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/versions/', row.groupId])">
|
||||
<mat-icon>library_books</mat-icon>
|
||||
{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDownloadXml(row)" mat-menu-item (click)="export($event, row.id)">
|
||||
<mat-icon>download</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
|
||||
</button>
|
||||
|
|
|
@ -90,10 +90,10 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-template-type/' + row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-template-type/' + row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
|
|
|
@ -81,9 +81,9 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/languages/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/languages/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'LANGUAGE-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'LANGUAGE-LISTING.ACTIONS.DELETE' | translate}}
|
||||
|
|
|
@ -85,19 +85,19 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
<button *ngIf="canCreateNewVersion(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new-version/', row.id])">
|
||||
</a>
|
||||
<a *ngIf="canCreateNewVersion(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new-version/', row.id])">
|
||||
<mat-icon>queue</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.NEW-VERSION' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/clone/', row.id])">
|
||||
</a>
|
||||
<a mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/clone/', row.id])">
|
||||
<mat-icon>content_copy</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}}
|
||||
</button>
|
||||
<button *ngIf="row.isActive == isActive.Active" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/versions/', row.groupId])">
|
||||
</a>
|
||||
<a *ngIf="row.isActive == isActive.Active" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/versions/', row.groupId])">
|
||||
<mat-icon>library_books</mat-icon>
|
||||
{{'PLAN-BLUEPRINT-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button mat-menu-item (click)="export($event, row.id)" *ngIf="canDownloadXML(row)">
|
||||
<mat-icon>download</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
|
||||
</button>
|
||||
|
|
|
@ -53,9 +53,9 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-statuses/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-statuses/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'PLAN-STATUS-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="delete(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'PLAN-STATUS-LISTING.ACTIONS.DELETE' | translate}}
|
||||
|
|
|
@ -127,7 +127,7 @@ export class PlanStatusListingComponent extends BaseListingComponent<PlanStatus,
|
|||
{
|
||||
prop: nameof<PlanStatus>(x => x.internalStatus),
|
||||
sortable: true,
|
||||
languageName: 'PLAN-STATUS-LISTING.FIELDS.STATUS',
|
||||
languageName: 'PLAN-STATUS-LISTING.FIELDS.INTERNAL-STATUS',
|
||||
cellTemplate: this.status
|
||||
},
|
||||
{
|
||||
|
|
|
@ -83,9 +83,9 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/prefilling-sources/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/prefilling-sources/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'PREFILLING-SOURCE-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'PREFILLING-SOURCE-LISTING.ACTIONS.DELETE' | translate}}
|
||||
|
|
|
@ -84,9 +84,9 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/reference-type/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/reference-type/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'REFERENCE-TYPE-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'REFERENCE-TYPE-LISTING.ACTIONS.DELETE' | translate}}
|
||||
|
|
|
@ -105,9 +105,9 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/references/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/references/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'REFERENCE-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'REFERENCE-LISTING.ACTIONS.DELETE' | translate}}
|
||||
|
|
|
@ -84,9 +84,9 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/tenants/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/tenants/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'TENANT-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'TENANT-LISTING.ACTIONS.DELETE' | translate}}
|
||||
|
|
|
@ -84,9 +84,9 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/usage-limits/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/usage-limits/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'USAGE-LIMIT-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'USAGE-LIMIT-LISTING.ACTIONS.DELETE' | translate}}
|
||||
|
|
|
@ -225,7 +225,7 @@
|
|||
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
<div class="col-md-2">
|
||||
<button type="button" mat-button class="lightblue-btn" (click)="validateId()" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').disabled">{{ "TYPES.DESCRIPTION-TEMPLATE-VALIDATOR.ACTION" | translate }}</button>
|
||||
<button type="button" mat-button class="rounded-btn lightblue-btn" (click)="validateId()" [disabled]="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').disabled">{{ "TYPES.DESCRIPTION-TEMPLATE-VALIDATOR.ACTION" | translate }}</button>
|
||||
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('backendError')">{{propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="propertiesFormGroup?.get(field.id).get('externalIdentifier')?.get('identifier').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</div>
|
||||
|
|
|
@ -22,10 +22,10 @@
|
|||
<div class="row">
|
||||
<div class="col actions">
|
||||
<div class="col-auto ml-auto">
|
||||
<button mat-button type="button" class="cancel-btn" (click)="cancel()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.CANCEL' | translate }}</button>
|
||||
<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.CANCEL' | translate }}</button>
|
||||
</div>
|
||||
<div class="col-auto p-0">
|
||||
<button mat-button [disabled]="!formGroup.valid" type="button" class="rounded-btn primary-inverted next-btn" (click)="next()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate }}</button>
|
||||
<button mat-button [disabled]="!formGroup.valid" type="button" class="rounded-btn primary-inverted primary-inverted-hover" (click)="next()">{{ 'START-NEW-DESCRIPTION-DIALOG.ACTIONS.NEXT' | translate }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -38,31 +38,6 @@
|
|||
line-height: 1.9rem;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
color: #212121;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.next-btn:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
// .disabled-btn {
|
||||
// border: 1px solid #b5b5b5;
|
||||
// border-radius: 30px;
|
||||
// opacity: 1;
|
||||
// min-width: 101px;
|
||||
// height: 43px;
|
||||
// color: #b5b5b5;
|
||||
// font-weight: 500;
|
||||
// }
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
@ -223,19 +223,19 @@
|
|||
<h3 class="m-0">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERIES' | translate}}</h3>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button type="button" class="action-btn" (click)="addQuery()" [disabled]="formGroup.get('queries').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button>
|
||||
<button mat-button type="button" class="rounded-btn secondary" (click)="addQuery()" [disabled]="formGroup.get('queries').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-QUERY' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div *ngFor="let query of formGroup.get('queries').controls; let queryIndex=index;" class="row">
|
||||
<div class="col-12">
|
||||
<div class="row d-flex align-items-center">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto d-flex">
|
||||
<h4>{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4>
|
||||
<h4 class="m-0">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.QUERY' | translate}} {{queryIndex + 1}}</h4>
|
||||
</div>
|
||||
<div class="col-auto d-flex">
|
||||
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-QUERY' | translate}}" (click)="removeQuery(queryIndex)" [disabled]="formGroup.get('queries').disabled">
|
||||
<button mat-icon-button matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-QUERY' | translate}}" (click)="removeQuery(queryIndex)" [disabled]="formGroup.get('queries').disabled">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
@ -260,12 +260,12 @@
|
|||
</div>
|
||||
|
||||
<!-- Query Cases -->
|
||||
<div class="row mb-2">
|
||||
<div class="row align-items-center mb-2">
|
||||
<div class="col-auto pr-0">
|
||||
<h3 class="m-0">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.FIELDS.CASES' | translate}}</h3>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" type="button" (click)="addCase(queryIndex)" [disabled]="query.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
|
||||
<button mat-button class="rounded-btn secondary" type="button" (click)="addCase(queryIndex)" [disabled]="query.disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-CASE' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngFor="let case of query.get('cases').controls; let caseIndex=index;" class="row">
|
||||
|
@ -327,7 +327,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-auto mb-4">
|
||||
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-CASE' | translate}}" (click)="removeCase(queryIndex, caseIndex)" [disabled]="query.disabled">
|
||||
<button mat-icon-button matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-CASE' | translate}}" (click)="removeCase(queryIndex, caseIndex)" [disabled]="query.disabled">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
@ -354,7 +354,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="col-auto d-flex">
|
||||
<button mat-icon-button class="action-list-icon" matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-STATIC-ITEM' | translate}}" (click)="removeStaticItem(staticIndex)" [disabled]="formGroup.get('items').disabled">
|
||||
<button mat-icon-button matTooltip="{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.REMOVE-STATIC-ITEM' | translate}}" (click)="removeStaticItem(staticIndex)" [disabled]="formGroup.get('items').disabled">
|
||||
<mat-icon>delete</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
@ -393,7 +393,7 @@
|
|||
</mat-card-content>
|
||||
</div>
|
||||
</div>
|
||||
<button mat-button class="action-btn" type="button" (click)="addStaticItem()" [disabled]="formGroup.get('items').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-STATIC-ITEM' | translate}}</button>
|
||||
<button mat-button class="rounded-btn secondary" type="button" (click)="addStaticItem()" [disabled]="formGroup.get('items').disabled">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.ACTIONS.ADD-STATIC-ITEM' | translate}}</button>
|
||||
</div>
|
||||
<mat-error *ngIf="formGroup.get('items').dirty && formGroup.get('items').hasError('required')">{{'EXTERNAL-FETCHER-SOURCE-EDITOR.STATIC-ITEMS-REQUIRED' | translate}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('items').hasError('backendError')">{{formGroup.get('items').getError('backendError').message}}</mat-error>
|
||||
|
|
|
@ -1,18 +1,18 @@
|
|||
.action-btn {
|
||||
border-radius: 30px;
|
||||
background-color: var(--secondary-color);
|
||||
border: 1px solid transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
// .action-btn {
|
||||
// border-radius: 30px;
|
||||
// background-color: var(--secondary-color);
|
||||
// border: 1px solid transparent;
|
||||
// padding-left: 2em;
|
||||
// padding-right: 2em;
|
||||
// box-shadow: 0px 3px 6px #1E202029;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
// transition-property: background-color, color;
|
||||
// transition-duration: 200ms;
|
||||
// transition-delay: 50ms;
|
||||
// transition-timing-function: ease-in-out;
|
||||
// &:disabled{
|
||||
// background-color: #CBCBCB;
|
||||
// color: #FFF;
|
||||
// border: 0px;
|
||||
// }
|
||||
// }
|
|
@ -11,6 +11,6 @@
|
|||
<app-faq-content [isDialog]="isDialog"></app-faq-content>
|
||||
</div>
|
||||
<div mat-dialog-actions class="row">
|
||||
<div class="ml-auto col-auto"><button mat-button tabindex="-1" mat-dialog-close class="cancel-btn" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
|
||||
<div class="ml-auto col-auto"><button mat-button tabindex="-1" mat-dialog-close class="rounded-btn neutral" (click)="cancel()">{{'FAQ.CLOSE' | translate}}</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -29,13 +29,3 @@
|
|||
.faq {
|
||||
margin: 1.125rem 0;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
color: #212121;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
|
@ -54,7 +54,7 @@
|
|||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col"></div>
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{'PLAN-CLONE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="confirm-btn" (click)="confirm()" color="accent">{{'PLAN-CLONE-DIALOG.ACTIONS.CLONE' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-CLONE-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-button type="button" class="rounded-btn primary-inverted primary-inverted-hover" (click)="confirm()" color="accent">{{'PLAN-CLONE-DIALOG.ACTIONS.CLONE' | translate}}</button></div>
|
||||
</div>
|
||||
</div>
|
|
@ -20,31 +20,7 @@
|
|||
opacity: 0.81;
|
||||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
min-width: 84px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
color: var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
|
||||
::ng-deep label {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
@ -12,8 +12,9 @@
|
|||
<app-plan-user-field-component [form]="formGroup" [validationErrorModel]="editorModel.validationErrorModel" [sections]="selectedBlueprint?.definition?.sections" [viewOnly]="false" [initializeUsers]="true" [enableSorting]="false"></app-plan-user-field-component>
|
||||
</div>
|
||||
<div class="col mt-2">
|
||||
<button mat-raised-button *ngIf="hasValue()" [disabled]="inProgressSendButton" (click)="send()" type="button" class="invite-btn">{{'PLAN-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button>
|
||||
<button mat-button *ngIf="hasValue()" [disabled]="inProgressSendButton" (click)="send()" type="button" class="rounded-btn primary-inverted primary-inverted-hover">{{'PLAN-USER-INVITATION-DIALOG.ACTIONS.INVITE' | translate}}</button>
|
||||
<mat-error *ngIf="formGroup.get('users').hasError('backendError')">{{formGroup.get('users').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('users').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
|
@ -69,35 +69,6 @@
|
|||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.invite-btn {
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
color: var(--primary-color);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.invite-btn-disabled {
|
||||
min-width: 6.64em;
|
||||
height: 2.93em;
|
||||
background: #ffffff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
font-weight: bold;
|
||||
letter-spacing: -0.35px;
|
||||
color: #b5b5b5;
|
||||
margin-bottom: 0.25em;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.invite-btn:hover {
|
||||
background: var(--primary-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0% {
|
||||
border: 1px solid rgba(255, 0, 0, 0.2);
|
||||
|
|
|
@ -60,9 +60,9 @@
|
|||
<button *ngIf="canCreateNewVersion()" mat-menu-item (click)="newVersionClicked()">
|
||||
<mat-icon>queue</mat-icon>{{'PLAN-LISTING.ACTIONS.NEW-VERSION' | translate}}
|
||||
</button>
|
||||
<button mat-menu-item (click)="viewVersions(plan)">
|
||||
<a mat-menu-item [routerLink]="viewVersionsUrl(plan)" target="_blank">
|
||||
<mat-icon>library_books</mat-icon>{{'PLAN-LISTING.ACTIONS.VIEW-VERSION' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button mat-menu-item *ngIf="isDraftPlan(plan) && canDeletePlan()" (click)="deleteClicked(plan.id)" class="menu-item">
|
||||
<mat-icon>delete</mat-icon>{{ 'PLAN-LISTING.ACTIONS.DELETE' | translate }}
|
||||
</button>
|
||||
|
|
|
@ -121,6 +121,16 @@ export class PlanListingItemComponent extends BaseComponent implements OnInit {
|
|||
}
|
||||
}
|
||||
|
||||
viewVersionsUrl(plan: Plan): string {
|
||||
if (plan.accessType == PlanAccessType.Public && plan.status == PlanStatusEnum.Finalized && !this.plan.authorizationFlags?.some(x => x === AppPermission.EditPlan)) {
|
||||
let url = this.router.createUrlTree(['/explore-plans/versions/', plan.groupId]);
|
||||
return url.toString();
|
||||
} else {
|
||||
let url = this.router.createUrlTree(['/plans/versions/', plan.groupId]);
|
||||
return url.toString();
|
||||
}
|
||||
}
|
||||
|
||||
isUserPlanRelated() {
|
||||
const principalId: Guid = this.authentication.userId();
|
||||
return this.plan.planUsers?.some(x => (x.user.id === principalId));
|
||||
|
|
|
@ -87,7 +87,7 @@
|
|||
</div>
|
||||
<div class="row pt-4">
|
||||
<div class="col"></div>
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="confirm-btn" (click)="confirm()" color="accent">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.NEW-VERSION' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="rounded-btn primary-inverted primary-inverted-hover" (click)="confirm()">{{'PLAN-NEW-VERSION-DIALOG.ACTIONS.NEW-VERSION' | translate}}</button></div>
|
||||
</div>
|
||||
</div>
|
|
@ -21,30 +21,6 @@
|
|||
margin-bottom: 0.625rem;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
min-width: 84px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
color: var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.confirm-btn:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
::ng-deep label {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
<div class="confirmation-message align-self-center">
|
||||
<h4>{{'PLAN-UPLOAD.TITLE' | translate}}</h4>
|
||||
</div>
|
||||
<div class="close-btn justify-content-end">
|
||||
<div class="justify-content-end">
|
||||
<button mat-icon-button tabindex="-1" (click)="close()">
|
||||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
|
@ -84,7 +84,7 @@
|
|||
<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-UPLOAD.ACTIONS.CANCEL' | translate}}</button>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="rounded-btn primary-inverted next-btn">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
|
||||
<button mat-button type="button" (click)="confirm()" [disabled]="disableConfirmButton()" class="rounded-btn primary-inverted primary-inverted-hover">{{'PLAN-UPLOAD.ACTIONS.IMPORT' | translate}}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -22,26 +22,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
background: #ffffff 0% 0% no-repeat padding-box;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
color: #212121;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.next-btn:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.attach-btn {
|
||||
top: -20px;
|
||||
}
|
||||
|
|
|
@ -13,11 +13,11 @@
|
|||
<div class="col-12 col-xl mt-3">
|
||||
<mat-form-field class="w-100">
|
||||
<mat-label>{{'PLAN-CONTACT-PREFILL-DIALOG.FIELDS.USER' | translate}}</mat-label>
|
||||
<app-single-auto-complete [formControl]="formGroup" [configuration]="singleAutoCompletePlanAssociatedUserConfiguration"></app-single-auto-complete>
|
||||
<app-single-auto-complete [(ngModel)]="selectedUser" [configuration]="singleAutoCompletePlanAssociatedUserConfiguration"></app-single-auto-complete>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="row" style="justify-content: space-between;">
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete-btn">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CONFIRM' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CANCEL' | translate}}</button></div>
|
||||
<div class="col-auto"><button mat-button type="button" [disabled]="!selectedUser" (click)="confirm()" class="rounded-btn primary-inverted">{{'PLAN-CONTACT-PREFILL-DIALOG.ACTIONS.CONFIRM' | translate}}</button></div>
|
||||
</div>
|
||||
</div>
|
|
@ -7,38 +7,13 @@
|
|||
padding-bottom: 20px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
margin-left: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.cancel {
|
||||
background-color: #aaaaaa;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
.delete {
|
||||
background-color: #ba2c2c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
color: #ba2c2c;
|
||||
border: 1px solid #ba2c2c;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,11 +5,7 @@ import { UserService } from '@app/core/services/user/user.service';
|
|||
import { SingleAutoCompleteConfiguration } from '@app/library/auto-complete/single/single-auto-complete-configuration';
|
||||
import { map } from 'rxjs';
|
||||
import { PlanAssociatedUser } from '@app/core/model/user/user';
|
||||
import { UntypedFormGroup } from '@angular/forms';
|
||||
import { PlanContactPrefillDialogEditorModel } from './plan-contact-prefill-dialog.editor.model';
|
||||
import { FormService } from '@common/forms/form-service';
|
||||
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
|
||||
import { PlanBlueprintSystemFieldType } from '@app/core/common/enum/plan-blueprint-system-field-type';
|
||||
|
||||
@Component({
|
||||
selector: 'app-plan-contact-prefill-dialog',
|
||||
|
@ -18,34 +14,32 @@ import { PlanBlueprintSystemFieldType } from '@app/core/common/enum/plan-bluepri
|
|||
})
|
||||
export class PlanContactPrefillDialogComponent extends BaseComponent {
|
||||
|
||||
formGroup: UntypedFormGroup;
|
||||
contactFormGroup: UntypedFormGroup;
|
||||
label: string;
|
||||
selectedUser: PlanAssociatedUser;
|
||||
|
||||
singleAutoCompletePlanAssociatedUserConfiguration: SingleAutoCompleteConfiguration = {
|
||||
initialItems: (data?: any) => this.userService.queryPlanAssociated(this.userService.buildAutocompleteLookup()).pipe(map(x => x.items)),
|
||||
filterFn: (searchQuery: string, data?: any) => this.userService.queryPlanAssociated(this.userService.buildAutocompleteLookup(searchQuery)).pipe(map(x => x.items)),
|
||||
getSelectedItem: (selectedItem: any) => this.userService.queryPlanAssociated(this.userService.buildAutocompleteLookup(null, null, [selectedItem.id])).pipe(map(x => x.items[0])),
|
||||
displayFn: (item: PlanAssociatedUser) => item.name,
|
||||
subtitleFn: (item: PlanAssociatedUser) => item.email,
|
||||
titleFn: (item: PlanAssociatedUser) => item.name,
|
||||
valueAssign: (item: PlanAssociatedUser) => item,
|
||||
uniqueAssign: (item: PlanAssociatedUser) => item.id
|
||||
singleAutoCompletePlanAssociatedUserConfiguration: SingleAutoCompleteConfiguration;
|
||||
|
||||
}; constructor(
|
||||
constructor(
|
||||
private userService: UserService,
|
||||
private formService: FormService,
|
||||
public enumUtils: EnumUtils,
|
||||
public dialogRef: MatDialogRef<PlanContactPrefillDialogComponent>,
|
||||
@Inject(MAT_DIALOG_DATA) public data: any
|
||||
) {
|
||||
super();
|
||||
this.contactFormGroup = data.contactFormGroup;
|
||||
this.label = data.label;
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.formGroup = new PlanContactPrefillDialogEditorModel().buildForm();
|
||||
this.singleAutoCompletePlanAssociatedUserConfiguration = {
|
||||
initialItems: (data?: any) => this.userService.queryPlanAssociated(this.userService.buildAutocompleteLookup()).pipe(map(x => x.items)),
|
||||
filterFn: (searchQuery: string, data?: any) => this.userService.queryPlanAssociated(this.userService.buildAutocompleteLookup(searchQuery)).pipe(map(x => x.items)),
|
||||
getSelectedItem: (selectedItem: any) => this.userService.queryPlanAssociated(this.userService.buildAutocompleteLookup(null, null, [selectedItem.id])).pipe(map(x => x.items[0])),
|
||||
displayFn: (item: PlanAssociatedUser) => item.name,
|
||||
subtitleFn: (item: PlanAssociatedUser) => item.email,
|
||||
titleFn: (item: PlanAssociatedUser) => item.name,
|
||||
valueAssign: (item: PlanAssociatedUser) => item,
|
||||
uniqueAssign: (item: PlanAssociatedUser) => item.id
|
||||
};
|
||||
}
|
||||
|
||||
cancel() {
|
||||
|
@ -53,14 +47,6 @@ export class PlanContactPrefillDialogComponent extends BaseComponent {
|
|||
}
|
||||
|
||||
confirm() {
|
||||
this.formService.touchAllFormFields(this.formGroup);
|
||||
if (!this.formGroup.valid) { return; }
|
||||
|
||||
this.contactFormGroup.get('firstName').patchValue(this.formGroup.get('name').value);
|
||||
this.contactFormGroup.get('lastName').patchValue(null);
|
||||
this.contactFormGroup.get('email').patchValue(this.formGroup.get('email').value);
|
||||
|
||||
this.dialogRef.close(true);
|
||||
this.dialogRef.close(this.selectedUser);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -1,38 +0,0 @@
|
|||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from "@angular/forms";
|
||||
import { PlanAssociatedUser } from "@app/core/model/user/user";
|
||||
import { BackendErrorValidator } from '@common/forms/validation/custom-validator';
|
||||
import { ValidationErrorModel } from '@common/forms/validation/error-model/validation-error-model';
|
||||
import { Validation, ValidationContext } from '@common/forms/validation/validation-context';
|
||||
import { Guid } from "@common/types/guid";
|
||||
|
||||
export class PlanContactPrefillDialogEditorModel implements PlanAssociatedUser {
|
||||
id: Guid;
|
||||
name: string;
|
||||
email: string;
|
||||
|
||||
public validationErrorModel: ValidationErrorModel = new ValidationErrorModel();
|
||||
protected formBuilder: UntypedFormBuilder = new UntypedFormBuilder();
|
||||
|
||||
constructor() { }
|
||||
|
||||
buildForm(context: ValidationContext = null, disabled: boolean = false): UntypedFormGroup {
|
||||
if (context == null) { context = this.createValidationContext(); }
|
||||
|
||||
return this.formBuilder.group({
|
||||
id: [{ value: this.id, disabled: disabled }, context.getValidation('id').validators],
|
||||
name: [{ value: this.name, disabled: disabled }, context.getValidation('name').validators],
|
||||
email: [{ value: this.email, disabled: disabled }, context.getValidation('email').validators],
|
||||
});
|
||||
}
|
||||
|
||||
createValidationContext(): ValidationContext {
|
||||
const baseContext: ValidationContext = new ValidationContext();
|
||||
const baseValidationArray: Validation[] = new Array<Validation>();
|
||||
baseValidationArray.push({ key: 'id', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'id')] });
|
||||
baseValidationArray.push({ key: 'name', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'name')] });
|
||||
baseValidationArray.push({ key: 'email', validators: [Validators.required, BackendErrorValidator(this.validationErrorModel, 'email')] });
|
||||
|
||||
baseContext.validation = baseValidationArray;
|
||||
return baseContext;
|
||||
}
|
||||
}
|
|
@ -249,12 +249,14 @@
|
|||
<mat-error *ngIf="formGroup.get('language').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div *ngIf="field.systemFieldType == planBlueprintSystemFieldTypeEnum.Contact">
|
||||
<div *ngIf="field.systemFieldType == planBlueprintSystemFieldTypeEnum.Contact" class="row">
|
||||
<div cdkDropList class="col-12" (cdkDropListDropped)="dropContacts($event)">
|
||||
<div *ngFor="let contact of formGroup.get('properties').get('contacts').controls; let contactIndex=index;" cdkDrag class="row align-items-center" [cdkDragDisabled]="formGroup.disabled || !canEdit" (mouseenter)="onContactHover(contactIndex)" (mouseleave)="clearHoveredContact()">
|
||||
<div class="col-12 col-xl-auto pr-0">
|
||||
<span *ngIf="!isContactSelected(contactIndex)" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
|
||||
<mat-icon *ngIf="isContactSelected(contactIndex)" [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
|
||||
<span *ngIf="!isContactSelected(contactIndex)" class="ml-2" style="font-size: 18px; box-sizing: border-box; display: inline-block; padding: 0.15rem 0.435rem 0.3rem 0.435rem;">{{contactIndex + 1}}</span>
|
||||
<span *ngIf="isContactSelected(contactIndex)" class="ml-2">
|
||||
<mat-icon [ngClass]="{'drag-handle-disabled': formGroup.disabled || !canEdit}" cdkDragHandle class="drag-handle">drag_indicator</mat-icon>
|
||||
</span>
|
||||
</div>
|
||||
<div class="col pt-3">
|
||||
<div class="row">
|
||||
|
@ -298,12 +300,10 @@
|
|||
<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('backendError')">{{formGroup.get('properties').get('contacts').getError('backendError').message}}</mat-error>
|
||||
<mat-error *ngIf="formGroup.get('properties').get('contacts').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button mat-icon-button (click)="addContact()" [disabled]="formGroup.disabled || isFinalized || (!this.canSave && !isNew)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<button mat-icon-button (click)="addContact()" [disabled]="formGroup.disabled || isFinalized || (!this.canSave && !isNew)">
|
||||
<mat-icon>add</mat-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="field.systemFieldType == planBlueprintSystemFieldTypeEnum.AccessRights">
|
||||
|
|
|
@ -59,6 +59,7 @@ import { PlanEditorModel, PlanFieldIndicator } from './plan-editor.model';
|
|||
import { PlanEditorService } from './plan-editor.service';
|
||||
import { PlanEditorEntityResolver } from './resolvers/plan-editor-enitity.resolver';
|
||||
import { FormAnnotationService } from '@app/ui/annotations/annotation-dialog-component/form-annotation.service';
|
||||
import { PlanAssociatedUser } from '@app/core/model/user/user';
|
||||
|
||||
@Component({
|
||||
selector: 'app-plan-editor',
|
||||
|
@ -656,12 +657,16 @@ export class PlanEditorComponent extends BaseEditor<PlanEditorModel, Plan> imple
|
|||
maxWidth: '700px',
|
||||
maxHeight: '80vh',
|
||||
data: {
|
||||
contactFormGroup: (this.formGroup.get('properties').get('contacts') as FormArray).at(contactIndex),
|
||||
label: field.label
|
||||
}
|
||||
});
|
||||
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe((result: Plan) => {
|
||||
dialogRef.afterClosed().pipe(takeUntil(this._destroyed)).subscribe((result: PlanAssociatedUser) => {
|
||||
if (result) {
|
||||
const contactFormGroup = (this.formGroup.get('properties').get('contacts') as FormArray).at(contactIndex);
|
||||
contactFormGroup.get('firstName').patchValue(result?.name);
|
||||
contactFormGroup.get('lastName').patchValue(null);
|
||||
contactFormGroup.get('email').patchValue(result?.email);
|
||||
|
||||
this.uiNotificationService.snackBarNotification(this.language.instant('PLAN-EDITOR.SNACK-BAR.SUCCESSFUL-PLAN-CONTACT'), SnackBarNotificationLevel.Success);
|
||||
}
|
||||
});
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -874,7 +874,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -922,7 +922,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -876,7 +876,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
@ -915,7 +915,7 @@
|
|||
"FIELDS": {
|
||||
"NAME": "Name",
|
||||
"DESCRIPTION": "Description",
|
||||
"STATUS": "Status",
|
||||
"INTERNAL-STATUS": "Internal Status",
|
||||
"UPDATED-AT": "Updated",
|
||||
"CREATED-AT": "Created",
|
||||
"IS-ACTIVE": "Is Active"
|
||||
|
|
|
@ -24,9 +24,9 @@
|
|||
<div *ngIf="!agreePrivacyPolicyNames" class="required-policy">{{'GENERAL.CONFIRMATION-DIALOG.ACTIONS.REQUIRED' | translate}}</div>
|
||||
</div>
|
||||
<div class="row" style="justify-content: space-between;">
|
||||
<div class="col-auto"><button mat-raised-button type="button" class="cancel-btn" (click)="cancel()">{{ data.cancelButton }}</button></div>
|
||||
<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="delete-btn">{{ data.confirmButton }}</button></div>
|
||||
<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" (click)="confirm()" class="submit-btn">{{ data.confirmButton }}</button></div>
|
||||
<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-raised-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="submiit-btn">{{ data.confirmButton }}</button></div>
|
||||
<div class="col-auto"><button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button></div>
|
||||
<div *ngIf="data.isDeleteConfirmation" class="col-auto"><button mat-button type="button" (click)="confirm()" class="rounded-btn delete">{{ data.confirmButton }}</button></div>
|
||||
<div *ngIf="!data.isDeleteConfirmation && !data.privacyPolicyNames" class="col-auto"><button mat-button type="button" (click)="confirm()" class="rounded-btn primary-inverted primary-inverted-hover">{{ data.confirmButton }}</button></div>
|
||||
<div *ngIf="!data.isDeleteConfirmation && data.privacyPolicyNames" class="col-auto"><button mat-button type="button" [disabled]="!agreePrivacyPolicyNames" (click)="confirm()" class="rounded-btn primary-inverted primary-inverted-hover">{{ data.confirmButton }}</button></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -17,15 +17,6 @@
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
border: 1px solid #b5b5b5;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.confirm {
|
||||
background-color: #2cba6c;
|
||||
color: #ffffff;
|
||||
|
@ -45,33 +36,4 @@
|
|||
font-size: smaller;
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
color: var(--primary-color);
|
||||
border: 1px solid var(--primary-color);
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.submit-btn[disabled] {
|
||||
border: 1px solid #b5b5b5 !important;
|
||||
}
|
||||
|
||||
.submit-btn:not([disabled]):hover {
|
||||
background-color: var(--primary-color);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
min-width: 101px;
|
||||
height: 43px;
|
||||
background: #ffffff;
|
||||
color: #ba2c2c;
|
||||
border: 1px solid #ba2c2c;
|
||||
border-radius: 30px;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,16 +6,16 @@
|
|||
<app-navigation-breadcrumb />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<button mat-button class="action-btn" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
<button mat-button class="rounded-btn secondary" (click)="cancel()" type="button">{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canDelete">
|
||||
<button mat-button class="action-btn" type="button" (click)="delete()">
|
||||
<button mat-button class="rounded-btn secondary" type="button" (click)="delete()">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.DELETE' | translate}}
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-auto" *ngIf="canSave">
|
||||
<button mat-button class="action-btn" (click)="formSubmit()">
|
||||
<button mat-button class="rounded-btn secondary" (click)="formSubmit()">
|
||||
<mat-icon>save</mat-icon>
|
||||
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}
|
||||
</button>
|
||||
|
|
|
@ -19,21 +19,3 @@
|
|||
background-color: #b0b0b0;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
border-radius: 30px;
|
||||
background-color: var(--secondary-color);
|
||||
border: 1px solid transparent;
|
||||
padding-left: 2em;
|
||||
padding-right: 2em;
|
||||
box-shadow: 0px 3px 6px #1E202029;
|
||||
|
||||
transition-property: background-color, color;
|
||||
transition-duration: 200ms;
|
||||
transition-delay: 50ms;
|
||||
transition-timing-function: ease-in-out;
|
||||
&:disabled{
|
||||
background-color: #CBCBCB;
|
||||
color: #FFF;
|
||||
border: 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -98,9 +98,9 @@
|
|||
<mat-icon>more_horiz</mat-icon>
|
||||
</button>
|
||||
<mat-menu #actionsMenu="matMenu">
|
||||
<button *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/notification-templates/', row.id])">
|
||||
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/notification-templates/', row.id])">
|
||||
<mat-icon>edit</mat-icon>{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.ACTIONS.EDIT' | translate}}
|
||||
</button>
|
||||
</a>
|
||||
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
|
||||
<mat-icon>delete</mat-icon>
|
||||
{{'NOTIFICATION-SERVICE.NOTIFICATION-TEMPLATE-LISTING.ACTIONS.DELETE' | translate}}
|
||||
|
|
|
@ -458,6 +458,10 @@ button, .mdc-button, .mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[
|
|||
border: 1px solid #CBCBCB;
|
||||
color: #CBCBCB;
|
||||
}
|
||||
&.primary-inverted-hover:hover {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue