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
|
<template>
<StudipDialog
v-if="show && process"
:title="$gettext('Bearbeitungszeit ändern')"
:confirmText="$gettext('Speichern')"
confirmClass="accept"
:closeText="$gettext('Schließen')"
closeClass="cancel"
@close="onClose"
@confirm="onConfirm"
>
<template #dialogContent>
<form class="default">
<p>
{{ $gettext('Aktuelle Bearbeitungszeit:') }} <StudipDate :date="startDate" />–<StudipDate :date="endDate" />
({{ $gettextInterpolate($gettext('%{ count } Tage'), { count: oldDuration }) }})
</p>
<div class="formpart">
<LabelRequired
:id="`peer-review-process-${uid}`"
:label="$gettext('Bearbeitungszeit verlängern bis zum')"
/>
<input
:id="`peer-review-process-${uid}`"
name="end-date"
type="date"
v-model="localEndDate"
:min="endDateString"
class="size-l"
required
/>
<div>({{ $gettextInterpolate($gettext('%{ count } Tage'), { count: newDuration }) }})</div>
</div>
</form>
</template>
</StudipDialog>
</template>
<script>
import LabelRequired from '../../../forms/LabelRequired.vue';
import StudipDate from '../../../StudipDate.vue';
import StudipDialog from '../../../StudipDialog.vue';
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 {
components: {
LabelRequired,
StudipDate,
StudipDialog,
},
props: {
show: {
type: Boolean,
required: true,
},
process: {
type: Object,
default: null,
},
},
emits: ['update:show', 'update'],
data: () => ({ localEndDate: null, uid: nextUid++ }),
computed: {
configuration() {
return this.process?.attributes?.configuration ?? {};
},
endDate() {
return midnight(this.process?.attributes?.['review-end'] ?? new Date());
},
endDateString() {
return dateString(this.endDate);
},
newDuration() {
return this.localEndDate
? Math.floor((midnight(this.localEndDate) - midnight(this.startDate)) / (1000 * 60 * 60 * 24))
: 0;
},
oldDuration() {
return this.configuration.duration ?? '??';
},
startDate() {
return midnight(this.process.attributes['review-start']);
},
},
methods: {
onClose() {
this.$emit('update:show', false);
},
onConfirm() {
this.$emit('update', this.newDuration);
},
resetLocalVars() {
this.localEndDate = dateString(this.endDate ?? new Date());
},
},
mounted() {
this.resetLocalVars();
},
watch: {
process() {
this.resetLocalVars();
},
},
};
</script>
|
