Browse Source

feat: enable user to re-order attachment in modal view

re #383

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/628/head
Pranav C 3 years ago
parent
commit
fd8e563cc1
  1. 33
      packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue

33
packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue

@ -18,13 +18,16 @@
</div> </div>
<div class="d-flex align-center img-container"> <div class="d-flex align-center img-container">
<div v-for="(item,i) in localState" :key="i" class="thumbnail align-center justify-center d-flex"> <div
v-for="(item,i) in localState"
:key="item.url"
class="thumbnail align-center justify-center d-flex"
>
<v-tooltip bottom> <v-tooltip bottom>
<template #activator="{on}"> <template #activator="{on}">
<!-- <img alt="#" v-if="isImage(item.title)" :src="item.url" v-on="on" @click="selectImage(item.url,i)">--> <!-- <img alt="#" v-if="isImage(item.title)" :src="item.url" v-on="on" @click="selectImage(item.url,i)">-->
<v-img <v-img
v-if="isImage(item.title)" v-if="isImage(item.title)"
:key="item.url"
lazy-src="https://via.placeholder.com/60.png?text=Loading..." lazy-src="https://via.placeholder.com/60.png?text=Loading..."
alt="#" alt="#"
max-height="33px" max-height="33px"
@ -89,7 +92,11 @@
<div class="d-flex flex-wrap h-100"> <div class="d-flex flex-wrap h-100">
<v-container fluid style="max-height:calc(90vh - 80px);overflow-y: auto"> <v-container fluid style="max-height:calc(90vh - 80px);overflow-y: auto">
<v-row> <draggable
v-model="localState"
class="row"
@update="onOrderUpdate"
>
<v-col v-for="(item,i) in localState" :key="i" cols="4"> <v-col v-for="(item,i) in localState" :key="i" cols="4">
<v-card <v-card
class="modal-thumbnail-card align-center justify-center d-flex" class="modal-thumbnail-card align-center justify-center d-flex"
@ -125,7 +132,7 @@
{{ item.title }} {{ item.title }}
</p> </p>
</v-col> </v-col>
</v-row> </draggable>
</v-container> </v-container>
</div> </div>
</v-card-text> </v-card-text>
@ -216,9 +223,12 @@
<script> <script>
import FileSaver from 'file-saver' import FileSaver from 'file-saver'
import draggable from 'vuedraggable'
import { isImage } from '@/components/project/spreadsheet/helpers/imageExt' import { isImage } from '@/components/project/spreadsheet/helpers/imageExt'
export default { export default {
name: 'EditableAttachmentCell', name: 'EditableAttachmentCell',
components: { draggable },
props: ['dbAlias', 'value', 'active', 'isLocked', 'meta', 'column'], props: ['dbAlias', 'value', 'active', 'isLocked', 'meta', 'column'],
data: () => ({ data: () => ({
carousel: null, carousel: null,
@ -301,6 +311,10 @@ export default {
this.$emit('input', JSON.stringify(this.localState)) this.$emit('input', JSON.stringify(this.localState))
this.$emit('update') this.$emit('update')
}, },
onOrderUpdate() {
this.$emit('input', JSON.stringify(this.localState))
this.$emit('update')
},
removeItem(i) { removeItem(i) {
this.localState.splice(i, 1) this.localState.splice(i, 1)
this.$emit('input', JSON.stringify(this.localState)) this.$emit('input', JSON.stringify(this.localState))
@ -394,18 +408,19 @@ export default {
top: 5px; top: 5px;
right: 5px right: 5px
} }
.modal-thumbnail-card{
.modal-thumbnail-card {
.download-icon { .download-icon {
position: absolute; position: absolute;
bottom: 5px; bottom: 5px;
right: 5px; right: 5px;
opacity:0; opacity: 0;
transition:.4s opacity; transition: .4s opacity;
} }
&:hover .download-icon{ &:hover .download-icon {
opacity:1 opacity: 1
} }
} }

Loading…
Cancel
Save