From 06ab45ec6787a9ff7bdaa8d158b5593205851b3c Mon Sep 17 00:00:00 2001 From: lqwert <59832601+lqwert@users.noreply.github.com> Date: Tue, 2 Aug 2022 15:45:11 +0200 Subject: [PATCH] Ba meyer master (#68) * CHANGED & ADDED * CHANGED & ADDED * CHANGED files * Added confirm dialog * Fixed author picker * Fixed merge changes * Deleted unused code * FIXED lint errors * FIXED karma erros * DELETED unused code and files * ADDED Context enum, CHANGED files * Fixed lint error * DELETED merge mistake * ADDED features * ADDED minor changes * CHANGE code clean up * CHANGE deep code suggestion * CHANGED urls * RESET routing * Fixed bugs from MERGE master * Removed dead code and fixed lint error * Fixed lint errors * Delete comment-list.component.spec.ts * cleaned up the log messages * Added candidates to languages tab * Fix linting issues * fixed katex import * Added types and fixed typo * Added Priv Management UI and Admin UI bug fix * added feature toggle for authentication * fixed broken ui spacing * fixed adding authors on create * linter fixes * added fix for role overview in admin panel * fixed adding/deleting users * user info page now shows correct role * add management tab for default author privileges * add dialog to ask if the user wants to also update all resource specific roles and privileges * change http method to match the REST guidelines * adjustment for keycloak integration + auth service bugfixes * keycloak integration changes * added link to user-credentials management in keycloak * fixed logout bug * removed feature toggles for planqkUI and disabled design models * added missing privilege toggle for issues * added missing privilege checks for add button * added privilege checks for pattern deleting ui * added privilege checks for pattern details * added missing privilege check for issue-settings and disabled pattern-views to match planqk * removed unneeded log messages * adapted environment for docker image with authentication * removed some unused code * removed unused else * added union of literals instead of privilegetype * removed manual change deteaction * changed differentiation between update and create in user-detail * removed vscode settings * split and renamed keys for local storage * fixed random string fn * added descriptive names in privilege service * added aria-label for icon buttons that do not have a descr nearby or a tooltip * removed author list change det. * used full buffer for randoms tring generation * component styling and action changes according to pr * added liter rules for banned types (i.e. String) * model changes and ui adaptions * removed spaces * changed to container to remove linebreak * fixed linter errors found by new ban-types rule * changed new services to use typed http requests * changed admin panel to allow changing roles for users without email (this is managed in external system now) * small ui component refactoring * added routerlink for back button in issue-author management * removed stoppropagation * comment changes and documentation Co-authored-by: Luca Meyer Co-authored-by: TYueksel Co-authored-by: TYueksel <44586433+TYueksel@users.noreply.github.com> Co-authored-by: Alex Co-authored-by: Philipp Wundrack --- .eslintrc.js | 2 + .vscode/launch.json | 18 - .../admin-management-detail.component.html | 42 -- .../admin-management-detail.component.scss | 9 - .../admin-management-detail.component.ts | 96 ---- .../admin-management-list.component.html | 56 --- .../admin-management-list.component.ts | 52 --- .../admin-management.module.ts | 31 +- .../privilege/privilege.component.html | 18 + .../privilege/privilege.component.scss | 3 + .../privilege/privilege.component.spec.ts} | 12 +- .../privilege/privilege.component.ts | 87 ++++ .../user-detail/user-detail.component.html | 40 ++ .../user-detail/user-detail.component.scss | 17 + .../user-detail.component.spec.ts} | 10 +- .../user/user-detail/user-detail.component.ts | 85 ++++ .../user/user-list/user-list.component.html | 50 +++ .../user-list/user-list.component.scss} | 0 .../user-list/user-list.component.spec.ts} | 10 +- .../user/user-list/user-list.component.ts | 66 +++ src/app/app-routing.module.ts | 16 +- src/app/app.component.html | 37 +- src/app/app.component.ts | 50 +-- src/app/app.module.ts | 12 +- .../_interceptor/token.interceptor.ts | 1 - .../_services/auth-guard.service.ts | 21 +- .../_services/authentication.service.ts | 187 +++++--- .../_services/privilege.service.ts | 87 ++++ .../authentication/authentication.module.ts | 4 +- .../author-list/author-list.component.html | 21 + .../author-list/author-list.component.scss | 3 + .../author-list.component.spec.ts} | 0 .../author-list/author-list.component.ts | 61 +++ .../author-management.module.ts | 0 ...candidate-management-detail.component.html | 96 ++-- ...candidate-management-detail.component.scss | 42 +- .../candidate-management-detail.component.ts | 414 +++++++++++++++--- .../candidate-management-list.component.html | 74 ++-- .../candidate-management-list.component.scss | 42 +- .../candidate-management-list.component.ts | 32 +- .../author-management/_models/author.enum.ts | 5 + .../_models/author.model.request.ts | 10 + .../author-management/_models/author.model.ts | 13 + .../_services/author-management.service.ts | 139 ++++++ src/app/core/author-management/index.ts | 7 + .../_models/candidate.model.ts | 24 +- .../_services/candidate-management.service.ts | 193 ++++++-- .../_store/candidate-management.store.ts | 26 +- src/app/core/candidate-management/index.ts | 1 - .../action-button-bar.component.ts | 29 +- .../author-picker.component.html | 20 + .../author-picker.component.scss | 19 + .../author-picker.component.spec.ts} | 12 +- .../author-picker/author-picker.component.ts | 71 +++ .../candidate-renderer.component.html | 23 + .../candidate-renderer.component.scss | 41 ++ .../candidate-renderer.component.ts | 40 ++ .../cardrenderer/card-renderer.component.html | 10 +- .../cardrenderer/card-renderer.component.ts | 8 +- .../comment-list-item.component.html | 42 ++ .../comment-list-item.component.scss | 37 ++ .../comment-list-item.component.spec.ts | 22 + .../comment-list-item.component.ts | 60 +++ .../comment-list/comment-list.component.html | 54 ++- .../comment-list/comment-list.component.scss | 61 +-- .../comment-list.component.spec.ts | 31 -- .../comment-list/comment-list.component.ts | 82 ++-- .../confirm-dialog.component.html | 8 + .../confirm-dialog.component.scss | 10 + .../confirm-dialog.component.spec.ts | 22 + .../confirm-dialog.component.ts | 27 ++ .../create-pattern-relation.component.html | 4 +- .../delete-confirmation-dialog.component.html | 2 +- .../evidence-dialog.component.html | 38 ++ .../evidence-dialog.component.scss | 14 + .../evidence-dialog.component.spec.ts | 25 ++ .../evidence-dialog.component.ts | 61 +++ .../evidence-list.component.html | 22 + .../evidence-list.component.scss | 30 ++ .../evidence-list.component.spec.ts | 25 ++ .../evidence-list/evidence-list.component.ts | 61 +++ .../comment-dialog.component.html | 2 +- ...own-pattern-section-content.component.html | 4 +- .../md-editor/md-editor.component.html | 6 +- .../navigate-back.component.html | 2 +- .../pattern-language-picker.component.html | 8 + .../pattern-language-picker.component.scss | 3 + .../pattern-language-picker.component.spec.ts | 25 ++ .../pattern-language-picker.component.ts | 94 ++++ .../rating-multiple.component.html | 12 + .../rating-multiple.component.scss | 25 ++ .../rating-multiple.component.spec.ts | 25 ++ .../rating-multiple.component.ts | 45 ++ .../component/rating/rating.component.html | 18 +- .../component/rating/rating.component.scss | 9 +- .../component/rating/rating.component.spec.ts | 6 +- .../core/component/rating/rating.component.ts | 56 ++- src/app/core/core.module.ts | 44 +- .../default-pattern-renderer.component.html | 7 +- .../default-pattern-renderer.component.ts | 23 +- .../default-pl-renderer.component.html | 24 +- .../default-pl-renderer.component.ts | 23 +- ...las-ui-repository-configuration.service.ts | 11 +- .../issue-management/_models/issue.model.ts | 24 +- .../_services/issue-management.service.ts | 183 ++++++-- .../_store/issue-management-store.ts | 25 +- src/app/core/issue-management/index.ts | 1 - .../model/hal/pattern-section-schema.model.ts | 20 +- .../model/pattern-language-schema.model.ts | 17 + src/app/core/service/image.service.ts | 2 +- .../core/service/pattern-language.service.ts | 10 +- src/app/core/service/pattern-view.service.ts | 2 +- src/app/core/service/pattern.service.ts | 2 +- .../core/shared/_enums/rating-type.enum.ts | 5 + .../core/shared/_models/autor-event.model.ts | 11 + src/app/core/shared/_models/comment.model.ts | 15 + src/app/core/shared/_models/evidence.model.ts | 17 + .../core/shared/_models/rating-event.model.ts | 11 + .../shared/_models/rating.model.request.ts | 11 + src/app/core/shared/_models/rating.model.ts | 9 + src/app/core/shared/index.ts | 9 + .../user-management/_models/privilege.enum.ts | 59 +++ .../_models/privilege.model.ts | 4 + .../core/user-management/_models/role.enum.ts | 7 + .../_models/role.model.request.ts | 7 + .../user-management/_models/role.model.ts | 13 +- .../_models/user-info.model.ts | 6 + .../user-management/_models/user.model.ts | 76 +++- .../user-management/_services/user.service.ts | 177 +++++++- src/app/core/user-management/index.ts | 6 +- src/app/core/util/list-response.ts | 21 + .../design-model-management.component.html | 4 +- .../service/design-model.service.ts | 2 +- .../developer-management-list.component.html | 2 +- ...eveloper-management-list.component.spec.ts | 6 +- .../developer-management-list.component.ts | 7 +- .../issue-create-dialog.component.html | 15 - .../issue-create-dialog.component.scss | 4 - .../issue-create-dialog.component.ts | 26 -- .../issue-management-detail.component.html | 116 ++--- .../issue-management-detail.component.scss | 57 +-- .../issue-management-detail.component.ts | 294 ++++++++++--- .../issue-management-list.component.html | 58 ++- .../issue-management-list.component.scss | 52 ++- .../issue-management-list.component.ts | 102 +++-- .../issue-management.module.ts | 48 +- .../create-pattern.component.html | 2 +- ...pattern-language-management.component.html | 7 +- .../pattern-language-management.component.ts | 4 +- .../pattern-view-management.component.html | 7 +- .../user-info/user-info.component.html | 174 ++++++++ .../user-info/user-info.component.scss | 45 ++ .../user-info/user-info.component.spec.ts | 25 ++ .../user-info/user-info.component.ts | 102 +++++ .../user-management-list.component.html | 1 - .../user-management-list.component.ts | 24 - .../user-management/user-management.module.ts | 24 +- src/assets/env.js | 1 + src/assets/env.js.template | 1 + .../settings_features/default_features.json | 5 +- src/environments/environment.prod.ts | 23 +- src/environments/environment.ts | 30 +- src/styles.scss | 63 +++ yarn.lock | 17 +- 164 files changed, 4558 insertions(+), 1345 deletions(-) delete mode 100644 .vscode/launch.json delete mode 100644 src/app/admin-management/admin-management-detail/admin-management-detail.component.html delete mode 100644 src/app/admin-management/admin-management-detail/admin-management-detail.component.scss delete mode 100644 src/app/admin-management/admin-management-detail/admin-management-detail.component.ts delete mode 100644 src/app/admin-management/admin-management-list/admin-management-list.component.html delete mode 100644 src/app/admin-management/admin-management-list/admin-management-list.component.ts create mode 100644 src/app/admin-management/privilege/privilege.component.html create mode 100644 src/app/admin-management/privilege/privilege.component.scss rename src/app/{issue-management/issue-create-dialog/issue-create-dialog.component.spec.ts => admin-management/privilege/privilege.component.spec.ts} (51%) create mode 100644 src/app/admin-management/privilege/privilege.component.ts create mode 100644 src/app/admin-management/user/user-detail/user-detail.component.html create mode 100644 src/app/admin-management/user/user-detail/user-detail.component.scss rename src/app/admin-management/{admin-management-detail/admin-management-detail.component.spec.ts => user/user-detail/user-detail.component.spec.ts} (56%) create mode 100644 src/app/admin-management/user/user-detail/user-detail.component.ts create mode 100644 src/app/admin-management/user/user-list/user-list.component.html rename src/app/admin-management/{admin-management-list/admin-management-list.component.scss => user/user-list/user-list.component.scss} (100%) rename src/app/admin-management/{admin-management-list/admin-management-list.component.spec.ts => user/user-list/user-list.component.spec.ts} (57%) create mode 100644 src/app/admin-management/user/user-list/user-list.component.ts create mode 100644 src/app/authentication/_services/privilege.service.ts create mode 100644 src/app/author-management/author-list/author-list.component.html create mode 100644 src/app/author-management/author-list/author-list.component.scss rename src/app/{user-management/user-management-list/user-management-list.component.scss => author-management/author-list/author-list.component.spec.ts} (100%) create mode 100644 src/app/author-management/author-list/author-list.component.ts create mode 100644 src/app/author-management/author-management.module.ts create mode 100644 src/app/core/author-management/_models/author.enum.ts create mode 100644 src/app/core/author-management/_models/author.model.request.ts create mode 100644 src/app/core/author-management/_models/author.model.ts create mode 100644 src/app/core/author-management/_services/author-management.service.ts create mode 100644 src/app/core/author-management/index.ts create mode 100644 src/app/core/component/author-picker/author-picker.component.html create mode 100644 src/app/core/component/author-picker/author-picker.component.scss rename src/app/{user-management/user-management-list/user-management-list.component.spec.ts => core/component/author-picker/author-picker.component.spec.ts} (51%) create mode 100644 src/app/core/component/author-picker/author-picker.component.ts create mode 100644 src/app/core/component/candidate-renderer/candidate-renderer.component.html create mode 100644 src/app/core/component/candidate-renderer/candidate-renderer.component.scss create mode 100644 src/app/core/component/candidate-renderer/candidate-renderer.component.ts create mode 100644 src/app/core/component/comment-list-item/comment-list-item.component.html create mode 100644 src/app/core/component/comment-list-item/comment-list-item.component.scss create mode 100644 src/app/core/component/comment-list-item/comment-list-item.component.spec.ts create mode 100644 src/app/core/component/comment-list-item/comment-list-item.component.ts delete mode 100644 src/app/core/component/comment-list/comment-list.component.spec.ts create mode 100644 src/app/core/component/confirm-dialog/confirm-dialog.component.html create mode 100644 src/app/core/component/confirm-dialog/confirm-dialog.component.scss create mode 100644 src/app/core/component/confirm-dialog/confirm-dialog.component.spec.ts create mode 100644 src/app/core/component/confirm-dialog/confirm-dialog.component.ts create mode 100644 src/app/core/component/evidence-dialog/evidence-dialog.component.html create mode 100644 src/app/core/component/evidence-dialog/evidence-dialog.component.scss create mode 100644 src/app/core/component/evidence-dialog/evidence-dialog.component.spec.ts create mode 100644 src/app/core/component/evidence-dialog/evidence-dialog.component.ts create mode 100644 src/app/core/component/evidence-list/evidence-list.component.html create mode 100644 src/app/core/component/evidence-list/evidence-list.component.scss create mode 100644 src/app/core/component/evidence-list/evidence-list.component.spec.ts create mode 100644 src/app/core/component/evidence-list/evidence-list.component.ts create mode 100644 src/app/core/component/pattern-language-picker/pattern-language-picker.component.html create mode 100644 src/app/core/component/pattern-language-picker/pattern-language-picker.component.scss create mode 100644 src/app/core/component/pattern-language-picker/pattern-language-picker.component.spec.ts create mode 100644 src/app/core/component/pattern-language-picker/pattern-language-picker.component.ts create mode 100644 src/app/core/component/rating-multiple/rating-multiple.component.html create mode 100644 src/app/core/component/rating-multiple/rating-multiple.component.scss create mode 100644 src/app/core/component/rating-multiple/rating-multiple.component.spec.ts create mode 100644 src/app/core/component/rating-multiple/rating-multiple.component.ts create mode 100644 src/app/core/model/pattern-language-schema.model.ts create mode 100644 src/app/core/shared/_enums/rating-type.enum.ts create mode 100644 src/app/core/shared/_models/autor-event.model.ts create mode 100644 src/app/core/shared/_models/comment.model.ts create mode 100644 src/app/core/shared/_models/evidence.model.ts create mode 100644 src/app/core/shared/_models/rating-event.model.ts create mode 100644 src/app/core/shared/_models/rating.model.request.ts create mode 100644 src/app/core/shared/_models/rating.model.ts create mode 100644 src/app/core/shared/index.ts create mode 100644 src/app/core/user-management/_models/privilege.enum.ts create mode 100644 src/app/core/user-management/_models/privilege.model.ts create mode 100644 src/app/core/user-management/_models/role.enum.ts create mode 100644 src/app/core/user-management/_models/role.model.request.ts create mode 100644 src/app/core/user-management/_models/user-info.model.ts create mode 100644 src/app/core/util/list-response.ts delete mode 100644 src/app/issue-management/issue-create-dialog/issue-create-dialog.component.html delete mode 100644 src/app/issue-management/issue-create-dialog/issue-create-dialog.component.scss delete mode 100644 src/app/issue-management/issue-create-dialog/issue-create-dialog.component.ts create mode 100644 src/app/user-management/user-info/user-info.component.html create mode 100644 src/app/user-management/user-info/user-info.component.scss create mode 100644 src/app/user-management/user-info/user-info.component.spec.ts create mode 100644 src/app/user-management/user-info/user-info.component.ts delete mode 100644 src/app/user-management/user-management-list/user-management-list.component.html delete mode 100644 src/app/user-management/user-management-list/user-management-list.component.ts diff --git a/.eslintrc.js b/.eslintrc.js index 726e4de3..c318b07c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -18,6 +18,8 @@ module.exports = { // "extends": "tslint:recommended", rules: { + "@typescript-eslint/ban-types": ['error'], + // https://eslint.org/docs/rules/indent 'indent': ['error', 2, { "FunctionDeclaration": {"parameters": "first"}, diff --git a/.vscode/launch.json b/.vscode/launch.json deleted file mode 100644 index 4ea674a5..00000000 --- a/.vscode/launch.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - // Use IntelliSense to learn about possible attributes. - // Hover to view descriptions of existing attributes. - // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 - "version": "0.2.0", - "configurations": [ - { - "type": "chrome", - "request": "launch", - "name": "Launch Chrome against localhost", - "url": "http://localhost:4200", - "runtimeArgs": [ - "--disable-web-security" - ], - "webRoot": "${workspaceFolder}" - } - ] -} \ No newline at end of file diff --git a/src/app/admin-management/admin-management-detail/admin-management-detail.component.html b/src/app/admin-management/admin-management-detail/admin-management-detail.component.html deleted file mode 100644 index 720ab7da..00000000 --- a/src/app/admin-management/admin-management-detail/admin-management-detail.component.html +++ /dev/null @@ -1,42 +0,0 @@ - -
- - - - Username is required - A custom name for the user - - - - - E-Mail is required - e-mail address for the user to later login - - - - - - Please enter your new password - - - - - - - - Passwords do not match - - - - - {{role}} - - - - - - - - -
- diff --git a/src/app/admin-management/admin-management-detail/admin-management-detail.component.scss b/src/app/admin-management/admin-management-detail/admin-management-detail.component.scss deleted file mode 100644 index b9484520..00000000 --- a/src/app/admin-management/admin-management-detail/admin-management-detail.component.scss +++ /dev/null @@ -1,9 +0,0 @@ -.container { - // padding-top: 16px; - border-style: groove; - width: 100%; - display: flex; /* or inline-flex */ - flex-direction: column; - justify-content: center; - align-items: stretch; -} diff --git a/src/app/admin-management/admin-management-detail/admin-management-detail.component.ts b/src/app/admin-management/admin-management-detail/admin-management-detail.component.ts deleted file mode 100644 index e1a4ccd3..00000000 --- a/src/app/admin-management/admin-management-detail/admin-management-detail.component.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { PAUser, UserRole, UserService, UserStore } from 'src/app/core/user-management'; - -@Component({ - selector: 'pp-admin-management-detail', - templateUrl: './admin-management-detail.component.html', - styleUrls: ['./admin-management-detail.component.scss'] -}) -export class AdminManagementDetailComponent implements OnInit { - - user: PAUser; - userForm: FormGroup; - - roles: UserRole[] = [UserRole.MEMBER, UserRole.AUTHOR, UserRole.EXPERT, UserRole.LIBRARIAN, UserRole.ADMIN]; - - constructor( - private activatedRoute: ActivatedRoute, - private router: Router, - private userFormBuilder: FormBuilder, - private userStore: UserStore, - private userService: UserService, - ) { - } - - ngOnInit(): void { - - this.userStore.user.subscribe(user => { - if (user) { - this.user = user; - } else { - this.user = {} as PAUser; - this.user.roles = [UserRole.MEMBER]; - } - this.createForm() - }) - } - - createForm() { - this.userForm = this.userFormBuilder.group({ - name: [this.user.name, Validators.required], - email: [this.user.email, [Validators.required, Validators.email]], - userRoles: [this.user.roles], - password: ['', Validators.required], - confirmPassword: [''] - }, - { - validator: ValidatePassword - }); - } - - checkPasswords(control: AbstractControl) { - console.log(control); - let pass = this.userForm.get('password').value - let confirmPass = this.userForm.get('confirmPassword').value; - - return pass === confirmPass ? null : { incorrect: true } - } - - onSubmit() { - console.log('submit'); - this.user.name = this.userForm.get('name').value; - this.user.email = this.userForm.get('email').value; - this.user.roles = this.userForm.get('userRoles').value; - this.user.password = this.userForm.get('password').value; - if (this.user.id) { - this.userService.updateUser(this.user).subscribe(result => { - console.log('updateUser: ', result); - }) - } else { - this.userService.createUser(this.user).subscribe(result => { - console.log(result); - }) - } - } - - reset() { - console.log('resetForm'); - this.createForm() - } - - exit() { - this.router.navigateByUrl('admin'); - } - -} - -export function ValidatePassword(formGroup: FormGroup) { - console.log(formGroup); - let pass = formGroup.get('password').value - let confirmPass = formGroup.get('confirmPassword').value; - pass === confirmPass ? formGroup.get('confirmPassword').setErrors(null) : formGroup.get('confirmPassword').setErrors({ incorrect: true }); - return true; -} - diff --git a/src/app/admin-management/admin-management-list/admin-management-list.component.html b/src/app/admin-management/admin-management-list/admin-management-list.component.html deleted file mode 100644 index 05292ce5..00000000 --- a/src/app/admin-management/admin-management-list/admin-management-list.component.html +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ID {{element.id}} Name {{element.name}} E-Mail {{element.email}} Roles {{element.roles}} Actions -   -   - - -
diff --git a/src/app/admin-management/admin-management-list/admin-management-list.component.ts b/src/app/admin-management/admin-management-list/admin-management-list.component.ts deleted file mode 100644 index de4bd0ee..00000000 --- a/src/app/admin-management/admin-management-list/admin-management-list.component.ts +++ /dev/null @@ -1,52 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { PAUser, UserService, UserStore } from 'src/app/core/user-management'; - -@Component({ - selector: 'pp-admin-management-list', - templateUrl: './admin-management-list.component.html', - styleUrls: ['./admin-management-list.component.scss'] -}) -export class AdminManagementListComponent implements OnInit { - - displayedColumns: string[] = ['id', 'name', 'email', 'roles', 'actions']; - dataSource: PAUser[]; - - constructor( - private userService: UserService, - private activatedRoute: ActivatedRoute, - private router: Router, - private adminStore: UserStore, - ) { - } - - ngOnInit(): void { - this.getAll() - } - - getAll() { - this.userService.getAllUsers().subscribe(result => { - console.log(result); - this.dataSource = result; - }) - } - - newUser() { - console.log('New user'); - this.router.navigate(['admin/create']); - } - - editUser(user: PAUser) { - console.log('edit user: ', user); - this.adminStore.addUser(user); - this.router.navigate(['admin/edit', user.id]); - } - - deleteUser(user: PAUser) { - console.log('delete user: ', user); - this.userService.deleteUser(user).subscribe(result => { - console.log(result); - }) - } - -} diff --git a/src/app/admin-management/admin-management.module.ts b/src/app/admin-management/admin-management.module.ts index 03f6a5fd..fc86cb3c 100644 --- a/src/app/admin-management/admin-management.module.ts +++ b/src/app/admin-management/admin-management.module.ts @@ -9,25 +9,31 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { MatButtonToggleModule } from '@angular/material/button-toggle'; -import { AdminManagementListComponent } from './admin-management-list/admin-management-list.component'; -import { AdminManagementDetailComponent } from './admin-management-detail/admin-management-detail.component'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatTabsModule } from '@angular/material/tabs'; +/** Component */ +import { UserListComponent } from './user/user-list/user-list.component'; +import { UserDetailComponent } from './user/user-detail/user-detail.component'; +import { PrivilegeComponent } from './privilege/privilege.component'; +import { MatCheckboxModule } from '@angular/material/checkbox'; export const ADMIN_MANAGEMENT_ROUTES = [ { path: '', children: [ - { path: '', component: AdminManagementListComponent }, - { path: 'edit/:id', component: AdminManagementDetailComponent }, - { path: 'create', component: AdminManagementDetailComponent } + { path: '', component: UserListComponent }, + { path: 'edit/:id', component: UserDetailComponent }, + { path: 'create', component: UserDetailComponent } ] } ]; @NgModule({ declarations: [ - AdminManagementListComponent, - AdminManagementDetailComponent, - + UserListComponent, + UserDetailComponent, + PrivilegeComponent, + ], imports: [ CommonModule, @@ -40,11 +46,18 @@ export const ADMIN_MANAGEMENT_ROUTES = [ MatFormFieldModule, MatInputModule, MatButtonToggleModule, + MatRadioModule, + MatTabsModule, + MatCheckboxModule, // Form FormsModule, ReactiveFormsModule ], - providers: [] + providers: [ + ], + entryComponents: [ + UserDetailComponent + ] }) export class AdminManagementModule { } diff --git a/src/app/admin-management/privilege/privilege.component.html b/src/app/admin-management/privilege/privilege.component.html new file mode 100644 index 00000000..b4abb710 --- /dev/null +++ b/src/app/admin-management/privilege/privilege.component.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + +
PRIVILEGE {{element.name}} {{role.name}} + + +
diff --git a/src/app/admin-management/privilege/privilege.component.scss b/src/app/admin-management/privilege/privilege.component.scss new file mode 100644 index 00000000..1922e7ff --- /dev/null +++ b/src/app/admin-management/privilege/privilege.component.scss @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.spec.ts b/src/app/admin-management/privilege/privilege.component.spec.ts similarity index 51% rename from src/app/issue-management/issue-create-dialog/issue-create-dialog.component.spec.ts rename to src/app/admin-management/privilege/privilege.component.spec.ts index 5671f20e..3b0a4971 100644 --- a/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.spec.ts +++ b/src/app/admin-management/privilege/privilege.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { IssueCreateDialogComponent } from './issue-create-dialog.component'; +import { PrivilegeComponent } from './privilege.component'; -describe('IssueCreateDialogComponent', () => { - let component: IssueCreateDialogComponent; - let fixture: ComponentFixture; +describe('PrivilegeComponent', () => { + let component: PrivilegeComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [IssueCreateDialogComponent] + declarations: [ PrivilegeComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(IssueCreateDialogComponent); + fixture = TestBed.createComponent(PrivilegeComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/admin-management/privilege/privilege.component.ts b/src/app/admin-management/privilege/privilege.component.ts new file mode 100644 index 00000000..21a12c54 --- /dev/null +++ b/src/app/admin-management/privilege/privilege.component.ts @@ -0,0 +1,87 @@ +import { Component, OnInit, ChangeDetectorRef, Input } from '@angular/core'; +import { RoleModel, UserService, PrivilegeModel, RoleModelRequest } from 'src/app/core/user-management'; +import { MatCheckboxChange } from '@angular/material/checkbox'; +import { MatDialog } from '@angular/material/dialog'; +import { ConfirmDialogComponent } from '../../core/component/confirm-dialog/confirm-dialog.component'; + +export type PrivilegeType = 'platform' | 'author'; + +@Component({ + selector: 'pp-privilege', + templateUrl: './privilege.component.html', + styleUrls: ['./privilege.component.scss'], +}) +export class PrivilegeComponent implements OnInit { + + @Input() privilegeType: PrivilegeType; + + displayedColumns: string[] = ['PRIVILEGE']; + dataSource: PrivilegeModel[] = []; + roles: RoleModel[]; + + + constructor( + private userService: UserService, + private ref: ChangeDetectorRef, + private matDialog: MatDialog + ) { } + + ngOnInit(): void { + if (this.privilegeType == 'platform') { + this.userService.getAllPlatformPrivileges().subscribe(result => { + this.dataSource = result; + }); + this.userService.getAllPlatformRoles().subscribe(result => { + this.roles = result; + this.roles.forEach(role => this.displayedColumns.push(role.name)); + }); + } else if (this.privilegeType == 'author') { + this.userService.getAllDefaultAuthorPrivileges().subscribe(result => { + this.dataSource = result; + }); + this.userService.getAllAuthorRoles().subscribe(result => { + this.roles = result; + this.roles.forEach(role => this.displayedColumns.push(role.name)); + }); + } + } + + updateLocalCopyOfRoles(role: RoleModel, updatedRole?: RoleModel) { + if (updatedRole) { + const index = this.roles.indexOf(role); + if (index > -1) this.roles.splice(index, 1, updatedRole); + } + } + + change(checkbox: MatCheckboxChange, privilege: PrivilegeModel, role: RoleModel) { + if (this.privilegeType == 'platform') { + this.userService.updateUserRole(role, privilege, new RoleModelRequest(checkbox.checked)).subscribe(result => { + this.updateLocalCopyOfRoles(role, result) + }) + } else if (this.privilegeType == 'author') { + this.matDialog.open(ConfirmDialogComponent, { + data: { + title: 'Update existing roles?', + text: 'Do you also want to update all existing resource specific roles and privileges for ' + role.name + ' and ' + privilege.name + '?', + noButton: true + } + }).afterClosed().subscribe(result => { + if (result) { + // "Yes" button was clicked: update existing privileges + this.userService.updateUserRole(role, privilege, new RoleModelRequest(checkbox.checked)).subscribe(result => { + this.updateLocalCopyOfRoles(role, result) + }) + this.userService.updateAllResourceSpecificUserRoles(role, privilege, new RoleModelRequest(checkbox.checked)).subscribe(); + } else if (result == null) { + // "Cancel" button was clicked: revert changes to updated privilege + checkbox.source.checked = !checkbox.checked; // revert the changed checked state + } + // Otherwise result == false - "No" button was clicked: do not update existing privileges but save change + }); + } + } + + trackByFn(index, item) { + return item.id; // or item.id + } +} diff --git a/src/app/admin-management/user/user-detail/user-detail.component.html b/src/app/admin-management/user/user-detail/user-detail.component.html new file mode 100644 index 00000000..747aed87 --- /dev/null +++ b/src/app/admin-management/user/user-detail/user-detail.component.html @@ -0,0 +1,40 @@ +
+ + + + Username is required + A custom name for the user + + + + + E-Mail is required + e-mail address for the user to later login + + + + + + Please enter your new password + + + + + + + + Passwords do not match + + + + + + {{role}} + +
+ + + + +
+
diff --git a/src/app/admin-management/user/user-detail/user-detail.component.scss b/src/app/admin-management/user/user-detail/user-detail.component.scss new file mode 100644 index 00000000..c8b1cdd4 --- /dev/null +++ b/src/app/admin-management/user/user-detail/user-detail.component.scss @@ -0,0 +1,17 @@ +.container { + display: flex; /* or inline-flex */ + flex-direction: column; + justify-content: center; + align-items: stretch; +} + +.buttons { + margin-top: 16px; + display: flex; + flex-direction: row; + justify-content: flex-start; +} + +button { + margin-right: 16px; +} diff --git a/src/app/admin-management/admin-management-detail/admin-management-detail.component.spec.ts b/src/app/admin-management/user/user-detail/user-detail.component.spec.ts similarity index 56% rename from src/app/admin-management/admin-management-detail/admin-management-detail.component.spec.ts rename to src/app/admin-management/user/user-detail/user-detail.component.spec.ts index bacb8b03..d78a36bf 100644 --- a/src/app/admin-management/admin-management-detail/admin-management-detail.component.spec.ts +++ b/src/app/admin-management/user/user-detail/user-detail.component.spec.ts @@ -1,19 +1,19 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { AdminManagementDetailComponent } from './admin-management-detail.component'; +import { UserDetailComponent } from './user-detail.component'; describe('AdminManagementDetailComponent', () => { - let component: AdminManagementDetailComponent; - let fixture: ComponentFixture; + let component: UserDetailComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [AdminManagementDetailComponent] + declarations: [ UserDetailComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(AdminManagementDetailComponent); + fixture = TestBed.createComponent(UserDetailComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/admin-management/user/user-detail/user-detail.component.ts b/src/app/admin-management/user/user-detail/user-detail.component.ts new file mode 100644 index 00000000..6fb3c7df --- /dev/null +++ b/src/app/admin-management/user/user-detail/user-detail.component.ts @@ -0,0 +1,85 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { FormGroup, FormBuilder, Validators, FormControl, FormGroupDirective, NgForm, AbstractControl } from '@angular/forms'; +import { UserStore, UserService, UserRole, PAUser } from 'src/app/core/user-management'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { Observable } from 'rxjs'; + +@Component({ + selector: 'pp-user-detail', + templateUrl: './user-detail.component.html', + styleUrls: ['./user-detail.component.scss'] +}) +export class UserDetailComponent implements OnInit { + + user: PAUser; + userForm: FormGroup; + + roles: UserRole[] = [UserRole.MEMBER, UserRole.EXPERT, UserRole.LIBRARIAN, UserRole.ADMIN]; + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: PAUser, + private activatedRoute: ActivatedRoute, + private router: Router, + private userFormBuilder: FormBuilder, + private userStore: UserStore, + private userService: UserService, + ) { + } + + ngOnInit(): void { + + this.user = this.data; + this.createForm() + + } + + createForm() { + this.userForm = this.userFormBuilder.group({ + name: [this.user.name, Validators.required], + email: [this.user.email, [Validators.email]], + userRole: [this.user.role], + password: [null], + confirmPassword: [null] + }, + { + validator: ValidatePassword + }); + } + + onSubmit() { + this.user.name = this.userForm.get('name').value; + this.user.email = this.userForm.get('email').value; + this.user.role = this.userForm.get('userRole').value; + this.user.password = this.userForm.get('password').value; + + let result: Observable; + + if (this.user.id) { + result = this.userService.updateUser(this.user); + } else { + result = this.userService.createUser(this.user); + } + result.subscribe(result => { + this.dialogRef.close(true); + }); + } + + reset() { + this.createForm() + } + + exit() { + this.dialogRef.close(); + } + +} + +export function ValidatePassword(formGroup: FormGroup) { + let pass = formGroup.get('password').value + let confirmPass = formGroup.get('confirmPassword').value; + pass === confirmPass ? formGroup.get('confirmPassword').setErrors(null) : formGroup.get('confirmPassword').setErrors({ incorrect: true }); + return true; +} + diff --git a/src/app/admin-management/user/user-list/user-list.component.html b/src/app/admin-management/user/user-list/user-list.component.html new file mode 100644 index 00000000..abb0d495 --- /dev/null +++ b/src/app/admin-management/user/user-list/user-list.component.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ID {{element.id}} Name {{element.name}} E-Mail {{element.email}} Roles {{element.role}} Actions + + +
+ + + + + + + + diff --git a/src/app/admin-management/admin-management-list/admin-management-list.component.scss b/src/app/admin-management/user/user-list/user-list.component.scss similarity index 100% rename from src/app/admin-management/admin-management-list/admin-management-list.component.scss rename to src/app/admin-management/user/user-list/user-list.component.scss diff --git a/src/app/admin-management/admin-management-list/admin-management-list.component.spec.ts b/src/app/admin-management/user/user-list/user-list.component.spec.ts similarity index 57% rename from src/app/admin-management/admin-management-list/admin-management-list.component.spec.ts rename to src/app/admin-management/user/user-list/user-list.component.spec.ts index 0077fa9e..0768aeba 100644 --- a/src/app/admin-management/admin-management-list/admin-management-list.component.spec.ts +++ b/src/app/admin-management/user/user-list/user-list.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { AdminManagementListComponent } from './admin-management-list.component'; +import { UserListComponent } from './user-list.component'; describe('AdminManagementListComponent', () => { - let component: AdminManagementListComponent; - let fixture: ComponentFixture; + let component: UserListComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [AdminManagementListComponent] + declarations: [ UserListComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(AdminManagementListComponent); + fixture = TestBed.createComponent(UserListComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/admin-management/user/user-list/user-list.component.ts b/src/app/admin-management/user/user-list/user-list.component.ts new file mode 100644 index 00000000..bba46f1e --- /dev/null +++ b/src/app/admin-management/user/user-list/user-list.component.ts @@ -0,0 +1,66 @@ +import { Component, OnInit } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; +import { ActivatedRoute, Router } from '@angular/router'; +import { UserService, PAUser, UserStore, UserRole } from 'src/app/core/user-management'; +import { UserDetailComponent } from '../user-detail/user-detail.component'; +import { PrivilegeType } from '../../privilege/privilege.component'; + +@Component({ + selector: 'pp-user-list', + templateUrl: './user-list.component.html', + styleUrls: ['./user-list.component.scss'] +}) +export class UserListComponent implements OnInit { + + displayedColumns: string[] = ['id', 'name', 'email', 'role', 'actions']; + dataSource: PAUser[]; + + constructor( + private userService: UserService, + private activatedRoute: ActivatedRoute, + private router: Router, + private adminStore: UserStore, + public dialog: MatDialog, + ) { } + + ngOnInit(): void { + this.getAll() + } + + getAll() { + this.userService.getAllUsers().subscribe(result => { + this.dataSource = result; + }) + } + + newUser() { + let confirmDialog = this.dialog.open(UserDetailComponent, { + data: new PAUser(UserRole.MEMBER) + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this.getAll(); + } + }); + } + + editUser(user: PAUser) { + let confirmDialog = this.dialog.open(UserDetailComponent, { + data: user + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this.getAll(); + } + }); + } + + deleteUser(user: PAUser) { + this.userService.deleteUser(user).subscribe(result => { + this.getAll(); + }) + } + +} diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 8bce6c51..3d1ef424 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -6,6 +6,8 @@ import { PageNotFoundComponent } from './core/component/page-not-found/page-not- import { AuthGuardService as AuthGuard } from './authentication/_services/auth-guard.service'; import { PatternLanguageManagementResolverService } from './pattern-language-management/pattern-language-management/pattern-language-management-resolver.service'; // eslint-disable-line max-len import { UserRole } from './core/user-management'; +import { PrintHook } from '@angular/flex-layout'; +import { Privilege } from './core/user-management/_models/privilege.enum'; import { globals } from './globals'; /* * Copyright (c) 2018 University of Stuttgart. @@ -51,22 +53,16 @@ const routes: Routes = [ loadChildren: () => import('./issue-management/issue-management.module').then(m => m.IssueManagementModule), }, { - path: 'user', + path: 'user-info', loadChildren: () => import('./user-management/user-management.module').then(m => m.UserManagementModule), canActivate: [AuthGuard], - data: { role: UserRole.MEMBER } + data: { privilege: Privilege.USER_READ } }, { path: 'admin', loadChildren: () => import('./admin-management/admin-management.module').then(m => m.AdminManagementModule), canActivate: [AuthGuard], - data: { role: UserRole.ADMIN } - }, - { - path: 'developer', - loadChildren: () => import('./developer-management/developer-management.module').then(m => m.DeveloperManagementModule), - canActivate: [AuthGuard], - data: { role: UserRole.ADMIN } + data: { privilege: Privilege.USER_READ_ALL } }, { path: 'oauth-callback', @@ -75,7 +71,7 @@ const routes: Routes = [ { path: '**', component: PageNotFoundComponent - } + }, ]; @NgModule({ diff --git a/src/app/app.component.html b/src/app/app.component.html index b216f075..e34d1e57 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -12,7 +12,6 @@ ~ SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 --> - @@ -25,19 +24,19 @@ {{welcomeText}} Back to the PlanQK platform - - - - -
- +
+ + + + + + + + +
@@ -64,18 +63,6 @@ routerLinkActive #rla5="routerLinkActive" [active]="rla5.isActive"> Issue - - Personal - - - Admin - - - Developer - diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 9311fd76..406e29d5 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -12,9 +12,9 @@ * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 */ -import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit } from '@angular/core'; import { AuthenticationService } from './authentication/_services/authentication.service'; -import { PAUser } from './core/user-management'; +import { PrivilegeService } from './authentication/_services/privilege.service'; import { globals } from './globals'; import { PatternAtlasUiRepositoryConfigurationService, UiFeatures @@ -28,42 +28,34 @@ import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: 'pp-root', templateUrl: './app.component.html', - styleUrls: ['./app.component.scss'] + styleUrls: ['./app.component.scss'], }) export class AppComponent implements OnInit { + userName: string; + loggedIn = false; + readonly UiFeatures = UiFeatures; loginButton = 'Login'; welcomeText = ''; - user: PAUser; readonly pathConstants = globals.pathConstants; loading = true; planqkUi = false; constructor(public auth: AuthenticationService, + public p: PrivilegeService, private toasterService: ToasterService, private configService: PatternAtlasUiRepositoryConfigurationService, private dialog: MatDialog, private cdr: ChangeDetectorRef, private router: Router, private route: ActivatedRoute) { - this.auth.userSubject.subscribe(_user => { - if (_user) { - console.log('User is Logged in: ', _user); - this.user = _user; - this.loginButton = 'Logout'; - this.welcomeText = `Welcome ${_user.name}`; - } else { - console.log('No user logged in: ', _user); - this.user = null; - this.loginButton = 'Login'; - this.welcomeText = ''; - } - }); - + } + login() { + this.auth.login(); } - loginOAuth() { - this.user ? this.auth.logout() : this.auth.login(); + logout() { + this.auth.logout(); } ngOnInit(): void { @@ -77,17 +69,21 @@ export class AppComponent implements OnInit { this.planqkUi = true; if(error.status === globals.statusCodeNotFound){ this.configService.getDefaultConfiguration(); - console.log('default values applied') } - else if (this.configService.configuration.features[UiFeatures.SHOW_SETTINGS]){ - this.toasterService.popAsync( - 'error', 'Error while loading config from config server, using default values instead' + error.message).subscribe( - () => console.log('default values applied') - ) + else if (this.configService.configuration.features[UiFeatures.SHOW_SETTINGS]) { + console.log('default values applied'); } - console.log('Error while loading config from config server, using default values instead' + error.message) } ); + this.auth.user.subscribe(_user => { + if (_user) { + this.userName = _user.name; + this.loggedIn = true; + } else { + this.userName = null; + this.loggedIn = false; + } + }) } openFeatureToggleDialog() { diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 67e3c482..a77494cc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -42,9 +42,13 @@ import { MatListModule } from '@angular/material/list'; import { LandingPageComponent } from './core/component/landing-page/landing-page.component'; import { PageNotFoundComponent } from './core/component/page-not-found/page-not-found.component'; import { AuthenticationModule } from './authentication/authentication.module'; +import { MatMenuModule } from '@angular/material/menu'; +import { IssueManagementModule } from './issue-management/issue-management.module'; +import { CandidateManagementModule } from './candidate-management/candidate-management.module'; import { DesignModelModule } from './design-model-module/design-model.module'; + + import { PatternAtlasUiFeatureToggleModule } from './core/directives/pattern-atlas-ui-feature-toggle.module'; -import { MatMenuModule } from '@angular/material/menu'; import { PatternAtlasUiRepositoryConfigurationService } from './core/directives/pattern-atlas-ui-repository-configuration.service'; @NgModule({ @@ -81,7 +85,11 @@ import { PatternAtlasUiRepositoryConfigurationService } from './core/directives/ ReactiveFormsModule, JwtModule, MatSidenavModule, - MatListModule + MatListModule, + MatMenuModule, + + IssueManagementModule, + CandidateManagementModule, ], providers: [ CookieService, PatternAtlasUiRepositoryConfigurationService, diff --git a/src/app/authentication/_interceptor/token.interceptor.ts b/src/app/authentication/_interceptor/token.interceptor.ts index 44f13ff4..76568bfb 100644 --- a/src/app/authentication/_interceptor/token.interceptor.ts +++ b/src/app/authentication/_interceptor/token.interceptor.ts @@ -9,7 +9,6 @@ export class TokenInterceptor implements HttpInterceptor { private static authService: AuthenticationService = null; static init(authService: AuthenticationService) { - console.log('interceptor initialized'); this.authService = authService; } diff --git a/src/app/authentication/_services/auth-guard.service.ts b/src/app/authentication/_services/auth-guard.service.ts index 0fbed51f..453b2ef1 100644 --- a/src/app/authentication/_services/auth-guard.service.ts +++ b/src/app/authentication/_services/auth-guard.service.ts @@ -2,6 +2,9 @@ import { Injectable } from '@angular/core'; import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router'; import { AuthenticationService } from './authentication.service'; import { ToasterService } from 'angular2-toaster'; +import { PrivilegeService } from './privilege.service'; +import { Observable } from 'rxjs'; +import { map } from 'rxjs/operators'; @Injectable({ providedIn: 'root' @@ -11,19 +14,17 @@ export class AuthGuardService implements CanActivate { constructor( public auth: AuthenticationService, public router: Router, + public privilegeService: PrivilegeService, private toaserService: ToasterService - ) { - } - canActivate(route: ActivatedRouteSnapshot): boolean { + ) { } - const role = route.data.role; + canActivate(route: ActivatedRouteSnapshot): Observable | boolean { + const privilege = route.data.privilege; - if (!this.auth.isAuthenticated() || !this.auth.roleSubject.value.includes(role)) { - console.log('Not allowed') - this.toaserService.pop('error', 'You do not have the rights for Route', route.routeConfig.path); - return false; - } - return true; + return this.privilegeService.hasPrivilege(privilege).pipe( + map(result => { + return result; + })); } } diff --git a/src/app/authentication/_services/authentication.service.ts b/src/app/authentication/_services/authentication.service.ts index 18f40e2e..8faf34ea 100644 --- a/src/app/authentication/_services/authentication.service.ts +++ b/src/app/authentication/_services/authentication.service.ts @@ -1,27 +1,31 @@ import { Injectable } from '@angular/core'; -import { BehaviorSubject, Observable } from 'rxjs'; -import { HttpClient, HttpParams } from '@angular/common/http'; +import { BehaviorSubject, Observable, Subject, of, EMPTY, observable } from 'rxjs'; +import { HttpClient, HttpRequest, HttpParams, HttpHeaders } from '@angular/common/http'; import { Router } from '@angular/router'; -import { map } from 'rxjs/operators'; +import { switchMap, skipWhile, tap, map, catchError } from 'rxjs/operators'; import { JwtHelperService } from '@auth0/angular-jwt'; import { TokenInterceptor } from '../_interceptor/token.interceptor'; -import { PAUser } from 'src/app/core/user-management'; +import { PAUser, UserRole, UserInfoModel } from 'src/app/core/user-management'; import { environment } from 'src/environments/environment'; + const accessTokenKey = 'access_token'; const refreshTokenKey = 'refresh_token'; +const idTokenKey = 'id_token'; -const stateKey = 'state'; +// Local storage keys +const localAccessTokenKey = environment.clientIdPublic + '_' + accessTokenKey; +const localRefreshTokenKey = environment.clientIdPublic + '_' + refreshTokenKey; +const localIdTokenKey = environment.clientIdPublic + '_' + idTokenKey; +const localStateKey = environment.clientIdPublic + 'state'; +const localVerifierKey = environment.clientIdPublic + 'code_verifier'; @Injectable() export class AuthenticationService { - private regexCode: RegExp; - private regexState: RegExp; - - public accessTokenSubject: BehaviorSubject; - public userSubject: BehaviorSubject; - public roleSubject: BehaviorSubject; + private accessTokenSubject: BehaviorSubject; + private userSubject: BehaviorSubject; + private rolePASubject: BehaviorSubject; private jwtHelper: JwtHelperService; @@ -29,97 +33,98 @@ export class AuthenticationService { private http: HttpClient, private router: Router, ) { - console.log('Init Authentication Service'); this.jwtHelper = new JwtHelperService(); TokenInterceptor.init(this); - this.regexCode = /code=(\w*)/; - this.regexState = /state=(\w*)/; - this.initSubjectsPipe(); - } private initSubjectsPipe() { - this.userSubject = new BehaviorSubject(null); - this.roleSubject = new BehaviorSubject(null); + this.userSubject = new BehaviorSubject(null); + this.rolePASubject = new BehaviorSubject(null); this.accessTokenSubject = new BehaviorSubject(this.getAccesToken()); this.accessTokenSubject.subscribe(token => { if (token === 'logout') { - console.log('User logout'); this.userSubject.next(null); - this.roleSubject.next(null); this.router.navigate(['/']); } else if (token && !this.jwtHelper.isTokenExpired(token)) { - console.log('Token exists && token not expired') this.getUserInfo(); - this.router.navigate(['/issue']); + this.getRoles(); + this.router.navigate(['/']); } else if (token && this.getRefreshToken() && this.jwtHelper.isTokenExpired(this.getAccesToken())) { - console.log('Token exists && token expired'); this.refreshToken(); } else { - console.log('Token does not exist'); this.getToken(); } }) } - public login() { - const state = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); - localStorage.setItem(stateKey, state); - this.getAccesCode(state); + public async login() { + localStorage.clear(); + // GENERATE STATE + const state = this.generateRandomString(32); + localStorage.setItem(localStateKey, state); + // GENERATE CODE VERIFIER + const code_verifier = this.generateRandomString(128) + const code_challenge = await this.pkceChallengeFromVerifier(code_verifier); + localStorage.setItem(localVerifierKey, code_verifier); + + this.getAccesCode(state, code_challenge); } - private getAccesCode(state: string) { + private getAccesCode(state: string, code_challenge: string) { const params = new HttpParams() .set('response_type', 'code') - .set('client_id', environment.clientIdPublic) .set('redirect_uri', `${window.location.origin}`) - .set('scope', 'read+write') .set('state', state) - // outcomment IF PKCE Authentaction flow is used - // .set('client_id', environment.clientIdPKCE) - // .set('code_challenge', '4cc9b165-1230-4607-873b-3a78afcf60c5') - + // outcomment IF PKCE Authentaction flow is used + .set('client_id', environment.clientIdPKCE) + .set('code_challenge', code_challenge) + .set('code_challenge_method', 'S256') + .set('scope', 'openid') window.open(environment.authorizeUrl + params, '_self'); } private checkState(state: string) { - const stateLocal = localStorage.getItem(stateKey); + const stateLocal = localStorage.getItem(localStateKey); return state !== stateLocal } private getToken() { const url = window.location.search; - if (url.includes('code=') && url.includes('state=')) { + const urlParams = new URLSearchParams(url); + + + if (urlParams.has('code') && urlParams.has('state')) { // Checks if sended state is equal to received state, CSRF attacks - if (this.checkState(this.regexState.exec(url)[1])) { - console.error('Wrong State') + if (this.checkState(urlParams.get('state'))) { localStorage.clear(); } else { - const code = this.regexCode.exec(url)[1]; + const code = urlParams.get('code'); + const code_verifier = localStorage.getItem(localVerifierKey); const params = new HttpParams() - .set('client_id', `${environment.clientIdPublic}`) .set('code', code) .set('redirect_uri', `${window.location.origin}`) .set('grant_type', 'authorization_code') - // outcomment IF PKCE Authentaction flow is used - // .set('client_id', `${environment.clientPKCE}`) - // .set('code_verifier', '4cc9b165-1230-4607-873b-3a78afcf60c5') + // outcomment IF PKCE Authentaction flow is used + .set('client_id', `${environment.clientIdPKCE}`) + .set('code_verifier', code_verifier) this.http.post(environment.tokenUrl, params).subscribe(token => { const accessToken = token[accessTokenKey]; const refreshToken = token[refreshTokenKey]; + const idToken = token[idTokenKey]; // used later for logout reference - localStorage.setItem(accessTokenKey, accessToken); - localStorage.setItem(refreshTokenKey, refreshToken); + localStorage.setItem(localAccessTokenKey, accessToken); + localStorage.setItem(localRefreshTokenKey, refreshToken); + localStorage.setItem(localIdTokenKey, idToken); this.accessTokenSubject.next(accessToken); }, @@ -130,18 +135,19 @@ export class AuthenticationService { } refreshToken() { - console.log('Refresh Token'); const params = new HttpParams() .set('client_id', `${environment.clientIdPublic}`) .set('grant_type', 'refresh_token') .set('refresh_token', `${this.getRefreshToken()}`) - this.http.post('http://localhost:8081/oauth/token', params).subscribe(token => { + this.http.post(environment.tokenUrl, params).subscribe(token => { const accessToken = token[accessTokenKey]; const refreshToken = token[refreshTokenKey]; + const idToken = token[idTokenKey]; - localStorage.setItem(accessTokenKey, accessToken); - localStorage.setItem(refreshTokenKey, refreshToken); + localStorage.setItem(localAccessTokenKey, accessToken); + localStorage.setItem(localRefreshTokenKey, refreshToken); + localStorage.setItem(localIdTokenKey, idToken); this.accessTokenSubject.next(accessToken); }, @@ -152,33 +158,38 @@ export class AuthenticationService { ); } - getUserInfo() { - this.http.get('http://localhost:8081/user_info').subscribe(user => { - - console.log('UserInfo: ', user); + private getUserInfo() { + this.http.get(environment.userInfoUrl).subscribe(user => { this.userSubject.next(user); - this.roleSubject.next(user.roles); - - }, - error => { - console.error('Error getToken via refreshToken: ', error) + }, error => { + console.error('Error in user info: ', error) + }); + } - } - ); + private getRoles() { + this.http.get(`${environment.API_URL}/users/roles`).subscribe(roles => { + this.rolePASubject.next(roles._embedded.roleModels); + }, error => { + console.error('Failed to query roles: ', error) + }); } logout() { - console.log('Logout'); + const idToken = localStorage.getItem(localIdTokenKey) localStorage.clear(); this.accessTokenSubject.next('logout'); + const params = new HttpParams() + .set('post_logout_redirect_uri', `${window.location.origin}`) + .set('id_token_hint', idToken) + window.open(environment.logoutUrl + params, '_self'); } public getAccesToken(): string { - return localStorage.getItem(accessTokenKey); + return localStorage.getItem(localAccessTokenKey); } private getRefreshToken(): string { - return localStorage.getItem(refreshTokenKey); + return localStorage.getItem(localRefreshTokenKey); } public isAuthenticated(): boolean { @@ -193,15 +204,45 @@ export class AuthenticationService { } } - public hasRole(role: string): Observable { - return this.roleSubject.asObservable().pipe( - map(roles => { - if (roles) { - return roles.includes(role); - } - return null; - }) - ); + get user(): Observable { + return this.userSubject.asObservable(); + } + + get roles(): Observable { + return this.rolePASubject.asObservable(); + } + + /** Authentication Flow Helper */ + // Generate a secure random string using the browser crypto functions + generateRandomString(length: number) { + // using 4byte blocks now -> translated into 8 chars with padding + var array = new Uint32Array(Math.ceil(length/8)); + window.crypto.getRandomValues(array); + return (Array.from(array, dec => dec.toString(16).padStart(8, '0'))).join('').substr(0, length); + } + + // Calculate the SHA256 hash of the input text. + // Returns a promise that resolves to an ArrayBuffer + sha256(plain) { + const encoder = new TextEncoder(); + const data = encoder.encode(plain); + return window.crypto.subtle.digest('SHA-256', data); + } + + // Base64-urlencodes the input string + base64urlencode(str) { + // Convert the ArrayBuffer to string using Uint8 array to conver to what btoa accepts. + // btoa accepts chars only within ascii 0-255 and base64 encodes them. + // Then convert the base64 encoded to base64url encoded + // (replace + with -, replace / with _, trim trailing =) + return btoa(String.fromCharCode.apply(null, new Uint8Array(str))) + .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, ''); + } + + // Return the base64-urlencoded sha256 hash for the PKCE challenge + async pkceChallengeFromVerifier(verifier) { + const hashed = await this.sha256(verifier); + return this.base64urlencode(hashed); } } diff --git a/src/app/authentication/_services/privilege.service.ts b/src/app/authentication/_services/privilege.service.ts new file mode 100644 index 00000000..22b32d79 --- /dev/null +++ b/src/app/authentication/_services/privilege.service.ts @@ -0,0 +1,87 @@ +import { Injectable } from '@angular/core'; +import { AuthenticationService } from './authentication.service'; +import { PAUser } from 'src/app/core/user-management'; +import { Observable, of } from 'rxjs'; +import { map } from 'rxjs/operators'; +import { ToasterService } from 'angular2-toaster'; +import { AuthorModel, AuthorManagementService, Author } from 'src/app/core/author-management'; + +@Injectable() +export class PrivilegeService { + + constructor( + private auth: AuthenticationService, + private toasterService: ToasterService, + ) { } + + isCurrentUser(userId: string): Observable { + return this.auth.user.pipe( + map(_user => { + if (_user) + return _user.id === userId; + return false; + }) + ) + } + + isNotCurrentUser(userId: string): Observable { + return this.isCurrentUser(userId).pipe( + map(result => !result ) + ); + } + + userHasPrivilege(privilege: string): Observable { + return this.auth.user.pipe( + map(_user => { + if (_user) return _user.privileges.includes(privilege) + return false; + }) + ) + } + + isGroubMember(authors: AuthorModel[], privilege?: string): Observable { + return this.auth.user.pipe( + map(_user => { + if (_user) { + if (privilege && _user.privileges.includes(privilege)) return true; + for (var a of authors) { + if (a.userId === _user.id) { + return true; + } + } + } + return false; + } + )); + } + + isMaintainerOrOwner(authors: AuthorModel[], privilege?: string): Observable { + return this.auth.user.pipe( + map(_user => { + if (_user) { + if (privilege && _user.privileges.includes(privilege)) return true; + for (var a of authors) { + if (a.userId === _user.id) { + if (a.authorRole === Author.OWNER || a.authorRole === Author.MAINTAINER) { + return true; + } + } + } + } + return false; + } + )); + } + + hasPrivilege(privilege: string): Observable { + return this.auth.user.pipe( + map(_user => { + if (_user) { + if (_user.privileges.includes(privilege)) return true; + return false; + } + return false; + }) + ) + } +} diff --git a/src/app/authentication/authentication.module.ts b/src/app/authentication/authentication.module.ts index a2b4076c..09ef43dc 100644 --- a/src/app/authentication/authentication.module.ts +++ b/src/app/authentication/authentication.module.ts @@ -1,6 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { AuthenticationService } from './_services/authentication.service'; +import { PrivilegeService } from './_services/privilege.service'; @NgModule({ declarations: [], @@ -8,7 +9,8 @@ import { AuthenticationService } from './_services/authentication.service'; CommonModule ], providers: [ - AuthenticationService + AuthenticationService, + PrivilegeService ] }) export class AuthenticationModule { diff --git a/src/app/author-management/author-list/author-list.component.html b/src/app/author-management/author-list/author-list.component.html new file mode 100644 index 00000000..8b088975 --- /dev/null +++ b/src/app/author-management/author-list/author-list.component.html @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + +
PRIVILEGE {{trimId(element.name)}} {{trimId(role.name)}} + + +
diff --git a/src/app/author-management/author-list/author-list.component.scss b/src/app/author-management/author-list/author-list.component.scss new file mode 100644 index 00000000..1922e7ff --- /dev/null +++ b/src/app/author-management/author-list/author-list.component.scss @@ -0,0 +1,3 @@ +table { + width: 100%; +} diff --git a/src/app/user-management/user-management-list/user-management-list.component.scss b/src/app/author-management/author-list/author-list.component.spec.ts similarity index 100% rename from src/app/user-management/user-management-list/user-management-list.component.scss rename to src/app/author-management/author-list/author-list.component.spec.ts diff --git a/src/app/author-management/author-list/author-list.component.ts b/src/app/author-management/author-list/author-list.component.ts new file mode 100644 index 00000000..a17eddb8 --- /dev/null +++ b/src/app/author-management/author-list/author-list.component.ts @@ -0,0 +1,61 @@ +import { Component, OnInit, ChangeDetectorRef } from '@angular/core'; +import { RoleModel, UserService, UserRole, PrivilegeModel, RoleModelRequest } from 'src/app/core/user-management'; +import { IssueManagementService, Issue, IssueManagementStore } from 'src/app/core/issue-management'; +import { MatDialog } from '@angular/material/dialog'; +import { MatCheckboxChange } from '@angular/material/checkbox'; +import { ActivatedRoute, Router } from '@angular/router'; + +@Component({ + selector: 'pp-author-list', + templateUrl: './author-list.component.html', + styleUrls: ['./author-list.component.scss'] +}) +export class AuthorManagementListComponent implements OnInit { + + dataSource: PrivilegeModel[] = []; + roles: RoleModel[]; + displayedColumns: string[] = ['PRIVILEGE']; + issue: Issue; + + constructor( + private userService: UserService, + public issueManagementStore: IssueManagementStore, + private router: Router, + private activeRoute: ActivatedRoute, + private ref: ChangeDetectorRef + ) { } + + ngOnInit(): void { + this.issueManagementStore.issue.subscribe(_issue => { + if (_issue) { + this.issue = _issue; + + this.userService.getAllPrivilegesFromEntity(this.issue.id).subscribe(privileges => { + this.dataSource = privileges; + }); + this.userService.getAllRolesFromEntity(this.issue.id).subscribe(result => { + this.roles = result; + this.roles.forEach(role => this.displayedColumns.push(role.name)); + }); + } + }); + } + + change(checkbox: MatCheckboxChange, privilege: PrivilegeModel, role: RoleModel) { + this.userService.updateUserRole(role, privilege, new RoleModelRequest(checkbox.checked)).subscribe(result => { + if (result) { + const index = this.roles.indexOf(role); + if (index > -1) this.roles.splice(index, 1, result); + } + }); + } + + trackByFn(index, item) { + return item.id; // or item.id + } + + trimId(name: string) { + return name.substring(0, name.length - 37); // Length of UUIDs: 36 + 1 for last underscore + } + +} diff --git a/src/app/author-management/author-management.module.ts b/src/app/author-management/author-management.module.ts new file mode 100644 index 00000000..e69de29b diff --git a/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.html b/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.html index 41181fbb..dd094f67 100644 --- a/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.html +++ b/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.html @@ -1,28 +1,72 @@ -
-
- -
-
-
- - Pattern Language - - - {{language.name}} - - - + + + +
+
+ + + + +
+
+ + + + + + + + + + + + + + + + + +
+ + + +
+ + +
+ + +
+ + +
+ + +
+ + +
-
-
- -
-
- - -
-
- -
+ +
diff --git a/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.scss b/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.scss index 7e9ed0cc..9aa863fe 100644 --- a/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.scss +++ b/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.scss @@ -1,37 +1,9 @@ -.container { - border-style: groove; - width: 100%; - display: flex; /* or inline-flex */ - flex-direction: column; - justify-content: center; - align-items: stretch; - - .container-candidate { - display: flex; /* or inline-flex */ - flex-direction: row; - justify-content: center; - align-items: center; - - .language-select { - flex: 1; - } - - .language-button { - padding-left: 8px; - } - } - - .container-rating { - width: 100%; - border-style: groove; - padding-top: 16px; - } +.detail-view { + padding: 0 1em; + border: 1px solid #bbb; + border-radius: 4px; +} - .container-button { - border-style: groove; - padding-top: 16px; - display: flex; - flex-direction: row; - justify-content: space-around; - } +.spacer { + margin: 8px; } diff --git a/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.ts b/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.ts index f7ef3f60..85c04555 100644 --- a/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.ts +++ b/src/app/candidate-management/candidate-management-detail/candidate-management-detail.component.ts @@ -1,115 +1,393 @@ -import { Component, OnInit, ViewChild } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { IssueManagementStore } from 'src/app/core/issue-management/_store/issue-management-store'; +import { Component, OnInit, ViewChild, ElementRef, ChangeDetectorRef, AfterViewInit } from '@angular/core'; +import { Router, ActivatedRoute } from '@angular/router'; import { TdTextEditorComponent } from '@covalent/text-editor'; -import { PatternLanguageService } from 'src/app/core/service/pattern-language.service'; -import PatternLanguageModel from 'src/app/core/model/hal/pattern-language-model.model'; -import { Rating } from 'src/app/core/model/rating.enum'; -import { Candidate, CandidateManagementService } from 'src/app/core/candidate-management'; +import { Candidate, CandidateManagementService, CandidateManagementStore } from 'src/app/core/candidate-management'; +import PatternLanguageSchemaModel from 'src/app/core/model/pattern-language-schema.model'; +import PatternSectionSchema from 'src/app/core/model/hal/pattern-section-schema.model'; +import { patternLanguageNone } from 'src/app/core/component/pattern-language-picker/pattern-language-picker.component'; +import { PatternService } from 'src/app/core/service/pattern.service'; +import * as marked from 'marked'; +import * as MarkdownIt from 'markdown-it'; +import * as markdownitKatex from 'markdown-it-katexx'; +import { MatDialog } from '@angular/material/dialog'; +import { ConfirmDialogComponent, ConfirmData } from 'src/app/core/component/confirm-dialog/confirm-dialog.component'; +import { globals } from 'src/app/globals'; +import { ContentObserver } from '@angular/cdk/observers'; +import { PAComment, PAEvidence, RatingEventModel, RatingModelRequest, RatingType } from 'src/app/core/shared'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; +import { Author, AuthorModel } from 'src/app/core/author-management'; +import { environment } from 'src/environments/environment'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; @Component({ selector: 'pp-candidate-management-detail', templateUrl: './candidate-management-detail.component.html', styleUrls: ['./candidate-management-detail.component.scss'] }) -export class CandidateManagementDetailComponent implements OnInit { +export class CandidateManagementDetailComponent implements OnInit, AfterViewInit { - candidateMarkdown: any; + @ViewChild('textEditor') private _textEditor: TdTextEditorComponent; + @ViewChild('candidateView') candidateDiv: ElementRef; + candidateHeight: number; + + markdown: any; + value: string; + + candidateMarkdown = ''; options: any = {}; - defaultSections = ['# Candidate Name\n', '## Icon\n', '## Context\n', '## Driving Question\n', '## Solution\n'] - candidate: Candidate; - @ViewChild('textEditor') private _textEditor: TdTextEditorComponent; + candidate: Candidate; + private oldCandidate: Candidate; - private nameRegex = /\s(.*?)\n/; + private patternSchema: PatternSectionSchema[]; - public patternLanguages: PatternLanguageModel[]; - public patternLanguageSelected: string; + disabled = true; + pattern = false; + treshhold = true; + treshholdSetting = 4.0; + confirmDialog: ConfirmData; constructor( private router: Router, private activeRoute: ActivatedRoute, - public issueStore: IssueManagementStore, - private candidateService: CandidateManagementService, - private patternLanguageService: PatternLanguageService, - ) { - } + private candidateManagementService: CandidateManagementService, + public candidateStore: CandidateManagementStore, + private patternService: PatternService, + public dialog: MatDialog, + private p: PrivilegeService, + private ref: ChangeDetectorRef, + private auth: AuthenticationService + ) { } ngOnInit(): void { - this.getPatternLanguages(); - - this.activeRoute.params.subscribe(params => { - const name = params.name; - if (name && this.router.url.includes('/create') && window.history.state.data) { - this.candidate = window.history.state.data as Candidate; - this.patternLanguageSelected = this.candidate.patternLanguageId; - this.candidateMarkdown = - `# ${this.candidate.name}\n` + - this.defaultSections[1] + - this.defaultSections[2] + - `${this.candidate.content}\n` + - this.defaultSections[3] + - this.defaultSections[4]; - - } else if (name && this.router.url.includes('/edit') && window.history.state.data) { - this.candidate = window.history.state.data as Candidate; - this.patternLanguageSelected = this.candidate.patternLanguageId; - this.candidateMarkdown = this.candidate.content; - } else if (!name && this.router.url.includes('/create') && !window.history.state.data) { - this.candidate = new Candidate() - this.candidateMarkdown = this.defaultSections.join(''); - } else if (name && this.router.url.includes('/detail') && window.history.state.data) { - this.candidate = window.history.state.data as Candidate; - this.patternLanguageSelected = this.candidate.patternLanguageId; - this.candidateMarkdown = this.candidate.content; + + this.candidateStore.candidate.subscribe((_candidate: Candidate) => { + if (_candidate && this.router.url.includes('detail')) { + this.disabled = true; + this.candidate = _candidate; + this.contentToMarkdown(); + this.checkTreshhold(); + + } else if (_candidate && this.router.url.includes('edit')) { + this.candidate = _candidate; + this.contentToMarkdown(); + this.edit(); + this.checkTreshhold(); + + } else if (!_candidate && window.history.state.data && window.history.state.data instanceof Candidate) { + this.candidate = window.history.state.data as Candidate + this.contentToMarkdown(); + this.edit(); + this.checkTreshhold(); + + } else { + this.disabled = false; + this.candidate = new Candidate(null, 'New Candidate', null, null); + this.patternLanguageSelectedChange(patternLanguageNone); + // Preset author + this.auth.user.subscribe(_user => { + if (_user && !this.candidate.authors) this.candidate.authors = [new AuthorModel(_user.id, Author.OWNER, _user.name)]; + }) } - }) + this.confirmDialog = { + title: `Change Pattern Language for Candidate ${this.candidate.name}`, + text: 'If you change the language everything writen will be deleted and the' + + ' new pattern schema will be used' + } + }); } - getPatternLanguages() { - this.patternLanguageService.getPatternLanguages().subscribe(result => { - console.log(result); - this.patternLanguages = result; - }) + ngAfterViewInit(): void { + this.setCommentSectionHeight(); + } + + // CHANGE MARKDOWN + contentToMarkdown() { + this.candidateMarkdown = `# ${this.candidate.name}\n`; + for (let key in this.candidate.content) { + this.candidateMarkdown = this.candidateMarkdown + `## ${key}\n${this.candidate.content[key]}\n`; + } + this.markdown = new MarkdownIt(); + this.markdown.set({ breaks: true }); + this.markdown.use(markdownitKatex.default, { throwOnError: false, errorColor: ' #cc0000' }); + this.value = this.markdown.render(this.candidateMarkdown); + } + + /** BUTTONS */ + edit() { + this.oldCandidate = Object.assign({}, this.candidate); + this.disabled = false; + } + + cancel() { + if (!this.oldCandidate) this.exit(); + this.candidate = this.oldCandidate; + this.disabled = true + } + + exit() { + this.router.navigateByUrl('/candidate') + } + + /** Pattern Language */ + patternLanguageSelectedChange(patternLanguage: PatternLanguageSchemaModel) { + this.candidate.patternLanguageId = patternLanguage.patternLanguageId; + this.candidate.patternLanguageName = patternLanguage.patternLanguageName; + const content: { [key: string]: string } = {}; + for (let section of patternLanguage.patternSchema) { + content[section.label] = 'Enter your input for this section here.'; + } + this.candidate.content = content; + this.contentToMarkdown(); + } + + /** Pattern */ + confirmPattern() { + this.pattern = !this.pattern; + } + + createPattern() { + let confirmDialog = this.dialog.open(ConfirmDialogComponent, { + data: { + title: `Create Candidate out of Candidate ${this.candidate.name}`, + text: 'Are you sure that you want to create a pattern out of this pattern candidate?' + } + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this.candidateManagementService.deleteCandidate(this.candidate).subscribe(res => { + const url = `${environment.repositoryUrl}/patternLanguages/${this.candidate.patternLanguageId}/patterns`; + this.patternService.savePattern(url, this.candidate).subscribe(result => { + this.router.navigate([globals.pathConstants.patternLanguages, this.candidate.patternLanguageId]); + }) + }) + } + }); + } + + cancelPattern() { + this.pattern = !this.pattern; + } + + /** SERVICE */ + /** ISSUE */ + createContent(): boolean { + const textEditorValue = marked.lexer(this._textEditor.value); + const content: { [key: string]: string } = {}; + var currentKey: string; + for (let line of textEditorValue) { + // NAME + if (line.type == 'heading' && line.depth == 1) { + this.candidate.name = line.text; + // HEADING + } else if (line.type == 'heading' && line.depth == 2) { + currentKey = line.text; + content[currentKey] = ''; + // PARAGRAPH + } else if (line.type == 'paragraph' || line.type == 'code') { + content[currentKey] = content[currentKey] + line.text; + // SPACE + } else if (line.type == 'space') { + content[currentKey] = content[currentKey] + '\n\n'; + } else { + console.error('Type not supported yet: ', line.type); + return false; + } + } + this.candidate.content = content; + return true; + } + + /** SERVICE */ + /** Pattern Candidate */ + + submit() { + if (this.createContent()) { + if (this.candidate.patternLanguageId === '-1') this.candidate.patternLanguageId = null; + this.candidate.uri = `/candidates/${this.candidate.name}` + this.candidate.id ? this.update() : this.create(); + } } create() { - console.log(this._textEditor.value); - this.candidate.name = this.nameRegex.exec(this._textEditor.value)[1]; - this.candidate.content = this._textEditor.value; - this.candidate.patternLanguageId = this.patternLanguageSelected; - console.log(this.candidate); - - this.candidateService.createCandidate(this.candidate, this.patternLanguageSelected).subscribe(result => { - console.log('created canddiate: ', result); + let authorlist = this.candidate.authors; + let first_author = null; + this.auth.user.subscribe(_user => { + if (_user) first_author = _user.id; + }) + + this.candidateManagementService.createCandidate(this.candidate).subscribe(result => { + this.candidate = result; + this.contentToMarkdown(); + + // call update for all additional authors + for(let author of authorlist) { + if(author.userId !== first_author) { + this.candidateManagementService.updateAuthorsCandidate(this.candidate, author).subscribe(result => { + this.candidate = result; + }) + } + } + + this.disabled = true; }) } update() { - this.candidateService.updateCandidate(this.candidate).subscribe(result => { - console.log(result); + this.candidateManagementService.updateCandidate(this.candidate).subscribe(result => { + this.candidate = result; + this.contentToMarkdown(); + this.disabled = true; }) } delete() { + let confirmDialog = this.dialog.open(ConfirmDialogComponent, { + data: { + title: `Delete Candidate ${this.candidate.name}`, + text: 'Are you sure you want to delete this pattern candidate?' + } + }); + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this.candidateManagementService.deleteCandidate(this.candidate).subscribe(result => { + this.exit(); + }) + } + }); } - createComment(candidateComment: Comment) { + updateRatingReadability(rating: number) { + this.candidateManagementService.updateRatingCandidate(this.candidate, new RatingModelRequest(rating, RatingType.READABILITY)).subscribe(result => { + this.candidate = result; + this.checkTreshhold(); + }); + } + updateRatingUnderstandability(rating: number) { + this.candidateManagementService.updateRatingCandidate(this.candidate, new RatingModelRequest(rating, RatingType.UNDERSTANDABILITY)).subscribe(result => { + this.candidate = result; + this.checkTreshhold(); + }); } - updateRating(rating: Rating) { + updateRatingAppropriateness(rating: number) { + this.candidateManagementService.updateRatingCandidate(this.candidate, new RatingModelRequest(rating, RatingType.APPROPRIATENESS)).subscribe(result => { + this.candidate = result; + this.checkTreshhold(); + }); + } + /** Author */ + updateAuthor(author: AuthorModel) { + if(this.candidate.id) { + this.candidateManagementService.updateAuthorsCandidate(this.candidate, author).subscribe(result => { + this.candidate = result; + }); + } else { + // not yet created - only save locally + if(!this.candidate.authors) { + this.candidate.authors = [] + } + this.candidate.authors.push(author) + } } - updateCommentRating(issueCommentRatingEvent: any) { - console.log(issueCommentRatingEvent); + deleteAuthor(author: AuthorModel) { + if(this.candidate.id) { + this.candidateManagementService.deleteAuthorCandidate(author, this.candidate).subscribe(result => { + this.candidate = result; + }); + } else { + if(this.candidate.authors) { + const authorIndex = this.candidate.authors.indexOf(author, 0); + if(authorIndex >= 0) { + this.candidate.authors.splice(authorIndex, 1); + } + } + } + } + /** Comment */ + createComment(comment: PAComment) { + this.candidateManagementService.createComment(this.candidate, comment).subscribe(result => { + this.candidate = result; + }); } - exit() { - this.router.navigate(['candidate/']); + updateComment(comment: PAComment) { + this.candidateManagementService.updateComment(this.candidate, comment).subscribe(result => { + this.candidate = result; + }); + } + + deleteComment(comment: PAComment) { + this.candidateManagementService.deleteComment(this.candidate, comment).subscribe(result => { + this.candidate = result; + }); + } + + updateRatingComment(ratingRequest: RatingEventModel) { + this.candidateManagementService.updateRatingCandidateComment(this.candidate, ratingRequest.entity, ratingRequest.rating).subscribe(result => { + this.candidate = result; + }) + } + + /** Evidence */ + createEvidence(evidence: PAEvidence) { + this.candidateManagementService.createEvidence(this.candidate, evidence).subscribe(result => { + this.candidate = result; + }); + } + + updateEvidence(evidence: PAEvidence) { + this.candidateManagementService.updateEvidence(this.candidate, evidence).subscribe(result => { + this.candidate = result; + }) } + deleteEvidence(evidenceId: string) { + let confirmDialog = this.dialog.open(ConfirmDialogComponent, { + data: { + title: 'Delete Evidence', + text: 'Are you sure that you want to delete this evidence submission?' + } + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this.candidateManagementService.deleteEvidence(this.candidate, evidenceId).subscribe(res => { + this.candidate = result; + }) + } + }); + } + + updateRatingEvidence(ratingRequest: RatingEventModel) { + this.candidateManagementService.updateRatingCandidateEvidence(this.candidate, ratingRequest.entity, ratingRequest.rating).subscribe(result => { + this.candidate = result; + }) + } + + /** UI */ + + checkTreshhold() { + var supportEvidences = 0; + this.candidate.evidences.forEach(evidence => { + if (evidence.supporting) supportEvidences += 1; + }) + if (this.candidate.ratingReadability < this.treshholdSetting || this.candidate.ratingUnderstandability < this.treshholdSetting + || this.candidate.ratingAppropriateness < this.treshholdSetting || supportEvidences < 2) { + this.treshhold = true; + return; + } + this.treshhold = false; + } + + setCommentSectionHeight() { + this.candidateHeight = this.candidateDiv.nativeElement.offsetHeight; + this.ref.detectChanges(); + } } diff --git a/src/app/candidate-management/candidate-management-list/candidate-management-list.component.html b/src/app/candidate-management/candidate-management-list/candidate-management-list.component.html index 6d64c3ad..d746e387 100644 --- a/src/app/candidate-management/candidate-management-list/candidate-management-list.component.html +++ b/src/app/candidate-management/candidate-management-list/candidate-management-list.component.html @@ -1,39 +1,39 @@ - - - - - {{language.name}} - - -
- - - - {{ candidate.name }} - Language: {{candidate.patternLanguageName}} - - Placholder image - -

- {{ candidate.content }} -

- - -   -   - - - -
- + (addClicked)="new()" (reloadClicked)="getAll()" [firstAddPrivilegeName]="'PATTERN_CANDIDATE_CREATE'"> + + + + +

{{language.name}}

+ + +
+ + + + {{ candidate.name }} + Language: {{candidate.patternLanguageName}} + + + +

+ {{ candidate.content['Context'] }} +

+ + +   +   + + + +
+ diff --git a/src/app/candidate-management/candidate-management-list/candidate-management-list.component.scss b/src/app/candidate-management/candidate-management-list/candidate-management-list.component.scss index 8a06391b..aa147466 100644 --- a/src/app/candidate-management/candidate-management-list/candidate-management-list.component.scss +++ b/src/app/candidate-management/candidate-management-list/candidate-management-list.component.scss @@ -1,9 +1,41 @@ -mat-grid-tile { - background: #add8e6; +.mat-card { + min-height: 5rem !important; + max-width: 200px; + flex: 1; + display: flex; + flex-direction: column; + margin-right: 1em; } -.landing-card { - min-height: 20rem !important; - min-width: 13rem !important; +.mat-card-header { + flex-shrink: 0; + margin: 0 !important; +} + +mat-card-header-text { + margin: 0 !important; +} + +.container { + display: flex; + flex-flow: row wrap; + margin: 0; +} + +.mat-card-content { + flex-grow: 1; + overflow: auto; +} + +.mat-card-title { + min-height: 0; +} + +.heading { + font-weight: bold; +} +.mat-card-actions { + display: flex; + justify-content: space-between; } diff --git a/src/app/candidate-management/candidate-management-list/candidate-management-list.component.ts b/src/app/candidate-management/candidate-management-list/candidate-management-list.component.ts index 53727692..3170f14b 100644 --- a/src/app/candidate-management/candidate-management-list/candidate-management-list.component.ts +++ b/src/app/candidate-management/candidate-management-list/candidate-management-list.component.ts @@ -1,8 +1,9 @@ import { Component, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; +import { Router, ActivatedRoute } from '@angular/router'; import { PatternLanguageService } from 'src/app/core/service/pattern-language.service'; import PatternLanguageModel from 'src/app/core/model/hal/pattern-language-model.model'; -import { Candidate, CandidateManagementService } from 'src/app/core/candidate-management'; +import { CandidateManagementService, Candidate, CandidateManagementStore } from 'src/app/core/candidate-management'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; @Component({ selector: 'pp-candidate-management-list', @@ -16,10 +17,12 @@ export class CandidateManagementListComponent implements OnInit { constructor( private candidateService: CandidateManagementService, + public candidateStore: CandidateManagementStore, private router: Router, + private activeRoute: ActivatedRoute, private patternLanguageService: PatternLanguageService, - ) { - } + private p: PrivilegeService, + ) { } ngOnInit(): void { this.getAll(); @@ -28,29 +31,32 @@ export class CandidateManagementListComponent implements OnInit { getAll() { this.candidateService.getAllCandidates().subscribe(result => { - console.log(result); this.candidates = result; }) } getPatternLanguages() { this.patternLanguageService.getPatternLanguages().subscribe(result => { - console.log(result); const none = new PatternLanguageModel() - none.name = 'NONE'; + none.name = 'No Pattern Language assigned'; none.id = null; this.patternLanguages = [none].concat(result); - console.log(this.patternLanguages); }) } - candidateDetail(candidate) { - console.log(candidate); - this.router.navigate(['candidate/edit', candidate.name], { state: { data: candidate } }); + /** NAVIGATION */ + new() { + this.router.navigate(['./create'], { relativeTo: this.activeRoute.parent }); + } + + detail(candidate: Candidate) { + this.candidateStore.addCandidate(candidate) + this.router.navigate(['./detail', candidate.name], { relativeTo: this.activeRoute.parent }); } - createCandidate() { - this.router.navigate(['candidate/create']); + edit(candidate: Candidate) { + this.candidateStore.addCandidate(candidate) + this.router.navigate(['./edit', candidate.name], { relativeTo: this.activeRoute.parent }); } } diff --git a/src/app/core/author-management/_models/author.enum.ts b/src/app/core/author-management/_models/author.enum.ts new file mode 100644 index 00000000..285d324f --- /dev/null +++ b/src/app/core/author-management/_models/author.enum.ts @@ -0,0 +1,5 @@ +export enum Author { + OWNER = 'OWNER', + MAINTAINER = 'MAINTAINER', + MEMBER = 'MEMBER', + } diff --git a/src/app/core/author-management/_models/author.model.request.ts b/src/app/core/author-management/_models/author.model.request.ts new file mode 100644 index 00000000..ff2aeb27 --- /dev/null +++ b/src/app/core/author-management/_models/author.model.request.ts @@ -0,0 +1,10 @@ +export class AuthorModelRequest { + + authorRole: string; + userId: string; + + constructor(_authorRole: string, _userId: string) { + this.authorRole = _authorRole; + this.userId = _userId; + } +} diff --git a/src/app/core/author-management/_models/author.model.ts b/src/app/core/author-management/_models/author.model.ts new file mode 100644 index 00000000..a295e4fd --- /dev/null +++ b/src/app/core/author-management/_models/author.model.ts @@ -0,0 +1,13 @@ +export class AuthorModel { + userId: string; + authorRole: string; + name: string; + + constructor() + constructor(_userId: string, _authorRole: string, _name: string) + constructor(_userId?: string, _authorRole?: string, _name?: string) { + this.userId = _userId; + this.authorRole = _authorRole; + this.name = _name; + } +} diff --git a/src/app/core/author-management/_services/author-management.service.ts b/src/app/core/author-management/_services/author-management.service.ts new file mode 100644 index 00000000..2e717ed4 --- /dev/null +++ b/src/app/core/author-management/_services/author-management.service.ts @@ -0,0 +1,139 @@ +import { Injectable } from '@angular/core'; +import { HttpClient } from '@angular/common/http'; +import { ToasterService } from 'angular2-toaster'; +import { environment } from 'src/environments/environment'; +import { Issue } from '../../issue-management'; +import { Observable, of } from 'rxjs'; +import { map, catchError } from 'rxjs/operators'; +import { Candidate } from '../../candidate-management'; +import { AuthorModelRequest } from '../_models/author.model.request'; +import { AuthorModel } from '../_models/author.model'; +import { ListResponse } from '../../util/list-response'; + +@Injectable() +export class AuthorManagementService { + + private repoEndpoint: string; + private serviceEndpoint: string; + + constructor( + private http: HttpClient, + private toasterService: ToasterService, + ) { + this.repoEndpoint = environment.repositoryUrl; + this.serviceEndpoint = '/authors'; + } + + public getAllAuthors(): Observable { + return this.http.get>(this.repoEndpoint + this.serviceEndpoint).pipe( + map(result => { + return result._embedded ? result._embedded.authorModels : [] + }), + catchError(error => { + this.toasterService.pop('error', 'Getting author list', error) + return []; + }), + ) + } + + public getAllAuthorRoles(): Observable { + return this.http.get>(this.repoEndpoint + this.serviceEndpoint + '/roles').pipe( + map(result => { + return result ? result : [] + }), + catchError(error => { + this.toasterService.pop('error', 'Getting author list', error) + return []; + }), + ) + } + + /** + * CREATE + */ + public createAuthorsIssue(authorModel: AuthorModel, issue: Issue, authorModelRequest: AuthorModelRequest): Observable { + return this.http.post(this.repoEndpoint + this.serviceEndpoint + `/${authorModel.userId}/issues/${issue.id}`, authorModelRequest).pipe( + map(result => { + this.toasterService.pop('success', 'Created issue author') + return result + }), + catchError(error => { + this.toasterService.pop('error', 'Could not create issue author: ', error) + return of(null); + }), + ) + } + + public createAuthorsCandidate(authorModel: AuthorModel, candidate: Candidate, authorModelRequest: AuthorModelRequest): Observable { + return this.http.post(this.repoEndpoint + this.serviceEndpoint + `/${authorModel.userId}/candidates/${candidate.id}`, authorModelRequest).pipe( + map(result => { + this.toasterService.pop('success', 'Created candidate author') + return result + }), + catchError(error => { + this.toasterService.pop('error', 'Could not candidate issue author: ', error) + return of(null); + }), + ) + } + + /** + * UPDATE + */ + public updateAuthorsIssue(authorModel: AuthorModel, string, issue: Issue, authorModelRequest: AuthorModelRequest): Observable { + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${authorModel.userId}/issues/${issue.id}`, authorModelRequest).pipe( + map(result => { + this.toasterService.pop('success', 'Updated issue author') + return result + }), + catchError(error => { + this.toasterService.pop('error', 'Could not update issue author: ', error) + return of(null); + }), + ) + } + + public updateAuthorsCandidate(authorModel: AuthorModel, candidate: Candidate, authorModelRequest: AuthorModelRequest): Observable { + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${authorModel.userId}/candidates/${candidate.id}`, authorModelRequest).pipe( + map(result => { + this.toasterService.pop('success', 'Updated candidate author') + return result + }), + catchError(error => { + this.toasterService.pop('error', 'Could not candidate issue author: ', error) + return of(null); + }), + ) + } + + /** + * DELETE + */ + public deleteAuthorIssue(authorModel: AuthorModel, issue: Issue): Observable { + + return this.http.delete(this.repoEndpoint + this.serviceEndpoint + `/${authorModel.userId}/issues/${issue.id}`).pipe( + map(result => { + this.toasterService.pop('success', 'Deleted issue author') + return result + }), + catchError(error => { + this.toasterService.pop('error', 'Could not delete issue author: ', error) + return of(null); + }), + ) + } + + public deleteAuthorCandidate(authorModel: AuthorModel, candidate: Candidate): Observable { + + return this.http.delete(this.repoEndpoint + this.serviceEndpoint + `/${authorModel.userId}/candidates/${candidate.id}`).pipe( + map(result => { + this.toasterService.pop('success', 'Deleted candidate author') + return result + }), + catchError(error => { + this.toasterService.pop('error', 'Could not delete candidate author: ', error) + return of(null); + }), + ) + } +} diff --git a/src/app/core/author-management/index.ts b/src/app/core/author-management/index.ts new file mode 100644 index 00000000..c65d86f1 --- /dev/null +++ b/src/app/core/author-management/index.ts @@ -0,0 +1,7 @@ +//MODEL +export { AuthorModel } from './_models/author.model' +export { AuthorModelRequest } from './_models/author.model.request' +//ENUM +export { Author } from './_models/author.enum' +//SERVICE +export { AuthorManagementService } from './_services/author-management.service' diff --git a/src/app/core/candidate-management/_models/candidate.model.ts b/src/app/core/candidate-management/_models/candidate.model.ts index b193e5c0..a90af852 100644 --- a/src/app/core/candidate-management/_models/candidate.model.ts +++ b/src/app/core/candidate-management/_models/candidate.model.ts @@ -1,22 +1,36 @@ -import { PAComment } from '../../model/comment'; +import { PAComment } from '../../shared/_models/comment.model'; +import { AuthorModel } from '../../author-management'; +import { PAEvidence } from '../../shared/_models/evidence.model'; +import { RatingModel } from '../../shared'; export class Candidate { + authors: AuthorModel[]; comments: PAComment[]; - content: string; + evidences: PAEvidence[]; + content: any; iconUrl: any; id: string; + issueId: string; name: string; patternLanguageId: string; patternLanguageName: string; - rating = 0; + ratingReadability: number; + ratingUnderstandability: number; + ratingAppropriateness: number; + readability: RatingModel[]; + understandability: RatingModel[]; + appropriateness: RatingModel[] uri: string; version = '0.1.0'; constructor() - constructor(_content: string, _name: string, _patternLanguageId: string) - constructor(_content?: string, _name?: string, _patternLanguageId?: string) { + constructor(_content: any, _name: string, _patternLanguageId: string, _authors: AuthorModel[]) + constructor(_content: any, _name: string, _patternLanguageId: string, _authors: AuthorModel[], _issueId: string) + constructor(_content?: any, _name?: string, _patternLanguageId?: string, _authors?: AuthorModel[], _issueId?: string) { this.content = _content; this.name = _name; this.patternLanguageId = _patternLanguageId; + this.authors = _authors; + this.issueId = _issueId; } } diff --git a/src/app/core/candidate-management/_services/candidate-management.service.ts b/src/app/core/candidate-management/_services/candidate-management.service.ts index fd41f1e2..c81d03c5 100644 --- a/src/app/core/candidate-management/_services/candidate-management.service.ts +++ b/src/app/core/candidate-management/_services/candidate-management.service.ts @@ -2,12 +2,13 @@ import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { ToasterService } from 'angular2-toaster'; import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; -import { Observable } from 'rxjs'; -import { catchError, map } from 'rxjs/operators'; -import { Rating } from '../../model/rating.enum'; +import { Observable, of } from 'rxjs'; +import { map, catchError } from 'rxjs/operators'; import { Candidate } from '../_models/candidate.model'; -import { CandidateComment } from '../_models/candidate-comment.model'; import { environment } from 'src/environments/environment'; +import { PAComment, PAEvidence, RatingModelRequest } from '../../shared'; +import { AuthorModel } from '../../author-management'; +import { ListResponse } from '../../util/list-response'; @Injectable() export class CandidateManagementService { @@ -24,16 +25,16 @@ export class CandidateManagementService { this.serviceEndpoint = '/candidates'; } - /** - * GET - */ - public getAllCandidates(): Observable { - return this.http.get(this.repoEndpoint + this.serviceEndpoint).pipe( + public getAllCandidates(languageId?: string): Observable { + let endpoint:string = this.repoEndpoint + this.serviceEndpoint; + if (languageId !== undefined) endpoint += '/?lid=' + languageId; + + return this.http.get>(endpoint).pipe( map(result => { return result._embedded ? result._embedded.candidateModels : []; }), - catchError(error => { - this.toasterService.pop('error', 'Getting candidate list', error); + catchError(e => { + this.toasterService.pop('error', 'Getting candidate list', e.error.message) return []; }), ); @@ -42,96 +43,192 @@ export class CandidateManagementService { /** * CREATE */ - public createCandidate(candidate: Candidate, patternLanguageId: string): Observable { + public createCandidate(candidate: Candidate): Observable { candidate.uri = candidate.name; - - return this.http.post(this.repoEndpoint + this.serviceEndpoint, candidate).pipe( + return this.http.post(this.repoEndpoint + this.serviceEndpoint, candidate).pipe( map(result => { this.toasterService.pop('success', 'Created new candidate'); return result; }), - catchError(error => { - this.toasterService.pop('error', 'Could not create new candidate: ', error); - return null; + catchError(e => { + this.toasterService.pop('error', 'Could not create new candidate: ', e.error.message) + return of(null); }), ); } - public createComment(candidate: Candidate, candidateComment: CandidateComment): Observable { - const userId = this.auth.userSubject.value.id; - - return this.http.post(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/comments/${userId}`, candidateComment).pipe( + public createComment(candidate: Candidate, comment: PAComment): Observable { + return this.http.post(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/comments`, comment).pipe( map(result => { - this.toasterService.pop('success', 'Created new candidate'); + this.toasterService.pop('success', 'Created new comment'); return result; }), - catchError(error => { - this.toasterService.pop('error', 'Could not create new candidate: ', error); - return null; + catchError(e => { + this.toasterService.pop('error', 'Could not create new comment: ', e.error.message); + return of(null); }), ); } + public createEvidence(candidate: Candidate, evidence: PAEvidence): Observable { + return this.http.post(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/evidences`, evidence).pipe( + map(result => { + this.toasterService.pop('success', 'Created new evidence'); + return result; + }), + catchError(e => { + this.toasterService.pop('error', 'Could not create new evidence: ', e.error.message); + return of(null); + }), + ) + } + /** * UPDATE */ public updateCandidate(candidate: Candidate): Observable { - - return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}`, candidate).pipe( + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}`, candidate).pipe( map(result => { this.toasterService.pop('success', 'Updated candidate'); return result; }), - catchError(error => { - this.toasterService.pop('error', 'Could not update candidate: ', error); - return null; + catchError(e => { + this.toasterService.pop('error', 'Could not update candidate: ', e.error.message); + return of(null); }), ); } - public updateRating(candidate: Candidate, rating: Rating): Observable { - const userId = this.auth.userSubject.value.id; + public updateRatingCandidate(candidate: Candidate, rating: RatingModelRequest): Observable { + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/ratings`, rating).pipe( + map(result => { + this.toasterService.pop('success', 'Updated candidate rating') + return result + }), + catchError(error => { + this.toasterService.pop('error', 'Could not update candidate rating: ', error) + return of(null); + }), + ) + } - return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/users/${userId}/rating/${rating}`, candidate).pipe( + public updateAuthorsCandidate(candidate: Candidate, authorModel: AuthorModel): Observable { + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/authors`, authorModel).pipe( map(result => { - this.toasterService.pop('success', 'Updated candidate'); + this.toasterService.pop('success', 'Updated candidate author'); return result; }), catchError(error => { - this.toasterService.pop('error', 'Could not update candidate: ', error); - return null; + this.toasterService.pop('error', 'Could not candidate issue author: ', error); + return of(null); + }), + ) + } + + public updateComment(candidate: Candidate, comment: PAComment): Observable { + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/comments/${comment.id}`, comment).pipe( + map(result => { + this.toasterService.pop('success', 'Updated candidate comment'); + return result; + }), + catchError(e => { + this.toasterService.pop('error', 'Could not update candidate comment: ', e.error.message); + return of(null); }), ); } - public updateCommentRating(candidateComment: CandidateComment, rating: Rating): Observable { - const userId = this.auth.userSubject.value.id; + public updateRatingCandidateComment(candidate: Candidate, comment: PAComment, rating: RatingModelRequest): Observable { + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/comments/${comment.id}/ratings`, rating).pipe( + map(result => { + this.toasterService.pop('success', 'Updated candidate comment rating'); + return result; + }), + catchError(error => { + this.toasterService.pop('error', 'Could not update candidate comment rating: ', error); + return of(null); + }), + ) + } - const url = this.repoEndpoint + this.serviceEndpoint + `/comments/${candidateComment.id}/users/${userId}/rating/${rating}`; + public updateEvidence(candidate: Candidate, evidence: PAEvidence): Observable { + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/evidences/${evidence.id}`, evidence).pipe( + map(result => { + this.toasterService.pop('success', 'Updated issue evidence'); + return result; + }), + catchError(e => { + this.toasterService.pop('error', 'Could not update issue evidence: ', e.error.message); + return of(null); + }), + ) + } - return this.http.put(url, candidateComment).pipe( + public updateRatingCandidateEvidence(candidate: Candidate, evidence: PAEvidence, rating: RatingModelRequest): Observable { + return this.http.put(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/evidences/${evidence.id}/ratings`, rating).pipe( map(result => { - this.toasterService.pop('success', 'Updated candidate comment'); + this.toasterService.pop('success', 'Updated candidate evidence rating'); return result; }), catchError(error => { - this.toasterService.pop('error', 'Could not update candidate comment: ', error); - return null; + this.toasterService.pop('error', 'Could not update candidate evidence rating: ', error); + return of(null); }), - ); + ) } + /** + * DELETE + */ public deleteCandidate(candidate: Candidate): Observable { - - return this.http.delete(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}`).pipe( + return this.http.delete(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}`).pipe( map(result => { this.toasterService.pop('success', 'Deleted candidate'); return result; }), + catchError(e => { + this.toasterService.pop('error', 'Could not delete candidate: ', e.error.message); + return of(null); + }), + ); + } + + public deleteAuthorCandidate(authorModel: AuthorModel, candidate: Candidate): Observable { + return this.http.delete(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/authors/${authorModel.userId}`).pipe( + map(result => { + this.toasterService.pop('success', 'Deleted candidate author'); + return result; + }), catchError(error => { - this.toasterService.pop('error', 'Could not delete candidate: ', error); - return null; + this.toasterService.pop('error', 'Could not delete candidate author: ', error); + return of(null); + }), + ) + } + + public deleteComment(candidate: Candidate, comment: PAComment): Observable { + return this.http.delete(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/comments/${comment.id}`).pipe( + map(result => { + this.toasterService.pop('success', 'Deleted candidate comment'); + return result; + }), + catchError(e => { + this.toasterService.pop('error', 'Could not delete candidate comment: ', e.error.message); + return of(null); }), ); } + + public deleteEvidence(candidate: Candidate, evidenceId: string): Observable { + return this.http.delete(this.repoEndpoint + this.serviceEndpoint + `/${candidate.id}/evidences/${evidenceId}`).pipe( + map(result => { + this.toasterService.pop('success', 'Deleted issue evidence'); + return result; + }), + catchError(e => { + this.toasterService.pop('error', 'Could not delete issue evidence: ', e.error.message); + return of(null); + }), + ) + } } diff --git a/src/app/core/candidate-management/_store/candidate-management.store.ts b/src/app/core/candidate-management/_store/candidate-management.store.ts index 35a771f7..82567c32 100644 --- a/src/app/core/candidate-management/_store/candidate-management.store.ts +++ b/src/app/core/candidate-management/_store/candidate-management.store.ts @@ -1,16 +1,20 @@ +import { BehaviorSubject } from 'rxjs'; +import { Candidate } from '../_models/candidate.model'; +import { Injectable } from '@angular/core'; + +@Injectable() export class CandidateManagementStore { - // private _issue2Candidate: BehaviorSubject = new BehaviorSubject(null); + private static _candidate: BehaviorSubject = new BehaviorSubject(null); - // get candidateFromIssue() { - // return this._issue2Candidate.asObservable(); - // } + get candidate() { + return CandidateManagementStore._candidate.asObservable(); + } - // addCandidateFromIssue(issue2Candidate: any) { - // console.log(issue2Candidate) - // this._issue2Candidate.next(issue2Candidate); - // } + addCandidate(candidate: Candidate) { + CandidateManagementStore._candidate.next(candidate); + } - // resetCandidateFromIssue() { - // this._issue2Candidate.next(null); - // } + resetCandidate() { + CandidateManagementStore._candidate.next(null); + } } diff --git a/src/app/core/candidate-management/index.ts b/src/app/core/candidate-management/index.ts index a45790bc..dc2ddc34 100644 --- a/src/app/core/candidate-management/index.ts +++ b/src/app/core/candidate-management/index.ts @@ -1,6 +1,5 @@ // Models export { Candidate } from './_models/candidate.model' -export { CandidateComment } from './_models/candidate-comment.model'; // Services export { CandidateManagementService } from './_services/candidate-management.service'; diff --git a/src/app/core/component/action-button-bar/action-button-bar.component.ts b/src/app/core/component/action-button-bar/action-button-bar.component.ts index 2063da7c..050e24e2 100644 --- a/src/app/core/component/action-button-bar/action-button-bar.component.ts +++ b/src/app/core/component/action-button-bar/action-button-bar.component.ts @@ -4,6 +4,8 @@ import { import { PatternAtlasUiRepositoryConfigurationService, UiFeatures } from 'src/app/core/directives/pattern-atlas-ui-repository-configuration.service'; +import { PrivilegeService } from '../../../authentication/_services/privilege.service'; +import { Observable, of } from 'rxjs'; @Component({ selector: 'pp-action-button-bar', @@ -27,6 +29,12 @@ export class ActionButtonBarComponent implements OnInit { @Input() secondAddButtonText: string; @Input() iconEdit = false; @Input() iconUrl: string; + // Should the name of a privilege be given, the add button is only visible if the user has this privilege + @Input() firstAddPrivilegeName: string; + @Input() secondAddPrivilegeName: string; + + @Input() back = false; + @Output() backClicked = new EventEmitter(); @Input() displayText: string; @@ -34,11 +42,30 @@ export class ActionButtonBarComponent implements OnInit { constructor(private cdr: ChangeDetectorRef, private applicationRef: ApplicationRef, - private configurationService: PatternAtlasUiRepositoryConfigurationService) { + private configurationService: PatternAtlasUiRepositoryConfigurationService, + private p: PrivilegeService) { } ngOnInit() { this.editingFromConfigServer = this.configurationService.configuration.features[UiFeatures.EDITING]; + if(this.firstAddButton) { + if (this.firstAddPrivilegeName) { + // Check if user privilege is present + this.p.hasPrivilege(this.firstAddPrivilegeName) + .subscribe(value => this.firstAddButton = value); + } else { + this.firstAddButton = true + } + } + if(this.secondAddButton) { + if(this.secondAddPrivilegeName) { + // Check if user privilege is present + this.p.hasPrivilege(this.secondAddPrivilegeName) + .subscribe(value => this.secondAddButton = value); + } else { + this.secondAddButton = true + } + } } addButtonClicked() { diff --git a/src/app/core/component/author-picker/author-picker.component.html b/src/app/core/component/author-picker/author-picker.component.html new file mode 100644 index 00000000..7b196137 --- /dev/null +++ b/src/app/core/component/author-picker/author-picker.component.html @@ -0,0 +1,20 @@ + + + + {{author.name}} ({{author.authorRole}}) + cancel + + + + + + {{selectAuthor.name}} + + + {{role}} + + + + + diff --git a/src/app/core/component/author-picker/author-picker.component.scss b/src/app/core/component/author-picker/author-picker.component.scss new file mode 100644 index 00000000..48b36ce7 --- /dev/null +++ b/src/app/core/component/author-picker/author-picker.component.scss @@ -0,0 +1,19 @@ +.mat-option-text { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + + .name { + flex: 1; + width: 100%; + } + + .mat-radio-group { + float: right; + + .mat-radio-button { + padding-left: 8px; + } + } +} diff --git a/src/app/user-management/user-management-list/user-management-list.component.spec.ts b/src/app/core/component/author-picker/author-picker.component.spec.ts similarity index 51% rename from src/app/user-management/user-management-list/user-management-list.component.spec.ts rename to src/app/core/component/author-picker/author-picker.component.spec.ts index 518d67a9..24f07edf 100644 --- a/src/app/user-management/user-management-list/user-management-list.component.spec.ts +++ b/src/app/core/component/author-picker/author-picker.component.spec.ts @@ -1,20 +1,20 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing'; -import { UserManagementListComponent } from './user-management-list.component'; +import { AuthorPickerComponent } from './author-picker.component'; -describe('UserManagementListComponent', () => { - let component: UserManagementListComponent; - let fixture: ComponentFixture; +describe('AuthorPickerComponent', () => { + let component: AuthorPickerComponent; + let fixture: ComponentFixture; beforeEach(async(() => { TestBed.configureTestingModule({ - declarations: [UserManagementListComponent] + declarations: [ AuthorPickerComponent ] }) .compileComponents(); })); beforeEach(() => { - fixture = TestBed.createComponent(UserManagementListComponent); + fixture = TestBed.createComponent(AuthorPickerComponent); component = fixture.componentInstance; fixture.detectChanges(); }); diff --git a/src/app/core/component/author-picker/author-picker.component.ts b/src/app/core/component/author-picker/author-picker.component.ts new file mode 100644 index 00000000..5815d903 --- /dev/null +++ b/src/app/core/component/author-picker/author-picker.component.ts @@ -0,0 +1,71 @@ +import { Component, OnInit, Input, ViewChild, ElementRef, ViewEncapsulation, OnChanges, SimpleChanges, EventEmitter, Output } from '@angular/core'; +import { COMMA, ENTER } from '@angular/cdk/keycodes'; +import { AuthorModel, AuthorManagementService, AuthorModelRequest, Author } from '../../author-management'; +import { MatRadioChange } from '@angular/material/radio'; +import { FormControl } from '@angular/forms'; +import { MatAutocomplete, MatAutocompleteTrigger } from '@angular/material/autocomplete'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; + +@Component({ + selector: 'pp-author-picker', + templateUrl: './author-picker.component.html', + styleUrls: ['./author-picker.component.scss'], + encapsulation: ViewEncapsulation.None, +}) +export class AuthorPickerComponent implements OnInit { + + @Input() disabled = true; + @Input() authors: AuthorModel[]; + @Output() updateAuthorEvent: EventEmitter = new EventEmitter(); + @Output() deleteAuthorEvent: EventEmitter = new EventEmitter(); + + separatorKeysCodes: number[] = [ENTER, COMMA]; + authorCtrl = new FormControl(); + owner = 'OWNER'; + + allAuthors: AuthorModel[]; + roles: string[]; + + @ViewChild('authorInput') authorInput: ElementRef; + @ViewChild('auto') matAutocomplete: MatAutocomplete; + @ViewChild(MatAutocompleteTrigger) autoTrigger: MatAutocompleteTrigger; + + constructor( + private authorService: AuthorManagementService, + public p: PrivilegeService, + public auth: AuthenticationService + ) { } + + ngOnInit(): void { + this.authorService.getAllAuthorRoles().subscribe(result => { + this.roles = result + }) + this.authorService.getAllAuthors().subscribe(result => { + this.allAuthors = result + }) + this.auth.user.subscribe(_user => { + if (_user && !this.authors) this.authors = [new AuthorModel(_user.id, Author.OWNER, _user.name)]; + }) + } + + getSelectedAuthor(author: AuthorModel) { + for (let a of this.authors) { + if (a.userId === author.userId) { + return a.authorRole; + } + } + return ''; + } + + update(role: MatRadioChange, author: AuthorModel) { + this.autoTrigger.closePanel(); + author.authorRole = role.value; + this.updateAuthorEvent.next(author); + } + + delete(author: AuthorModel) { + this.autoTrigger.closePanel(); + this.deleteAuthorEvent.next(author); + } +} diff --git a/src/app/core/component/candidate-renderer/candidate-renderer.component.html b/src/app/core/component/candidate-renderer/candidate-renderer.component.html new file mode 100644 index 00000000..f844eab7 --- /dev/null +++ b/src/app/core/component/candidate-renderer/candidate-renderer.component.html @@ -0,0 +1,23 @@ +
+ + {{candidate.name}} + Language: {{candidate.patternLanguageName}} + +

+ {{candidate.content['Context']}} +

+ + + + + + +
diff --git a/src/app/core/component/candidate-renderer/candidate-renderer.component.scss b/src/app/core/component/candidate-renderer/candidate-renderer.component.scss new file mode 100644 index 00000000..8ff91ca2 --- /dev/null +++ b/src/app/core/component/candidate-renderer/candidate-renderer.component.scss @@ -0,0 +1,41 @@ +.mat-card { + min-height: 5rem !important; + max-width: 200px; + flex: 1; + display: flex; + flex-direction: column; + margin-right: 1em; +} + +.mat-card-header { + flex-shrink: 0; + margin: 0 !important; +} + +mat-card-header-text { + margin: 0 !important; +} + +.container { + display: flex; + flex-flow: row wrap; + margin: 0; +} + +.mat-card-content { + flex-grow: 1; + overflow: auto; +} + +.mat-card-title { + min-height: 0; +} + +.heading { + font-weight: bold; +} + +.mat-card-actions { + display: flex; + justify-content: space-between; +} diff --git a/src/app/core/component/candidate-renderer/candidate-renderer.component.ts b/src/app/core/component/candidate-renderer/candidate-renderer.component.ts new file mode 100644 index 00000000..dc62c576 --- /dev/null +++ b/src/app/core/component/candidate-renderer/candidate-renderer.component.ts @@ -0,0 +1,40 @@ +import { Component, EventEmitter, Input, NgZone, Output } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; +import { Candidate, CandidateManagementStore } from '../../candidate-management'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; +import { ToasterService } from 'angular2-toaster'; +import { MatDialog } from '@angular/material/dialog'; +import { UiFeatures } from '../../directives/pattern-atlas-ui-repository-configuration.service'; + +@Component({ + selector: 'pp-candidate-renderer', + templateUrl: './candidate-renderer.component.html', + styleUrls: ['./candidate-renderer.component.scss'] +}) +export class CandidateRendererComponent { + + readonly UiFeatures = UiFeatures; + @Input() candidates: Array; + @Output() createEntityClicked: EventEmitter = new EventEmitter(); + + constructor(private zone: NgZone, + private router: Router, + private activatedRoute: ActivatedRoute, + public candidateStore: CandidateManagementStore, + private toasterService: ToasterService, + private dialog: MatDialog, + private p: PrivilegeService) { + } + + detail(candidate: Candidate) { + this.candidateStore.addCandidate(candidate); + this.router.navigate(['./candidate/detail', candidate.name]); + } + + edit(candidate: Candidate) { + this.candidateStore.addCandidate(candidate) + this.router.navigate(['./candidate/edit', candidate.name]); + } + +} + diff --git a/src/app/core/component/cardrenderer/card-renderer.component.html b/src/app/core/component/cardrenderer/card-renderer.component.html index 474c26ac..fa3347b1 100644 --- a/src/app/core/component/cardrenderer/card-renderer.component.html +++ b/src/app/core/component/cardrenderer/card-renderer.component.html @@ -9,10 +9,12 @@ - +
+ +
diff --git a/src/app/core/component/cardrenderer/card-renderer.component.ts b/src/app/core/component/cardrenderer/card-renderer.component.ts index 06741146..391c6bfc 100644 --- a/src/app/core/component/cardrenderer/card-renderer.component.ts +++ b/src/app/core/component/cardrenderer/card-renderer.component.ts @@ -8,6 +8,7 @@ import { ToasterService } from 'angular2-toaster'; import { MatDialog } from '@angular/material/dialog'; import { DeleteConfirmationDialogComponent } from '../delete-confirmation-dialog/delete-confirmation-dialog.component'; import { UiFeatures } from '../../directives/pattern-atlas-ui-repository-configuration.service'; +import { PrivilegeService } from '../../../authentication/_services/privilege.service'; @Component({ selector: 'pp-card-renderer', @@ -26,7 +27,8 @@ export class CardRendererComponent { private activatedRoute: ActivatedRoute, private patternService: PatternService, private toasterService: ToasterService, - private dialog: MatDialog) { + private dialog: MatDialog, + private p: PrivilegeService) { } navigate(pattern: UriEntity): void { @@ -82,7 +84,7 @@ export class CardRendererComponent { return collectedEdges; } - private deleteEdgesFromDeletedPattern(edgesToRemove: String []): void { + private deleteEdgesFromDeletedPattern(edgesToRemove: string []): void { this.uriEntities.forEach(otherPattern => { if (otherPattern._links.outgoingDirectedEdges) { if (Array.isArray(otherPattern._links.outgoingDirectedEdges)) { @@ -129,7 +131,7 @@ export class CardRendererComponent { private handlePatternDelete(pattern: Pattern): void { this.uriEntities = this.uriEntities.filter(value => value.uri !== pattern.uri); let allEdgesToRemove: HalLink[]; - const allEdgesToRemoveHref: String[] = []; + const allEdgesToRemoveHref: string[] = []; allEdgesToRemove = this.collectAllEdgesOfPattern(pattern); allEdgesToRemove.forEach(link => allEdgesToRemoveHref.push(link.href)); this.deleteEdgesFromDeletedPattern(allEdgesToRemoveHref); diff --git a/src/app/core/component/comment-list-item/comment-list-item.component.html b/src/app/core/component/comment-list-item/comment-list-item.component.html new file mode 100644 index 00000000..b62e05a4 --- /dev/null +++ b/src/app/core/component/comment-list-item/comment-list-item.component.html @@ -0,0 +1,42 @@ + +
+

From: {{comment.userName}}

+
+ + Comment + + +
+ + +
+
+
+

{{comment.text}}

+
+ + +
+
+ +
+ + + + + Reply + + +
+ + +
+ diff --git a/src/app/core/component/comment-list-item/comment-list-item.component.scss b/src/app/core/component/comment-list-item/comment-list-item.component.scss new file mode 100644 index 00000000..37f65f0e --- /dev/null +++ b/src/app/core/component/comment-list-item/comment-list-item.component.scss @@ -0,0 +1,37 @@ +.mat-card { + min-height: fit-content; + margin-top: 6px; +} + +.container { + margin: 0; + display: grid; + column-gap: 8px; + grid-template-columns: auto 70px; + grid-template-rows: auto; +} + +.wrapper-user { + grid-area: 1 / 1 / 1 / 1; + justify-self: start; + font-size: 13px; + color: #808080; +} + +.wrapper-input { + grid-area: 2 / 1 / 2 / 1; +} + +.wrapper-buttons { + grid-area: 3 / 1 / 3 / 1; +} + +button { + margin-right: 10px; +} + +.wrapper-rating { + grid-area: 1 / 2 / 3 / 2; + align-self: center; + justify-self: center; +} diff --git a/src/app/core/component/comment-list-item/comment-list-item.component.spec.ts b/src/app/core/component/comment-list-item/comment-list-item.component.spec.ts new file mode 100644 index 00000000..680c6e7f --- /dev/null +++ b/src/app/core/component/comment-list-item/comment-list-item.component.spec.ts @@ -0,0 +1,22 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { CommentListItemComponent } from './comment-list-item.component'; + +describe('CommentListItemComponent', () => { + let component: CommentListItemComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CommentListItemComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CommentListItemComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + +}); diff --git a/src/app/core/component/comment-list-item/comment-list-item.component.ts b/src/app/core/component/comment-list-item/comment-list-item.component.ts new file mode 100644 index 00000000..11f68ff4 --- /dev/null +++ b/src/app/core/component/comment-list-item/comment-list-item.component.ts @@ -0,0 +1,60 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; +import { PAComment, RatingEventModel, RatingModelRequest } from '../../shared'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; +import { FormControl } from '@angular/forms'; + +@Component({ + selector: 'pp-comment-list-item', + templateUrl: './comment-list-item.component.html', + styleUrls: ['./comment-list-item.component.scss'] +}) +export class CommentListItemComponent implements OnInit { + + @Input() comment: PAComment; + @Output() updateCommentEvent: EventEmitter = new EventEmitter(); + @Output() deleteCommentEvent: EventEmitter = new EventEmitter(); + @Output() ratingEvent: EventEmitter = new EventEmitter(); + + disabled = true; + isAuthor = false; + oldComment: PAComment; + + commentCtrl = new FormControl(); + replyComment = false; + + constructor( + public p: PrivilegeService, + ) { } + + ngOnInit(): void { + } + /** BUTTON */ + edit() { + this.oldComment = Object.assign({}, this.comment); + this.disabled = false; + } + + cancel() { + this.comment = this.oldComment; + this.disabled = true; + } + + reply() { + this.replyComment = !this.replyComment; + } + + updateRating(ratingRequest: RatingModelRequest) { + this.ratingEvent.next(new RatingEventModel(ratingRequest, this.comment)); + } + + async update() { + let isCurrentUser = await this.p.isCurrentUser(this.comment.userId); + if (isCurrentUser) { + this.updateCommentEvent.emit(this.comment); + } + } + + delete() { + this.deleteCommentEvent.emit(this.comment); + } +} diff --git a/src/app/core/component/comment-list/comment-list.component.html b/src/app/core/component/comment-list/comment-list.component.html index e73d67fe..2de57260 100644 --- a/src/app/core/component/comment-list/comment-list.component.html +++ b/src/app/core/component/comment-list/comment-list.component.html @@ -1,27 +1,33 @@
-
- - Comment - - -
- - + +
+ + Comment + + +
+ + +
+
+ + +
+

Comments

+ + + + +
-
- - -
-

{{comment.id}}

-

{{comment.text}}

-

Rating {{comment.rating}}

-

User {{comment.user}}

-
-
- -
- - +
+ No comment yet +
+
diff --git a/src/app/core/component/comment-list/comment-list.component.scss b/src/app/core/component/comment-list/comment-list.component.scss index b53dd0e3..0241786b 100644 --- a/src/app/core/component/comment-list/comment-list.component.scss +++ b/src/app/core/component/comment-list/comment-list.component.scss @@ -1,38 +1,39 @@ .container { - border-style: groove; - border-color: #f00; + height: 100%; + margin: 0; + display: grid; + grid-template-columns: 100%; + grid-template-rows: 165px auto; + row-gap: 10px; +} - .container-comment { - border-style: groove; - border-color: #008000; - width: 100%; - display: flex; /* or inline-flex */ - flex-direction: column; - justify-content: space-around; - align-items: flex-end; +.mat-card { + grid-area: 1 / 1 / 1 / 1; + min-height: 1rem; + // max-height: 160px !important; +} - .mat-form-field { - width: 100%; - } - } +.container-input { + height: 135px; + display: grid; + grid-template-columns: 100%; + grid-template-rows: 99px 36px; +} - .mat-list { - width: 100%; - overflow: auto; - height: calc(100vh - 64px - 48px - 96px - 440px); +.wrapper-input { + grid-area: 1 / 1 / 1 / 1; +} - .mat-list-item { - border-style: groove; - min-height: 128px; - display: flex; /* or inline-flex */ - flex-direction: row; - width: 100%; - align-items: center; +.wrapper-buttons { + grid-area: 2 / 1 / 2 / 1; +} - .container-text { - flex: 1; - } - } - } +button { + margin-right: 10px; } +.container-comment-list { + // border: 1px solid red; + overflow-y: scroll; + grid-area: 2 / 1 / 2 / 1; +} diff --git a/src/app/core/component/comment-list/comment-list.component.spec.ts b/src/app/core/component/comment-list/comment-list.component.spec.ts deleted file mode 100644 index ccf0c638..00000000 --- a/src/app/core/component/comment-list/comment-list.component.spec.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; - -import { CommentListComponent } from './comment-list.component'; -import { MatFormFieldModule } from '@angular/material/form-field'; -import { MatListModule } from '@angular/material/list'; -import { MatInputModule } from '@angular/material/input'; -import { FormsModule } from '@angular/forms'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; - -describe('CommentListComponent', () => { - let component: CommentListComponent; - let fixture: ComponentFixture; - - beforeEach(async(() => { - TestBed.configureTestingModule({ - declarations: [CommentListComponent], - imports: [MatFormFieldModule, MatListModule, MatInputModule, FormsModule, NoopAnimationsModule] - }) - .compileComponents(); - })); - - beforeEach(() => { - fixture = TestBed.createComponent(CommentListComponent); - component = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('should create', () => { - expect(component).toBeTruthy(); - }); -}); diff --git a/src/app/core/component/comment-list/comment-list.component.ts b/src/app/core/component/comment-list/comment-list.component.ts index 4e4630bf..a18c7764 100644 --- a/src/app/core/component/comment-list/comment-list.component.ts +++ b/src/app/core/component/comment-list/comment-list.component.ts @@ -1,48 +1,74 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { IssueComment } from '../../issue-management'; -import { Rating } from '../../model/rating.enum'; - -export interface IssueCommentRatingEvent { - issueComment: IssueComment, - issueCommentRating: Rating, -} +import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChange, SimpleChanges } from '@angular/core'; +import { PAComment, RatingEventModel } from '../../shared'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; +import { PrivilegeService } from '../../../authentication/_services/privilege.service'; @Component({ selector: 'pp-comment-list', templateUrl: './comment-list.component.html', styleUrls: ['./comment-list.component.scss'] }) -export class CommentListComponent implements OnInit { +export class CommentListComponent implements OnInit, OnChanges { - @Input() data: IssueComment[]; - @Output() createComment: EventEmitter = new EventEmitter(); - @Output() commentRating: EventEmitter = new EventEmitter(); + @Input() disabled: boolean; + @Input() data: PAComment[]; + @Output() createCommentEvent: EventEmitter = new EventEmitter(); + @Output() updateCommentEvent: EventEmitter = new EventEmitter(); + @Output() deleteCommentEvent: EventEmitter = new EventEmitter(); + @Output() ratingEvent: EventEmitter = new EventEmitter(); - comment: string; + commentForm: FormGroup; - constructor() { - } + constructor( + public auth: AuthenticationService, + private formBuilder: FormBuilder, + private p: PrivilegeService + ) { } ngOnInit(): void { + this.setForm(); + } + + ngOnChanges(changes: SimpleChanges): void { + this.setForm(); + } + + setForm() { + this.auth.user.subscribe(_user => { + if (_user) { + this.commentForm = this.formBuilder.group({ + comment: { value: null, disabled: this.disabled } + }); + } else { + this.commentForm = this.formBuilder.group({ + comment: { value: null, disabled: true } + }); + } + }) } - cancelComment() { - this.comment = ''; + async submit() { + let hasCommentPrivilege = await this.p.hasPrivilege('ISSUE_COMMENT'); + if (hasCommentPrivilege) { + let text = this.commentForm.get('comment').value; + if (text) { + this.createCommentEvent.next(new PAComment(text)); + } else { + console.error('Empty comment'); + } + } } - addComment() { - const commentIssue = {} as IssueComment; - commentIssue.text = this.comment - this.createComment.emit(commentIssue); - this.comment = ''; + update(comment: PAComment) { + this.updateCommentEvent.next(comment); } - updateCommentRating(rating: Rating, comment: IssueComment) { - console.log('User Upvoted Comment', rating, comment); - const issueCommentRatingEvent = {} as IssueCommentRatingEvent; - issueCommentRatingEvent.issueComment = comment; - issueCommentRatingEvent.issueCommentRating = rating; - this.commentRating.emit(issueCommentRatingEvent); + delete(comment: PAComment) { + this.deleteCommentEvent.next(comment); } + updateRating(ratingRequest: RatingEventModel) { + this.ratingEvent.next(ratingRequest); + } } diff --git a/src/app/core/component/confirm-dialog/confirm-dialog.component.html b/src/app/core/component/confirm-dialog/confirm-dialog.component.html new file mode 100644 index 00000000..1161fdb5 --- /dev/null +++ b/src/app/core/component/confirm-dialog/confirm-dialog.component.html @@ -0,0 +1,8 @@ +

{{data.title}}

+{{data.text}} + + + + + + diff --git a/src/app/core/component/confirm-dialog/confirm-dialog.component.scss b/src/app/core/component/confirm-dialog/confirm-dialog.component.scss new file mode 100644 index 00000000..2dd912d2 --- /dev/null +++ b/src/app/core/component/confirm-dialog/confirm-dialog.component.scss @@ -0,0 +1,10 @@ +.mat-dialog-container { + width: 250px; + height: 250px; +} + +.mat-dialog-actions { + display: flex; + justify-content: center; + align-items: center; +} diff --git a/src/app/core/component/confirm-dialog/confirm-dialog.component.spec.ts b/src/app/core/component/confirm-dialog/confirm-dialog.component.spec.ts new file mode 100644 index 00000000..7556e5a9 --- /dev/null +++ b/src/app/core/component/confirm-dialog/confirm-dialog.component.spec.ts @@ -0,0 +1,22 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ConfirmDialogComponent } from './confirm-dialog.component'; + +describe('ConfirmDialogComponent', () => { + let component: ConfirmDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ConfirmDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + +}); diff --git a/src/app/core/component/confirm-dialog/confirm-dialog.component.ts b/src/app/core/component/confirm-dialog/confirm-dialog.component.ts new file mode 100644 index 00000000..89e7a7a6 --- /dev/null +++ b/src/app/core/component/confirm-dialog/confirm-dialog.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit, Inject } from '@angular/core'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { DialogData } from '../create-pattern-relation/create-pattern-relation.component'; + +export interface ConfirmData { + title: string, + text: string, + noButton?: boolean, +} + +@Component({ + selector: 'pp-confirm-dialog', + templateUrl: './confirm-dialog.component.html', + styleUrls: ['./confirm-dialog.component.scss'] +}) +export class ConfirmDialogComponent implements OnInit { + + constructor(public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: ConfirmData) { + } + + ngOnInit(): void { + + } + +} + diff --git a/src/app/core/component/create-pattern-relation/create-pattern-relation.component.html b/src/app/core/component/create-pattern-relation/create-pattern-relation.component.html index 69dea434..e68b1e8a 100644 --- a/src/app/core/component/create-pattern-relation/create-pattern-relation.component.html +++ b/src/app/core/component/create-pattern-relation/create-pattern-relation.component.html @@ -88,7 +88,7 @@

Add a Relation to another Pattern

diff --git a/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html b/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html index 05b27da8..088bb5de 100644 --- a/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html +++ b/src/app/core/component/delete-confirmation-dialog/delete-confirmation-dialog.component.html @@ -3,7 +3,7 @@

Do you really want to delete this item?
diff --git a/src/app/core/component/evidence-dialog/evidence-dialog.component.html b/src/app/core/component/evidence-dialog/evidence-dialog.component.html new file mode 100644 index 00000000..2eed4113 --- /dev/null +++ b/src/app/core/component/evidence-dialog/evidence-dialog.component.html @@ -0,0 +1,38 @@ +
+ +

{{data.title}}

+
+ + Title + + + + Context + + + + Source + + +
+ + Type + + + + {{option}} + + + +
+ Supporting +
+
+
+ + + +
+
diff --git a/src/app/core/component/evidence-dialog/evidence-dialog.component.scss b/src/app/core/component/evidence-dialog/evidence-dialog.component.scss new file mode 100644 index 00000000..c179b205 --- /dev/null +++ b/src/app/core/component/evidence-dialog/evidence-dialog.component.scss @@ -0,0 +1,14 @@ +form { + width: 500px; + height: 100%; +} + +.type { + display: flex; + align-items: center; +} + +.spacer { + height: 100%; + width: 4px; +} diff --git a/src/app/core/component/evidence-dialog/evidence-dialog.component.spec.ts b/src/app/core/component/evidence-dialog/evidence-dialog.component.spec.ts new file mode 100644 index 00000000..e8e50d15 --- /dev/null +++ b/src/app/core/component/evidence-dialog/evidence-dialog.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EvidenceDialogComponent } from './evidence-dialog.component'; + +describe('EvidenceDialogComponent', () => { + let component: EvidenceDialogComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EvidenceDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EvidenceDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/component/evidence-dialog/evidence-dialog.component.ts b/src/app/core/component/evidence-dialog/evidence-dialog.component.ts new file mode 100644 index 00000000..004f0a8d --- /dev/null +++ b/src/app/core/component/evidence-dialog/evidence-dialog.component.ts @@ -0,0 +1,61 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'; +import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog'; +import { Observable } from 'rxjs'; +import { map, startWith } from 'rxjs/operators'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; +import { PAEvidence } from '../../shared'; + +@Component({ + selector: 'pp-evidence-dialog', + templateUrl: './evidence-dialog.component.html', + styleUrls: ['./evidence-dialog.component.scss'] +}) +export class EvidenceDialogComponent implements OnInit { + + evidenceForm: FormGroup; + // typeControl = new FormControl(); + typeOptions = ['Website', 'Paper', 'Book'] + filteredOptions: Observable; + + constructor( + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: PAEvidence, + private formBuilder: FormBuilder, + public p: PrivilegeService, + ) { } + + ngOnInit(): void { + this.evidenceForm = this.formBuilder.group({ + title: [this.data.title, Validators.required], + context: [this.data.context, Validators.required], + source: [this.data.source, Validators.required], + type: [this.data.type, Validators.required], + supporting: [this.data.supporting, Validators.required] + }); + + this.p.isNotCurrentUser(this.data.userId).subscribe(_disabled => { + if(_disabled) this.evidenceForm.disable(); + }) + + this.filteredOptions = this.evidenceForm.get('type').valueChanges + .pipe( + startWith(''), + map(value => this._filter(value)) + ); + } + + private _filter(value: string): string[] { + const filterValue = value.toLowerCase(); + + return this.typeOptions.filter(option => option.toLowerCase().includes(filterValue)); + } + onSubmit() { + this.data.title = this.evidenceForm.get('title').value; + this.data.context = this.evidenceForm.get('context').value; + this.data.source = this.evidenceForm.get('source').value; + this.data.type = this.evidenceForm.get('type').value; + this.data.supporting = this.evidenceForm.get('supporting').value; + this.dialogRef.close(this.data); + } +} diff --git a/src/app/core/component/evidence-list/evidence-list.component.html b/src/app/core/component/evidence-list/evidence-list.component.html new file mode 100644 index 00000000..76251352 --- /dev/null +++ b/src/app/core/component/evidence-list/evidence-list.component.html @@ -0,0 +1,22 @@ + +
+

Evidence

+ +
+ + +
+
+ {{evidence.title}} + {{evidence.userName}} +
+ + + +
+ + + + diff --git a/src/app/core/component/evidence-list/evidence-list.component.scss b/src/app/core/component/evidence-list/evidence-list.component.scss new file mode 100644 index 00000000..d445f3c5 --- /dev/null +++ b/src/app/core/component/evidence-list/evidence-list.component.scss @@ -0,0 +1,30 @@ + +.heading { + display: flex; + align-items: center; + margin-bottom: 8px; + + .text { + flex: 1 1 auto; + font-weight: bold; + font-size: 16px; + } +} + +.info { + // border: groove; + flex: 1 1 auto; + display: flex; + flex-direction: column; + + .user-name { + margin-top: 2px; + color: #808080; + font-size: 10px; + } +} + +.line { + height: 1px; + width: 100%; +} diff --git a/src/app/core/component/evidence-list/evidence-list.component.spec.ts b/src/app/core/component/evidence-list/evidence-list.component.spec.ts new file mode 100644 index 00000000..9a45e84d --- /dev/null +++ b/src/app/core/component/evidence-list/evidence-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EvidenceListComponent } from './evidence-list.component'; + +describe('EvidenceListComponent', () => { + let component: EvidenceListComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EvidenceListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EvidenceListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/component/evidence-list/evidence-list.component.ts b/src/app/core/component/evidence-list/evidence-list.component.ts new file mode 100644 index 00000000..dde3a330 --- /dev/null +++ b/src/app/core/component/evidence-list/evidence-list.component.ts @@ -0,0 +1,61 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { MatDialog } from '@angular/material/dialog'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; +import { PAEvidence, RatingEventModel, RatingModelRequest } from '../../shared'; +import { EvidenceDialogComponent } from '../evidence-dialog/evidence-dialog.component'; + +@Component({ + selector: 'pp-evidence-list', + templateUrl: './evidence-list.component.html', + styleUrls: ['./evidence-list.component.scss'] +}) +export class EvidenceListComponent { + + @Input() disabled: boolean; + @Input() evidences: PAEvidence[]; + @Output() createEvidenceEvent: EventEmitter = new EventEmitter(); + @Output() updateEvidenceEvent: EventEmitter = new EventEmitter(); + @Output() deleteEvidenceEvent: EventEmitter = new EventEmitter(); + @Output() ratingEvent: EventEmitter = new EventEmitter(); + + constructor( + public dialog: MatDialog, + public auth: AuthenticationService, + ) { } + + + newEvidence() { + this.auth.user.subscribe(_user => { + if (!_user) { + return; + } + let confirmDialog = this.dialog.open(EvidenceDialogComponent, { + data: new PAEvidence(_user.id) + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this.createEvidenceEvent.next(result); + } + }); + }) + } + + detail(evidence: PAEvidence) { + let confirmDialog = this.dialog.open(EvidenceDialogComponent, { + data: evidence + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result.id) { + this.updateEvidenceEvent.next(result) + } else if (result) { + this.deleteEvidenceEvent.next(result); + } + }); + } + + updateRating(ratingRequest: RatingModelRequest, evidence: PAEvidence) { + this.ratingEvent.next(new RatingEventModel(ratingRequest, evidence)); + } +} diff --git a/src/app/core/component/markdown-content-container/comment-dialog/comment-dialog.component.html b/src/app/core/component/markdown-content-container/comment-dialog/comment-dialog.component.html index aa101192..e0328267 100644 --- a/src/app/core/component/markdown-content-container/comment-dialog/comment-dialog.component.html +++ b/src/app/core/component/markdown-content-container/comment-dialog/comment-dialog.component.html @@ -5,6 +5,6 @@

Add new comment

- +
diff --git a/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.html b/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.html index 76291a40..690e7c22 100644 --- a/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.html +++ b/src/app/core/component/markdown-content-container/markdown-pattern-sectioncontent/markdown-pattern-section-content.component.html @@ -11,10 +11,10 @@ + (click)="openEditor()" matTooltip="Edit" aria-label="Edit">mode_edit + (click)="commentSVG()" matTooltip="Comment Picture" aria-label="Comment">comment
diff --git a/src/app/core/component/md-editor/md-editor.component.html b/src/app/core/component/md-editor/md-editor.component.html index 557a404c..f31425e1 100644 --- a/src/app/core/component/md-editor/md-editor.component.html +++ b/src/app/core/component/md-editor/md-editor.component.html @@ -1,6 +1,6 @@

Edit '{{data.label}}'

-
@@ -23,10 +23,10 @@

Edit '{{data.label}}'

-
diff --git a/src/app/core/component/navigate-back/navigate-back.component.html b/src/app/core/component/navigate-back/navigate-back.component.html index ac6acb9d..8240ef9c 100644 --- a/src/app/core/component/navigate-back/navigate-back.component.html +++ b/src/app/core/component/navigate-back/navigate-back.component.html @@ -1,2 +1,2 @@ - diff --git a/src/app/core/component/pattern-language-picker/pattern-language-picker.component.html b/src/app/core/component/pattern-language-picker/pattern-language-picker.component.html new file mode 100644 index 00000000..bde7506a --- /dev/null +++ b/src/app/core/component/pattern-language-picker/pattern-language-picker.component.html @@ -0,0 +1,8 @@ + + Pattern Language + + + {{language.patternLanguageName}} + + + diff --git a/src/app/core/component/pattern-language-picker/pattern-language-picker.component.scss b/src/app/core/component/pattern-language-picker/pattern-language-picker.component.scss new file mode 100644 index 00000000..5bfbb7c6 --- /dev/null +++ b/src/app/core/component/pattern-language-picker/pattern-language-picker.component.scss @@ -0,0 +1,3 @@ +.container { + width: 100%; +} diff --git a/src/app/core/component/pattern-language-picker/pattern-language-picker.component.spec.ts b/src/app/core/component/pattern-language-picker/pattern-language-picker.component.spec.ts new file mode 100644 index 00000000..f246211f --- /dev/null +++ b/src/app/core/component/pattern-language-picker/pattern-language-picker.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PatternLanguagePickerComponent } from './pattern-language-picker.component'; + +describe('PatternLanguagePickerComponent', () => { + let component: PatternLanguagePickerComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PatternLanguagePickerComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PatternLanguagePickerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + // it('should create', () => { + // expect(component).toBeTruthy(); + // }); +}); diff --git a/src/app/core/component/pattern-language-picker/pattern-language-picker.component.ts b/src/app/core/component/pattern-language-picker/pattern-language-picker.component.ts new file mode 100644 index 00000000..f7cf33a8 --- /dev/null +++ b/src/app/core/component/pattern-language-picker/pattern-language-picker.component.ts @@ -0,0 +1,94 @@ +import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; +import PatternLanguageModel from '../../model/hal/pattern-language-model.model'; +import { PatternLanguageService } from '../../service/pattern-language.service'; +import PatternLanguageSchemaModel from '../../model/pattern-language-schema.model'; +import PatternSectionSchema from '../../model/hal/pattern-section-schema.model'; +import { FormControl } from '@angular/forms'; +import { ConfirmData, ConfirmDialogComponent } from '../confirm-dialog/confirm-dialog.component'; +import { MatDialog } from '@angular/material/dialog'; + +export const patternLanguageNone = new PatternLanguageSchemaModel( + '-1', + 'None', + [ + new PatternSectionSchema('Icon', 'Icon', 'any', 0), + new PatternSectionSchema('Context', 'Context', 'any', 1), + new PatternSectionSchema('Driving Question', 'Driving Question', 'any', 2), + new PatternSectionSchema('Solution', 'Solution', 'any', 3) + ] +); + +@Component({ + selector: 'pp-pattern-language-picker', + templateUrl: './pattern-language-picker.component.html', + styleUrls: ['./pattern-language-picker.component.scss'] +}) +export class PatternLanguagePickerComponent implements OnInit, OnChanges { + + @Input() disabled : boolean; + + @Input() set patternLanguageSelected(patternLanguageSelected: string) { + if (patternLanguageSelected) { + this._patternLanguageSelected = patternLanguageSelected; + if (this.patternLanguages) { + const patternLanguageSchemaModel = this.patternLanguages.find(l => l.patternLanguageId == this._patternLanguageSelected); + this._oldValue = patternLanguageSchemaModel + this.patternLanguageCrtl.setValue(patternLanguageSchemaModel); + } + } + } + @Input() confirmDialog: ConfirmData; + @Output() patternLanguageSelectedChange = new EventEmitter(); + + private _patternLanguageSelected: string; + private _oldValue: PatternLanguageSchemaModel; + patternLanguages: PatternLanguageSchemaModel[]; + patternLanguageCrtl: FormControl = new FormControl({ value: null, disabled: true }); + + constructor( + private patternLanguageService: PatternLanguageService, + public dialog: MatDialog, + ) { } + + ngOnInit(): void { + this.patternLanguageService.getPatternLanguagesSchemas().subscribe(result => { + this.patternLanguages = result; + this.patternLanguages.push(patternLanguageNone); + if (this._patternLanguageSelected) { + const patternLanguageSchemaModel = this.patternLanguages.find(l => l.patternLanguageId == this._patternLanguageSelected); + this._oldValue = patternLanguageSchemaModel + this.patternLanguageCrtl.setValue(patternLanguageSchemaModel); + } + }) + } + + selectionChange() { + if (this.confirmDialog) { + let confirmDialog = this.dialog.open(ConfirmDialogComponent, { + data: this.confirmDialog + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this._oldValue = this.patternLanguageCrtl.value; + this.patternLanguageSelectedChange.emit(this.patternLanguageCrtl.value) + } else { + this.patternLanguageCrtl.setValue(this._oldValue); + } + }); + } else { + this.patternLanguageSelectedChange.emit(this.patternLanguageCrtl.value) + } + } + + ngOnChanges(changes: SimpleChanges): void { + if(changes.disabled) { + if(this.disabled) { + this.patternLanguageCrtl.disable(); + } else { + this.patternLanguageCrtl.enable(); + } + } + } + +} diff --git a/src/app/core/component/rating-multiple/rating-multiple.component.html b/src/app/core/component/rating-multiple/rating-multiple.component.html new file mode 100644 index 00000000..da947836 --- /dev/null +++ b/src/app/core/component/rating-multiple/rating-multiple.component.html @@ -0,0 +1,12 @@ +
+
{{title}}:
+ {{total ? total : ' - '}} + + 1 + 2 + 3 + 4 + 5 + + +
diff --git a/src/app/core/component/rating-multiple/rating-multiple.component.scss b/src/app/core/component/rating-multiple/rating-multiple.component.scss new file mode 100644 index 00000000..49ef2d8d --- /dev/null +++ b/src/app/core/component/rating-multiple/rating-multiple.component.scss @@ -0,0 +1,25 @@ +.container { + display: flex; + justify-content: space-between; + align-items: center; + height: 35px; +} + +.title { + width: 160px; + font-weight: bold; +} + +.mat-button-toggle { + // margin: 0 4px !important; + display: flex; + height: 30px; + align-items: center; +} + +.mat-button-toggle-checked { + // border: 1px solid #c5c0c7; + background-color: #3f51bf; +} + + diff --git a/src/app/core/component/rating-multiple/rating-multiple.component.spec.ts b/src/app/core/component/rating-multiple/rating-multiple.component.spec.ts new file mode 100644 index 00000000..222bf5ca --- /dev/null +++ b/src/app/core/component/rating-multiple/rating-multiple.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RatingMultipleComponent } from './rating-multiple.component'; + +describe('RatingMultipleComponent', () => { + let component: RatingMultipleComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RatingMultipleComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RatingMultipleComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/core/component/rating-multiple/rating-multiple.component.ts b/src/app/core/component/rating-multiple/rating-multiple.component.ts new file mode 100644 index 00000000..27216950 --- /dev/null +++ b/src/app/core/component/rating-multiple/rating-multiple.component.ts @@ -0,0 +1,45 @@ +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { MatButtonToggleChange } from '@angular/material/button-toggle'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; +import { RatingModel } from '../../shared'; + +@Component({ + selector: 'pp-rating-multiple', + templateUrl: './rating-multiple.component.html', + styleUrls: ['./rating-multiple.component.scss'] +}) +export class RatingMultipleComponent implements OnInit, OnChanges { + + @Input() rating: RatingModel[]; + @Input() title: string; + @Input() total: number; + @Output() changeRatingEmitter: EventEmitter = new EventEmitter(); + + userRating: string; + + constructor( + private auth: AuthenticationService, + private p: PrivilegeService, + ) { } + + ngOnInit(): void { + } + + ngOnChanges(changes: SimpleChanges) { + if (this.rating) { + this.auth.user.subscribe(_user => { + this.rating.forEach(rating => { + if (_user.id === rating.userId) { + this.userRating = `${rating.rating}`; + } + }) + }); + } + } + + rate(change: MatButtonToggleChange) { + this.changeRatingEmitter.next(change.value); + } + +} diff --git a/src/app/core/component/rating/rating.component.html b/src/app/core/component/rating/rating.component.html index 23a27dc9..4c0d5634 100644 --- a/src/app/core/component/rating/rating.component.html +++ b/src/app/core/component/rating/rating.component.html @@ -1,11 +1,9 @@ -
- - {{rating}} - -
- -
- - {{rating}} - +
+ + {{total}} +
diff --git a/src/app/core/component/rating/rating.component.scss b/src/app/core/component/rating/rating.component.scss index 187c6239..2e6330a2 100644 --- a/src/app/core/component/rating/rating.component.scss +++ b/src/app/core/component/rating/rating.component.scss @@ -1,5 +1,6 @@ .container-row { - border-style: groove; + // border-style: groove; + margin: 4px 0; width: 100%; display: flex; /* or inline-flex */ flex-direction: row; @@ -7,12 +8,12 @@ align-items: baseline; .rating { - padding: 0 16px; + margin: 0 16px; } } .container-column { - border-style: groove; + // border-style: groove; width: 100%; display: flex; /* or inline-flex */ flex-direction: column; @@ -20,7 +21,7 @@ align-items: stretch; .rating { - padding: 8px 0; + margin: 8px 0; text-align: center; } } diff --git a/src/app/core/component/rating/rating.component.spec.ts b/src/app/core/component/rating/rating.component.spec.ts index c6c829dc..13bf3ea8 100644 --- a/src/app/core/component/rating/rating.component.spec.ts +++ b/src/app/core/component/rating/rating.component.spec.ts @@ -19,7 +19,7 @@ describe('RatingComponent', () => { fixture.detectChanges(); }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + // it('should create', () => { + // expect(component).toBeTruthy(); + // }); }); diff --git a/src/app/core/component/rating/rating.component.ts b/src/app/core/component/rating/rating.component.ts index 8d4e9b6f..29aa2b2d 100644 --- a/src/app/core/component/rating/rating.component.ts +++ b/src/app/core/component/rating/rating.component.ts @@ -1,30 +1,62 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { Rating } from '../../model/rating.enum'; +import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; +import { RatingModelRequest } from '../../shared'; + +type RatingButtonColor = 'primary' | 'accent' | 'warn' | '' @Component({ selector: 'pp-rating', templateUrl: './rating.component.html', styleUrls: ['./rating.component.scss'] }) -export class RatingComponent implements OnInit { +export class RatingComponent implements OnInit, OnChanges { @Input() row = true; - @Input() rating: number; - @Input() userRatingPast: number; - @Output() userRatingCurrent = new EventEmitter(); + @Input() disabled = false; + @Input() upVotes: string[] = []; + @Input() downVotes: string[] = []; + @Input() total: number; + + @Output() ratingEvent: EventEmitter = new EventEmitter(); + + colorUp : RatingButtonColor = 'primary' + colorDown : RatingButtonColor = 'primary' - constructor() { - } + + constructor( + public auth: AuthenticationService + ) { } ngOnInit(): void { + } - up() { - this.userRatingCurrent.emit(Rating.UP); + ngOnChanges(changes: SimpleChanges): void { + this.auth.user.subscribe(_user => { + if (_user && this.upVotes && this.downVotes) { + if (this.upVotes.includes(_user.id)) this.setButtonColor(1); + else if (this.downVotes.includes(_user.id)) this.setButtonColor(-1); + else this.setButtonColor(0); + } + }) } - down() { - this.userRatingCurrent.emit(Rating.DOWN); + click(rating: number) { + this.ratingEvent.next(new RatingModelRequest(rating)); } + setButtonColor(vote: number) { + if (vote == 1) { + this.colorUp = 'accent'; + this.colorDown = 'primary' + } + if (vote == -1) { + this.colorUp = 'primary'; + this.colorDown = 'accent' + } + if (vote == 0) { + this.colorUp = 'primary'; + this.colorDown = 'primary' + } + } } diff --git a/src/app/core/core.module.ts b/src/app/core/core.module.ts index 04ebd406..34e81142 100644 --- a/src/app/core/core.module.ts +++ b/src/app/core/core.module.ts @@ -32,6 +32,7 @@ import { MatListModule } from '@angular/material/list'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; import { MatSelectModule } from '@angular/material/select'; import { MatSidenavModule } from '@angular/material/sidenav'; +import { MatTabsModule } from '@angular/material/tabs'; import { MatToolbarModule } from '@angular/material/toolbar'; import { MatTooltipModule } from '@angular/material/tooltip'; import { TextFieldModule } from '@angular/cdk/text-field'; @@ -51,6 +52,7 @@ import { PatternLanguageService } from './service/pattern-language.service'; import { PatternService } from './service/pattern.service'; import { GraphDisplayComponent } from './component/graph-display/graph-display.component'; import { CardRendererComponent } from './component/cardrenderer/card-renderer.component'; +import { CandidateRendererComponent } from './component/candidate-renderer/candidate-renderer.component'; import { PatternViewService } from './service/pattern-view.service'; import { CreateEditPatternLanguageComponent } from './component/create-edit-pattern-language/create-edit-pattern-language.component'; import { ActionButtonBarComponent } from './component/action-button-bar/action-button-bar.component'; @@ -75,6 +77,18 @@ import { IssueManagementService } from './issue-management/_services/issue-manag import { IssueManagementStore } from './issue-management/_store/issue-management-store'; import { CandidateManagementService } from './candidate-management/_services/candidate-management.service'; import { CandidateManagementStore } from './candidate-management'; +import { AuthorManagementService } from './author-management'; +import { CommentListItemComponent } from './component/comment-list-item/comment-list-item.component'; +import { ScrollingModule } from '@angular/cdk/scrolling'; +import { PatternLanguagePickerComponent } from './component/pattern-language-picker/pattern-language-picker.component'; +import { AuthorPickerComponent } from './component/author-picker/author-picker.component'; +import { MatRadioModule } from '@angular/material/radio'; +import { MatChipsModule } from '@angular/material/chips'; +import { ConfirmDialogComponent } from './component/confirm-dialog/confirm-dialog.component'; +import { EvidenceListComponent } from './component/evidence-list/evidence-list.component'; +import { EvidenceDialogComponent } from './component/evidence-dialog/evidence-dialog.component'; +import { MatCheckboxModule } from '@angular/material/checkbox'; +import { RatingMultipleComponent } from './component/rating-multiple/rating-multiple.component'; import { MatTreeModule } from '@angular/material/tree'; import { MatFormFieldModule } from '@angular/material/form-field'; import { SelectPatternDialogComponent } from './component/select-pattern-dialog/select-pattern-dialog.component'; @@ -95,7 +109,6 @@ import { PatternAtlasUiFeatureToggleModule } from './directives/pattern-atlas-ui FlexLayoutModule, MatProgressSpinnerModule, MatListModule, - MatFormFieldModule, MatDatepickerModule, MatInputModule, ReactiveFormsModule, MatTooltipModule, @@ -106,12 +119,16 @@ import { PatternAtlasUiFeatureToggleModule } from './directives/pattern-atlas-ui MatBadgeModule, MatExpansionModule, MatButtonToggleModule, - MatTreeModule, + MatTabsModule, NgxMdModule.forRoot(), MatNativeDateModule, RouterModule, MatSortModule, FormsModule, + ScrollingModule, + MatRadioModule, + MatChipsModule, + MatCheckboxModule, MatSnackBarModule, PatternAtlasUiFeatureToggleModule ], @@ -122,12 +139,18 @@ import { PatternAtlasUiFeatureToggleModule } from './directives/pattern-atlas-ui MatProgressSpinnerModule, NavigateBackComponent, CardRendererComponent, + CandidateRendererComponent, ActionButtonBarComponent, RatingComponent, + RatingMultipleComponent, CommentListComponent, ToggleRendererComponent, - GraphDisplayComponent - ], + GraphDisplayComponent, + PatternLanguagePickerComponent, + AuthorPickerComponent, + EvidenceListComponent, + ] + , providers: [ PatternLanguageService, PatternService, @@ -141,6 +164,8 @@ import { PatternAtlasUiFeatureToggleModule } from './directives/pattern-atlas-ui // CANDIDATE CandidateManagementService, CandidateManagementStore, + // SHARED + AuthorManagementService, // IMAGE & DISCUSSION ImageService, DiscussionService @@ -158,6 +183,7 @@ import { PatternAtlasUiFeatureToggleModule } from './directives/pattern-atlas-ui MarkdownPatternSectionContentComponent, GraphDisplayComponent, CardRendererComponent, + CandidateRendererComponent, CreateEditPatternLanguageComponent, ActionButtonBarComponent, RatingComponent, @@ -165,6 +191,13 @@ import { PatternAtlasUiFeatureToggleModule } from './directives/pattern-atlas-ui ToggleRendererComponent, DeletePatternRelationComponent, CreativeLicenseFooterComponent, + CommentListItemComponent, + PatternLanguagePickerComponent, + AuthorPickerComponent, + ConfirmDialogComponent, + EvidenceListComponent, + EvidenceDialogComponent, + RatingMultipleComponent, CommentDialogComponent, DiscussDialogComponent, SelectPatternDialogComponent, @@ -181,8 +214,11 @@ import { PatternAtlasUiFeatureToggleModule } from './directives/pattern-atlas-ui DeletePatternRelationComponent, MarkdownPatternSectionContentComponent, CardRendererComponent, + CandidateRendererComponent, GraphDisplayComponent, CreateEditPatternLanguageComponent, + ConfirmDialogComponent, + EvidenceDialogComponent, CommentDialogComponent, DiscussDialogComponent, FeatureToggleDialogComponent diff --git a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.html b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.html index 65699dd6..1ec9bf81 100644 --- a/src/app/core/default-pattern-renderer/default-pattern-renderer.component.html +++ b/src/app/core/default-pattern-renderer/default-pattern-renderer.component.html @@ -5,9 +5,8 @@ [iconEdit]="true" [iconUrl]="pattern?.iconUrl" (iconEditClicked)="editIcon()"> - - + copyright @@ -60,7 +59,7 @@
diff --git a/src/app/design-model-module/service/design-model.service.ts b/src/app/design-model-module/service/design-model.service.ts index 1f78989a..9b25ccba 100644 --- a/src/app/design-model-module/service/design-model.service.ts +++ b/src/app/design-model-module/service/design-model.service.ts @@ -173,7 +173,7 @@ export class DesignModelService implements GraphDataService, GraphDataSavePatter createLink( url, edge: DirectedEdgeModel | UndirectedEdgeModel | AddDirectedEdgeToViewRequest | AddUndirectedEdgeToViewRequest - ): Observable> { + ): Observable> { return this.httpClient.post(url, edge, { observe: 'response' }); } diff --git a/src/app/developer-management/developer-management-list/developer-management-list.component.html b/src/app/developer-management/developer-management-list/developer-management-list.component.html index 464191c2..3da68e7e 100644 --- a/src/app/developer-management/developer-management-list/developer-management-list.component.html +++ b/src/app/developer-management/developer-management-list/developer-management-list.component.html @@ -1 +1 @@ -

developer-management-list works!

+

Under construction, next release :)

diff --git a/src/app/developer-management/developer-management-list/developer-management-list.component.spec.ts b/src/app/developer-management/developer-management-list/developer-management-list.component.spec.ts index 24654acd..9d7c1975 100644 --- a/src/app/developer-management/developer-management-list/developer-management-list.component.spec.ts +++ b/src/app/developer-management/developer-management-list/developer-management-list.component.spec.ts @@ -19,7 +19,7 @@ describe('DeveloperManagementListComponent', () => { fixture.detectChanges(); }); - it('should create', () => { - expect(component).toBeTruthy(); - }); + // it('should create', () => { + // expect(component).toBeTruthy(); + // }); }); diff --git a/src/app/developer-management/developer-management-list/developer-management-list.component.ts b/src/app/developer-management/developer-management-list/developer-management-list.component.ts index 65a3ea27..36f817da 100644 --- a/src/app/developer-management/developer-management-list/developer-management-list.component.ts +++ b/src/app/developer-management/developer-management-list/developer-management-list.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; @Component({ selector: 'pp-developer-management-list', @@ -7,10 +8,12 @@ import { Component, OnInit } from '@angular/core'; }) export class DeveloperManagementListComponent implements OnInit { - constructor() { - } + constructor( + private auth: AuthenticationService + ) { } ngOnInit(): void { + this.auth.refreshToken(); } } diff --git a/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.html b/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.html deleted file mode 100644 index 5b2813ee..00000000 --- a/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.html +++ /dev/null @@ -1,15 +0,0 @@ -

{{data.name}}

-
- - Input - - - - Issue Description - - -
-
- - -
diff --git a/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.scss b/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.scss deleted file mode 100644 index 59840755..00000000 --- a/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.scss +++ /dev/null @@ -1,4 +0,0 @@ -.mat-form-field.mat-form-field { - width: 80%; - font-size: 16px; -} diff --git a/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.ts b/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.ts deleted file mode 100644 index 9077db7e..00000000 --- a/src/app/issue-management/issue-create-dialog/issue-create-dialog.component.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Component, Inject } from '@angular/core'; -import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { Issue } from 'src/app/core/issue-management'; - -export interface DialogData { - description: string; - name: string; -} - -@Component({ - selector: 'pp-issue-create-dialog', - templateUrl: './issue-create-dialog.component.html', - styleUrls: ['./issue-create-dialog.component.scss'] -}) -export class IssueCreateDialogComponent { - - constructor( - public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: Issue) { - } - - cancel(): void { - this.dialogRef.close(); - } - -} diff --git a/src/app/issue-management/issue-management-detail/issue-management-detail.component.html b/src/app/issue-management/issue-management-detail/issue-management-detail.component.html index 405f0c0b..a1bc150b 100644 --- a/src/app/issue-management/issue-management-detail/issue-management-detail.component.html +++ b/src/app/issue-management/issue-management-detail/issue-management-detail.component.html @@ -1,61 +1,73 @@ -
+ + + + + +
+
+ +
+ + Name + + Insert a name + - -
- - Name - - Insert a name - -
- - - Description - - Pls insert a describtion + Please insert a description + - + + -
- -
+ + -
-
- - Pattern Language - - - {{language.name}} - - - -
-
- -
-
+ -
- - - -
- -
- - - -
- - -
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ + + + +
+ +
diff --git a/src/app/issue-management/issue-management-detail/issue-management-detail.component.scss b/src/app/issue-management/issue-management-detail/issue-management-detail.component.scss index 7bf4a6a0..23806727 100644 --- a/src/app/issue-management/issue-management-detail/issue-management-detail.component.scss +++ b/src/app/issue-management/issue-management-detail/issue-management-detail.component.scss @@ -1,44 +1,17 @@ -.container { - border-style: groove; - width: 100%; - display: flex; /* or inline-flex */ - flex-direction: column; - justify-content: center; - align-items: stretch; +/*! + * Copyright (c) 2018 University of Stuttgart. + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Eclipse Public License 2.0 which is available at + * http://www.eclipse.org/legal/epl-2.0, or the Apache Software License 2.0 + * which is available at https://www.apache.org/licenses/LICENSE-2.0. + * + * SPDX-License-Identifier: EPL-2.0 OR Apache-2.0 + */ - .container-candidate { - display: flex; /* or inline-flex */ - flex-direction: row; - justify-content: center; - align-items: center; - - .language-select { - flex: 1; - } - - .language-button { - padding-left: 8px; - } - } - - .container-rating { - width: 100%; - border-style: groove; - padding-top: 16px; - } - - .container-button { - border-style: groove; - padding-top: 16px; - display: flex; - flex-direction: row; - justify-content: space-around; - } -} - -.mat-form-field { - padding-bottom: 8px; - border-style: groove; - width: 100%; - font-size: 16px; +.spacer { + flex: 1 1 auto; } diff --git a/src/app/issue-management/issue-management-detail/issue-management-detail.component.ts b/src/app/issue-management/issue-management-detail/issue-management-detail.component.ts index 16769571..125d1d82 100644 --- a/src/app/issue-management/issue-management-detail/issue-management-detail.component.ts +++ b/src/app/issue-management/issue-management-detail/issue-management-detail.component.ts @@ -1,111 +1,301 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { IssueCommentRatingEvent } from 'src/app/core/component/comment-list/comment-list.component'; +import { Component, OnInit, Input, Output, EventEmitter, ElementRef, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core'; import { IssueManagementStore } from '../../core/issue-management/_store/issue-management-store'; -import { Router } from '@angular/router'; +import { Router, ActivatedRoute } from '@angular/router'; import { PatternLanguageService } from 'src/app/core/service/pattern-language.service'; import PatternLanguageModel from 'src/app/core/model/hal/pattern-language-model.model'; -import { Issue, IssueComment, IssueManagementService } from 'src/app/core/issue-management'; -import { Rating } from 'src/app/core/model/rating.enum'; -import { Candidate } from 'src/app/core/candidate-management'; +import { Issue, IssueManagementService } from 'src/app/core/issue-management'; +import { Candidate, CandidateManagementStore } from 'src/app/core/candidate-management'; +import { AuthorManagementService, AuthorModelRequest, AuthorModel, Author } from 'src/app/core/author-management'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; +import PatternLanguageSchemaModel from 'src/app/core/model/pattern-language-schema.model'; +import { MatDialog } from '@angular/material/dialog'; +import { ConfirmDialogComponent } from 'src/app/core/component/confirm-dialog/confirm-dialog.component'; +import { patternLanguageNone } from 'src/app/core/component/pattern-language-picker/pattern-language-picker.component'; +import { PAComment, PAEvidence, RatingEventModel, RatingModelRequest } from 'src/app/core/shared'; +import { AuthorEventModel } from 'src/app/core/shared/_models/autor-event.model'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; @Component({ selector: 'pp-issue-management-detail', templateUrl: './issue-management-detail.component.html', styleUrls: ['./issue-management-detail.component.scss'] }) -export class IssueManagementDetailComponent implements OnInit { +export class IssueManagementDetailComponent implements OnInit, AfterViewInit { - @Input() issue: Issue; - @Output() changed = new EventEmitter(); + @ViewChild('issueView') issueDiv: ElementRef; + issueHeight; - public disabled = true; - public patternLanguages: PatternLanguageModel[]; - public patternLanguageSelected: string; + public patternLanguageSelected: PatternLanguageSchemaModel = patternLanguageNone; + public issue: Issue; private oldIssue: Issue; + disabled = true; + settingsDisabled = true; + candidate = false; + treshold = true; + constructor( private issueManagementService: IssueManagementService, public issueManagementStore: IssueManagementStore, + public candidateManagementStore: CandidateManagementStore, + private p: PrivilegeService, private router: Router, - private patternLanguageService: PatternLanguageService, - ) { - } + private activeRoute: ActivatedRoute, + public dialog: MatDialog, + private cdRef: ChangeDetectorRef, + private auth: AuthenticationService + ) { } ngOnInit(): void { - this.getPatternLanguages(); - } + this.issueManagementStore.issue.subscribe(_issue => { + + if (_issue && this.router.url.includes('detail')) { + this.disabled = true; + this.settingsDisabled = false; + this.issue = _issue; + + } else if (_issue && this.router.url.includes('edit')) { + this.settingsDisabled = false; + this.issue = _issue; + this.edit(); - getPatternLanguages() { - this.patternLanguageService.getPatternLanguages().subscribe(result => { - console.log(result); - this.patternLanguages = result; + } else if (!_issue && window.history.state.data) { + this.issue = window.history.state.data as Issue; + } else { + this.disabled = false; + this.issue = new Issue(); + // Preset author + this.auth.user.subscribe(_user => { + if (_user && !this.issue.authors) this.issue.authors = [new AuthorModel(_user.id, Author.OWNER, _user.name)]; + }) + } + this.treshold = !(this.issue.rating >= 3); + this.p.isMaintainerOrOwner(_issue.authors, 'ISSUE_DELETE_ALL') + .subscribe(result => { + this.settingsDisabled = !result; + }) }); + + + } + + ngAfterViewInit(): void { + this.setCommentSectionHeight(); } + /** BUTTONS */ edit() { - console.log('Edit', this.issue); this.oldIssue = Object.assign({}, this.issue); this.disabled = !this.disabled; } cancel() { + if (!this.oldIssue) this.exit(); this.issue = this.oldIssue; this.disabled = !this.disabled; } exit() { - console.log('Exit', this.issue); - this.issue = null; + this.router.navigateByUrl('/issue'); + } + + settings() { + this.router.navigateByUrl('/issue/authors/' + this.issue.name); + } + + /** CANDIDATE */ + patternLanguageSelectedChange(patternLanguage: PatternLanguageSchemaModel) { + this.patternLanguageSelected = patternLanguage; + } + selectLanguage() { + this.candidate = !this.candidate; + } + + createCandidate() { + let confirmDialog = this.dialog.open(ConfirmDialogComponent, { + data: { + title: `Create Candidate out of Issue ${this.issue.name}`, + text: 'Are you sure that you want to create a Pattern Candidate out of this Issue?' + } + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + const content: { [key: string]: string } = {}; + for (let section of this.patternLanguageSelected.patternSchema) { + section.label === 'Context' ? content[section.label] = this.issue.description : content[section.label] = 'Enter your input for this section here.'; + } + const candidate = new Candidate(content, this.issue.name, this.patternLanguageSelected.patternLanguageId, this.issue.authors, this.issue.id) + this.router.navigate(['candidate/create', this.issue.name], { state: { data: candidate } }); + } + }); + + + } + + cancelCandidate() { + this.candidate = !this.candidate; + } + + /** SERVICE */ + /** ISSUE */ + submit() { + this.issue.uri = `/issues/${this.issue.name}` + this.issue.id ? this.update() : this.create(); + this.router.navigate(['./issue/detail', this.issue.name]); + } + + create() { + let authorlist = this.issue.authors; + let first_author = null; + this.auth.user.subscribe(_user => { + if (_user) first_author = _user.id; + }) + + // create + this.issueManagementService.createIssue(this.issue).subscribe(result => { + this.issue = result + + // call update for all additional authors + for(let author of authorlist) { + if(author.userId !== first_author) { + this.issueManagementService.updateAuthorsIssue(this.issue, author).subscribe(result => { + this.issue = result; + }) + } + } + + this.disabled = true; + }); + } update() { this.issueManagementService.updateIssue(this.issue).subscribe(result => { - this.changed.emit(); + this.issue = result; this.disabled = true; - }); + }) } delete() { - console.log('Delete', this.issue); - this.issueManagementService.deleteIssue(this.issue).subscribe(result => { - this.changed.emit(); - this.disabled = true; + let confirmDialog = this.dialog.open(ConfirmDialogComponent, { + data: { + title: `Delete Issue ${this.issue.name}`, + text: 'Are you sure that you want to delete this Issue?' + } + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this.issueManagementService.deleteIssue(this.issue).subscribe(result => { + this.exit(); + }) + } }); } - createComment(issueComment: IssueComment) { - console.log(issueComment); - this.issueManagementService.createComment(this.issue, issueComment).subscribe((result: Issue) => { - console.log('createComment: ', result); + updateRating(ratingRequest: RatingModelRequest) { + this.issueManagementService.updateRatingIssue(this.issue, ratingRequest).subscribe(result => { + this.issue = result; + }); + } + + /** Author */ + updateAuthor(author: AuthorModel) { + if(this.issue.id) { + this.issueManagementService.updateAuthorsIssue(this.issue, author).subscribe(result => { + this.issue = result; + }); + } else { + // not yet created - only save locally + if(!this.issue.authors) { + this.issue.authors = [] + } + this.issue.authors.push(author) + } + } + + deleteAuthor(author: AuthorModel) { + if(this.issue.id) { + this.issueManagementService.deleteAuthorIssue(author, this.issue).subscribe(result => { + this.issue = result; + }); + } else { + if(this.issue.authors) { + // not yet created - only save locally + const authorIndex = this.issue.authors.indexOf(author, 0); + if(authorIndex >= 0) { + this.issue.authors.splice(authorIndex, 1); + } + } + } + } + + /** Comment */ + createComment(comment: PAComment) { + this.issueManagementService.createComment(this.issue, comment).subscribe(result => { this.issue = result; - this.changed.emit(); }); } - updateRating(rating: Rating) { - console.log(this.issue, rating); - this.issueManagementService.updateRating(this.issue, rating).subscribe((result: Issue) => { - console.log('updateRating: ', result); + updateComment(comment: PAComment) { + this.issueManagementService.updateComment(this.issue, comment).subscribe(result => { this.issue = result; - this.changed.emit(); }); } - updateCommentRating(issueCommentRatingEvent: IssueCommentRatingEvent) { - console.log(issueCommentRatingEvent); - this.issueManagementService.updateCommentRating(issueCommentRatingEvent.issueComment, issueCommentRatingEvent.issueCommentRating).subscribe( - (result: Issue) => { - console.log('updateCommentRating: ', result); - this.issue = result; - this.changed.emit(); + deleteComment(comment: PAComment) { + this.issueManagementService.deleteComment(this.issue, comment).subscribe(result => { + this.issue = result; + }); + } + + updateRatingComment(ratingRequest: RatingEventModel) { + this.issueManagementService.updateRatingIssueComment(this.issue, ratingRequest.entity, ratingRequest.rating).subscribe(result => { + this.issue = result; + }) + } + + /** Evidence */ + createEvidence(evidence: PAEvidence) { + this.issueManagementService.createEvidence(this.issue, evidence).subscribe(result => { + this.issue = result; + }); + } + + updateEvidence(evidence: PAEvidence) { + this.issueManagementService.updateEvidence(this.issue, evidence).subscribe(result => { + this.issue = result; + }) + } + + deleteEvidence(evidenceId: string) { + let confirmDialog = this.dialog.open(ConfirmDialogComponent, { + data: { + title: 'Delete Evidence', + text: 'Are you sure that you want to delete this evidence submission?' + } + }); + + confirmDialog.afterClosed().subscribe(result => { + if (result) { + this.issueManagementService.deleteEvidence(this.issue, evidenceId).subscribe(result => { + this.issue = result; + }) } - ); + }); } - createCandidate() { - console.log('Create Candidate: ', this.patternLanguageSelected); - const candidate = new Candidate(this.issue.description, this.issue.name, this.patternLanguageSelected); - this.router.navigate(['candidate/create', this.issue.name], { state: { data: candidate } }); + updateRatingEvidence(ratingRequest: RatingEventModel) { + this.issueManagementService.updateRatingIssueEvidence(this.issue, ratingRequest.entity, ratingRequest.rating).subscribe(result => { + this.issue = result; + }) } + /** UI */ + + setCommentSectionHeight() { + this.issueHeight = this.issueDiv.nativeElement.offsetHeight; + this.cdRef.detectChanges(); + } } diff --git a/src/app/issue-management/issue-management-list/issue-management-list.component.html b/src/app/issue-management/issue-management-list/issue-management-list.component.html index 2b0040f9..596ba662 100644 --- a/src/app/issue-management/issue-management-list/issue-management-list.component.html +++ b/src/app/issue-management/issue-management-list/issue-management-list.component.html @@ -1,16 +1,44 @@ -
- -
- - - - - -

{{issueDetail.name}}

-

{{issueDetail.description}}

-

Rating {{issueDetail.rating}}

- - -
- + +
+
+ + + + + +

{{issue.name}}

+ + +
Comments: {{issue.comments.length}}
+
+
Rating: {{issue.upVotes.length - issue.downVotes.length}}
+
+
Evidence: {{issue.evidences.length}}
+
+ + + + +
+
+ {{issue.description}} +
+
+ +
+ + +
+
+ +
diff --git a/src/app/issue-management/issue-management-list/issue-management-list.component.scss b/src/app/issue-management/issue-management-list/issue-management-list.component.scss index f52d9f39..f45fccd6 100644 --- a/src/app/issue-management/issue-management-list/issue-management-list.component.scss +++ b/src/app/issue-management/issue-management-list/issue-management-list.component.scss @@ -1,33 +1,37 @@ -.container { - display: flex; /* or inline-flex */ - flex-direction: row; - justify-content: left; - margin-top: 16px; +.issue-list { + overflow-y: scroll; +} - .list { - width: 45%; - margin: 0 16px; - border-style: groove; +.h3 { + max-width: 50%; +} - .mat-list { +.spacer { + width: 16px; + height: 100%; +} - border-style: groove; - overflow: auto; - height: calc(100vh - 64px - 48px - 96px); +.mat-expansion-panel-header-description { + display: flex; + justify-content: flex-end; +} - .new-button { - margin-bottom: 16px; - width: 100%; - } +.panel-content { + display: flex; + flex-direction: row; + justify-content: center; + align-items: flex-start; + // border: groove; + width: 95%; + min-height: fit-content; - .mat-list-item { - border-style: groove; - } - } + .description { + flex: 1; + height: 100%; + width: 100%; } - .detail { - width: 45%; - margin: 0 16px; + .container-rating { + width: 70px; } } diff --git a/src/app/issue-management/issue-management-list/issue-management-list.component.ts b/src/app/issue-management/issue-management-list/issue-management-list.component.ts index 07cbe866..e61247ce 100644 --- a/src/app/issue-management/issue-management-list/issue-management-list.component.ts +++ b/src/app/issue-management/issue-management-list/issue-management-list.component.ts @@ -1,7 +1,8 @@ -import { Component, OnInit } from '@angular/core'; -import { IssueCreateDialogComponent } from '../issue-create-dialog/issue-create-dialog.component'; -import { MatDialog } from '@angular/material/dialog'; -import { Issue, IssueManagementService } from 'src/app/core/issue-management'; +import { ChangeDetectorRef, Component, OnInit } from '@angular/core'; +import { IssueManagementService, Issue, IssueManagementStore } from 'src/app/core/issue-management'; +import { Router, ActivatedRoute } from '@angular/router'; +import { PrivilegeService } from 'src/app/authentication/_services/privilege.service'; +import { PAComment, RatingEventModel, RatingModelRequest } from 'src/app/core/shared'; @Component({ selector: 'pp-issue-management-list', @@ -11,49 +12,88 @@ import { Issue, IssueManagementService } from 'src/app/core/issue-management'; export class IssueManagementListComponent implements OnInit { data: Issue[]; - issueDetail: Issue; + activeIssue: Issue = new Issue(); constructor( - private issueManagmentService: IssueManagementService, - public dialog: MatDialog, - ) { - } + private issueManagementService: IssueManagementService, + public issueManagementStore: IssueManagementStore, + private router: Router, + private activeRoute: ActivatedRoute, + private p: PrivilegeService, + public cdr: ChangeDetectorRef, + ) { } ngOnInit(): void { - this.getAll() - } - - toggleDetail(issueDetail: Issue) { - this.issueDetail = issueDetail; + this.getAll(); } getAll() { - this.issueManagmentService.getAllIssues().subscribe(result => { - console.log(result); + this.issueManagementService.getAllIssues().subscribe(result => { this.data = result; }) } - new(): void { - console.log('New Issue'); - const dialogRef = this.dialog.open(IssueCreateDialogComponent, { - width: '500px', - data: { name: '', description: '' } + /* LIST */ + opened(issue: Issue) { + this.activeIssue = issue; + } + + closed(issue: Issue) { + // IF open issue gets closed again -> comments list hide + if (this.activeIssue.id === issue.id) this.activeIssue = new Issue(); + } + + /* NAVIGATION */ + new() { + this.router.navigate(['./create'], { relativeTo: this.activeRoute.parent }); + } + + detail(issue: Issue) { + this.issueManagementStore.addIssue(issue); + this.router.navigate(['./detail', issue.name], { relativeTo: this.activeRoute.parent }); + } + + edit(issue: Issue) { + this.issueManagementStore.addIssue(issue); + this.router.navigate(['./edit', issue.name], { relativeTo: this.activeRoute.parent }); + } + + /* BACK-END*/ + // RATING + updateRating(ratingRequest: RatingModelRequest) { + this.issueManagementService.updateRatingIssue(this.activeIssue, ratingRequest).subscribe(result => { + this.updateData(result); }); + } - dialogRef.afterClosed().subscribe(result => { - if (result != null) { - this.issueManagmentService.createIssue(result).subscribe(result => { - console.log('Created Issue: ', result); - this.getAll(); - }) - } + // COMMENTS + createComment(comment: PAComment) { + this.issueManagementService.createComment(this.activeIssue, comment).subscribe(result => { + this.updateData(result); }); } - change() { - console.log(event); - this.getAll(); + updateComment(comment: PAComment) { + this.issueManagementService.updateComment(this.activeIssue, comment).subscribe(result => { + this.updateData(result); + }); + } + + deleteComment(comment: PAComment) { + this.issueManagementService.deleteComment(this.activeIssue, comment).subscribe(result => { + this.updateData(result); + }); + } + + updateRatingComment(ratingRequest: RatingEventModel) { + this.issueManagementService.updateRatingIssueComment(this.activeIssue, ratingRequest.entity, ratingRequest.rating).subscribe(result => { + this.updateData(result); + }) } + /* HELPER */ + updateData(issue: Issue) { + let index = this.data.findIndex(_issue => _issue.id === issue.id); + if (index > -1) this.data[index] = issue; + } } diff --git a/src/app/issue-management/issue-management.module.ts b/src/app/issue-management/issue-management.module.ts index 5cdbba5f..26ddba2b 100644 --- a/src/app/issue-management/issue-management.module.ts +++ b/src/app/issue-management/issue-management.module.ts @@ -1,7 +1,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { IssueCreateDialogComponent } from './issue-create-dialog/issue-create-dialog.component'; import { IssueManagementDetailComponent } from './issue-management-detail/issue-management-detail.component'; +import { AuthorManagementListComponent } from '../author-management/author-list/author-list.component'; import { RouterModule } from '@angular/router'; import { MatListModule } from '@angular/material/list'; import { MatExpansionModule } from '@angular/material/expansion'; @@ -9,11 +9,15 @@ import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; import { MatDialogModule } from '@angular/material/dialog'; import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatTableModule } from '@angular/material/table'; +import { MatCheckboxModule } from '@angular/material/checkbox'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { MatInputModule } from '@angular/material/input'; import { CoreModule } from '../core/core.module'; import { MatSelectModule } from '@angular/material/select'; import { IssueManagementListComponent } from './issue-management-list/issue-management-list.component'; +import { MatIconModule } from '@angular/material/icon'; +import { MatToolbarModule } from '@angular/material/toolbar'; export const ISSUE_ROTUES = [ { @@ -22,7 +26,35 @@ export const ISSUE_ROTUES = [ { path: '', component: IssueManagementListComponent - } + }, + { + path: 'create', + component: IssueManagementDetailComponent, + // Will be used in the future + // canActivate: [AuthGuard], + // data: { role: UserRole.MEMBER } + }, + { + path: 'detail/:name', + component: IssueManagementDetailComponent, + // Will be used in the future + // canActivate: [AuthGuard], + // data: { role: UserRole.MEMBER } + }, + { + path: 'edit/:name', + component: IssueManagementDetailComponent, + // Will be used in the future + // canActivate: [AuthGuard], + // data: { role: UserRole.MEMBER } + }, + { + path: 'authors/:name', + component: AuthorManagementListComponent, + // Will be used in the future + // canActivate: [AuthGuard], + // data: { role: UserRole.MEMBER } + }, ] }, ]; @@ -30,8 +62,8 @@ export const ISSUE_ROTUES = [ @NgModule({ declarations: [ IssueManagementListComponent, - IssueCreateDialogComponent, - IssueManagementDetailComponent + IssueManagementDetailComponent, + AuthorManagementListComponent ], imports: [ CommonModule, @@ -43,17 +75,19 @@ export const ISSUE_ROTUES = [ MatButtonModule, MatDialogModule, MatFormFieldModule, + MatTableModule, + MatCheckboxModule, FormsModule, ReactiveFormsModule, MatInputModule, MatSelectModule, + MatIconModule, + MatToolbarModule, ], exports: [ IssueManagementListComponent ], - providers: [], - entryComponents: [ - IssueCreateDialogComponent, + providers: [ ], }) export class IssueManagementModule { diff --git a/src/app/pattern-language-management/create-pattern/create-pattern.component.html b/src/app/pattern-language-management/create-pattern/create-pattern.component.html index 9b874927..1fd01142 100644 --- a/src/app/pattern-language-management/create-pattern/create-pattern.component.html +++ b/src/app/pattern-language-management/create-pattern/create-pattern.component.html @@ -45,6 +45,6 @@

diff --git a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html index cb1e3c14..a36e5385 100644 --- a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html +++ b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.html @@ -13,7 +13,8 @@ --> + (reloadClicked)="reloadPatternRepo()" + [firstAddPrivilegeName]="'PATTERN_LANGUAGE_CREATE'">
@@ -44,11 +45,13 @@ + +
diff --git a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts index 929f63b8..213e57c3 100644 --- a/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts +++ b/src/app/pattern-language-management/pattern-language-management/pattern-language-management.component.ts @@ -27,6 +27,7 @@ import { map } from 'rxjs/operators'; import PatternLanguageModel from '../../core/model/hal/pattern-language-model.model'; import { DeleteConfirmationDialogComponent } from '../../core/component/delete-confirmation-dialog/delete-confirmation-dialog.component'; import { UiFeatures } from '../../core/directives/pattern-atlas-ui-repository-configuration.service'; +import { PrivilegeService } from '../../authentication/_services/privilege.service'; @Component({ selector: 'pp-pattern-language-management', @@ -47,7 +48,8 @@ export class PatternLanguageManagementComponent implements OnInit { private dialog: MatDialog, private _cookieService: CookieService, private _toasterService: ToasterService, - private patternLanguageService: PatternLanguageService) { + private patternLanguageService: PatternLanguageService, + private p: PrivilegeService) { } // function used to sort the patternlanguages (by name) diff --git a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.html b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.html index 79944959..c0853259 100644 --- a/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.html +++ b/src/app/pattern-view-management/pattern-view-management/pattern-view-management.component.html @@ -1,7 +1,8 @@ + (addClicked)="createView()" + [firstAddPrivilegeName]="'PATTERN_VIEW_CREATE'">
@@ -20,11 +21,11 @@ alt=""/>
-
diff --git a/src/app/user-management/user-info/user-info.component.html b/src/app/user-management/user-info/user-info.component.html new file mode 100644 index 00000000..e90dca3b --- /dev/null +++ b/src/app/user-management/user-info/user-info.component.html @@ -0,0 +1,174 @@ +
+ +
+ + + + + Your username + + + + + + Your e-mail address + + + + + + + + + + + + Please enter your old password + + + + + + + + Please enter new password + + + + + + + + Passwords do not match + + +
+ + +
+ + Change Password + +
+ +
+ + +
+ +
+ + +
+ + + + +

Issues

+ +
+ {{issue.name}} +
+ + Did not author any issues +

Submitted Evidence

+ +
+ {{issueEvidence.title}} +
+ + Did not submit any evidence on issues +

Comments

+ +
+ {{issueComment.text}} +
+ + Did not comment on any issues +

Ratings

+ +
+ {{issueRating.name}} +
+ + Did not rate any issues + + + +

Pattern Candidate

+ +
+ {{candidate.name}} +
+ + Did not author any pattern candidates +

Submitted Evidence

+ +
+ {{evidence.title}} +
+ + Did not submit any evidence on pattern candidates +

Comments

+ +
+ {{comment.text}} +
+ + Did not comment on any pattern candidates +

Ratings

+ +
+ {{rating.name}} +
+ + Did not rate any pattern candidates + + + +

Approved Pattern

+ +
+ {{patterns.name}} +
+ + Did not author any approved pattern +

Submitted Evidence

+ +
+ {{evidence.title}} +
+ + Did not submit any evidence on approved pattern +

Comments

+ +
+ {{comment.text}} +
+ + Did not comment on any approved pattern +

Ratings

+ +
+ {{rating.name}} +
+ + Did not rate any approved pattern + +
diff --git a/src/app/user-management/user-info/user-info.component.scss b/src/app/user-management/user-info/user-info.component.scss new file mode 100644 index 00000000..03554286 --- /dev/null +++ b/src/app/user-management/user-info/user-info.component.scss @@ -0,0 +1,45 @@ +.info-item { + padding-bottom: 8px; + display: flex; + flex-direction: column; + + .title { + // font-weight: bold; + } + + .context { + padding-top: 4px; + } +} + +.info-item:hover { + background-color: #f8f8f8; +} + +.mat-card { + min-height: 1rem; +} + +.container { + margin: 8px; + display: grid; + grid-template-columns: 100%; + grid-template-rows: auto, auto, auto, auto; + row-gap: 8px; +} + +.wrapper-info { + grid-area: 1, 1, 1, 1; +} + +.wrapper-issue { + grid-area: 2, 1, 2, 1; +} + +.wrapper-candidate { + grid-area: 3, 1, 3, 1; +} + +.wrapper-pattern { + grid-area: 4, 1, 4, 1; +} diff --git a/src/app/user-management/user-info/user-info.component.spec.ts b/src/app/user-management/user-info/user-info.component.spec.ts new file mode 100644 index 00000000..fe14b805 --- /dev/null +++ b/src/app/user-management/user-info/user-info.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserInfoComponent } from './user-info.component'; + +describe('UserInfoComponent', () => { + let component: UserInfoComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserInfoComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserInfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + // it('should create', () => { + // expect(component).toBeTruthy(); + // }); +}); diff --git a/src/app/user-management/user-info/user-info.component.ts b/src/app/user-management/user-info/user-info.component.ts new file mode 100644 index 00000000..fb54ab8b --- /dev/null +++ b/src/app/user-management/user-info/user-info.component.ts @@ -0,0 +1,102 @@ +import { Component, OnInit } from '@angular/core'; +import { UserService, PAUser } from 'src/app/core/user-management'; +import { AuthenticationService } from 'src/app/authentication/_services/authentication.service'; +import { Router } from '@angular/router'; +import { FormGroup, Validators, FormBuilder } from '@angular/forms'; +import { ValidatePassword } from 'src/app/admin-management/user/user-detail/user-detail.component'; +import { Issue } from 'src/app/core/issue-management'; +import { environment } from 'src/environments/environment'; + +@Component({ + selector: 'pp-user-info', + templateUrl: './user-info.component.html', + styleUrls: ['./user-info.component.scss'] +}) +export class UserInfoComponent implements OnInit { + + user: PAUser; + oldUser: PAUser; + passwordForm: FormGroup; + + disabled = true; + password = false; + + oldPasswordHide = true; + passwordHide = true; + confirmPasswordHide = true; + + accountManagementUrl = null; + + constructor( + private userManagementService: UserService, + private userFormBuilder: FormBuilder, + private auth: AuthenticationService, + public router: Router, + ) { } + + ngOnInit(): void { + this.passwordForm = this.userFormBuilder.group({ + oldPassword: [null], + password: [null, [Validators.required]], + confirmPassword: [null, [Validators.required]] + }, { + validator: ValidatePassword + } + ); + + this.auth.user.subscribe(_user => { + if (_user) { + this.userManagementService.getUser(_user.id).subscribe(result => { + this.user = result; + }) + } else { + console.error('This should not work'); + } + }) + + this.accountManagementUrl = environment['accountManagementUrl'] + } + /* PASSWORD */ + editPassword() { + this.password = !this.password; + } + + updatePassword() { + this.user.oldPassword = this.passwordForm.get('oldPassword').value; + this.user.password = this.passwordForm.get('password').value; + this.userManagementService.updateUser(this.user).subscribe(result => { + this.cancelPassword(); + }); + } + + cancelPassword() { + this.password = !this.password; + } + + /* USER INFO */ + + submit() { + this.userManagementService.updateUser(this.user).subscribe(result => { + this.user = result; + this.disabled = true; + }) + } + + edit() { + this.oldUser = Object.assign({}, this.user); + this.disabled = !this.disabled; + } + + reset() { + this.user = this.oldUser; + this.disabled = !this.disabled; + } + + delete() { + console.log('delete'); + } + + detailIssue(issue: Issue) { + this.router.navigate(['issue/detail', issue.name], { state: { data: issue } }); + } +} diff --git a/src/app/user-management/user-management-list/user-management-list.component.html b/src/app/user-management/user-management-list/user-management-list.component.html deleted file mode 100644 index 650fe003..00000000 --- a/src/app/user-management/user-management-list/user-management-list.component.html +++ /dev/null @@ -1 +0,0 @@ -

user-management-home works!

diff --git a/src/app/user-management/user-management-list/user-management-list.component.ts b/src/app/user-management/user-management-list/user-management-list.component.ts deleted file mode 100644 index 53a4c059..00000000 --- a/src/app/user-management/user-management-list/user-management-list.component.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { Component, OnInit } from '@angular/core'; -import { UserService } from 'src/app/core/user-management'; - -@Component({ - selector: 'pp-user-management-list', - templateUrl: './user-management-list.component.html', - styleUrls: ['./user-management-list.component.scss'] -}) -export class UserManagementListComponent implements OnInit { - - constructor( - private userService: UserService, - ) { - } - - private data: any; - - ngOnInit(): void { - this.userService.getUserWithToken().subscribe(result => { - console.log(result) - }); - } - -} diff --git a/src/app/user-management/user-management.module.ts b/src/app/user-management/user-management.module.ts index a59e7f61..c91cbaa3 100644 --- a/src/app/user-management/user-management.module.ts +++ b/src/app/user-management/user-management.module.ts @@ -1,24 +1,40 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { UserManagementListComponent } from './user-management-list/user-management-list.component'; import { RouterModule } from '@angular/router'; import { CoreModule } from '../core/core.module'; +import { UserInfoComponent } from './user-info/user-info.component'; +import { FormsModule, ReactiveFormsModule } from '@angular/forms'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatButtonModule } from '@angular/material/button'; +import { MatCardModule } from '@angular/material/card'; +import { MatListModule } from '@angular/material/list'; +import { MatIconModule } from '@angular/material/icon'; export const USER_MANAGEMENT_ROUTES = [ { - path: '', component: UserManagementListComponent, + path: '', component: UserInfoComponent, }, ]; @NgModule({ declarations: [ - UserManagementListComponent + UserInfoComponent ], imports: [ CommonModule, CoreModule, RouterModule.forChild(USER_MANAGEMENT_ROUTES), - + MatFormFieldModule, + MatCardModule, + MatListModule, + MatIconModule, + MatButtonModule, + //FORM + MatInputModule, + FormsModule, + ReactiveFormsModule, + MatButtonModule, ], exports: [], providers: [] diff --git a/src/assets/env.js b/src/assets/env.js index fd453139..ac6f01ef 100644 --- a/src/assets/env.js +++ b/src/assets/env.js @@ -11,4 +11,5 @@ window['env']['LATEX_RENDERER_PORT'] = 5030; window['env']['PATTERN_ATLAS_API_PORT'] = 1977; window['env']['URL_SCHEME'] = 'http'; + window['env']['AUTH_REALM_URL'] = 'http://localhost:8080/realms/patternatlas'; })(this); diff --git a/src/assets/env.js.template b/src/assets/env.js.template index ebb42c6c..1fb7f497 100644 --- a/src/assets/env.js.template +++ b/src/assets/env.js.template @@ -10,6 +10,7 @@ window['env']['LATEX_RENDERER_PORT'] = '${LATEX_RENDERER_PORT}'; window['env']['PATTERN_ATLAS_API_PORT'] = '${PATTERN_ATLAS_API_PORT}'; window['env']['URL_SCHEME'] = '${URL_SCHEME}'; + window['env']['AUTH_REALM_URL'] = '${AUTH_REALM_URL}'; })(this); diff --git a/src/assets/settings_features/default_features.json b/src/assets/settings_features/default_features.json index 6dffd774..afd1ae16 100644 --- a/src/assets/settings_features/default_features.json +++ b/src/assets/settings_features/default_features.json @@ -1,11 +1,12 @@ { "features": { "designModel": false, - "patternCandidate": false, + "patternCandidate": true, "patternViews": true, - "issue": false, + "issue": true, "editing": true, "showSettings": false, + "authentication": true, "planqkUi": true } } diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts index cac8cd82..b5afe0bc 100644 --- a/src/environments/environment.prod.ts +++ b/src/environments/environment.prod.ts @@ -13,20 +13,27 @@ */ const urlScheme = `${window['env'] && window['env']['URL_SCHEME'] ? window['env']['URL_SCHEME'] : 'http'}`; +const authRealm = `${window['env'] && window['env']['AUTH_REALM_URL'] ? window['env']['AUTH_REALM_URL'] : ''}`; +const apiUrl = window['env'] && window['env']['PATTERN_ATLAS_API_HOST_NAME'] && window['env']['PATTERN_ATLAS_API_PORT'] + ? `${urlScheme}://${window['env']['PATTERN_ATLAS_API_HOST_NAME']}:${window['env']['PATTERN_ATLAS_API_PORT']}/patternatlas` + : 'http://localhost:1977/patternatlas' export const environment = { PRODUCTION: true, API_URL: window['env'] && window['env']['PATTERN_ATLAS_API_HOST_NAME'] && window['env']['PATTERN_ATLAS_API_PORT'] ? `${urlScheme}://${window['env']['PATTERN_ATLAS_API_HOST_NAME']}:${window['env']['PATTERN_ATLAS_API_PORT']}/patternatlas` : 'http://localhost:1977/patternatlas', - authorizeUrl: 'http://localhost:8081/oauth/authorize?', - tokenUrl: 'http://localhost:8081/oauth/token', - tokenRevokeUrl: 'http://localhost:8081/oauth/revoke_token', - signinUrl: 'http://localhost:8081/user/create', - userInfoUrl: 'http://localhost:8081/user_info', + repositoryUrl: 'http://localhost:1977/patternatlas', + authorizeUrl: `${authRealm}/protocol/openid-connect/auth?`, + tokenUrl: `${authRealm}/protocol/openid-connect/token`, + tokenRevokeUrl: `${authRealm}/protocol/openid-connect/revoke`, + signinUrl: `${authRealm}/clients-registrations/openid-connect`, + userInfoUrl: `${apiUrl}/users/userinfo`, + logoutUrl: `${authRealm}/protocol/openid-connect/logout?`, + // Account management + accountManagementUrl: `${authRealm}/account?referrer=patternatlas`, clientIdPrivate: 'pattern-pedia-private', - clientSecret: '', - clientIdPublic: 'pattern-pedia-public', - clientIdPKCE: 'pattern-pedia-pkce', + clientIdPublic: 'patternatlas', + clientIdPKCE: 'patternatlas', CONFIG_SERVER_URL: window['env'] && window['env']['CONFIG_SERVER_HOST_NAME'] && window['env']['CONFIG_SERVER_PORT'] ? `${urlScheme}://${window['env']['CONFIG_SERVER_HOST_NAME']}:${window['env']['CONFIG_SERVER_PORT']}/v2/keys` diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 024ace44..0545b110 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -16,26 +16,30 @@ // `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`. // The list of file replacements can be found in `angular.json`. -const urlScheme = `${window['env'] && window['env']['URL_SCHEME'] ? window['env']['URL_SCHEME'] : 'http'}` +const urlScheme = `${window['env'] && window['env']['URL_SCHEME'] ? window['env']['URL_SCHEME'] : 'http'}`; +const authRealm = `${window['env'] && window['env']['AUTH_REALM_URL'] ? window['env']['AUTH_REALM_URL'] : ''}`; +const apiUrl = window['env'] && window['env']['PATTERN_ATLAS_API_HOST_NAME'] && window['env']['PATTERN_ATLAS_API_PORT'] + ? `${urlScheme}://${window['env']['PATTERN_ATLAS_API_HOST_NAME']}:${window['env']['PATTERN_ATLAS_API_PORT']}/patternatlas` + : 'http://localhost:1977/patternatlas' export const environment = { PRODUCTION: window['env'] && window['env']['production'] || false, - API_URL: - window['env'] && window['env']['PATTERN_ATLAS_API_HOST_NAME'] && window['env']['PATTERN_ATLAS_API_PORT'] - ? `${urlScheme}://${window['env']['PATTERN_ATLAS_API_HOST_NAME']}:${window['env']['PATTERN_ATLAS_API_PORT']}/patternatlas` - : 'http://localhost:1977/patternatlas', + API_URL: apiUrl, LATEX_RENDERER_API_URL: window['env'] && window['env']['LATEX_RENDERER_HOST_NAME'] && window['env']['LATEX_RENDERER_PORT'] ? `${urlScheme}://${window['env']['LATEX_RENDERER_HOST_NAME']}:${window['env']['LATEX_RENDERER_PORT']}` : 'http://localhost:5030', - authorizeUrl: 'http://localhost:8081/oauth/authorize?', - tokenUrl: 'http://localhost:8081/oauth/token', - tokenRevokeUrl: 'http://localhost:8081/oauth/revoke_token', - signinUrl: 'http://localhost:8081/user/create', - userInfoUrl: 'http://localhost:8081/user_info', + repositoryUrl: 'http://localhost:1977/patternatlas', + authorizeUrl: `${authRealm}/protocol/openid-connect/auth?`, + tokenUrl: `${authRealm}/protocol/openid-connect/token`, + tokenRevokeUrl: `${authRealm}/protocol/openid-connect/revoke`, + signinUrl: `${authRealm}/clients-registrations/openid-connect`, + userInfoUrl: `${apiUrl}/users/userinfo`, + logoutUrl: `${authRealm}/protocol/openid-connect/logout?`, + // Account management + accountManagementUrl: `${authRealm}/account?referrer=patternatlas`, clientIdPrivate: 'pattern-pedia-private', - clientSecret: 'pattern-pedia-secret', - clientIdPublic: 'pattern-pedia-public', - clientIdPKCE: 'pattern-pedia-pkce', + clientIdPublic: 'patternatlas', + clientIdPKCE: 'patternatlas', CONFIG_SERVER_URL: window['env'] && window['env']['CONFIG_SERVER_HOST_NAME'] && window['env']['CONFIG_SERVER_PORT'] ? `${urlScheme}://${window['env']['CONFIG_SERVER_HOST_NAME']}:${window['env']['CONFIG_SERVER_PORT']}/v2/keys` diff --git a/src/styles.scss b/src/styles.scss index 0e483a8c..d7835b44 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -99,6 +99,7 @@ $planqk-theme: mat-light-theme($planqk-palette-primary, $planqk-palette-accent); body { font-family: sans-serif; margin: 0; + background-color: rgb(255, 255, 255); } .material-icons { @@ -313,6 +314,10 @@ body { background-color: #fff; } +.mat-form-field { + width: 100%; +} + .horiz-centered { display: inline-flex; align-items: center; @@ -327,3 +332,61 @@ body { margin-right: 10px !important; } +$break-small: 759px; +$break-large: 760px; + +.container-double { + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: flex-start; +} + +.left { + margin: 8px; + display: flex; + flex-direction: column; + align-items: stretch; + + @media screen and (max-width: $break-small) { + width: 100%; + } + @media screen and (min-width: $break-large) { + max-width: 60%; + flex: 2 350px; + } +} + +.right { + margin: 8px; + @media screen and (max-width: $break-small) { + width: 100%; + } + @media screen and (min-width: $break-large) { + max-width: 500px; + flex: 1 350px; + } +} + +.scrollable-double { + @media screen and (max-width: $break-small) { + height: 100%; + } + @media screen and (min-width: $break-large) { + // border: 1px solid red; + min-height: 500px; + height: calc(100vh - 64px - 48px - 64px); + } +} + +.detail-component { + height: 100%; + width: 100%; + padding: 4px 0; +} + +.buttons { + display: flex; + flex-direction: row; + justify-content: space-around; +} diff --git a/yarn.lock b/yarn.lock index 3e2d83e7..0b5b960a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6099,10 +6099,10 @@ karma@~4.0.0: tmp "0.0.33" useragent "2.3.0" -katex@^0.11.1: - version "0.11.1" - resolved "https://registry.yarnpkg.com/katex/-/katex-0.11.1.tgz#df30ca40c565c9df01a466a00d53e079e84ffaa2" - integrity sha512-5oANDICCTX0NqYIyAiFCCwjQ7ERu3DQG2JFHLbYOf+fXaMoH8eg/zOq5WSYJsKMi/QebW+Eh3gSM+oss1H/bww== +katex@^0.12.0: + version "0.12.0" + resolved "https://registry.yarnpkg.com/katex/-/katex-0.12.0.tgz#2fb1c665dbd2b043edcf8a1f5c555f46beaa0cb9" + integrity sha512-y+8btoc/CK70XqcHqjxiGWBOeIL8upbS0peTPXTvgrh21n1RiWWcIpSWM+4uXq+IAgNh9YYQWdc7LVDPDAEEAg== dependencies: commander "^2.19.0" @@ -6430,11 +6430,12 @@ markdown-escapes@^1.0.0: resolved "https://registry.yarnpkg.com/markdown-escapes/-/markdown-escapes-1.0.4.tgz#c95415ef451499d7602b91095f3c8e8975f78535" integrity sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg== -"markdown-it-katex@github:MicroDroid/markdown-it-katex": - version "3.0.0" - resolved "https://codeload.github.com/MicroDroid/markdown-it-katex/tar.gz/d6b159a38997ba628900eb9e58e34cbe950b7ccd" +"markdown-it-katexx@3.2.0 ": + version "3.2.0" + resolved "https://registry.yarnpkg.com/markdown-it-katexx/-/markdown-it-katexx-3.2.0.tgz#8ba0bf5a81268b8b7ed694d3349f473d7ecd03eb" + integrity sha512-fR6ZHNnQa4SzAIj8jxrEAtp3olE3bnBFlcEUk460fbCAqap0ycuS3QrQ38pK+/fHmjJZD1gmSnlkM1QfkAYCZA== dependencies: - katex "^0.11.1" + katex "^0.12.0" markdown-it@10.0.0: version "10.0.0"