Initial commit

2025-12-21 09:59:39 -05:00
commit cc4e467cef
36 changed files with 7133 additions and 0 deletions
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+interface Props {
+  mode: 'edit' | 'view'
+  pattern: any | null
+}
+
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  'update:pattern': [pattern: any | null]
+}>()
+
+const precisionOptions = [
+  { title: 'Yearly', value: 'yearly' },
+  { title: 'Monthly', value: 'monthly' },
+  { title: 'Weekly', value: 'weekly' },
+  { title: 'Daily', value: 'daily' },
+  { title: 'Hourly', value: 'hourly' },
+  { title: 'Minutely', value: 'minutely' },
+  { title: 'Secondly', value: 'secondly' }
+]
+
+const patternTypeOptions = [
+  { title: 'Absolute', value: 'absolute' },
+  { title: 'Relative', value: 'relative' }
+]
+
+const formatRecurrence = (pattern: any) => {
+  if (!pattern) return 'No recurrence'
+  
+  const parts = []
+  parts.push(`Every ${pattern.interval || 1}`)
+  parts.push(pattern.precision || 'day')
+  
+  if (pattern.iterations) {
+    parts.push(`(${pattern.iterations} times)`)
+  } else if (pattern.concludes) {
+    parts.push(`until ${new Date(pattern.concludes).toLocaleDateString()}`)
+  }
+  
+  return parts.join(' ')
+}
+</script>
+
+<template>
+  <div v-if="pattern || mode === 'edit'" class="event-editor-section">
+    <div class="d-flex align-center justify-space-between mb-2">
+      <div class="text-subtitle-1">Recurrence</div>
+      <v-btn v-if="mode === 'edit' && !pattern"
+        size="small"
+        variant="outlined"
+        @click="$emit('update:pattern', { pattern: 'absolute', precision: 'daily', interval: 1 })">
+        <v-icon left>mdi-plus</v-icon>
+        Add Recurrence
+      </v-btn>
+      <v-btn v-else-if="mode === 'edit' && pattern"
+        size="small"
+        variant="text"
+        color="error"
+        @click="$emit('update:pattern', null)">
+        Remove
+      </v-btn>
+    </div>
+
+    <!-- Read-only view -->
+    <div v-if="mode === 'view' && pattern" class="mb-4">
+      <div class="pa-2 border rounded">
+        <div class="mb-1"><strong>{{ formatRecurrence(pattern) }}</strong></div>
+        <div v-if="pattern.onDayOfWeek && pattern.onDayOfWeek.length > 0" class="text-caption text-grey">
+          Days: {{ pattern.onDayOfWeek.join(', ') }}
+        </div>
+      </div>
+    </div>
+
+    <!-- Edit view -->
+    <div v-else-if="mode === 'edit' && pattern" class="pa-3 border rounded">
+      <v-row dense class="mb-2">
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="pattern.pattern"
+            :items="patternTypeOptions"
+            label="Pattern Type"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+        <v-col cols="12" md="6">
+          <v-select
+            v-model="pattern.precision"
+            :items="precisionOptions"
+            label="Frequency"
+            variant="outlined"
+            density="compact"
+          />
+        </v-col>
+      </v-row>
+
+      <v-row dense class="mb-2">
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model.number="pattern.interval"
+            label="Interval"
+            type="number"
+            variant="outlined"
+            density="compact"
+            :rules="[v => v > 0 || 'Must be greater than 0']"
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model.number="pattern.iterations"
+            label="Iterations"
+            type="number"
+            variant="outlined"
+            density="compact"
+            hint="Leave empty for infinite"
+            clearable
+          />
+        </v-col>
+        <v-col cols="12" md="4">
+          <v-text-field
+            v-model="pattern.concludes"
+            label="End Date"
+            type="date"
+            variant="outlined"
+            density="compact"
+            clearable
+          />
+        </v-col>
+      </v-row>
+
+      <div class="text-caption text-grey mt-2">
+        Advanced recurrence rules (like specific days of week) can be added to the pattern object
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.event-editor-section {
+  margin-bottom: 1.5rem;
+}
+</style>