Add prettier dependency to format frontend code

front/src/BigIcon.vue

@@ -1,52 +1,55 @@
 <script setup>
-  import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 
-  const props = defineProps({
+const props = defineProps({
   icon: String,
   legend: String,
   isSet: Boolean,
-  isReadonly: Boolean
-});
+  isReadonly: Boolean,
+})
 
-  const hovered = ref(false)
-  const isOnMobile = ref(computeIsOnMobile())
+const hovered = ref(false)
+const isOnMobile = ref(computeIsOnMobile())
 
-  const computedIcon = computed(() => props.icon +
-    (!props.isReadonly && ((hovered.value && !isOnMobile.value) || props.isSet) ? "Fill" : ""));
+const computedIcon = computed(
+  () =>
+    props.icon +
+    (!props.isReadonly && ((hovered.value && !isOnMobile.value) || props.isSet) ? 'Fill' : ''),
+)
 
-  function computeIsOnMobile() {
-    return window.innerWidth < 1024;
-  }
-
-  function updateOnMobile() {
-    isOnMobile.value = computeIsOnMobile();
-  }
-  onMounted(() => {
-    window.addEventListener("resize", updateOnMobile);
-  });
-  onUnmounted(() => {
-    window.removeEventListener("resize", updateOnMobile);
-  });
+function computeIsOnMobile() {
+  return window.innerWidth < 1024
+}
 
+function updateOnMobile() {
+  isOnMobile.value = computeIsOnMobile()
+}
+onMounted(() => {
+  window.addEventListener('resize', updateOnMobile)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', updateOnMobile)
+})
 </script>
 
 <template>
-  <div class="bigiconandlegend"
-       :class="props.isReadonly ? '' : 'showcanclick'"
-       @mouseover="hovered = true"
-       @mouseout="hovered = false">
+  <div
+    class="bigiconandlegend"
+    :class="props.isReadonly ? '' : 'showcanclick'"
+    @mouseover="hovered = true"
+    @mouseout="hovered = false"
+  >
     <span class="bigicon" :title="props.legend">
       <component :is="computedIcon"></component>
     </span>
-    <div class="bigiconlegend">{{props.legend}}</div>
+    <div class="bigiconlegend">{{ props.legend }}</div>
   </div>
 </template>
 
 <style scoped>
-
 .bigiconandlegend {
-  border-radius:30px;
-  margin:25px;
+  border-radius: 30px;
+  margin: 25px;
 }
 
 @media (min-width: 1024px) {
@@ -59,21 +62,21 @@
 
 .bigicon {
   display: flex;
-  justify-content:center;
-  align-items:center;
+  justify-content: center;
+  align-items: center;
   height: 90px;
   width: 200px;
   font-size: 78px;
-  padding-top:20px;
+  padding-top: 20px;
 }
 
 .bigiconlegend {
-  display:flex;
-  justify-content:center;
-  align-items:center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 34px;
   width: 200px;
-  padding-bottom:30px;
+  padding-bottom: 30px;
 }
 
 @media (max-width: 1024px) {
@@ -85,18 +88,18 @@
   }
 
   .bigiconlegend {
-    flex:1;
+    flex: 1;
     font-size: 16px;
     width: 100%;
-    padding-bottom:0px;
+    padding-bottom: 0px;
   }
 
   .bigiconandlegend {
     display: flex;
-    justify-content:center;
-    align-items:center;
+    justify-content: center;
+    align-items: center;
     flex-flow: column;
-    margin:0px;
+    margin: 0px;
   }
 }
 </style>