From f48f4370755452c1d98dabf84c365db5d3048391 Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Tue, 16 Apr 2024 21:24:53 +0530
Subject: [PATCH 1/3] fix: handle same start and end dates case for batch

* also minor refactor
---
 frontend/src/components/BatchCard.vue    |  9 +++------
 frontend/src/components/BatchOverlay.vue | 12 +++++++-----
 frontend/src/pages/Batch.vue             |  8 ++++----
 frontend/src/pages/BatchDetail.vue       | 21 ++++++++++++---------
 frontend/src/utils/index.js              | 10 ++++++++++
 5 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index 071395b5..2e1e080d 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -34,8 +34,7 @@
 			<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') }}
+					{{ getFormattedDateRange(batch.start_date, batch.end_date) }}
 				</span>
 			</div>
 			<div class="flex items-center">
@@ -48,12 +47,10 @@
 	</div>
 </template>
 <script setup>
-import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
-import { inject } from 'vue'
 import { Badge } from 'frappe-ui'
-import { formatTime } from '../utils'
+import { Calendar, Clock, BookOpen } from 'lucide-vue-next'
+import { formatTime, getFormattedDateRange } from '../utils'
 
-const dayjs = inject('$dayjs')
 const props = defineProps({
 	batch: {
 		type: Object,
diff --git a/frontend/src/components/BatchOverlay.vue b/frontend/src/components/BatchOverlay.vue
index ccf0218f..dc865b96 100644
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -24,8 +24,7 @@
 		<div class="flex items-center mb-3">
 			<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 			<span>
-				{{ dayjs(batch.data.start_date).format('DD MMM YYYY') }} -
-				{{ dayjs(batch.data.end_date).format('DD MMM YYYY') }}
+				{{ getFormattedDateRange(batch.data.start_date, batch.data.end_date) }}
 			</span>
 		</div>
 		<div class="flex items-center">
@@ -91,12 +90,15 @@
 	</div>
 </template>
 <script setup>
-import { formatNumberIntoCurrency, formatTime } from '@/utils'
-import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
 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'
 
-const dayjs = inject('$dayjs')
 const user = inject('$user')
 
 const props = defineProps({
diff --git a/frontend/src/pages/Batch.vue b/frontend/src/pages/Batch.vue
index f6d96508..99400e74 100644
--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -83,8 +83,9 @@
 				<div class="flex items-center mb-3">
 					<Calendar class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 					<span>
-						{{ dayjs(batch.data.start_date).format('DD MMMM YYYY') }} -
-						{{ dayjs(batch.data.end_date).format('DD MMMM YYYY') }}
+						{{
+							getFormattedDateRange(batch.data.start_date, batch.data.end_date)
+						}}
 					</span>
 				</div>
 				<div class="flex items-center mb-6">
@@ -161,7 +162,7 @@ import {
 	SendIcon,
 	MessageCircle,
 } from 'lucide-vue-next'
-import { formatTime } from '@/utils'
+import { formatTime, getFormattedDateRange } from '@/utils'
 import BatchDashboard from '@/components/BatchDashboard.vue'
 import BatchCourses from '@/components/BatchCourses.vue'
 import LiveClass from '@/components/LiveClass.vue'
@@ -171,7 +172,6 @@ import Announcements from '@/components/Annoucements.vue'
 import AnnouncementModal from '@/components/Modals/AnnouncementModal.vue'
 import Discussions from '@/components/Discussions.vue'
 
-const dayjs = inject('$dayjs')
 const user = inject('$user')
 const showAnnouncementModal = ref(false)
 
diff --git a/frontend/src/pages/BatchDetail.vue b/frontend/src/pages/BatchDetail.vue
index 217c9fde..9483a288 100644
--- a/frontend/src/pages/BatchDetail.vue
+++ b/frontend/src/pages/BatchDetail.vue
@@ -20,8 +20,12 @@
 					<div class="flex items-center">
 						<Calendar class="h-4 w-4 text-gray-700 mr-2" />
 						<span>
-							{{ dayjs(batch.data.start_date).format('DD MMM YYYY') }} -
-							{{ dayjs(batch.data.end_date).format('DD MMM YYYY') }}
+							{{
+								getFormattedDateRange(
+									batch.data.start_date,
+									batch.data.end_date
+								)
+							}}
 						</span>
 					</div>
 					<span v-if="batch.data.start_date">&middot;</span>
@@ -80,15 +84,14 @@
 	</div>
 </template>
 <script setup>
-import { Breadcrumbs, createResource, Button } from 'frappe-ui'
-import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
-import { formatTime } from '../utils'
-import { computed, inject, ref } from 'vue'
-import BatchOverlay from '@/components/BatchOverlay.vue'
-import CourseCard from '@/components/CourseCard.vue'
+import { computed, inject } from 'vue'
 import { useRouter } from 'vue-router'
+import { BookOpen, Calendar, Clock } from 'lucide-vue-next'
+import { formatTime, getFormattedDateRange } from '@/utils'
+import { Breadcrumbs, createResource } from 'frappe-ui'
+import CourseCard from '@/components/CourseCard.vue'
+import BatchOverlay from '@/components/BatchOverlay.vue'
 
-const dayjs = inject('$dayjs')
 const user = inject('$user')
 const router = useRouter()
 
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 0c72e069..5b5b33cd 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -8,6 +8,7 @@ import Paragraph from '@editorjs/paragraph'
 import Embed from '@editorjs/embed'
 import NestedList from '@editorjs/nested-list'
 import { watch } from 'vue'
+import dayjs from '@/utils/dayjs'
 
 export function createToast(options) {
 	toast({
@@ -322,3 +323,12 @@ export function getSidebarLinks() {
 		},
 	]
 }
+
+export function getFormattedDateRange(startDate, endDate) {
+	if (startDate === endDate) {
+		return dayjs(startDate).format('DD MMM YYYY')
+	}
+	return `${dayjs(startDate).format('DD MMM YYYY')} - ${dayjs(endDate).format(
+		'DD MMM YYYY'
+	)}`
+}

From 4ec57349f83ad2ea9a47b62e3d5f07ee3d25ed31 Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Tue, 16 Apr 2024 21:39:19 +0530
Subject: [PATCH 2/3] refactor: extract out component for date range

---
 frontend/src/components/BatchCard.vue        | 16 +++++++-------
 frontend/src/components/BatchOverlay.vue     | 20 +++++++-----------
 frontend/src/components/Common/DateRange.vue | 22 ++++++++++++++++++++
 frontend/src/pages/Batch.vue                 | 18 +++++++---------
 frontend/src/pages/BatchDetail.vue           | 18 ++++++----------
 5 files changed, 52 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/components/Common/DateRange.vue

diff --git a/frontend/src/components/BatchCard.vue b/frontend/src/components/BatchCard.vue
index 2e1e080d..f5525858 100644
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -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: {
diff --git a/frontend/src/components/BatchOverlay.vue b/frontend/src/components/BatchOverlay.vue
index dc865b96..a1c7cc09 100644
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -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')
 
diff --git a/frontend/src/components/Common/DateRange.vue b/frontend/src/components/Common/DateRange.vue
new file mode 100644
index 00000000..6bc60083
--- /dev/null
+++ b/frontend/src/components/Common/DateRange.vue
@@ -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>
diff --git a/frontend/src/pages/Batch.vue b/frontend/src/pages/Batch.vue
index 99400e74..32899932 100644
--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -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)
diff --git a/frontend/src/pages/BatchDetail.vue b/frontend/src/pages/BatchDetail.vue
index 9483a288..78cde922 100644
--- a/frontend/src/pages/BatchDetail.vue
+++ b/frontend/src/pages/BatchDetail.vue
@@ -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()

From 5b120ad2487aead9e226470725d104b8ab10921c Mon Sep 17 00:00:00 2001
From: Hussain Nagaria <hussainbhaitech@gmail.com>
Date: Tue, 16 Apr 2024 22:02:56 +0530
Subject: [PATCH 3/3] refactor: take format as optional argument

---
 frontend/src/utils/index.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 5b5b33cd..8d328dd9 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -324,11 +324,15 @@ export function getSidebarLinks() {
 	]
 }
 
-export function getFormattedDateRange(startDate, endDate) {
+export function getFormattedDateRange(
+	startDate,
+	endDate,
+	format = 'DD MMM YYYY'
+) {
 	if (startDate === endDate) {
-		return dayjs(startDate).format('DD MMM YYYY')
+		return dayjs(startDate).format(format)
 	}
-	return `${dayjs(startDate).format('DD MMM YYYY')} - ${dayjs(endDate).format(
-		'DD MMM YYYY'
+	return `${dayjs(startDate).format(format)} - ${dayjs(endDate).format(
+		format
 	)}`
 }