Skip to content

Commit 1ca217e

Browse files
Atmire-KristofAtmire-Kristof
committed
97075: Feedback 2022-12-09 - splitting into multiple components
1 parent 3c9623a commit 1ca217e

14 files changed

Lines changed: 303 additions & 145 deletions

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="flex-grow-1 ds-drop-list">
2+
<ds-dso-edit-metadata-value *ngFor="let mdValue of form.fields[mdField]; let idx = index"
3+
[mdValue]="mdValue"
4+
[dsoType]="dsoType"
5+
[saving$]="saving$"
6+
[isOnlyValue]="form.fields[mdField].length === 1"
7+
(edit)="mdValue.editing = true"
8+
(confirm)="mdValue.confirmChanges($event); form.resetReinstatable(); valueSaved.emit()"
9+
(remove)="mdValue.change = DsoEditMetadataChangeTypeEnum.REMOVE; form.resetReinstatable(); valueSaved.emit()"
10+
(undo)="mdValue.change === DsoEditMetadataChangeTypeEnum.ADD ? form.remove(mdField, idx) : mdValue.discard(); valueSaved.emit()">
11+
</ds-dso-edit-metadata-value>
12+
</div>

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.ds-drop-list {
2+
background-color: var(--bs-gray-500);
3+
}

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-field-values/dso-edit-metadata-field-values.component.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Component, EventEmitter, Input, Output } from '@angular/core';
2+
import { DsoEditMetadataChangeType, DsoEditMetadataForm } from '../dso-edit-metadata-form';
3+
import { Observable } from 'rxjs/internal/Observable';
4+
5+
@Component({
6+
selector: 'ds-dso-edit-metadata-field-values',
7+
styleUrls: ['./dso-edit-metadata-field-values.component.scss'],
8+
templateUrl: './dso-edit-metadata-field-values.component.html',
9+
})
10+
/**
11+
* Component displaying table rows for each value for a certain metadata field within a form
12+
*/
13+
export class DsoEditMetadataFieldValuesComponent {
14+
/**
15+
* A dynamic form object containing all information about the metadata and the changes made to them, see {@link DsoEditMetadataForm}
16+
*/
17+
@Input() form: DsoEditMetadataForm;
18+
19+
/**
20+
* Metadata field to display values for
21+
*/
22+
@Input() mdField: string;
23+
24+
/**
25+
* Type of DSO we're displaying values for
26+
* Determines i18n messages
27+
*/
28+
@Input() dsoType: string;
29+
30+
/**
31+
* Observable to check if the form is being saved or not
32+
*/
33+
@Input() saving$: Observable<boolean>;
34+
35+
/**
36+
* Emit when the value has been saved within the form
37+
*/
38+
@Output() valueSaved: EventEmitter<any> = new EventEmitter<any>();
39+
40+
/**
41+
* The DsoEditMetadataChangeType enumeration for access in the component's template
42+
* @type {DsoEditMetadataChangeType}
43+
*/
44+
public DsoEditMetadataChangeTypeEnum = DsoEditMetadataChangeType;
45+
}

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<div class="d-flex flex-row ds-field-row ds-header-row">
2+
<div class="lbl-cell">{{ dsoType + '.edit.metadata.headers.field' | translate }}</div>
3+
<div class="flex-grow-1">
4+
<div class="d-flex flex-row">
5+
<div class="flex-grow-1 ds-flex-cell ds-value-cell"><b class="dont-break-out preserve-line-breaks">{{ dsoType + '.edit.metadata.headers.value' | translate }}</b></div>
6+
<div class="ds-flex-cell ds-lang-cell"><b>{{ dsoType + '.edit.metadata.headers.language' | translate }}</b></div>
7+
<div class="text-center ds-flex-cell ds-edit-cell"><b>{{ dsoType + '.edit.metadata.headers.edit' | translate }}</b></div>
8+
</div>
9+
</div>
10+
</div>

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component.scss‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.lbl-cell {
2+
min-width: var(--ds-dso-edit-field-width);
3+
max-width: var(--ds-dso-edit-field-width);
4+
background-color: var(--bs-gray-100);
5+
font-weight: bold;
6+
padding: 1rem;
7+
border: 1px solid var(--bs-gray-200);
8+
}
9+
10+
.ds-header-row {
11+
background-color: var(--bs-gray-100);
12+
}

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-headers/dso-edit-metadata-headers.component.ts‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { Component, Input } from '@angular/core';
2+
3+
@Component({
4+
selector: 'ds-dso-edit-metadata-headers',
5+
styleUrls: ['./dso-edit-metadata-headers.component.scss', '../dso-edit-metadata-shared/dso-edit-metadata-cells.scss'],
6+
templateUrl: './dso-edit-metadata-headers.component.html',
7+
})
8+
/**
9+
* Component displaying the header table row for DSO edit metadata page
10+
*/
11+
export class DsoEditMetadataHeadersComponent {
12+
/**
13+
* Type of DSO we're displaying values for
14+
* Determines i18n messages
15+
*/
16+
@Input() dsoType: string;
17+
}

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-shared/dso-edit-metadata-cells.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.ds-field-row {
2+
border: 1px solid var(--bs-gray-400);
3+
}
4+
5+
.ds-flex-cell {
6+
padding: 1rem;
7+
border: 1px solid var(--bs-gray-200);
8+
}
9+
10+
.ds-lang-cell {
11+
min-width: var(--ds-dso-edit-lang-width);
12+
max-width: var(--ds-dso-edit-lang-width);
13+
}
14+
15+
.ds-edit-cell {
16+
min-width: var(--ds-dso-edit-actions-width);
17+
}
18+
19+
.ds-value-row {
20+
background-color: white;
21+
22+
&:active {
23+
cursor: grabbing;
24+
}
25+
26+
&.ds-warning {
27+
background-color: var(--bs-warning-bg);
28+
29+
.ds-flex-cell {
30+
border: 1px solid var(--bs-warning);
31+
}
32+
}
33+
34+
&.ds-danger {
35+
background-color: var(--bs-danger-bg);
36+
37+
.ds-flex-cell {
38+
border: 1px solid var(--bs-danger);
39+
}
40+
}
41+
42+
&.ds-success {
43+
background-color: var(--bs-success-bg);
44+
45+
.ds-flex-cell {
46+
border: 1px solid var(--bs-success);
47+
}
48+
}
49+
}

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<div class="d-flex flex-row ds-value-row"
2+
[ngClass]="{ 'ds-warning': mdValue.change === DsoEditMetadataChangeTypeEnum.UPDATE, 'ds-danger': mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE, 'ds-success': mdValue.change === DsoEditMetadataChangeTypeEnum.ADD, 'h-100': isOnlyValue }">
3+
<div class="flex-grow-1 ds-flex-cell ds-value-cell d-flex align-items-center">
4+
<div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.value }}</div>
5+
<textarea class="form-control" rows="2" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.value"
6+
[dsDebounce]="300" (onDebounce)="confirm.emit(false)"></textarea>
7+
</div>
8+
<div class="ds-flex-cell ds-lang-cell">
9+
<div class="dont-break-out preserve-line-breaks" *ngIf="!mdValue.editing">{{ mdValue.newValue.language }}</div>
10+
<input class="form-control" type="text" *ngIf="mdValue.editing" [(ngModel)]="mdValue.newValue.language" />
11+
</div>
12+
<div class="text-center ds-flex-cell ds-edit-cell">
13+
<div class="btn-group edit-field">
14+
<button class="btn btn-outline-primary btn-sm ng-star-inserted" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.edit' | translate }}" *ngIf="!mdValue.editing"
15+
[disabled]="mdValue.change === DsoEditMetadataChangeTypeEnum.REMOVE || (saving$ | async)" (click)="edit.emit()">
16+
<i class="fas fa-edit fa-fw"></i>
17+
</button>
18+
<button class="btn btn-outline-success btn-sm ng-star-inserted" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.confirm' | translate }}" *ngIf="mdValue.editing"
19+
[disabled]="(saving$ | async)" (click)="confirm.emit(true)">
20+
<i class="fas fa-check fa-fw"></i>
21+
</button>
22+
<button class="btn btn-outline-danger btn-sm" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.remove' | translate }}"
23+
[disabled]="mdValue.change || mdValue.editing || (saving$ | async)" (click)="remove.emit()">
24+
<i class="fas fa-trash-alt fa-fw"></i>
25+
</button>
26+
<button class="btn btn-outline-warning btn-sm" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.undo' | translate }}"
27+
[disabled]="(!mdValue.change && !mdValue.editing) || (saving$ | async)" (click)="undo.emit()">
28+
<i class="fas fa-undo-alt fa-fw"></i>
29+
</button>
30+
<!-- TODO: Enable drag -->
31+
<button class="btn btn-outline-secondary ds-drag-handle btn-sm"
32+
[ngClass]="{'disabled': isOnlyValue || (saving$ | async)}" ngbTooltip="{{ dsoType + '.edit.metadata.edit.buttons.drag' | translate }}" [disabled]="isOnlyValue || (saving$ | async)">
33+
<i class="fas fa-grip-vertical fa-fw"></i>
34+
</button>
35+
</div>
36+
</div>
37+
</div>

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.scss‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.ds-success {
2+
background-color: var(--bs-success-bg);
3+
border: 1px solid var(--bs-success);
4+
}
5+
6+
.ds-drag-handle:not(.disabled) {
7+
cursor: grab;
8+
}

‎src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { Component, EventEmitter, Input, Output } from '@angular/core';
2+
import { DsoEditMetadataChangeType, DsoEditMetadataValue } from '../dso-edit-metadata-form';
3+
import { Observable } from 'rxjs/internal/Observable';
4+
5+
@Component({
6+
selector: 'ds-dso-edit-metadata-value',
7+
styleUrls: ['./dso-edit-metadata-value.component.scss', '../dso-edit-metadata-shared/dso-edit-metadata-cells.scss'],
8+
templateUrl: './dso-edit-metadata-value.component.html',
9+
})
10+
/**
11+
* Component displaying a single editable row for a metadata value
12+
*/
13+
export class DsoEditMetadataValueComponent {
14+
/**
15+
* Editable metadata value to show
16+
*/
17+
@Input() mdValue: DsoEditMetadataValue;
18+
19+
/**
20+
* Type of DSO we're displaying values for
21+
* Determines i18n messages
22+
*/
23+
@Input() dsoType: string;
24+
25+
/**
26+
* Observable to check if the form is being saved or not
27+
* Will disable certain functionality while saving
28+
*/
29+
@Input() saving$: Observable<boolean>;
30+
31+
/**
32+
* Is this value the only one within its list?
33+
* Will disable certain functionality like dragging (because dragging within a list of 1 is pointless)
34+
*/
35+
@Input() isOnlyValue = false;
36+
37+
/**
38+
* Emits when the user clicked edit
39+
*/
40+
@Output() edit: EventEmitter<any> = new EventEmitter<any>();
41+
42+
/**
43+
* Emits when the user clicked confirm
44+
*/
45+
@Output() confirm: EventEmitter<boolean> = new EventEmitter<boolean>();
46+
47+
/**
48+
* Emits when the user clicked remove
49+
*/
50+
@Output() remove: EventEmitter<any> = new EventEmitter<any>();
51+
52+
/**
53+
* Emits when the user clicked undo
54+
*/
55+
@Output() undo: EventEmitter<any> = new EventEmitter<any>();
56+
57+
/**
58+
* The DsoEditMetadataChangeType enumeration for access in the component's template
59+
* @type {DsoEditMetadataChangeType}
60+
*/
61+
public DsoEditMetadataChangeTypeEnum = DsoEditMetadataChangeType;
62+
}

0 commit comments

Comments
 (0)