add end read date

2025-11-21 18:13:09 +01:00
parent 3191a97ce8
commit 8c0a9fe431
13 changed files with 266 additions and 109 deletions
--- a/front/src/BookDateWidget.vue
+++ b/front/src/BookDateWidget.vue
@@ -0,0 +1,113 @@
+<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;
+}
+.bookdatewidget {
+  display: flex;
+  width: 500px;
+}
+
+.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%;
+}
+</style>