|
|
@@ -0,0 +1,192 @@
|
|
|
+<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 { mdiFilePlusOutline } from '@mdi/js';
|
|
|
+
|
|
|
+import { nextTick } from 'vue'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props: {
|
|
|
+ can_update: Boolean,
|
|
|
+ files: Object,
|
|
|
+ data: Object,
|
|
|
+ label: String,
|
|
|
+ },
|
|
|
+ emits: ['updated'],
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ mdiTrashCanOutline_path: mdiTrashCanOutline,
|
|
|
+ mdiFilePlusOutline_path: mdiFilePlusOutline,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState(UserStore,['csrf_token']),
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ console.log('ImageEditable created')
|
|
|
+ },
|
|
|
+ mounted () {
|
|
|
+
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ ...mapActions(ConcernementsStore, ['reloadConcernements']),
|
|
|
+ addFile(e){
|
|
|
+ console.log('addFile', this.$refs);
|
|
|
+ this.$refs.file_input.click();
|
|
|
+ },
|
|
|
+ onInputNewfile(e){
|
|
|
+ console.log('onFileInput', e);
|
|
|
+ let file = e.target.files[0];
|
|
|
+ console.log('onFileInput file', file);
|
|
|
+ this.saveNewFile(file);
|
|
|
+ },
|
|
|
+ saveNewFile(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.field_name}`, file, configs)
|
|
|
+ .then(({ data : { data } }) => {
|
|
|
+ console.log('jsonapi post file', data)
|
|
|
+ this.$emit('updated');
|
|
|
+ })
|
|
|
+ .catch(error => {
|
|
|
+ console.warn('Issue with jsonapi post file', error)
|
|
|
+ Promise.reject(error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onFocusOut(e){
|
|
|
+ console.log('onfocusOut', e, this.$refs.file_list);
|
|
|
+ this.buildFileListThenSaveList();
|
|
|
+ },
|
|
|
+ buildFileListThenSaveList(force_Save){
|
|
|
+ console.log('buildLinkListThenSave files', this.files);
|
|
|
+ // build links list
|
|
|
+ let list = [];
|
|
|
+ let tobesaved = false;
|
|
|
+ for (let i = 0; i < this.$refs.file_list.children.length; i++) {
|
|
|
+ const $li = this.$refs.file_list.children[i];
|
|
|
+ console.log('$li', $li);
|
|
|
+ if ($li.querySelector('input.description')) {
|
|
|
+ let description = $li.querySelector('input.description').value;
|
|
|
+ list.push({
|
|
|
+ description: description,
|
|
|
+ target_id: this.files[i].file.fid
|
|
|
+ });
|
|
|
+ tobesaved = (description !== this.files[i].description);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (!tobesaved) {
|
|
|
+ tobesaved = this.files.length !== list.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (tobesaved || force_Save) {
|
|
|
+ this.saveList(list);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ saveList(list){
|
|
|
+ console.log('saveList 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 onDeleteFile(i){
|
|
|
+ console.log(`onDeleteLink ${i}`, this.$refs.file_list.children[i]);
|
|
|
+ // this.links_nb = this.$refs.links_list.children.length;
|
|
|
+ // this.$refs.links_list.children[i].remove();
|
|
|
+ this.files.splice(i,1);
|
|
|
+ await nextTick();
|
|
|
+ this.buildFileListThenSaveList(true);
|
|
|
+ },
|
|
|
+ onUpdated(){
|
|
|
+ this.$emit('updated');
|
|
|
+ },
|
|
|
+ fileMime(mime){
|
|
|
+ return mime.replace('application/', '');
|
|
|
+ },
|
|
|
+ docLabel(doc){
|
|
|
+ return doc.description ? doc.description : doc.file.filename;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ SvgIcon,
|
|
|
+ ContentEditable
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <label>{{ label }}</label>
|
|
|
+ <ul ref="file_list" class="editable-files" :class="{'can-update': can_update}">
|
|
|
+ <li v-for="(doc,d) in files" :key="d" class="file-editable">
|
|
|
+ <template v-if="!can_update">
|
|
|
+ <a
|
|
|
+ :href="doc.file.url"
|
|
|
+ target="_blank"
|
|
|
+ >
|
|
|
+ {{ docLabel(doc) }} [{{ fileMime(doc.file.filemime) }}]
|
|
|
+ </a>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <input type="text" class="description" :value="doc.description" placeholder="Description du fichier" @focusout="onFocusOut" />
|
|
|
+ <!-- <input type="text" class="url" :value="link.url" @focusout="onFocusOut" placeholder="Url du lien" /> -->
|
|
|
+ <div class="filename">{{ doc.file.filename }}</div>
|
|
|
+ <div @click="onDeleteFile(d)" class="delete-btn">
|
|
|
+ <svg-icon type="mdi" :path="mdiTrashCanOutline_path" />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </li>
|
|
|
+ <li v-if="can_update">
|
|
|
+ <div @click="addFile" class="file-btn">
|
|
|
+ <svg-icon type="mdi" :path="mdiFilePlusOutline_path"/>
|
|
|
+ </div>
|
|
|
+ <input ref="file_input" type="file" accept="application/txt, application/pdf, application/doc, application/docx, application/obs, application/xls" @input="onInputNewfile"/>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+</template>
|
