From fad3f394a053fc2b748b3cc95324a01955a842d1 Mon Sep 17 00:00:00 2001 From: mchouliara Date: Mon, 2 Sep 2024 14:11:16 +0300 Subject: [PATCH] refactor plan authors into separate component, + remove test project from angular.json --- frontend/angular.json | 14 ----- .../description-overview.component.html | 40 +++---------- .../description-overview.component.scss | 33 ----------- .../description-overview.component.ts | 5 ++ .../overview/description-overview.module.ts | 4 +- .../overview/plan-overview.component.html | 40 +++---------- .../overview/plan-overview.component.scss | 48 --------------- .../ui/plan/overview/plan-overview.module.ts | 4 +- .../plan-authors/plan-authors.component.html | 27 +++++++++ .../plan-authors/plan-authors.component.scss | 34 +++++++++++ .../plan-authors/plan-authors.component.ts | 58 +++++++++++++++++++ frontend/src/styles.scss | 33 ++++++++++- 12 files changed, 176 insertions(+), 164 deletions(-) create mode 100644 frontend/src/app/ui/plan/plan-authors/plan-authors.component.html create mode 100644 frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss create mode 100644 frontend/src/app/ui/plan/plan-authors/plan-authors.component.ts diff --git a/frontend/angular.json b/frontend/angular.json index 42a66b324..61afe9cff 100644 --- a/frontend/angular.json +++ b/frontend/angular.json @@ -129,20 +129,6 @@ } } } - }, - "frontend-e2e": { - "root": "", - "sourceRoot": "e2e", - "projectType": "application", - "architect": { - "e2e": { - "builder": "@angular-devkit/build-angular:protractor", - "options": { - "protractorConfig": "./protractor.conf.js", - "devServerTarget": "frontend:serve" - } - } - } } }, "schematics": { diff --git a/frontend/src/app/ui/description/overview/description-overview.component.html b/frontend/src/app/ui/description/overview/description-overview.component.html index 21805026d..43e9c621f 100644 --- a/frontend/src/app/ui/description/overview/description-overview.component.html +++ b/frontend/src/app/ui/description/overview/description-overview.component.html @@ -188,39 +188,15 @@
-
-

{{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}

-
-
-
-
- -
-
- -

{{ planUser.user?.name }}

- - -

{{ userName }} - ({{ 'DESCRIPTION-OVERVIEW.YOU' | translate }}) -

- - -

- {{ enumUtils.toPlanUserRoleString(planUser.role) }} - - {{ 'DESCRIPTION-OVERVIEW.ROLES.ALL-SECTIONS' | translate}} - {{ getSectionNameById(planUser.sectionId) }} -

-
-
- -
-
+
+ {{ 'DESCRIPTION-OVERVIEW.DESCRIPTION-AUTHORS' | translate }}
+
-
-
- -

{{ planUser.user?.name }}

- - -

{{ userName }} - - ({{ 'PLAN-OVERVIEW.YOU' | translate }}) -

- -

- {{ enumUtils.toPlanUserRoleString(planUser.role) }} - - {{ 'PLAN-OVERVIEW.ROLES.ALL-SECTIONS' | translate}} - {{ getSectionNameById(planUser.sectionId) }} -

-
-
- -
-
+
+ {{ 'PLAN-OVERVIEW.PLAN-AUTHORS' | translate }}
+
+ } +
+} \ No newline at end of file diff --git a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss new file mode 100644 index 000000000..9219f11e1 --- /dev/null +++ b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.scss @@ -0,0 +1,34 @@ +.author { + display: flex; + flex-direction: row; + column-gap: 1rem; + font-size: 0.875em; + padding: 0.25rem 0.5rem; + + &:hover { + background-color: #e0e0e08c; + border-radius: 3px; + } + .author-role { + color: #a8a8a8; + } + + .author-label { + color: #212121; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + .author-icon { + min-width: 40px; + font-size: 40px; + height: auto; + color: #b7b8bb; + } + + .delete-btn:hover { + background-color: var(--primary-color); + color: #ffffff; + } +} diff --git a/frontend/src/app/ui/plan/plan-authors/plan-authors.component.ts b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.ts new file mode 100644 index 000000000..d38282c02 --- /dev/null +++ b/frontend/src/app/ui/plan/plan-authors/plan-authors.component.ts @@ -0,0 +1,58 @@ +import { CommonModule } from '@angular/common'; +import { Component, input, output } from '@angular/core'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { PlanUserRole } from '@app/core/common/enum/plan-user-role'; +import { PlanBlueprint, PlanBlueprintDefinitionSection } from '@app/core/model/plan-blueprint/plan-blueprint'; +import { PlanUser } from '@app/core/model/plan/plan'; +import { AuthService } from '@app/core/services/auth/auth.service'; +import { EnumUtils } from '@app/core/services/utilities/enum-utils.service'; +import { Guid } from '@common/types/guid'; +import { TranslateModule } from '@ngx-translate/core'; + +@Component({ + selector: 'app-plan-authors', + standalone: true, + imports: [TranslateModule, CommonModule, MatIconModule, MatButtonModule, MatTooltipModule], + templateUrl: './plan-authors.component.html', + styleUrl: './plan-authors.component.scss' +}) +export class PlanAuthorsComponent { + planUsers = input.required(); + username = input.required(); + planBlueprint = input(null); + removeUser = input(false); + + deleteAuthor = output(); + + planUserRoleEnum = PlanUserRole; + + constructor( + protected enumUtils: EnumUtils, + private authentication: AuthService, + ){ + } + + protected isUserAuthor(userId: Guid): boolean { + if (this.isAuthenticated()) { + const principalId: Guid = this.authentication.userId(); + return this.username() && userId === principalId; + } else return false; + } + + protected isAuthenticated(): boolean { + return this.authentication.currentAccountIsAuthenticated(); + } + + protected removeUserFromPlan(author: PlanUser) { + this.deleteAuthor.emit(author); + } + + getSectionNameById(sectionId: Guid): string { + if (sectionId == null || !this.planBlueprint()) return ''; + let sections: PlanBlueprintDefinitionSection[] = this.planBlueprint()?.definition?.sections?.filter((section: PlanBlueprintDefinitionSection) => sectionId === section.id); + + return sections == null ? '' : sections[0].label; + } +} diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss index 1039f28be..1b6da6617 100644 --- a/frontend/src/styles.scss +++ b/frontend/src/styles.scss @@ -473,9 +473,35 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma border: 0px; //!important } } - - } + +.mdc-fab.mdc-fab--mini.mat-mdc-mini-fab { + .mat-icon { + font-size: 1.2em; + display: flex; + justify-content: center; + align-items: center; + } + &.primary{ + background-color: var(--primary-color); + color: #ffffff; + &:hover { + background-color: var(--secondary-color); + color: #000000; + } + } + + &.secondary{ + background-color: var(--secondary-color); + + color: #000000; + &:hover { + background-color: var(--primary-color); + color: #ffffff; + } + } +} + .status-chip { border-radius: 20px; padding-left: 1em; @@ -508,4 +534,5 @@ button,.mdc-button,.mat-mdc-button, .mdc-button:has(.material-icons,mat-icon,[ma .gap-half-rem { gap: 0.5rem; -} \ No newline at end of file +} +