entite image is now editable, add, delete. remains the alt field

2024-03-19 15:33:40 +01:00
parent d4797e75dc
commit e9b6b90816
8 changed files with 235 additions and 40 deletions
@@ -0,0 +1,136 @@
+<script>
+
+import JSONAPI from '@api/json-axios'
+import REST from '@api/rest-axios'
+
+import { mapActions, mapState } from 'pinia'
+import { ConcernementsStore } from '@stores/concernements'
+import { UserStore } from '@stores/user'
+
+import SvgIcon from '@jamescoyle/vue-icon';
+import { mdiTrashCanOutline } from '@mdi/js';
+
+export default {
+  props: {
+    image: Object,
+    data: Object
+  },
+  emits: ['updated'],
+  data(){
+    return {
+      mdiTrashCanOutline_path: mdiTrashCanOutline
+    }
+  },
+  computed: {
+    ...mapState(UserStore,['csrf_token']),
+  },
+  created () {
+    console.log('ImageEditable created');
+  },
+  mounted () {
+
+  },
+  methods: {
+    ...mapActions(ConcernementsStore, ['reloadConcernements']),
+    addImage(e){
+      console.log('addImage', this.$refs);
+      this.$refs.image_input.click();
+    },
+    onInput(e){
+      console.log('onFileInput', e);
+      let file = e.target.files[0];
+      console.log('onFileInput file', file);
+      this.save(file);
+    },
+    save(file){
+      const configs = {
+        headers: {
+          'X-CSRF-Token': this.csrf_token,
+          'Content-Type': 'application/octet-stream',
+          'Content-Disposition': `file; filename="${file.name}"`,
+        },
+      };
+
+      JSONAPI.post(`/${this.data.entitytype}/${this.data.bundle}/${this.data.uuid}/${this.data.field}`, file, configs)
+        .then(({ data : { data } }) => {
+          console.log('jsonapi post image', data)
+          this.$emit('updated');
+        })
+        .catch(error => {
+          console.warn('Issue with jsonapi post image', error)
+          Promise.reject(error)
+        })
+    },
+    onDeleteImg(e){
+      console.log('onDeleteImg', e);
+
+      const params = {
+        type: this.data.bundle,
+        nid: [{"value":this.data.nid}],
+        [this.data.field]: {value: null}
+      };
+      const configs = {
+        headers: {'X-CSRF-Token': this.csrf_token}
+      };
+      REST.patch(`/node/${this.data.nid}?_format=json`, params, configs)
+        .then(({ data }) => {
+          console.log(`user REST patch node ${this.data.bundle} ${this.data.field}`, data)
+          // TODO if success update the data in pinia 
+          // this.reloadConcernements();
+          this.$emit('updated');
+        })
+        .catch(error => {
+          console.warn(`Issue with patch node ${this.data.bundle} ${this.data.field}`, error)
+          Promise.reject(error)
+        })
+
+      // 405 JSONAPI operation not allowed, don't know why
+      
+      // const configs = {
+      //   headers: {
+      //     'X-CSRF-Token': this.csrf_token,
+      //     'Content-Type': 'application/octet-stream',
+      //     'Content-Disposition': `file; filename=""`,
+      //   },
+      // };
+
+      // JSONAPI.delete(`/${this.data.entitytype}/${this.data.bundle}/${this.data.uuid}/${this.data.field}`, {}, configs)
+      //   .then(({ data : { data } }) => {
+      //     console.log('jsonapi delete image', data)
+      //     this.$emit('updated');
+      //   })
+      //   .catch(error => {
+      //     console.warn('Issue with jsonapi post image', error)
+      //     Promise.reject(error)
+      //   })
+      // console.log('save csrf_token', this.csrf_token);
+
+    }
+  },
+  components: {
+    SvgIcon,
+  }
+}
+</script>
+
+<template>
+  <div class="editable-image">
+    <!-- with img -->
+    <template v-if="image.length">
+      <figure>
+        <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" />
+    </template>
+    <!-- with out img -->
+    <template v-else>
+      <div @click="addImage" class="btn">
+
+        <span>ajouter une image</span>
+      </div>
+      <input ref="image_input" type="file" accept ="image/jpeg, image/png, image/jpg" @input="onInput">
+    </template>
+    
+  </div>
+</template>