From d6d54b3740ce59b4cc5a97543ec6298dd826a39b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Sun, 20 Dec 2020 22:31:55 +0200 Subject: [PATCH] Added project templates --- apps/red-ui/src/app/app.module.ts | 89 +++++-- .../file-actions/file-actions.component.scss | 2 +- .../app/common/filter/filter.component.scss | 2 +- .../admin-breadcrumbs.component.html | 40 +-- .../admin-breadcrumbs.component.scss | 2 +- .../admin-breadcrumbs.component.ts | 25 +- .../comments/comments.component.scss | 8 +- .../needs-work-badge.component.scss | 2 +- .../project-template-actions.component.html | 19 ++ .../project-template-actions.component.scss | 7 + .../project-template-actions.component.ts | 37 +++ ...roject-template-view-switch.component.html | 8 + ...roject-template-view-switch.component.scss | 0 .../project-template-view-switch.component.ts | 27 ++ .../simple-doughnut-chart.component.scss | 6 +- .../status-bar/status-bar.component.scss | 2 +- .../add-edit-project-dialog.component.ts | 2 +- apps/red-ui/src/app/dialogs/dialog.service.ts | 30 ++- apps/red-ui/src/app/icons/icons.module.ts | 1 + .../add-edit-dictionary-dialog.component.scss | 14 +- .../dictionary-listing-screen.component.html | 246 ++++++++++-------- .../dictionary-listing-screen.component.scss | 24 +- .../dictionary-listing-screen.component.ts | 11 +- .../dictionary-overview-screen.component.html | 2 +- ...dit-project-template-dialog.component.html | 59 +++++ ...dit-project-template-dialog.component.scss | 19 ++ ...-edit-project-template-dialog.component.ts | 55 ++++ ...ct-templates-listing-screen.component.html | 142 ++++++++++ ...ct-templates-listing-screen.component.scss | 56 ++++ ...ject-templates-listing-screen.component.ts | 94 +++++++ .../rules-screen/rules-screen.component.html | 59 +++-- .../rules-screen/rules-screen.component.scss | 5 + .../rules-screen/rules-screen.component.ts | 12 +- .../users/user-listing-screen.component.html | 2 +- .../watermark-screen.component.html | 2 +- .../file-preview-screen.component.scss | 2 +- .../bulk-actions/bulk-actions.component.scss | 2 +- .../red-ui/src/app/state/app-state.service.ts | 43 +++ apps/red-ui/src/app/utils/sorting.service.ts | 5 +- apps/red-ui/src/assets/i18n/en.json | 41 ++- .../src/assets/icons/general/dictionary.svg | 16 ++ .../src/assets/styles/red-breadcrumbs.scss | 2 +- apps/red-ui/src/assets/styles/red-button.scss | 2 +- .../src/assets/styles/red-checkbox.scss | 2 +- .../src/assets/styles/red-components.scss | 2 +- apps/red-ui/src/assets/styles/red-editor.scss | 2 +- apps/red-ui/src/assets/styles/red-grid.scss | 4 +- apps/red-ui/src/assets/styles/red-input.scss | 12 + apps/red-ui/src/assets/styles/red-menu.scss | 2 +- .../src/assets/styles/red-page-layout.scss | 6 +- apps/red-ui/src/assets/styles/red-toasts.scss | 4 +- 51 files changed, 1009 insertions(+), 249 deletions(-) create mode 100644 apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.html create mode 100644 apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.scss create mode 100644 apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.ts create mode 100644 apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.html create mode 100644 apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.scss create mode 100644 apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.ts create mode 100644 apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.html create mode 100644 apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.scss create mode 100644 apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.ts create mode 100644 apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.html create mode 100644 apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.scss create mode 100644 apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.ts create mode 100644 apps/red-ui/src/assets/icons/general/dictionary.svg diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 86300bf6b..b46078f62 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -98,6 +98,10 @@ import { HtmlDebugScreenComponent } from './screens/html-debug-screen/html-debug import { ReportDownloadBtnComponent } from './components/buttons/report-download-btn/report-download-btn.component'; import { ProjectListingActionsComponent } from './screens/project-listing-screen/project-listing-actions/project-listing-actions.component'; import { HasScrollbarDirective } from './utils/has-scrollbar.directive'; +import { ProjectTemplatesListingScreenComponent } from './screens/admin/project-templates-listing-screen/project-templates-listing-screen.component'; +import { AddEditProjectTemplateDialogComponent } from './screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component'; +import { ProjectTemplateActionsComponent } from './components/project-template-actions/project-template-actions.component'; +import { ProjectTemplateViewSwitchComponent } from './components/project-template-view-switch/project-template-view-switch.component'; import { MatSliderModule } from '@angular/material/slider'; import { PendingChangesGuard } from './utils/can-deactivate.guard'; @@ -168,23 +172,56 @@ const routes = [ { path: 'admin', children: [ - { path: '', redirectTo: 'dictionaries', pathMatch: 'full' }, + { path: '', redirectTo: 'project-templates', pathMatch: 'full' }, { - path: 'dictionaries', - component: DictionaryListingScreenComponent, - canActivate: [CompositeRouteGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] - } - }, - { - path: 'dictionaries/:type', - component: DictionaryOverviewScreenComponent, - canActivate: [CompositeRouteGuard], - canDeactivate: [PendingChangesGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] - } + path: 'project-templates', + children: [ + { + path: '', + component: ProjectTemplatesListingScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, + { + path: ':templateId', + children: [ + { + path: 'dictionaries', + children: [ + { + path: '', + component: DictionaryListingScreenComponent, + canActivate: [CompositeRouteGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, + { + path: ':type', + component: DictionaryOverviewScreenComponent, + canActivate: [CompositeRouteGuard], + canDeactivate: [PendingChangesGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + } + ] + }, + { + path: 'rules', + component: RulesScreenComponent, + canActivate: [CompositeRouteGuard], + canDeactivate: [PendingChangesGuard], + data: { + routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] + } + }, + { path: '', redirectTo: 'dictionaries', pathMatch: 'full' } + ] + } + ] }, { path: 'users', @@ -194,15 +231,6 @@ const routes = [ routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] } }, - { - path: 'rules', - component: RulesScreenComponent, - canActivate: [CompositeRouteGuard], - canDeactivate: [PendingChangesGuard], - data: { - routeGuards: [AuthGuard, RedRoleGuard, AppStateGuard] - } - }, { path: 'watermark', component: WatermarkScreenComponent, @@ -285,6 +313,8 @@ const matImports = [ CircleButtonComponent, ChevronButtonComponent, DictionaryListingScreenComponent, + ProjectTemplatesListingScreenComponent, + AddEditProjectTemplateDialogComponent, SyncWidthDirective, HasScrollbarDirective, AddEditDictionaryDialogComponent, @@ -298,7 +328,9 @@ const matImports = [ PdfViewerScreenComponent, HtmlDebugScreenComponent, ReportDownloadBtnComponent, - ProjectListingActionsComponent + ProjectListingActionsComponent, + ProjectTemplateActionsComponent, + ProjectTemplateViewSwitchComponent ], imports: [ BrowserModule, @@ -351,7 +383,10 @@ const matImports = [ provide: MAT_DATE_FORMATS, useValue: { display: { - dateInput: 'DD/MM/YY' + dateInput: 'DD/MM/YY', + monthYearLabel: 'YYYY', + dateA11yLabel: 'LL', + monthYearA11yLabel: 'YYYY' } } } diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.scss b/apps/red-ui/src/app/common/file-actions/file-actions.component.scss index a530de5f5..4a9497c79 100644 --- a/apps/red-ui/src/app/common/file-actions/file-actions.component.scss +++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.scss @@ -1,7 +1,7 @@ .file-actions { display: flex; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 2px; } } diff --git a/apps/red-ui/src/app/common/filter/filter.component.scss b/apps/red-ui/src/app/common/filter/filter.component.scss index 962f176f3..02a600d80 100644 --- a/apps/red-ui/src/app/common/filter/filter.component.scss +++ b/apps/red-ui/src/app/common/filter/filter.component.scss @@ -9,7 +9,7 @@ .actions { display: flex; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 8px; } } diff --git a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html index 2bedc5574..5549ff5ea 100644 --- a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html +++ b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.html @@ -1,44 +1,46 @@
- - + + + + {{ projectTemplate.name }} + + + - - {{ dictionary.type | humanize }} + + {{ dictionary.label }}
diff --git a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.scss b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.scss index b2f445392..87b0ab315 100644 --- a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.scss +++ b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.scss @@ -1,3 +1,3 @@ -.ml-32 { +.breadcrumb:not(:first-child):not(.ml-0) { margin-left: 32px; } diff --git a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.ts b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.ts index afd0adb8f..b4931d79d 100644 --- a/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.ts +++ b/apps/red-ui/src/app/components/admin-page-header/admin-breadcrumbs.component.ts @@ -1,7 +1,7 @@ -import { Component, OnInit } from '@angular/core'; +import { Component, Input, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { TypeValue } from '@redaction/red-ui-http'; -import { AppStateService } from '../../state/app-state.service'; +import { AppStateService, ProjectTemplate } from '../../state/app-state.service'; import { UserPreferenceService } from '../../common/service/user-preference.service'; import { PermissionsService } from '../../common/service/permissions.service'; @@ -12,24 +12,25 @@ import { PermissionsService } from '../../common/service/permissions.service'; }) export class AdminBreadcrumbsComponent implements OnInit { public dictionary: TypeValue; - public root: boolean; - public screen: string; + public projectTemplate: ProjectTemplate; + @Input() + public root = false; constructor( public readonly userPreferenceService: UserPreferenceService, public readonly permissionService: PermissionsService, private readonly _activatedRoute: ActivatedRoute, private readonly _appStateService: AppStateService - ) { + ) {} + + ngOnInit(): void { this._activatedRoute.params.subscribe((params) => { - const url = this._activatedRoute.snapshot.url; - this.root = url.length === 1; - this.screen = url[0].path; - if (this.screen === 'dictionaries' && url.length === 2) { - this.dictionary = this._appStateService.dictionaryData[params.type]; + if (params.templateId) { + this.projectTemplate = this._appStateService.getProjectTemplateById(params.templateId); + } + if (params.type) { + this.dictionary = this._appStateService.getDictionaryTypeValue(params.type); } }); } - - ngOnInit(): void {} } diff --git a/apps/red-ui/src/app/components/comments/comments.component.scss b/apps/red-ui/src/app/components/comments/comments.component.scss index 06f5254bd..127df2bed 100644 --- a/apps/red-ui/src/app/components/comments/comments.component.scss +++ b/apps/red-ui/src/app/components/comments/comments.component.scss @@ -5,14 +5,14 @@ flex-direction: column; margin-top: 10px; - > *:not(last-child) { + > *:not(:last-child) { margin-bottom: 10px; } .comment { display: flex; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 12px; } @@ -53,7 +53,7 @@ display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 15px; } } @@ -61,7 +61,7 @@ .actions-container { margin-left: 26px; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 5px; } diff --git a/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss index a741c5bc3..a69d6a7f5 100644 --- a/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss +++ b/apps/red-ui/src/app/components/needs-work-badge/needs-work-badge.component.scss @@ -4,7 +4,7 @@ align-items: center; justify-content: flex-start; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 4px; } } diff --git a/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.html b/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.html new file mode 100644 index 000000000..9b0edb1f4 --- /dev/null +++ b/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.html @@ -0,0 +1,19 @@ +
+ + + + + +
diff --git a/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.scss b/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.scss new file mode 100644 index 000000000..eeb99fae7 --- /dev/null +++ b/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.scss @@ -0,0 +1,7 @@ +.action-buttons { + display: flex; + + redaction-circle-button:not(:last-child) { + margin-right: 2px; + } +} diff --git a/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.ts b/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.ts new file mode 100644 index 000000000..7316bdd35 --- /dev/null +++ b/apps/red-ui/src/app/components/project-template-actions/project-template-actions.component.ts @@ -0,0 +1,37 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { ProjectTemplate } from '../../state/app-state.service'; +import { DialogService } from '../../dialogs/dialog.service'; +import { PermissionsService } from '../../common/service/permissions.service'; + +@Component({ + selector: 'redaction-project-template-actions', + templateUrl: './project-template-actions.component.html', + styleUrls: ['./project-template-actions.component.scss'] +}) +export class ProjectTemplateActionsComponent implements OnInit { + @Input() template: ProjectTemplate; + @Output() loadTemplatesData = new EventEmitter(); + + constructor(private readonly _dialogService: DialogService, public readonly permissionsService: PermissionsService) {} + + ngOnInit(): void {} + + openAddEditTemplateDialog(template?: ProjectTemplate) { + this._dialogService.openAddEditTemplateDialog(template, async (newTemplate) => { + if (newTemplate) { + this.loadTemplatesData.emit(); + } + }); + } + + openEditTemplateDialog($event: any, pt: ProjectTemplate) { + $event.stopPropagation(); + this.openAddEditTemplateDialog(pt); + } + + openDeleteTemplateDialog($event: any, template: ProjectTemplate) { + this._dialogService.openDeleteProjectTemplateDialog($event, template, async () => { + this.loadTemplatesData.emit(); + }); + } +} diff --git a/apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.html b/apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.html new file mode 100644 index 000000000..a1d64e213 --- /dev/null +++ b/apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.html @@ -0,0 +1,8 @@ +
+
+ + {{ 'dictionaries' | translate }} + {{ 'rule-editor' | translate }} + +
+
diff --git a/apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.scss b/apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.ts b/apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.ts new file mode 100644 index 000000000..170a27221 --- /dev/null +++ b/apps/red-ui/src/app/components/project-template-view-switch/project-template-view-switch.component.ts @@ -0,0 +1,27 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; + +@Component({ + selector: 'redaction-project-template-view-switch', + templateUrl: './project-template-view-switch.component.html', + styleUrls: ['./project-template-view-switch.component.scss'] +}) +export class ProjectTemplateViewSwitchComponent implements OnInit { + @Input() public screen: 'rules' | 'dictionaries'; + + private readonly _projectTemplateId: string; + + constructor(private readonly _actr: ActivatedRoute, private _router: Router) { + this._projectTemplateId = this._actr.snapshot.params.templateId; + } + + ngOnInit(): void {} + + public switchView($event) { + if ($event.value === 'dictionaries') { + this._router.navigate(['ui/admin/project-templates/' + this._projectTemplateId + '/dictionaries']); + } else { + this._router.navigate(['ui/admin/project-templates/' + this._projectTemplateId + '/rules']); + } + } +} diff --git a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss index 70e1687a7..c87f58a0a 100644 --- a/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss +++ b/apps/red-ui/src/app/components/simple-doughnut-chart/simple-doughnut-chart.component.scss @@ -10,7 +10,7 @@ align-items: center; &:not(.column) { - > *:not(last-child) { + > *:not(:last-child) { margin-right: 20px; } } @@ -18,7 +18,7 @@ &.column { flex-direction: column; - > *:not(last-child) { + > *:not(:last-child) { margin-bottom: 20px; } } @@ -51,7 +51,7 @@ border-radius: 4px; padding: 3px 8px; - &:not(last-child) { + &:not(:last-child) { margin-bottom: 8px; } diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss index 18c247fe1..92523436c 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss @@ -15,7 +15,7 @@ display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 10px; } } diff --git a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts index f5e3ab52e..2fa878326 100644 --- a/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts +++ b/apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts @@ -13,7 +13,7 @@ import * as moment from 'moment'; }) export class AddEditProjectDialogComponent { public projectForm: FormGroup; - public hasDueDate = true; + public hasDueDate: boolean; constructor( private readonly _appStateService: AppStateService, diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts index 8458e8a21..1dff8b33a 100644 --- a/apps/red-ui/src/app/dialogs/dialog.service.ts +++ b/apps/red-ui/src/app/dialogs/dialog.service.ts @@ -4,7 +4,7 @@ import { DictionaryControllerService, FileManagementControllerService, FileStatu import { ConfirmationDialogComponent, ConfirmationDialogInput } from './confirmation-dialog/confirmation-dialog.component'; import { NotificationService, NotificationType } from '../notification/notification.service'; import { TranslateService } from '@ngx-translate/core'; -import { AppStateService } from '../state/app-state.service'; +import { AppStateService, ProjectTemplate } from '../state/app-state.service'; import { AddEditProjectDialogComponent } from './add-edit-project-dialog/add-edit-project-dialog.component'; import { AssignOwnerDialogComponent } from './assign-owner-dialog/assign-owner-dialog.component'; import { ManualRedactionEntryWrapper } from '../screens/file/model/manual-redaction-entry.wrapper'; @@ -13,6 +13,7 @@ import { ManualAnnotationDialogComponent } from './manual-redaction-dialog/manua import { ManualAnnotationService } from '../screens/file/service/manual-annotation.service'; import { ProjectWrapper } from '../state/model/project.wrapper'; import { AddEditDictionaryDialogComponent } from '../screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component'; +import { AddEditProjectTemplateDialogComponent } from '../screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component'; import { DEFAULT_RUL_SET_UUID } from '../utils/rule-set-default'; const dialogConfig = { @@ -174,6 +175,17 @@ export class DialogService { return ref; } + public openDeleteProjectTemplateDialog($event: MouseEvent, projectTemplate: ProjectTemplate, cb?: Function): MatDialogRef { + $event.stopPropagation(); + const ref = this._dialog.open(ConfirmationDialogComponent, dialogConfig); + ref.afterClosed().subscribe(async (result) => { + if (result) { + if (cb) cb(); + } + }); + return ref; + } + public openDeleteProjectDialog($event: MouseEvent, project: ProjectWrapper, cb?: Function): MatDialogRef { $event.stopPropagation(); const ref = this._dialog.open(ConfirmationDialogComponent, { @@ -273,6 +285,22 @@ export class DialogService { return ref; } + public openAddEditTemplateDialog(template: ProjectTemplate, cb?: Function): MatDialogRef { + const ref = this._dialog.open(AddEditProjectTemplateDialogComponent, { + ...dialogConfig, + data: template, + autoFocus: true + }); + + ref.afterClosed().subscribe((result) => { + if (result && cb) { + cb(result); + } + }); + + return ref; + } + openRemoveAnnotationModal($event: MouseEvent, annotation: AnnotationWrapper, callback: () => void) { $event?.stopPropagation(); diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 79a1d8474..824319edd 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -27,6 +27,7 @@ export class IconsModule { 'comment', 'case-sensitive', 'comment-fill', + 'dictionary', 'document', 'double-chevron-right', 'download', diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss index 176922a86..c5eefa9a6 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss @@ -3,7 +3,7 @@ .first-row { display: flex; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 16px; } @@ -12,18 +12,6 @@ } } -.slider-row { - display: flex; - flex-direction: row; - align-items: center; -} - -.mat-button-toggle-checked { - background: $primary; - transition: background-color 0.25s ease; - color: $white; -} - .mb-14 { margin-bottom: 14px; } diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index 14ab60446..f67bc5685 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -2,130 +2,162 @@
-
-
- - -
-
+ -
- +
+ + - +
-
-
+
+ +
+ + +
+ + +
+
+
+ + +
+ + + {{ 'dictionary-listing.table-header.title' | translate: { length: displayedDictionaries.length } }} + + +
+
+
+ + +
+
+ +
+ +
+
+
+ +
+
+ + + + + + +
+
+
+ +
+
- - -
+ class="table-item pointer" + *ngFor="let dict of displayedDictionaries | sortBy: sortingOption.order:sortingOption.column" + [routerLink]="[dict.type]" + > +
+
+ +
- - {{ 'dictionary-listing.table-header.title' | translate: { length: displayedDictionaries.length } }} - -
- -
-
- - - -
-
-
- -
- -
-
-
- -
- -
-
-
-
- {{ dict.label }} -
-
-
- - {{ dict.entries?.length }} +
+
+
+
+ {{ dict.label }}
-
- - {{ 'dictionary-listing.case-sensitive' | translate }} +
+
+ + {{ dict.entries?.length }} +
+
+ + {{ 'dictionary-listing.case-sensitive' | translate }} +
-
-
- -
-
-
- - - - - +
+ {{ dict.rank }}
+ +
+ +
+ +
+
+ + + + + +
+
+
-
-
+
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss index 27e3fb33f..db6ec87df 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.scss @@ -2,7 +2,17 @@ @import '../../../../assets/styles/red-mixins'; .header-item { - padding: 0 24px 0 10px; + padding: 0 16px 0 10px; + + .dictionary-actions-container { + display: flex; + flex: 1; + justify-content: flex-end; + + > *:not(:last-child) { + margin-right: 16px; + } + } } redaction-table-col-name::ng-deep { @@ -15,10 +25,10 @@ redaction-table-col-name::ng-deep { width: calc(100vw - 353px); .grid-container { - grid-template-columns: auto 1fr 1fr 2fr 11px; + grid-template-columns: auto 2fr 1fr 1fr 1fr 11px; &.has-scrollbar:hover { - grid-template-columns: auto 1fr 1fr 2fr; + grid-template-columns: auto 2fr 1fr 1fr 1fr; } .table-item { @@ -29,7 +39,8 @@ redaction-table-col-name::ng-deep { align-items: center; justify-content: flex-start; - &.analyzed { + &.analyzed, + &.rank { justify-content: center; } @@ -71,10 +82,5 @@ redaction-table-col-name::ng-deep { .page-header .actions { display: flex; - width: calc(353px - 24px); justify-content: flex-end; - - .ml-6 { - margin-left: 6px; - } } diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts index f3a649bc7..14524f4de 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.ts @@ -3,7 +3,7 @@ import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/s import { DictionaryControllerService, TypeValue } from '@redaction/red-ui-http'; import { SortingOption, SortingService } from '../../../utils/sorting.service'; import { DialogService } from '../../../dialogs/dialog.service'; -import { AppStateService } from '../../../state/app-state.service'; +import { AppStateService, ProjectTemplate } from '../../../state/app-state.service'; import { tap } from 'rxjs/operators'; import { forkJoin } from 'rxjs'; import { PermissionsService } from '../../../common/service/permissions.service'; @@ -11,6 +11,7 @@ import { FormBuilder, FormGroup } from '@angular/forms'; import { debounce } from '../../../utils/debounce'; import { UserPreferenceService } from '../../../common/service/user-preference.service'; import { DEFAULT_RUL_SET_UUID } from '../../../utils/rule-set-default'; +import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'redaction-dictionary-listing-screen', @@ -23,6 +24,7 @@ export class DictionaryListingScreenComponent implements OnInit { public displayedDictionaries: TypeValue[]; public selectedDictKeys: string[] = []; public searchForm: FormGroup; + public projectTemplate: ProjectTemplate; constructor( private readonly _dialogService: DialogService, @@ -30,6 +32,7 @@ export class DictionaryListingScreenComponent implements OnInit { private readonly _formBuilder: FormBuilder, private readonly _dictionaryControllerService: DictionaryControllerService, private readonly _appStateService: AppStateService, + private readonly _actr: ActivatedRoute, public readonly permissionsService: PermissionsService ) { this.searchForm = this._formBuilder.group({ @@ -37,6 +40,8 @@ export class DictionaryListingScreenComponent implements OnInit { }); this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value)); + + this.projectTemplate = this._appStateService.getProjectTemplateById(this._actr.snapshot.params.templateId); } ngOnInit(): void { @@ -141,4 +146,8 @@ export class DictionaryListingScreenComponent implements OnInit { this._loadDictionaryData(); }); } + + public loadProjectTemplatesData(): void { + console.log('load project templates data'); + } } diff --git a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html index f4ee5e31a..fa687087c 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-overview-screen/dictionary-overview-screen.component.html @@ -42,7 +42,7 @@ +
+ {{ (template ? 'add-edit-project-template.title.edit' : 'add-edit-project-template.title.new') | translate: { name: template?.name } }} +
+ +
+
+
+ + +
+ +
+ + +
+ +
+ + {{ 'project-listing.add-edit-dialog.form.due-date' | translate }} + + + +
+ + + + + +
+ + to + +
+ + + + + +
+ +
+
+ +
+ +
+
+ + + diff --git a/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.scss b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.scss new file mode 100644 index 000000000..f8dcfe010 --- /dev/null +++ b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.scss @@ -0,0 +1,19 @@ +.valid-from { + margin-top: 16px; + min-height: 34px; + display: flex; + flex-direction: row; + align-items: center; + + mat-checkbox { + width: fit-content; + } + + .mr-16 { + margin-right: 16px; + } + + .ml-16 { + margin-left: 16px; + } +} diff --git a/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.ts b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.ts new file mode 100644 index 000000000..b4495ba82 --- /dev/null +++ b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/add-edit-project-template-dialog/add-edit-project-template-dialog.component.ts @@ -0,0 +1,55 @@ +import { Component, Inject } from '@angular/core'; +import { AppStateService, ProjectTemplate } from '../../../../state/app-state.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import * as moment from 'moment'; + +@Component({ + selector: 'redaction-add-edit-project-template-dialog', + templateUrl: './add-edit-project-template-dialog.component.html', + styleUrls: ['./add-edit-project-template-dialog.component.scss'] +}) +export class AddEditProjectTemplateDialogComponent { + public templateForm: FormGroup; + public hasValidFrom: boolean; + + constructor( + private readonly _appStateService: AppStateService, + private readonly _formBuilder: FormBuilder, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public template: ProjectTemplate + ) { + this.templateForm = this._formBuilder.group({ + name: [this.template?.name, Validators.required], + description: [this.template?.description], + validFrom: [this.template?.validFrom], + validTo: [this.template?.validTo] + }); + this.hasValidFrom = !!this.template?.validFrom && !!this.template?.validTo; + } + + public get changed(): boolean { + if (!this.template) return true; + + for (const key of Object.keys(this.templateForm.getRawValue())) { + if (key === 'validFrom' || key === 'validTo') { + if (this.hasValidFrom !== (!!this.template.validFrom && !!this.template.validTo)) { + return true; + } + if (this.hasValidFrom && !moment(this.template[key]).isSame(moment(this.templateForm.get(key).value))) { + return true; + } + } else if (this.template[key] !== this.templateForm.get(key).value) { + return true; + } + } + + return false; + } + + async saveTemplate() { + const template = this.templateForm.getRawValue(); + console.log({ template }); + this.dialogRef.close({ template }); + } +} diff --git a/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.html new file mode 100644 index 000000000..cdf7c6724 --- /dev/null +++ b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.html @@ -0,0 +1,142 @@ +
+
+ + +
+
+
+ + +
+
+ + + + +
+
+ +
+
+
+
+
+ + +
+ + + {{ 'project-templates-listing.table-header.title' | translate: { length: displayedTemplates.length } }} + +
+ +
+
+ + + + + +
+
+ +
+ +
+
+
+ +
+ +
+
+ {{ template.name }} +
+
+
+ + {{ 'project-templates-listing.dictionaries' | translate: { length: 3 } }} +
+
+ + {{ 'project-templates-listing.entries' | translate: { length: 300 } }} +
+
+
+ +
+ +
+
+ {{ template.dateAdded | date: 'd MMM. yyyy' }} +
+
+
+ {{ template.dateModified | date: 'd MMM. yyyy' }} +
+ + +
+ +
+
+
+
+
+
diff --git a/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.scss b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.scss new file mode 100644 index 000000000..b739153f2 --- /dev/null +++ b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.scss @@ -0,0 +1,56 @@ +@import '../../../../assets/styles/red-variables'; +@import '../../../../assets/styles/red-mixins'; + +.header-item { + padding: 0 24px 0 10px; +} + +redaction-table-col-name::ng-deep { + > div { + padding-left: 10px !important; + } +} + +.left-container { + width: 100vw; + + .grid-container { + grid-template-columns: auto 1fr 1fr 1fr 1fr 11px; + + &.has-scrollbar:hover { + grid-template-columns: auto 1fr 1fr 1fr 1fr; + } + + .table-item { + > div:not(.scrollbar-placeholder) { + display: flex; + flex-direction: row; + padding-left: 10px; + align-items: center; + + &.template-name { + flex-direction: column; + align-items: flex-start; + } + + .stats-subtitle { + margin-top: 4px; + } + + .table-item-title { + max-width: 100%; + } + + &.created-by, + &.created-on, + &.modified-on { + display: flex; + } + } + } + } +} + +.page-header .actions > *:not(:last-child) { + margin-right: 16px; +} diff --git a/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.ts new file mode 100644 index 000000000..fc5a248a0 --- /dev/null +++ b/apps/red-ui/src/app/screens/admin/project-templates-listing-screen/project-templates-listing-screen.component.ts @@ -0,0 +1,94 @@ +import { Component, OnInit } from '@angular/core'; +import { SortingOption, SortingService } from '../../../utils/sorting.service'; +import { DialogService } from '../../../dialogs/dialog.service'; +import { AppStateService, ProjectTemplate } from '../../../state/app-state.service'; +import { PermissionsService } from '../../../common/service/permissions.service'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { debounce } from '../../../utils/debounce'; + +@Component({ + selector: 'redaction-project-templates-listing-screen', + templateUrl: './project-templates-listing-screen.component.html', + styleUrls: ['./project-templates-listing-screen.component.scss'] +}) +export class ProjectTemplatesListingScreenComponent implements OnInit { + public templates: ProjectTemplate[]; + public displayedTemplates: ProjectTemplate[]; + public selectedTemplateIds: string[] = []; + public searchForm: FormGroup; + + constructor( + private readonly _dialogService: DialogService, + private readonly _sortingService: SortingService, + private readonly _formBuilder: FormBuilder, + private readonly _appStateService: AppStateService, + public readonly permissionsService: PermissionsService + ) { + this.searchForm = this._formBuilder.group({ + query: [''] + }); + + this.searchForm.valueChanges.subscribe((value) => this._executeSearch(value)); + } + + ngOnInit(): void { + this.loadTemplatesData(); + } + + @debounce(200) + private _executeSearch(value: { query: string }) { + this.displayedTemplates = this.templates.filter((pt) => pt.name.toLowerCase().includes(value.query.toLowerCase())); + } + + public loadTemplatesData() { + this._appStateService.reset(); + this.templates = this._appStateService.projectTemplates; + this.displayedTemplates = [...this.templates]; + } + + public get sortingOption(): SortingOption { + return this._sortingService.getSortingOption('project-templates-listing'); + } + + public toggleSort($event) { + this._sortingService.toggleSort('project-templates-listing', $event); + } + + toggleTemplateSelected($event: MouseEvent, template: ProjectTemplate) { + $event.stopPropagation(); + const idx = this.selectedTemplateIds.indexOf(template.id); + if (idx === -1) { + this.selectedTemplateIds.push(template.id); + } else { + this.selectedTemplateIds.splice(idx, 1); + } + } + + public toggleSelectAll() { + if (this.areSomeTemplatesSelected) { + this.selectedTemplateIds = []; + } else { + this.selectedTemplateIds = this.displayedTemplates.map((pt) => pt.id); + } + } + + public get areAllTemplatesSelected() { + return this.displayedTemplates.length !== 0 && this.selectedTemplateIds.length === this.displayedTemplates.length; + } + + public get areSomeTemplatesSelected() { + return this.selectedTemplateIds.length > 0; + } + + public isTemplateSelected(pt: ProjectTemplate) { + return this.selectedTemplateIds.indexOf(pt.id) !== -1; + } + + openAddTemplateDialog() { + this._dialogService.openAddEditTemplateDialog(null, async (newTemplate) => { + if (newTemplate) { + this.loadTemplatesData(); + } + }); + } +} diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html index 11ab85c1e..355dbc7c0 100644 --- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html @@ -1,34 +1,43 @@
- -
- + - - + - +
+ + - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.scss b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.scss index 5a2233d9b..ce018878f 100644 --- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.scss +++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.scss @@ -9,3 +9,8 @@ .changes-box { right: 40px; } + +.page-header .actions { + display: flex; + justify-content: flex-end; +} diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts index 2e6883b14..df017d23c 100644 --- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.ts @@ -7,6 +7,8 @@ import { TranslateService } from '@ngx-translate/core'; import { saveAs } from 'file-saver'; import { DEFAULT_RUL_SET_UUID } from '../../../utils/rule-set-default'; import { ComponentHasChanges } from '../../../utils/can-deactivate.guard'; +import { ActivatedRoute } from '@angular/router'; +import { AppStateService, ProjectTemplate } from '../../../state/app-state.service'; declare var ace; @@ -24,6 +26,7 @@ export class RulesScreenComponent extends ComponentHasChanges { public currentLines: string[] = []; public changedLines: number[] = []; public activeEditMarkers: any[] = []; + public projectTemplate: ProjectTemplate; @ViewChild('editorComponent', { static: true }) editorComponent: AceEditorComponent; @@ -34,11 +37,14 @@ export class RulesScreenComponent extends ComponentHasChanges { constructor( public readonly permissionsService: PermissionsService, private readonly _rulesControllerService: RulesControllerService, + private readonly _appStateService: AppStateService, private readonly _notificationService: NotificationService, - protected readonly _translateService: TranslateService + protected readonly _translateService: TranslateService, + private readonly _actr: ActivatedRoute ) { super(_translateService); this._initialize(); + this.projectTemplate = this._appStateService.getProjectTemplateById(this._actr.snapshot.params.templateId); } private _initialize() { @@ -123,4 +129,8 @@ export class RulesScreenComponent extends ComponentHasChanges { fileReader.readAsText(file); } } + + public loadProjectTemplatesData(): void { + console.log('load project templates data'); + } } diff --git a/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html index db5068b80..16ac46a6d 100644 --- a/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/users/user-listing-screen.component.html @@ -1,6 +1,6 @@
- +
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html index 92fca9659..4226e3577 100644 --- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html @@ -1,6 +1,6 @@
- +
*:not(last-child) { + > *:not(:last-child) { margin-right: 2px; } } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss index 8fc880736..7b324d7a4 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss @@ -2,7 +2,7 @@ display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 2px; } } diff --git a/apps/red-ui/src/app/state/app-state.service.ts b/apps/red-ui/src/app/state/app-state.service.ts index ef71353eb..7910efb2c 100644 --- a/apps/red-ui/src/app/state/app-state.service.ts +++ b/apps/red-ui/src/app/state/app-state.service.ts @@ -33,6 +33,18 @@ export interface AppState { ruleVersion?: number; } +export interface ProjectTemplate { + id: string; + name: string; + description: string; + dateAdded: string; // ( iso-string ) + dateModified: string; // ( iso-string) + createdBy: string; // userId + modifiedBy: string; // userid + validFrom: string; // (iso-date ) + validTo: string; // ( iso-date) +} + @Injectable({ providedIn: 'root' }) @@ -149,6 +161,37 @@ export class AppStateService { return this.getProjectById(projectId).files.find((file) => file.fileId === fileId); } + public get projectTemplates(): ProjectTemplate[] { + return [ + { + id: '1', + name: 'Most important sets', + description: 'description', + dateAdded: '2011-10-05T14:48:00.000Z', + dateModified: '2011-10-05T14:48:00.000Z', + createdBy: '2', + modifiedBy: '2', + validFrom: '2011-10-05T14:48:00.000Z', + validTo: '2011-10-05T14:48:00.000Z' + }, + { + id: '2', + name: 'Another rule set', + description: 'description', + dateAdded: '2012-10-05T14:48:00.000Z', + dateModified: '2013-10-05T14:48:00.000Z', + createdBy: '2', + modifiedBy: '2', + validFrom: '2011-10-05T14:48:00.000Z', + validTo: '2011-10-05T14:48:00.000Z' + } + ]; + } + + public getProjectTemplateById(id: string): ProjectTemplate { + return this.projectTemplates.find((pt) => pt.id === id); + } + async loadAllProjects() { const projects = await this._projectControllerService.getProjects().toPromise(); if (projects) { diff --git a/apps/red-ui/src/app/utils/sorting.service.ts b/apps/red-ui/src/app/utils/sorting.service.ts index ab9bbf996..69d255671 100644 --- a/apps/red-ui/src/app/utils/sorting.service.ts +++ b/apps/red-ui/src/app/utils/sorting.service.ts @@ -5,7 +5,7 @@ export class SortingOption { column: string; } -type Screen = 'project-listing' | 'project-overview' | 'dictionary-listing'; +type Screen = 'project-listing' | 'project-overview' | 'dictionary-listing' | 'project-templates-listing'; @Injectable({ providedIn: 'root' @@ -14,7 +14,8 @@ export class SortingService { private _options: { [key: string]: SortingOption } = { 'project-listing': { column: 'project.projectName', order: 'asc' }, 'project-overview': { column: 'filename', order: 'asc' }, - 'dictionary-listing': { column: 'label', order: 'asc' } + 'dictionary-listing': { column: 'label', order: 'asc' }, + 'project-templates-listing': { column: 'name', order: 'asc' } }; constructor() {} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 29498770c..7ee1d2de0 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -560,6 +560,20 @@ }, "save": "Save Dictionary" }, + "add-edit-project-template": { + "title": { + "edit": "Edit {{name}} Project Template", + "new": "Create Project Template" + }, + "form": { + "name": "Project Template Name", + "name-placeholder": "Enter Name", + "description": "Description", + "description-placeholder": "Enter Description", + "valid-from": "Valid from" + }, + "save": "Save Project Template" + }, "dictionary-overview": { "action": { "delete": "Delete Dictionary", @@ -597,9 +611,34 @@ }, "table-col-names": { "type": "Type", + "order-of-importance": "Order Of Importance", "hint-redaction": "Hint/Redaction" }, - "search": "Search..." + "search": "Search...", + "no-data": { + "title": "There are no dictionaries yet.", + "action": "New Dictionary" + } + }, + "project-templates": "Project Templates", + "project-templates-listing": { + "table-header": { + "title": "{{length}} project templates" + }, + "entries": "{{length}} entries", + "dictionaries": "{{length}} dictionaries", + "action": { + "delete": "Delete Template", + "edit": "Edit Template" + }, + "add-new": "New Project Template", + "search": "Search...", + "table-col-names": { + "name": "Name", + "created-by": "Created by", + "created-on": "Created on", + "modified-on": "Modified on" + } }, "user-listing": { "table-header": { diff --git a/apps/red-ui/src/assets/icons/general/dictionary.svg b/apps/red-ui/src/assets/icons/general/dictionary.svg new file mode 100644 index 000000000..4f583601c --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/dictionary.svg @@ -0,0 +1,16 @@ + + + 6C0B3F0C-53AF-4E50-8C71-BCE07198E584 + + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss index 250b27ea6..cfc6b8f54 100644 --- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss +++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss @@ -5,7 +5,7 @@ display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 6px; } diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index c152790fe..802bfaf83 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -15,7 +15,7 @@ line-height: 34px; transition: opacity 0.2s; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 6px; } } diff --git a/apps/red-ui/src/assets/styles/red-checkbox.scss b/apps/red-ui/src/assets/styles/red-checkbox.scss index 8c2f68e40..10f4ede37 100644 --- a/apps/red-ui/src/assets/styles/red-checkbox.scss +++ b/apps/red-ui/src/assets/styles/red-checkbox.scss @@ -25,7 +25,7 @@ display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 8px; } } diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index 530028967..c61dbc680 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -77,7 +77,7 @@ margin-right: 4px; } - &:not(last-child) { + &:not(:last-child) { margin-right: 12px; } } diff --git a/apps/red-ui/src/assets/styles/red-editor.scss b/apps/red-ui/src/assets/styles/red-editor.scss index f17edf52a..858d654e3 100644 --- a/apps/red-ui/src/assets/styles/red-editor.scss +++ b/apps/red-ui/src/assets/styles/red-editor.scss @@ -88,7 +88,7 @@ box-shadow: 0 2px 6px 0 rgba(40, 50, 65, 0.3); z-index: 5000; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 24px; } } diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss index 41e6acdd5..1a7a34870 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -12,7 +12,7 @@ box-sizing: border-box; @include inset-shadow; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 10px; } @@ -20,7 +20,7 @@ display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 25px; } } diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss index 6aea18834..17647b04c 100644 --- a/apps/red-ui/src/assets/styles/red-input.scss +++ b/apps/red-ui/src/assets/styles/red-input.scss @@ -73,6 +73,18 @@ form { right: 10px; } + .slider-row { + display: flex; + flex-direction: row; + align-items: center; + } + + .mat-button-toggle-checked { + background: $primary; + transition: background-color 0.25s ease; + color: $white; + } + input, textarea, mat-select { diff --git a/apps/red-ui/src/assets/styles/red-menu.scss b/apps/red-ui/src/assets/styles/red-menu.scss index df9f65a1a..2a2fe9792 100644 --- a/apps/red-ui/src/assets/styles/red-menu.scss +++ b/apps/red-ui/src/assets/styles/red-menu.scss @@ -24,7 +24,7 @@ display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 8px; } diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index 0c2d4b84d..3262c59ec 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -26,7 +26,7 @@ body { display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 2px; } @@ -47,7 +47,7 @@ body { display: flex; align-items: center; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 2px; } } @@ -284,7 +284,7 @@ body { height: calc(100vh - 61px); position: relative; - > *:not(last-child) { + > *:not(:last-child) { margin-bottom: 2px; } } diff --git a/apps/red-ui/src/assets/styles/red-toasts.scss b/apps/red-ui/src/assets/styles/red-toasts.scss index 3bb91de67..b4f5d9e0e 100644 --- a/apps/red-ui/src/assets/styles/red-toasts.scss +++ b/apps/red-ui/src/assets/styles/red-toasts.scss @@ -13,7 +13,7 @@ align-items: center; box-shadow: none; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 10px; } @@ -25,7 +25,7 @@ margin-top: 24px; display: flex; - > *:not(last-child) { + > *:not(:last-child) { margin-right: 24px; }