Added unit and rank systems to the form

17th Website/src/forms/transferForm.vue

@@ -10,43 +10,129 @@ export default {
     },
     data() {
         return {
-            items: [],
-            units: ['Alpha', 'Echo', 'RRC', 'HHC', 'Recruit'],
+            members: [],
+            statusList: [],
+            rankList: [],
+
+            status: '',
+            rank: '',
         }
     },
-    mounted() {
+    beforeMount() {
         QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name}}}")
             .then(value => {
                 value.forEach(element => {
-                    this.items.push(element.member_name)
+                    this.members.push(element.member_name)
                 });
-            }) //console.log(value); for debug reasons
-        //this still needs to be implemented\
+            })
+        // query all of the possible statuses/units a person could have
+        QueryApolloGraphQL("getPageStatuses", `query GetPageStatuses {
+            getPageStatuses {
+                items {
+                    name
+                    id
+                }
+            }
+            }`).then(value => { this.statusList = value; });
+        //get all of the ranks to change a person to
+        QueryApolloGraphQL("getPageRanks", `query GetRanks {
+            getPageRanks {
+                items {
+                id
+                short_name
+                }
+            }
+            }`).then(value => { this.rankList = value; });
+
     }
 
 }
 </script>
 
 <template>
-    <div class="bg-gray-dark rounded-xl max-w-4xl min-w-formWidth px-5">
+    <div class="bg-gray-dark rounded-xl max-w-4xl min-w-formWidth px-5 h-80">
         <h1 class="m-0">Unit Transfer</h1>
 
-        <div id="container" class="mx-auto">
-            <div class="flex flex-row items-center">
-                <div id="from" class="flex flex-col items-center">
-                    <img src="../components/icons/misc/test.png" class="h-40">
-                    <p class="text-white text-3xl font-medium">Company</p>
+        <div id="container" class="w-full h-full">
+            <div class="flex flex-col justify-center mx-auto items-center">
+
+                <div class="flex justify-center">
+                    <p class="text-white text-2xl">Member: </p>
+                    <pingableTextBox :items="Object.values(this.members)" class="mx-5" />
+
                 </div>
 
-                <pingableTextBox :items="Object.values(this.items)" class="mx-5"/>
+                <!-- THIS SHIT IS ALL BROKEN!!!! Doing it the old fashioned way -->
+                <!-- <Dropdown values="ranks"></Dropdown>
+                    <Dropdown values="units"></Dropdown> -->
+
+                <!-- <Listbox v-model="unitFilter" class="w-32 mx-2">
+                        <div class="relative">
+                            <ListboxButton
+                                class="w-full h-full bg-gray-dark text-white px-4 rounded-md hover:bg-blue transition-all">
+
+                                <span class="block w-full text-left">{{ unitFilter }}</span>
+                                <span class="absolute inset-y-0 right-0 flex items-center pr-2">
+                                    <Icon icon="carbon:chevron-sort" />
+                                </span>
+                            </ListboxButton>
+                            <ListboxOptions
+                                class="w-full bg-gray-dark last:rounded-b-md first:rounded-none absolute text-white">
+                                <ListboxOption v-for="unit in unitFilters" :key="unit.id" :value="unit"
+                                    :disabled="unit.disabled" v-slot="{ active, selected }"
+                                    class="ui-active:text-white p-3 hover:last:rounded-b-md hover:bg-blue transition-colors">
+                                    <li>
+                                        {{ unit.name }}
+                                    </li>
+                                </ListboxOption>
+                            </ListboxOptions>
+                        </div>
+                    </Listbox> -->
+                <div class="flex justify-center pt-5">
+                    <p class="text-white text-2xl">Select Unit for Transfer: </p>
+                    <select v-model="this.unit">
+                        <option v-for="option in statusList" :value="option">
+                            {{ option.name }}
+                        </option>
+                    </select>
 
-                <div id="to" class="flex flex-col items-center">
-                    <img src="../components/icons/misc/test.png" class="h-40">
-                    <Dropdown values="units"></Dropdown>
                 </div>
+
+                <div class="flex justify-center pt-5">
+                    <p class="text-white text-2xl">Select Rank on Transfer: </p>
+                    <select v-model="this.rank">
+                        <option v-for="option in rankList" :value="option">
+                            {{ option.short_name }}
+                        </option>
+                    </select>
+                </div>
+
+            </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-blue text-white px-7 py-3 rounded-lg">Confirm</button>
             </div>
         </div>
 
 
     </div>
 </template>
+
+<style scoped>
+.lbButton {
+    background-color: var(--background-secondary);
+    border: none;
+    border-radius: 5px;
+}
+
+.lbOptions {
+    background-color: var(--background-secondary);
+    display: block;
+    position: absolute;
+}
+
+.clicked {
+    filter: brightness(85%)
+}
+</style>