38 lines
1.4 KiB
Vue
38 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import LoaForm from '@/components/loa/loaForm.vue';
|
|
import { useUserStore } from '@/stores/user';
|
|
import { Member } from '@/api/member';
|
|
import LoaList from '@/components/loa/loaList.vue';
|
|
import { ref } from 'vue';
|
|
|
|
const userStore = useUserStore();
|
|
const user = userStore.user;
|
|
const memberFull: Member = {
|
|
member_id: user.id,
|
|
member_name: user.name,
|
|
rank: null,
|
|
rank_date: null,
|
|
status: null,
|
|
status_date: null,
|
|
};
|
|
|
|
const mode = ref<'submit' | 'view'>('submit')
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-5xl mx-auto flex w-full flex-col mt-4 mb-10">
|
|
<div class="mb-8">
|
|
<p class="scroll-m-20 text-2xl font-semibold tracking-tight">Leave of Absence</p>
|
|
<div class="pt-3">
|
|
<div class="flex w-min *:px-10 pt-2 border-b *:w-full *:text-center *:pb-1 *:cursor-pointer">
|
|
<label :class="mode === 'submit' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
|
@click="mode = 'submit'">Submit</label>
|
|
<label :class="mode === 'view' ? 'border-b-3 border-foreground' : 'mb-[2px]'"
|
|
@click="mode = 'view'">History</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<LoaForm v-if="mode === 'submit'" :member="memberFull"></LoaForm>
|
|
<LoaList v-if="mode === 'view'" :admin-mode="false"></LoaList>
|
|
</div>
|
|
</template> |