123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176 |
- <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>
|