@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/base/event-calendar/EventModal.vue

@@ -0,0 +1,573 @@
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core';
+import { toDate } from 'reka-ui/date';
+import { fromDate, CalendarDate, type DateValue, today, getLocalTimeZone } from '@internationalized/date';
+import { cn } from '@/lib/utils';
+import type { CalendarEvent, EventColor, EventStatus } from './types';
+import { DefaultEndHour, DefaultStartHour, EndHour, StartHour } from './constants';
+import { useTimezone } from './composables/useTimezone';
+import { eventModalSchema } from './eventModal.schema';
+import DynectButton from '@/components/dynect/Button.vue';
+
+const uuidv4 = useId();
+
+const props = defineProps<{
+	isOpen: boolean;
+	mode: 'add' | 'edit';
+	eventData?: CalendarEvent | null; // For pre-filling in edit mode
+	targetDate?: Date | null; // For pre-filling start date in add mode
+	isAllDayFromCell?: boolean; // For pre-filling allDay status from cell click
+}>();
+
+const emit = defineEmits<{
+	(e: 'update:isOpen', value: boolean): void;
+	(e: 'submitEvent', eventPayload: CalendarEvent, mode: 'add' | 'edit'): void;
+	(e: 'deleteEvent', eventId: string): void;
+}>();
+
+// Handle ESC key to close modal
+// Initialize timezone support
+const { userTimezone, commonTimezones, convertEventFromDisplayTimezone } = useTimezone();
+
+onKeyStroke('Escape', (e) => {
+	if (props.isOpen) {
+		e.preventDefault();
+		emit('update:isOpen', false);
+	}
+});
+
+const startDateOpen = ref(false);
+const endDateOpen = ref(false);
+const isAllDay = ref(props.isAllDayFromCell || false);
+const isRecurring = ref(false);
+const isTZOpen = ref(false);
+const recurringEndType = ref('never');
+const startDateValue = ref<Date | undefined>(undefined);
+const endDateValue = ref<Date | undefined>(addHours(new Date(), 1));
+const recurringEndDateValue = ref<Date | undefined>(undefined);
+const error = ref<string | null>(null);
+const timezoneSearchTerm = ref('');
+
+const setError = (message: string) => {
+	error.value = message;
+};
+
+const clearError = () => {
+	error.value = null;
+};
+
+const formatTimeForInput = (date: Date) => {
+	const hours = date.getHours().toString().padStart(2, '0');
+	const minutes = Math.floor(date.getMinutes() / 15) * 15;
+	return `${hours}:${minutes.toString().padStart(2, '0')}`;
+};
+
+const convertToDateValue = (date: Date, timezone: string = 'UTC'): DateValue => {
+	try {
+		const zonedDateTime = fromDate(date, timezone);
+		return new CalendarDate(zonedDateTime.year, zonedDateTime.month, zonedDateTime.day);
+	} catch {
+		// Fallback: Manual construction
+		return new CalendarDate(date.getFullYear(), date.getMonth() + 1, date.getDate());
+	}
+};
+
+// Memoize time options so they're only calculated once
+const timeOptions = computed(() => {
+	const options = [];
+	for (let hour = StartHour; hour <= EndHour; hour++) {
+		for (let minute = 0; minute < 60; minute += 15) {
+			const formattedHour = hour.toString().padStart(2, '0');
+			const formattedMinute = minute.toString().padStart(2, '0');
+			const value = `${formattedHour}:${formattedMinute}`;
+			// Use a fixed date to avoid unnecessary date object creations
+			const date = new Date(2000, 0, 1, hour, minute);
+			const label = convertDateTime(date, 'en-US', { hour: 'numeric', minute: 'numeric', hour12: true });
+			options.push({ value, label });
+		}
+	}
+	return options;
+});
+
+const getTZDisplayName = (timezone: string) => {
+	const tz = commonTimezones.find((t) => t.timezone === timezone);
+	return tz ? `${tz.label} (${tz.offset})` : timezone;
+};
+
+// Helper to ensure proper Date object for Calendar component
+const ensureValidDate = (value: any): Date => {
+	if (!value) return new Date();
+	if (value instanceof Date && !Number.isNaN(value.getTime())) return value;
+	if ('calendar' in value) return toDate(value);
+	const parsed = new Date(value);
+	return Number.isNaN(parsed.getTime()) ? new Date() : parsed;
+};
+
+// Filter timezones based on search term
+const filteredTimezones = computed(() => {
+	if (!timezoneSearchTerm.value) {
+		return commonTimezones;
+	}
+	const searchLower = timezoneSearchTerm.value.toLowerCase();
+	return commonTimezones.filter((tz: { label: string; timezone: string; offset: string }) => tz.label.toLowerCase().includes(searchLower) || tz.timezone.toLowerCase().includes(searchLower) || tz.offset.toLowerCase().includes(searchLower));
+});
+
+const statusOptions = [
+	{ label: 'Confirmed', value: 'confirmed' },
+	{ label: 'Tentative', value: 'tentative' },
+	{ label: 'Cancelled', value: 'cancelled' },
+];
+
+const recurringTypeOptions = [
+	{ label: 'Daily', value: 'daily' },
+	{ label: 'Weekly', value: 'weekly' },
+	{ label: 'Monthly', value: 'monthly' },
+	{ label: 'Yearly', value: 'yearly' },
+];
+
+const colorOptions: Array<{ value: EventColor; label: string; bgClass: string; borderClass: string }> = [
+	{ value: 'sky', label: 'Sky', bgClass: 'bg-sky-400 data-[state=checked]:bg-sky-400', borderClass: 'border-sky-400 data-[state=checked]:border-sky-400' },
+	{ value: 'amber', label: 'Amber', bgClass: 'bg-amber-400 data-[state=checked]:bg-amber-400', borderClass: 'border-amber-400 data-[state=checked]:border-amber-400' },
+	{ value: 'violet', label: 'Violet', bgClass: 'bg-violet-400 data-[state=checked]:bg-violet-400', borderClass: 'border-violet-400 data-[state=checked]:border-violet-400' },
+	{ value: 'rose', label: 'Rose', bgClass: 'bg-rose-400 data-[state=checked]:bg-rose-400', borderClass: 'border-rose-400 data-[state=checked]:border-rose-400' },
+	{ value: 'emerald', label: 'Emerald', bgClass: 'bg-emerald-400 data-[state=checked]:bg-emerald-400', borderClass: 'border-emerald-400 data-[state=checked]:border-emerald-400' },
+	{ value: 'orange', label: 'Orange', bgClass: 'bg-orange-400 data-[state=checked]:bg-orange-400', borderClass: 'border-orange-400 data-[state=checked]:border-orange-400' },
+];
+
+// Form reactive object
+const form = reactive<CalendarEvent & { recurringEndType?: string }>({
+	id: props.mode === 'add' ? uuidv4 : props.eventData?.id || '',
+	title: '',
+	description: '',
+	startDate: ensureValidDate(props.targetDate),
+	endDate: ensureValidDate(props.targetDate ? addHours(new Date(props.targetDate), 1) : addHours(new Date(), 1)),
+	startTime: `${DefaultStartHour}:00`,
+	endTime: `${DefaultEndHour}:00`,
+	allDay: props.isAllDayFromCell || false,
+	color: 'sky' as EventColor,
+	location: '',
+	status: 'confirmed' as EventStatus,
+	timezone: userTimezone.value,
+	isRecurring: false,
+	recurringPattern: {
+		type: 'daily',
+		interval: 1,
+		daysOfWeek: [] as number[],
+		count: undefined,
+		endDate: new Date(),
+		dayOfMonth: undefined,
+		monthOfYear: undefined,
+	},
+	recurringId: undefined,
+	recurringEndType: 'never',
+});
+
+// VeeValidate form handling
+const { handleSubmit, isSubmitting, setFieldValue, values, setValues, resetForm } = useForm({
+	validationSchema: eventModalSchema,
+	initialValues: form,
+});
+
+const endDateMinValue = computed<DateValue | undefined>(() => {
+	if (!values.startDate || !(values.startDate instanceof Date)) return undefined;
+	try {
+		return convertToDateValue(values.startDate, getLocalTimeZone());
+	} catch {
+		return undefined;
+	}
+});
+
+// Submit handler
+const onSubmit = handleSubmit(async (values: any) => {
+	clearError();
+
+	const start = new Date(values.startDate);
+	const end = new Date(values.endDate);
+
+	// Handle all-day vs timed events
+	if (values.allDay) {
+		start.setHours(0, 0, 0, 0);
+		end.setHours(23, 59, 59, 999);
+	} else {
+		const [startHours = 0, startMinutes = 0] = (values.startTime || '09:00').split(':').map(Number);
+		const [endHours = 0, endMinutes = 0] = (values.endTime || '10:00').split(':').map(Number);
+
+		if (!validateEventTimes(startHours, startMinutes, endHours, endMinutes)) {
+			return;
+		}
+
+		start.setHours(startHours, startMinutes, 0);
+		end.setHours(endHours, endMinutes, 0);
+	}
+
+	// Validate that end date is not before start date
+	if (isBefore(end, start)) {
+		setError('End date cannot be before start date');
+		return;
+	}
+
+	// Use generic title if empty
+	const eventTitle = (values.title ?? '').trim() ? values.title : '(no title)';
+
+	// Process recurring pattern
+	const recurringPattern = processRecurringPattern(values, start);
+	// Ensure dates are proper Date objects and use correct field names
+	const eventData: CalendarEvent = {
+		...values,
+		title: eventTitle,
+		startDate: start,
+		color: values.color as EventColor,
+		endDate: end,
+		recurringPattern,
+		recurringId: values.isRecurring && props.mode === 'add' ? uuidv4 : values.recurringId,
+	};
+
+	// Convert timezone before submitting
+	const submittedEvent = convertEventFromDisplayTimezone(eventData);
+	emit('submitEvent', submittedEvent, props.mode);
+	closePopup();
+});
+
+watch(
+	() => [props.isOpen, props.mode, props.eventData, props.targetDate, props.isAllDayFromCell],
+	([isOpenNew, modeNew, eventDataNew, targetDateNew, isAllDayNew]) => {
+		if (isOpenNew) {
+			clearError(); // Clear any previous errors when opening modal
+			if (modeNew === 'edit' && eventDataNew && typeof eventDataNew === 'object' && 'startDate' in eventDataNew) {
+				// Determine the recurring end type for the UI
+				let recurringEndType = 'never';
+				if (eventDataNew.recurringPattern?.count) {
+					recurringEndType = 'after';
+				} else if (eventDataNew.recurringPattern?.endDate) {
+					recurringEndType = 'on';
+				}
+
+				const startDate = ensureValidDate(eventDataNew.startDate);
+				const endDate = ensureValidDate(eventDataNew.endDate);
+
+				// Update ref values
+				startDateValue.value = startDate;
+				endDateValue.value = endDate;
+				recurringEndDateValue.value = eventDataNew.recurringPattern?.endDate ? ensureValidDate(eventDataNew.recurringPattern.endDate) : undefined;
+				timezoneSearchTerm.value = '';
+				isAllDay.value = eventDataNew.allDay || false;
+				isRecurring.value = eventDataNew.isRecurring || false;
+
+				// Update form with edit data
+				const editFormData = {
+					...eventDataNew,
+					startDate,
+					endDate,
+					startTime: formatTimeForInput(eventDataNew.startDate),
+					endTime: formatTimeForInput(eventDataNew.endDate),
+					recurringEndType,
+					recurringPattern: {
+						type: 'daily',
+						interval: 1,
+						daysOfWeek: [] as number[],
+						count: undefined,
+						endDate: undefined,
+						dayOfMonth: undefined,
+						monthOfYear: undefined,
+						...eventDataNew.recurringPattern,
+					},
+				};
+				Object.assign(form, editFormData);
+				setValues(editFormData);
+			} else {
+				// 'add' mode or reset
+				const targetDate = ensureValidDate(targetDateNew);
+				const defaultEndDate = ensureValidDate(addHours(targetDate, 1));
+
+				// Update ref values
+				startDateValue.value = targetDate;
+				endDateValue.value = defaultEndDate;
+				recurringEndDateValue.value = undefined;
+				timezoneSearchTerm.value = '';
+				isAllDay.value = Boolean(isAllDayNew);
+				isRecurring.value = false;
+
+				// Reset form for add mode
+				const addFormData = {
+					id: '',
+					title: '',
+					description: '',
+					startDate: targetDate,
+					endDate: defaultEndDate,
+					allDay: Boolean(isAllDayNew),
+					color: 'sky' as EventColor,
+					location: '',
+					status: 'confirmed' as EventStatus,
+					timezone: userTimezone.value,
+					startTime: `${DefaultStartHour}:00`,
+					endTime: `${DefaultEndHour}:00`,
+					isRecurring: false,
+					recurringPattern: {
+						type: 'daily',
+						interval: 1,
+						daysOfWeek: [] as number[],
+						count: undefined,
+						endDate: undefined,
+						dayOfMonth: undefined,
+						monthOfYear: undefined,
+					},
+					recurringId: undefined,
+					recurringEndType: 'never',
+				};
+				Object.assign(form, addFormData);
+				setValues(addFormData);
+			}
+		}
+	},
+	{ deep: true }
+);
+
+// Watch for changes to recurring pattern type and auto-populate fields
+watch(
+	() => form.recurringPattern?.type,
+	(newType, oldType) => {
+		const startDate = form.startDate;
+		if (!startDate || !form.recurringPattern) return;
+
+		const date = ensureValidDate(startDate);
+
+		if (newType === 'weekly' && oldType !== 'weekly') {
+			const currentDaysOfWeek = form.recurringPattern.daysOfWeek || [];
+			if (currentDaysOfWeek.length === 0) {
+				// Auto-select the day of the week of the start date
+				const dayOfWeek = date.getDay();
+				form.recurringPattern.daysOfWeek = [dayOfWeek];
+			}
+		} else if (newType === 'monthly' && oldType !== 'monthly') {
+			const currentDayOfMonth = form.recurringPattern.dayOfMonth;
+			if (!currentDayOfMonth) {
+				// Auto-set the day of the month of the start date
+				form.recurringPattern.dayOfMonth = date.getDate();
+			}
+		} else if (newType === 'yearly' && oldType !== 'yearly') {
+			const currentMonthOfYear = form.recurringPattern.monthOfYear;
+			const currentDayOfMonth = form.recurringPattern.dayOfMonth;
+
+			if (!currentMonthOfYear) {
+				// Auto-set the month of the start date (getMonth() returns 0-11, but we want 1-12)
+				form.recurringPattern.monthOfYear = date.getMonth() + 1;
+			}
+			if (!currentDayOfMonth) {
+				// Auto-set the day of the month of the start date
+				form.recurringPattern.dayOfMonth = date.getDate();
+			}
+		}
+	}
+);
+
+const validateEventTimes = (startHours: number, startMinutes: number, endHours: number, endMinutes: number) => {
+	if (startHours < StartHour || startHours > EndHour || endHours < StartHour || endHours > EndHour) {
+		setError(`Selected time must be between ${StartHour}:00 and ${EndHour}:00`);
+		return false;
+	}
+	return true;
+};
+
+const processRecurringPattern = (value: any, start: Date) => {
+	if (!value.isRecurring || !value.recurringPattern) {
+		return undefined;
+	}
+
+	const recurringPattern = { ...value.recurringPattern };
+
+	// Handle end conditions
+	if (value.recurringEndType === 'never') {
+		recurringPattern.endDate = undefined;
+		recurringPattern.count = undefined;
+		recurringPattern.endsNever = true;
+	} else if (value.recurringEndType === 'after') {
+		recurringPattern.endDate = undefined;
+		recurringPattern.endsNever = false;
+	} else if (value.recurringEndType === 'on') {
+		recurringPattern.count = undefined;
+		recurringPattern.endsNever = false;
+	}
+
+	// Handle weekly events
+	if (recurringPattern.type === 'weekly' && (!recurringPattern.daysOfWeek || recurringPattern.daysOfWeek.length === 0)) {
+		recurringPattern.daysOfWeek = [start.getDay()];
+	}
+
+	// Handle monthly events
+	if (recurringPattern.type === 'monthly' && !recurringPattern.dayOfMonth) {
+		recurringPattern.dayOfMonth = start.getDate();
+	}
+
+	// Handle yearly events
+	if (recurringPattern.type === 'yearly') {
+		if (!recurringPattern.monthOfYear) {
+			recurringPattern.monthOfYear = start.getMonth() + 1;
+		}
+		if (!recurringPattern.dayOfMonth) {
+			recurringPattern.dayOfMonth = start.getDate();
+		}
+	}
+
+	return recurringPattern;
+};
+
+const closePopup = () => {
+	emit('update:isOpen', false);
+};
+
+const handleDelete = () => {
+	if (props.mode === 'edit' && props.eventData?.id) {
+		emit('deleteEvent', props.eventData.id);
+		closePopup();
+	}
+};
+</script>
+
+<template>
+	<DynectModal :open="isOpen" :title="mode === 'add' ? 'Create Event' : 'Edit Event'" size="xl" :show-cancel="false" :show-action="false" @update:open="closePopup">
+		<!-- Error banner -->
+		<DynectFormError v-if="error" :error="error" class="mb-4" />
+
+		<form @submit="onSubmit">
+			<div class="grid gap-4 py-4">
+				<!-- Title -->
+				<div class="*:not-first:mt-1.5">
+					<DynectInput id="title" v-model="form.title" required label="Title" placeholder="Event title" />
+				</div>
+
+				<!-- Description -->
+				<div class="*:not-first:mt-1.5">
+					<DynectInput id="description" v-model="form.description" required label="Description" placeholder="Event description" />
+				</div>
+
+				<!-- Start Date + Start Time -->
+				<div class="flex gap-4">
+					<DynectDatePicker id="startDate" v-model="form.startDate" label="Start Date" :required="true" placeholder="Pick a date" class="flex-1" />
+					<DynectSelect v-if="!form.allDay" id="startTime" v-model="form.startTime" label="Start Time" placeholder="Select time" class="min-w-32" :options="timeOptions" />
+				</div>
+
+				<!-- End Date + End Time -->
+				<div class="flex gap-4">
+					<DynectDatePicker id="endDate" v-model="form.endDate" label="End Date" placeholder="Pick a date" class="flex-1" :min-value="endDateMinValue" />
+					<DynectSelect v-if="!form.allDay" id="endTime" v-model="form.endTime" label="End Time" placeholder="Select time" class="min-w-32" :options="timeOptions" />
+				</div>
+
+				<!-- All Day -->
+				<DynectCheckbox id="allDay" v-model="form.allDay" inline-label="All Day Event" />
+
+				<!-- Location -->
+				<div class="space-y-1">
+					<DynectInput id="location" v-model="form.location" label="Location" placeholder="Add event location">
+						<template #leading>
+							<Icon name="lucide:map-pin" class="size-4" />
+						</template>
+					</DynectInput>
+					<div v-if="form.location?.trim()" class="text-text-body bg-background flex items-center gap-2 rounded-md p-2 text-sm">
+						<Icon name="lucide:map-pin" size="14" class="shrink-0" />
+						<span class="truncate">{{ form.location }}</span>
+					</div>
+				</div>
+
+				<!-- Color -->
+				<DynectRadio id="color" v-model="form.color" label="Color" :options="colorOptions" :required="true" :hide-input="true" radio-group-class="grid grid-cols-2 gap-4 sm:grid-cols-4">
+					<template v-for="colorOption in colorOptions" :key="colorOption.value" #[colorOption.value]>
+						<div class="border-border-base-base-medium flex cursor-pointer flex-col items-center gap-1.5 rounded-md border p-2.5 text-center" :class="form.color === colorOption.value ? 'bg-bg-brand-soft border-border-base-brand' : 'bg-bg-primary-soft hover:bg-bg-secondary'">
+							<span :class="cn('size-6 rounded-full', colorOption.bgClass, colorOption.borderClass)" />
+						</div>
+					</template>
+				</DynectRadio>
+
+				<!-- Status -->
+				<DynectSelect id="status" v-model="form.status" label="Status" placeholder="Select status" :options="statusOptions" />
+
+				<!-- Timezone -->
+				<DynectSelect id="timezone" v-model="form.timezone" label="Timezone" placeholder="Select timezone" :options="commonTimezones" value-key="timezone" label-key="label" :searchable="true" search-placeholder="Search timezones...">
+					<template #option="{ option }">{{ option.label }} ({{ option.offset }})</template>
+					<template #selected="{ value }">{{ getTZDisplayName(String(value ?? '')) }}</template>
+				</DynectSelect>
+
+				<!-- Recurring Event -->
+				<div class="flex items-center gap-2">
+					<DynectCheckbox
+						id="isRecurring"
+						v-model="form.isRecurring"
+						inline-label=""
+						@update:checked="
+							(val: any) => {
+								isRecurring = val;
+								form.isRecurring = val;
+							}
+						"
+					/>
+					<span class="flex cursor-default items-center gap-1.5 text-sm">
+						<Icon name="lucide:repeat" size="14" class="text-text-body" />
+						Recurring Event
+					</span>
+				</div>
+
+				<!-- Recurring pattern -->
+				<div v-if="form.isRecurring" class="bg-background space-y-4 rounded-md p-4">
+					<h4 class="text-foreground text-sm font-medium">Recurrence Pattern</h4>
+
+					<DynectSelect id="recurringPattern.type" :model-value="form.recurringPattern?.type" label="Repeat" placeholder="Select frequency" :options="recurringTypeOptions" @update:model-value="(v: any) => form.recurringPattern && (form.recurringPattern.type = v)" />
+
+					<div class="flex gap-4">
+						<DynectInput id="recurringPattern.interval" :model-value="form.recurringPattern?.interval" label="Every" type="number" placeholder="1" class="flex-1" @update:model-value="(v: any) => form.recurringPattern && (form.recurringPattern.interval = v)" />
+						<div class="flex flex-1 items-end">
+							<span class="text-text-body pb-2.5 text-sm"> {{ form.recurringPattern?.type || 'day(s)' }}{{ ((form.recurringPattern?.interval as number) ?? 0) > 1 ? 's' : '' }} </span>
+						</div>
+					</div>
+
+					<!-- Weekly: days of week -->
+					<div v-if="form.recurringPattern?.type === 'weekly'" class="space-y-1.5">
+						<span class="text-foreground text-sm font-medium">Days of the week</span>
+						<ToggleGroup type="multiple" variant="outline" size="sm" @update:model-value="(v: any) => setFieldValue('recurringPattern.daysOfWeek', v as number[])">
+							<ToggleGroupItem v-for="(day, index) in getDayNameShort()" :key="day" :value="index" :aria-label="`Toggle ${day}`" class="h-8 w-12 cursor-pointer p-0">
+								{{ day }}
+							</ToggleGroupItem>
+						</ToggleGroup>
+					</div>
+
+					<!-- End recurrence -->
+					<div class="space-y-2">
+						<span class="text-foreground text-sm font-medium">End recurrence</span>
+						<RadioGroup v-model="form.recurringEndType" class="space-y-2">
+							<div class="flex items-center space-x-2">
+								<RadioGroupItem id="end-never" value="never" />
+								<Label for="end-never" class="font-normal">Never</Label>
+							</div>
+
+							<div class="flex items-center space-x-2">
+								<RadioGroupItem id="end-after" value="after" />
+								<Label for="end-after" class="font-normal">After</Label>
+								<DynectInput id="recurringPattern.count" :model-value="form.recurringPattern?.count" type="number" class="w-20" placeholder="10" :disabled="form.recurringEndType !== 'after'" @update:model-value="(v: any) => form.recurringPattern && (form.recurringPattern.count = v)" />
+								<span class="text-text-body text-sm">occurrences</span>
+							</div>
+
+							<div class="flex items-center space-x-2">
+								<RadioGroupItem id="end-on" value="on" />
+								<Label for="end-on" class="font-normal">On</Label>
+								<DynectDatePicker
+									id="recurringPattern.endDate"
+									:model-value="form.recurringPattern?.endDate"
+									placeholder="Pick date"
+									:disabled="form.recurringEndType !== 'on'"
+									:min-value="today(getLocalTimeZone())"
+									@update:model-value="(v: any) => form.recurringPattern && (form.recurringPattern.endDate = v)"
+								/>
+							</div>
+						</RadioGroup>
+					</div>
+				</div>
+			</div>
+
+			<DialogFooter>
+				<DynectButton type="button" color="secondary" @click="closePopup">Cancel</DynectButton>
+				<DynectButton type="submit" color="brand" :disabled="isSubmitting">
+					{{ isSubmitting ? 'Saving...' : mode === 'add' ? 'Add Event' : 'Save Changes' }}
+				</DynectButton>
+				<DynectButton v-if="mode === 'edit'" type="button" color="danger" class="ml-auto" @click="handleDelete"> Delete </DynectButton>
+			</DialogFooter>
+		</form>
+	</DynectModal>
+</template>