feat: Creates event timeline card component for CRM (#2291)

* feat: Creates event timeline card component for CRM


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

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

@@ -0,0 +1,45 @@
+import { action } from '@storybook/addon-actions';
+import TimelineCard from './TimelineCard';
+
+export default {
+  title: 'Components/Events/Timeline',
+  component: TimelineCard,
+  argTypes: {
+    eventType: {
+      defaultValue: 'Commented',
+      control: {
+        type: 'text',
+      },
+    },
+    eventPath: {
+      defaultValue: 'chatwoot/chatwoot',
+      control: {
+        type: 'text',
+      },
+    },
+    eventBody: {
+      defaultValue:
+        'Commentedmany variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour',
+      control: {
+        type: 'text',
+      },
+    },
+    timeStamp: {
+      defaultValue: '1618046084',
+      control: {
+        type: 'number',
+      },
+    },
+  },
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { TimelineCard },
+  template: '<timeline-card v-bind="$props" @more="onClick"></timeline-card>',
+});
+
+export const Timeline = Template.bind({});
+Timeline.args = {
+  onClick: action('more'),
+};

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

@@ -0,0 +1,133 @@
+<template>
+  <div class="timeline-card-wrap">
+    <div class="icon-chatbox">
+      <i class="ion-chatboxes" />
+    </div>
+    <div class="card-wrap">
+      <div class="header">
+        <div class="text-wrap">
+          <h6 class="text-block-title">
+            {{ eventType }}
+          </h6>
+          <span class="event-path">on {{ eventPath }}</span>
+        </div>
+        <div class="date-wrap">
+          <span>{{ readableTime }}</span>
+        </div>
+      </div>
+      <div class="comment-wrap">
+        <p class="comment">
+          {{ eventBody }}
+        </p>
+      </div>
+    </div>
+    <div class="icon-more" @click="onClick">
+      <i class="ion-android-more-vertical" />
+    </div>
+  </div>
+</template>
+
+<script>
+import timeMixin from 'dashboard/mixins/time';
+export default {
+  mixins: [timeMixin],
+
+  props: {
+    eventType: {
+      type: String,
+      default: '',
+    },
+    eventPath: {
+      type: String,
+      default: '',
+    },
+    eventBody: {
+      type: String,
+      default: '',
+    },
+    timeStamp: {
+      type: Number,
+      default: 0,
+    },
+  },
+
+  computed: {
+    readableTime() {
+      return this.dynamicTime(this.timeStamp);
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('more');
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.timeline-card-wrap {
+  display: flex;
+  width: 100%;
+  color: var(--color-body);
+  padding: var(--space-small);
+
+  .icon-chatbox {
+    width: var(--space-large);
+    height: var(--space-large);
+    border-radius: 50%;
+    display: flex;
+    flex-shrink: 0;
+    justify-content: center;
+    border: 1px solid var(--color-border);
+    background-color: var(--color-background);
+
+    .ion-chatboxes {
+      font-size: var(--font-size-default);
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .card-wrap {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    padding: var(--space-smaller) var(--space-normal) 0;
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+
+      .text-wrap {
+        display: flex;
+      }
+
+      .event-path {
+        font-size: var(--font-size-mini);
+        margin-left: var(--space-smaller);
+      }
+
+      .date-wrap {
+        font-size: var(--font-size-micro);
+      }
+    }
+
+    .comment-wrap {
+      border: 1px solid var(--color-border-light);
+
+      .comment {
+        padding: var(--space-small);
+        font-size: var(--font-size-mini);
+        margin: 0;
+      }
+    }
+  }
+
+  .icon-more {
+    .ion-android-more-vertical {
+      font-size: var(--font-size-medium);
+    }
+  }
+}
+</style>