feat: Creates notes list component for CRM (#2195)

* Feat: Creates note list component for CRM

Co-authored-by: Nithin David Thomas <webofnithin@gmail.com>

app/javascript/dashboard/i18n/locale/en/contact.json

@@ -153,10 +153,16 @@
     }
   },
   "NOTES": {
+    "HEADER": {
+      "TITLE": "Notes"
+    },
     "ADD": {
       "BUTTON": "Add",
       "PLACEHOLDER": "Add a note",
       "TITLE": "Shift + Enter to create a note"
+    },
+    "FOOTER": {
+      "BUTTON": "View all notes"
     }
   }
 }

app/javascript/dashboard/routes/dashboard/contacts/components/AddNote.vue

@@ -60,6 +60,7 @@ export default {
   flex-direction: column;
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-small);
+  margin-bottom: var(--space-smaller);
   width: 100%;
 
   .input-wrap {

app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.stories.js

@@ -5,6 +5,11 @@ export default {
   title: 'Components/Notes/Note',
   component: ContactNote,
   argTypes: {
+    id: {
+      control: {
+        type: 'number',
+      },
+    },
     note: {
       defaultValue:
         'A copy and paste musical notes symbols & music symbols collection for easy access.',

app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote.vue

@@ -50,6 +50,10 @@ export default {
   mixins: [timeMixin],
 
   props: {
+    id: {
+      type: Number,
+      default: 0,
+    },
     note: {
       type: String,
       default: '',
@@ -76,10 +80,10 @@ export default {
 
   methods: {
     onEdit() {
-      this.$emit('edit');
+      this.$emit('edit', this.id);
     },
     onDelete() {
-      this.$emit('delete');
+      this.$emit('delete', this.id);
     },
   },
 };
@@ -90,6 +94,7 @@ export default {
   padding: var(--space-small);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-small);
+  margin-bottom: var(--space-smaller);
 
   .text {
     padding-bottom: var(--space-small);

app/javascript/dashboard/routes/dashboard/contacts/components/NoteList.stories.js

@@ -0,0 +1,45 @@
+import { action } from '@storybook/addon-actions';
+import noteList from './NoteList';
+
+export default {
+  title: 'Components/Notes/List',
+  component: noteList,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { noteList },
+  template:
+    '<note-list v-bind="$props" @addNote="onAddNote" @editNote="onEditNote" @deleteNote="onDeleteNote" @show="onClick"></note-list>',
+});
+
+export const List = Template.bind({});
+List.args = {
+  onClick: action('show'),
+  onAddNote: action('added'),
+  onEditNote: action('edit'),
+  onDeleteNote: action('deleted'),
+  notes: [
+    {
+      id: '12345',
+      content:
+        'It is a long established fact that a reader will be distracted.',
+      user: {
+        name: 'John Doe',
+        thumbnail: 'https://randomuser.me/api/portraits/men/69.jpg',
+      },
+      created_at: 1618046084,
+    },
+    {
+      id: '12346',
+      content:
+        'It is simply dummy text of the printing and typesetting industry.',
+      user: {
+        name: 'Pearl Cruz',
+        thumbnail: 'https://randomuser.me/api/portraits/women/29.jpg',
+      },
+      created_at: 1616046076,
+    },
+  ],
+};

app/javascript/dashboard/routes/dashboard/contacts/components/NoteList.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <div class="notelist-wrap">
+      <h3 class="block-title">
+        {{ $t('NOTES.HEADER.TITLE') }}
+      </h3>
+      <add-note @add="onAddNote" />
+      <contact-note
+        v-for="note in notes"
+        :id="note.id"
+        :key="note.id"
+        :note="note.content"
+        :user-name="note.user.name"
+        :time-stamp="note.created_at"
+        :thumbnail="note.user.thumbnail"
+        @edit="onEditNote"
+        @delete="onDeleteNote"
+      />
+      <div class="button-wrap">
+        <woot-button variant="clear link" class="button" @click="onclick">
+          {{ $t('NOTES.FOOTER.BUTTON') }}
+          <i class="ion-arrow-right-c" />
+        </woot-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ContactNote from './ContactNote';
+import AddNote from './AddNote';
+
+export default {
+  components: {
+    ContactNote,
+    AddNote,
+  },
+
+  props: {
+    notes: {
+      type: Array,
+      default: () => [],
+    },
+  },
+
+  methods: {
+    onclick() {
+      this.$emit('show');
+    },
+    onAddNote(value) {
+      this.$emit('addNote', value);
+    },
+    onEditNote(value) {
+      this.$emit('editNote', value);
+    },
+    onDeleteNote(value) {
+      this.$emit('deleteNote', value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.button-wrap {
+  margin-top: var(--space-one);
+}
+</style>