Book form: add a field to write a review

front/src/ReviewWidget.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { ref } from 'vue'
+import { VRating } from 'vuetify/components/VRating'
+
+const props = defineProps({
+  rating: Number,
+  reviewtext: String,
+})
+const isTextareaExpanded = ref(false)
+const isTextareaTransitionEnabled = ref(true)
+
+defineEmits('onRatingUpdate', 'onReviewUpdate')
+
+function computeTextareaClass() {
+  let classAttr = isTextareaExpanded && isTextareaExpanded.value ? 'textarea-expanded' : 'textarea-normal'
+  if (isTextareaTransitionEnabled && isTextareaTransitionEnabled.value) {
+    classAttr += ' transition-height'
+  }
+  return classAttr
+}
+
+function onTextAreaFocus() {
+  isTextareaExpanded.value = true
+  setTimeout(() => {
+    isTextareaTransitionEnabled.value = false
+  }, 500)
+}
+
+</script>
+
+<template>
+  <div class="maincontainer py-5">
+    <div class="widget-header mb-5 full-width">
+      <div class="widget-title ml-3">
+        <h2>{{$t('review.title')}}</h2>
+        <span class="ml-3">
+          <b-icon-pen/>
+        </span>
+      </div>
+      <VRating
+          half-increments
+          hover
+          :length="5"
+          size="x-large"
+          density="compact"
+          :model-value="rating / 2"
+          @update:modelValue="(r) => $emit('onRatingUpdate', r)"
+          active-color="bulma-body-color"
+          class="widget-rating centered"
+          />
+    </div>
+    <div class="full-width centered">
+      <textarea
+        :placeholder="$t('review.textplaceholder')"
+        class="widget-textarea mx-4"
+        @change="(e) => $emit('onReviewUpdate', e.target.value)"
+        @focus="onTextAreaFocus"
+        :class="computeTextareaClass()">{{reviewtext}}</textarea>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .maincontainer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    border: solid;
+    border-radius: 20px;
+    padding: 10px;
+  }
+
+  .widget-header {
+    display: flex;
+  }
+
+  .widget-title {
+    flex: 2;
+    font-size: 2em;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .widget-title h2 {
+    font-weight: bold;
+  }
+
+  .widget-rating {
+    flex: 2;
+  }
+
+  .widget-textarea {
+    color: var(--bulma-body-color);
+    background-color: var(--bulma-text-20);
+    width: 95%;
+    border-radius: 30px;
+    border: none;
+    padding: 15px;
+  }
+
+  .textarea-normal {
+    height: 80px;
+    resize: none;
+  }
+
+  .textarea-expanded {
+    height: 350px;
+    resize: vertical;
+  }
+
+  .transition-height {
+    transition: height 0.5s;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  @media (max-width: 1024px) {
+
+    .widget-header {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .widget-title {
+      font-size: 1.5em;
+      width: 100%;
+      margin-bottom: 10px;
+    }
+  }
+
+</style>