add end read date

front/src/BigIcon.vue

@@ -4,17 +4,19 @@
   const props = defineProps({
   icon: String,
   legend: String,
-  isSet: Boolean
+  isSet: Boolean,
+  isReadonly: Boolean
 });
 
   const hovered = ref(false)
 
-  const computedIcon = computed(() => props.icon + (hovered.value || props.isSet ? "Fill" : ""));
+  const computedIcon = computed(() => props.icon + (!props.isReadonly && (hovered.value || props.isSet) ? "Fill" : ""));
 
 </script>
 
 <template>
   <div class="bigiconandlegend"
+       :class="props.isReadonly ? '' : 'showcanclick'"
        @mouseover="hovered = true"
        @mouseout="hovered = false">
     <span class="bigicon" :title="props.legend">
@@ -31,7 +33,7 @@
   margin:25px;
 }
 
-.bigiconandlegend:hover {
+.showcanclick:hover {
   transform: scale(1.03);
   transition: ease-in-out 0.02s;
   cursor: pointer;