UI work

jameshschuler · May 26, 2023 · 6018467 · 6018467
1 parent 1c85d5b
commit 6018467
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 21 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -8,17 +8,24 @@
     <link rel="manifest" href="/site.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>PoGo Trainer Hub</title>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/theme-toggles@4.10.1/css/classic.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/theme-toggles@4.10.1/css/classic.min.css"
+    />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
       href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap"
       rel="stylesheet"
     />
   </head>
-  <body class="bg-blue-200 dark:bg-dark-800 dark:text-gray-100">
+  <body class="bg-gray-200 dark:bg-dark-800 dark:text-gray-100">
     <div id="app" class="container mx-auto px-6 relative max-w-screen-xl"></div>
-    <script src="https://kit.fontawesome.com/e568baa144.js" crossorigin="anonymous" type="module"></script>
+    <script
+      src="https://kit.fontawesome.com/e568baa144.js"
+      crossorigin="anonymous"
+      type="module"
+    ></script>
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/frontend/src/assets/styles/styles.scss b/frontend/src/assets/styles/styles.scss
@@ -34,6 +34,12 @@ button {
     opacity: 0.8;
     cursor: pointer;
   }
+
+  &:disabled {
+    background-color: #f5f5f5;
+    box-shadow: none;
+    cursor: not-allowed;
+  }
 }
 
 $gap: 32px !default;

diff --git a/...nd/src/components/Profile/ProfileForm.vue → ...rc/components/Profile/EditProfileForm.vue b/...nd/src/components/Profile/ProfileForm.vue → ...rc/components/Profile/EditProfileForm.vue
@@ -4,15 +4,18 @@
     :validation-schema="schema"
     :initial-values="profile"
     v-slot="{ errors, isSubmitting }"
+    autocomplete="off"
   >
     <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 hover:bg-green-400 text-lg font-normal"
-        :disabled="isSubmitting"
+        :disabled="isSubmitting || Object.keys(errors).length !== 0"
       >
-        <i v-if="isSubmitting" class="fa-solid fa-circle-notch fa-lg fa-fw fa-spin mr-2"></i>
+        <span v-if="isSubmitting">
+          <i v-if="isSubmitting" class="fa-solid fa-circle-notch fa-lg fa-fw fa-spin mr-2"></i>
+        </span>
         Save Changes
       </button>
     </div>
@@ -80,6 +83,7 @@
           type="button"
           class="m-4 rounded-lg border-2 border-black p-4 flex items-center hover:bg-gray-100"
           @click="addAlt"
+          :disabled="isSubmitting"
         >
           <i class="fa-solid fa-plus fa-lg fa-fw mr-2"></i>
           <span class="text-lg font-normal">Add Trainer Alt</span>
@@ -108,18 +112,28 @@
 <script setup lang="ts">
 import { useProfileStore } from "@/stores/profileStore";
 import { storeToRefs } from "pinia";
-import { ErrorMessage, Field, Form } from "vee-validate";
+import { configure, ErrorMessage, Field, Form } from "vee-validate";
 import * as Yup from "yup";
 
 const profileStore = useProfileStore();
 let profile: any = null;
 ({ profile } = storeToRefs(profileStore));
 
+configure({
+  validateOnBlur: true,
+  validateOnChange: true,
+  validateOnInput: true,
+  validateOnModelUpdate: true,
+});
+
 const schema = Yup.object().shape({
   trainerAlts: Yup.array().of(
     Yup.object().shape({
       name: Yup.string().required("Trainer Name is required"),
-      code: Yup.string().required("Trainer Code is required"),
+      code: Yup.string()
+        .matches(/^\d+$/, "Trainer Code must only contain numbers")
+        .length(12, "Trainer Code must be 12 digits")
+        .required("Trainer Code is required"),
     })
   ),
 });
@@ -136,7 +150,7 @@ function removeAlt(index: number) {
 }
 
 async function onSubmit(values: any) {
-  console.log(values);
+  await profileStore.updateProfile(values.trainerAlts);
 }
 </script>
 <style lang="scss" scoped>

diff --git a/frontend/src/components/SearchForm.vue b/frontend/src/components/SearchForm.vue
@@ -1,9 +1,16 @@
 <template>
-  <div id="search--container" class="p-6 bg-white shadow-lg rounded-xl absolute bottom-0 border-2 border-black">
+  <div
+    id="search--container"
+    class="p-6 bg-white dark:bg-dark-200 shadow-lg rounded-xl absolute bottom-0 border-2 border-black"
+  >
     <div class="flex flex-row p-4 <lg:flex-col">
       <div class="flex flex-col min-w-xs mr-6 <lg:w-full">
         <label for="location--select" class="mb-2 font-semibold">Location</label>
-        <select id="location-select" class="p-4 rounded-lg border-2 border-black" :disabled="true">
+        <select
+          id="location-select"
+          class="p-4 rounded-lg border-2 border-black dark:text-black"
+          :disabled="true"
+        >
           <option selected value="san-diego">San Diego</option>
         </select>
       </div>

diff --git a/frontend/src/components/TrainerCard.vue b/frontend/src/components/TrainerCard.vue
@@ -1,7 +1,9 @@
 <template>
   <div @click="toggleCard" :class="{ flipped: flipped }" class="trainer--card cursor-pointer">
     <div class="card--inner p-4 px-8 w-full h-full">
-      <div class="card--front rounded-md bg-white border-2 border-black rounded-xl">
+      <div
+        class="card--front rounded-md bg-white dark:bg-dark-200 border-2 border-black rounded-xl"
+      >
         <div class="flex justify-end pt-4 pr-4">
           <span>
             <i class="fa-solid fa-fw fa-lg fa-qrcode"></i>
@@ -14,13 +16,17 @@
             <h3 class="mt-3 text-gray-500 dark:text-blue-500 flex items-center">
               {{ trainer.trainerCode }}
               <span class="ml-2 mb-2" @click.stop="copyTrainerCode(trainer.trainerCode)">
-                <i class="fa-solid fa-fw fa-lg fa-copy text-black hover:text-blue-500"></i>
+                <i
+                  class="fa-solid fa-fw fa-lg fa-copy text-black hover:text-blue-500 dark:text-white"
+                ></i>
               </span>
             </h3>
           </div>
         </div>
       </div>
-      <div class="card--back bg-gray-200 flex flex-col justify-center items-center border-2 border-black rounded-xl">
+      <div
+        class="card--back bg-gray-200 dark:bg-dark-200 flex flex-col justify-center items-center border-2 border-black rounded-xl"
+      >
         <canvas ref="canvas"></canvas>
         <h1 class="text-xl font-semibold mt-5">
           <span class="mr-2">

diff --git a/frontend/src/pages/ProfilePage.vue b/frontend/src/pages/ProfilePage.vue
@@ -1,11 +1,11 @@
 <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 v-if="!loading" />
+    <EditProfileForm v-if="!loading" />
   </div>
 </template>
 <script setup lang="ts">
-import ProfileForm from "@/components/Profile/ProfileForm.vue";
+import EditProfileForm from "@/components/Profile/EditProfileForm.vue";
 import Modal from "@/components/common/Modal.vue";
 import { useCommonStore } from "@/stores/commonStore";
 import { useProfileStore } from "@/stores/profileStore";

diff --git a/frontend/src/stores/profileStore.ts b/frontend/src/stores/profileStore.ts
@@ -1,14 +1,30 @@
+import { ToastType } from "@/types/enums";
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { Profile } from "../types/api";
+import { Profile, UpdateProfileRequest } from "../types/api";
 import { useAuthStore } from "./authStore";
+import { useToastStore } from "./toastStore";
 
-const baseApiUrl = import.meta.env.DEV ? import.meta.env.VITE_APP_DEV_API_URL : import.meta.env.VITE_APP_API_URL;
+const baseApiUrl = import.meta.env.DEV
+  ? import.meta.env.VITE_APP_DEV_API_URL
+  : import.meta.env.VITE_APP_API_URL;
 const profileApiBaseUrl = `${baseApiUrl}/profile`;
 
 export const useProfileStore = defineStore("profile", () => {
   const profile = ref<Profile | null>();
   const authStore = useAuthStore();
+  const toastStore = useToastStore();
+
+  async function updateProfile(request: UpdateProfileRequest) {
+    try {
+      console.log(request);
+    } catch (err) {
+      toastStore.addToast({
+        message: "Unable to update profile",
+        type: ToastType.Error,
+      });
+    }
+  }
 
   async function getProfile(): Promise<void> {
     try {
@@ -36,18 +52,21 @@ export const useProfileStore = defineStore("profile", () => {
           name: "",
           code: "",
           order: 0,
-          id: 1,
         });
       }
 
       profile.value = responseData;
     } catch (err) {
-      console.error(err);
+      toastStore.addToast({
+        message: "Unable to get profile",
+        type: ToastType.Error,
+      });
     }
   }
 
   return {
     getProfile,
+    updateProfile,
 
     profile,
   };

diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
@@ -18,10 +18,9 @@ export interface Trainer {
 }
 
 export interface TrainerAltResponse {
-  id: number;
+  id?: number;
   name: string;
   code: string;
-  order: number;
 }
 
 export interface Profile {
@@ -32,3 +31,12 @@ export interface Profile {
   trainerName: string;
   trainerAlts: TrainerAltResponse[];
 }
+
+export interface TrainerAltRequest {
+  name: string;
+  code: string;
+}
+
+export interface UpdateProfileRequest {
+  trainerAlts: TrainerAltRequest[];
+}