133 lines
2.8 KiB
Vue
133 lines
2.8 KiB
Vue
<!--
|
|
- SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
|
|
- SPDX-License-Identifier: AGPL-3.0-or-later
|
|
-->
|
|
<template>
|
|
<div class="timeslot">
|
|
<input v-model="newValue.startTime"
|
|
type="text"
|
|
class="timeslot--start"
|
|
placeholder="e.g. 08:00"
|
|
@input="update">
|
|
<input v-model="newValue.endTime"
|
|
type="text"
|
|
placeholder="e.g. 18:00"
|
|
@input="update">
|
|
<p v-if="!valid" class="invalid-hint">
|
|
{{ t('workflowengine', 'Please enter a valid time span') }}
|
|
</p>
|
|
<NcSelect v-show="valid"
|
|
v-model="newValue.timezone"
|
|
:clearable="false"
|
|
:options="timezones"
|
|
@input="update" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import NcSelect from '@nextcloud/vue/dist/Components/NcSelect.js'
|
|
import moment from 'moment-timezone'
|
|
import valueMixin from '../../mixins/valueMixin.js'
|
|
|
|
const zones = moment.tz.names()
|
|
export default {
|
|
name: 'RequestTime',
|
|
components: {
|
|
NcSelect,
|
|
},
|
|
mixins: [
|
|
valueMixin,
|
|
],
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
timezones: zones,
|
|
valid: false,
|
|
newValue: {
|
|
startTime: null,
|
|
endTime: null,
|
|
timezone: moment.tz.guess(),
|
|
},
|
|
}
|
|
},
|
|
mounted() {
|
|
this.validate()
|
|
},
|
|
methods: {
|
|
updateInternalValue(value) {
|
|
try {
|
|
const data = JSON.parse(value)
|
|
if (data.length === 2) {
|
|
this.newValue = {
|
|
startTime: data[0].split(' ', 2)[0],
|
|
endTime: data[1].split(' ', 2)[0],
|
|
timezone: data[0].split(' ', 2)[1],
|
|
}
|
|
}
|
|
} catch (e) {
|
|
// ignore invalid values
|
|
}
|
|
},
|
|
validate() {
|
|
this.valid = this.newValue.startTime && this.newValue.startTime.match(/^(0[0-9]|1[0-9]|2[0-3]|[0-9]):[0-5][0-9]$/i) !== null
|
|
&& this.newValue.endTime && this.newValue.endTime.match(/^(0[0-9]|1[0-9]|2[0-3]|[0-9]):[0-5][0-9]$/i) !== null
|
|
&& moment.tz.zone(this.newValue.timezone) !== null
|
|
if (this.valid) {
|
|
this.$emit('valid')
|
|
} else {
|
|
this.$emit('invalid')
|
|
}
|
|
return this.valid
|
|
},
|
|
update() {
|
|
if (this.newValue.timezone === null) {
|
|
this.newValue.timezone = moment.tz.guess()
|
|
}
|
|
if (this.validate()) {
|
|
const output = `["${this.newValue.startTime} ${this.newValue.timezone}","${this.newValue.endTime} ${this.newValue.timezone}"]`
|
|
this.$emit('input', output)
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.timeslot {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
flex-wrap: wrap;
|
|
max-width: 180px;
|
|
|
|
.multiselect {
|
|
width: 100%;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.multiselect:deep(.multiselect__tags:not(:hover):not(:focus):not(:active)) {
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
input[type=text] {
|
|
width: 50%;
|
|
margin: 0;
|
|
margin-bottom: 5px;
|
|
min-height: 48px;
|
|
|
|
&.timeslot--start {
|
|
margin-inline-end: 5px;
|
|
width: calc(50% - 5px);
|
|
}
|
|
}
|
|
|
|
.invalid-hint {
|
|
color: var(--color-text-maxcontrast);
|
|
}
|
|
}
|
|
</style>
|