Feature/createCharForm3 (#19)

* writing form data to store, then sending formData store as body in POST * POST working
Turizak · Sep 20, 2024 · 6a14c6f · 6a14c6f
1 parent ccd4479
commit 6a14c6f
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 74 deletions.
diff --git a/components/create-character/CChar-Form-1.vue b/components/create-character/CChar-Form-1.vue
@@ -2,7 +2,7 @@
 
 <script setup lang="ts">
 import type { FormError, FormSubmitEvent } from "#ui/types";
-import { useAuthStore } from "#imports";
+import { useAuthStore, useFormStore } from "#imports";
 
 type CharacterForm = {
   name: string;
@@ -12,37 +12,38 @@ type CharacterForm = {
   race: string;
 };
 const authStore = useAuthStore();
-const toast = useToast();
+const formStore = useFormStore();
 
 const classes = [
-  "Barbarian",
-  "Bard",
-  "Cleric",
-  "Druid",
-  "Fighter",
-  "Monk",
-  "Paladin",
-  "Ranger",
-  "Rogue",
-  "Sorcerer",
-  "Warlock",
-  "Wizard",
+  { name: "Barbarian", value: "barbarian" },
+  { name: "Bard", value: "bard" },
+  { name: "Cleric", value: "cleric" },
+  { name: "Druid", value: "druid" },
+  { name: "Fighter", value: "fighter" },
+  { name: "Monk", value: "monk" },
+  { name: "Paladin", value: "paladin" },
+  { name: "Ranger", value: "ranger" },
+  { name: "Rogue", value: "rogue" },
+  { name: "Sorcerer", value: "sorcerer" },
+  { name: "Warlock", value: "warlock" },
+  { name: "Wizard", value: "wizard" },
 ];
 
 const alignments = [
-  "Chaotic Evil",
-  "Chaotic Good",
-  "Chaotic Neutral",
-  "Lawful Evil",
-  "Lawful Good",
-  "Lawful Neutral",
-  "Neutral",
-  "Neutral Evil",
-  "Neutral Good",
+  { name: "Chaotic Evil", value: "chaotic-evil" },
+  { name: "Chaotic Good", value: "chaotic-good" },
+  { name: "Chaotic Neutral", value: "chaotic-neutral" },
+  { name: "Lawful Evil", value: "lawful-evil" },
+  { name: "Lawful Good", value: "lawful-good" },
+  { name: "Lawful Neutral", value: "lawful-neutral" },
+  { name: "Neutral", value: "neutral" },
+  { name: "Neutral Evil", value: "neutral-evil" },
+  { name: "Neutral Good", value: "neutral-good" },
 ];
 
 const races = [
   { name: "Dragonborn", value: "dragonborn" },
+  { name: "Halfling", value: "halfling" },
   { name: "Half-Elf", value: "half-elf" },
   { name: "Half-Orc", value: "half-orc" },
   { name: "Human", value: "human" },
@@ -96,45 +97,25 @@ const validate = (state: CharacterForm): FormError[] => {
   return errors;
 };
 
+function updateFormStore(fields: CharacterForm) {
+  Object.entries(fields).forEach(([field, value]) => {
+    formStore.updateFormField(field, value);
+  });
+}
+
 async function onSubmit(event: FormSubmitEvent<CharacterForm>) {
+  const eventData = {
+    name: event.data.name,
+    ruleset: event.data.ruleset,
+    class: event.data.class,
+    alignment: event.data.alignment,
+    race: event.data.race,
+  };
   disabled.value = true;
   loading.value = true;
   await authStore.ensureValidToken();
-  try {
-    const response = await $fetch<{
-      status: string;
-      message: string;
-      data: CharacterForm;
-    }>("https://httpbin.org/post", {
-      method: "POST",
-      headers: {
-        Authorization: `Bearer ${authStore.token}`,
-        "Content-Type": "application/json",
-      },
-      body: {
-        name: event.data.name,
-        ruleset: event.data.ruleset,
-        class: event.data.class,
-        alignment: event.data.alignment,
-        race: event.data.race,
-      },
-    });
-    console.log(response);
-    await navigateTo("/cchar/cchar-2");
-  } catch (err) {
-    console.error(err);
-    toast.add({
-      title: "There was an error - please try again",
-      color: "red",
-      icon: "i-heroicons-x-circle-solid",
-    });
-  } finally {
-    loading.value = false;
-    disabled.value = false;
-    buttonText.value = "Next Step: Appearance";
-    state.name = undefined;
-    state.alignment = undefined;
-  }
+  updateFormStore(eventData);
+  await navigateTo("/cchar/cchar-2");
 }
 </script>
 
@@ -161,6 +142,7 @@ async function onSubmit(event: FormSubmitEvent<CharacterForm>) {
       <USelect
         v-model="state.class"
         placeholder="Select a class..."
+        option-attribute="name"
         :options="classes"
         required
       />
@@ -179,6 +161,7 @@ async function onSubmit(event: FormSubmitEvent<CharacterForm>) {
       <USelect
         v-model="state.alignment"
         placeholder="Select an alignment..."
+        option-attribute="name"
         :options="alignments"
         :disabled="disabled"
         required

diff --git a/components/create-character/CChar-Form-2.vue b/components/create-character/CChar-Form-2.vue
@@ -2,18 +2,20 @@
 
 <script setup lang="ts">
 import type { FormError, FormSubmitEvent } from "#ui/types";
-import { useAuthStore } from "#imports";
+import { useAuthStore, useFormStore } from "#imports";
 
 type CharacterForm = {
   hair: string;
   skin: string;
   eyes: string;
-  height: string;
+  height: number;
   weight: number;
   age: number;
   gender: string;
 };
+const config = useRuntimeConfig();
 const authStore = useAuthStore();
+const formStore = useFormStore();
 const toast = useToast();
 const router = useRouter();
 
@@ -42,8 +44,8 @@ const validate = (state: CharacterForm): FormError[] => {
     errors.push({ path: "skin", message: "Must be less than 25 characters" });
   if (state.eyes && state.eyes.length > 25)
     errors.push({ path: "eyes", message: "Must be less than 25 characters" });
-  if (state.height && state.height.length > 25)
-    errors.push({ path: "height", message: "Must be less than 25 characters" });
+  if (state.height && state.height < 1)
+    errors.push({ path: "height", message: "Must be at least 12 inches" });
   if (state.gender && state.gender.length > 25)
     errors.push({ path: "gender", message: "Must be less than 25 characters" });
   if (state.age && state.age < 1)
@@ -53,35 +55,44 @@ const validate = (state: CharacterForm): FormError[] => {
   return errors;
 };
 
+function updateFormStore(fields: CharacterForm) {
+  Object.entries(fields).forEach(([field, value]) => {
+    formStore.updateFormField(field, value);
+  });
+}
+
 async function goBack() {
   await authStore.ensureValidToken();
   router.back();
 }
 
 async function onSubmit(event: FormSubmitEvent<CharacterForm>) {
+  const uuid = "506bdf8b-4906-48ea-ad18-4e65a8a02e59";
+  const eventData = {
+    hair: event.data.hair,
+    skin: event.data.skin,
+    eyes: event.data.eyes,
+    age: event.data.age,
+    height: event.data.height,
+    weight: event.data.weight,
+    gender: event.data.gender,
+  };
   disabled.value = true;
   loading.value = true;
   await authStore.ensureValidToken();
+  updateFormStore(eventData);
   try {
     const response = await $fetch<{
       status: string;
       message: string;
       data: CharacterForm;
-    }>("https://httpbin.org/post", {
+    }>(config.public.baseURL + "/campaign/" + uuid + "/character/create", {
       method: "POST",
       headers: {
         Authorization: `Bearer ${authStore.token}`,
         "Content-Type": "application/json",
       },
-      body: {
-        hair: event.data.hair,
-        skin: event.data.skin,
-        eyes: event.data.eyes,
-        age: event.data.age,
-        height: event.data.height,
-        weight: event.data.weight,
-        gender: event.data.gender,
-      },
+      body: formStore.formData,
     });
     console.log(response);
     toast.add({
@@ -127,8 +138,8 @@ async function onSubmit(event: FormSubmitEvent<CharacterForm>) {
       <UFormGroup label="Age (years)" name="age">
         <UInput v-model="state.age" :disabled="disabled" type="number" />
       </UFormGroup>
-      <UFormGroup label="Height" name="height">
-        <UInput v-model="state.height" :disabled="disabled" type="text" />
+      <UFormGroup label="Height (inches)" name="height">
+        <UInput v-model="state.height" :disabled="disabled" type="number" />
       </UFormGroup>
       <UFormGroup label="Weight (lbs)" name="weight" class="mb-4">
         <UInput v-model="state.weight" :disabled="disabled" type="number" />

diff --git a/stores/formStore.ts b/stores/formStore.ts
@@ -0,0 +1,16 @@
+import { defineStore } from "pinia";
+
+type FormData = {
+  [key: string]: string | number;
+}
+
+export const useFormStore = defineStore('form', {
+  state: (): { formData: FormData } => ({
+    formData: {}
+  }),
+  actions: {
+    updateFormField(field: string, value: string | number) {
+      this.formData[field] = value;
+    }
+  }
+  });