From 4b215617f1e20cef9db4f441ddb1857edbfcc72e Mon Sep 17 00:00:00 2001
From: bach <bachir@figureslibres.io>
Date: Tue, 19 Mar 2024 21:44:04 +0100
Subject: [PATCH] editable image add image icon

---
 src/assets/main.scss                      |  7 ++++++-
 src/components/contents/Entite.vue        |  1 +
 src/components/editable/ImageEditable.vue | 15 ++++++++++-----
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/assets/main.scss b/src/assets/main.scss
index deb7d5e..764e3eb 100644
--- a/src/assets/main.scss
+++ b/src/assets/main.scss
@@ -1070,9 +1070,11 @@ div.editable-image{
     text-align: center;
     transition: all 0.2s ease-in-out;
     position: relative;
-    >span{
+    >svg{
       display: inline-block;
       vertical-align: middle;
+      width:50px; height:50px;
+      color: #333;
     }
     cursor: pointer;
     box-sizing: border-box;
@@ -1081,6 +1083,9 @@ div.editable-image{
     }
 
   }
+  div.delete-btn{
+    cursor: pointer;
+  }
   input[type="file"]{
     display: none;
   }
diff --git a/src/components/contents/Entite.vue b/src/components/contents/Entite.vue
index 7dfc9e6..937c433 100644
--- a/src/components/contents/Entite.vue
+++ b/src/components/contents/Entite.vue
@@ -59,6 +59,7 @@ export default {
   <section class="entite">
     <section v-if="entite.image.length || entite.can_update" class="image">
       <ImageEditable 
+        :can_update="entite.can_update"
         :image="entite.image"
         :data="{
           entitytype: 'node',
diff --git a/src/components/editable/ImageEditable.vue b/src/components/editable/ImageEditable.vue
index 3ad48ed..c29a3f5 100644
--- a/src/components/editable/ImageEditable.vue
+++ b/src/components/editable/ImageEditable.vue
@@ -9,16 +9,19 @@ import { UserStore } from '@stores/user'
 
 import SvgIcon from '@jamescoyle/vue-icon';
 import { mdiTrashCanOutline } from '@mdi/js';
+import { mdiImagePlus } from '@mdi/js';
 
 export default {
   props: {
+    can_update: Boolean,
     image: Object,
     data: Object
   },
   emits: ['updated'],
   data(){
     return {
-      mdiTrashCanOutline_path: mdiTrashCanOutline
+      mdiTrashCanOutline_path: mdiTrashCanOutline,
+      mdiImagePlus_path: mdiImagePlus
     }
   },
   computed: {
@@ -121,13 +124,15 @@ export default {
         <img :src="image[0].url" :alt="image[0].alt"/>
         <figcaption v-if="image[0].alt">{{ image[0].alt }}</figcaption>
       </figure>
-      <svg-icon type="mdi" :path="mdiTrashCanOutline_path" @click="onDeleteImg" />
+      <div v-if="can_update" @click="onDeleteImg" class="delete-btn">
+        <svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
+      </div>
     </template>
     <!-- with out img -->
-    <template v-else>
+    <template v-else-if="can_update">
       <div @click="addImage" class="btn">
-
-        <span>ajouter une image</span>
+        <svg-icon type="mdi" :path="mdiImagePlus_path" @click="onDeleteImg" />
+        <!-- <span>ajouter une image</span> -->
       </div>
       <input ref="image_input" type="file" accept ="image/jpeg, image/png, image/jpg" @input="onInput">
     </template>