17th-Ranger-Battalion-ORG/17th-Site-Front-End-V2
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added unit and rank systems to the form

Browse Source
This commit is contained in:
ajdj100
2024-01-13 13:22:12 -05:00
parent cb0d09436c
commit 1f7afddbbb
1 changed files with 104 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
17th Website/src/forms/transferForm.vue
View File

@@ -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> -->
<div id="to" class="flex flex-col items-center">
<img src="../components/icons/misc/test.png" class="h-40">
<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>
<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>