|
@@ -0,0 +1,176 @@
|
|
|
+<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
|
|
|
+ },
|
|
|
+ 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);
|
|
|
+ this.$refs.links_list.lastChild.querySelector('input.new.title').value = null;
|
|
|
+ this.$refs.links_list.lastChild.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;
|
|
|
+ list.push({
|
|
|
+ title: title,
|
|
|
+ uri: url
|
|
|
+ });
|
|
|
+ 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>
|
|
|
+ <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>
|