From ffcb14862617e03440619de2cf63026eb2c17d83 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Mon, 4 Dec 2023 15:37:07 +0530
Subject: [PATCH] feat: add select

---
 .../v3/views/auth/start/SetupCompany.vue      | 79 ++++++++++++++++---
 1 file changed, 68 insertions(+), 11 deletions(-)

diff --git a/app/javascript/v3/views/auth/start/SetupCompany.vue b/app/javascript/v3/views/auth/start/SetupCompany.vue
index 93739b1e8..b2b9c201b 100644
--- a/app/javascript/v3/views/auth/start/SetupCompany.vue
+++ b/app/javascript/v3/views/auth/start/SetupCompany.vue
@@ -27,20 +27,56 @@
           :label="$t('ONBOARDING.COMPANY.TIMEZONE.LABEL')"
           :placeholder="$t('ONBOARDING.COMPANY.TIMEZONE.PLACEHOLDER')"
         />
-        <form-input
-          v-model="locale"
+        <with-label
           name="locale"
-          spacing="compact"
           :label="$t('ONBOARDING.COMPANY.LOCALE.LABEL')"
-          :placeholder="$t('ONBOARDING.COMPANY.LOCALE.PLACEHOLDER')"
-        />
-        <form-input
-          v-model="companySize"
-          name="company_size"
-          spacing="compact"
+        >
+          <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 border-0 rounded-md shadow-sm outline-none appearance-none 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.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
+          name="companySize"
           :label="$t('ONBOARDING.COMPANY.SIZE.LABEL')"
-          :placeholder="$t('ONBOARDING.COMPANY.SIZE.PLACEHOLDER')"
-        />
+        >
+          <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 border-0 rounded-md shadow-sm outline-none appearance-none ring-1 ring-inset text-slate-900 dark:text-slate-100 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>
       </div>
       <submit-button
         button-class="text-sm"
@@ -52,15 +88,19 @@
 
 <script>
 import FormInput from '../../../components/Form/Input.vue';
+import WithLabel from '../../../components/Form/WithLabel.vue';
 import SubmitButton from '../../../components/Button/SubmitButton';
 import ModalLayout from './components/ModalLayout.vue';
+import configMixin from 'shared/mixins/configMixin';
 
 export default {
   components: {
     FormInput,
     SubmitButton,
     ModalLayout,
+    WithLabel,
   },
+  mixins: [configMixin],
   data() {
     return {
       companyName: '',
@@ -68,7 +108,24 @@ export default {
       locale: '',
       companySize: '',
       industry: '',
+      companySizeOptions: [
+        { value: '1-10', label: '1-10' },
+        { value: '11-50', label: '11-50' },
+        { value: '51-200', label: '51-200' },
+        { value: '201-500', label: '201-500' },
+        { value: '501-1000', label: '501-1000' },
+        { value: '1001-5000', label: '1001-5000' },
+        { value: '5001+', label: '5001+' },
+      ],
     };
   },
+  computed: {
+    languagesSortedByCode() {
+      const enabledLanguages = [...this.enabledLanguages];
+      return enabledLanguages.sort((l1, l2) =>
+        l1.iso_639_1_code.localeCompare(l2.iso_639_1_code)
+      );
+    },
+  },
 };
 </script>