feat: timezone in batches

2024-06-21 13:08:58 +05:30
parent 63f4dc0caa
commit 9c2bebb3d9
11 changed files with 104 additions and 29 deletions
--- a/frontend/src/components/BatchCard.vue
+++ b/frontend/src/components/BatchCard.vue
@@ -36,19 +36,25 @@
 				:endDate="batch.end_date"
 				class="mb-3"
 			/>
-			<div class="flex items-center">
+			<div class="flex items-center mb-3">
 				<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 v-if="batch.timezone" class="flex items-center">
+				<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+				<span>
+					{{ batch.timezone }}
+				</span>
+			</div>
 		</div>
 	</div>
 </template>
 <script setup>
 import { Badge } from 'frappe-ui'
 import { formatTime } from '../utils'
-import { Clock, BookOpen } from 'lucide-vue-next'
+import { Clock, BookOpen, Globe } from 'lucide-vue-next'
 import DateRange from '@/components/Common/DateRange.vue'

 const props = defineProps({
--- a/frontend/src/components/BatchOverlay.vue
+++ b/frontend/src/components/BatchOverlay.vue
@@ -26,13 +26,19 @@
 			:endDate="batch.data.end_date"
 			class="mb-3"
 		/>
-		<div class="flex items-center">
+		<div class="flex items-center mb-3">
 			<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 			<span>
 				{{ formatTime(batch.data.start_time) }} -
 				{{ formatTime(batch.data.end_time) }}
 			</span>
 		</div>
+		<div v-if="batch.data.timezone" class="flex items-center">
+			<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+			<span>
+				{{ batch.data.timezone }}
+			</span>
+		</div>
 		<router-link
 			v-if="user?.data?.is_moderator"
 			:to="{
@@ -91,7 +97,7 @@
 <script setup>
 import { inject, computed } from 'vue'
 import { Badge, Button } from 'frappe-ui'
-import { BookOpen, Clock } from 'lucide-vue-next'
+import { BookOpen, Clock, Globe } from 'lucide-vue-next'
 import { formatNumberIntoCurrency, formatTime } from '@/utils'
 import DateRange from '@/components/Common/DateRange.vue'

--- a/frontend/src/pages/Batch.vue
+++ b/frontend/src/pages/Batch.vue
@@ -87,13 +87,19 @@
 					:endDate="batch.data.end_date"
 					class="mb-3"
 				/>
-				<div class="flex items-center mb-6">
+				<div class="flex items-center mb-4">
 					<Clock class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
 					<span>
 						{{ formatTime(batch.data.start_time) }} -
 						{{ formatTime(batch.data.end_time) }}
 					</span>
 				</div>
+				<div v-if="batch.data.timezone" class="flex items-center mb-4">
+					<Globe class="h-4 w-4 stroke-1.5 mr-2 text-gray-700" />
+					<span>
+						{{ batch.data.timezone }}
+					</span>
+				</div>
 			</div>
 			<AnnouncementModal
 				v-model="showAnnouncementModal"
@@ -159,6 +165,7 @@ import {
 	Mail,
 	SendIcon,
 	MessageCircle,
+	Globe,
 } from 'lucide-vue-next'
 import { formatTime } from '@/utils'
 import BatchDashboard from '@/components/BatchDashboard.vue'
--- a/frontend/src/pages/BatchCreation.vue
+++ b/frontend/src/pages/BatchCreation.vue
@@ -9,30 +9,24 @@
 			</Button>
 		</header>
 		<div class="py-5">
-			<div class="container">
+			<div class="container border-b">
 				<div class="text-lg font-semibold mb-4">
 					{{ __('Details') }}
 				</div>
-				<div class="grid grid-cols-2 gap-10">
+				<div class="grid grid-cols-2 gap-10 mb-4">
 					<div>
 						<FormControl
 							v-model="batch.title"
 							:label="__('Title')"
 							class="mb-4"
 						/>
-						<FormControl
-							v-model="batch.description"
-							:label="__('Description')"
-							type="textarea"
-							class="mb-4"
-						/>
-					</div>
-					<div>
 						<FormControl
 							v-model="batch.published"
 							type="checkbox"
 							:label="__('Published')"
 						/>
+					</div>
+					<div class="flex flex-col">
 						<FileUploader
 							v-if="!batch.image"
 							class="mt-4"
@@ -52,7 +46,7 @@
 								</div>
 							</template>
 						</FileUploader>
-						<div v-else class="mt-4">
+						<div v-else class="my-4">
 							<div class="text-xs text-gray-600 mb-1">
 								{{ __('Meta Image') }}
 							</div>
@@ -74,10 +68,21 @@
 								/>
 							</div>
 						</div>
+						<FormControl
+							v-model="batch.allow_self_enrollment"
+							type="checkbox"
+							:label="__('Allow self enrollment')"
+						/>
 					</div>
 				</div>
 			</div>
-			<div class="container border-b mb-5">
+			<div class="container border-b mb-4">
+				<FormControl
+					v-model="batch.description"
+					:label="__('Description')"
+					type="textarea"
+					class="my-4"
+				/>
 				<div>
 					<label class="block text-sm text-gray-600 mb-1">
 						{{ __('Batch Details') }}
@@ -91,9 +96,9 @@
 					/>
 				</div>
 			</div>
-			<div class="container border-b mb-5">
+			<div class="container border-b mb-4">
 				<div class="text-lg font-semibold mb-4">
-					{{ __('Settings') }}
+					{{ __('Date and Time') }}
 				</div>
 				<div class="grid grid-cols-2 gap-10">
 					<div>
@@ -109,6 +114,8 @@
 							type="date"
 							class="mb-4"
 						/>
+					</div>
+					<div>
 						<FormControl
 							v-model="batch.start_time"
 							:label="__('Start Time')"
@@ -121,7 +128,20 @@
 							type="time"
 							class="mb-4"
 						/>
+						<FormControl
+							v-model="batch.timezone"
+							:label="__('Timezone')"
+							type="text"
+							class="mb-4"
+						/>
 					</div>
+				</div>
+			</div>
+			<div class="container border-b mb-4">
+				<div class="text-lg font-semibold mb-4">
+					{{ __('Settings') }}
+				</div>
+				<div class="grid grid-cols-2 gap-10">
 					<div>
 						<FormControl
 							v-model="batch.seat_count"
@@ -135,6 +155,8 @@
 							type="date"
 							class="mb-4"
 						/>
+					</div>
+					<div>
 						<FormControl
 							v-model="batch.medium"
 							type="select"
@@ -188,7 +210,7 @@
 	</div>
 </template>
 <script setup>
-import { computed, onMounted, inject, reactive } from 'vue'
+import { computed, onMounted, inject, reactive, onBeforeUnmount } from 'vue'
 import {
 	Breadcrumbs,
 	FormControl,
@@ -221,10 +243,12 @@ const batch = reactive({
 	end_date: '',
 	start_time: '',
 	end_time: '',
+	timezone: '',
 	evaluation_end_date: '',
 	seat_count: '',
 	medium: '',
 	category: '',
+	allow_self_enrollment: false,
 	image: null,
 	paid_batch: false,
 	currency: '',
@@ -236,6 +260,22 @@ onMounted(() => {
 	if (props.batchName != 'new') {
 		batchDetail.reload()
 	}
+	window.addEventListener('keydown', keyboardShortcut)
+})
+
+const keyboardShortcut = (e) => {
+	if (
+		e.key === 's' &&
+		(e.ctrlKey || e.metaKey) &&
+		!e.target.classList.contains('ProseMirror')
+	) {
+		saveBatch()
+		e.preventDefault()
+	}
+}
+
+onBeforeUnmount(() => {
+	window.removeEventListener('keydown', keyboardShortcut)
 })

 const newBatch = createResource({