From d3adefd13f7f8e7ebd897bc0b7c3fa37156fcce5 Mon Sep 17 00:00:00 2001 From: lastminutediorama Date: Sat, 31 Aug 2024 14:33:54 -0500 Subject: [PATCH] fix storybook story --- src/interface/package-lock.json | 23 ++++ src/interface/package.json | 1 + .../notes-sidebar/notes-sidebar.component.ts | 4 +- .../notes-sidebar/notes-sidebar.stories.ts | 106 ++++++++++++++++++ 4 files changed, 133 insertions(+), 1 deletion(-) create mode 100644 src/interface/src/styleguide/notes-sidebar/notes-sidebar.stories.ts diff --git a/src/interface/package-lock.json b/src/interface/package-lock.json index 07eaf9808..7e9c38f61 100644 --- a/src/interface/package-lock.json +++ b/src/interface/package-lock.json @@ -75,6 +75,7 @@ "@types/jasmine": "~4.0.0", "@types/leaflet": "^1.9.0", "@types/leaflet-draw": "^1.0.4", + "@types/leaflet.vectorgrid": "^1.3.5", "@types/shpjs": "^3.4.2", "@typescript-eslint/eslint-plugin": "7.2.0", "@typescript-eslint/parser": "7.2.0", @@ -8376,6 +8377,17 @@ "@types/leaflet": "*" } }, + "node_modules/@types/leaflet.vectorgrid": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@types/leaflet.vectorgrid/-/leaflet.vectorgrid-1.3.5.tgz", + "integrity": "sha512-LtHmagxhE4kGzQQ+OB3giNPW8YM6t0WPrdsThe7AAqiUQo3gFTcSWGOv7KvPn3VaGIPoH/8G1s8Twka56dnE4w==", + "dev": true, + "dependencies": { + "@types/geojson": "*", + "@types/geojson-vt": "*", + "@types/leaflet": "*" + } + }, "node_modules/@types/lodash": { "version": "4.17.0", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz", @@ -31351,6 +31363,17 @@ "@types/leaflet": "*" } }, + "@types/leaflet.vectorgrid": { + "version": "1.3.5", + "resolved": "https://registry.npmjs.org/@types/leaflet.vectorgrid/-/leaflet.vectorgrid-1.3.5.tgz", + "integrity": "sha512-LtHmagxhE4kGzQQ+OB3giNPW8YM6t0WPrdsThe7AAqiUQo3gFTcSWGOv7KvPn3VaGIPoH/8G1s8Twka56dnE4w==", + "dev": true, + "requires": { + "@types/geojson": "*", + "@types/geojson-vt": "*", + "@types/leaflet": "*" + } + }, "@types/lodash": { "version": "4.17.0", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.0.tgz", diff --git a/src/interface/package.json b/src/interface/package.json index d7cff6708..53e40ecaf 100644 --- a/src/interface/package.json +++ b/src/interface/package.json @@ -87,6 +87,7 @@ "@types/jasmine": "~4.0.0", "@types/leaflet": "^1.9.0", "@types/leaflet-draw": "^1.0.4", + "@types/leaflet.vectorgrid": "^1.3.5", "@types/shpjs": "^3.4.2", "@typescript-eslint/eslint-plugin": "7.2.0", "@typescript-eslint/parser": "7.2.0", diff --git a/src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts b/src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts index e513c513f..6a6ee345b 100644 --- a/src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts +++ b/src/interface/src/styleguide/notes-sidebar/notes-sidebar.component.ts @@ -35,6 +35,7 @@ export class NotesSidebarComponent implements OnInit { private snackbar: MatSnackBar ) {} @Input() showHeader = false; + @Input() notes: Note[] = []; @Input() notesModel!: NotesModelName; @Input() objectId!: number; @Input() noNotesTitleText = 'No Notes Yet'; @@ -42,7 +43,6 @@ export class NotesSidebarComponent implements OnInit { 'Start adding notes to help your team learn more about this section.'; @Output() handleNoteResponse = new EventEmitter(); - notes: Note[] = []; note = ''; ngOnInit() { @@ -63,6 +63,8 @@ export class NotesSidebarComponent implements OnInit { saving = false; + // TODO: decouple the notesService from this component? + openDeleteNoteDialog(note: Note) { const dialogRef = this.dialog.open(DeleteNoteDialogComponent, {}); dialogRef diff --git a/src/interface/src/styleguide/notes-sidebar/notes-sidebar.stories.ts b/src/interface/src/styleguide/notes-sidebar/notes-sidebar.stories.ts new file mode 100644 index 000000000..d90f7f66e --- /dev/null +++ b/src/interface/src/styleguide/notes-sidebar/notes-sidebar.stories.ts @@ -0,0 +1,106 @@ +import { + Meta, + StoryObj, + moduleMetadata, + argsToTemplate, +} from '@storybook/angular'; +import { NotesSidebarComponent } from './notes-sidebar.component'; +import { + MatDialogModule, + MAT_DIALOG_DATA, + MatDialogRef, +} from '@angular/material/dialog'; +import { MatSnackBarModule } from '@angular/material/snack-bar'; + +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; +import { HttpClientModule } from '@angular/common/http'; // Add this import +import { BaseNotesService, ProjectAreaNotesService } from '@services'; + +const meta: Meta = { + title: 'Components/Notes Sidebar', + component: NotesSidebarComponent, + tags: ['autodocs'], + decorators: [ + moduleMetadata({ + imports: [ + HttpClientModule, + MatDialogModule, + BrowserAnimationsModule, + MatProgressSpinnerModule, + NotesSidebarComponent, + MatSnackBarModule, + ], + providers: [ + { provide: MAT_DIALOG_DATA, useValue: {} }, + { provide: MatDialogRef, useValue: {} }, + { provide: BaseNotesService, useValue: ProjectAreaNotesService }, + ], + }), + ], + render: ({ ...args }) => ({ + props: args, + template: `
+
`, + }), +}; + +export default meta; + +const exampleNotes = [ + { + id: 1, + user_id: 10, + user_name: 'Larry Larrington', + content: 'Here is some content', + created_at: '2024-01-01', + can_delete: true, + }, + { + id: 2, + user_id: 11, + user_name: 'Someone Else', + content: 'Here is some content', + created_at: '2024-02-01', + can_delete: false, + }, + + { + id: 3, + user_id: 10, + user_name: 'Larry Larrington', + content: + 'Here is some additional content.' + + ' Here is some additional content. Here is some additional content. ' + + 'Here is some additional content. Here is some additional content. ' + + 'Here is some additional content. ', + created_at: '2024-05-01', + can_delete: true, + }, +]; + +type Story = StoryObj; + +export const Default: Story = { + args: { + showHeader: false, + notesModel: 'planning_area', + objectId: 1, + notes: exampleNotes, + noNotesTitleText: 'No Notes Yet', + noNotesDetailText: + 'Start adding notes to help your team learn more about this section.', + }, +}; + +export const NoNotes: Story = { + args: { + showHeader: false, + notesModel: 'planning_area', + objectId: 1, + notes: [], + noNotesTitleText: 'No Notes Yet', + noNotesDetailText: + 'Start adding notes to help your team learn more about this section.', + }, +};