Skip to content

Commit 4fb05a2

Browse files
AVappsAVapps
committed
Enregistrer les DateTime au format ISO8601
1 parent df620bc commit 4fb05a2

29 files changed

+367
-557
lines changed

‎src/components/Calendar/CalendarDay.vue‎

Lines changed: 31 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -23,75 +23,55 @@
2323
</div>
2424
</template>
2525

26-
<script>
27-
import { defineComponent, inject, ref, computed } from 'vue'
26+
<script setup>
27+
import { ref, computed } from 'vue'
2828
import { DateTime, Settings } from 'luxon'
2929
import { eventClass, isAlldayTag } from '@/helpers/calendar'
30-
3130
import AlldayEvent from './Events/AlldayEvent'
3231
import DefaultEvent from './Events/DefaultEvent'
3332
import DutyEvent from './Events/DutyEvent'
3433
import RotationEvent from './Events/RotationEvent'
34+
import { usePlanning } from '@/store'
3535
3636
const TIMEZONE = 'Europe/Paris'
3737
Settings.defaultLocale = 'fr'
3838
Settings.defaultZoneName = TIMEZONE
3939
40-
export default defineComponent({
41-
name: 'CalendarDay',
42-
props: ['day'],
43-
setup(props) {
44-
const zone = ref('Europe/Paris')
45-
const locale = ref('fr')
46-
const datasource = inject('datasource')
40+
// eslint-disable-next-line no-undef
41+
const props = defineProps(['day'])
4742
48-
// TODO : implement global state
49-
const globalState = {
50-
userId: 'IEN'
51-
}
43+
const zone = ref(TIMEZONE)
44+
const locale = ref('fr')
5245
53-
const state = computed(() => {
54-
const dayState = datasource.getDay(globalState.userId, props.day.iso)
55-
return (
56-
dayState || {
57-
date: props.day.iso,
58-
tags: [],
59-
hints: [],
60-
allday: false,
61-
label: '',
62-
events: []
63-
}
64-
)
65-
})
46+
const planning = usePlanning()
6647
67-
function getTime(ts) {
68-
return DateTime.fromMillis(ts, {
69-
zone: zone.value,
70-
locale: locale.value
71-
}).toFormat('HH:mm')
72-
}
7348
74-
function eventComponent(evt) {
75-
if (isAlldayTag(evt.tag)) {
76-
return AlldayEvent
77-
}
78-
if (evt.tag === 'rotation') {
79-
return RotationEvent
80-
}
81-
if (evt.events) {
82-
return DutyEvent
83-
}
84-
return DefaultEvent
49+
const state = computed(() => {
50+
const dayState = planning.getDay(props.day.iso)
51+
return (
52+
dayState || {
53+
date: props.day.iso,
54+
tags: [],
55+
hints: [],
56+
allday: false,
57+
label: '',
58+
events: []
8559
}
60+
)
61+
})
8662
87-
return {
88-
state,
89-
eventComponent,
90-
eventClass,
91-
getTime
92-
}
63+
function eventComponent(evt) {
64+
if (isAlldayTag(evt.tag)) {
65+
return AlldayEvent
9366
}
94-
})
67+
if (evt.tag === 'rotation') {
68+
return RotationEvent
69+
}
70+
if (evt.events) {
71+
return DutyEvent
72+
}
73+
return DefaultEvent
74+
}
9575
</script>
9676

9777
<style lang="scss">

‎src/components/Calendar/CalendarMonth.vue‎

Lines changed: 12 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
<div class="av-calendar-month">
33
<div class="av-calendar-weekdays">
44
<div
5-
v-for="weekday in weekdays"
5+
v-for="weekday in WEEKDAYS"
66
:key="weekday.short"
77
class="av-calendar-weekday-long"
88
>
99
{{ weekday.long }}
1010
</div>
1111
<div
12-
v-for="weekday in weekdays"
12+
v-for="weekday in WEEKDAYS"
1313
:key="weekday.short"
1414
class="av-calendar-weekday-short"
1515
>
@@ -26,39 +26,22 @@
2626
</div>
2727
</template>
2828

29-
<script>
29+
<script setup>
3030
import { ref } from 'vue'
3131
import CalendarDay from './CalendarDay'
3232
import { getDaysForMonth, WEEKDAYS } from '@/helpers/calendar'
3333
34-
export default {
35-
name: 'CalendarMonth',
36-
components: {
37-
CalendarDay
38-
},
39-
props: ['month'],
40-
setup(props) {
41-
console.time(`setup CalendarMonth ${props.month?.toISODate()}`)
42-
const days = ref([])
34+
// eslint-disable-next-line no-undef
35+
const props = defineProps(['month'])
36+
console.time(`setup CalendarMonth ${props.month?.toISODate()}`)
37+
const days = ref([])
4338
44-
// TODO : implement global state
45-
const state = {
46-
userId: 'IEN',
47-
isPNT: true
48-
}
49-
50-
// TODO: est-ce mieux avec requestAnimationFrame ?
51-
requestAnimationFrame(() => {
52-
days.value = getDaysForMonth(props.month, state)
53-
console.timeEnd(`setup CalendarMonth ${props.month?.toISODate()}`)
54-
})
39+
// TODO: est-ce mieux avec requestAnimationFrame ?
40+
requestAnimationFrame(() => {
41+
days.value = getDaysForMonth(props.month)
42+
console.timeEnd(`setup CalendarMonth ${props.month?.toISODate()}`)
43+
})
5544
56-
return {
57-
days,
58-
weekdays: WEEKDAYS
59-
}
60-
}
61-
}
6245
</script>
6346
6447
<style lang="scss">

‎src/components/Calendar/Events/DefaultEvent.vue‎

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,19 @@
33
<span class="v-title" :class="'tosync-color-' + event.tag">
44
{{ event.summary }}
55
</span>
6-
<span class="v-start">{{ tsToTime(event.start) }}</span>
7-
<span class="v-end">{{ tsToTime(event.end) }}</span>
6+
<span class="v-start">{{ toTimeString(event.start) }}</span>
7+
<span class="v-end">{{ toTimeString(event.end) }}</span>
88
</div>
99
</template>
1010

11-
<script>
12-
import { defineComponent } from 'vue'
13-
import { tsToTime } from '@/helpers/dates'
11+
<script setup>
12+
import { toRefs } from 'vue'
13+
import { toTimeString } from '@/helpers/dates'
1414
import { tagLabel } from '@/helpers/events'
1515
16-
export default defineComponent({
17-
name: 'DefaultEvent',
18-
props: ['event', 'date'],
19-
setup() {
20-
return {
21-
tsToTime,
22-
tagLabel
23-
}
24-
}
25-
})
16+
// eslint-disable-next-line no-undef
17+
const props = defineProps(['event', 'date'])
18+
const { event } = toRefs(props)
2619
</script>
2720

2821
<style lang="scss" scoped>

‎src/components/Calendar/Events/DutyEvent.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
<template>
22
<div class="duty">
3-
<div class="d-start">{{ tsToTime(event.start) }}</div>
3+
<div class="d-start">{{ toTimeString(event.start) }}</div>
44
<div v-for="evt in event.events" :key="evt.slug" class="duty-event" :class="eventClass(evt, date)">
55
<span class="v-title">
66
{{ evt.summary }}
77
</span>
8-
<span class="v-start">{{ tsToTime(evt.start) }}</span>
9-
<span class="v-end">{{ tsToTime(evt.end) }}</span>
8+
<span class="v-start">{{ toTimeString(evt.start) }}</span>
9+
<span class="v-end">{{ toTimeString(evt.end) }}</span>
1010
</div>
11-
<div class="d-end">{{ tsToTime(event.end) }}</div>
11+
<div class="d-end">{{ toTimeString(event.end) }}</div>
1212
</div>
1313
</template>
1414

1515
<script setup>
16-
import { tsToTime } from '@/helpers/dates'
16+
import { toTimeString } from '@/helpers/dates'
1717
import { DateTime } from 'luxon'
1818
import { eventClass } from '@/helpers/calendar'
1919
@@ -28,6 +28,8 @@ const props = defineProps({
2828
required: true
2929
}
3030
})
31+
32+
const { date, event } = toRefs(props)
3133
</script>
3234

3335
<style lang="scss" scoped>

‎src/components/Calendar/Events/RotationEvent.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
class="sv"
77
:class="['events-count-' + sv?.events?.length, ...eventClass(sv, props.date)]"
88
>
9-
<span class="d-start">{{ tsToTime(sv.start) }}</span>
9+
<span class="d-start">{{ toTimeString(sv.start) }}</span>
1010
<div
1111
class="sv-event"
1212
v-for="etape in filterEventsByDate(sv.events, props.date)"
@@ -19,17 +19,17 @@
1919
<span class="v-divider">-</span>
2020
<span class="v-to">{{ etape.to }}</span>
2121
</span>
22-
<span class="v-start">{{ tsToTime(etape.std ?? etape.start) }}</span>
23-
<span class="v-end">{{ tsToTime(etape.sta ?? etape.end) }}</span>
22+
<span class="v-start">{{ toTimeString(etape.std ?? etape.start) }}</span>
23+
<span class="v-end">{{ toTimeString(etape.sta ?? etape.end) }}</span>
2424
</div>
25-
<span class="d-end">{{ tsToTime(sv.end) }}</span>
25+
<span class="d-end">{{ toTimeString(sv.end) }}</span>
2626
</div>
2727
</div>
2828
</template>
2929

3030
<script setup>
3131
import { computed } from 'vue'
32-
import { tsToTime } from '@/helpers/dates'
32+
import { toTimeString } from '@/helpers/dates'
3333
import { DateTime } from 'luxon'
3434
import { eventClass, filterEventsByDate } from '@/helpers/calendar'
3535

0 commit comments

Comments
 (0)