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

refactor: extract out component for date range

Browse Source
This commit is contained in:
Hussain Nagaria
2024-04-16 21:39:19 +05:30
parent f48f437075
commit 4ec57349f8
5 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,12 +31,11 @@
<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span> {{ batch.courses.length }} {{ __('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>
{{ getFormattedDateRange(batch.start_date, batch.end_date) }}
</span>
</div>
<DateRange
:startDate="batch.start_date"
:endDate="batch.end_date"
class="mb-3"
/>
<div class="flex items-center">
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span>
@@ -48,8 +47,9 @@
</template>
<script setup>
import { Badge } from 'frappe-ui'
import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
import { formatTime, getFormattedDateRange } from '../utils'
import { formatTime } from '../utils'
import { Clock, BookOpen } from 'lucide-vue-next'
import DateRange from '@/components/Common/DateRange.vue'
const props = defineProps({
batch: {

20
frontend/src/components/BatchOverlay.vue
View File

@@ -21,12 +21,11 @@
<BookOpen class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span> {{ batch.data.courses.length }} {{ __('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>
{{ getFormattedDateRange(batch.data.start_date, batch.data.end_date) }}
</span>
</div>
<DateRange
:startDate="batch.data.start_date"
:endDate="batch.data.end_date"
class="mb-3"
/>
<div class="flex items-center">
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span>
@@ -92,12 +91,9 @@
<script setup>
import { inject, computed } from 'vue'
import { Badge, Button } from 'frappe-ui'
import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
import {
formatNumberIntoCurrency,
formatTime,
getFormattedDateRange,
} from '@/utils'
import { BookOpen, Clock } from 'lucide-vue-next'
import { formatNumberIntoCurrency, formatTime } from '@/utils'
import DateRange from '@/components/Common/DateRange.vue'
const user = inject('$user')

22
frontend/src/components/Common/DateRange.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div class="flex items-center">
<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span>
{{ getFormattedDateRange(props.startDate, props.endDate) }}
</span>
</div>
</template>
<script setup>
import { Calendar } from 'lucide-vue-next'
import { getFormattedDateRange } from '@/utils'
const props = defineProps({
startDate: {
type: String,
},
endDate: {
type: String,
},
})
</script>

18
frontend/src/pages/Batch.vue
View File

@@ -80,14 +80,12 @@
{{ batch.data.title }}
</div>
<div v-html="batch.data.description" class="leading-5 mb-4"></div>
<div class="flex items-center mb-3">
<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span>
{{
getFormattedDateRange(batch.data.start_date, batch.data.end_date)
}}
</span>
</div>
<DateRange
:startDate="batch.data.start_date"
:endDate="batch.data.end_date"
class="mb-3"
/>
<div class="flex items-center mb-6">
<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
<span>
@@ -151,7 +149,6 @@
import { Breadcrumbs, Button, createResource, Tabs, Badge } from 'frappe-ui'
import { computed, inject, ref } from 'vue'
import {
Calendar,
Clock,
LayoutDashboard,
BookOpen,
@@ -162,7 +159,7 @@ import {
SendIcon,
MessageCircle,
} from 'lucide-vue-next'
import { formatTime, getFormattedDateRange } from '@/utils'
import { formatTime } from '@/utils'
import BatchDashboard from '@/components/BatchDashboard.vue'
import BatchCourses from '@/components/BatchCourses.vue'
import LiveClass from '@/components/LiveClass.vue'
@@ -171,6 +168,7 @@ import Assessments from '@/components/Assessments.vue'
import Announcements from '@/components/Annoucements.vue'
import AnnouncementModal from '@/components/Modals/AnnouncementModal.vue'
import Discussions from '@/components/Discussions.vue'
import DateRange from '@/components/Common/DateRange.vue'
const user = inject('$user')
const showAnnouncementModal = ref(false)

18
frontend/src/pages/BatchDetail.vue
View File

@@ -17,17 +17,10 @@
<span> {{ batch.data?.courses?.length }} {{ __('Courses') }} </span>
</div>
<span v-if="batch.data.courses">&middot;</span>
<div class="flex items-center">
<Calendar class="h-4 w-4 text-gray-700 mr-2" />
<span>
{{
getFormattedDateRange(
batch.data.start_date,
batch.data.end_date
)
}}
</span>
</div>
<DateRange
:startDate="batch.data.start_date"
:endDate="batch.data.end_date"
/>
<span v-if="batch.data.start_date">&middot;</span>
<div class="flex items-center">
<Clock class="h-4 w-4 text-gray-700 mr-2" />
@@ -87,10 +80,11 @@
import { computed, inject } from 'vue'
import { useRouter } from 'vue-router'
import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
import { formatTime, getFormattedDateRange } from '@/utils'
import { formatTime } from '@/utils'
import { Breadcrumbs, createResource } from 'frappe-ui'
import CourseCard from '@/components/CourseCard.vue'
import BatchOverlay from '@/components/BatchOverlay.vue'
import DateRange from '../components/Common/DateRange.vue'
const user = inject('$user')
const router = useRouter()