123 lines
2.7 KiB
Vue
123 lines
2.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
import BigIcon from './BigIcon.vue';
|
|
|
|
const props = defineProps({
|
|
icon: String,
|
|
legend: String,
|
|
startReadDate: String,
|
|
endReadDate: String,
|
|
isExpanded: Boolean,
|
|
isReadonly: Boolean,
|
|
useEndDate: Boolean,
|
|
lastWidget: Boolean
|
|
});
|
|
defineEmits(['onIconClick', 'onStartDateChange', 'onEndDateChange'])
|
|
|
|
const today = new Date().toISOString().slice(0, 10);
|
|
|
|
function computeParentClasses() {
|
|
let classNames = "bookdatewidget";
|
|
if (props.isExpanded) {
|
|
classNames += " has-text-dark has-background-text";
|
|
}
|
|
if (props.lastWidget) {
|
|
classNames += " border-radius-right-and-left";
|
|
} else {
|
|
classNames += " border-radius-right";
|
|
}
|
|
if (props.isReadonly) {
|
|
classNames += " widget-readonly"
|
|
}
|
|
return classNames;
|
|
}
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div :class="computeParentClasses()">
|
|
<BigIcon :icon="props.icon"
|
|
:is-readonly="props.isReadonly"
|
|
:legend="props.legend"
|
|
:isSet="props.isExpanded"
|
|
@click="props.isReadonly ? null : $emit('onIconClick') "/>
|
|
<div v-if="props.isExpanded" class="inputdate">
|
|
<div class="ontopofinput">
|
|
<label class="datelabel" for="startread">
|
|
{{$t('bookdatewidget.started')}}
|
|
</label>
|
|
<input class="datepicker has-background-dark has-text-light"
|
|
id="startread"
|
|
type="date"
|
|
@change="(e) => $emit('onStartDateChange', e.target.value)"
|
|
:value="props.startReadDate"
|
|
:max="today"/>
|
|
<div v-if="props.useEndDate">
|
|
<label class="datelabel" for="endread">
|
|
{{$t('bookdatewidget.finished')}}
|
|
</label>
|
|
<input class="datepicker has-background-dark has-text-light"
|
|
id="endread"
|
|
type="date"
|
|
@change="(e) => $emit('onEndDateChange', e.target.value)"
|
|
:value="props.endReadDate"
|
|
:max="today"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
.inputdate {
|
|
display: flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.border-radius-right {
|
|
border-radius: 0 30px 30px 0;
|
|
}
|
|
|
|
.border-radius-right-and-left {
|
|
border-radius: 0 30px 30px 45px;
|
|
}
|
|
|
|
.ontopofinput {
|
|
display: block;
|
|
}
|
|
|
|
.datelabel {
|
|
display: flex;
|
|
justify-content:center;
|
|
align-items:center;
|
|
font-size: 26px;
|
|
border: none;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.datepicker {
|
|
font-size: 26px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.widget-readonly {
|
|
opacity: 50%;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.bookdatewidget {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.bookdatewidget {
|
|
display: flex;
|
|
width: 500px;
|
|
}
|
|
}
|
|
</style>
|