Feat: Creates add note component for CRM (#2187)

* Feat: Creates add note component for CRM

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

@@ -151,5 +151,12 @@
       },
       "VIEW_DETAILS": "View details"
     }
+  },
+  "NOTES": {
+    "ADD": {
+      "BUTTON": "Add",
+      "PLACEHOLDER": "Add a note",
+      "TITLE": "Shift + Enter to create a note"
+    }
   }
 }

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

@@ -0,0 +1,95 @@
+<template>
+  <div class="wrap">
+    <div class="input-wrap">
+      <textarea
+        v-model="inputText"
+        :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+        class="input--note"
+        @keydown.enter.shift.exact="onAdd"
+      >
+      </textarea>
+    </div>
+    <div class="footer">
+      <woot-button
+        size="tiny"
+        color-scheme="warning"
+        :title="$t('NOTES.ADD.TITLE')"
+        :is-disabled="buttonDisabled"
+        class="button-wrap"
+        @click="onAdd"
+      >
+        {{ $t('NOTES.ADD.BUTTON') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import WootButton from 'dashboard/components/ui/WootButton.vue';
+export default {
+  components: {
+    WootButton,
+  },
+
+  data() {
+    return {
+      inputText: '',
+    };
+  },
+
+  computed: {
+    buttonDisabled() {
+      return this.inputText === '';
+    },
+  },
+
+  methods: {
+    onAdd() {
+      if (this.inputText !== '') {
+        this.$emit('add', this.inputText);
+      }
+      this.inputText = '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius-small);
+  width: 100%;
+
+  .input-wrap {
+    display: flex;
+    flex: 0 0 auto;
+    width: 100%;
+
+    .input--note {
+      font-size: var(--font-size-mini);
+      border-color: transparent;
+      padding: var(--space-small) var(--space-small) 0 var(--space-small);
+      resize: none;
+      box-sizing: border-box;
+      min-height: var(--space-larger);
+      margin-bottom: var(--space-small);
+    }
+  }
+
+  .footer {
+    display: flex;
+    justify-content: flex-end;
+    flex: 1 1 auto;
+    overflow: auto;
+    width: 100%;
+
+    .button-wrap {
+      float: right;
+      margin-bottom: var(--space-small);
+      margin-right: var(--space-small);
+    }
+  }
+}
+</style>

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

@@ -6,7 +6,7 @@
     <div class="footer">
       <div class="meta">
         <div :title="userName">
-          <Thumbnail :src="thumbnail" :username="userName" size="16" />
+          <Thumbnail :src="thumbnail" :username="userName" size="16px" />
         </div>
         <div class="date-wrap">
           <span>{{ readableTime }}</span>

stories/Module/AddNote.stories.js

@@ -0,0 +1,19 @@
+import { action } from '@storybook/addon-actions';
+import AddNote from '../../app/javascript/dashboard/routes/dashboard/contacts/components/AddNote';
+
+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'),
+};

stories/Module/ContactNote.stories.js

@@ -0,0 +1,47 @@
+import { action } from '@storybook/addon-actions';
+import ContactNote from '../../app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote';
+
+export default {
+  title: 'Components/Notes/Note',
+  component: ContactNote,
+  argTypes: {
+    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'),
+};

stories/Module/Note.stories.js

@@ -1,41 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import Note from '../../app/javascript/dashboard/routes/dashboard/contacts/components/ContactNote';
-
-export default {
-  title: 'Components/Note',
-  component: Note,
-  argTypes: {
-    note: {
-      control: {
-        type: 'text',
-      },
-    },
-    userName: {
-      control: {
-        type: 'text',
-      },
-    },
-    timeStamp: {
-      control: {
-        type: 'number',
-      },
-    },
-    thumbnail: {
-      control: {
-        type: 'text',
-      },
-    },
-  },
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { Note },
-  template: '<note v-bind="$props" @edit="onEdit" @delete="onDelete" ></note>',
-});
-
-export const DefaultNote = Template.bind({});
-DefaultNote.args = {
-  onEdit: action('Edit'),
-  onDelete: action('Delete'),
-};