Began implementation for getting promotion history
This commit is contained in:
@@ -1,120 +1,24 @@
|
||||
<script setup lang="ts">
|
||||
import { Check, Search } from "lucide-vue-next"
|
||||
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList } from "@/components/ui/combobox"
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
|
||||
import { onMounted, ref } from "vue";
|
||||
import { getAllLightMembers } from "@/api/member";
|
||||
import { MemberLight } from "@shared/types/member";
|
||||
import { cn } from "@/lib/utils"
|
||||
import { CalendarIcon } from "lucide-vue-next"
|
||||
import { batchPromotionSchema } from '@shared/schemas/promotionSchema'
|
||||
import PromotionForm from "@/components/promotions/promotionForm.vue";
|
||||
|
||||
// import {
|
||||
// DateFormatter,
|
||||
|
||||
// DateValue,
|
||||
|
||||
// getLocalTimeZone,
|
||||
// today,
|
||||
// } from "@internationalized/date"
|
||||
|
||||
// import Button from "@/components/ui/button/Button.vue";
|
||||
// import Calendar from "@/components/ui/calendar/Calendar.vue";
|
||||
|
||||
// const members = ref<MemberLight[]>([])
|
||||
// const ranks = ref<Rank[]>([])
|
||||
// const date = ref<DateValue>(today(getLocalTimeZone()))
|
||||
|
||||
|
||||
// const currentMember = ref<MemberLight | null>(null);
|
||||
// const currentRank = ref<Rank | null>(null);
|
||||
// onMounted(async () => {
|
||||
// members.value = await getAllLightMembers();
|
||||
// ranks.value = await getRanks();
|
||||
// });
|
||||
|
||||
// const df = new DateFormatter("en-US", {
|
||||
// dateStyle: "long",
|
||||
// })
|
||||
|
||||
// function submit() {
|
||||
// submitRankChange(currentMember.value.member_id, currentRank.value?.id, date.value.toString())
|
||||
// .then(() => {
|
||||
// alert("Rank change submitted!");
|
||||
// currentMember.value = null;
|
||||
// currentRank.value = null;
|
||||
// date.value = today(getLocalTimeZone());
|
||||
// })
|
||||
// .catch((err) => {
|
||||
// console.error(err);
|
||||
// alert("Failed to submit rank change.");
|
||||
// });
|
||||
// }
|
||||
|
||||
import PromotionList from "@/components/promotions/promotionList.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="mx-auto w-full max-w-7xl px-4">
|
||||
<PromotionForm />
|
||||
</div>
|
||||
<!-- <div class="flex max-w-5xl justify-center gap-5 mx-auto mt-10">
|
||||
<Combobox v-model="currentMember">
|
||||
<ComboboxAnchor class="w-[300px]">
|
||||
<ComboboxInput placeholder="Search members..." class="w-full pl-9"
|
||||
:display-value="(v) => v ? v.member_name : ''" />
|
||||
</ComboboxAnchor>
|
||||
<ComboboxList class="w-[300px]">
|
||||
<ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
|
||||
<ComboboxGroup>
|
||||
<template v-for="member in members" :key="member.member_id">
|
||||
<ComboboxItem :value="member"
|
||||
class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
|
||||
{{ member.member_name }}
|
||||
<ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
|
||||
<Check class="h-4 w-4" />
|
||||
</ComboboxItemIndicator>
|
||||
</ComboboxItem>
|
||||
</template>
|
||||
</ComboboxGroup>
|
||||
</ComboboxList>
|
||||
</Combobox> -->
|
||||
<div class="mx-auto mt-10 max-w-7xl px-8">
|
||||
<div class="flex max-h-[70vh] gap-8">
|
||||
|
||||
<!-- Rank Combobox -->
|
||||
<!-- <Combobox v-model="currentRank">
|
||||
<ComboboxAnchor class="w-[300px]">
|
||||
<ComboboxInput placeholder="Search ranks..." class="w-full pl-9"
|
||||
:display-value="(v) => v ? v.short_name : ''" />
|
||||
</ComboboxAnchor>
|
||||
<ComboboxList class="w-[300px]">
|
||||
<ComboboxEmpty class="text-muted-foreground">No results</ComboboxEmpty>
|
||||
<ComboboxGroup>
|
||||
<template v-for="rank in ranks" :key="rank.id">
|
||||
<ComboboxItem :value="rank"
|
||||
class="data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative cursor-pointer select-none px-2 py-1.5">
|
||||
{{ rank.short_name }}
|
||||
<ComboboxItemIndicator class="absolute left-2 inline-flex items-center">
|
||||
<Check class="h-4 w-4" />
|
||||
</ComboboxItemIndicator>
|
||||
</ComboboxItem>
|
||||
</template>
|
||||
</ComboboxGroup>
|
||||
</ComboboxList>
|
||||
</Combobox>
|
||||
<Popover>
|
||||
<PopoverTrigger as-child>
|
||||
<Button variant="outline" :class="cn(
|
||||
'w-[280px] justify-start text-left font-normal',
|
||||
!date && 'text-muted-foreground',
|
||||
)">
|
||||
<CalendarIcon class="mr-2 h-4 w-4" />
|
||||
{{ date ? df.format(date.toDate(getLocalTimeZone())) : "Pick a date" }}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent class="w-auto p-0">
|
||||
<Calendar v-model="date" initial-focus />
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
<Button @click="submit">Submit</Button>
|
||||
</div> -->
|
||||
</template>
|
||||
<!-- LEFT COLUMN -->
|
||||
<div class="flex-1 border-r pr-8">
|
||||
<!-- <PromotionList></PromotionList> -->
|
||||
</div>
|
||||
|
||||
<!-- RIGHT COLUMN -->
|
||||
<div class="flex-1 flex justify-center pl-8">
|
||||
<div class="w-full max-w-3xl">
|
||||
<PromotionForm />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user