65 lines
2.6 KiB
Vue
65 lines
2.6 KiB
Vue
<template>
|
|
<div class="mx-auto mt-6 lg:mt-10 px-4 lg:px-8">
|
|
|
|
<div class="flex items-center justify-between mb-6 lg:hidden">
|
|
<h1 class="text-2xl font-semibold tracking-tight">Promotion History</h1>
|
|
|
|
<Dialog v-model:open="isFormOpen">
|
|
<DialogTrigger as-child>
|
|
<Button size="sm" class="gap-2">
|
|
<Plus class="size-4" />
|
|
Promote
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent class="w-full h-full max-w-none m-0 rounded-none flex flex-col">
|
|
<DialogHeader class="flex-row items-center justify-between border-b pb-4">
|
|
<DialogTitle>New Promotion</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div class="flex-1 overflow-y-auto pt-6">
|
|
<PromotionForm @submitted="handleMobileSubmit" />
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
|
|
<div class="flex flex-col lg:flex-row lg:max-h-[70vh] gap-8">
|
|
<div class="flex-1 lg:border-r lg:pr-8 w-full lg:min-w-2xl">
|
|
<p class="hidden lg:block scroll-m-20 text-2xl font-semibold tracking-tight mb-3">
|
|
Promotion History
|
|
</p>
|
|
<div class="overflow-y-auto lg:max-h-full">
|
|
<PromotionList ref="listRef"></PromotionList>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden lg:flex flex-1 pl-8">
|
|
<div class="w-full max-w-3xl">
|
|
<p class="text-2xl font-semibold tracking-tight mb-3">New Promotion</p>
|
|
<PromotionForm @submitted="listRef?.refresh" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import { Plus } from 'lucide-vue-next'
|
|
import PromotionForm from '@/components/promotions/promotionForm.vue'
|
|
import PromotionList from '@/components/promotions/promotionList.vue'
|
|
import DialogContent from '@/components/ui/dialog/DialogContent.vue'
|
|
import Dialog from '@/components/ui/dialog/Dialog.vue'
|
|
import DialogTrigger from '@/components/ui/dialog/DialogTrigger.vue'
|
|
import DialogHeader from '@/components/ui/dialog/DialogHeader.vue'
|
|
import DialogTitle from '@/components/ui/dialog/DialogTitle.vue'
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
|
|
const isFormOpen = ref(false)
|
|
const listRef = ref(null)
|
|
|
|
const handleMobileSubmit = () => {
|
|
isFormOpen.value = false // Close the "Whole page" modal
|
|
listRef.value?.refresh() // Refresh the list behind it
|
|
}
|
|
</script> |