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({

View File

@@ -11,17 +11,17 @@
<div class="flex flex-col flex-auto p-4">
<div class="flex items-center justify-between mb-2">
<div v-if="course.lesson_count" class="flex items-center space-x-1 py-1">
<BookOpen class="h-4 w-4 text-gray-700" />
<BookOpen class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.lesson_count }} </span>
</div>
<div v-if="course.enrollment_count" class="flex items-center space-x-1 py-1">
<Users class="h-4 w-4 text-gray-700" />
<Users class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.enrollment_count }} </span>
</div>
<div v-if="course.avg_rating" class="flex items-center space-x-1 py-1">
<Star class="h-4 w-4 text-gray-700" />
<Star class="h-4 w-4 stroke-1.5 text-gray-700" />
<span> {{ course.avg_rating }} </span>
</div>

View File

@@ -6,7 +6,7 @@
<Tooltip :text="label" placement="right">
<slot name="icon">
<span class="grid h-5 w-6 flex-shrink-0 place-items-center">
<component :is="icon" class="h-4.5 w-4.5 text-gray-700" />
<component :is="icon" class="h-4 w-4 stroke-1.5 text-gray-700" />
</span>
</slot>
</Tooltip>