From 95edb70dead1e0bee56efc0a1ba9896efeea0e8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Fri, 16 Jul 2021 15:30:08 +0300 Subject: [PATCH] Edit dossier attributes --- .../active-fields-listing.component.ts | 2 +- ...-attributes-csv-import-dialog.component.ts | 2 +- ...ier-attributes-listing-screen.component.ts | 4 +- ...sier-templates-listing-screen.component.ts | 6 +- ...ile-attributes-listing-screen.component.ts | 4 +- .../reports/reports-screen.component.ts | 4 +- .../screens/trash/trash-screen.component.ts | 4 +- .../user-listing-screen.component.ts | 4 +- .../dossier-details.component.ts | 2 +- .../edit-dossier-attributes.component.html | 88 ++++++++++++++++--- .../edit-dossier-attributes.component.scss | 48 ++++++++++ .../edit-dossier-attributes.component.ts | 76 +++++++++++++--- .../dossier-listing-screen.component.ts | 4 +- .../dossier-overview-screen.component.ts | 2 +- apps/red-ui/src/assets/i18n/en.json | 12 ++- apps/red-ui/src/assets/styles/red-input.scss | 1 + 16 files changed, 221 insertions(+), 42 deletions(-) diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts index f1c2d3e86..abd4dbd85 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.ts @@ -4,7 +4,7 @@ import { FileAttributeConfig } from '@redaction/red-ui-http'; import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; -import { SortingService } from '../../../../../services/sorting.service'; +import { SortingService } from '@services/sorting.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; @Component({ diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts index 3b5b95508..e1ea2765e 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts @@ -11,7 +11,7 @@ import { TranslateService } from '@ngx-translate/core'; import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; -import { SortingService } from '../../../../services/sorting.service'; +import { SortingService } from '@services/sorting.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; export interface Field { diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts index face1b669..09ae708c2 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.ts @@ -4,8 +4,8 @@ import { DossierAttributeConfig, DossierAttributesControllerService } from '@red import { AppStateService } from '@state/app-state.service'; import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { LoadingService } from '../../../../services/loading.service'; -import { ScreenNames, SortingService } from '../../../../services/sorting.service'; +import { LoadingService } from '@services/loading.service'; +import { ScreenNames, SortingService } from '@services/sorting.service'; import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; diff --git a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts index 02065db8b..b31a54a5a 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.ts @@ -3,13 +3,13 @@ import { AppStateService } from '@state/app-state.service'; import { PermissionsService } from '@services/permissions.service'; import { UserPreferenceService } from '@services/user-preference.service'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { DossierTemplateModelWrapper } from '../../../../models/file/dossier-template-model.wrapper'; -import { LoadingService } from '../../../../services/loading.service'; +import { DossierTemplateModelWrapper } from '@models/file/dossier-template-model.wrapper'; +import { LoadingService } from '@services/loading.service'; import { DossierTemplateControllerService } from '@redaction/red-ui-http'; import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; -import { ScreenNames, SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '@services/sorting.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; @Component({ diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts index 027580809..f66cf50a0 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.ts @@ -4,11 +4,11 @@ import { FileAttributeConfig, FileAttributesConfig, FileAttributesControllerServ import { AppStateService } from '@state/app-state.service'; import { ActivatedRoute } from '@angular/router'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { LoadingService } from '../../../../services/loading.service'; +import { LoadingService } from '@services/loading.service'; import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; -import { ScreenNames, SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '@services/sorting.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; @Component({ diff --git a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts index a8e07d414..eaa07017e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/reports/reports-screen.component.ts @@ -4,8 +4,8 @@ import { AppStateService } from '@state/app-state.service'; import { ReportTemplate, ReportTemplateControllerService } from '@redaction/red-ui-http'; import { download } from '../../../../utils/file-download-utils'; import { AdminDialogService } from '../../services/admin-dialog.service'; -import { LoadingService } from '../../../../services/loading.service'; -import { PermissionsService } from '../../../../services/permissions.service'; +import { LoadingService } from '@services/loading.service'; +import { PermissionsService } from '@services/permissions.service'; @Component({ selector: 'redaction-reports-screen', diff --git a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts index 56b7c46ea..259e0f8b6 100644 --- a/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/trash/trash-screen.component.ts @@ -2,13 +2,13 @@ import { ChangeDetectionStrategy, Component, Injector, OnInit } from '@angular/c import { AppStateService } from '@state/app-state.service'; import { PermissionsService } from '@services/permissions.service'; import { Dossier, StatusControllerService } from '@redaction/red-ui-http'; -import { LoadingService } from '../../../../services/loading.service'; +import { LoadingService } from '@services/loading.service'; import { AppConfigKey, AppConfigService } from '../../../app-config/app-config.service'; import * as moment from 'moment'; import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; -import { ScreenNames, SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '@services/sorting.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; import { DossiersService } from '../../../dossier/services/dossiers.service'; diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts index 22fffb4c7..8b7edbee3 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.ts @@ -6,12 +6,12 @@ import { AdminDialogService } from '../../services/admin-dialog.service'; import { TranslateService } from '@ngx-translate/core'; import { DoughnutChartConfig } from '@shared/components/simple-doughnut-chart/simple-doughnut-chart.component'; import { TranslateChartService } from '@services/translate-chart.service'; -import { LoadingService } from '../../../../services/loading.service'; +import { LoadingService } from '@services/loading.service'; import { InitialsAvatarComponent } from '@shared/components/initials-avatar/initials-avatar.component'; import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; -import { SortingService } from '../../../../services/sorting.service'; +import { SortingService } from '@services/sorting.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; diff --git a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts index c6bd922fd..f0d8c1b86 100644 --- a/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts +++ b/apps/red-ui/src/app/modules/dossier/components/dossier-details/dossier-details.component.ts @@ -9,7 +9,7 @@ import { UserService } from '@services/user.service'; import { User } from '@redaction/red-ui-http'; import { NotificationService } from '@services/notification.service'; import { FilterService } from '@shared/services/filter.service'; -import { FileStatusWrapper } from '../../../../models/file/file-status.wrapper'; +import { FileStatusWrapper } from '@models/file/file-status.wrapper'; @Component({ selector: 'redaction-dossier-details', diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html index a89431dbd..e47477c2c 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.html @@ -1,21 +1,89 @@
-
- {{ 'edit-dossier-dialog.nav-items.custom-dossier-attributes' | translate }} +
+ {{ 'edit-dossier-dialog.attributes.custom-attributes' | translate }}
-
+ + + +
- + + + + + + + + +
-
-
- {{ 'edit-dossier-dialog.nav-items.image-attributes' | translate }} +
+
+ {{ 'edit-dossier-dialog.attributes.image-attributes' | translate }}
-
- - + + + +
+
+ + + + + + + +
+
+ + +
diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss index 22e70f06d..468cc47b3 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.scss @@ -20,5 +20,53 @@ padding: 0; background-color: $separator; } + + .datepicker-wrapper { + width: initial; + } + + .datepicker-wrapper input { + width: initial; + margin-top: 3px; + } + + .datepicker-wrapper:not(:first-child) { + margin-top: 14px; + } + + .image-attribute { + &.displayed-preview { + flex-direction: row; + justify-content: space-between; + + > div { + flex-direction: row; + align-items: center; + display: flex; + } + } + + &:not(first-of-type) { + margin-top: 24px; + } + + .upload-button { + margin-top: 6px; + width: fit-content; + } + + img { + width: 50px; + height: 50px; + object-fit: cover; + object-position: center; + border: 1px solid $grey-5; + margin-right: 15px; + } + + redaction-circle-button:not(:last-child) { + margin-right: 2px; + } + } } } diff --git a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts index 2b41d2d4a..78063aca9 100644 --- a/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts +++ b/apps/red-ui/src/app/modules/dossier/dialogs/edit-dossier-dialog/attributes/edit-dossier-attributes.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { Component, ElementRef, EventEmitter, Input, OnInit, Output, QueryList, ViewChildren } from '@angular/core'; import { EditDossierSectionInterface } from '../edit-dossier-section.interface'; import { DossierWrapper } from '@state/model/dossier.wrapper'; import { AppStateService } from '@state/app-state.service'; @@ -6,6 +6,9 @@ import { PermissionsService } from '@services/permissions.service'; import { DossierAttributeConfig, DossierAttributesControllerService } from '@redaction/red-ui-http'; import { LoadingService } from '@services/loading.service'; import { FormBuilder, FormGroup } from '@angular/forms'; +import * as moment from 'moment'; + +type DossierAttributeWithValue = DossierAttributeConfig & { value: any }; @Component({ selector: 'redaction-edit-dossier-attributes', @@ -15,11 +18,12 @@ import { FormBuilder, FormGroup } from '@angular/forms'; export class EditDossierAttributesComponent implements EditDossierSectionInterface, OnInit { @Input() dossierWrapper: DossierWrapper; @Output() updateDossier = new EventEmitter(); - customAttributes: (DossierAttributeConfig & { value: any })[] = []; - imageAttributes: (DossierAttributeConfig & { value: any })[] = []; - attributesMapping: (DossierAttributeConfig & { value: any })[] = []; + customAttributes: DossierAttributeWithValue[] = []; + imageAttributes: DossierAttributeWithValue[] = []; + attributesMapping: DossierAttributeWithValue[] = []; attributesForm: FormGroup; + @ViewChildren('fileInput') private _fileInputs: QueryList; constructor( private readonly _appStateService: AppStateService, @@ -31,7 +35,11 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa get changed() { for (const attr of this.attributesMapping) { - if (this._parseAttrValue(attr.value) !== this._parseAttrValue(this.attributesForm.get(attr.id).value)) { + if (this.isDate(attr)) { + if (!moment(attr.value).isSame(moment(this.currentAttrValue(attr)))) { + return true; + } + } else if (this._parseAttrValue(attr.value) !== this._parseAttrValue(this.currentAttrValue(attr))) { return true; } } @@ -54,21 +62,69 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa this._loadingService.start(); const dossierAttributeList = this.attributesMapping.map(attr => ({ dossierAttributeId: attr.id, - value: this.attributesForm.get(attr.id).value + value: this.currentAttrValue(attr) })); await this._dossierAttributesService.setDossierAttributes({ dossierAttributeList }, this.dossierWrapper.dossierId).toPromise(); await this._loadAttributes(); + this.updateDossier.emit(); this._loadingService.stop(); } - updatedDossier($event) { - this.updateDossier.emit($event); + fileInputClick(attr: DossierAttributeWithValue) { + this._getFileInputById(attr.id).nativeElement.click(); + } + + isNumber(attr: DossierAttributeWithValue): boolean { + return attr.type === 'NUMBER'; + } + + isDate(attr: DossierAttributeWithValue): boolean { + return attr.type === 'DATE'; + } + + isImage(attr: DossierAttributeWithValue): boolean { + return attr.type === 'IMAGE'; + } + + isText(attr: DossierAttributeWithValue): boolean { + return attr.type === 'TEXT'; + } + + async uploadImage($event, attr: DossierAttributeWithValue) { + const toBase64 = file => + new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.readAsDataURL(file); + reader.onload = () => resolve(reader.result); + reader.onerror = error => reject(error); + }); + + const image = $event.target.files[0]; + const result = await toBase64(image); + this.attributesForm.patchValue({ + [attr.id]: result + }); + this._getFileInputById(attr.id).nativeElement.value = null; } revert() { this._initForm(); } + currentAttrValue(attr: DossierAttributeWithValue): string { + return this.attributesForm.get(attr.id).value; + } + + deleteAttr(attr: DossierAttributeWithValue) { + this.attributesForm.patchValue({ + [attr.id]: null + }); + } + + private _getFileInputById(id: string): ElementRef { + return this._fileInputs.find(el => el.nativeElement.id === id); + } + private _parseAttrValue(value: any) { return [null, undefined, ''].includes(value) ? undefined : value; } @@ -83,8 +139,8 @@ export class EditDossierAttributesComponent implements EditDossierSectionInterfa value: attributes.dossierAttributeList.find(attr => attr.dossierAttributeId === config.id)?.value })); - this.customAttributes = this.attributesMapping.filter(attr => attr.type !== 'IMAGE'); - this.imageAttributes = this.attributesMapping.filter(attr => attr.type === 'IMAGE'); + this.customAttributes = this.attributesMapping.filter(attr => !this.isImage(attr)); + this.imageAttributes = this.attributesMapping.filter(attr => this.isImage(attr)); } private _initForm() { diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts index b73bc15c6..2b1720166 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-listing-screen/dossier-listing-screen.component.ts @@ -22,13 +22,13 @@ import { dossierStatusChecker, dossierTemplateChecker } from '@shared/components/filters/popup-filter/utils/filter-utils'; -import { UserPreferenceService } from '../../../../services/user-preference.service'; +import { UserPreferenceService } from '@services/user-preference.service'; import { ButtonConfig } from '@shared/components/page-header/models/button-config.model'; import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; -import { ScreenNames, SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '@services/sorting.service'; @Component({ templateUrl: './dossier-listing-screen.component.html', diff --git a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts index 63cdaa244..3e80f1d4e 100644 --- a/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/dossier/screens/dossier-overview-screen/dossier-overview-screen.component.ts @@ -29,7 +29,7 @@ import { ActionConfig } from '@shared/components/page-header/models/action-confi import { FilterService } from '@shared/services/filter.service'; import { SearchService } from '@shared/services/search.service'; import { ScreenStateService } from '@shared/services/screen-state.service'; -import { ScreenNames, SortingService } from '../../../../services/sorting.service'; +import { ScreenNames, SortingService } from '@services/sorting.service'; import { BaseListingComponent } from '@shared/base/base-listing.component'; @Component({ diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 375742c5c..5b52cd5d4 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -831,9 +831,15 @@ "general-info": "General Information", "members": "Members", "report-attributes": "Report Attributes", - "team-members": "Team Members", - "custom-dossier-attributes": "Custom Dossier Attributes", - "image-attributes": "Image Attributes" + "team-members": "Team Members" + }, + "attributes": { + "custom-attributes": "Custom Dossier Attributes", + "image-attributes": "Image Attributes", + "upload-image": "Upload Image", + "delete-image": "Delete Image", + "no-custom-attributes": "There are no text attributes", + "no-image-attributes": "There are no image attributes" }, "unsaved-changes": "You have unsaved changes. Save or revert before changing the tab." }, diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss index 38b5f0873..c33a8a099 100644 --- a/apps/red-ui/src/assets/styles/red-input.scss +++ b/apps/red-ui/src/assets/styles/red-input.scss @@ -196,6 +196,7 @@ form { .mat-datepicker-toggle { position: absolute; right: 0; + bottom: 0; color: $accent; &.mat-datepicker-toggle-active {