Fixed... *something* to do with the pingable text box but I dont remember what

17th Website/src/components/inputs/pingableTextBox.vue

@@ -31,7 +31,10 @@ export default {
     },
     methods: {
         onchange() {
-            this.$emit('input', this.search)
+            var valid = false;
+            if(this.items.includes(this.search)) {
+                valid = true;
+            }
 
             if (this.isAsync) {
                 this.isLoading = true;
@@ -44,6 +47,8 @@ export default {
                 this.isOpen = false;
             }
             this.arrowCounter = 0;
+
+            this.$emit('input', this.search, valid);
         },
         filter() {
             this.results = this.items.filter(item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1);

17th Website/src/forms/formsHome.vue

@@ -0,0 +1,25 @@
+<script>
+import clickableCard from '../components/cards/clickableCard.vue';
+
+export default {
+    components: {
+        clickableCard
+    }
+}
+
+</script>
+
+<template>
+    <div id="QuickLinks"
+        class="mt-10 grid sm:grid-cols-2 lg:grid-cols-4 place-items-center grid-rows-2 w-full min-w-fit max-w-6xl">
+        <clickableCard title="Transfer" description="Assign a member to a new unit." link="/forms/transfer"
+            icon="carbon:collaborate">
+        </clickableCard>
+        <clickableCard title="Promotion" description="Assign new ranks to members." link="#" icon="carbon:report">
+        </clickableCard>
+        <clickableCard title="LOA" description="Assign a Leave of Absence to a member." link="#" icon="carbon:collaborate">
+        </clickableCard>
+        <clickableCard title="Training" description="Fill out a training report." link="#" icon="carbon:collaborate">
+        </clickableCard>
+    </div>
+</template>

17th Website/src/forms/transferForm.vue

@@ -16,15 +16,29 @@ export default {
 
             status: '',
             rank: '',
+            member: '',
+            validMember: false,
         }
     },
     beforeMount() {
-        QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name}}}")
+        QueryApolloGraphQL("getPageMembers", "query Items {getPageMembers {items {  id name  }}}")
             .then(value => {
                 value.forEach(element => {
                     this.members.push(element.member_name)
                 });
             })
+            // THIS IS THE NEW QUERY TO USE WHICH GIVES THE NAME AND ID
+            // QueryApolloGraphQL("getPageMembers", `query Items {
+            // getPageMembers {
+            //     items {
+            //           id 
+            //           name  
+            //         }}}`)
+            // .then(value => {
+            //     value.forEach(element => {
+            //         this.members.push(element.member_name)
+            //     });
+            // })
         // query all of the possible statuses/units a person could have
         QueryApolloGraphQL("getPageStatuses", `query GetPageStatuses {
             getPageStatuses {
@@ -44,8 +58,15 @@ export default {
             }
             }`).then(value => { this.rankList = value; });
 
-    }
+    },
+    methods: {
+        submit() {
+            console.log(this.status, this.rank, this.member, this.validMember)
+        },
+        inputCheck() {
 
+        }
+    }
 }
 </script>
 
@@ -58,7 +79,8 @@ export default {
 
                 <div class="flex justify-center">
                     <p class="text-white text-2xl">Member: </p>
-                    <pingableTextBox :items="Object.values(this.members)" class="mx-5" />
+                    <pingableTextBox :items="Object.values(this.members)"
+                        @input="(search, valid) => { this.member = search, this.validMember = valid }" class="mx-5" />
 
                 </div>
 
@@ -90,7 +112,7 @@ export default {
                     </Listbox> -->
                 <div class="flex justify-center pt-5">
                     <p class="text-white text-2xl">Select Unit for Transfer: </p>
-                    <select v-model="this.unit">
+                    <select v-model="this.status">
                         <option v-for="option in statusList" :value="option">
                             {{ option.name }}
                         </option>
@@ -110,8 +132,9 @@ export default {
             </div>
             <!-- buttons -->
             <div class="flex justify-between p-5">
-                <button class="bg-gray-light text-white px-7 py-3 rounded-lg">Cancel</button>
+                <button class="bg-gray-light text-white px-7 py-3 rounded-lg"
-                <button class="bg-blue text-white px-7 py-3 rounded-lg">Confirm</button>
+                    @click="$router.push({ path: `/forms` })">Cancel</button>
+                <button class="bg-blue text-white px-7 py-3 rounded-lg" @click="submit()">Confirm</button>
             </div>
         </div>