Working on profile form

jameshschuler · May 26, 2023 · 8cb8c09 · 8cb8c09
1 parent 5c10faf
commit 8cb8c09
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 41 deletions.
diff --git a/frontend/src/assets/styles/styles.scss b/frontend/src/assets/styles/styles.scss
@@ -24,15 +24,9 @@ textarea,
 button {
   &:disabled {
     background-color: #f5f5f5;
-    border-color: #f5f5f5;
     box-shadow: none;
-    color: #7a7a7a;
     cursor: not-allowed;
   }
-
-  &:hover {
-    border-color: #b5b5b5;
-  }
 }
 
 .clickable {

diff --git a/frontend/src/components/Profile/ProfileForm.vue b/frontend/src/components/Profile/ProfileForm.vue
@@ -1,13 +1,18 @@
 <template>
-  <Form @submit="onSubmit" :validation-schema="schema" :initial-values="profile" v-slot="{ errors, isSubmitting }">
+  <Form
+    @submit="onSubmit"
+    :validation-schema="schema"
+    :initial-values="profile"
+    v-slot="{ errors, isSubmitting }"
+  >
     <div class="flex justify-between items-center">
       <h1 class="text-3xl">Edit Trainer Profile</h1>
       <button
         id="save-profile--btn"
-        class="py-2 px-4 border-2 border-black rounded-lg clickable hidden"
+        class="py-2 px-4 border-2 border-black rounded-lg clickable hover:bg-green-400 text-lg font-normal"
         :disabled="isSubmitting"
       >
-        <span v-show="isSubmitting" class="spinner-border spinner-border-sm mr-1"></span>
+        <i v-if="isSubmitting" class="fa-solid fa-circle-notch fa-lg fa-fw fa-spin mr-2"></i>
         Save
       </button>
     </div>
@@ -22,7 +27,7 @@
             type="text"
             class="p-4 rounded-lg border-2 border-black form-control dark:text-dark-200"
             :class="{ 'is-invalid': errors.trainerName }"
-            :readonly="true"
+            :disabled="true"
           />
           <div class="invalid-feedback">{{ errors.trainerName }}</div>
         </div>
@@ -34,82 +39,102 @@
             type="text"
             class="p-4 rounded-lg border-2 border-black form-control dark:text-dark-200"
             :class="{ 'is-invalid': errors.trainerCode }"
-            :readonly="true"
+            :disabled="true"
           />
         </div>
       </div>
       <h2 class="text-xl font-semibold mt-6">Trainer Alts</h2>
-      <div class="form-group flex" v-for="(_, index) in profileStore.profile?.trainerAlts">
+      <div
+        class="form-group flex"
+        v-if="profile?.trainerAlts"
+        v-for="(_, index) in profile.trainerAlts"
+      >
         <div class="flex flex-col m-4">
           <Field
             :name="`trainerAlts[${index}].name`"
             type="text"
             class="p-4 rounded-lg border-2 border-black form-control dark:text-dark-200"
-            :readonly="true"
             placeholder="Trainer Name"
           />
+          <ErrorMessage class="invalid-feedback mt-2" :name="`trainerAlts[${index}].name`" />
         </div>
         <div class="flex flex-col m-4">
           <Field
             :name="`trainerAlts[${index}].code`"
             type="text"
             class="p-4 rounded-lg border-2 border-black form-control dark:text-dark-200"
-            :readonly="true"
             placeholder="Trainer Code"
           />
+          <ErrorMessage class="invalid-feedback mt-2" :name="`trainerAlts[${index}].code`" />
         </div>
+        <button
+          type="button"
+          class="remove-alt--btn m-4 rounded-lg border-2 border-black p-4 bg-red-400 hover:bg-red-500"
+          @click="removeAlt(index)"
+        >
+          <i class="fa-solid fa-minus fa-lg fa-fw"></i>
+        </button>
+      </div>
+      <div class="flex justify-end">
+        <button
+          type="button"
+          class="m-4 rounded-lg border-2 border-black p-4 flex items-center hover:bg-gray-100"
+          @click="addAlt"
+        >
+          <i class="fa-solid fa-plus fa-lg fa-fw mr-2"></i>
+          <span class="text-lg font-normal">Add Trainer Alt</span>
+        </button>
       </div>
     </section>
 
     <hr />
     <section class="my-6">
       <h2 class="text-xl font-semibold">Discord Profile</h2>
-      <div class="form-group flex">
+      <div class="form-group flex w-1/2">
         <div class="flex flex-col m-4">
           <label for="username" class="mb-2 font-semibold">Username</label>
-          <input
+          <Field
+            name="username"
             class="p-4 rounded-lg border-2 border-black dark:text-dark-200"
             type="text"
             id="username"
-            :readonly="true"
-            :value="profileStore.profile?.username"
+            :disabled="true"
           />
         </div>
-        <div class="flex flex-col m-4">
-          <!-- <label for="username" class="mb-2 font-semibold">Display Name</label>
-          <input
-            class="p-4 rounded-lg border-2 border-black"
-            type="text"
-            id="username"
-            :readonly="true"
-            :value="profileStore.profile?.username"
-          /> -->
-        </div>
       </div>
     </section>
   </Form>
 </template>
 <script setup lang="ts">
 import { useProfileStore } from "@/stores/profileStore";
-import { Field, Form } from "vee-validate";
+import { storeToRefs } from "pinia";
+import { ErrorMessage, Field, Form } from "vee-validate";
 import * as Yup from "yup";
 
 const profileStore = useProfileStore();
-const profile = {
-  ...profileStore.profile,
-};
-
-defineProps({
-  loading: {
-    type: Boolean,
-    required: true,
-  },
-});
+let profile: any = null;
+({ profile } = storeToRefs(profileStore));
 
 const schema = Yup.object().shape({
-  name: Yup.string().required("Trainer Name is required"),
+  trainerAlts: Yup.array().of(
+    Yup.object().shape({
+      name: Yup.string().required("Trainer Name is required"),
+      code: Yup.string().required("Trainer Code is required"),
+    })
+  ),
 });
 
+function addAlt() {
+  profile.value.trainerAlts.push({
+    name: "",
+    code: "",
+  });
+}
+
+function removeAlt(index: number) {
+  profile.value.trainerAlts.splice(index, 1);
+}
+
 async function onSubmit(values: any) {
   console.log(values);
 }
@@ -123,6 +148,10 @@ section {
   }
 }
 
+.remove-alt--btn {
+  height: 60px;
+}
+
 .invalid-feedback {
   color: #ef4444;
 }

diff --git a/frontend/src/pages/ProfilePage.vue b/frontend/src/pages/ProfilePage.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="bg-white border-2 border-black rounded-xl p-12 dark:bg-dark-200">
     <Modal type="loading" message="Getting Profile..." v-if="loading" />
-    <ProfileForm :loading="loading" />
+    <ProfileForm v-if="!loading" />
   </div>
 </template>
 <script setup lang="ts">