From d656e5883f809baf1172b79373d06338edafb037 Mon Sep 17 00:00:00 2001 From: lastminutediorama Date: Mon, 19 Aug 2024 10:48:47 -0500 Subject: [PATCH] move to separate fflagged component --- .../plan/area-notes/area-notes.component.html | 74 +----------- .../plan/area-notes/area-notes.component.scss | 31 ----- .../area-scrolling-notes.component.html | 68 +++++++++++ .../area-scrolling-notes.component.scss | 111 ++++++++++++++++++ .../area-scrolling-notes.component.spec.ts | 38 ++++++ .../area-scrolling-notes.component.ts | 88 ++++++++++++++ .../src/app/plan/plan.component.html | 2 +- src/interface/src/app/plan/plan.module.ts | 2 + 8 files changed, 310 insertions(+), 104 deletions(-) create mode 100644 src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.html create mode 100644 src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.scss create mode 100644 src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.spec.ts create mode 100644 src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.ts diff --git a/src/interface/src/app/plan/area-notes/area-notes.component.html b/src/interface/src/app/plan/area-notes/area-notes.component.html index 481e44cb6..ac5b4b947 100644 --- a/src/interface/src/app/plan/area-notes/area-notes.component.html +++ b/src/interface/src/app/plan/area-notes/area-notes.component.html @@ -1,6 +1,5 @@ -
Notes
- -
+
Notes
+
{{ note.user_name }}
@@ -63,72 +62,3 @@ - - -
-
-
-
-
{{ note.user_name }}
-
{{ note.created_at | date }}
-
-
- {{ note.content }} -
-
-
- - - - -
-
-
- - - - - - - - - - - - - - diff --git a/src/interface/src/app/plan/area-notes/area-notes.component.scss b/src/interface/src/app/plan/area-notes/area-notes.component.scss index 3e8c5e8ba..c3ba694d1 100644 --- a/src/interface/src/app/plan/area-notes/area-notes.component.scss +++ b/src/interface/src/app/plan/area-notes/area-notes.component.scss @@ -82,34 +82,3 @@ textarea { color: $color-error; @include regular-paragraph(); } - -// feature flagged additions -.notes-header { - @include h4(); - width: 100%; - padding: 16px 229px 16px 16px; - gap: 8px; - border-bottom: 1px $color-soft-gray solid; -} - -.notes .grow { // fflagged section - flex-grow: 1; -} - -.note-right { - width: 28px; -} - -.add-note-field { - height: 70px; - flex-shrink: 0; - border-top: 1px $color-soft-gray solid; -} - -.note-enclosed { - padding: 16px; - color: $color-black; - display: flex; - flex-direction: row; - justify-content: space-between; -} diff --git a/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.html b/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.html new file mode 100644 index 000000000..b78d57be1 --- /dev/null +++ b/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.html @@ -0,0 +1,68 @@ +
Notes
+
+
+
+
+
{{ note.user_name }}
+
{{ note.created_at | date }}
+
+
+ {{ note.content }} +
+
+
+ + + + +
+
+
+ + + + + + + + + + + + + + diff --git a/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.scss b/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.scss new file mode 100644 index 000000000..275c25b9c --- /dev/null +++ b/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.scss @@ -0,0 +1,111 @@ +@import 'colors'; +@import 'mixins'; + +:host { + display: flex; + flex-direction: column; + overflow: hidden; + height: 100%; + + ::ng-deep .mat-form-field-wrapper { + margin: 0; + padding: 8px; + } + + ::ng-deep { + .mat-form-field-outline-start, + .mat-form-field-outline-end { + background-color: $color-light-gray; + } + + .mat-form-field-infix { + padding-bottom: 10px; + border-top: 0; + top: -2px; + padding-top: 21px; + } + } + + mat-spinner { + padding: 2px; + top: 2px; + } +} + +.notes { + overflow-y: auto; + flex: 1; + flex-grow: 1; +} + +.note { + padding: 16px; + color: $color-black; +} + +.note-head { + @include small-input-label(); + display: flex; + gap: 8px; + margin-bottom: 8px; +} + +.date { + color: $color-md-gray; + font-weight: 400; +} + +.arrow-up { + color: #767575; + + &.active { + cursor: pointer; + color: $color-standard-blue; + } +} + +textarea { + resize: none; + overflow: hidden; +} + +.delete-note-menu { + width: 100px; +} + +.delete-note-button { + .delete-icon { + color: $color-error; + line-height: 20px; + width: 20px; + } + + color: $color-error; + @include regular-paragraph(); +} + +.notes-header { + @include h4(); + width: 100%; + padding: 16px 229px 16px 16px; + gap: 8px; + border-bottom: 1px $color-soft-gray solid; +} + +.note-right { + width: 28px; +} + +.add-note-field { + height: 70px; + flex-shrink: 0; + border-top: 1px $color-soft-gray solid; +} + +.note-enclosed { + padding: 16px; + color: $color-black; + display: flex; + flex-direction: row; + justify-content: space-between; +} diff --git a/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.spec.ts b/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.spec.ts new file mode 100644 index 000000000..f4e8a216a --- /dev/null +++ b/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.spec.ts @@ -0,0 +1,38 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { AuthService, PlanNotesService } from '@services'; +import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog'; +import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar'; + +import { AreaScrollingNotesComponent } from './area-scrolling-notes.component'; +import { MockProvider } from 'ng-mocks'; +import { of } from 'rxjs'; + +describe('AreaScrollingNotesComponent', () => { + let component: AreaScrollingNotesComponent; + let fixture: ComponentFixture; + let fakeAuthService: AuthService; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [AreaScrollingNotesComponent], + imports: [MatDialogModule, MatSnackBarModule], + providers: [ + { + provide: AuthService, + useValue: fakeAuthService, + }, + MockProvider(PlanNotesService, { + getNotes: () => of([]), + }), + ], + }).compileComponents(); + + fixture = TestBed.createComponent(AreaScrollingNotesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.ts b/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.ts new file mode 100644 index 000000000..60d10f688 --- /dev/null +++ b/src/interface/src/app/plan/area-scrolling-notes/area-scrolling-notes.component.ts @@ -0,0 +1,88 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog'; +import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar'; +import { DeleteNoteDialogComponent } from '../delete-note-dialog/delete-note-dialog.component'; +import { take } from 'rxjs'; +import { Plan } from '@types'; +import { AuthService, Note, PlanNotesService } from '@services'; +import { SNACK_ERROR_CONFIG, SNACK_NOTICE_CONFIG } from '@shared'; + +@Component({ + selector: 'app-area-scrolling-notes', + templateUrl: './area-scrolling-notes.component.html', + styleUrls: ['./area-scrolling-notes.component.scss'], +}) +export class AreaScrollingNotesComponent implements OnInit { + constructor( + private planNotesService: PlanNotesService, + private dialog: MatDialog, + private snackbar: MatSnackBar, + private authService: AuthService + ) {} + + @Input() plan!: Plan; + notes: Note[] = []; + note = ''; + + ngOnInit() { + this.loadNotes(); + } + + loadNotes() { + this.planNotesService + .getNotes(this.plan?.id) + .subscribe((notes) => (this.notes = notes)); + } + + saving = false; + + openDeleteNoteDialog(note: Note) { + const dialogRef = this.dialog.open(DeleteNoteDialogComponent, {}); + dialogRef + .afterClosed() + .pipe(take(1)) + .subscribe((confirmed) => { + if (confirmed) { + this.planNotesService.deleteNote(this.plan.id, note.id).subscribe({ + next: () => { + this.snackbar.open( + `Deleted note`, + 'Dismiss', + SNACK_NOTICE_CONFIG + ); + this.loadNotes(); + }, + error: (err) => { + this.snackbar.open( + `Error: ${err.statusText}`, + 'Dismiss', + SNACK_ERROR_CONFIG + ); + }, + }); + } + }); + } + + addNote(event: Event) { + if (this.note) { + this.saving = true; + this.planNotesService + .addNote(this.plan.id, this.note) + .subscribe((note) => { + // add the note + this.notes.unshift(note); + // but then refresh as well. + this.loadNotes(); + this.saving = false; + this.note = ''; + }); + } + event.preventDefault(); + } + + canDelete(note: Note) { + const userId = this.authService.loggedInUser$.value?.id; + return note.user_id === userId || this.plan.user === userId; + } +} diff --git a/src/interface/src/app/plan/plan.component.html b/src/interface/src/app/plan/plan.component.html index d7c8c1843..40c16dbb0 100644 --- a/src/interface/src/app/plan/plan.component.html +++ b/src/interface/src/app/plan/plan.component.html @@ -32,7 +32,7 @@
- +
diff --git a/src/interface/src/app/plan/plan.module.ts b/src/interface/src/app/plan/plan.module.ts index fe9216716..55f7afe40 100644 --- a/src/interface/src/app/plan/plan.module.ts +++ b/src/interface/src/app/plan/plan.module.ts @@ -1,5 +1,6 @@ import { AreaDetailsComponent } from './area-details/area-details.component'; import { AreaNotesComponent } from './area-notes/area-notes.component'; +import { AreaScrollingNotesComponent } from './area-scrolling-notes/area-scrolling-notes.component'; import { CommonModule } from '@angular/common'; import { ConstraintsPanelComponent } from './create-scenarios/constraints-panel/constraints-panel.component'; import { CreateScenariosComponent } from './create-scenarios/create-scenarios.component'; @@ -48,6 +49,7 @@ import { PlanningAreaTitlebarMenuComponent } from '../standalone/planning-area-t declarations: [ AreaDetailsComponent, AreaNotesComponent, + AreaScrollingNotesComponent, ConstraintsPanelComponent, CreateScenariosComponent, DeleteNoteDialogComponent,