MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Merge remote-tracking branch 'origin/accessibility-refactor' into dmp-refactoring 

# Conflicts:
#	frontend/src/app/core/core-service.module.ts
#	frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
#	frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
#	frontend/src/app/ui/description/description-copy-dialog/description-copy-dialog.component.ts
#	frontend/src/app/ui/description/editor/description-editor.component.html
#	frontend/src/app/ui/description/editor/description-form/components/form-field-set/form-field-set.component.html
#	frontend/src/app/ui/description/listing/filtering/description-filter-dialogue/description-filter-dialog.component.ts
#	frontend/src/app/ui/description/listing/filtering/description-filter.component.html
#	frontend/src/app/ui/description/listing/listing-item/description-listing-item.component.html
#	frontend/src/app/ui/description/overview/description-overview.component.html
#	frontend/src/app/ui/description/overview/description-overview.component.scss
#	frontend/src/app/ui/description/start-new-description-dialog/start-new-description-dialog.component.ts
#	frontend/src/app/ui/plan/listing/filtering/plan-filter-dialog/plan-filter-dialog.component.ts
#	frontend/src/app/ui/plan/listing/filtering/plan-filter.component.html
#	frontend/src/app/ui/plan/overview/plan-overview.component.html
#	frontend/src/app/ui/plan/overview/plan-overview.component.scss
#	frontend/src/app/ui/plan/plan-editor-blueprint/plan-editor.component.html
This commit is contained in:
Diamantis Tziotzios 2024-10-15 10:44:44 +03:00
parent 8f9547f498 e1a8e18431
commit 758dafafbb
338 changed files with 3591 additions and 3720 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
backend/core/src/main/java/org/opencdmp/commons/types/tenantconfiguration/CssColorsTenantConfigurationEntity.java
View File

@ -2,9 +2,7 @@ package org.opencdmp.commons.types.tenantconfiguration;
public class CssColorsTenantConfigurationEntity {
private String primaryColor;
private String primaryColor2;
private String primaryColor3;
private String secondaryColor;
private String cssOverride;
public String getPrimaryColor() {
return primaryColor;
@ -14,27 +12,11 @@ public class CssColorsTenantConfigurationEntity {
this.primaryColor = primaryColor;
}
public String getPrimaryColor2() {
return primaryColor2;
public String getCssOverride() {
return cssOverride;
}
public void setPrimaryColor2(String primaryColor2) {
this.primaryColor2 = primaryColor2;
}
public String getPrimaryColor3() {
return primaryColor3;
}
public void setPrimaryColor3(String primaryColor3) {
this.primaryColor3 = primaryColor3;
}
public String getSecondaryColor() {
return secondaryColor;
}
public void setSecondaryColor(String secondaryColor) {
this.secondaryColor = secondaryColor;
public void setCssOverride(String cssOverride) {
this.cssOverride = cssOverride;
}
}

4
backend/core/src/main/java/org/opencdmp/model/builder/tenantconfiguration/CssColorsTenantConfigurationBuilder.java
View File

@ -44,9 +44,7 @@ public class CssColorsTenantConfigurationBuilder extends BaseBuilder<CssColorsTe
for (CssColorsTenantConfigurationEntity d : data) {
CssColorsTenantConfiguration m = new CssColorsTenantConfiguration();
if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._primaryColor))) m.setPrimaryColor(d.getPrimaryColor());
if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._primaryColor2))) m.setPrimaryColor2(d.getPrimaryColor2());
if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._primaryColor3))) m.setPrimaryColor3(d.getPrimaryColor3());
if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._secondaryColor))) m.setSecondaryColor(d.getSecondaryColor());
if (fields.hasField(this.asIndexer(CssColorsTenantConfiguration._cssOverride))) m.setCssOverride(d.getCssOverride());
models.add(m);
}
this.logger.debug("build {} items", Optional.of(models).map(List::size).orElse(0));

45
backend/core/src/main/java/org/opencdmp/model/persist/tenantconfiguration/CssColorsTenantConfigurationPersist.java
View File

@ -16,12 +16,8 @@ import java.util.List;
public class CssColorsTenantConfigurationPersist {
private String primaryColor;
public static final String _primaryColor = "primaryColor";
private String primaryColor2;
public static final String _primaryColor2 = "primaryColor2";
private String primaryColor3;
public static final String _primaryColor3 = "primaryColor3";
private String secondaryColor;
public static final String _secondaryColor = "secondaryColor";
private String cssOverride;
public static final String _cssOverride = "cssOverride";
public String getPrimaryColor() {
return primaryColor;
@ -31,32 +27,14 @@ public class CssColorsTenantConfigurationPersist {
this.primaryColor = primaryColor;
}
public String getPrimaryColor2() {
return primaryColor2;
public String getCssOverride() {
return cssOverride;
}
public void setPrimaryColor2(String primaryColor2) {
this.primaryColor2 = primaryColor2;
public void setCssOverride(String cssOverride) {
this.cssOverride = cssOverride;
}
public String getPrimaryColor3() {
return primaryColor3;
}
public void setPrimaryColor3(String primaryColor3) {
this.primaryColor3 = primaryColor3;
}
public String getSecondaryColor() {
return secondaryColor;
}
public void setSecondaryColor(String secondaryColor) {
this.secondaryColor = secondaryColor;
}
@Component(CssColorsTenantConfigurationPersist.CssColorsTenantConfigurationPersistValidator.ValidatorName)
@Scope(ConfigurableBeanFactory.SCOPE_PROTOTYPE)
public static class CssColorsTenantConfigurationPersistValidator extends BaseValidator<CssColorsTenantConfigurationPersist> {
@ -80,16 +58,7 @@ public class CssColorsTenantConfigurationPersist {
return Arrays.asList(
this.spec()
.must(() -> !this.isEmpty(item.getPrimaryColor()))
.failOn(CssColorsTenantConfigurationPersist._primaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor}, LocaleContextHolder.getLocale())),
this.spec()
.must(() -> !this.isEmpty(item.getPrimaryColor2()))
.failOn(CssColorsTenantConfigurationPersist._primaryColor2).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor2}, LocaleContextHolder.getLocale())),
this.spec()
.must(() -> !this.isEmpty(item.getPrimaryColor3()))
.failOn(CssColorsTenantConfigurationPersist._primaryColor3).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor3}, LocaleContextHolder.getLocale())),
this.spec()
.must(() -> !this.isEmpty(item.getSecondaryColor()))
.failOn(CssColorsTenantConfigurationPersist._secondaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._secondaryColor}, LocaleContextHolder.getLocale()))
.failOn(CssColorsTenantConfigurationPersist._primaryColor).failWith(messageSource.getMessage("Validation_Required", new Object[]{CssColorsTenantConfigurationPersist._primaryColor}, LocaleContextHolder.getLocale()))
);
}
}

33
backend/core/src/main/java/org/opencdmp/model/tenantconfiguration/CssColorsTenantConfiguration.java
View File

@ -3,12 +3,9 @@ package org.opencdmp.model.tenantconfiguration;
public class CssColorsTenantConfiguration {
private String primaryColor;
public static final String _primaryColor = "primaryColor";
private String primaryColor2;
public static final String _primaryColor2 = "primaryColor2";
private String primaryColor3;
public static final String _primaryColor3 = "primaryColor3";
private String secondaryColor;
public static final String _secondaryColor = "secondaryColor";
private String cssOverride;
public static final String _cssOverride = "cssOverride";
public String getPrimaryColor() {
return primaryColor;
@ -18,27 +15,11 @@ public class CssColorsTenantConfiguration {
this.primaryColor = primaryColor;
}
public String getPrimaryColor2() {
return primaryColor2;
public String getCssOverride() {
return cssOverride;
}
public void setPrimaryColor2(String primaryColor2) {
this.primaryColor2 = primaryColor2;
}
public String getPrimaryColor3() {
return primaryColor3;
}
public void setPrimaryColor3(String primaryColor3) {
this.primaryColor3 = primaryColor3;
}
public String getSecondaryColor() {
return secondaryColor;
}
public void setSecondaryColor(String secondaryColor) {
this.secondaryColor = secondaryColor;
public void setCssOverride(String cssOverride) {
this.cssOverride = cssOverride;
}
}

4
backend/core/src/main/java/org/opencdmp/service/tenantconfiguration/TenantConfigurationServiceImpl.java
View File

@ -238,9 +238,7 @@ public class TenantConfigurationServiceImpl implements TenantConfigurationServic
CssColorsTenantConfigurationEntity data = new CssColorsTenantConfigurationEntity();
if (persist == null) return data;
data.setPrimaryColor(persist.getPrimaryColor());
data.setPrimaryColor2(persist.getPrimaryColor2());
data.setPrimaryColor3(persist.getPrimaryColor3());
data.setSecondaryColor(persist.getSecondaryColor());
data.setCssOverride(persist.getCssOverride());
return data;
}

4
frontend/angular.json
View File

@ -26,8 +26,8 @@
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss",
"src/assets/scss/material-dashboard.scss",
"src/styles.scss",
"node_modules/cookieconsent/build/cookieconsent.min.css"
],
"scripts": [
@ -113,8 +113,8 @@
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/assets/scss/material-dashboard.scss",
"src/styles.scss",
"src/assets/scss/material-dashboard.scss",
"node_modules/tinymce/tinymce.min.js"
],
"assets": [

7
frontend/package.json
View File

@ -18,11 +18,12 @@
"@angular/compiler": "^18.0.2",
"@angular/core": "^18.0.2",
"@angular/forms": "^18.0.2",
"@angular/material-moment-adapter": "^18.0.2",
"@angular/material-moment-adapter": "^18.2.7",
"@angular/platform-browser": "^18.0.2",
"@kolkov/angular-editor": "^2.1.0",
"@mat-datetimepicker/core": "^13.0.2",
"@mat-datetimepicker/moment": "^13.0.2",
"@material/material-color-utilities": "^0.3.0",
"@ngx-translate/core": "^15.0.0",
"@ngx-translate/http-loader": "^8.0.0",
"@swimlane/ngx-datatable": "^20.1.0",
@ -53,11 +54,11 @@
},
"devDependencies": {
"@angular-devkit/build-angular": "^18.0.3",
"@angular/cdk": "^18.0.2",
"@angular/cdk": "^18.2.7",
"@angular/cli": "18.0.3",
"@angular/compiler-cli": "^18.0.2",
"@angular/language-service": "^18.0.2",
"@angular/material": "^18.0.2",
"@angular/material": "^18.2.7",
"@angular/platform-browser-dynamic": "^18.0.2",
"@angular/router": "^18.0.2",
"@types/dragula": "^3.7.5",

10
frontend/src/annotation-service/ui/admin/status/editor/status-editor.component.html
View File

@ -8,16 +8,16 @@
</div>
<div class="col-auto">
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto " *ngIf="canDelete">
<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
<mat-icon>delete</mat-icon>
{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="rounded-btn primary" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
<button mat-button class="padded-shadow-btn primary" [disabled]="!formGroup?.touched" (click)="save(); formSubmit()">
<mat-icon>save</mat-icon>
{{'ANNOTATION-SERVICE.STATUS-EDITOR.ACTIONS.SAVE' | translate}}
</button>
@ -41,7 +41,7 @@
</div>
<div class="col-12 mt-1">
<div class="container-fluid">
<div class="row">
<div class="row gap-1-rem">
<div class="col-12">
<mat-form-field class="w-100">
<input matInput placeholder="{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.LABEL' | translate}}" [formControl]="formGroup.get('label')" required>
@ -52,7 +52,7 @@
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'ANNOTATION-SERVICE.STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}}</mat-label>
<mat-select [formControl]="formGroup.get('internalStatus')">
<mat-select [formControl]="formGroup.get('internalStatus')" required>
<mat-option *ngFor="let internalStatus of internalStatusEnum" [value]="internalStatus">{{enumUtils.toInternalStatusString(internalStatus)}}</mat-option>
<mat-option [value]="null">{{'ANNOTATION-SERVICE.STATUS-EDITOR.DEFAULT-VALUE.NONE' | translate}}</mat-option>
</mat-select>

6
frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.TITLE' | translate}}</h4>
@ -42,12 +42,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'ANNOTATION-SERVICE.STATUS-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

6
frontend/src/annotation-service/ui/admin/status/listing/filters/status-listing-filters.component.ts
View File

@ -1,10 +1,11 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { BaseComponent } from '@common/base/base.component';
import { IsActive } from '@notification-service/core/enum/is-active.enum';
import { nameof } from 'ts-simple-nameof';
import { StatusFilter } from '@annotation-service/core/query/status.lookup';
import { InternalStatus } from '@annotation-service/core/enum/internal-status.enum';
import { AnnotationServiceEnumUtils } from '@annotation-service/core/formatting/enum-utils.service';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-status-listing-filters',
@ -12,7 +13,7 @@ import { AnnotationServiceEnumUtils } from '@annotation-service/core/formatting/
styleUrls: ['./status-listing-filters.component.scss']
})
export class StatusListingFiltersComponent extends BaseComponent implements OnInit, OnChanges {
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
@Input() readonly filter: StatusFilter;
@Output() filterChange = new EventEmitter<StatusFilter>();
internalStatusEnumValues = this.enumUtils.getEnumValues<InternalStatus>(InternalStatus)
@ -23,6 +24,7 @@ export class StatusListingFiltersComponent extends BaseComponent implements OnIn
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: AnnotationServiceEnumUtils,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

4
frontend/src/annotation-service/ui/admin/status/listing/status-listing.component.html
View File

@ -7,7 +7,7 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary"
<button mat-button class="padded-shadow-btn secondary"
*ngIf="authService.hasPermission(authService.permissionEnum.EditStatus)"
[routerLink]="routerUtils.generateUrl(['/annotation-statuses/new'])">
<mat-icon>add</mat-icon>
@ -76,7 +76,7 @@
<ng-template #actions let-row="row" let-item>
<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">

41
frontend/src/app/app.component.html
View File

@ -1,20 +1,23 @@
<div class="wrapper" *ngIf="!showOnlyRouterOutlet">
<app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>
<mat-sidenav-container fullscreen class="main-container">
<mat-sidenav #sidenav mode="side" opened class="sidenav" [fixedInViewport]="true" [fixedTopGap]="80">
<app-sidebar></app-sidebar>
</mat-sidenav>
<mat-sidenav-content class="sidenav-content">
<div id="main-page">
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
<div [class.accessibility-theme]="fontService.isLargeText()">
<ngx-guided-tour *ngIf="!showOnlyRouterOutlet"
[skipText]="'DASHBOARD.TOUR-GUIDE.LEAVE-TOUR'| translate"
[nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
></ngx-guided-tour>
<button class="skip-to-main-content" (click)="skipToMain()" tabindex="0">{{'ALT-TEXT.SKIP-TO-MAIN-CONTENT' | translate}}</button>
<div id="cookies-consent"></div>
<div class="wrapper" *ngIf="!showOnlyRouterOutlet">
<app-navbar (sidebarToggled)="sidenav.toggle(); toggleNavbar($event);"></app-navbar>
<mat-sidenav-container fullscreen class="main-container">
<mat-sidenav #sidenav mode="side" opened class="sidenav" [fixedInViewport]="true" [fixedTopGap]="80">
<app-sidebar></app-sidebar>
</mat-sidenav>
<mat-sidenav-content class="sidenav-content">
<div id="main-page" tabindex="0">
<router-outlet (activate)='onActivate($event)' (deactivate)='onDeactivate($event)'></router-outlet>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
<app-notification *ngIf="!showOnlyRouterOutlet"></app-notification>
<router-outlet *ngIf="showOnlyRouterOutlet"></router-outlet>
</div>
<app-notification *ngIf="!showOnlyRouterOutlet"></app-notification>
<router-outlet *ngIf="showOnlyRouterOutlet"></router-outlet>
<ngx-guided-tour *ngIf="!showOnlyRouterOutlet"
[skipText]="'DASHBOARD.TOUR-GUIDE.LEAVE-TOUR'| translate"
[nextText]="'DASHBOARD.TOUR-GUIDE.GOT-IT'| translate"
></ngx-guided-tour>

18
frontend/src/app/app.component.scss
View File

@ -23,6 +23,12 @@
opacity: 1;
}
@media (max-width: 500px) {
.sidenav {
width: 100% !important;
}
}
.sidenav-content {
background-color: whitesmoke;
}
@ -35,3 +41,15 @@
::ng-deep .mat-chip {
height: auto !important;
}
.skip-to-main-content {
position: fixed;
left: -190px;
z-index: -1;
&:focus, &:active {
background-color: var(--sys-primary);
z-index: 1001;
left: 50vw;
color: var(--sys-on-primary);
}
}

11
frontend/src/app/app.component.ts
View File

@ -1,7 +1,7 @@
import { of as observableOf, Subscription } from 'rxjs';
import { AfterViewInit, Component, OnInit, ViewChild } from '@angular/core';
import { AfterViewInit, Component, computed, HostBinding, OnInit, Signal, signal, ViewChild } from '@angular/core';
import { ActivatedRoute, NavigationEnd, NavigationStart, Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { filter, map, switchMap } from 'rxjs/operators';
@ -20,6 +20,7 @@ import { TimezoneService } from './core/services/timezone/timezone-service';
import { BreadcrumbService } from './ui/misc/breadcrumb/breadcrumb.service';
import { TenantHandlingService } from './core/services/tenant/tenant-handling.service';
import { MatIconRegistry } from '@angular/material/icon';
import { FontAccessibilityService } from './core/services/font-accessibility.service';
declare const gapi: any;
@ -40,6 +41,7 @@ export class AppComponent implements OnInit, AfterViewInit {
cssConfigLoaded = false;
@ViewChild('sidenav') sidenav: MatSidenav;
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
constructor(
private router: Router,
@ -59,6 +61,7 @@ export class AppComponent implements OnInit, AfterViewInit {
private breadcrumbService: BreadcrumbService,
private sanitizer: DomSanitizer,
public iconRegistry: MatIconRegistry,
protected fontService: FontAccessibilityService
) {
this.initializeServices();
this.matomoService.init();
@ -134,6 +137,7 @@ export class AppComponent implements OnInit, AfterViewInit {
if (child.snapshot.data && child.snapshot.data.showOnlyRouterOutlet) {
this.showOnlyRouterOutlet = true;
this.ccService.getConfig().enabled = false;
this.ccService.getConfig().container = document.getElementById('cookies-consent');
this.ccService.destroy();
this.ccService.init(this.ccService.getConfig());
} else {
@ -143,6 +147,7 @@ export class AppComponent implements OnInit, AfterViewInit {
} else {
this.ccService.getConfig().enabled = true;
}
this.ccService.getConfig().container = document.getElementById('cookies-consent');
this.ccService.destroy();
this.ccService.init(this.ccService.getConfig());
}
@ -261,5 +266,9 @@ export class AppComponent implements OnInit, AfterViewInit {
toggleNavbar(event) {
document.getElementById('hamburger').classList.toggle("change");
}
skipToMain() {
document.getElementById('main-page')?.focus();
}
}

71
frontend/src/app/core/core-service.module.ts
View File

@ -1,4 +1,8 @@
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { CanDeactivateGuard } from '@app/library/deactivate/can-deactivate.guard';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { FilterService } from '@common/modules/text-filter/filter-service';
import { CookieService } from 'ngx-cookie-service';
import { AuthGuard } from './auth-guard.service';
import { AuthService } from './services/auth/auth.service';
@ -6,53 +10,51 @@ import { ContactSupportService } from './services/contact-support/contact-suppor
import { CultureService } from './services/culture/culture-service';
import { LanguageInfoService } from './services/culture/language-info-service';
import { DashboardService } from './services/dashboard/dashboard.service';
import { DefaultUserLocaleService } from './services/default-user-locale/default-user-locale.service';
import { DepositService } from './services/deposit/deposit.service';
import { DescriptionStatusService } from './services/description-status/description-status.service';
import { DescriptionTemplateTypeService } from './services/description-template-type/description-template-type.service';
import { PlanBlueprintService } from './services/plan/plan-blueprint.service';
import { PlanService } from './services/plan/plan.service';
import { DescriptionTemplateService } from './services/description-template/description-template.service';
import { DescriptionWorkflowService } from './services/description-workflow/description-workflow.service';
import { DescriptionService } from './services/description/description.service';
import { EvaluatorHttpService } from './services/evaluator/evaluator.http.service';
import { FileTransformerHttpService } from './services/file-transformer/file-transformer.http.service';
import { FileTransformerService } from './services/file-transformer/file-transformer.service';
import { FontAccessibilityService } from './services/font-accessibility.service';
import { BaseHttpV2Service } from './services/http/base-http-v2.service';
import { PrincipalService } from './services/http/principal.service';
import { LanguageHttpService } from './services/language/language.http.service';
import { LanguageService } from './services/language/language.service';
import { LockService } from './services/lock/lock.service';
import { LoggingService } from './services/logging/logging-service';
import { UiNotificationService } from './services/notification/ui-notification-service';
import { ProgressIndicationService } from './services/progress-indication/progress-indication-service';
import { TimezoneService } from './services/timezone/timezone-service';
import { CollectionUtils } from './services/utilities/collection-utils.service';
import { TypeUtils } from './services/utilities/type-utils.service';
import { CanDeactivateGuard } from '@app/library/deactivate/can-deactivate.guard';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { FilterService } from '@common/modules/text-filter/filter-service';
import { DescriptionTemplateService } from './services/description-template/description-template.service';
import { DescriptionService } from './services/description/description.service';
import { FileTransformerService } from './services/file-transformer/file-transformer.service';
import { PrincipalService } from './services/http/principal.service';
import { LanguageHttpService } from './services/language/language.http.service';
import { MaintenanceService } from './services/maintenance/maintenance.service';
import { UiNotificationService } from './services/notification/ui-notification-service';
import { PlanBlueprintService } from './services/plan/plan-blueprint.service';
import { PlanStatusService } from './services/plan/plan-status.service';
import { PlanWorkflowService } from './services/plan/plan-workflow.service';
import { PlanService } from './services/plan/plan.service';
import { PrefillingSourceService } from './services/prefilling-source/prefilling-source.service';
import { ProgressIndicationService } from './services/progress-indication/progress-indication-service';
import { ReferenceTypeService } from './services/reference-type/reference-type.service';
import { ReferenceService } from './services/reference/reference.service';
import { RouterUtilsService } from './services/router/router-utils.service';
import { SemanticsService } from './services/semantic/semantics.service';
import { StorageFileService } from './services/storage-file/storage-file.service';
import { SupportiveMaterialService } from './services/supportive-material/supportive-material.service';
import { TagService } from './services/tag/tag.service';
import { TenantConfigurationService } from './services/tenant-configuration/tenant-configuration.service';
import { TenantHandlingService } from './services/tenant/tenant-handling.service';
import { TenantService } from './services/tenant/tenant.service';
import { TimezoneService } from './services/timezone/timezone-service';
import { UsageLimitService } from './services/usage-limit/usage.service';
import { UserSettingsHttpService } from './services/user-settings/user-settings-http.service';
import { UserSettingsService } from './services/user-settings/user-settings.service';
import { UserService } from './services/user/user.service';
import { CollectionUtils } from './services/utilities/collection-utils.service';
import { FileUtils } from './services/utilities/file-utils.service';
import { QueryParamsService } from './services/utilities/query-params.service';
import { FileTransformerHttpService } from './services/file-transformer/file-transformer.http.service';
import { SemanticsService } from './services/semantic/semantics.service';
import { PrefillingSourceService } from './services/prefilling-source/prefilling-source.service';
import { VisibilityRulesService } from '@app/ui/description/editor/description-form/visibility-rules/visibility-rules.service';
import { StorageFileService } from './services/storage-file/storage-file.service';
import { TenantConfigurationService } from './services/tenant-configuration/tenant-configuration.service';
import { DefaultUserLocaleService } from './services/default-user-locale/default-user-locale.service';
import { TenantHandlingService } from './services/tenant/tenant-handling.service';
import { RouterUtilsService } from './services/router/router-utils.service';
import { UsageLimitService } from './services/usage-limit/usage.service';
import { PlanStatusService } from './services/plan/plan-status.service';
import { DescriptionStatusService } from './services/description-status/description-status.service';
import { PlanWorkflowService } from './services/plan/plan-workflow.service';
import { DescriptionWorkflowService } from './services/description-workflow/description-workflow.service';
import { EvaluatorHttpService } from './services/evaluator/evaluator.http.service';
import { TypeUtils } from './services/utilities/type-utils.service';
//
//
// This is shared module that provides all the services. Its imported only once on the AppModule.
@ -122,10 +124,11 @@ export class CoreServiceModule {
TenantHandlingService,
RouterUtilsService,
UsageLimitService,
PlanStatusService,
DescriptionStatusService,
PlanWorkflowService,
DescriptionWorkflowService
PlanStatusService,
DescriptionStatusService,
PlanWorkflowService,
DescriptionWorkflowService,
FontAccessibilityService
],
};
}

8
frontend/src/app/core/model/tenant-configuaration/tenant-configuration.ts
View File

@ -14,9 +14,7 @@ export interface TenantConfiguration extends BaseEntity{
export interface CssColorsTenantConfiguration{
primaryColor: string;
primaryColor2: string;
primaryColor3: string;
secondaryColor: string;
cssOverride: string;
}
export interface DefaultUserLocaleTenantConfiguration{
@ -70,9 +68,7 @@ export interface TenantConfigurationPersist extends BaseEntityPersist{
export interface CssColorsTenantConfigurationPersist{
primaryColor: string;
primaryColor2: string;
primaryColor3: string;
secondaryColor: string;
cssOverride: string;
}
export interface DefaultUserLocaleTenantConfigurationPersist{

4
frontend/src/app/core/services/configuration/configuration.service.ts
View File

@ -294,9 +294,7 @@ export class ConfigurationService extends BaseComponent {
if (config.defaultCssColors) {
this._cssColorsTenantConfiguration = {
primaryColor: config.defaultCssColors.primaryColor,
primaryColor2: config.defaultCssColors.primaryColor2,
primaryColor3: config.defaultCssColors.primaryColor3,
secondaryColor: config.defaultCssColors.secondaryColor,
cssOverride: config.defaultCssColors.cssOverride
}
}
}

23
frontend/src/app/core/services/font-accessibility.service.ts Normal file
View File

@ -0,0 +1,23 @@
import { computed, Injectable, Signal, signal } from '@angular/core';
import { toggleFontSize } from '@app/ui/misc/theme-helper';
@Injectable()
export class FontAccessibilityService {
private _accessibleFontSignal = signal<boolean>(false);
public accessibleFontSignal = computed(() => this._accessibleFontSignal())
constructor() {
this._accessibleFontSignal.set(localStorage.getItem('largeText') === 'true');
}
public isLargeText(): boolean {
return this._accessibleFontSignal();
}
public toggleFontSize(){
const nextValue = this.isLargeText() ? 'false' : 'true';
localStorage.setItem('largeText', nextValue);
this._accessibleFontSignal.set(!this._accessibleFontSignal())
toggleFontSize(this.isLargeText());
}
}

15
frontend/src/app/core/services/tenant/tenant-handling.service.ts
View File

@ -7,6 +7,7 @@ import { BaseService } from '@common/base/base.service';
import { Observable, takeUntil } from 'rxjs';
import { nameof } from 'ts-simple-nameof';
import { TenantConfigurationService } from '../tenant-configuration/tenant-configuration.service';
import { generateDynamicTheme, overrideCss } from '@app/ui/misc/theme-helper';
@Injectable()
export class TenantHandlingService extends BaseService {
@ -74,19 +75,19 @@ export class TenantHandlingService extends BaseService {
return this.tenantConfigurationService.getCurrentTenantType(TenantConfigurationType.CssColors, [
nameof<TenantConfiguration>(x => x.type),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor2)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.primaryColor3)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.secondaryColor)].join('.'),
[nameof<TenantConfiguration>(x => x.cssColors), nameof<CssColorsTenantConfiguration>(x => x.cssOverride)].join('.')
]);
}
public applyTenantCssColors(cssColors: CssColorsTenantConfiguration) {
if (cssColors) {
if (cssColors.primaryColor) document.documentElement.style.setProperty(`--primary-color`, cssColors.primaryColor);
if (cssColors.primaryColor2) document.documentElement.style.setProperty(`--primary-color-2`, cssColors.primaryColor2);
if (cssColors.primaryColor3) document.documentElement.style.setProperty(`--primary-color-3`, cssColors.primaryColor3);
if (cssColors.secondaryColor) document.documentElement.style.setProperty(`--secondary-color`, cssColors.secondaryColor);
if (cssColors.primaryColor){
generateDynamicTheme(cssColors.primaryColor);
}
if (cssColors.cssOverride){
overrideCss(cssColors.cssOverride);
}
}
}
}

4
frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -11,7 +11,7 @@
}" />
<span *ngIf="!_selectedValueTemplate(selectedItem)" class="chip-text" [title]="_displayFn(selectedItem)">{{_displayFn(selectedItem)}}</span>
</ng-container>
<button matChipRemove *ngIf="!disabled && _canRemoveItem(getSelectedItem(value))" (click)="_removeSelectedItem(getSelectedItem(value), $event)">
<button matChipRemove *ngIf="!disabled && _canRemoveItem(getSelectedItem(value))" (click)="_removeSelectedItem(getSelectedItem(value), $event)" [attr.aria-label]="'COMMONS.ACTIONS.REMOVE' | translate">
<mat-icon>cancel</mat-icon>
</button>
</mat-chip-row>
@ -19,7 +19,7 @@
</mat-chip-grid>
</div>
<div class="col-12">
<input matInput #autocompleteInput [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
<input matInput #autocompleteInput [id]="id" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" autocomplete="off" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)" [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="autoSelectFirstOptionOnBlur" (matChipInputTokenEnd)="_addItem($event)">
</div>
<mat-autocomplete #autocomplete="matAutocomplete" [displayWith]="_displayFn.bind(this)" (optionSelected)="_optionSelected($event)" [classList]="['myClass']">
<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">

4
frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
View File

@ -65,7 +65,7 @@
line-clamp: 1;
}
::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
::ng-deep .autocomplete-option > .mdc-list-item__--sys-on-primary {
margin: 0 !important;
width: 100%;
}
@ -80,7 +80,7 @@
}
mat-icon:hover {
color: var(--primary-color);
color: var(--sys-primary);
}
}

2
frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.ts
View File

@ -54,6 +54,7 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
@Input()
separatorKeysCodes = [];
@Input({required: false}) id: string = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
// Selected Option Event
@Output() optionSelected: EventEmitter<any> = new EventEmitter();
@ -62,7 +63,6 @@ export class MultipleAutoCompleteComponent extends _CustomComponentMixinBase imp
@Output() optionActionClicked: EventEmitter<any> = new EventEmitter();
id = `multiple-autocomplete-${MultipleAutoCompleteComponent.nextId++}`;
stateChanges = new Subject<void>();
valueOnBlur = new BehaviorSubject<any>(null);

2
frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
View File

@ -1,5 +1,5 @@
<div class="row auto-complete">
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
<input matInput #autocompleteInput class="col-12" [id]="id" [name]="id" autocomplete="off" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)">
<!-- The attribute autocomplete="nope", set by downshift, is ignored in Chrome 67 and Opera 54 (latest at the time of writing)
<input matInput #autocompleteInput class="col-12" [name]="id" autocomplete="nope" #autocompleteTrigger="matAutocompleteTrigger" [placeholder]="placeholder" [matAutocomplete]="autocomplete" [value]="inputValue" (keyup)="onKeyUp($event)" [disabled]="disabled" (focus)="_onInputFocus()" (blur)="onBlur($event)"> -->
<mat-icon *ngIf="!disabled" class="align-arrow-right" matSuffix>arrow_drop_down</mat-icon>

4
frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
View File

@ -35,7 +35,7 @@
}
}
::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
::ng-deep .autocomplete-option > .mdc-list-item__--sys-on-primary {
margin: 0 !important;
width: 100%;
}
@ -45,7 +45,7 @@
margin: 0px 5px 0px 10px;
}
mat-icon:hover {
color: var(--primary-color);
color: var(--sys-primary);
}
}

3
frontend/src/app/library/auto-complete/single/single-auto-complete.component.ts
View File

@ -40,6 +40,8 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
@ViewChild('autocompleteInput', { static: true }) autocompleteInput: ElementRef;
@Input() initialSelectedData: any;
@Input({required: false}) id: string = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`;
@Input()
get configuration(): SingleAutoCompleteConfiguration { return this._configuration; }
set configuration(configuration: SingleAutoCompleteConfiguration) {
@ -55,7 +57,6 @@ export class SingleAutoCompleteComponent extends _CustomComponentMixinBase imple
@Output() optionSelected: EventEmitter<any> = new EventEmitter();
@Output() optionActionClicked: EventEmitter<any> = new EventEmitter();
id = `single-autocomplete-${SingleAutoCompleteComponent.nextId++}`;
stateChanges = new Subject<void>();
focused = false;
controlType = 'single-autocomplete';

9
frontend/src/app/library/guided-tour/guided-tour.component.html
View File

@ -10,6 +10,7 @@
</div>
<div *ngIf="currentTourStep && !isOrbShowing">
<div #tourStep *ngIf="currentTourStep"
role="alert"
class="tour-step tour-{{ currentTourStep.orientation }}"
[ngClass]="{ 'page-tour-step': !currentTourStep.selector }"
[style.top.px]="(currentTourStep.selector && selectedElementRect ? topPosition : null)"
@ -26,18 +27,18 @@
{{ currentTourStep.title }}
</h2>
<div class="tour-buttons">
<button *ngIf="!guidedTourService.onResizeMessage" mat-button type="button" class="rounded-btn primary"
<button *ngIf="!guidedTourService.onResizeMessage" mat-flat-button color="primary" type="button" class="padded-shadow-btn"
(click)="guidedTourService.nextStep()">
{{ nextText }}
</button>
<button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique"
(click)="guidedTourService.skipTour()" class="rounded-btn primary-inverted">
<button *ngIf="!guidedTourService.onResizeMessage && !currentTourStep.isStepUnique" mat-stroked-button color="primary"
(click)="guidedTourService.skipTour()" class="padded-shadow-btn">
{{ skipText }}
</button>
</div>
</div>
<div class="col-auto p-0 d-flex align-items-end">
<img src="../../../assets/images/guided-tour-side.png">
<img src="../../../assets/images/guided-tour-side.png" alt="{{('ALT-TEXT.GUIDED-TOUR-IMG' | translate) ?? 'tour guide image'}}">
</div>
</div>
</div>

2
frontend/src/app/library/guided-tour/guided-tour.component.scss
View File

@ -119,7 +119,7 @@ ngx-guided-tour {
padding: 28px 5px 25px 65px;
overflow: auto;
text-align: left;
color: #212121;
color: var(--dark-gray);
line-height: 26px;
white-space: pre-line;
}

4
frontend/src/app/library/guided-tour/guided-tour.module.ts
View File

@ -3,10 +3,12 @@ import { GuidedTourComponent } from './guided-tour.component';
import { NgModule, ErrorHandler, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { WindowRefService } from './windowref.service';
import { TranslateModule } from '@ngx-translate/core';
import { MatButtonModule } from '@angular/material/button';
@NgModule({
declarations: [GuidedTourComponent],
imports: [CommonModule],
imports: [CommonModule, TranslateModule, MatButtonModule],
providers: [WindowRefService],
exports: [GuidedTourComponent]
})

2
frontend/src/app/library/notification/popup/popup-notification.component.html
View File

@ -14,6 +14,6 @@
</div>
<div mat-dialog-actions class="row d-flex">
<div class="ml-auto col-auto">
<button mat-button tabindex="-1" class="rounded-btn primary-inverted" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
<button mat-button class="padded-shadow-btn primary-inverted" (click)="close()">{{'GENERAL.NOTIFICATION-DIALOG.POPUP.CLOSE' | translate}}</button>
</div>
</div>

2
frontend/src/app/library/rich-text-editor/rich-text-editor.component.scss
View File

@ -3,7 +3,7 @@
font-weight: 400;
font-size: 16px;
line-height: 1.5rem;
color: #7d7d7d;
color: var(--dark-gray);
}
.editor-wrapper {

14
frontend/src/app/library/rich-text-editor/rich-text-editor.component.ts
View File

@ -1,13 +1,13 @@
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from "@angular/core";
import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, SimpleChanges, ViewChild } from "@angular/core";
import { FormControl } from "@angular/forms";
import { AngularEditorConfig } from "@kolkov/angular-editor";
import { AngularEditorComponent, AngularEditorConfig } from "@kolkov/angular-editor";
import { Subscription } from "rxjs";
@Component({
selector: 'rich-text-editor-component',
template: `
<div class="editor-wrapper" [class]="wrapperClasses">
<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="id"
<angular-editor class="full-width editor" [ngClass]="editable ? '': 'disabled'" [id]="name"
[config]="editorConfig" [formControl]="form" [required]="required"
placeholder="{{(placeholder? (placeholder | translate) : '') + (required ? ' *': '')}}"
(paste)="pasteWithoutFormatting($event)"></angular-editor>
@ -19,9 +19,11 @@ import { Subscription } from "rxjs";
changeDetection: ChangeDetectionStrategy.OnPush
})
export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy {
static nextId = 0;
@ViewChild(AngularEditorComponent) editor: AngularEditorComponent
@Input() form: FormControl;
@Input() id: string = "editor1";
@Input() name: string = `rich-text-editor${RichTextEditorComponent.nextId++}`;
@Input() placeholder: string = "Enter text";
@Input() required: boolean = false;
@Input() wrapperClasses: string = "";
@ -104,6 +106,10 @@ export class RichTextEditorComponent implements OnInit, OnChanges, OnDestroy {
window.document.execCommand("insertText", false, text);
}
focus(){
this.editor?.focus();
}
private observeFormStatus(): void {
this.formTouchSubscription = this.formTouchEvent
.subscribe(

2
frontend/src/app/ui/about/about.component.html
View File

@ -1,5 +1,5 @@
<div class="container-fluid">
<div class="row">
<iframe *ngIf="aboutHTMLUrl" class="iframe" [src]="aboutHTMLUrl"></iframe>
<iframe *ngIf="aboutHTMLUrl" title="about" class="iframe" [src]="aboutHTMLUrl"></iframe>
</div>
</div>

125
frontend/src/app/ui/admin/description-status/editor/description-status-editor/description-status-editor.component.html
View File

@ -1,40 +1,40 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-10 offset-md-1 colums-gapped">
<div class="row align-items-center mt-4 mb-4" *ngIf="formGroup">
<div class="col-md col-12">
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="row">
<div class="col-md-10 offset-md-1 colums-gapped">
<div class="row align-items-center mt-4 mb-4" *ngIf="formGroup">
<div class="col-md col-12">
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()" type="button">{{'COMMONS.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'COMMONS.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="rounded-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
<mat-icon>save</mat-icon>
{{'COMMONS.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card class="pt-3 pb-3" appearance="outlined">
<mat-card-content>
<div class="row">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="formGroup.controls.name" required>
<mat-error *ngIf="formGroup.controls.name.hasError('backendError')">{{formGroup.controls.name.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.controls.name.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card class="pt-3 pb-3" appearance="outlined">
<mat-card-content>
<div class="row">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="formGroup.controls.name" required>
<mat-error *ngIf="formGroup.controls.name.hasError('backendError')">{{formGroup.controls.name.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.controls.name.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 pt-2">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}}</mat-label>
<mat-select [formControl]="formGroup.controls.internalStatus">
@ -45,34 +45,29 @@
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ACTION' | translate}}</mat-label>
<input matInput type="text" name="action" [formControl]="formGroup.controls.action">
<mat-error *ngIf="formGroup.controls.action.hasError('backendError')">{{formGroup.controls.action.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.controls.action.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<h3>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3>
<div class="col-12">
<rich-text-editor-component
[form]="formGroup.controls.description"
[placeholder]="'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION'"
[editable]="!formGroup.controls.description.disabled"
[wrapperClasses]="(formGroup.controls.description.touched && formGroup.controls.description.hasError('backendError')) ? 'required' : ''"
/>
@if(formGroup.controls.description.hasError('backendError')){
<div class="mat-form-field formGroup-field-subscript-wrapper">
<mat-error>{{formGroup.controls.description.getError('backendError').message}}</mat-error>
</div>
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ACTION' | translate}}</mat-label>
<input matInput type="text" name="action" [formControl]="formGroup.controls.action">
<mat-error *ngIf="formGroup.controls.action.hasError('backendError')">{{formGroup.controls.action.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.controls.action.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<h3>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3>
<div class="col-12">
<rich-text-editor-component [form]="formGroup.controls.description" [placeholder]="'DESCRIPTION-STATUS-EDITOR.FIELDS.DESCRIPTION'" [editable]="!formGroup.controls.description.disabled" [wrapperClasses]="(formGroup.controls.description.touched && formGroup.controls.description.hasError('backendError')) ? 'required' : ''" />
@if(formGroup.controls.description.hasError('backendError')){
<div class="mat-form-field formGroup-field-subscript-wrapper">
<mat-error>{{formGroup.controls.description.getError('backendError').message}}</mat-error>
</div>
}
</div>
</div>
</div>
</div>
<div class="col-12">
<h3>
{{'DESCRIPTION-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}}
</h3>
{{'DESCRIPTION-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}}
</h3>
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}}</mat-label>
<mat-select multiple [formControl]="formGroup.controls.definition.controls.availableActions">
@ -81,19 +76,20 @@
</mat-form-field>
</div>
<div class="col-12">
<h3>
{{'DESCRIPTION-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}}
</h3>
<div class="col-12">
<h3>
{{'DESCRIPTION-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}}
</h3>
<div id="Edit">
<mat-card>
<mat-card-header>
<mat-card-title class="pb-2">{{'DESCRIPTION-STATUS-EDITOR.FIELDS.EDIT' | translate}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-card-content>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}</mat-label>
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.ROLES' | translate}}&nbsp;*
<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
<mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
</mat-select>
@ -101,9 +97,9 @@
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<div class="col-12 pt-2">
<mat-form-field class="w-100">
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}</mat-label>
<mat-label>{{'DESCRIPTION-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}&nbsp;*<small>{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small></mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
<mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
</mat-select>
@ -124,12 +120,11 @@
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
</div>

6
frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
@ -42,12 +42,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

6
frontend/src/app/ui/admin/description-status/listing/description-status-listing-filters/description-status-listing-filters.component.ts
View File

@ -1,6 +1,7 @@
import { Component, effect, EventEmitter, input, Output } from '@angular/core';
import { Component, computed, effect, EventEmitter, HostBinding, input, Output } from '@angular/core';
import { DescriptionStatusEnum } from '@app/core/common/enum/description-status';
import { DescriptionStatusFilter } from '@app/core/query/description-status.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
import { IsActive } from '@notification-service/core/enum/is-active.enum';
@ -11,6 +12,7 @@ import { IsActive } from '@notification-service/core/enum/is-active.enum';
styleUrl: './description-status-listing-filters.component.scss'
})
export class DescriptionStatusListingFiltersComponent extends BaseComponent{
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
readonly filter = input<DescriptionStatusFilter>();
@Output() filterChange = new EventEmitter<DescriptionStatusFilter>();
@ -19,7 +21,7 @@ export class DescriptionStatusListingFiltersComponent extends BaseComponent{
internalStatusEnum = this.enumUtils.getEnumValues<DescriptionStatusEnum>(DescriptionStatusEnum);
constructor(protected enumUtils: EnumUtils){
constructor(protected enumUtils: EnumUtils, protected fontService: FontAccessibilityService){
super();
effect(() => {
const newFilters = this.filter();

4
frontend/src/app/ui/admin/description-status/listing/description-status-listing/description-status-listing.component.html
View File

@ -7,7 +7,7 @@
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionStatus)" [routerLink]="routerUtils.generateUrl(['/description-statuses/new'])">
<mat-icon>add</mat-icon>
{{'DESCRIPTION-STATUS-LISTING.ACTIONS.CREATE-DESCRIPTION-STATUS' | translate}}
</button>
@ -43,7 +43,7 @@
<ng-template #actions let-row="row" let-item>
<div class="row" (click)="$event.stopPropagation()">
<div class="col-auto" *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">

6
frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.html
View File

@ -2,18 +2,18 @@
<div mat-dialog-title class="row d-flex align-items-center header">
<div class="col"><span class="template-title align-self-center" matTooltip="{{descriptionTemplate.label}}">{{'DESCRIPTION-TEMPLATE-PREVIEW.TEMPLATE' | translate}} - {{descriptionTemplate.label}}</span></div>
<div class="col-auto">
<button mat-icon-button tabindex="-1" (click)="closeDialog()"><mat-icon>close</mat-icon></button>
<button mat-icon-button (click)="closeDialog()"><mat-icon>close</mat-icon></button>
</div>
</div>
<div *ngIf="progressIndication" class="progress-bar">
<mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
<mat-progress-bar color="primary" mode="indeterminate" [attr.aria-label]="'ALT-TEXT.PROGRESS-BAR' | translate"></mat-progress-bar>
</div>
<div mat-dialog-content class="definition-content">
<app-description-form *ngIf="formGroup && formGroup.get('properties')" [propertiesFormGroup]="previewPropertiesFormGroup" [descriptionId]="descriptionId" [descriptionTemplate]="descriptionTemplate" [canAnnotate]="false" [visibilityRulesService]="visibilityRulesService" [isNew]="true"></app-description-form>
</div>
<div mat-dialog-actions *ngIf="formGroup" class="row d-flex pb-2 pt-3">
<div class="col-auto ml-auto">
<button mat-button type="button" class="rounded-btn primary" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
<button mat-button type="button" class="padded-shadow-btn primary" (click)="select()">{{'TYPES.EXTERNAL-DATASET-TYPE.SELECT' | translate}}</button>
</div>
</div>
</div>

4
frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.scss
View File

@ -3,8 +3,8 @@
display: flex;
width: 100%;
height: 89px;
background-color: var(--primary-color);
color: #FFFFFF;
background-color: var(--sys-primary);
color: var(--sys--sys-on-primary);
font-size: 1.25rem;
}

6
frontend/src/app/ui/admin/description-template/description-template-preview/description-template-preview-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, computed, HostBinding, Inject, OnInit } from '@angular/core';
import { UntypedFormGroup } from '@angular/forms';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { DescriptionTemplate } from '@app/core/model/description-template/description-template';
@ -15,6 +15,7 @@ import { BaseComponent } from '@common/base/base.component';
import { HttpErrorHandlingService } from '@common/modules/errors/error-handling/http-error-handling.service';
import { TranslateService } from '@ngx-translate/core';
import { takeUntil } from 'rxjs/operators';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-description-template-preview-dialog-component',
@ -23,7 +24,7 @@ import { takeUntil } from 'rxjs/operators';
providers: [DescriptionFormService],
})
export class DescriptionTemplatePreviewDialogComponent extends BaseComponent implements OnInit {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
descriptionTemplateDefinitionFormGroup: UntypedFormGroup;
progressIndication = false;
editorModel: DescriptionEditorModel;
@ -40,6 +41,7 @@ export class DescriptionTemplatePreviewDialogComponent extends BaseComponent imp
private language: TranslateService,
public visibilityRulesService: VisibilityRulesService,
private httpErrorHandlingService: HttpErrorHandlingService,
protected fontService: FontAccessibilityService,
@Inject(MAT_DIALOG_DATA) public data: any
) {
super();

2
frontend/src/app/ui/admin/description-template/description-template.module.ts
View File

@ -34,6 +34,7 @@ import { DescriptionFormModule } from '@app/ui/description/editor/description-fo
import { FinalPreviewComponent } from './editor/components/final-preview/final-preview.component';
import { DragulaModule } from 'ng2-dragula';
import { TransitionGroupModule } from '@app/ui/transition-group/transition-group.module';
import { FormFocusDirective } from '@common/forms/form-focus.directive';
@NgModule({
imports: [
@ -52,6 +53,7 @@ import { TransitionGroupModule } from '@app/ui/transition-group/transition-group
DescriptionFormModule,
TransitionGroupModule,
DragulaModule.forRoot(),
FormFocusDirective
],
declarations: [
DescriptionTemplateEditorComponent,

6
frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.html
View File

@ -159,8 +159,8 @@
<ul class="list-unstyled list-inline fieldset-actions-list d-flex align-items-center text-primary-blue">
<li class="list-inline-item" *ngIf="!viewOnly">
<span [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate" />
<span role="button" [matMenuTriggerFor]="inputmenu" class="inputMenuTrigger">
<img src="/assets/images/editor/icons/add_input.svg" style="width: 18px;transform: translateY(-1px);" class="input_icon" alt="{{('DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate) ?? 'add input'}}" />
<span class="fieldset-new-input-action">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.ADD-INPUT' | translate}}</span>
</span>
<mat-menu #inputmenu="matMenu" [class]="'add_input_menu'">
@ -280,7 +280,7 @@
</mat-checkbox>
</li>
<li class="list-inline-item">
<mat-icon [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
<mat-icon role="button" [matMenuTriggerFor]="menu" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FIELDSET.MORE' | translate" style="transform: translateY(-1px);">more_vert</mat-icon>
<mat-menu #menu="matMenu">
<!-- TODO to check -->
<mat-checkbox

12
frontend/src/app/ui/admin/description-template/editor/components/field-set/description-template-editor-field-set.component.scss
View File

@ -1,5 +1,4 @@
@use 'sass:math';
@import "assets/scss/core/_variables.scss";
.full-width{
width: 100%;
@ -18,7 +17,7 @@
//Palete
$blue-color : var(--primary-color);
$blue-color : var(--sys-primary);
$blue-color-light: #5cf7f2;
.actions-list{
@ -75,14 +74,14 @@ $blue-color-light: #5cf7f2;
.numbering-label .mat-input-element:disabled{
color: #212121;
color: var(--dark-gray);
}
:host ::ng-deep .fieldset-checkbox-action-description-template-editor
{
.mat-checkbox-label{
font-size: 0.8em;
color: #212121;
color: var(--dark-gray);
transform: translateY(3px);
}
.mat-checkbox-frame{
@ -93,7 +92,7 @@ $blue-color-light: #5cf7f2;
.fieldset-new-input-action {
font-size: 0.8em;
font-weight: 400;
color: #212121;
color: var(--dark-gray);
display: inline-block;
transform: translateY(1px);
}
@ -139,13 +138,12 @@ $blue-color-light: #5cf7f2;
::ng-deep label {
margin: 0;
color: #212121;
color: var(--dark-gray);
}
.numbering {
font-size: 21px;
font-weight: 400;
line-height: $bmd-line-height !important;
padding-top: var(--mat-form-field-container-vertical-padding);
padding-bottom: var(--mat-form-field-container-vertical-padding);
overflow-x: hidden;

6
frontend/src/app/ui/admin/description-template/editor/components/field/description-template-editor-field.component.scss
View File

@ -14,7 +14,7 @@ mat-radio-button{
}
li.list-inline-item{
color: var(--primary-color);
color: var(--sys-primary);
.mat-icon{
vertical-align: bottom;
}
@ -24,10 +24,10 @@ li.list-inline-item{
{
.mat-slide-toggle-content{
font-size: 0.8em;
color: #212121;
color: var(--dark-gray);
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color:var(--primary-color) ;
background-color:var(--sys-primary) ;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color:rgba(0,178,159,0.34);

10
frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.html
View File

@ -14,7 +14,7 @@
<div class="row justify-content-center mt-4 mb-2">
<div class="col-auto add-question" (click)="addFieldSetAfter(-9999,0)" *ngIf="!viewOnly">
<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
alt="Add Question icon">
aria-hidden>
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
</div>
</div>
@ -30,7 +30,7 @@
<div class="action-list-item" (click)="onAddFieldSet()">
<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
alt="Add Question icon">
aria-hidden>
<span
class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
| translate}}</span>
@ -86,7 +86,7 @@
<div class="action-list-item" (click)="onAddFieldSet()">
<!-- <mat-icon class="action-list-icon">folder</mat-icon> -->
<img src="/assets/images/editor/icons/add_input_set.svg" class="input_icon"
alt="Add Question icon">
aria-hidden>
<span
class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET'
| translate}}</span>
@ -98,7 +98,7 @@
<div class="action-list-item" (click)="onCloneFieldSet(fieldset)">
<!-- <mat-icon class="action-list-icon">file_copy</mat-icon> -->
<img src="/assets/images/editor/icons/clone.svg" class="input_icon"
alt="Clone icon">
aria-hidden>
<span class="action-list-text">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.CLONE' |
translate}}</span>
</div>
@ -120,7 +120,7 @@
<div class="col-auto add-question" (click)="addFieldSetAfter(fieldset.get('ordinal').value, i)"
*ngIf="!viewOnly">
<img src="/assets/images/editor/icons/add_input_set.svg" class="question-icon mr-2"
alt="Add Question icon">
aria-hidden>
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}</span>
</div>
</div>

8
frontend/src/app/ui/admin/description-template/editor/components/section-fieldset/description-template-editor-section-fieldset.component.scss
View File

@ -1,4 +1,4 @@
$blue-color : var(--primary-color);
$blue-color : var(--sys-primary);
$blue-color-light: #5cf7f2;
@ -55,7 +55,7 @@ $blue-color-light: #5cf7f2;
margin-right: 0.5em;
margin-left: -.09em;
height: auto;
color: var(--primary-color);;
color: var(--sys-primary);
}
.input_icon{
width: 14px;
@ -66,7 +66,7 @@ $blue-color-light: #5cf7f2;
}
}
.action-list-label{
color: #212121;
color: var(--dark-gray);
font-size: small;
opacity: 0.6;
}
@ -83,7 +83,7 @@ $blue-color-light: #5cf7f2;
display:inline-block;
margin: 0px auto;
cursor: grab;
color: var(--secondary-color);
color: var(--sys-tertiary);
opacity: 0.6 !important;
}
}

9
frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.html
View File

@ -1,16 +1,19 @@
<div [formGroup]="form" class="row description-template-editor">
<div class="heading col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}} *</div>
<label class="heading col-12" for="sectionName">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-NAME-HINT' | translate}}</div>
<mat-form-field class="col-12">
<input matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"formControlName="title">
<input id="sectionName" matInput type="text" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate)+ ' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION' | translate)"formControlName="title">
<mat-error *ngIf="form.get('title').hasError('backendError')">{{form.get('title').getError('backendError').message}}</mat-error>
<mat-error *ngIf="form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
<div class="heading col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </div>
<label class="heading col-12" [appFor]="'sectionDescription'">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION' | translate}} </label>
<div class="hint col-12">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.SECTION-INFO.SECTION-DESCRIPTION-HINT' | translate}}</div>
<div class="col-12">
<rich-text-editor-component [form]="form.get('description')"
id="sectionDescription"
[placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.SECTION.FIELDS.DESCRIPTION'"
[editable]="!form.disabled">
</rich-text-editor-component>

4
frontend/src/app/ui/admin/description-template/editor/components/section/description-template-editor-section.component.scss
View File

@ -14,7 +14,7 @@
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
color: #212121;
color: var(--dark-gray);
opacity: 0.81;
margin-bottom: 0.625rem;
}
@ -24,7 +24,7 @@
font-weight: 400;
font-size: 16px;
letter-spacing: 0px;
color: #212121;
color: var(--dark-gray);
opacity: 0.81;
margin-bottom: 0.125rem;
}

56
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.html
View File

@ -36,28 +36,34 @@
<div class="col-9">
<div class="col">
<div class="col-12">
<div class="heading">1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}} *</div>
<label class="heading" for="nameInput">1.1 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME'| translate}}
&nbsp;*<small class="required-text" class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-NAME-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input">
<input matInput [formControl]="formGroup.get('label')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.TITLE' | translate}}">
<input id="nameInput" matInput [formControl]="formGroup.get('label')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.TITLE' | translate}}">
<mat-error *ngIf="formGroup.get('label').hasError('backendError')">{{formGroup.get('label').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('label').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<div class="heading">1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}} *</div>
<label class="heading" for="codeInput">1.2 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-CODE-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input">
<input matInput [formControl]="formGroup.get('code')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.CODE' | translate}}">
<input id="codeInput" matInput [formControl]="formGroup.get('code')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.FIELDS.CODE' | translate}}">
<mat-error *ngIf="formGroup.get('code').hasError('backendError')">{{formGroup.get('code').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('code').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<div class="heading">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}} *</div>
<label class="heading" [appFor]="'descriptionInput'">1.3 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-HINT'| translate}}</div>
<div class="full-width basic-info-input">
<rich-text-editor-component [form]="formGroup.get('description')" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
<rich-text-editor-component id="descriptionInput" [form]="formGroup.get('description')" [placeholder]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-DESCRIPTION-PLACEHOLDER'" [wrapperClasses]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'required' : ''" [editable]="formGroup.controls['description'].status !== 'DISABLED'">
</rich-text-editor-component>
<div [class]="(formGroup.get('description').touched && formGroup.get('description').hasError('required')) ? 'visible' : 'invisible'" class="mat-form-field formGroup-field-subscript-wrapper">
<mat-error>{{'GENERAL.VALIDATION.REQUIRED'| translate}}</mat-error>
@ -67,21 +73,25 @@
</div>
<div class="col-12">
<div class="heading">1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}} *</div>
<label class="heading" for="typeInput">1.4 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-TYPE-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}</mat-label>
<app-single-auto-complete [required]="false" [formControl]="formGroup.get('type')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}" [configuration]="singleAutocompleteDescriptionTemplateTypeConfiguration">
<app-single-auto-complete [id]="'typeInput'" [required]="false" [formControl]="formGroup.get('type')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-TYPE' | translate}}" [configuration]="singleAutocompleteDescriptionTemplateTypeConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="formGroup.get('type').hasError('backendError')">{{formGroup.get('type').getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<div class="heading">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}} *</div>
<label class="heading" [appFor]="'languageInput'">1.5 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE'| translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-LANGUAGE-HINT'| translate}}</div>
<mat-form-field class="full-width basic-info-input">
<mat-select [formControl]="formGroup.get('language')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-LANGUAGE'| translate}}">
<mat-select id="languageInput" [formControl]="formGroup.get('language')" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-SELECT-LANGUAGE'| translate}}">
<mat-option *ngFor="let lang of availableLanguages" [value]="lang.code">
{{ lang.name }}
</mat-option>
@ -91,7 +101,7 @@
</mat-form-field>
</div>
<div class="col-12">
<div class="heading">1.6 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS'| translate}}</div>
<label class="heading" for="templateUsersInput">1.6 {{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS'| translate}}</label>
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS-HINT'| translate}}</div>
<div class="full-width basic-info-input">
<table class="col-12 user-table">
@ -107,7 +117,7 @@
<td>{{usersMap.get(user?.get('userId')?.value)?.name}}</td>
<td>{{enumUtils.toUserDescriptionTemplateRoleString(user?.get('role')?.value)}}</td>
<td *ngIf="!viewOnly">
<button mat-button class="rounded-btn delete-inverted" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
<button mat-button class="padded-shadow-btn delete-inverted" (click)="verifyAndRemoveUser(i)" [matTooltip]="'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-REMOVE-USER'| translate"><mat-icon>person_remove</mat-icon></button>
</td>
</tr>
<tr *ngIf="formGroup.get('users')?.controls?.length === 0">
@ -125,7 +135,7 @@
<div class="col-12 col-lg-4 d-flex justify-content-end" style="overflow: hidden;">
<mat-form-field class="full-width basic-info-input" *ngIf="!viewOnly">
<mat-label>{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}</mat-label>
<app-single-auto-complete [required]="false" [formControl]="userFormControl" (optionSelected)="addUser($event)" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}" [configuration]="userService.singleAutocompleteConfiguration">
<app-single-auto-complete [id]="'templateUsersInput'" [required]="false" [formControl]="userFormControl" (optionSelected)="addUser($event)" placeholder="{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.DESCRIPTION-TEMPLATE-USERS' | translate}}" [configuration]="userService.singleAutocompleteConfiguration">
</app-single-auto-complete>
<mat-error *ngIf="formGroup.get('type').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
@ -172,21 +182,23 @@
<formGroup [formGroup]="selectedTocEntry.form">
<div class="row">
<div class="col-12">
<div class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}} *</div>
<label for="pageNameInput" class="heading">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</label>
</div>
<div class="col-12">
<div class="hint">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE-NAME-HINT' | translate}}</div>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<input type="text" matInput formControlName="title" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) +' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' |translate)">
<input id="pageNameInput" type="text" matInput formControlName="title" [placeholder]="('DESCRIPTION-TEMPLATE-EDITOR.STEPS.GENERAL-INFO.UNTITLED' | translate) +' '+ ('DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.PAGE' |translate)">
<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('backendError')">{{selectedTocEntry.form.get('title').getError('backendError').message}}</mat-error>
<mat-error *ngIf="selectedTocEntry.form.get('title').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
@if(!viewOnly &&!selectedTocEntry?.subEntries?.length){
<div class="col-12">
<button mat-button class="rounded-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" (click)="addNewEntry({parent:selectedTocEntry, childType: tocEntryEnumValues.Section})">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.PAGE-INFO.ACTIONS.CREATE-SECTION' | translate}}</button>
</div>
<mat-error *ngIf="selectedTocEntry.form.invalid && showErrors">{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.FORM.FIELD.ERROR-MESSAGES.FIELD-SELECT-AT-LEAST-ONE-REQUIRED' | translate}}</mat-error>
}
@ -264,11 +276,11 @@
<ng-container *ngIf="steps && stepper">
<div class="floating-btn">
<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="rounded-btn secondary " (click)="stepper?.previous()">
<button *ngIf="stepper?.selectedIndex > 0" [@previous_btn] mat-button class="padded-shadow-btn secondary " (click)="stepper?.previous()">
<mat-icon class="back-icon pointer">chevron_left</mat-icon>
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.PREVIOUS' | translate}}
</button>
<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="rounded-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
<button *ngIf="stepper?.selectedIndex < (steps.length-1)" mat-button class="padded-shadow-btn secondary ml-3" [@next_btn] (click)="stepper?.next();" [disabled]="!isStepCompleted(stepper?.selectedIndex)">
<span>{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.NEXT' | translate}}</span>
<mat-icon class="back-icon pointer" iconPositionEnd>chevron_right</mat-icon>
</button>
@ -280,12 +292,12 @@
<ng-template #actions>
<div>
<button mat-button class="rounded-btn primary-inverted mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
<button *ngIf="!viewOnly" mat-button class="rounded-btn secondary" type="button">
<button mat-button class="padded-shadow-btn primary-inverted mr-3" (click)="cancel()">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.CLOSE' | translate}}</button>
<button *ngIf="!viewOnly" mat-button class="padded-shadow-btn secondary" type="button">
<span class="d-flex flex-row row">
<span (click)="save(); formSubmit()" class="col">{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE' | translate}}</span>
<mat-divider [vertical]="true"></mat-divider>
<span class="align-items-center justify-content-center mw-100 col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menuSave">
<span role="button" class="align-items-center justify-content-center mw-100 col-4 d-flex" (click)="$event.stopPropagation();" [matMenuTriggerFor]="menuSave">
<mat-icon>expand_more</mat-icon>
</span>
</span>
@ -295,7 +307,7 @@
<button mat-menu-item (click)="saveWithClose(false)" type="button">{{ 'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.SAVE-AND-CONTINUE' | translate }}</button>
</mat-menu>
<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="rounded-btn primary ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
<button *ngIf="!viewOnly && steps?.length-1 === stepper?.selectedIndex" [@finalize_btn] mat-button class="padded-shadow-btn primary ml-3" [disabled]="!formGroup.valid" [class.invisible]="steps?.length-1 !== stepper?.selectedIndex" (click)="finalize()">
{{'DESCRIPTION-TEMPLATE-EDITOR.ACTIONS.FINALIZE' | translate}}
</button>
</div>

18
frontend/src/app/ui/admin/description-template/editor/description-template-editor.component.scss
View File

@ -29,7 +29,7 @@
font-weight: 700;
font-size: 18px;
letter-spacing: 0px;
color: #212121;
color: var(--dark-gray);
opacity: 0.81;
margin-bottom: 0.625rem;
}
@ -39,7 +39,7 @@
font-weight: 400;
font-size: 16px;
letter-spacing: 0px;
color: #212121;
color: var(--dark-gray);
opacity: 0.81;
margin-bottom: 0.125rem;
}
@ -66,7 +66,7 @@
transition-timing-function: ease-out;
transition-delay: 50ms;
box-shadow: 0px 1px 2px #bfbfbf;
background-color: var(--secondary-color);
background-color: var(--sys-tertiary);
}
#progress-container{
box-shadow: 1px 1px 6px #00000029;;
@ -74,7 +74,7 @@
$blue-color : var(--primary-color);
$blue-color : var(--sys-primary);
$blue-color-light: #5cf7f2;
@ -87,7 +87,7 @@ $blue-color-light: #5cf7f2;
transition-duration: 200ms;
transition-delay: 50ms;
transition-timing-function: ease-in-out;
color: #212121;
color: var(--dark-gray);
font-size: 0.9em;
}
@ -107,7 +107,7 @@ $blue-color-light: #5cf7f2;
.actions-list{
box-shadow: 0px 3px 12px var(--primary-color)99;
box-shadow: 0px 3px 12px var(--sys-primary)99;
border-radius: 4px;
padding: 1em 0.9em;
min-width: 166px;
@ -129,7 +129,7 @@ $blue-color-light: #5cf7f2;
margin-right: 0.5em;
margin-left: -.09em;
height: auto;
color: var(--primary-color);;
color: var(--sys-primary);;
}
.input_icon{
width: 14px;
@ -140,7 +140,7 @@ $blue-color-light: #5cf7f2;
}
}
.action-list-label{
color: #212121;
color: var(--dark-gray);
font-size: small;
opacity: 0.6;
}
@ -215,7 +215,7 @@ $blue-color-light: #5cf7f2;
position: fixed;
bottom: 20em;
right: 2em;
color: var(--primary-color) !important;
color: var(--sys-primary) !important;
cursor: pointer;
font-size: 1rem;
font-weight: 400;

2
frontend/src/app/ui/admin/description-template/editor/table-of-contents/description-template-table-of-contents.scss
View File

@ -28,7 +28,7 @@ $scroller-height: 3em;
#guide-steps{
color: #212121;
color: var(--dark-gray);
opacity: 0.6;
font-size: 1.6em;
margin-top: 0px;

6
frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.html
View File

@ -84,7 +84,7 @@
<!-- Subsection + -->
</ng-container>
<ng-container *ngSwitchCase="tocEntryType.FieldSet">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="" style="margin-left: 0.1em;" class="add-input-icon">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="New input icon" style="margin-left: 0.1em;" class="add-input-icon">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
</ng-container>
@ -124,7 +124,7 @@
<div class="ml-3">
<!-- Give option to generate fieldset (only if parent is section) -->
<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="" class="add-input-icon">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="New input icon" class="add-input-icon">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
</button>
@ -157,7 +157,7 @@
</ng-container>
<ng-container *ngSwitchCase="tocEntryType.FieldSet">
<button *ngIf="parentLink.type == tocEntryType.Section" mat-button style="padding-left: 0px;" (click)="createNewEntry({childType:tocEntryType.FieldSet,parent:parentLink})">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="" class="add-input-icon">
<img src="/assets/images/editor/icons/add_input_set.svg" alt="New input set icon" class="add-input-icon">
{{'DESCRIPTION-TEMPLATE-EDITOR.STEPS.TOOLKIT.NEW-INPUT-SET' | translate}}
</button>
</ng-container>

4
frontend/src/app/ui/admin/description-template/editor/table-of-contents/table-of-contents-internal-section/description-template-table-of-contents-internal-section.scss
View File

@ -23,9 +23,9 @@
$blue-color : var(--primary-color);
$blue-color : var(--sys-primary);
$blue-color-light: #5cf7f2;
$yellow: var(--secondary-color);
$yellow: var(--sys-tertiary);
.badge-ball{
display: inline-block;
border-radius: 50%;

18
frontend/src/app/ui/admin/description-template/listing/description-template-listing.component.html
View File

@ -6,7 +6,7 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto" *ngIf="canCreateNew()">
<button mat-button class="rounded-btn import" (click)="import()">
<button mat-button class="padded-shadow-btn import" (click)="import()">
<span class="button-text">
{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML' | translate}}
</span>
@ -14,7 +14,7 @@
</div>
<div class="col-auto" *ngIf="canCreateNew()">
<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplate)" [routerLink]="[routerUtils.generateUrl('/description-templates/new')]">
<mat-icon>add</mat-icon>
{{'DESCRIPTION-TEMPLATE-LISTING.CREATE-DESCRIPTION-TEMPLATE' | translate}}
</button>
@ -86,28 +86,28 @@
<ng-template #actions let-row="row" let-item>
<div *ngIf="showActions(row)" class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<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}}
<mat-icon aria-hidden>edit</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.EDIT' | translate}}
</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}}
<mat-icon aria-hidden>queue</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.NEW-VERSION' | translate}}
</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}}
<mat-icon aria-hidden>content_copy</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.CLONE' | translate}}
</a>
<a *ngIf="canViewVersions(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/description-templates/versions/', row.groupId])">
<mat-icon>library_books</mat-icon>
<mat-icon aria-hidden>library_books</mat-icon>
{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
</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}}
<mat-icon aria-hidden>download</mat-icon>{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
</button>
<button *ngIf="canDelete(row)" mat-menu-item (click)="delete(row.id)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'DESCRIPTION-TEMPLATE-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

6
frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.TITLE' | translate}}</h4>
@ -42,12 +42,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'DESCRIPTION-TEMPLATE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

6
frontend/src/app/ui/admin/description-template/listing/filters/description-template-listing-filters.component.ts
View File

@ -1,7 +1,8 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { DescriptionTemplateStatus } from '@app/core/common/enum/description-template-status';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { DescriptionTemplateFilter } from '@app/core/query/description-template.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
import { Guid } from '@common/types/guid';
@ -21,10 +22,11 @@ export class DescriptionTemplateListingFiltersComponent extends BaseComponent im
// * State
internalFilters: DescriptionTemplateListingFilters = this._getEmptyFilters();
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

6
frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.html
View File

@ -4,7 +4,7 @@
<h4>{{ data.message }}</h4>
</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="cancel()">
<button mat-icon-button (click)="cancel()">
<mat-icon>close</mat-icon>
</button>
</div>
@ -34,11 +34,11 @@
<input matInput placeholder="{{'DESCRIPTION-TEMPLATE-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="descriptionBlueprintName" [(ngModel)]="data.name">
</mat-form-field>
<div class="col-auto">
<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col"></div>
<div class="col-auto">
<button mat-button color="primary" class="rounded-btn primary-inverted" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
<button mat-button color="primary" class="padded-shadow-btn primary-inverted" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
</div>
</div>
</mat-dialog-content>

8
frontend/src/app/ui/admin/description-template/listing/import-description-template/import-description-template.dialog.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Inject } from '@angular/core';
import { Component, computed, HostBinding, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
@ -7,7 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
styleUrls: ['./import-description-template.dialog.component.scss']
})
export class ImportDescriptionTemplateDialogComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
sizeError = false;
selectFile = false;
maxFileSize: number = 1048576;
@ -15,7 +16,8 @@ export class ImportDescriptionTemplateDialogComponent {
constructor(
public dialogRef: MatDialogRef<ImportDescriptionTemplateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
@Inject(MAT_DIALOG_DATA) public data: any,
protected fontService: FontAccessibilityService,
) { }

8
frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.html
View File

@ -8,22 +8,22 @@
</div>
<div class="col-auto">
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
<mat-icon>delete</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canFinalize">
<button mat-button class="rounded-btn secondary" (click)="save(); finalize()">
<button mat-button class="padded-shadow-btn secondary" (click)="save(); finalize()">
<mat-icon>save</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.FINALIZE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="rounded-btn primary" (click)="save(); formSubmit()">
<button mat-button class="padded-shadow-btn primary" (click)="save(); formSubmit()">
<mat-icon>save</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
</button>

2
frontend/src/app/ui/admin/description-types/editor/description-template-type-editor.component.scss
View File

@ -7,7 +7,7 @@
.action-btn {
border-radius: 30px;
background-color: var(--secondary-color);
background-color: var(--sys-tertiary);
border: 1px solid transparent;
padding-left: 2em;
padding-right: 2em;

8
frontend/src/app/ui/admin/description-types/listing/description-template-type-listing.component.html
View File

@ -6,7 +6,7 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary"
<button mat-button class="padded-shadow-btn secondary"
*ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)"
[routerLink]="routerUtils.generateUrl(['/description-template-type/new'])">
<mat-icon>add</mat-icon>
@ -86,15 +86,15 @@
<ng-template #actions let-row="row" let-item>
<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" *ngIf="!isFinalized(row) || row.belongsToCurrentTenant != false">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" *ngIf="!isFinalized(row) || row.belongsToCurrentTenant != false" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<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}}
<mat-icon aria-hidden>edit</mat-icon>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.EDIT' | translate}}
</a>
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

6
frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
@ -42,12 +42,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'DESCRIPTION-TEMPLATE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

6
frontend/src/app/ui/admin/description-types/listing/filters/description-template-type-listing-filters.component.ts
View File

@ -1,7 +1,8 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { DescriptionTemplateTypeStatus } from '@app/core/common/enum/description-template-type-status';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { DescriptionTemplateTypeFilter } from '@app/core/query/description-template-type.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
import { nameof } from 'ts-simple-nameof';
@ -20,10 +21,11 @@ export class DescriptionTemplateTypeListingFiltersComponent extends BaseComponen
// * State
internalFilters: DescriptionTemplateTypeListingFilters = this._getEmptyFilters();
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

6
frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'LOCK-LISTING.FILTER.TITLE' | translate}}</h4>
@ -42,12 +42,12 @@
<div class="row justify-content-between mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'LOCK-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'LOCK-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

6
frontend/src/app/ui/admin/entity-locks/filters/lock-listing-filters.component.ts
View File

@ -1,7 +1,8 @@
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { LockTargetType } from '@app/core/common/enum/lock-target-type';
import { LockFilter } from '@app/core/query/lock.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { UserService } from '@app/core/services/user/user.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
@ -24,11 +25,12 @@ export class LockListingFiltersComponent extends BaseComponent implements OnInit
// * State
internalFilters: LockListingFilters = this._getEmptyFilters();
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
public userService: UserService,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

4
frontend/src/app/ui/admin/entity-locks/lock-listing.component.html
View File

@ -66,12 +66,12 @@
<ng-template #actions let-row="row" let-item>
<div *ngIf="canDelete(row)" class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id, row.target)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'LOCK-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

8
frontend/src/app/ui/admin/language/editor/language-editor.component.html
View File

@ -6,16 +6,16 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'LANGUAGE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="!isNew && this.editorModel.belongsToCurrentTenant != false && canDelete">
<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'LANGUAGE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="rounded-btn primary" (click)="formSubmit()">
<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'LANGUAGE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
@ -28,7 +28,7 @@
<div class="row">
<div class="col-12">
<div class="container-fluid">
<div class="row">
<div class="row" style="row-gap: 0.5rem">
<div class="col-6" *ngIf="isNew">
<mat-form-field class="w-100">
<mat-label>{{'LANGUAGE-EDITOR.FIELDS.CODE' | translate}}</mat-label>

2
frontend/src/app/ui/admin/language/editor/language-editor.component.scss
View File

@ -12,7 +12,7 @@
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
background-color: var(--sys-primary);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {

6
frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'LANGUAGE-LISTING.FILTER.TITLE' | translate}}</h4>
@ -31,12 +31,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'LANGUAGE-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button cmat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button cmat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'LANGUAGE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

6
frontend/src/app/ui/admin/language/listing/filters/language-listing-filters.component.ts
View File

@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { TenantFilter } from '@app/core/query/tenant.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
import { nameof } from 'ts-simple-nameof';
@ -17,10 +18,11 @@ export class LanguageListingFiltersComponent extends BaseComponent implements On
// * State
internalFilters: LanguageListingFilters = this._getEmptyFilters();
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

8
frontend/src/app/ui/admin/language/listing/language-listing.component.html
View File

@ -6,7 +6,7 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary"
<button mat-button class="padded-shadow-btn secondary"
*ngIf="authService.hasPermission(authService.permissionEnum.EditLanguage)"
[routerLink]="routerUtils.generateUrl(['/languages/new'])">
<mat-icon>add</mat-icon>
@ -77,15 +77,15 @@
<ng-template #actions let-row="row" let-item>
<div *ngIf="canEdit(row) || canDelete(row)" class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/languages/', row.id])">
<mat-icon>edit</mat-icon>{{'LANGUAGE-LISTING.ACTIONS.EDIT' | translate}}
<mat-icon aria-hidden>edit</mat-icon>{{'LANGUAGE-LISTING.ACTIONS.EDIT' | translate}}
</a>
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'LANGUAGE-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

36
frontend/src/app/ui/admin/maintenance-tasks/maintenance-tasks.component.html
View File

@ -17,8 +17,8 @@
</mat-panel-description>
</mat-expansion-panel-header>
<div class="mt-2">
<button mat-button color="primary" (click)="generateIndex($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.GENERATE-INDEX')}}</button>
<button mat-button color="primary" (click)="clearIndex($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.CLEAR-INDEX')}}</button>
<button mat-button color="primary" (click)="generateIndex($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.GENERATE-INDEX')}}</button>
<button mat-button color="primary" (click)="clearIndex($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.INDEXES.ACTIONS.CLEAR-INDEX')}}</button>
</div>
</mat-expansion-panel>
<mat-expansion-panel>
@ -32,28 +32,28 @@
</mat-expansion-panel-header>
<div class="mt-2">
<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.MAIN-TITLE')}}</h3>
<button mat-button (click)="sendTenantTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-TENANT-TOUCH')}}</button>
<button mat-button (click)="sendUserTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-TOUCH')}}</button>
<button mat-button (click)="sendDescriptionTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TOUCH')}}</button>
<button mat-button (click)="sendPlanTouchEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-TOUCH')}}</button>
<button mat-button (click)="sendTenantTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-TENANT-TOUCH')}}</button>
<button mat-button (click)="sendUserTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-TOUCH')}}</button>
<button mat-button (click)="sendDescriptionTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TOUCH')}}</button>
<button mat-button (click)="sendPlanTouchEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-TOUCH')}}</button>
</div>
<div class="mt-2">
<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACCOUNTING-TITLE')}}</h3>
<button mat-button (click)="sendPlanAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendDescriptionAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendBlueprintAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-BLUEPRINT-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendDescriptionTemplateAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendDescriptionTemplateTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-TYPE-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendPrefillingSourceAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PREFILLING-SOURCE-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendReferenceTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-REFERENCE-TYPE-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendUserAccountingEntriesEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendPlanAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendDescriptionAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendBlueprintAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PLAN-BLUEPRINT-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendDescriptionTemplateAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendDescriptionTemplateTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-DESCRIPTION-TEMPLATE-TYPE-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendPrefillingSourceAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-PREFILLING-SOURCE-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendReferenceTypeAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-REFERENCE-TYPE-ACCOUNTING-ENTRIES')}}</button>
<button mat-button (click)="sendUserAccountingEntriesEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-USER-ACCOUNTING-ENTRIES')}}</button>
</div>
<div class="mt-2">
<h3>{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.INDICATOR-TITLE')}}</h3>
<button mat-button (click)="sendIndicatorCreateEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-CREATE-ENTRY')}}</button>
<button mat-button (click)="sendIndicatorResetEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-RESET-ENTRY')}}</button>
<button mat-button (click)="sendIndicatorAccessEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-ACCESS-ENTRY')}}</button>
<button mat-button (click)="sendIndicatorPointEvents($event)" class="mb-1 mr-1 rounded-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-POINT-ENTRY')}}</button>
<button mat-button (click)="sendIndicatorCreateEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-CREATE-ENTRY')}}</button>
<button mat-button (click)="sendIndicatorResetEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-RESET-ENTRY')}}</button>
<button mat-button (click)="sendIndicatorAccessEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-ACCESS-ENTRY')}}</button>
<button mat-button (click)="sendIndicatorPointEvents($event)" class="mb-1 mr-1 padded-shadow-btn primary">{{language.instant('MAINTENANCE-TASKS.SECTIONS.EVENTS.ACTIONS.SEND-INDICATOR-POINT-ENTRY')}}</button>
</div>
</mat-expansion-panel>
</mat-accordion>

16
frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.html
View File

@ -6,16 +6,16 @@
<app-navigation-breadcrumb />
</div>
<div class="col-md-auto mb-md-0 col-12 mb-2" *ngIf="canDelete">
<button [disabled]="isLocked" mat-button class="rounded-btn secondary" type="button" (click)="delete()">
<button [disabled]="isLocked" mat-button class="padded-shadow-btn secondary" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-md-auto col-12" *ngIf="canDownloadXML">
<button mat-button class="rounded-btn secondary" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
<button mat-button class="padded-shadow-btn secondary" (click)="downloadXML()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.DOWNLOAD-XML' | translate }}</button>
</div>
<div *ngIf="!hideEditActions && canFinalize" class="col-auto">
<button mat-button class="rounded-btn secondary" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
<button mat-button class="padded-shadow-btn secondary" (click)="finalize()" [disabled]="this.isLocked || !this.isFormValid()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.FINALIZE' | translate }}</button>
</div>
</div>
<form *ngIf="formGroup">
@ -78,7 +78,7 @@
</mat-form-field>
</div>
<div class="col-auto mb-3" *ngIf="!hideEditActions">
<button mat-button class="rounded-btn secondary" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div>
</div>
<div class="row">
@ -235,7 +235,7 @@
<mat-error *ngIf="section.get('hasTemplates').hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</div>
<div class="col-auto" *ngIf="!hideEditActions && section.get('hasTemplates').value">
<button mat-button class="rounded-btn secondary" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addDescriptionTemplate(sectionIndex)">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-DESCRIPTION-TEMPLATE' | translate}}</button>
</div>
</div>
</div>
@ -337,7 +337,7 @@
<div class="col-12">
<div class="row">
<div class="col-auto" *ngIf="!hideEditActions">
<button mat-button class="rounded-btn secondary" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSection()">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.ADD-SECTION' | translate}}</button>
<mat-error *ngIf="formGroup.get('definition').get('sections').dirty && formGroup.get('definition').get('sections').hasError('required')">{{'PLAN-BLUEPRINT-EDITOR.SECTIONS-REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('definition').get('sections').hasError('backendError')">{{formGroup.get('definition').get('sections').getError('backendError').message}}</mat-error>
</div>
@ -346,11 +346,11 @@
</div>
<div class="row mt-4">
<div class="col-auto">
<button mat-button class="rounded-btn secondary" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" (click)="cancel()" type="button">{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col"></div>
<div class="col-auto" *ngIf="!hideEditActions">
<button mat-button class="rounded-btn secondary" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
<button mat-button class="padded-shadow-btn secondary" [disabled]="isLocked" type="submit" (click)="save(); formSubmit()">
{{'PLAN-BLUEPRINT-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>

22
frontend/src/app/ui/admin/plan-blueprint/editor/plan-blueprint-editor.component.scss
View File

@ -18,7 +18,7 @@
.drag-handle {
cursor: move;
color: var(--primary-color);
color: var(--sys-primary);
}
.drag-handle-disabled {
cursor: auto;
@ -26,27 +26,13 @@
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
background-color: var(--sys-primary);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}
.finalize-btn {
border-radius: 30px;
border: 1px solid var(--primary-color);
background: transparent;
padding-left: 2em;
padding-right: 2em;
box-shadow: 0px 3px 6px #1E202029;
color: var(--primary-color);
&:disabled{
background-color: #CBCBCB;
color: #FFF;
border: 0px;
}
}
.dlt-section-btn {
margin: 0;
@ -75,13 +61,13 @@
.field-delete-icon{
font-size: 1.2em;
width: 14px;
color: var(--primary-color);
color: var(--sys-primary);
}
.field-delete-text{
font-size: 1em;
margin-left: 0.5em;
color: var(--primary-color);
color: var(--sys-primary);
}
}

10
frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.html
View File

@ -1,19 +1,19 @@
<div class="d-flex align-items-center gap-1-rem">
<button mat-flat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
<button mat-button [matMenuTriggerFor]="filterMenu" #filterMenuTrigger="matMenuTrigger" (click)="updateFilters()" class="filter-button">
<mat-icon aria-hidden="false" [matBadgeHidden]="!appliedFilterCount" [matBadge]="appliedFilterCount" matBadgeColor="warn" matBadgeSize="small">filter_alt</mat-icon>
{{'COMMONS.LISTING-COMPONENT.SEARCH-FILTER-BTN' | translate}}
</button>
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid pt-2 pb-2" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
</div>
<div class="col-auto">
<button color="accent" mat-button (click)="clearFilters()">
<button mat-button (click)="clearFilters()">
{{'COMMONS.LISTING-COMPONENT.CLEAR-ALL-FILTERS' | translate}}
</button>
</div>
@ -41,12 +41,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

1
frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.scss
View File

@ -15,6 +15,7 @@
.filter-button{
padding-top: .6rem;
padding-bottom: .6rem;
color: #000000;
}
::ng-deep .mdc-form-field {

6
frontend/src/app/ui/admin/plan-blueprint/listing/filters/plan-blueprint-listing-filters.component.ts
View File

@ -1,10 +1,11 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { PlanBlueprintStatus } from '@app/core/common/enum/plan-blueprint-status';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { PlanBlueprintFilter } from '@app/core/query/plan-blueprint.lookup';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
import { nameof } from 'ts-simple-nameof';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
selector: 'app-plan-blueprint-listing-filters',
@ -20,10 +21,11 @@ export class PlanBlueprintListingFiltersComponent extends BaseComponent implemen
// * State
internalFilters: PlanBlueprintListingFilters = this._getEmptyFilters();
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

6
frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.html
View File

@ -4,7 +4,7 @@
<h4>{{ data.message }}</h4>
</div>
<div class="col-auto ml-auto">
<button mat-icon-button tabindex="-1" (click)="cancel()">
<button mat-icon-button (click)="cancel()">
<mat-icon>close</mat-icon>
</button>
</div>
@ -34,11 +34,11 @@
<input matInput placeholder="{{'PLAN-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML-NAME'| translate}}" name="descriptionBlueprintName" [(ngModel)]="data.name">
</mat-form-field>
<div class="col-auto">
<button mat-button type="button" class="rounded-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
<button mat-button type="button" class="padded-shadow-btn neutral" (click)="cancel()">{{ data.cancelButton }}</button>
</div>
<div class="col"></div>
<div class="col-auto">
<button mat-button color="primary" class="rounded-btn primary" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
<button mat-button color="primary" class="padded-shadow-btn primary" type="button" (click)="confirm()" [disabled]="!hasBlueprint()">{{ data.confirmButton }}</button>
</div>
</div>
</mat-dialog-content>

27
frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.scss
View File

@ -9,35 +9,10 @@
border-radius: 30px;
min-width: 101px;
height: 43px;
color: #212121;
color: var(--dark-gray);
font-weight: 500;
}
.next-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;
}
.next-btn[disabled] {
width: 100px;
height: 43px;
background: #ffffff 0% 0% no-repeat padding-box;
border: 1px solid #b5b5b5;
border-radius: 30px;
opacity: 1;
}
.next-btn:not([disabled]):hover {
background-color: var(--primary-color);
color: #ffffff;
}
//ngx dropzone
.drop-file {
background-color: #fafafa;

7
frontend/src/app/ui/admin/plan-blueprint/listing/import-plan-blueprint/import-plan-blueprint.dialog.component.ts
View File

@ -1,5 +1,6 @@
import { Component, Inject } from '@angular/core';
import { Component, computed, HostBinding, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
@Component({
@ -7,6 +8,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
styleUrls: ['./import-plan-blueprint.dialog.component.scss']
})
export class ImportPlanBlueprintDialogComponent {
@HostBinding('class.accessibility-theme') accessibilityTheme = computed(() => this.fontService.accessibleFontSignal())();
sizeError = false;
selectFile = false;
@ -15,7 +17,8 @@ export class ImportPlanBlueprintDialogComponent {
constructor(
public dialogRef: MatDialogRef<ImportPlanBlueprintDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any
@Inject(MAT_DIALOG_DATA) public data: any,
protected fontService: FontAccessibilityService,
) { }

18
frontend/src/app/ui/admin/plan-blueprint/listing/plan-blueprint-listing.component.html
View File

@ -6,7 +6,7 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn import" (click)="import()">
<button mat-button class="padded-shadow-btn import" (click)="import()">
<span class="button-text">
{{'PLAN-BLUEPRINT-LISTING.IMPORT.UPLOAD-XML' | translate}}
</span>
@ -14,7 +14,7 @@
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditDescriptionTemplateType)" [routerLink]="routerUtils.generateUrl(['/plan-blueprints/new'])">
<mat-icon>add</mat-icon>
{{'PLAN-BLUEPRINT-LISTING.CREATE-PLAN-BLUEPRINT' | translate}}
</button>
@ -81,28 +81,28 @@
<ng-template #actions let-row="row" let-item>
<div class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<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}}
<mat-icon aria-hidden>edit</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.EDIT' | translate}}
</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}}
<mat-icon aria-hidden>queue</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.NEW-VERSION' | translate}}
</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}}
<mat-icon aria-hidden>content_copy</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.CLONE' | translate}}
</a>
<a *ngIf="row.isActive == isActive.Active" mat-menu-item [routerLink]="routerUtils.generateUrl(['/plan-blueprints/versions/', row.groupId])">
<mat-icon>library_books</mat-icon>
<mat-icon aria-hidden>library_books</mat-icon>
{{'PLAN-BLUEPRINT-LISTING.ACTIONS.VIEW-VERSIONS' | translate}}
</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}}
<mat-icon aria-hidden>download</mat-icon>{{'PLAN-BLUEPRINT-LISTING.ACTIONS.DOWNLOAD-XML' | translate}}
</button>
<button *ngIf="canDelete(row)" mat-menu-item (click)="delete(row.id)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'PLAN-BLUEPRINT-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

125
frontend/src/app/ui/admin/plan-status/editor/plan-status-editor/plan-status-editor.component.html
View File

@ -1,40 +1,40 @@
<div class="container-fluid">
<div class="row">
<div class="col-md-10 offset-md-1 colums-gapped">
<div class="row align-items-center mt-4 mb-4" *ngIf="formGroup">
<div class="col-md col-12">
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="row">
<div class="col-md-10 offset-md-1 colums-gapped">
<div class="row align-items-center mt-4 mb-4" *ngIf="formGroup">
<div class="col-md col-12">
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="cancel()" type="button">{{'PLAN-STATUS-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-raised-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
<button mat-raised-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'PLAN-STATUS-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="rounded-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()" [disabled]="!formGroup.touched">
<mat-icon>save</mat-icon>
{{'PLAN-STATUS-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>
</div>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card class="pt-3 pb-3" appearance="outlined">
<mat-card-content>
<div class="row">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="formGroup.controls.name" required>
<mat-error *ngIf="formGroup.controls.name.hasError('backendError')">{{formGroup.controls.name.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.controls.name.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card class="pt-3 pb-3" appearance="outlined">
<mat-card-content>
<div class="row">
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.NAME' | translate}}</mat-label>
<input matInput type="text" name="name" [formControl]="formGroup.controls.name" required>
<mat-error *ngIf="formGroup.controls.name.hasError('backendError')">{{formGroup.controls.name.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.controls.name.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12 pt-2">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.INTERNAL-STATUS' | translate}}</mat-label>
<mat-select [formControl]="formGroup.controls.internalStatus">
@ -45,33 +45,28 @@
</mat-form-field>
</div>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ACTION' | translate}}</mat-label>
<input matInput type="text" name="action" [formControl]="formGroup.controls.action">
<mat-error *ngIf="formGroup.controls.action.hasError('backendError')">{{formGroup.controls.action.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.controls.action.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<h3>{{'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3>
<div class="col-12">
<rich-text-editor-component
[form]="formGroup.controls.description"
[placeholder]="'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION'"
[editable]="!formGroup.controls.description.disabled"
[wrapperClasses]="(formGroup.controls.description.touched && formGroup.controls.description.hasError('backendError')) ? 'required' : ''"
/>
@if(formGroup.controls.description.hasError('backendError')){
<div class="mat-form-field formGroup-field-subscript-wrapper">
<mat-error>{{formGroup.controls.description.getError('backendError').message}}</mat-error>
</div>
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ACTION' | translate}}</mat-label>
<input matInput type="text" name="action" [formControl]="formGroup.controls.action">
<mat-error *ngIf="formGroup.controls.action.hasError('backendError')">{{formGroup.controls.action.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.controls.action.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<h3>{{'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION' | translate}}</h3>
<div class="col-12">
<rich-text-editor-component [form]="formGroup.controls.description" [placeholder]="'PLAN-STATUS-EDITOR.FIELDS.DESCRIPTION'" [editable]="!formGroup.controls.description.disabled" [wrapperClasses]="(formGroup.controls.description.touched && formGroup.controls.description.hasError('backendError')) ? 'required' : ''" />
@if(formGroup.controls.description.hasError('backendError')){
<div class="mat-form-field formGroup-field-subscript-wrapper">
<mat-error>{{formGroup.controls.description.getError('backendError').message}}</mat-error>
</div>
}
</div>
</div>
</div>
</div>
<div class="col-12">
<h3>
{{'PLAN-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}}
</h3>
{{'PLAN-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}}
</h3>
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.AVAILABLE-ACTIONS' | translate}}</mat-label>
<mat-select multiple [formControl]="formGroup.controls.definition.controls.availableActions">
@ -79,10 +74,10 @@
</mat-select>
</mat-form-field>
</div>
<div class="col-12">
<h3>
{{'PLAN-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}}
</h3>
<div class="col-12">
<h3>
{{'PLAN-STATUS-EDITOR.FIELDS.AUTHORIZATION' | translate}}
</h3>
<div id="Edit">
<mat-card>
<mat-card-header>
@ -91,7 +86,9 @@
<mat-card-content>
<div class="col-12">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}</mat-label>
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.ROLES' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.roles" [multiple]="true">
<mat-option *ngFor="let userRole of userRolesEnum" [value]="userRole">{{enumUtils.toAppRoleString(userRole)}}</mat-option>
</mat-select>
@ -99,9 +96,11 @@
<mat-error *ngIf="editAuthenticationForm.controls.roles.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
</mat-form-field>
</div>
<div class="col-12">
<div class="col-12 pt-2">
<mat-form-field class="w-100">
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}</mat-label>
<mat-label>{{'PLAN-STATUS-EDITOR.FIELDS.PLAN-ROLES' | translate}}
&nbsp;*<small class="required-text">{{'GENERAL.VALIDATION.REQUIRED' | translate }}</small>
</mat-label>
<mat-select [formControl]="editAuthenticationForm.controls.planRoles" [multiple]="true">
<mat-option *ngFor="let planRole of planRolesEnum" [value]="planRole">{{enumUtils.toPlanUserRoleString(planRole)}}</mat-option>
</mat-select>
@ -122,11 +121,11 @@
</mat-card-content>
</mat-card>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
</div>
</div>
</div>
</mat-card-content>
</mat-card>
</form>
</div>
</div>
</div>

6
frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'PLAN-BLUEPRINT-LISTING.FILTER.TITLE' | translate}}</h4>
@ -41,12 +41,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'PLAN-BLUEPRINT-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'PLAN-BLUEPRINT-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

7
frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing-filters/plan-status-listing-filters.component.ts
View File

@ -1,7 +1,8 @@
import { Component, effect, EventEmitter, input, Input, Output } from '@angular/core';
import { Component, computed, effect, EventEmitter, input, Input, Output } from '@angular/core';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { PlanStatusEnum } from '@app/core/common/enum/plan-status';
import { PlanStatusFilter } from '@app/core/query/plan-status.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
@ -17,8 +18,8 @@ export class PlanStatusListingFiltersComponent extends BaseComponent {
internalFilters: PlanStatusListingFilters = this._getEmptyFilters();
appliedFilterCount: number = 0;
internalStatusEnum = this.enumUtils.getEnumValues<PlanStatusEnum>(PlanStatusEnum);
constructor(protected enumUtils: EnumUtils) {
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
constructor(protected enumUtils: EnumUtils, protected fontService: FontAccessibilityService) {
super();
effect(() => {
const newFilters = this.filter();

8
frontend/src/app/ui/admin/plan-status/listing/plan-status-listing/plan-status-listing.component.html
View File

@ -7,7 +7,7 @@
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
<button mat-button class="padded-shadow-btn secondary" *ngIf="authService.hasPermission(authService.permissionEnum.EditPlanStatus)" [routerLink]="routerUtils.generateUrl(['/plan-statuses/new'])">
<mat-icon>add</mat-icon>
{{'PLAN-STATUS-LISTING.ACTIONS.CREATE-PLAN-STATUS' | translate}}
</button>
@ -43,15 +43,15 @@
<ng-template #actions let-row="row" let-item>
<div class="row" (click)="$event.stopPropagation()">
<div class="col-auto" *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<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}}
<mat-icon aria-hidden>edit</mat-icon>{{'PLAN-STATUS-LISTING.ACTIONS.EDIT' | translate}}
</a>
<button *ngIf="canDelete(row)" mat-menu-item (click)="delete(row.id)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'PLAN-STATUS-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

12
frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.html
View File

@ -7,16 +7,16 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'PREFILLING-SOURCE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="rounded-btn primary" (click)="formSubmit()">
<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
@ -90,7 +90,7 @@
</div>
</div>
</div>
<button mat-button class="rounded-btn secondary" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addFixedValiueField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div>
</div>
</div>
@ -133,8 +133,8 @@
</div>
</div>
<div class="row d-flex gap-half-rem">
<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<button mat-button class="rounded-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'PREFILLING-SOURCE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
</div>
</div>
</mat-card-content>

8
frontend/src/app/ui/admin/prefilling-source/editor/prefilling-source-editor.component.scss
View File

@ -11,14 +11,6 @@
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}
::ng-deep .mdc-form-field {
label {
margin: 0;

6
frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'PREFILLING-SOURCE-LISTING.FILTER.TITLE' | translate}}</h4>
@ -31,12 +31,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'PREFILLING-SOURCE-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'PREFILLING-SOURCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

6
frontend/src/app/ui/admin/prefilling-source/listing/filters/prefilling-source-listing-filters.component.ts
View File

@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { PrefillingSourceFilter } from '@app/core/query/prefilling-source.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
import { nameof } from 'ts-simple-nameof';
@ -17,10 +18,11 @@ export class PrefillingSourceListingFiltersComponent extends BaseComponent imple
// * State
internalFilters: PrefillingSourceListingFilters = this._getEmptyFilters();
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

8
frontend/src/app/ui/admin/prefilling-source/listing/prefilling-source-listing.component.html
View File

@ -7,7 +7,7 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary"
<button mat-button class="padded-shadow-btn secondary"
*ngIf="authService.hasPermission(authService.permissionEnum.EditPrefillingSource)"
[routerLink]="routerUtils.generateUrl(['/prefilling-sources/new'])">
<mat-icon>add</mat-icon>
@ -79,15 +79,15 @@
<ng-template #actions let-row="row" let-item>
<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<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}}
<mat-icon aria-hidden>edit</mat-icon>{{'PREFILLING-SOURCE-LISTING.ACTIONS.EDIT' | translate}}
</a>
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'PREFILLING-SOURCE-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

14
frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.html
View File

@ -7,16 +7,16 @@
</div>
<div class="col-auto">
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-TYPE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button (click)="delete()" class="rounded-btn delete-inverted" type="button">
<button mat-button (click)="delete()" class="padded-shadow-btn delete-inverted" type="button">
<mat-icon>delete</mat-icon>
{{'REFERENCE-TYPE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="rounded-btn primary" (click)="formSubmit()">
<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'REFERENCE-TYPE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
@ -60,7 +60,7 @@
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.FIELDS' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</div>
</div>
</div>
@ -76,7 +76,7 @@
<div class="col-12">
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
<div class="col-12">
<div class="row d-flex align-items-center">
<div class="row d-flex align-items-center" style="row-gap: 0.5rem">
<div class="col-auto pb-3 d-flex">
<span>{{fieldIndex + 1}}</span>
</div>
@ -124,7 +124,7 @@
</div>
</div>
</div>
<button mat-button class="rounded-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" *ngIf="formGroup.get('definition').get('fields').value != ''" type="button" (click)="submitFields()" [disabled]="!formGroup.get('definition').get('fields').valid">{{'REFERENCE-TYPE-EDITOR.ACTIONS.SUBMIT-FIELDS' | translate}}</button>
</div>
<div class="col-12 mt-3 mb-3">
<div class="row d-flex align-items-center">
@ -132,7 +132,7 @@
<h3 class="m-0">{{'REFERENCE-TYPE-EDITOR.FIELDS.SOURCES' | translate}}</h3>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addSource()" [disabled]="formGroup.get('definition').get('fields').disabled">{{'REFERENCE-TYPE-EDITOR.ACTIONS.ADD-SOURCE' | translate}}</button>
</div>
</div>
</div>

14
frontend/src/app/ui/admin/reference-type/editor/reference-type-editor.component.scss
View File

@ -7,18 +7,10 @@
.add {
background-color: white;
color: #009700;
color: #009700; //todo mchouliara
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}
.dlt-section-btn {
margin: 0;
@ -47,12 +39,12 @@
.field-delete-icon{
font-size: 1.2em;
width: 14px;
color: var(--primary-color);
color: var(--sys-primary);
}
.field-delete-text{
font-size: 1em;
margin-left: 0.5em;
color: var(--primary-color);
color: var(--sys-primary);
}
}

6
frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'REFERENCE-TYPE-LISTING.FILTER.TITLE' | translate}}</h4>
@ -31,12 +31,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'REFERENCE-TYPE-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'REFERENCE-TYPE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

5
frontend/src/app/ui/admin/reference-type/listing/filters/reference-type-listing-filters.component.ts
View File

@ -1,6 +1,7 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { ReferenceTypeFilter } from '@app/core/query/reference-type.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
import { nameof } from 'ts-simple-nameof';
@ -17,10 +18,12 @@ export class ReferenceTypeListingFiltersComponent extends BaseComponent implemen
// * State
internalFilters: ReferenceTypeListingFilters = this._getEmptyFilters();
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

8
frontend/src/app/ui/admin/reference-type/listing/reference-type-listing.component.html
View File

@ -7,7 +7,7 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary"
<button mat-button class="padded-shadow-btn secondary"
*ngIf="authService.hasPermission(authService.permissionEnum.EditReferenceType)"
[routerLink]="routerUtils.generateUrl(['/reference-type/new'])">
<mat-icon>add</mat-icon>
@ -80,15 +80,15 @@
<ng-template #actions let-row="row" let-item>
<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<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}}
<mat-icon aria-hidden>edit</mat-icon>{{'REFERENCE-TYPE-LISTING.ACTIONS.EDIT' | translate}}
</a>
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'REFERENCE-TYPE-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

10
frontend/src/app/ui/admin/reference/editor/reference-editor.component.html
View File

@ -6,16 +6,16 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
<button mat-button class="padded-shadow-btn neutral" (click)="cancel()" type="button">{{'REFERENCE-EDITOR.ACTIONS.CANCEL' | translate}}</button>
</div>
<div class="col-auto" *ngIf="canDelete">
<button mat-button class="rounded-btn delete-inverted" type="button" (click)="delete()">
<button mat-button class="padded-shadow-btn delete-inverted" type="button" (click)="delete()">
<mat-icon>delete</mat-icon>
{{'REFERENCE-EDITOR.ACTIONS.DELETE' | translate}}
</button>
</div>
<div class="col-auto" *ngIf="canSave">
<button mat-button class="rounded-btn primary" (click)="formSubmit()">
<button mat-button class="padded-shadow-btn primary" (click)="formSubmit()">
<mat-icon>save</mat-icon>
{{'REFERENCE-EDITOR.ACTIONS.SAVE' | translate}}
</button>
@ -25,7 +25,7 @@
<form *ngIf="formGroup" (ngSubmit)="formSubmit()">
<mat-card class="pt-3 pb-3" appearance="outlined">
<mat-card-content>
<div class="row">
<div class="row" style="row-gap: 0.5rem">
<div class="col-4">
<mat-form-field class="w-100">
<mat-label>{{'REFERENCE-EDITOR.FIELDS.LABEL' | translate}}</mat-label>
@ -92,7 +92,7 @@
<div class="col-12">
<h3 class="mb-4">
{{'REFERENCE-EDITOR.FIELDS.FIELDS' | translate}}
<button mat-button class="rounded-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
<button mat-button class="padded-shadow-btn secondary" type="button" (click)="addField()" [disabled]="formGroup.disabled">{{'REFERENCE-EDITOR.ACTIONS.ADD-FIELD' | translate}}</button>
</h3>
<div *ngFor="let field of formGroup.get('definition').get('fields').controls; let fieldIndex=index;" class="row mb-3">
<div class="col-12">

8
frontend/src/app/ui/admin/reference/editor/reference-editor.component.scss
View File

@ -9,12 +9,4 @@
background-color: white;
color: #009700;
}
}
::ng-deep .mat-checkbox-checked.mat-accent .mat-checkbox-background, .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
background-color: var(--primary-color-3);
}
::ng-deep .mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}

6
frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.html
View File

@ -7,7 +7,7 @@
<mat-menu #filterMenu>
<div class="container-fluid" (click)="$event?.stopPropagation?.()">
<div class="container-fluid" [class.accessibility-theme]="accessibilityTheme()" (click)="$event?.stopPropagation?.()">
<div class="row justify-content-between">
<div class="col-auto mt-2">
<h4>{{'REFERENCE-LISTING.FILTER.TITLE' | translate}}</h4>
@ -53,12 +53,12 @@
<div class="row justify-content-end align-items-center mt-4 mb-1 gap-1-rem">
<div class="col-auto">
<button mat-button class="rounded-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
<button mat-button class="padded-shadow-btn primary-inverted" (click)="filterMenuTrigger?.closeMenu()">
{{'REFERENCE-LISTING.FILTER.CANCEL' | translate}}
</button>
</div>
<div class="col-auto">
<button mat-button class="rounded-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
<button mat-button class="padded-shadow-btn primary" (click)="filterMenuTrigger.closeMenu(); applyFilters();">
{{'REFERENCE-LISTING.FILTER.APPLY-FILTERS' | translate}}
</button>
</div>

8
frontend/src/app/ui/admin/reference/listing/filters/reference-listing-filters.component.ts
View File

@ -1,7 +1,8 @@
import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { Component, computed, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
import { IsActive } from '@app/core/common/enum/is-active.enum';
import { ReferenceSourceType } from '@app/core/common/enum/reference-source-type';
import { ReferenceFilter } from '@app/core/query/reference.lookup';
import { FontAccessibilityService } from '@app/core/services/font-accessibility.service';
import { ReferenceTypeService } from '@app/core/services/reference-type/reference-type.service';
import { EnumUtils } from '@app/core/services/utilities/enum-utils.service';
import { BaseComponent } from '@common/base/base.component';
@ -22,11 +23,12 @@ export class ReferenceListingFiltersComponent extends BaseComponent implements O
// * State
internalFilters: ReferenceListingFilters = this._getEmptyFilters();
accessibilityTheme = computed(() => this.fontService.accessibleFontSignal());
protected appliedFilterCount: number = 0;
constructor(
public enumUtils: EnumUtils,
public referenceTypeService: ReferenceTypeService
public referenceTypeService: ReferenceTypeService,
protected fontService: FontAccessibilityService
) { super(); }
ngOnInit() {

8
frontend/src/app/ui/admin/reference/listing/reference-listing.component.html
View File

@ -7,7 +7,7 @@
<app-navigation-breadcrumb />
</div>
<div class="col-auto">
<button mat-button class="rounded-btn secondary"
<button mat-button class="padded-shadow-btn secondary"
*ngIf="authService.hasPermission(authService.permissionEnum.EditReference)"
[routerLink]="routerUtils.generateUrl(['/references/new/'])">
<mat-icon>add</mat-icon>
@ -101,15 +101,15 @@
<ng-template #actions let-row="row" let-item>
<div *ngIf="row?.belongsToCurrentTenant && !isDeleted(row)" class="row" (click)="$event.stopPropagation()">
<div class="col-auto">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu">
<button mat-icon-button [matMenuTriggerFor]="actionsMenu" [attr.aria-label]="'ALT-TEXT.MORE-ACTIONS' | translate">
<mat-icon>more_horiz</mat-icon>
</button>
<mat-menu #actionsMenu="matMenu">
<a *ngIf="canEdit(row)" mat-menu-item [routerLink]="routerUtils.generateUrl(['/references/', row.id])">
<mat-icon>edit</mat-icon>{{'REFERENCE-LISTING.ACTIONS.EDIT' | translate}}
<mat-icon aria-hidden>edit</mat-icon>{{'REFERENCE-LISTING.ACTIONS.EDIT' | translate}}
</a>
<button *ngIf="canDelete(row)" mat-menu-item (click)="deleteType(row.id)">
<mat-icon>delete</mat-icon>
<mat-icon aria-hidden>delete</mat-icon>
{{'REFERENCE-LISTING.ACTIONS.DELETE' | translate}}
</button>
</mat-menu>

70
frontend/src/app/ui/admin/tenant-configuration/editor/css-colors/css-colors-editor.component.html
View File

@ -1,70 +1,44 @@
<div *ngIf="formGroup" class="container-fluid css-colors">
<div class="row">
<div class="col-12">
<div class="row">
<div class="row" style="row-gap: 0.5rem">
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColorInput')" required />
<mat-label [matTooltip]="'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-HINT' | translate">
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR' | translate}}
</mat-label>
<input matInput [formControl]="cssColorForm?.get('primaryColorInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[overlayClassName]="mr-1"
[formControl]="formGroup.get('cssColors')?.get('primaryColor')"
[formControl]="cssColorForm?.get('primaryColor')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-2' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor2Input')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryColor2')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor2')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor2')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.PRIMARY-COLOR-3' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('primaryColor3Input')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('primaryColor3')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('primaryColor3')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('primaryColor3')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 col-md-6">
<mat-label>{{'TENANT-CONFIGURATION-EDITOR.FIELDS.SECONDARY-COLOR' | translate}}</mat-label>
<input matInput [formControl]="formGroup.get('cssColors')?.get('secondaryColorInput')" required />
<ngx-colors
class="suffix"
matSuffix
ngx-colors-trigger
[formControl]="formGroup.get('cssColors')?.get('secondaryColor')"
></ngx-colors>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('backendError')">{{formGroup.get('cssColors')?.get('secondaryColor')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="formGroup.get('cssColors')?.get('secondaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
<mat-error *ngIf="cssColorForm?.get('primaryColor')?.hasError('backendError')">{{cssColorForm?.get('primaryColor')?.getError('backendError').message}}</mat-error>
<mat-error *ngIf="cssColorForm?.get('primaryColor')?.hasError('required')">{{'GENERAL.VALIDATION.REQUIRED' | translate}}</mat-error>
<mat-error *ngIf="cssColorForm?.get('primaryColor')?.hasError('invalidColor')">{{'GENERAL.VALIDATION.INVALID-COLOR' | translate}}</mat-error>
</mat-form-field>
<mat-form-field class="col-12 pt-2 pb-2 ">
<mat-label>
{{'TENANT-CONFIGURATION-EDITOR.FIELDS.CSS-OVERRIDE' | translate}}
</mat-label>
<textarea
matInput
class="w-100 css-override"
[formControl]="cssColorForm?.get('cssOverride')"
></textarea>
<mat-error *ngIf="cssColorForm?.get('cssOverride')?.hasError('backendError')">{{cssColorForm?.get('cssOverride')?.getError('backendError').message}}</mat-error>
</mat-form-field>
</div>
</div>
<div class="col-12">
<div class="row actions-row">
<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-button class="rounded-btn primary-inverted" (click)="delete()">
<div class="ml-auto col-auto" *ngIf="editorModel.id"><button mat-stroked-button color="primary" class="padded-shadow-btn" (click)="delete()">
{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.RESET-TO-DEFAULT' | translate}}
</button>
</div>
<div class="col-auto"><button mat-button class="rounded-btn primary" (click)="formSubmit()">
<div class="col-auto"><button mat-flat-button color="primary" class="padded-shadow-btn" (click)="formSubmit()">
{{'TENANT-CONFIGURATION-EDITOR.ACTIONS.SAVE' | translate}}
</button>
</div>

Some files were not shown because too many files have changed in this diff Show More