Added transfer form

17th Website/src/components/dropdown/Dropdown.vue

@@ -3,7 +3,7 @@
         <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.name }}</span>
+                <span class="block w-full text-left">{{ currentValue }}</span>
                 <span class="absolute inset-y-0 right-0 flex items-center pr-2">
                     <Icon icon="carbon:chevron-sort" />
                 </span>

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

@@ -0,0 +1,128 @@
+<script>
+export default {
+    data() {
+        return {
+            search: '',
+            results: [],
+            isOpen: false,
+            arrowCounter: 0,
+        }
+    },
+    props: {
+        items: {
+            type: Array,
+            required: false,
+            default: () => [],
+        },
+        isAsync: {
+            type: Boolean,
+            required: false,
+            default: false,
+        }
+    },
+    watch: {
+        items: function (value, oldValue) {
+            if (this.isAsync) {
+                this.results = value;
+                this.isOpen = true;
+                this.isLoading = false;
+            }
+        }
+    },
+    methods: {
+        onchange() {
+            this.$emit('input', this.search)
+
+            if (this.isAsync) {
+                this.isLoading = true;
+            } else if(this.search.length > 0) {
+                this.filter();
+                this.isOpen = true;
+            } else {
+                this.isOpen = false;
+            }
+            this.arrowCounter = 0;
+        },
+        filter() {
+            this.results = this.items.filter(item => item.toLowerCase().indexOf(this.search.toLowerCase()) > -1);
+        },
+        setResult(result) {
+            this.search = result;
+            this.isOpen = false;
+        },
+        handleClickOutside(event) {
+            if (!this.$el.contains(event.target)) {
+                this.isOpen = false;
+                this.arrowCounter = 0;
+            }
+        },
+        bumpUp() {
+            console.log("bumpup")
+            console.log(this.arrowCounter, " ", this.results.length)
+
+            if (this.arrowCounter > 0) {
+                this.arrowCounter -= 1;
+            }
+        },
+        bumpDown() {
+            console.log("bumpdown")
+            console.log(this.arrowCounter, " ", this.results.length)
+
+            if (this.arrowCounter < this.results.length - 1) {
+                this.arrowCounter += 1;
+            }
+        },
+        select() {
+            this.search = this.results[this.arrowCounter];
+            this.arrowCounter = 0;
+            this.isOpen = false;
+        },
+    },
+    mounted() {
+        document.addEventListener('click', this.handleClickOutside)
+    },
+    unmounted() {
+        document.removeEventListener('click', this.handleClickOutside)
+    },
+}
+</script>
+
+<template>
+    <div class="relative">
+        <input type="text" v-model="search" @input="onchange" @keydown.down="bumpDown" @keydown.up="bumpUp"
+            @keydown.enter="select" @keydown.tab="select" :class="{}"
+            class="bg-gray-light rounded-md text-white"/>
+        <ul id="results" v-show="isOpen">
+            <li class="result" v-for="(result, i) in results" :key="i" @click="setResult(result)"
+                :class="{ 'is-active': i === arrowCounter }">
+                {{ result }}
+            </li>
+        </ul>
+    </div>
+</template>
+
+<style scoped>
+#results {
+    position: absolute;
+    padding: 0;
+    margin: 0;
+    border: 1px solid #eeeeee;
+    height: max-content;
+    /* min-height: 1em;
+    max-height: 6em; */
+    overflow: auto;
+}
+
+.result {
+    list-style: none;
+    text-align: left;
+    padding: 4px 2px;
+    cursor: pointer;
+}
+
+.result.is-active,
+.result:hover {
+    background-color: #4AAE9B;
+    color: white;
+}
+</style>

17th Website/src/forms/transferForm.vue

@@ -0,0 +1,52 @@
+<script>
+import QueryApolloGraphQL from '../api/request';
+import pingableTextBox from '../components/inputs/pingableTextBox.vue';
+import Dropdown from '../components/dropdown/Dropdown.vue';
+
+export default {
+    components: {
+        pingableTextBox,
+        Dropdown,
+    },
+    data() {
+        return {
+            items: [],
+            units: ['Alpha', 'Echo', 'RRC', 'HHC', 'Recruit'],
+        }
+    },
+    mounted() {
+        QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name}}}")
+            .then(value => {
+                value.forEach(element => {
+                    this.items.push(element.member_name)
+                });
+            }) //console.log(value); for debug reasons
+        //this still needs to be implemented\
+    }
+
+}
+</script>
+
+<template>
+    <div class="bg-gray-dark rounded-xl max-w-4xl min-w-formWidth px-5">
+        <h1 class="m-0">Unit Transfer</h1>
+
+        <div id="container mx-">
+            <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>
+
+                <pingableTextBox :items="Object.values(this.items)" class="mx-5"/>
+
+                <div id="to" 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>
+            </div>
+        </div>
+
+        <Dropdown values="units"></Dropdown>
+    </div>
+</template>

17th Website/src/router.js

@@ -38,7 +38,20 @@ export default createRouter({
     {
       path: '/forms',
       name: 'Forms',
-      component: () => import('./components/FormsPage/forms.vue')
-    }
+      component: () => import('./views/forms.vue'),
+      children: [
+        {
+          path: 'home',
+          name: 'home',
+          component: () => import('./forms/transferForm.vue')
+        },        
+        {
+          path: 'transfer',
+          name: 'transfer',
+          component: () => import('./forms/transferForm.vue')
+        },
+      ]
+    },
   ]
 })
+

17th Website/src/views/forms.vue

@@ -4,5 +4,10 @@
 
 <template>
     <h1>Forms</h1>
-    <!-- wrapper for button paner -->
+    
+    <!-- hold whatever is currently being looked at -->
+    <div id="FormWrapper" class="flex flex-col items-center">
+            <RouterView/>
+    </div>
+
 </template>

17th Website/tailwind.config.js

@@ -25,6 +25,9 @@ module.exports = {
 
       '2xl': '1536px',
     },
+    minWidth: {
+      'formWidth': '768px',
+    },
     extend: {},
   },
   plugins: [],