feat: create submission store

Co-authored-by: Anissa Chadouli <[email protected]>
ourjapanlife · Dec 5, 2023 · 3ac3483 · 3ac3483
1 parent c25c0f2
commit 3ac3483
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 30 deletions.
diff --git a/pages/submit.vue b/pages/submit.vue
@@ -13,6 +13,7 @@
       type="text"
       class="mb-5 px-3 py-3.5 w-[350px] h-[50px] bg-white rounded-lg border border-zinc-400 text-neutral-600 text-sm font-normal font-['Noto Sans JP']"
       :placeholder="$t('submitPage.location')"
+      v-model="submissionStore.location"
     />
     <span
       class="mb-2 text-neutral-600 text-sm font-normal font-['Noto Sans JP']"
@@ -22,41 +23,65 @@
         class="mb-5 mr-2 px-3 py-3.5 w-[170px] h-[50px] bg-white rounded-lg border border-zinc-400 text-neutral-600 text-sm font-normal font-['Noto Sans JP']"
         type="text"
         :placeholder="$t('submitPage.lastName')"
+        v-model="submissionStore.lastName"
       />
       <input
         class="mb-5 px-3 py-3.5 w-[170px] h-[50px] bg-white rounded-lg border border-zinc-400 text-neutral-600 text-sm font-normal font-['Noto Sans JP']"
         type="text"
         :placeholder="$t('submitPage.firstName')"
+        v-model="submissionStore.firstName"
       />
     </div>
     <span
       class="mb-2 text-neutral-600 text-sm font-normal font-['Noto Sans JP']"
     >{{ $t('submitPage.spokenLanguage1')}}</span>
-    <input
-      class="mb-5 px-3 py-3.5 w-[350px] h-[50px] bg-white rounded-lg border border-zinc-400"
-      type="text"
+    <select
+      class="mb-5 px-3 py-3.5 w-[350px] h-[50px] bg-white rounded-lg border border-zinc-400 text-primary-text"
       :placeholder="$t('submitPage.selectLanguage1')"
-    />
+      v-model="submissionStore.selectLanguage1"
+    >
+      <option
+        :key="index"
+        v-for="(locale, index) in localeStore.locales"
+        selected
+        :value="Object.keys(locale)[0]"
+      >{{ Object.values(locale)[0] }}</option>
+    </select>
     <span
       class="mb-2 text-neutral-600 text-sm font-normal font-['Noto Sans JP']"
     >{{ $t('submitPage.spokenLanguage2')}}</span>
-    <input
-      class="mb-5 px-3 py-3.5 w-[350px] h-[50px] bg-white rounded-lg border border-zinc-400"
-      type="text"
+    <select
+      class="mb-5 px-3 py-3.5 w-[350px] h-[50px] bg-white rounded-lg border border-zinc-400 text-primary-text"
       :placeholder="$t('submitPage.selectLanguage2')"
-    />
+      v-model="submissionStore.selectLanguage2"
+    >
+      <option
+        :key="index"
+        v-for="(locale, index) in localeStore.locales"
+        selected
+        :value="Object.keys(locale)[0]"
+      >{{ Object.values(locale)[0] }}</option>
+    </select>
     <span
       class="mb-2 text-neutral-600 text-sm font-normal font-['Noto Sans JP']"
     >{{ $t('submitPage.otherNotes')}}({{ $t('submitPage.optional')}})</span>
     <input
       class="mb-[71px] px-3 py-3.5 w-[350px] h-[50px] bg-white rounded-lg border border-zinc-400"
       type="text"
+      v-model="submissionStore.otherNotes"
     />
     <button
       class="px-20 py-3 rounded-full bg-currentColor w-[350px] text-center text-white text-base font-medium font-['Noto Sans JP']"
+      @click="submissionStore.submit()"
     >{{ $t('submitPage.submitButton')}}</button>
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
+import { defineComponent, ref } from "vue";
+import { useSubmissionStore } from "~/stores/submissionStore";
+import { useLocaleStore } from "~/stores/localeStore";
+
+const submissionStore = useSubmissionStore();
+const localeStore = useLocaleStore();
 </script>
diff --git a/stores/localeStore.ts b/stores/localeStore.ts
@@ -1,27 +1,10 @@
-import { defineStore } from 'pinia'
+import { defineStore } from "pinia";
 
-const localeEn:{label: string, code: string} = {
-    label: 'English',
-    code: 'en'
-}
-const localeJa:{label: string, code: string} = {
-    label: '日本語',
-    code: 'ja'
-}
-
-export const useLocaleStore = defineStore('locale', {
+export const useLocaleStore = defineStore('localeStore', {
     state: () => ({
-        locale: localeEn
+        locales: [{"en_US": "English"}, {"ja_JP": "Japanese"}]
     }),
-    getters: {
-        currentLocale: state => state.locale
-    },
+    getters: {},
     actions: {
-        changeLocale() {
-            if (this.currentLocale.code === 'en')
-                this.locale = localeEn
-            else
-                this.locale = localeJa
-        }
     }
 })
diff --git a/stores/submissionStore.ts b/stores/submissionStore.ts
@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+
+export const useSubmissionStore = defineStore('submissionStore', {
+    state: () => ({
+    location: "",
+    lastName: "",
+    firstName: "",
+    selectLanguage1: "",
+    selectLanguage2: "",
+    otherNotes : ""
+    }),
+    getters: {},
+    actions: {
+        submit(): void {
+            const submission = {
+                "googleMapsUrl": this.location,
+                "healthcareProfessionalName": `${this.firstName} ${this.lastName}`,
+                "spokenLanguages": [this.selectLanguage1, this.selectLanguage2],
+                "notes": this.otherNotes
+            }
+            console.log('submission =', submission)
+        }
+    }
+})