Feat: Show notes panel on crm page (#2320)

* Feat: Show notes panel on CRM page

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/modules/notes/stories/AddNote.stories.js

@@ -0,0 +1,19 @@
+import { action } from '@storybook/addon-actions';
+import AddNote from '../components/AddNote.vue';
+
+export default {
+  title: 'Components/Notes/Add',
+  component: AddNote,
+  argTypes: {},
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AddNote },
+  template: '<add-note v-bind="$props" @add="onAdd"></add-note>',
+});
+
+export const Add = Template.bind({});
+Add.args = {
+  onAdd: action('Added'),
+};

app/javascript/dashboard/modules/notes/stories/ContactNote.stories.js

@@ -0,0 +1,52 @@
+import { action } from '@storybook/addon-actions';
+import ContactNote from '../components/ContactNote.vue';
+
+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.',
+      control: {
+        type: 'text',
+      },
+    },
+    userName: {
+      defaultValue: 'John Doe',
+      control: {
+        type: 'text',
+      },
+    },
+    timeStamp: {
+      defaultValue: 1618046084,
+      control: {
+        type: 'number',
+      },
+    },
+    thumbnail: {
+      defaultValue: 'https://randomuser.me/api/portraits/men/62.jpg',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { ContactNote },
+  template:
+    '<contact-note v-bind="$props" @edit="onEdit" @delete="onDelete"></contact-note>',
+});
+
+export const Note = Template.bind({});
+Note.args = {
+  onEdit: action('Edit'),
+  onDelete: action('Delete'),
+};

app/javascript/dashboard/modules/notes/stories/NoteList.stories.js

@@ -0,0 +1,45 @@
+import { action } from '@storybook/addon-actions';
+import NoteList from '../components/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,
+    },
+  ],
+};