52 lines
1.5 KiB
Vue
52 lines
1.5 KiB
Vue
<template>
|
|
<v-text-field label="Tranches" type="number" variant="outlined" aria-valuemin="1" min="1" max="255"
|
|
v-model="os.tranches" :rules="[validateRequired,validateTranches]" v-auto-select>
|
|
<template v-slot:append-inner>tranches</template>
|
|
</v-text-field>
|
|
<v-text-field type="number" variant="outlined" :min="1" v-model="os.interval" class="interval"
|
|
:label="os.intervalIsTotal ? 'Completion time' : 'Time between tranches'" v-auto-select>
|
|
<template v-slot:prepend-inner>
|
|
<v-btn variant="outlined" :text="os.intervalIsTotal ? 'Within' : 'Spaced apart'" class="within mr-2"
|
|
@click="os.intervalIsTotal=!os.intervalIsTotal"/>
|
|
</template>
|
|
<template v-slot:append-inner>
|
|
<v-btn variant="outlined" :text="timeUnitsStr" @click="toggleTimeUnits" class="time-units"/>
|
|
</template>
|
|
</v-text-field>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {useOrderStore, useStore} from "@/store/store.js";
|
|
import {validateRequired, validateTranches} from "@/validate.js";
|
|
// noinspection ES6UnusedImports
|
|
import {vAutoSelect} from "@/misc.js";
|
|
import {computed} from "vue";
|
|
|
|
const os = useOrderStore()
|
|
|
|
const timeUnits = ['minutes', 'hours', 'days']
|
|
const timeUnitsStr = computed(()=>timeUnits[os.timeUnitIndex])
|
|
|
|
function toggleTimeUnits() {
|
|
os.timeUnitIndex++
|
|
if (os.timeUnitIndex >= timeUnits.length)
|
|
os.timeUnitIndex = 0
|
|
}
|
|
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@use "@/styles/vars" as *;
|
|
.interval {
|
|
//width: 18em;
|
|
}
|
|
|
|
.within {
|
|
width: 10em;
|
|
}
|
|
|
|
.time-units {
|
|
width: 8em;
|
|
}
|
|
</style>
|