nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-1474: Update classification details layout (#1358) 

Co-authored-by: Chi Nguyen <c.nguyen.prog@gmail.com>
This commit is contained in:
Sofie Hofmann 2020-12-08 17:37:20 +01:00 committed by GitHub
parent ecfe7c3046
commit fc6f420b96
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 283 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

308
web/src/app/administration/components/classification-details/classification-details.component.html
View File

@ -1,11 +1,11 @@
<div class="classification-details"> <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 --> <!-- TITLE + ACTION BUTTONS -->
<mat-toolbar class="classification-details__action-toolbar"> <mat-toolbar class="action-toolbar">
<h4 class="classification-details__headline">{{classification.name}}&nbsp; [{{classification.type}}] <h4 class="action-toolbar__headline">{{classification.name}}&nbsp; [{{classification.type}}]
<span *ngIf="isCreatingNewClassification" class="badge warning"> {{badgeMessage$ | async}}</span> <span *ngIf="isCreatingNewClassification" class="action-toolbar__badge-message"> {{badgeMessage$ | async}}</span>
</h4> </h4>
<div> <div>
@ -16,7 +16,7 @@
<button mat-stroked-button class="action-toolbar__button" matTooltip="Revert changes to previous saved state" (click)="onRestore()"> <button mat-stroked-button class="action-toolbar__button" matTooltip="Revert changes to previous saved state" (click)="onRestore()">
Undo Changes 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>
<button mat-stroked-button [matMenuTriggerFor]="buttonMenu" matTooltip="More actions" class="action-toolbar__button" id="action-toolbar__more-buttons"> <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"> <mat-menu #buttonMenu="matMenu">
<button mat-menu-item class="action-toolbar__dropdown" matTooltip="Copy current values to create new classification" (click)="onCopy()"> <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> <span>Copy</span>
</button> </button>
<button mat-menu-item class="action-toolbar__dropdown" matTooltip="Delete this classification" (click)="onRemoveClassification()"> <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> <span>Delete</span>
</button> </button>
<button mat-menu-item class="action-toolbar__dropdown" style="border-bottom-style: none;" matTooltip="Close this classification and discard all changes" (click)="onCloseClassification()"> <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> </button>
</mat-menu> </mat-menu>
</div> </div>
</mat-toolbar> </mat-toolbar>
<!-- DETAILED FIELDS --> <!-- DETAILED FIELDS -->
<div class="panel-body" style="padding: 0"> <div style="padding: 0">
<ng-form #ClassificationForm="ngForm"> <ng-form #ClassificationForm="ngForm">
<div class="classification__detailed-fields"> <div class="detailed-fields">
<h6 class="classification-details__subheading" style="margin-top: 65px;"> General </h6> <h6 class="detailed-fields__subheading" style="margin-top: 65px;"> General </h6>
<mat-divider class="classification-details__horizontal-line"> </mat-divider> <mat-divider class="detailed-fields__horizontal-line"> </mat-divider>
<!-- KEY --> <!-- GENERAL -->
<mat-form-field appearance="outline"> <div class="detailed-fields__general">
<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 --> <!-- GENERAL LEFT COLUMN -->
<mat-form-field appearance="outline"> <div class="detailed-fields__general-left-column">
<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> -->
<!-- KEY -->
<!-- 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> -->
<mat-form-field appearance="outline"> <mat-form-field appearance="outline">
<mat-label>Priority</mat-label> <mat-label>Key</mat-label>
<label for="classification-priority"></label> <label for="classification-key"></label>
<input matInput type="number" [(ngModel)]="classification.priority" <input matInput required type="text" #key="ngModel" maxlength="32" [disabled]="!isCreatingNewClassification"
name="classification.priority" id="classification-priority" required min="0"> 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> </mat-form-field>
<taskana-shared-field-error-display <div *ngIf="!masterDomainSelected()" class="detailed-fields__domain-checkbox">
[displayError]="!isFieldValid('classification.priority')" Valid in Domain
[validationTrigger]="this.toggleValidationMap.get('classification.priority.name')" <a (click)="validChanged()" title="Valid in Domain">
errorMessage="* Priority is required"> <mat-icon class="detailed-fields__domain-checkbox-icon">{{classification.isValidInDomain ? 'check_box' : 'check_box_outline_blank'}}</mat-icon>
</taskana-shared-field-error-display> </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>
</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 --> <!-- CUSTOM FIELDS -->
<h6 class="classification-details__subheading" style="padding-top: 50px"> Custom Fields </h6> <h6 class="detailed-fields__subheading" style="padding-top: 50px"> Custom Fields </h6>
<mat-divider class="classification-details__horizontal-line"> </mat-divider> <mat-divider class="detailed-fields__horizontal-line"> </mat-divider>
<div class="detailed-fields__custom-fields">
<div *ngFor="let customField of (customFields$ | async), let i = index" > <div *ngFor="let customField of (customFields$ | async), let i = index" class="detailed-fields__input-custom-field">
<div *ngIf="customField.visible"> <mat-form-field appearance="outline" style="width: 100%">
<mat-form-field appearance="outline" style="width: 100%"> <mat-label>{{customField.field}}</mat-label>
<mat-label>{{customField.field}}</mat-label> <label for="classification-custom-{{i + 1}}"></label>
<label for="classification-custom-{{i + 1}}"></label> <input matInput type="text" maxlength="255"
<input matInput type="text" maxlength="255" id="classification-custom-{{i + 1}}" placeholder="{{customField.field}}"
id="classification-custom-{{i + 1}}" placeholder="{{customField.field}}" [(ngModel)]="classification[getClassificationCustom(i + 1)]"
[(ngModel)]="classification[getClassificationCustom(i + 1)]" name="classification.custom{{i + 1}}" #custom="ngModel"
name="classification.custom{{i + 1}}" #custom="ngModel" (input)="validateInputOverflow(custom, 255)">
(input)="validateInputOverflow(custom, 255)"> </mat-form-field>
</mat-form-field> <div *ngIf="inputOverflowMap.get(custom.name)" class="error">{{lengthError}}</div>
<div *ngIf="inputOverflowMap.get(custom.name)" class="error">{{lengthError}}</div>
</div> </div>
</div> </div>
</div> </div>
</ng-form> </ng-form>
</div> </div>

189
web/src/app/administration/components/classification-details/classification-details.component.scss
View File

@ -5,16 +5,11 @@
overflow-y: auto; overflow-y: auto;
} }
.classification-details__wrapper { .classification-details-wrapper {
position: relative; position: relative;
} }
/* ACTION TOOLBAR */ .action-toolbar {
.classification-details__headline {
font-size: 1.5rem;
padding: 0.5rem;
}
.classification-details__action-toolbar {
padding: 8px 30px 12px 24px; padding: 8px 30px 12px 24px;
height: 68px; height: 68px;
background-color: #fff; background-color: #fff;
@ -23,93 +18,121 @@
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
z-index: 10; 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 { .detailed-fields {
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 {
padding: 15px; padding: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
}
.classification-details__subheading { &__subheading {
font-weight: bold; font-weight: bold;
padding-left: 15px; padding-left: 15px;
margin-bottom: 0; margin-bottom: 0;
} }
.classification-details__horizontal-line { &__horizontal-line {
margin: 5px 5px 25px 5px; margin: 5px 5px 25px 5px;
border-top-color: #555; border-top-color: #555;
border-top-width: 1.35px; border-top-width: 1.35px;
} }
.classification-details__domain-and-category { &__general {
position: relative; display: flex;
display: flex; flex-direction: row;
justify-content: space-between; flex-wrap: nowrap;
padding-bottom: 16px; justify-content: space-between;
} }
.domain-and-category__domain-checkbox { &__general-right-column {
position: absolute; display: flex;
top: 64px; flex-direction: column;
left: 12px; width: 30%;
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;
}
.classification-details__service-and-priority { &__spacer {
display: flex; display: block;
width: 100%; width: 20px;
} }
.classification-details__service {
width: 100%;
margin-right: 10px;
}
.classification-details__priority {
flex-grow: 1;
}
.classification-details__mat-form-field { &__general-left-column {
width: 100%; display: flex;
margin-right: 10px; 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 { input:invalid.dirty {

19
web/src/app/administration/components/classification-details/classification-details.component.spec.ts
View File

@ -248,21 +248,21 @@ describe('ClassificationDetailsComponent', () => {
component.requestInProgress = true; component.requestInProgress = true;
component.classification = {}; component.classification = {};
fixture.detectChanges(); fixture.detectChanges();
expect(debugElement.nativeElement.querySelector('.classification-details__action-toolbar')).toBeFalsy(); expect(debugElement.nativeElement.querySelector('.action-toolbar')).toBeFalsy();
expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeFalsy(); expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeFalsy();
}); });
it('should not show details when classification does not exist', () => { it('should not show details when classification does not exist', () => {
component.requestInProgress = false; component.requestInProgress = false;
component.classification = null; component.classification = null;
fixture.detectChanges(); fixture.detectChanges();
expect(debugElement.nativeElement.querySelector('.classification-details__action-toolbar')).toBeFalsy(); expect(debugElement.nativeElement.querySelector('.action-toolbar')).toBeFalsy();
expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeFalsy(); expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeFalsy();
}); });
it('should show details when classification exists and spinner is not running', () => { 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('.action-toolbar')).toBeTruthy();
expect(debugElement.nativeElement.querySelector('.classification__detailed-fields')).toBeTruthy(); expect(debugElement.nativeElement.querySelector('.detailed-fields')).toBeTruthy();
}); });
/* HTML: TITLE + ACTION BUTTONS */ /* HTML: TITLE + ACTION BUTTONS */
@ -270,7 +270,7 @@ describe('ClassificationDetailsComponent', () => {
component.classification = { name: 'Recommendation', type: 'DOCUMENT' }; component.classification = { name: 'Recommendation', type: 'DOCUMENT' };
component.isCreatingNewClassification = true; component.isCreatingNewClassification = true;
fixture.detectChanges(); fixture.detectChanges();
const headline = debugElement.nativeElement.querySelector('.classification-details__headline'); const headline = debugElement.nativeElement.querySelector('.action-toolbar__headline');
expect(headline).toBeTruthy(); expect(headline).toBeTruthy();
expect(headline.textContent).toContain('Recommendation'); expect(headline.textContent).toContain('Recommendation');
expect(headline.textContent).toContain('DOCUMENT'); expect(headline.textContent).toContain('DOCUMENT');
@ -290,8 +290,7 @@ describe('ClassificationDetailsComponent', () => {
}); });
it('should restore selected classification when button is clicked', async () => { it('should restore selected classification when button is clicked', async () => {
const button = debugElement.nativeElement.querySelector('.classification-details__action-toolbar').children[1] const button = debugElement.nativeElement.querySelector('.action-toolbar').children[1].children[1];
.children[1];
expect(button).toBeTruthy(); expect(button).toBeTruthy();
expect(button.textContent).toContain('Undo Changes'); expect(button.textContent).toContain('Undo Changes');
expect(button.textContent).toContain('restore'); expect(button.textContent).toContain('restore');
@ -391,7 +390,7 @@ describe('ClassificationDetailsComponent', () => {
}); });
it('should change isValidInDomain when button is clicked', () => { 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(); expect(button).toBeTruthy();
component.classification.isValidInDomain = false; component.classification.isValidInDomain = false;
button.click(); button.click();

3
web/src/app/administration/components/classification-details/classification-details.component.ts
View File

@ -69,7 +69,8 @@ export class ClassificationDetailsComponent implements OnInit, OnDestroy {
ngOnInit() { ngOnInit() {
this.customFields$ = this.store.select(EngineConfigurationSelectors.classificationsCustomisation).pipe( this.customFields$ = this.store.select(EngineConfigurationSelectors.classificationsCustomisation).pipe(
map((customisation) => customisation.information), map((customisation) => customisation.information),
getCustomFields(customFieldCount) getCustomFields(customFieldCount),
map((customisationFields) => customisationFields.filter((customisation) => customisation.visible))
); );
this.selectedClassification$.pipe(takeUntil(this.destroy$)).subscribe((classification) => { this.selectedClassification$.pipe(takeUntil(this.destroy$)).subscribe((classification) => {

8
web/src/app/administration/components/classification-list/classification-list.component.html
View File

@ -23,8 +23,8 @@
<!-- FILTER --> <!-- FILTER -->
<div class="classification-list__filter" *ngIf="showFilter"> <div class="classification-list__filter" *ngIf="showFilter">
<div class="classification-list__category-filter"> <div class="classification-list__category-filter">
<button mat-icon-button class="mr-2 category-filter__filter-button" [matMenuTriggerFor]="menu" <button mat-icon-button [matMenuTriggerFor]="menu"
matTooltip="Filter Category"> matTooltip="Filter Category" class="category-filter__filter-button">
<mat-icon *ngIf="selectedCategory == ''">filter_list</mat-icon> <mat-icon *ngIf="selectedCategory == ''">filter_list</mat-icon>
<svg-icon class="category-filter__icons" [src]="(getCategoryIcon(selectedCategory) | async)?.name" <svg-icon class="category-filter__icons" [src]="(getCategoryIcon(selectedCategory) | async)?.name"
[title]="(getCategoryIcon(selectedCategory) | async)?.text" [title]="(getCategoryIcon(selectedCategory) | async)?.text"
@ -34,12 +34,12 @@
<mat-menu #menu="matMenu"> <mat-menu #menu="matMenu">
<button mat-menu-item (click)="selectCategory('')" class="category-filter__all-button"> <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> [title]="(getCategoryIcon('all') | async)?.text"></svg-icon>
<span>All</span> <span>All</span>
</button> </button>
<button mat-menu-item *ngFor="let category of categories$ | async" (click)="selectCategory(category)"> <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> [title]="(getCategoryIcon(category) | async)?.text"></svg-icon>
<span> {{category}} </span> <span> {{category}} </span>
</button> </button>

5
web/src/app/administration/components/classification-list/classification-list.component.scss
View File

@ -32,6 +32,7 @@
.category-filter__icons { .category-filter__icons {
height: 33px; height: 33px;
width: 16px; width: 16px;
fill: #555;
} }
.category-filter__categories { .category-filter__categories {
fill: #555; fill: #555;
@ -39,10 +40,6 @@
top: -2px; top: -2px;
} }
.category-filter__filter-button {
color: #555;
}
.filter__input { .filter__input {
width: 100%; width: 100%;
margin-right: 12px; margin-right: 12px;

2
web/src/app/administration/components/classification-overview/classification-overview.component.scss
View File

@ -6,7 +6,7 @@
align-items: stretch; align-items: stretch;
} }
taskana-administration-classification-list { taskana-administration-classification-list {
width: 500px; min-width: 500px;
} }
taskana-administration-classification-details { taskana-administration-classification-details {
flex-grow: 1; flex-grow: 1;