Chore: Add an option to upload a business logo to inbox (#905)

Chore: Add an option to upload a business logo to inbox

app/javascript/dashboard/components/index.js

@@ -1,10 +1,11 @@
 /* eslint no-plusplus: 0 */
 /* eslint-env browser */
-
+import AvatarUploader from './widgets/forms/AvatarUploader.vue';
 import Bar from './widgets/chart/BarChart';
 import Code from './Code';
 import ColorPicker from './widgets/ColorPicker';
 import DeleteModal from './widgets/modal/DeleteModal.vue';
+import Input from './widgets/forms/Input.vue';
 import LoadingState from './widgets/LoadingState';
 import Modal from './Modal';
 import ModalHeader from './ModalHeader';
@@ -14,12 +15,15 @@ import Spinner from 'shared/components/Spinner';
 import SubmitButton from './buttons/FormSubmitButton';
 import Tabs from './ui/Tabs/Tabs';
 import TabsItem from './ui/Tabs/TabsItem';
+import Thumbnail from './widgets/Thumbnail.vue';
 
 const WootUIKit = {
+  AvatarUploader,
   Bar,
   Code,
   ColorPicker,
   DeleteModal,
+  Input,
   LoadingState,
   Modal,
   ModalHeader,
@@ -29,6 +33,7 @@ const WootUIKit = {
   SubmitButton,
   Tabs,
   TabsItem,
+  Thumbnail,
   install(Vue) {
     const keys = Object.keys(this);
     keys.pop(); // remove 'install' from keys

app/javascript/dashboard/components/widgets/Thumbnail.vue

@@ -105,6 +105,15 @@ export default {
       return `user-thumbnail ${classname}`;
     },
   },
+  watch: {
+    src: {
+      handler(value, oldValue) {
+        if (value !== oldValue && this.imgError) {
+          this.imgError = false;
+        }
+      },
+    },
+  },
   methods: {
     onImgError() {
       this.imgError = true;

app/javascript/dashboard/components/widgets/forms/AvatarUploader.vue

@@ -0,0 +1,39 @@
+<template>
+  <label>
+    <span v-if="label">{{ label }}</span>
+    <woot-thumbnail v-if="src" size="80px" :src="src" />
+    <input
+      id="file"
+      ref="file"
+      type="file"
+      accept="image/*"
+      @change="handleImageUpload"
+    />
+    <slot></slot>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    src: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    handleImageUpload(event) {
+      const [file] = event.target.files;
+
+      this.$emit('change', {
+        file,
+        url: URL.createObjectURL(file),
+      });
+    },
+  },
+};
+</script>

app/javascript/dashboard/components/widgets/forms/Input.vue

@@ -0,0 +1,44 @@
+<template>
+  <label>
+    <span v-if="label">{{ label }}</span>
+    <input
+      :value="value"
+      :type="type"
+      :placeholder="placeholder"
+      @input="onChange"
+    />
+    <p v-if="helpText" class="help-text"></p>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: '',
+    },
+    value: {
+      type: [String, Number],
+      default: '',
+    },
+    type: {
+      type: String,
+      default: 'text',
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    helpText: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onChange(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>