From 2331677ecb37e4947065cd9a707ae0e15e590f43 Mon Sep 17 00:00:00 2001
From: tetuaoro <65575727+tetuaoro@users.noreply.github.com>
Date: Wed, 18 Sep 2024 13:30:07 +0200
Subject: [PATCH] update: setup page

- use radix select component to reduce boilerplate
---
 src/app/components/ui/ChooseLang.vue          | 71 +++++++++++++++++++
 .../Progress.vue => ui/StepProgress.vue}      |  0
 src/app/pages/setup.vue                       | 39 +++-------
 3 files changed, 82 insertions(+), 28 deletions(-)
 create mode 100644 src/app/components/ui/ChooseLang.vue
 rename src/app/components/{step/Progress.vue => ui/StepProgress.vue} (100%)

diff --git a/src/app/components/ui/ChooseLang.vue b/src/app/components/ui/ChooseLang.vue
new file mode 100644
index 00000000..ee107fc9
--- /dev/null
+++ b/src/app/components/ui/ChooseLang.vue
@@ -0,0 +1,71 @@
+<template>
+  <SelectRoot v-model="langProxy">
+    <SelectTrigger
+      class="inline-flex min-w-[160px] items-center justify-between rounded px-[15px] text-[13px] leading-none h-[35px] gap-[5px] bg-white text-grass11 shadow-[0_2px_10px] shadow-black/10 hover:bg-mauve3 focus:shadow-[0_0_0_2px] focus:shadow-black data-[placeholder]:text-green9 outline-none"
+      aria-label="Customise options"
+    >
+      <SelectValue placeholder="Select a fruit..." />
+      <Icon icon="radix-icons:chevron-down" class="h-3.5 w-3.5" />
+    </SelectTrigger>
+
+    <SelectPortal>
+      <SelectContent
+        class="min-w-[160px] bg-white rounded shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade z-[100]"
+        :side-offset="5"
+      >
+        <SelectScrollUpButton
+          class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
+        >
+          <Icon icon="radix-icons:chevron-up" />
+        </SelectScrollUpButton>
+
+        <SelectViewport class="p-[5px]">
+          <SelectItem
+            v-for="(option, index) in langs"
+            :key="index"
+            class="text-[13px] leading-none text-grass11 rounded-[3px] flex items-center h-[25px] pr-[35px] pl-[25px] relative select-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-green9 data-[highlighted]:text-green1"
+            :value="option.value"
+          >
+            <SelectItemText>
+              {{ option.name }}
+            </SelectItemText>
+          </SelectItem>
+        </SelectViewport>
+
+        <SelectScrollDownButton
+          class="flex items-center justify-center h-[25px] bg-white text-violet11 cursor-default"
+        >
+          <Icon icon="radix-icons:chevron-down" />
+        </SelectScrollDownButton>
+      </SelectContent>
+    </SelectPortal>
+  </SelectRoot>
+</template>
+
+<script setup lang="ts">
+const { lang } = defineProps<{
+  lang: string;
+}>();
+
+const langProxy = ref(lang);
+
+const updateLang = defineEmits(['update:lang']);
+watch(langProxy, (newVal) => {
+  updateLang('update:lang', newVal);
+});
+
+const langs = [
+  {
+    value: 'de',
+    name: 'Deutsch',
+  },
+  {
+    value: 'en',
+    name: 'English',
+  },
+  {
+    value: 'fr',
+    name: 'Français',
+  },
+];
+</script>
diff --git a/src/app/components/step/Progress.vue b/src/app/components/ui/StepProgress.vue
similarity index 100%
rename from src/app/components/step/Progress.vue
rename to src/app/components/ui/StepProgress.vue
diff --git a/src/app/pages/setup.vue b/src/app/pages/setup.vue
index 1a98a09c..3d224352 100644
--- a/src/app/pages/setup.vue
+++ b/src/app/pages/setup.vue
@@ -9,17 +9,9 @@
 
         <div v-if="step === 1">
           <p class="text-lg p-8">{{ $t('setup.msgStepOne') }}</p>
-          <select id="lang" form="form-step-one" name="lang">
-            <option
-              v-for="lang in langs"
-              :key="lang.value"
-              :value="lang.value"
-              :selected="lang.value == 'en'"
-            >
-              {{ lang.name }}
-            </option>
-          </select>
-          <form id="form-step-one"></form>
+          <div class="flex justify-center mb-8">
+            <UiChooseLang :lang="lang" @update:lang="updateLang" />
+          </div>
         </div>
 
         <div v-if="step === 2">
@@ -86,7 +78,7 @@
             ]"
             @click="decreaseStep"
           />
-          <StepProgress :step="step" />
+          <UiStepProgress :step="step" />
           <IconsArrowRightCircle
             :class="[
               'size-12',
@@ -111,36 +103,23 @@
 import { FetchError } from 'ofetch';
 
 const { t } = useI18n();
+const authStore = useAuthStore();
 
 type SetupError = {
   title: string;
   message: string;
 };
 
+const lang = ref('');
+
 const username = ref<null | string>(null);
 const password = ref<null | string>(null);
 const accept = ref<boolean>(true);
-const authStore = useAuthStore();
 
 const step = ref(1);
 const stepInvalide = ref<number[]>([]);
 const setupError = ref<null | SetupError>(null);
 
-const langs = [
-  {
-    value: 'de',
-    name: 'Deutsch',
-  },
-  {
-    value: 'en',
-    name: 'English',
-  },
-  {
-    value: 'de',
-    name: 'Français',
-  },
-];
-
 // TODO: improve error handling
 watch(setupError, (value) => {
   if (value) {
@@ -150,6 +129,10 @@ watch(setupError, (value) => {
   }
 });
 
+function updateLang(value: string) {
+  lang.value = value;
+}
+
 async function increaseStep() {
   try {
     if (step.value === 1) {