TSK-1474: Update classification details layout (#1358)
Co-authored-by: Chi Nguyen <c.nguyen.prog@gmail.com>
This commit is contained in:
Sofie Hofmann
GitHub
parent
ecfe7c3046
commit
fc6f420b96
|
|
@ -1,11 +1,11 @@
|
|||
<div class="classification-details">
|
||||
|
||||
<div class="classification-details__wrapper" id="classification-details" *ngIf="classification && !requestInProgress">
|
||||
<div class="classification-details-wrapper" id="classification-details" *ngIf="classification && !requestInProgress">
|
||||
|
||||
<!-- TITLE + ACTION BUTTONS -->
|
||||
<mat-toolbar class="classification-details__action-toolbar">
|
||||
<h4 class="classification-details__headline">{{classification.name}} [{{classification.type}}]
|
||||
<span *ngIf="isCreatingNewClassification" class="badge warning"> {{badgeMessage$ | async}}</span>
|
||||
<mat-toolbar class="action-toolbar">
|
||||
<h4 class="action-toolbar__headline">{{classification.name}} [{{classification.type}}]
|
||||
<span *ngIf="isCreatingNewClassification" class="action-toolbar__badge-message"> {{badgeMessage$ | async}}</span>
|
||||
</h4>
|
||||
|
||||
<div>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
|
||||
<button mat-stroked-button class="action-toolbar__button" matTooltip="Revert changes to previous saved state" (click)="onRestore()">
|
||||
Undo Changes
|
||||
<mat-icon class="button__green-blue md-20">restore</mat-icon>
|
||||
<mat-icon class="action-toolbar__aquamarine-button md-20">restore</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-stroked-button [matMenuTriggerFor]="buttonMenu" matTooltip="More actions" class="action-toolbar__button" id="action-toolbar__more-buttons">
|
||||
|
|
@ -25,11 +25,11 @@
|
|||
|
||||
<mat-menu #buttonMenu="matMenu">
|
||||
<button mat-menu-item class="action-toolbar__dropdown" matTooltip="Copy current values to create new classification" (click)="onCopy()">
|
||||
<mat-icon class="button__green-blue">content_copy</mat-icon>
|
||||
<mat-icon class="action-toolbar__aquamarine-button">content_copy</mat-icon>
|
||||
<span>Copy</span>
|
||||
</button>
|
||||
<button mat-menu-item class="action-toolbar__dropdown" matTooltip="Delete this classification" (click)="onRemoveClassification()">
|
||||
<mat-icon class="button__red">delete</mat-icon>
|
||||
<mat-icon class="action-toolbar__red-button">delete</mat-icon>
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
<button mat-menu-item class="action-toolbar__dropdown" style="border-bottom-style: none;" matTooltip="Close this classification and discard all changes" (click)="onCloseClassification()">
|
||||
|
|
@ -38,172 +38,184 @@
|
|||
</button>
|
||||
</mat-menu>
|
||||
</div>
|
||||
|
||||
</mat-toolbar>
|
||||
|
||||
|
||||
<!-- DETAILED FIELDS -->
|
||||
<div class="panel-body" style="padding: 0">
|
||||
<div style="padding: 0">
|
||||
<ng-form #ClassificationForm="ngForm">
|
||||
<div class="classification__detailed-fields">
|
||||
<div class="detailed-fields">
|
||||
|
||||
<h6 class="classification-details__subheading" style="margin-top: 65px;"> General </h6>
|
||||
<mat-divider class="classification-details__horizontal-line"> </mat-divider>
|
||||
<h6 class="detailed-fields__subheading" style="margin-top: 65px;"> General </h6>
|
||||
<mat-divider class="detailed-fields__horizontal-line"> </mat-divider>
|
||||
|
||||
<!-- KEY -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Key</mat-label>
|
||||
<label for="classification-key"></label>
|
||||
<input matInput required type="text" #key="ngModel" maxlength="32" [disabled]="!isCreatingNewClassification"
|
||||
id="classification-key" placeholder="Key" [(ngModel)]="classification.key"
|
||||
name="classification.key" (input)="validateInputOverflow(key, 32)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(key.name)" class="error">{{lengthError}}</div>
|
||||
<!-- <taskana-shared-field-error-display [displayError]="key.invalid && key.dirty"
|
||||
errorMessage="* Key is required">
|
||||
</taskana-shared-field-error-display> -->
|
||||
<!-- GENERAL -->
|
||||
<div class="detailed-fields__general">
|
||||
|
||||
<!-- NAME -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Name</mat-label>
|
||||
<label for="classification-name"></label>
|
||||
<input matInput type="text" required maxlength="255" #name="ngModel"
|
||||
id="classification-name" placeholder="Name"
|
||||
[(ngModel)]="classification.name" name="classification.name"
|
||||
(input)="validateInputOverflow(name, 255)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(name.name)" class="error">{{lengthError}}</div>
|
||||
<!--
|
||||
<taskana-shared-field-error-display [displayError]="name.invalid && name.dirty"
|
||||
errorMessage="* Name is required">
|
||||
</taskana-shared-field-error-display> -->
|
||||
<!-- GENERAL LEFT COLUMN -->
|
||||
<div class="detailed-fields__general-left-column">
|
||||
|
||||
|
||||
<!-- SERVICE LEVEL AND PRIORITY-->
|
||||
<div class="classification-details__service-and-priority">
|
||||
<div class="classification-details__service">
|
||||
<mat-form-field appearance="outline" class="classification-details__mat-form-field">
|
||||
<mat-label> Service Level </mat-label>
|
||||
<label for="classification-service-level"></label>
|
||||
<input matInput type="text" required maxlength="255"
|
||||
id="classification-service-level" placeholder="Service Level"
|
||||
[(ngModel)]="classification.serviceLevel" name="classification.serviceLevel"
|
||||
#serviceLevel="ngModel" (input)="validateInputOverflow(serviceLevel, 255)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(serviceLevel.name)" class="error">{{lengthError}}</div>
|
||||
</div>
|
||||
|
||||
<div class="classification-details__priority">
|
||||
<!-- I replaced this component by the mat-form-field. Is this the same?
|
||||
I don't understand all methods in the number-picker component.
|
||||
<taskana-shared-number-picker [(ngModel)]="classification.priority"
|
||||
name="classification.priority"
|
||||
id="classification-priority"
|
||||
[required]="true"
|
||||
[name]="'Priority'">
|
||||
</taskana-shared-number-picker> -->
|
||||
<!-- KEY -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Priority</mat-label>
|
||||
<label for="classification-priority"></label>
|
||||
<input matInput type="number" [(ngModel)]="classification.priority"
|
||||
name="classification.priority" id="classification-priority" required min="0">
|
||||
<mat-label>Key</mat-label>
|
||||
<label for="classification-key"></label>
|
||||
<input matInput required type="text" #key="ngModel" maxlength="32" [disabled]="!isCreatingNewClassification"
|
||||
id="classification-key" placeholder="Key" [(ngModel)]="classification.key"
|
||||
name="classification.key" (input)="validateInputOverflow(key, 32)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(key.name)" class="error">{{lengthError}}</div>
|
||||
<!-- <taskana-shared-field-error-display [displayError]="key.invalid && key.dirty"
|
||||
errorMessage="* Key is required">
|
||||
</taskana-shared-field-error-display> -->
|
||||
|
||||
<!-- NAME -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Name</mat-label>
|
||||
<label for="classification-name"></label>
|
||||
<input matInput type="text" required maxlength="255" #name="ngModel"
|
||||
id="classification-name" placeholder="Name"
|
||||
[(ngModel)]="classification.name" name="classification.name"
|
||||
(input)="validateInputOverflow(name, 255)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(name.name)" class="error">{{lengthError}}</div>
|
||||
<!--
|
||||
<taskana-shared-field-error-display [displayError]="name.invalid && name.dirty"
|
||||
errorMessage="* Name is required">
|
||||
</taskana-shared-field-error-display> -->
|
||||
|
||||
<!-- DESCRIPTION -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Description</mat-label>
|
||||
<label for="classification-description"></label>
|
||||
<textarea matInput
|
||||
cdkTextareaAutosize
|
||||
cdkAutosizeMinRows="6"
|
||||
cdkAutosizeMaxRows="6"
|
||||
maxlength="255"
|
||||
id="classification-description" placeholder="Description"
|
||||
[(ngModel)]="classification.description"
|
||||
name="classification.description" #description="ngModel"
|
||||
(input)="validateInputOverflow(description, 255)"></textarea>
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(description.name)" class="error">{{lengthError}}</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="detailed-fields__spacer"> </div>
|
||||
|
||||
|
||||
|
||||
<!-- GENERAL RIGHT ROW -->
|
||||
<div class="detailed-fields__general-right-column">
|
||||
|
||||
<!-- DOMAIN -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Domain</mat-label>
|
||||
<label for="classification-domain"></label>
|
||||
<input matInput type="text" disabled id="classification-domain"
|
||||
placeholder="Domain" [(ngModel)]="classification.domain"
|
||||
name="classification.domain">
|
||||
</mat-form-field>
|
||||
|
||||
<taskana-shared-field-error-display
|
||||
[displayError]="!isFieldValid('classification.priority')"
|
||||
[validationTrigger]="this.toggleValidationMap.get('classification.priority.name')"
|
||||
errorMessage="* Priority is required">
|
||||
</taskana-shared-field-error-display>
|
||||
<div *ngIf="!masterDomainSelected()" class="detailed-fields__domain-checkbox">
|
||||
Valid in Domain
|
||||
<a (click)="validChanged()" title="Valid in Domain">
|
||||
<mat-icon class="detailed-fields__domain-checkbox-icon">{{classification.isValidInDomain ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- SERVICE LEVEL AND PRIORITY-->
|
||||
<div class="detailed-fields__service-and-priority">
|
||||
|
||||
<!-- SERVICE LEVEL -->
|
||||
<div style="width: 48%">
|
||||
<mat-form-field appearance="outline" style="width: 100%">
|
||||
<mat-label> Service Level </mat-label>
|
||||
<label for="classification-service-level"></label>
|
||||
<input matInput type="text" required maxlength="255"
|
||||
id="classification-service-level" placeholder="Service Level"
|
||||
[(ngModel)]="classification.serviceLevel" name="classification.serviceLevel"
|
||||
#serviceLevel="ngModel" (input)="validateInputOverflow(serviceLevel, 255)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(serviceLevel.name)" class="error">{{lengthError}}</div>
|
||||
</div>
|
||||
|
||||
<!-- PRIORITY-->
|
||||
<div style="width: 48%">
|
||||
<mat-form-field appearance="outline" style="width: 100%">
|
||||
<mat-label>Priority</mat-label>
|
||||
<label for="classification-priority"></label>
|
||||
<input matInput type="number" [(ngModel)]="classification.priority"
|
||||
name="classification.priority" id="classification-priority" required min="0">
|
||||
</mat-form-field>
|
||||
|
||||
<taskana-shared-field-error-display
|
||||
[displayError]="!isFieldValid('classification.priority')"
|
||||
[validationTrigger]="this.toggleValidationMap.get('classification.priority.name')"
|
||||
errorMessage="* Priority is required">
|
||||
</taskana-shared-field-error-display>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- APPLICATION ENTRY POINT -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Application entry point</mat-label>
|
||||
<label for="classification-application-entry-point"></label>
|
||||
<input matInput type="text" maxlength="255"
|
||||
id="classification-application-entry-point"
|
||||
placeholder="Application entry point"
|
||||
[(ngModel)]="classification.applicationEntryPoint"
|
||||
name="classification.applicationEntryPoint" #appEntryPoint="ngModel"
|
||||
(input)="validateInputOverflow(appEntryPoint, 255)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(appEntryPoint.name)" class="error">{{lengthError}}</div>
|
||||
|
||||
<!-- CATEGORY -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Category</mat-label>
|
||||
<mat-select required [(value)]="this.classification.category">
|
||||
<mat-select-trigger>
|
||||
<svg-icon
|
||||
class="detailed-fields__category-icon" [src]="(getCategoryIcon(this.classification.category) | async)?.name">
|
||||
</svg-icon>
|
||||
{{this.classification.category}}
|
||||
</mat-select-trigger>
|
||||
<mat-option *ngFor="let category of categories$ | async" value="{{category}}">
|
||||
<svg-icon class="detailed-fields__category-icon" [src]="(getCategoryIcon(category) | async)?.name"></svg-icon>
|
||||
{{category}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- DOMAIN AND CATEGORY -->
|
||||
<div class="classification-details__domain-and-category">
|
||||
|
||||
<mat-form-field class="classification-details__mat-form-field" appearance="outline">
|
||||
<mat-label>Domain</mat-label>
|
||||
<label for="classification-domain"></label>
|
||||
<input matInput type="text" disabled id="classification-domain"
|
||||
placeholder="Domain" [(ngModel)]="classification.domain"
|
||||
name="classification.domain">
|
||||
</mat-form-field>
|
||||
|
||||
<div class="domain-and-category__domain-checkbox">
|
||||
Valid in Domain
|
||||
<a *ngIf="!masterDomainSelected()" (click)="validChanged()" title="Valid in Domain">
|
||||
<mat-icon class="domain-and-category__domain-checkbox-icon">{{classification.isValidInDomain ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Category</mat-label>
|
||||
<mat-select required [(value)]="this.classification.category">
|
||||
<mat-select-trigger>
|
||||
<svg-icon
|
||||
class="domain-and-category__category-icon" [src]="(getCategoryIcon(this.classification.category) | async)?.name">
|
||||
</svg-icon>
|
||||
{{this.classification.category}}
|
||||
</mat-select-trigger>
|
||||
<mat-option *ngFor="let category of categories$ | async" value="{{category}}">
|
||||
<svg-icon class="domain-and-category__category-icon" [src]="(getCategoryIcon(category) | async)?.name"></svg-icon>
|
||||
{{category}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- APPLICATION ENTRY POINT -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Application entry point</mat-label>
|
||||
<label for="classification-application-entry-point"></label>
|
||||
<input matInput type="text" maxlength="255"
|
||||
id="classification-application-entry-point"
|
||||
placeholder="Application entry point"
|
||||
[(ngModel)]="classification.applicationEntryPoint"
|
||||
name="classification.applicationEntryPoint" #appEntryPoint="ngModel"
|
||||
(input)="validateInputOverflow(appEntryPoint, 255)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(appEntryPoint.name)" class="error">{{lengthError}}</div>
|
||||
|
||||
<!-- DESCRIPTION -->
|
||||
<mat-form-field appearance="outline">
|
||||
<mat-label>Description</mat-label>
|
||||
<label for="classification-description"></label>
|
||||
<textarea matInput
|
||||
cdkTextareaAutosize
|
||||
cdkAutosizeMinRows="1"
|
||||
cdkAutosizeMaxRows="5"
|
||||
maxlength="255"
|
||||
id="classification-description" placeholder="Description"
|
||||
[(ngModel)]="classification.description"
|
||||
name="classification.description" #description="ngModel"
|
||||
(input)="validateInputOverflow(description, 255)"></textarea>
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(description.name)" class="error">{{lengthError}}</div>
|
||||
|
||||
|
||||
|
||||
<!-- CUSTOM FIELDS -->
|
||||
<h6 class="classification-details__subheading" style="padding-top: 50px"> Custom Fields </h6>
|
||||
<mat-divider class="classification-details__horizontal-line"> </mat-divider>
|
||||
<h6 class="detailed-fields__subheading" style="padding-top: 50px"> Custom Fields </h6>
|
||||
<mat-divider class="detailed-fields__horizontal-line"> </mat-divider>
|
||||
|
||||
|
||||
<div *ngFor="let customField of (customFields$ | async), let i = index" >
|
||||
<div *ngIf="customField.visible">
|
||||
<mat-form-field appearance="outline" style="width: 100%">
|
||||
<mat-label>{{customField.field}}</mat-label>
|
||||
<label for="classification-custom-{{i + 1}}"></label>
|
||||
<input matInput type="text" maxlength="255"
|
||||
id="classification-custom-{{i + 1}}" placeholder="{{customField.field}}"
|
||||
[(ngModel)]="classification[getClassificationCustom(i + 1)]"
|
||||
name="classification.custom{{i + 1}}" #custom="ngModel"
|
||||
(input)="validateInputOverflow(custom, 255)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(custom.name)" class="error">{{lengthError}}</div>
|
||||
<div class="detailed-fields__custom-fields">
|
||||
<div *ngFor="let customField of (customFields$ | async), let i = index" class="detailed-fields__input-custom-field">
|
||||
<mat-form-field appearance="outline" style="width: 100%">
|
||||
<mat-label>{{customField.field}}</mat-label>
|
||||
<label for="classification-custom-{{i + 1}}"></label>
|
||||
<input matInput type="text" maxlength="255"
|
||||
id="classification-custom-{{i + 1}}" placeholder="{{customField.field}}"
|
||||
[(ngModel)]="classification[getClassificationCustom(i + 1)]"
|
||||
name="classification.custom{{i + 1}}" #custom="ngModel"
|
||||
(input)="validateInputOverflow(custom, 255)">
|
||||
</mat-form-field>
|
||||
<div *ngIf="inputOverflowMap.get(custom.name)" class="error">{{lengthError}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</ng-form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -5,16 +5,11 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.classification-details__wrapper {
|
||||
.classification-details-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* ACTION TOOLBAR */
|
||||
.classification-details__headline {
|
||||
font-size: 1.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.classification-details__action-toolbar {
|
||||
.action-toolbar {
|
||||
padding: 8px 30px 12px 24px;
|
||||
height: 68px;
|
||||
background-color: #fff;
|
||||
|
|
@ -23,93 +18,121 @@
|
|||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
z-index: 10;
|
||||
|
||||
&__headline {
|
||||
font-size: 1.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
&__badge-message {
|
||||
font-size: 13px;
|
||||
background-color: $transparent-grey;
|
||||
}
|
||||
|
||||
&__button {
|
||||
margin-top: 0.25rem;
|
||||
margin-right: 6px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
border-color: $transparent-grey;
|
||||
border-bottom-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
&__save-button {
|
||||
background-color: $aquamarine;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&__aquamarine-button {
|
||||
color: $aquamarine;
|
||||
}
|
||||
|
||||
&__red-button {
|
||||
color: $invalid;
|
||||
}
|
||||
}
|
||||
|
||||
.action-toolbar__button {
|
||||
margin-top: 0.25rem;
|
||||
margin-right: 6px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.action-toolbar__dropdown {
|
||||
border-color: $transparent-grey;
|
||||
border-bottom-style: solid;
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.action-toolbar__save-button {
|
||||
background-color: $aquamarine;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.button__green-blue {
|
||||
color: $aquamarine;
|
||||
}
|
||||
|
||||
.button__red {
|
||||
color: $invalid;
|
||||
}
|
||||
|
||||
/* DETAILED FIELDS */
|
||||
|
||||
.classification__detailed-fields {
|
||||
.detailed-fields {
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.classification-details__subheading {
|
||||
font-weight: bold;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
&__subheading {
|
||||
font-weight: bold;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.classification-details__horizontal-line {
|
||||
margin: 5px 5px 25px 5px;
|
||||
border-top-color: #555;
|
||||
border-top-width: 1.35px;
|
||||
}
|
||||
&__horizontal-line {
|
||||
margin: 5px 5px 25px 5px;
|
||||
border-top-color: #555;
|
||||
border-top-width: 1.35px;
|
||||
}
|
||||
|
||||
.classification-details__domain-and-category {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
&__general {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.domain-and-category__domain-checkbox {
|
||||
position: absolute;
|
||||
top: 64px;
|
||||
left: 12px;
|
||||
font-size: 14px;
|
||||
color: #555;
|
||||
}
|
||||
.domain-and-category__domain-checkbox-icon {
|
||||
cursor: pointer;
|
||||
margin-top: 2px;
|
||||
font-size: 20px;
|
||||
}
|
||||
.domain-and-category__category-icon {
|
||||
fill: #555;
|
||||
margin-right: 5px;
|
||||
top: -2px;
|
||||
}
|
||||
&__general-right-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
.classification-details__service-and-priority {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.classification-details__service {
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.classification-details__priority {
|
||||
flex-grow: 1;
|
||||
}
|
||||
&__spacer {
|
||||
display: block;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.classification-details__mat-form-field {
|
||||
width: 100%;
|
||||
margin-right: 10px;
|
||||
&__general-left-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
&__domain-checkbox {
|
||||
position: absolute;
|
||||
top: 172px;
|
||||
right: 12px;
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
&__domain-checkbox-icon {
|
||||
cursor: pointer;
|
||||
margin-top: 2px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
&__service-and-priority {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&__category-icon {
|
||||
fill: #555;
|
||||
margin-right: 5px;
|
||||
top: -2px;
|
||||
}
|
||||
|
||||
&__custom-fields {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__input-custom-field {
|
||||
flex: 0 49%;
|
||||
}
|
||||
}
|
||||
|
||||
input:invalid.dirty {
|
||||
|
|
|
|||
|
|
@ -248,21 +248,21 @@ describe('ClassificationDetailsComponent', () => {
|
|||
component.requestInProgress = true;
|
||||
component.classification = {};
|
||||
fixture.detectChanges();
|
||||
expect(debugElement.nativeElement.querySelector('.classification-details__action-toolbar')).toBeFalsy();
|
||||
expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeFalsy();
|
||||
expect(debugElement.nativeElement.querySelector('.action-toolbar')).toBeFalsy();
|
||||
expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should not show details when classification does not exist', () => {
|
||||
component.requestInProgress = false;
|
||||
component.classification = null;
|
||||
fixture.detectChanges();
|
||||
expect(debugElement.nativeElement.querySelector('.classification-details__action-toolbar')).toBeFalsy();
|
||||
expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeFalsy();
|
||||
expect(debugElement.nativeElement.querySelector('.action-toolbar')).toBeFalsy();
|
||||
expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeFalsy();
|
||||
});
|
||||
|
||||
it('should show details when classification exists and spinner is not running', () => {
|
||||
expect(debugElement.nativeElement.querySelector('.classification-details__action-toolbar')).toBeTruthy();
|
||||
expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeTruthy();
|
||||
expect(debugElement.nativeElement.querySelector('.action-toolbar')).toBeTruthy();
|
||||
expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeTruthy();
|
||||
});
|
||||
|
||||
/* HTML: TITLE + ACTION BUTTONS */
|
||||
|
|
@ -270,7 +270,7 @@ describe('ClassificationDetailsComponent', () => {
|
|||
component.classification = { name: 'Recommendation', type: 'DOCUMENT' };
|
||||
component.isCreatingNewClassification = true;
|
||||
fixture.detectChanges();
|
||||
const headline = debugElement.nativeElement.querySelector('.classification-details__headline');
|
||||
const headline = debugElement.nativeElement.querySelector('.action-toolbar__headline');
|
||||
expect(headline).toBeTruthy();
|
||||
expect(headline.textContent).toContain('Recommendation');
|
||||
expect(headline.textContent).toContain('DOCUMENT');
|
||||
|
|
@ -290,8 +290,7 @@ describe('ClassificationDetailsComponent', () => {
|
|||
});
|
||||
|
||||
it('should restore selected classification when button is clicked', async () => {
|
||||
const button = debugElement.nativeElement.querySelector('.classification-details__action-toolbar').children[1]
|
||||
.children[1];
|
||||
const button = debugElement.nativeElement.querySelector('.action-toolbar').children[1].children[1];
|
||||
expect(button).toBeTruthy();
|
||||
expect(button.textContent).toContain('Undo Changes');
|
||||
expect(button.textContent).toContain('restore');
|
||||
|
|
@ -391,7 +390,7 @@ describe('ClassificationDetailsComponent', () => {
|
|||
});
|
||||
|
||||
it('should change isValidInDomain when button is clicked', () => {
|
||||
const button = debugElement.nativeElement.querySelector('.domain-and-category__domain-checkbox-icon').parentNode;
|
||||
const button = debugElement.nativeElement.querySelector('.detailed-fields__domain-checkbox-icon').parentNode;
|
||||
expect(button).toBeTruthy();
|
||||
component.classification.isValidInDomain = false;
|
||||
button.click();
|
||||
|
|
|
|||
|
|
@ -69,7 +69,8 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
|
|||
ngOnInit() {
|
||||
this.customFields$ = this.store.select(EngineConfigurationSelectors.classificationsCustomisation).pipe(
|
||||
map((customisation) => customisation.information),
|
||||
getCustomFields(customFieldCount)
|
||||
getCustomFields(customFieldCount),
|
||||
map((customisationFields) => customisationFields.filter((customisation) => customisation.visible))
|
||||
);
|
||||
|
||||
this.selectedClassification$.pipe(takeUntil(this.destroy$)).subscribe((classification) => {
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
<!-- FILTER -->
|
||||
<div class="classification-list__filter" *ngIf="showFilter">
|
||||
<div class="classification-list__category-filter">
|
||||
<button mat-icon-button class="mr-2 category-filter__filter-button" [matMenuTriggerFor]="menu"
|
||||
matTooltip="Filter Category">
|
||||
<button mat-icon-button [matMenuTriggerFor]="menu"
|
||||
matTooltip="Filter Category" class="category-filter__filter-button">
|
||||
<mat-icon *ngIf="selectedCategory == ''">filter_list</mat-icon>
|
||||
<svg-icon class="category-filter__icons" [src]="(getCategoryIcon(selectedCategory) | async)?.name"
|
||||
[title]="(getCategoryIcon(selectedCategory) | async)?.text"
|
||||
|
|
@ -34,12 +34,12 @@
|
|||
|
||||
<mat-menu #menu="matMenu">
|
||||
<button mat-menu-item (click)="selectCategory('')" class="category-filter__all-button">
|
||||
<svg-icon class="category-filter__categories pr-2" src="./assets/icons/asterisk.svg"
|
||||
<svg-icon class="category-filter__categories" src="./assets/icons/asterisk.svg"
|
||||
[title]="(getCategoryIcon('all') | async)?.text"></svg-icon>
|
||||
<span>All</span>
|
||||
</button>
|
||||
<button mat-menu-item *ngFor="let category of categories$ | async" (click)="selectCategory(category)">
|
||||
<svg-icon class="category-filter__categories pr-2" [src]="(getCategoryIcon(category) | async)?.name"
|
||||
<svg-icon class="category-filter__categories" [src]="(getCategoryIcon(category) | async)?.name"
|
||||
[title]="(getCategoryIcon(category) | async)?.text"></svg-icon>
|
||||
<span> {{category}} </span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
.category-filter__icons {
|
||||
height: 33px;
|
||||
width: 16px;
|
||||
fill: #555;
|
||||
}
|
||||
.category-filter__categories {
|
||||
fill: #555;
|
||||
|
|
@ -39,10 +40,6 @@
|
|||
top: -2px;
|
||||
}
|
||||
|
||||
.category-filter__filter-button {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.filter__input {
|
||||
width: 100%;
|
||||
margin-right: 12px;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
align-items: stretch;
|
||||
}
|
||||
taskana-administration-classification-list {
|
||||
width: 500px;
|
||||
min-width: 500px;
|
||||
}
|
||||
taskana-administration-classification-details {
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue