Files
milsim-site-v4/ui/src/pages/ManageLOA.vue

45 lines
1.6 KiB
Vue

<script setup lang="ts">
import LoaForm from '@/components/loa/loaForm.vue';
import LoaList from '@/components/loa/loaList.vue';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog"
import Button from '@/components/ui/button/Button.vue';
import { ref } from 'vue';
const showLOADialog = ref(false);
</script>
<template>
<div>
<Dialog v-model:open="showLOADialog" v-on:update:open="showLOADialog = false">
<DialogContent class="w-[95vw] max-w-[95vw] max-h-[90dvh] overflow-y-auto p-4 sm:max-w-fit sm:p-6">
<DialogHeader>
<DialogTitle>Post LOA</DialogTitle>
<DialogDescription>
Post an LOA on behalf of a member.
</DialogDescription>
</DialogHeader>
<LoaForm :admin-mode="true"></LoaForm>
<DialogFooter>
<Button variant="outline" @click="showLOADialog = false">Cancel</Button>
</DialogFooter>
</DialogContent>
</Dialog>
<div class="mx-auto max-w-5xl px-3 pt-10 sm:px-4 lg:px-0">
<div class="flex justify-between mb-4">
<h1 class="scroll-m-20 text-2xl font-semibold tracking-tight">LOA Log</h1>
<div>
<Button @click="showLOADialog = true">Post LOA</Button>
</div>
</div>
<LoaList :admin-mode="true"></LoaList>
</div>
</div>
</template>