From 4ccea8d3e56bb90b12799608298fc31ef16740e9 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Wed, 14 Feb 2024 17:53:42 -0800
Subject: [PATCH] Fix UI/UX consistency, adjusted db model and backend logic,
 clean up formatting

---
 app/src/controllers/note.ts                   | 13 ++++--
 app/src/db/migrations/20231212000000_init.ts  |  4 +-
 app/src/db/models/note.ts                     | 12 ++++--
 app/src/db/prisma/schema.prisma               |  8 ++--
 app/src/services/note.ts                      | 15 +++----
 app/src/types/Note.ts                         |  5 +--
 frontend/src/components/note/NoteCard.vue     | 28 +++++++------
 frontend/src/components/note/NoteModal.vue    | 42 +++++++++++--------
 frontend/src/components/permit/PermitCard.vue |  2 +-
 frontend/src/types/Note.ts                    |  6 ---
 frontend/src/views/SubmissionView.vue         |  8 ++--
 11 files changed, 78 insertions(+), 65 deletions(-)

diff --git a/app/src/controllers/note.ts b/app/src/controllers/note.ts
index b0313f68..b1387eeb 100644
--- a/app/src/controllers/note.ts
+++ b/app/src/controllers/note.ts
@@ -1,12 +1,19 @@
-import { noteService } from '../services';
+import { NIL } from 'uuid';
+
+import { noteService, userService } from '../services';
+import { getCurrentIdentity } from '../components/utils';
 
 import type { NextFunction, Request, Response } from '../interfaces/IExpress';
-import { CurrentUser } from '../types';
 
 const controller = {
   createNote: async (req: Request, res: Response, next: NextFunction) => {
     try {
-      const response = await noteService.createNote(req.body, req.currentUser as CurrentUser);
+      const userId = await userService.getCurrentUserId(getCurrentIdentity(req.currentUser, NIL), NIL);
+
+      // TODO: define body type in request
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const body = req.body as any;
+      const response = await noteService.createNote({ ...body, createdBy: userId });
       res.status(200).send(response);
     } catch (e: unknown) {
       next(e);
diff --git a/app/src/db/migrations/20231212000000_init.ts b/app/src/db/migrations/20231212000000_init.ts
index 82188b92..ac1a84a8 100644
--- a/app/src/db/migrations/20231212000000_init.ts
+++ b/app/src/db/migrations/20231212000000_init.ts
@@ -205,9 +205,7 @@ export async function up(knex: Knex): Promise<void> {
           table.text('note').defaultTo('').notNullable();
           table.text('note_type').defaultTo('').notNullable();
           table.text('title').defaultTo('').notNullable();
-          table.text('createdAt');
-          table.text('createdBy');
-          table.unique(['note_id']);
+          stamps(knex, table);
         })
       )
 
diff --git a/app/src/db/models/note.ts b/app/src/db/models/note.ts
index 8aade961..b4d3a2ca 100644
--- a/app/src/db/models/note.ts
+++ b/app/src/db/models/note.ts
@@ -30,8 +30,10 @@ export default {
       note_type: input.noteType,
       submission: { connect: { submissionId: input.submissionId } },
       title: input.title,
-      createdAt: input.createdAt ?? new Date().toISOString(),
-      createdBy: input.createdBy
+      createdAt: input.createdAt ? new Date(input.createdAt) : null,
+      createdBy: input.createdBy as string,
+      updatedAt: input.updatedAt ? new Date(input.updatedAt) : null,
+      updatedBy: input.updatedBy as string
     };
   },
 
@@ -45,8 +47,10 @@ export default {
       submission: submission.fromPrismaModel(input.submission) as ChefsSubmissionForm,
       submissionId: input.submission_id as string,
       title: input.title || '',
-      createdAt: input.createdAt,
-      createdBy: input.createdBy
+      createdAt: input.createdAt?.toISOString() ?? null,
+      createdBy: input.createdBy,
+      updatedAt: input.updatedAt?.toISOString() ?? null,
+      updatedBy: input.updatedBy
     };
   }
 };
diff --git a/app/src/db/prisma/schema.prisma b/app/src/db/prisma/schema.prisma
index a27117f3..87b4f182 100644
--- a/app/src/db/prisma/schema.prisma
+++ b/app/src/db/prisma/schema.prisma
@@ -45,13 +45,15 @@ model identity_provider {
 }
 
 model note {
-  note_id       String     @id @unique(map: "note_note_id_unique") @db.Uuid
+  note_id       String     @id @db.Uuid
   submission_id String     @db.Uuid
   note          String     @default("")
   note_type     String     @default("")
   title         String     @default("")
-  createdAt     String?
-  createdBy     String?
+  createdBy     String?    @default("00000000-0000-0000-0000-000000000000")
+  createdAt     DateTime?  @default(now()) @db.Timestamptz(6)
+  updatedBy     String?
+  updatedAt     DateTime?  @db.Timestamptz(6)
   submission    submission @relation(fields: [submission_id], references: [submissionId], onDelete: Cascade, map: "note_submission_id_foreign")
 }
 
diff --git a/app/src/services/note.ts b/app/src/services/note.ts
index 4e9667fd..c65be0e5 100644
--- a/app/src/services/note.ts
+++ b/app/src/services/note.ts
@@ -1,22 +1,20 @@
 import prisma from '../db/dataConnection';
 import { note } from '../db/models';
 import { v4 as uuidv4 } from 'uuid';
-import { addDashesToUuid } from '../components/utils';
 
-import type { CurrentUser, Note } from '../types';
-import { JwtPayload } from 'jsonwebtoken';
+import type { Note } from '../types';
 
 const service = {
   /**
    * @function createNote
-   * Creates a Permit
-   * @param note Note Object
+   * Creates a note
+   * @param data Note Object
+   * @param identityId string
    * @returns {Promise<object>} The result of running the findUnique operation
    */
-  createNote: async (data: Note, currentUser: CurrentUser) => {
+  createNote: async (data: Note) => {
     const newNote = {
       ...data,
-      createdBy: addDashesToUuid((currentUser.tokenPayload as JwtPayload)?.idir_user_guid),
       noteId: uuidv4()
     };
     const create = await prisma.note.create({
@@ -44,6 +42,9 @@ const service = {
           include: { user: true }
         }
       },
+      orderBy: {
+        createdAt: 'desc'
+      },
       where: {
         submission_id: submissionId
       }
diff --git a/app/src/types/Note.ts b/app/src/types/Note.ts
index 823ab994..156dfb3f 100644
--- a/app/src/types/Note.ts
+++ b/app/src/types/Note.ts
@@ -1,3 +1,4 @@
+import { IStamps } from '../interfaces/IStamps';
 import type { ChefsSubmissionForm } from './ChefsSubmissionForm';
 
 export type Note = {
@@ -7,6 +8,4 @@ export type Note = {
   noteType: string;
   submission: ChefsSubmissionForm;
   title: string;
-  createdAt: string | null;
-  createdBy: string | null;
-};
+} & Partial<IStamps>;
diff --git a/frontend/src/components/note/NoteCard.vue b/frontend/src/components/note/NoteCard.vue
index 23088705..2f7afc12 100644
--- a/frontend/src/components/note/NoteCard.vue
+++ b/frontend/src/components/note/NoteCard.vue
@@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
 
 import { Card, Divider } from '@/lib/primevue';
 import { userService } from '@/services';
-import { formatDate } from '@/utils/formatters';
+import { formatDateShort } from '@/utils/formatters';
 
 import type { Ref } from 'vue';
 import type { Note } from '@/types';
@@ -17,13 +17,13 @@ type Props = {
 const props = withDefaults(defineProps<Props>(), {});
 
 // State
-const cardData: Ref<Note> = ref(props.note);
 const userName: Ref<string> = ref('');
 
-onMounted(async () => {
+onMounted(() => {
   if (props.note.createdBy) {
-    const res = (await userService.searchUsers({ identityId: [props.note.createdBy] })).data;
-    userName.value = res.length ? res.pop().fullName : '';
+    userService.searchUsers({ userId: [props.note.createdBy] }).then((res) => {
+      userName.value = res?.data.length ? res?.data[0].fullName : '';
+    });
   }
 });
 </script>
@@ -31,7 +31,7 @@ onMounted(async () => {
 <template>
   <Card>
     <template #title>
-      <h3 class="mt-3 mb-1">{{ cardData.title }}</h3>
+      <h3 class="mt-1 mb-1">{{ props.note.title }}</h3>
       <Divider type="solid" />
     </template>
     <template #content>
@@ -41,7 +41,7 @@ onMounted(async () => {
           <div class="grid">
             <p class="col-12">
               <span class="key font-bold">Date:</span>
-              {{ cardData.createdAt ? formatDate(cardData.createdAt ?? '') : undefined }}
+              {{ props.note.createdAt ? formatDateShort(props.note.createdAt ?? '') : undefined }}
             </p>
           </div>
         </div>
@@ -58,20 +58,18 @@ onMounted(async () => {
         <div class="col-12 md:col-6 lg:col-4">
           <div class="grid">
             <p class="col-12">
-              <span class="key font-bold">Category:</span>
-              {{ cardData.noteType }}
+              <span class="key font-bold">Note type:</span>
+              {{ props.note.noteType }}
             </p>
           </div>
         </div>
-        <div class="col-12 mb-2">
-          {{ cardData.note }}
-        </div>
+        <p class="col-12 mt-0 mb-0 note-content">{{ props.note.note }}</p>
       </div>
     </template>
   </Card>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 h2 {
   margin: 0;
 }
@@ -98,4 +96,8 @@ p {
     }
   }
 }
+.note-content {
+  white-space: pre;
+  text-wrap: balance;
+}
 </style>
diff --git a/frontend/src/components/note/NoteModal.vue b/frontend/src/components/note/NoteModal.vue
index a58617b1..6887fdcf 100644
--- a/frontend/src/components/note/NoteModal.vue
+++ b/frontend/src/components/note/NoteModal.vue
@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { Form } from 'vee-validate';
-// import { ref } from 'vue';
 import { object, string } from 'yup';
 
 import { Dropdown, InputText, TextArea } from '@/components/form';
 import { Button, Dialog } from '@/lib/primevue';
-// import { noteService } from '@/services';
 import { NoteTypes } from '@/utils/constants';
 import { NOTE_TYPES } from '@/utils/enums';
-import { onMounted } from 'vue';
+import { formatDateShort } from '@/utils/formatters';
 
 // import type { Ref } from 'vue';
 import type { Note } from '@/types';
@@ -30,6 +28,7 @@ const visible = defineModel<boolean>('visible');
 
 // Default form values
 let initialFormValues: any = {
+  createdAt: formatDateShort(new Date().toISOString()),
   note: props.note?.note,
   noteType: NOTE_TYPES.GENERAL
 };
@@ -47,12 +46,9 @@ const formSchema = object({
 function onSubmit(data: any, { resetForm }) {
   if (props.note) initialFormValues = data;
   else resetForm();
+
   emit('note:submit', data);
 }
-
-onMounted(async () => {
-  // permitTypes.value = (await permitService.getPermitTypes())?.data;
-});
 </script>
 
 <template>
@@ -65,6 +61,11 @@ onMounted(async () => {
   >
     <!-- eslint-enable vue/no-v-model-argument -->
     <template #header>
+      <font-awesome-icon
+        icon="fa-solid fa-plus"
+        fixed-width
+        class="mr-2"
+      />
       <span class="p-dialog-title">Add note</span>
     </template>
 
@@ -74,26 +75,31 @@ onMounted(async () => {
       @submit="onSubmit"
     >
       <div class="formgrid grid">
-        <div class="field col">
-          <label class="font-bold">Date</label>
-          <p>{{ new Date() }}</p>
-        </div>
         <InputText
-          class="col-12"
+          class="col-6"
+          name="createdAt"
+          label="Date"
+          :disabled="true"
+        />
+        <div class="col-6" />
+        <Dropdown
+          class="col-6"
+          name="noteType"
+          label="Note type"
+          :options="NoteTypes"
+        />
+        <div class="col-6" />
+        <InputText
+          class="col-6"
           name="title"
           label="Title"
         />
+        <div class="col-6" />
         <TextArea
           class="col-12"
           name="note"
           label="Note"
         />
-        <Dropdown
-          class="col-12 lg:col-6"
-          name="noteType"
-          label="Note type"
-          :options="NoteTypes"
-        />
         <div class="field col-12 flex">
           <div class="flex-auto">
             <Button
diff --git a/frontend/src/components/permit/PermitCard.vue b/frontend/src/components/permit/PermitCard.vue
index b11a79b3..39ec97b3 100644
--- a/frontend/src/components/permit/PermitCard.vue
+++ b/frontend/src/components/permit/PermitCard.vue
@@ -161,7 +161,7 @@ async function onPermitSubmit(data: Permit) {
   />
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 h2 {
   margin: 0;
 }
diff --git a/frontend/src/types/Note.ts b/frontend/src/types/Note.ts
index f9baf4a8..8f04870f 100644
--- a/frontend/src/types/Note.ts
+++ b/frontend/src/types/Note.ts
@@ -6,10 +6,4 @@ export type Note = {
   noteType: string;
   submissionId: string;
   title: string;
-
-  // note_id: string; // Primary Key
-  // note: string;
-  // note_type: string;
-  // submission_id: string;
-  // title: string;
 } & Partial<IStamps>;
diff --git a/frontend/src/views/SubmissionView.vue b/frontend/src/views/SubmissionView.vue
index 9901fd87..3a835d16 100644
--- a/frontend/src/views/SubmissionView.vue
+++ b/frontend/src/views/SubmissionView.vue
@@ -13,7 +13,7 @@ import { RouteNames } from '@/utils/constants';
 import { chefsService, documentService, noteService, permitService } from '@/services';
 
 import type { Ref } from 'vue';
-import type { Document, Permit, Note, User } from '@/types';
+import type { Document, Permit, Note } from '@/types';
 
 // Props
 type Props = {
@@ -43,7 +43,7 @@ async function onNoteSubmit(data: any) {
   try {
     const result = (await noteService.createNote({ ...data, submissionId: props.submissionId })).data;
     toast.success('Note saved');
-    notes.value.push(result);
+    notes.value.unshift(result);
   } catch {
     toast.error('Note save error');
   }
@@ -183,7 +183,7 @@ onMounted(async () => {
     <TabPanel header="Notes">
       <div class="flex flex-row pb-2">
         <div class="flex flex-grow-1 align-items-end">
-          <p class="font-bold">Notes:</p>
+          <p class="font-bold">Notes ({{ notes.length }})</p>
         </div>
         <div class="flex flex-none">
           <Button
@@ -215,7 +215,7 @@ onMounted(async () => {
   </TabView>
 </template>
 
-<style lang="scss">
+<style scoped lang="scss">
 .p-tabview {
   .p-tabview-title {
     font-size: 1.1rem;