1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
<template>
<studip-dialog
:title="$gettext('Bearbeitungszeit verlängern')"
:confirmText="$gettext('Verlängern')"
confirmClass="accept"
:closeText="$gettext('Abbrechen')"
closeClass="cancel"
@close="onClose"
@confirm="onConfirm"
>
<template #dialogContent>
<form class="default">
<p>
{{ $gettext('Aktuelle Bearbeitungszeit:') }} <StudipDate :date="startDate" /> - <StudipDate
:date="endDate"
/>
({{ $gettext('%{ count } Tage', { count: oldDuration }) }})
</p>
<div class="formpart">
<label class="studiprequired">
<span class="textlabel">{{ $gettext('Bearbeitungszeit verlängern bis zum') }}</span>
<span class="asterisk" :title="$gettext('Dies ist ein Pflichtfeld')" aria-hidden="true">*</span>
<input
:id="`task-groups-${uid}`"
name="end-date"
type="date"
v-model="localEndDate"
:min="endDateString"
class="size-l"
required
/>
</label>
</div>
<p>
{{ $gettext('Verlängerte Bearbeitungszeit:') }} <StudipDate :date="startDate" /> - <StudipDate
:date="newEndDate"
/>
({{ $gettext('%{ count } Tage', { count: newDuration }) }})
</p>
</form>
</template>
</studip-dialog>
</template>
<script>
import { mapActions } from 'vuex';
import StudipDate from '../../StudipDate.vue';
const endOfDay = (_date) => {
const date = new Date(_date);
date.setHours(23, 59, 59, 999);
return date;
};
const midnight = (_date) => {
const date = new Date(_date);
date.setHours(0, 0, 0, 0);
return date;
};
const dateString = (date) =>
`${date.getFullYear()}-${('' + (date.getMonth() + 1)).padStart(2, '0')}-${('' + date.getDate()).padStart(2, '0')}`;
let nextUid = 0;
export default {
props: ['taskGroup'],
components: {
StudipDate,
},
data: () => ({ localEndDate: null, uid: nextUid++ }),
computed: {
endDate() {
return midnight(this.taskGroup?.attributes?.['end-date'] ?? new Date());
},
endDateString() {
return dateString(this.endDate);
},
newDuration() {
return this.localEndDate
? Math.floor((midnight(this.localEndDate) - this.startDate) / (1000 * 60 * 60 * 24))
: 0;
},
newEndDate() {
return this.localEndDate ? midnight(this.localEndDate) : this.endDate;
},
oldDuration() {
return Math.floor((this.endDate - this.startDate) / (1000 * 60 * 60 * 24));
},
startDate() {
return midnight(this.taskGroup.attributes['start-date']);
},
},
methods: {
...mapActions({
modifyDeadline: 'tasks/modifyDeadlineOfTaskGroup',
setShowDialog: 'tasks/setShowTaskGroupsModifyDeadlineDialog',
}),
onClose() {
this.setShowDialog(false);
},
onConfirm() {
const endDate = endOfDay(this.localEndDate);
this.modifyDeadline({ taskGroup: this.taskGroup, endDate });
this.onClose();
},
resetLocalVars() {
this.localEndDate = dateString(this.endDate ?? new Date());
},
},
mounted() {
this.resetLocalVars();
},
watch: {
taskGroup() {
this.resetLocalVars();
},
},
};
</script>
|
