Add prettier dependency to format frontend code

front/src/BookDateWidget.vue

@@ -1,8 +1,8 @@
 <script setup>
-  import { ref } from 'vue'
-  import BigIcon from './BigIcon.vue';
+import { ref } from 'vue'
+import BigIcon from './BigIcon.vue'
 
-  const props = defineProps({
+const props = defineProps({
   icon: String,
   legend: String,
   startReadDate: String,
@@ -10,58 +10,63 @@
   isExpanded: Boolean,
   isReadonly: Boolean,
   useEndDate: Boolean,
-  lastWidget: Boolean
-});
-  defineEmits(['onIconClick', 'onStartDateChange', 'onEndDateChange'])
+  lastWidget: Boolean,
+})
+defineEmits(['onIconClick', 'onStartDateChange', 'onEndDateChange'])
 
-  const today = new Date().toISOString().slice(0, 10);
+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;
+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') "/>
+    <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')}}
+          {{ $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">
+        <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')}}
+            {{ $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"/>
+          <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>
@@ -69,11 +74,10 @@
 </template>
 
 <style scoped>
-
 .inputdate {
   display: flex;
-  justify-content:center;
-  align-items:center;
+  justify-content: center;
+  align-items: center;
   padding: 20px;
 }
 
@@ -91,8 +95,8 @@
 
 .datelabel {
   display: flex;
-  justify-content:center;
-  align-items:center;
+  justify-content: center;
+  align-items: center;
   font-size: 26px;
   border: none;
   padding-bottom: 15px;