feat: batch card price and seat count

This commit is contained in:
Jannat Patel
2024-01-02 12:39:28 +05:30
parent 21959eef7b
commit 10cdd712d2
5 changed files with 41 additions and 12 deletions

View File

@@ -1,5 +1,11 @@
<template>
<div class="border border-gray-200 rounded-md p-4 h-full" style="min-height: 150px;">
<div class="flex flex-col border border-gray-200 rounded-md p-4 h-full" style="min-height: 150px;">
<Badge v-if="batch.seat_count && batch.seats_left > 0" theme="green" class="self-start mb-2">
{{ batch.seats_left }} {{ __("Seat Left") }}
</Badge>
<Badge v-else-if="batch.seat_count && batch.seats_left <= 0" theme="red" class="self-start mb-2">
{{ __("Sold Out") }}
</Badge>
<div class="text-xl font-semibold mb-1">
{{ batch.title }}
</div>
@@ -7,14 +13,23 @@
{{ batch.description }}
</div>
<div class="mt-auto">
<div class="flex items-center mb-1">
<Calendar class="h-4 w-4 stroke-1 mr-2" />
<div v-if="batch.amount" class="font-semibold text-lg mb-4">
{{ batch.price }}
</div>
<div class="flex items-center mb-3">
<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700"/>
<span>
{{ batch.courses }} {{ __("Courses") }}
</span>
</div>
<div class="flex items-center mb-3">
<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span>
{{ dayjs(batch.start_date).format("DD MMM YYYY") }} - {{ dayjs(batch.end_date).format("DD MMM YYYY") }}
</span>
</div>
<div class="flex items-center">
<Clock class="h-4 w-4 stroke-1 mr-2" />
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span>
{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
</span>
@@ -23,8 +38,9 @@
</div>
</template>
<script setup>
import { Calendar, Clock } from "lucide-vue-next"
import { Calendar, Clock, BookOpen } from "lucide-vue-next"
import { inject } from "vue"
import { Badge } from "frappe-ui"
const dayjs = inject("$dayjs")
const props = defineProps({