From 489f2b5bcc0db7c2e74a64c6ce0f515d57e31283 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 4 Dec 2023 16:00:25 +0530
Subject: [PATCH] feat: separate select component

---
 app/javascript/v3/components/Form/Select.vue  | 88 +++++++++++++++++++
 .../v3/views/auth/start/SetupCompany.vue      | 73 ++++-----------
 2 files changed, 105 insertions(+), 56 deletions(-)
 create mode 100644 app/javascript/v3/components/Form/Select.vue

diff --git a/app/javascript/v3/components/Form/Select.vue b/app/javascript/v3/components/Form/Select.vue
new file mode 100644
index 000000000..b3d49cf77
--- /dev/null
+++ b/app/javascript/v3/components/Form/Select.vue
@@ -0,0 +1,88 @@
+<template>
+  <with-label
+    :label="label"
+    :name="name"
+    :has-error="hasError"
+    :error-message="errorMessage"
+  >
+    <select
+      :id="id"
+      :selected="value"
+      :name="name"
+      :class="{
+        'text-slate-400': !value,
+        'text-slate-900 dark:text-slate-100': value,
+      }"
+      class="block w-full px-3 py-2 pr-6 border-0 rounded-md shadow-sm outline-none appearance-none select-caret ring-1 ring-inset placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
+      @input="onInput"
+    >
+      <option value="" disabled selected class="hidden">
+        {{ placeholder }}
+      </option>
+      <slot>
+        <option v-for="opt in options" :key="opt.value" :value="opt.value">
+          {{ opt.label }}
+        </option>
+      </slot>
+    </select>
+  </with-label>
+</template>
+
+<script>
+import WithLabel from './WithLabel.vue';
+
+export default {
+  components: {
+    WithLabel,
+  },
+  props: {
+    id: {
+      type: String,
+      default: '',
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    name: {
+      type: String,
+      required: true,
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    value: {
+      type: String,
+      default: '',
+    },
+    hasError: {
+      type: Boolean,
+      default: false,
+    },
+    errorMessage: {
+      type: String,
+      default: '',
+    },
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+  },
+};
+</script>
+
+<style scoped>
+.select-caret {
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
+  background-origin: content-box;
+  background-position: right -1rem center;
+  background-repeat: no-repeat;
+  background-size: 9px 6px;
+}
+</style>
diff --git a/app/javascript/v3/views/auth/start/SetupCompany.vue b/app/javascript/v3/views/auth/start/SetupCompany.vue
index e33cd5228..af4cf8c92 100644
--- a/app/javascript/v3/views/auth/start/SetupCompany.vue
+++ b/app/javascript/v3/views/auth/start/SetupCompany.vue
@@ -27,56 +27,27 @@
           :label="$t('ONBOARDING.COMPANY.TIMEZONE.LABEL')"
           :placeholder="$t('ONBOARDING.COMPANY.TIMEZONE.PLACEHOLDER')"
         />
-        <with-label
+        <form-select
+          v-model="locale"
           name="locale"
           :label="$t('ONBOARDING.COMPANY.LOCALE.LABEL')"
+          :placeholder="$t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER')"
         >
-          <select
-            v-model="locale"
-            name="locale"
-            :class="{
-              'text-slate-400': !locale,
-              'text-slate-900 dark:text-slate-100': locale,
-            }"
-            class="block w-full px-3 py-2 pr-6 border-0 rounded-md shadow-sm outline-none appearance-none select-caret ring-1 ring-inset placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
+          <option
+            v-for="lang in languagesSortedByCode"
+            :key="lang.iso_639_1_code"
+            :value="lang.iso_639_1_code"
           >
-            <option value="" disabled selected class="hidden">
-              {{ $t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER') }}
-            </option>
-            <option
-              v-for="lang in languagesSortedByCode"
-              :key="lang.iso_639_1_code"
-              :value="lang.iso_639_1_code"
-            >
-              {{ lang.name }}
-            </option>
-          </select>
-        </with-label>
-        <with-label
+            {{ lang.name }}
+          </option>
+        </form-select>
+        <form-select
+          v-model="companySize"
           name="companySize"
           :label="$t('ONBOARDING.COMPANY.SIZE.LABEL')"
-        >
-          <select
-            v-model="companySize"
-            name="companySize"
-            :class="{
-              'text-slate-400': !companySize,
-              'text-slate-900 dark:text-slate-100': companySize,
-            }"
-            class="block w-full px-3 py-2 pr-6 border-0 rounded-md shadow-sm outline-none appearance-none select-caret ring-1 ring-inset placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-woot-500 sm:text-sm sm:leading-6 dark:bg-slate-700 dark:ring-slate-600 dark:focus:ring-woot-500 ring-slate-200"
-          >
-            <option value="" disabled selected class="hidden">
-              {{ $t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER') }}
-            </option>
-            <option
-              v-for="sizeOption in companySizeOptions"
-              :key="sizeOption.value"
-              :value="sizeOption.value"
-            >
-              {{ sizeOption.label }}
-            </option>
-          </select>
-        </with-label>
+          :placeholder="$t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
+          :options="companySizeOptions"
+        />
       </div>
       <submit-button
         button-class="text-sm"
@@ -88,7 +59,7 @@
 
 <script>
 import FormInput from '../../../components/Form/Input.vue';
-import WithLabel from '../../../components/Form/WithLabel.vue';
+import FormSelect from '../../../components/Form/Select.vue';
 import SubmitButton from '../../../components/Button/SubmitButton';
 import ModalLayout from './components/ModalLayout.vue';
 import configMixin from 'shared/mixins/configMixin';
@@ -98,7 +69,7 @@ export default {
     FormInput,
     SubmitButton,
     ModalLayout,
-    WithLabel,
+    FormSelect,
   },
   mixins: [configMixin],
   data() {
@@ -129,13 +100,3 @@ export default {
   },
 };
 </script>
-
-<style scoped>
-.select-caret {
-  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='32' height='24' viewBox='0 0 32 24'><polygon points='0,0 32,0 16,24' style='fill: rgb%28110, 111, 115%29'></polygon></svg>");
-  background-origin: content-box;
-  background-position: right -1rem center;
-  background-repeat: no-repeat;
-  background-size: 9px 6px;
-}
-</style>