eduvia/lms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: batch details

Browse Source
This commit is contained in:
Jannat Patel
2024-01-05 18:22:03 +05:30
parent 10cdd712d2
commit 3a33f047f5
15 changed files with 1215 additions and 662 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
frontend/src/components/BatchCard.vue
View File

@@ -1,71 +1,65 @@
<template>
<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>
<div class="short-introduction">
{{ batch.description }}
</div>
<div class="mt-auto">
<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.5 mr-2 text-gray-700" />
<span>
{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
</span>
</div>
</div>
</div>
<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>
<div class="short-introduction">
{{ batch.description }}
</div>
<div class="mt-auto">
<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.5 mr-2 text-gray-700" />
<span>
{{ formatTime(batch.start_time) }} - {{ formatTime(batch.end_time) }}
</span>
</div>
</div>
</div>
</template>
<script setup>
import { Calendar, Clock, BookOpen } from "lucide-vue-next"
import { inject } from "vue"
import { Badge } from "frappe-ui"
import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
import { inject } from 'vue'
import { Badge } from 'frappe-ui'
import { formatTime } from '../utils'
const dayjs = inject("$dayjs")
const dayjs = inject('$dayjs')
const props = defineProps({
batch: {
type: Object,
default: null,
},
});
function formatTime(timeString) {
if (!timeString) return "";
const [hour, minute] = timeString.split(":").map(Number);
// Create a Date object with dummy values for day, month, and year
const dummyDate = new Date(0, 0, 0, hour, minute);
// Use Intl.DateTimeFormat to format the time in 12-hour format
const formattedTime = new Intl.DateTimeFormat("en-US", {
hour: "numeric",
minute: "numeric",
hour12: true,
}).format(dummyDate);
return formattedTime;
}
batch: {
type: Object,
default: null,
},
})
</script>
<style>
.short-introduction {
@@ -76,6 +70,6 @@ function formatTime(timeString) {
width: 100%;
overflow: hidden;
margin: 0.25rem 0 1.25rem;
line-height: 1.5;
line-height: 1.5;
}
</style>
</style>