feat: Create add reminder component for CRM (#2264)

* feat: Creates add reminder component for CRM

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

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

@@ -155,6 +155,16 @@
       "VIEW_DETAILS": "View details"
     }
   },
+  "REMINDER": {
+    "ADD_BUTTON": {
+      "BUTTON": "Add",
+      "TITLE": "Shift + Enter to create a task"
+    },
+    "FOOTER": {
+      "DUE_DATE": "Due date",
+      "LABEL_TITLE": "Set type"
+    }
+  },
   "NOTES": {
     "HEADER": {
       "TITLE": "Notes"

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

@@ -0,0 +1,41 @@
+import { action } from '@storybook/addon-actions';
+import AddReminder from './AddReminder';
+
+export default {
+  title: 'Components/Reminder/Add',
+  component: AddReminder,
+  argTypes: {
+    options: {
+      control: {
+        type: 'object',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { AddReminder },
+  template:
+    '<add-reminder v-bind="$props" @add="onAdd" @click="onClick"></add-reminder>',
+});
+
+export const Add = Template.bind({});
+Add.args = {
+  onAdd: action('Added'),
+  onClick: action('Label'),
+  options: [
+    {
+      id: '12345',
+      name: 'calls',
+    },
+    {
+      id: '12346',
+      name: 'meeting',
+    },
+    {
+      id: '12347',
+      name: 'review',
+    },
+  ],
+};

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="wrap">
+    <div class="input-select-wrap">
+      <textarea
+        v-model="content"
+        class="input--reminder"
+        @keydown.enter.shift.exact="onAdd"
+      >
+      </textarea>
+      <div class="select-wrap">
+        <div class="select">
+          <div class="input-group">
+            <i class="ion-android-calendar input-group-label" />
+            <input
+              v-model="date"
+              type="text"
+              :placeholder="$t('REMINDER.FOOTER.DUE_DATE')"
+              class="input-group-field"
+            />
+          </div>
+          <div class="task-wrap">
+            <select class="task__type" @change="optionSelected($event)">
+              <option value="" disabled selected>
+                {{ $t('REMINDER.FOOTER.LABEL_TITLE') }}
+              </option>
+              <option
+                v-for="option in options"
+                :key="option.id"
+                :value="option.id"
+              >
+                {{ option.name }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <woot-button
+          size="tiny"
+          color-scheme="primary"
+          class-names="add-button"
+          :title="$t('REMINDER.ADD_BUTTON.TITLE')"
+          :is-disabled="buttonDisabled"
+          @click="onAdd"
+        >
+          {{ $t('REMINDER.ADD_BUTTON.BUTTON') }}
+        </woot-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    options: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      content: '',
+      date: '',
+      label: '',
+    };
+  },
+  computed: {
+    buttonDisabled() {
+      return this.content && this.date === '';
+    },
+  },
+  methods: {
+    resetValue() {
+      this.content = '';
+      this.date = '';
+    },
+
+    optionSelected(event) {
+      this.label = event.target.value;
+    },
+
+    onAdd() {
+      const task = {
+        content: this.content,
+        date: this.date,
+        label: this.label,
+      };
+      this.$emit('add', task);
+      this.resetValue();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.wrap {
+  display: flex;
+  margin-bottom: var(--space-smaller);
+  width: 100%;
+
+  .input-select-wrap {
+    padding: var(--space-small) var(--space-small);
+    width: 100%;
+
+    .input--reminder {
+      font-size: var(--font-size-mini);
+      margin-bottom: var(--space-small);
+      resize: none;
+    }
+
+    .select-wrap {
+      display: flex;
+      justify-content: space-between;
+
+      .select {
+        display: flex;
+      }
+    }
+
+    .input-group {
+      margin-bottom: 0;
+      font-size: var(--font-size-mini);
+
+      .input-group-field {
+        height: var(--space-medium);
+        font-size: var(--font-size-micro);
+      }
+    }
+
+    .task-wrap {
+      .task__type {
+        margin: 0 0 0 var(--space-smaller);
+        height: var(--space-medium);
+        width: fit-content;
+        padding: 0 var(--space-two) 0 var(--space-smaller);
+        font-size: var(--font-size-micro);
+      }
+    }
+  }
+}
+</style>