ouatterrir-app/src/components/editable/LinkEditable.vue

<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 ContentEditable from '@components/editable/ContentEditable.vue';

import SvgIcon from '@jamescoyle/vue-icon';
import { mdiTrashCanOutline } from '@mdi/js';
import { mdiMusicNotePlus } from '@mdi/js';
import { mdiLinkVariantPlus } from '@mdi/js';

import { nextTick } from 'vue'

export default {
  props: {
    can_update: Boolean,
    links: Array,
    data: Object,
    label: String
  },
  emits: ['updated'],
  data(){
    return {
      mdiTrashCanOutline_path: mdiTrashCanOutline,
      mdiMusicNotePlus_path: mdiMusicNotePlus,
      mdiLinkVariantPlus_path: mdiLinkVariantPlus,
      // links_nb : 0
    }
  },
  computed: {
    ...mapState(UserStore,['csrf_token']),
  },
  created () {
    console.log('LinkEditable created', this.links);
    // this.links_nb = this.links.length;
  },
  beforeUpdate() {
    console.log('LinkEditable beforeUpdate', this.links);
  },
  updated() {
    console.log('LinkEditable updated', this.links, this.$refs.links_list);
    if (this.$refs.links_list.lastElementChild) {
      this.$refs.links_list.lastElementChild.querySelector('input.new.title').value = null;
      this.$refs.links_list.lastElementChild.querySelector('input.new.url').value = null;
    }
  },
  mounted () {

  },
  methods: {
    ...mapActions(ConcernementsStore, ['reloadConcernements']),
    // addLink(e){
    //   console.log('addLink');
    //   this.links_nb++;
    // },
    onFocusOut(e){
      console.log('onfocusOut', e, this.$refs.links_list);
      this.buildLinkListThenSave();
    },
    buildLinkListThenSave(force_Save){
      console.log('buildLinkListThenSave links', this.links);
      // build links list
      let list = [];
      let tobesaved = false;
      for (let i = 0; i < this.$refs.links_list.children.length; i++) {
        const $li = this.$refs.links_list.children[i];
        if ($li.querySelector('input.url').value) {
          let title = $li.querySelector('input.title').value;
          let url = $li.querySelector('input.url').value;
          console.log(`title ${title}, url ${url}`);
          list.push({
            title: title,
            uri: url
          });
          console.log(`title ${title} | this.links[i].title ${this.links[i].title}`);
          if (!tobesaved) {
            tobesaved = (typeof this.links[i] === 'undefined' || title !== this.links[i].title || url !== this.links[i].url);
          }
        }
      }
      if (!tobesaved) {
        tobesaved = this.links.length !== list.length;
      }

      if (tobesaved || force_Save) {
        this.save(list);
      }
    },
    save(list){
      console.log('save list', list);
      const params = {
        type: this.data.bundle,
        [this.data.field.field_name]: list
      };
      if (this.data.entitytype === 'node') {
        params.nid = [{"value":this.data.id}];
      } else {
        params.id = [{"value":this.data.id}];
      }
      // // we need additional values for image alt for example
      // // console.log('additional_values', this.data.field.additional_values);
      // if (this.data.field.additional_values) {
      //   for (const key in this.data.field.additional_values) {
      //     if (Object.hasOwnProperty.call(this.data.field.additional_values, key)) {
      //       params[this.data.field.field_name][0][key] = this.data.field.additional_values[key]
      //     }
      //   }
      // }
      
      const configs = {
        headers: {'X-CSRF-Token': this.csrf_token}
      };

      // url is not the same between nodes and others entities
      let url_base = `/${this.data.entitytype === 'node' ? '' : 'entity/'}${this.data.entitytype}`;
      // call the api
      REST.patch(`${url_base}/${this.data.id}?_format=json`, params, configs)
        .then(({ data }) => {
          console.log('user REST post node data', data)
          this.$emit('updated');
        })
        .catch(error => {
          console.warn(`Issue with patch ${this.data.entitytype} ${this.data.bundle}`, error)
          Promise.reject(error)
        })
      },
      async onDeleteLink(i){
        console.log(`onDeleteLink ${i}`, this.$refs.links_list.children[i]);
        // this.links_nb = this.$refs.links_list.children.length;
        // this.$refs.links_list.children[i].remove();
        this.links.splice(i,1);
        await nextTick();
        this.buildLinkListThenSave(true);
      }
  },
  components: {
    SvgIcon,
    ContentEditable
  }

}
</script>

<template>
  <label>{{ label }}</label>
  <ul ref="links_list">
    <li v-for="(link, l) in links" :key="l" :class="{'link-editable':can_update}">
      <!-- link exists can't update -->
      <template v-if="!can_update">
        <a :href="link.url">
          {{ link.title }}
        </a>
      </template>
      <!-- link exists and can update -->
      <template v-else>
        <input type="text" class="title" :value="link.title" placeholder="Titre du lien" @focusout="onFocusOut" />
        <input type="text" class="url" :value="link.url" @focusout="onFocusOut" placeholder="Url du lien" />
        <div @click="onDeleteLink(l)" class="delete-btn">
          <svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
        </div>
      </template>
      <!-- link does not exists yet and can create -->
    </li>
    <li v-if="can_update" class="link-editable">
      <input type="text" class="new title" placeholder="Titre du lien" @focusout="onFocusOut" />
      <input type="text" class="new url" placeholder="https://..." @focusout="onFocusOut" />
      <div class="delete-btn">
        <svg-icon type="mdi" />
      </div>
    </li>
  </ul>
  <!-- <div v-if="can_update" @click="addLink(i)" class="add-btn">
    <svg-icon type="mdi" :path="mdiLinkVariantPlus_path" />
  </div> -->
</template>

<style scoped>

</style>