Added unit and rank systems to the form
This commit is contained in:
ajdj100
@@ -10,43 +10,129 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
items: [],
|
members: [],
|
||||||
units: ['Alpha', 'Echo', 'RRC', 'HHC', 'Recruit'],
|
statusList: [],
|
||||||
|
rankList: [],
|
||||||
|
|
||||||
|
status: '',
|
||||||
|
rank: '',
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
beforeMount() {
|
||||||
QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name}}}")
|
QueryApolloGraphQL("getPageViewMemberRankStatusAll", "query Query {getPageViewMemberRankStatusAll {items {member_name}}}")
|
||||||
.then(value => {
|
.then(value => {
|
||||||
value.forEach(element => {
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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>
|
<h1 class="m-0">Unit Transfer</h1>
|
||||||
|
|
||||||
<div id="container" class="mx-auto">
|
<div id="container" class="w-full h-full">
|
||||||
<div class="flex flex-row items-center">
|
<div class="flex flex-col justify-center mx-auto items-center">
|
||||||
<div id="from" class="flex flex-col items-center">
|
|
||||||
<img src="../components/icons/misc/test.png" class="h-40">
|
<div class="flex justify-center">
|
||||||
<p class="text-white text-3xl font-medium">Company</p>
|
<p class="text-white text-2xl">Member: </p>
|
||||||
|
<pingableTextBox :items="Object.values(this.members)" class="mx-5" />
|
||||||
|
|
||||||
</div>
|
</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">
|
<!-- <Listbox v-model="unitFilter" class="w-32 mx-2">
|
||||||
<img src="../components/icons/misc/test.png" class="h-40">
|
<div class="relative">
|
||||||
<Dropdown values="units"></Dropdown>
|
<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>
|
</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>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</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>
|
||||||
Reference in New Issue
Block a user