mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-23 17:50:38 +00:00
- Invoice sidebar
- mobile invoice menu
This commit is contained in:
Peter Papp
@@ -0,0 +1,350 @@
|
||||
<template>
|
||||
<div
|
||||
class="file-content"
|
||||
id="file-content-id"
|
||||
tabindex="-1"
|
||||
>
|
||||
<div
|
||||
:class="{'is-visible': isVisibleSidebar, 'mobile-multi-select': isMultiSelect}"
|
||||
@click.self="filesContainerClick"
|
||||
class="files-container"
|
||||
ref="fileContainer"
|
||||
>
|
||||
<MobileToolbar />
|
||||
|
||||
<SearchBar v-model="query" @reset-query="query = ''" class="mobile-search" :placeholder="$t('inputs.placeholder_search_files')" />
|
||||
|
||||
<!--Mobile Actions-->
|
||||
<FileActionsMobile />
|
||||
|
||||
<!--Item previews list-->
|
||||
<div class="file-list-wrapper">
|
||||
<transition-group
|
||||
name="file"
|
||||
tag="section"
|
||||
class="file-list"
|
||||
>
|
||||
<InvoiceItem
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-for="item in entries"
|
||||
:key="item.id"
|
||||
class="file-item"
|
||||
/>
|
||||
</transition-group>
|
||||
</div>
|
||||
|
||||
<!--Show empty page if folder is empty-->
|
||||
<EmptyFilePage v-if="! isSearching" />
|
||||
|
||||
<!--Show empty page if no search results-->
|
||||
<EmptyMessage
|
||||
v-if="isSearching && isEmpty"
|
||||
:message="$t('messages.nothing_was_found')"
|
||||
icon="eye-slash"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--File Info Panel-->
|
||||
<div :class="{'is-visible': isVisibleSidebar }" class="file-info-container">
|
||||
<InvoiceInfoSidebar />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InvoiceInfoSidebar from '@/Oasis/Modules/Invoices/components/InvoiceInfoSidebar'
|
||||
import FileActionsMobile from '@/components/FilesView/FileActionsMobile'
|
||||
import MobileToolbar from '@/components/FilesView/MobileToolbar'
|
||||
import EmptyFilePage from '@/components/FilesView/EmptyFilePage'
|
||||
import EmptyMessage from '@/components/FilesView/EmptyMessage'
|
||||
import InvoiceItem from '@/Oasis/Modules/Invoices/components/InvoiceItem'
|
||||
import SearchBar from '@/components/FilesView/SearchBar'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'FilesContainer',
|
||||
components: {
|
||||
FileActionsMobile,
|
||||
EmptyFilePage,
|
||||
MobileToolbar,
|
||||
InvoiceItem,
|
||||
EmptyMessage,
|
||||
InvoiceInfoSidebar,
|
||||
SearchBar,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'filesInQueueTotal',
|
||||
'isVisibleSidebar',
|
||||
'FilePreviewType',
|
||||
'currentFolder',
|
||||
'isSearching',
|
||||
'clipboard',
|
||||
'isLoading',
|
||||
'entries',
|
||||
]),
|
||||
isEmpty() {
|
||||
return this.entries.length == 0
|
||||
},
|
||||
draggedItems() {
|
||||
//Set opacity for dragged items
|
||||
|
||||
if (!this.clipboard.includes(this.draggingId)) {
|
||||
return [this.draggingId]
|
||||
}
|
||||
|
||||
if (this.clipboard.includes(this.draggingId)) {
|
||||
return this.clipboard
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
query(val) {
|
||||
this.$searchFiles(val)
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
draggingId: undefined,
|
||||
isDragging: false,
|
||||
isMultiSelect: false,
|
||||
query: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
deleteItems() {
|
||||
if (this.clipboard.length > 0 && this.$checkPermission('master') || this.$checkPermission('editor')) {
|
||||
this.$store.dispatch('deleteItem')
|
||||
}
|
||||
},
|
||||
contextMenu(event, item) {
|
||||
events.$emit('contextMenu:show', event, item)
|
||||
},
|
||||
filesContainerClick() {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('mobileSelecting:start', () => {
|
||||
this.isMultiSelect = true
|
||||
})
|
||||
|
||||
events.$on('mobileSelecting:stop', () => {
|
||||
this.isMultiSelect = false
|
||||
})
|
||||
|
||||
events.$on('fileItem:deselect', () => {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
})
|
||||
|
||||
this.$store.commit('LOADING_STATE', {
|
||||
isLoading: false,
|
||||
data: [
|
||||
{
|
||||
id: 'c2fa9df5-se64-499b-b001-94691ccb14e2',
|
||||
name: 'Nitex s.r.o. - 3260,00 EUR',
|
||||
invoiceNumber: '2021001',
|
||||
total: '3260,00 EUR',
|
||||
created_at: '12. April. 2021',
|
||||
clientName: 'Nitex s.r.o.',
|
||||
file_url: 'http://192.168.1.198:8000/file/9ti6r4481cqtuk36-190001-FMkuIZM5TYWjp0TpxoTPjSYj96a5qMtM.pdf',
|
||||
mimetype: 'pdf',
|
||||
},
|
||||
{
|
||||
id: 'c3fa9df5-ee64-499b-b001-94691ccb14e1',
|
||||
name: 'VueFileManager s.r.o. - 220,00 EUR',
|
||||
invoiceNumber: '2021002',
|
||||
total: '220,00 EUR',
|
||||
created_at: '9. April. 2021',
|
||||
clientName: 'VueFileManager s.r.o.',
|
||||
file_url: 'http://192.168.1.198:8000/file/9ti6r4481cqtuk36-190001-FMkuIZM5TYWjp0TpxoTPjSYj96a5qMtM.pdf',
|
||||
mimetype: 'pdf',
|
||||
},
|
||||
],
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
.file-list {
|
||||
.dragged {
|
||||
/deep/ .is-dragenter {
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dragged {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#multi-selected {
|
||||
position: fixed;
|
||||
pointer-events: none;
|
||||
z-index: 100;
|
||||
|
||||
}
|
||||
|
||||
.mobile-multi-select {
|
||||
bottom: 50px !important;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.button-upload {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
display: none;
|
||||
margin-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.file-content {
|
||||
display: flex;
|
||||
|
||||
&.is-dragging {
|
||||
@include transform(scale(0.99));
|
||||
}
|
||||
}
|
||||
|
||||
.files-container {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
flex: 0 0 100%;
|
||||
@include transition(150ms);
|
||||
position: relative;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
&.is-visible {
|
||||
flex: 0 1 100%;
|
||||
}
|
||||
|
||||
.file-list {
|
||||
|
||||
&.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 180px);
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-info-container {
|
||||
flex: 0 0 300px;
|
||||
padding-left: 20px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
// Transition
|
||||
.file-move {
|
||||
transition: transform 0.6s;
|
||||
}
|
||||
|
||||
.file-enter-active {
|
||||
transition: all 300ms ease;
|
||||
}
|
||||
|
||||
.file-leave-active {
|
||||
transition: all 0ms;
|
||||
}
|
||||
|
||||
.file-enter, .file-leave-to /* .list-leave-active below version 2.1.8 */
|
||||
{
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 960px) {
|
||||
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 72px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 960px) {
|
||||
|
||||
.file-info-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
display: block;
|
||||
}
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.files-container {
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
overflow-y: auto;
|
||||
|
||||
.file-list {
|
||||
|
||||
&.grid {
|
||||
grid-template-columns: repeat(auto-fill, 120px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0;
|
||||
@include transition;
|
||||
|
||||
&.is-offset {
|
||||
margin-top: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-search {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.file-info-container {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<div :style="{ top: positionY + 'px', left: positionX + 'px' }" @click="closeAndResetContextMenu" class="contextmenu" v-show="isVisible || showFromPreview" ref="contextmenu" :class="{'filePreviewFixed': showFromPreview}">
|
||||
|
||||
<!-- File Preview -->
|
||||
<div class="menu-options" id="menu-list">
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="" title="Edit Invoice" icon="rename" />
|
||||
<Option @click.native="" title="Share Invoice" icon="send" />
|
||||
<Option @click.native="" title="Go to Company" icon="user" />
|
||||
<Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
|
||||
<Option @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'ContextMenu',
|
||||
components: {
|
||||
OptionGroup,
|
||||
Option
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'user',
|
||||
'clipboard'
|
||||
]),
|
||||
isMultiSelectContextMenu() {
|
||||
|
||||
// If is context Menu open on multi selected items open just options for the multi selected items
|
||||
if (this.clipboard.length > 1 && this.clipboard.includes(this.item))
|
||||
return false
|
||||
|
||||
// If is context Menu open for the non selected item open options for the single item
|
||||
if (this.clipboard.length < 2 || !this.clipboard.includes(this.item))
|
||||
return true
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showFromPreview: false,
|
||||
item: undefined,
|
||||
isVisible: false,
|
||||
positionX: 0,
|
||||
positionY: 0
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
downloadItem() {
|
||||
if (this.clipboard.length > 1)
|
||||
this.$store.dispatch('downloadFiles')
|
||||
else {
|
||||
this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
|
||||
}
|
||||
},
|
||||
showDetail() {
|
||||
// Dispatch load file info detail
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
|
||||
// Show panel if is not open
|
||||
this.$store.dispatch('fileInfoToggle', true)
|
||||
},
|
||||
deleteItem() {
|
||||
|
||||
},
|
||||
closeAndResetContextMenu() {
|
||||
// Close context menu
|
||||
this.isVisible = false
|
||||
|
||||
// Reset item container
|
||||
this.item = undefined
|
||||
},
|
||||
showFolderActionsMenu() {
|
||||
let container = document.getElementById('folder-actions')
|
||||
|
||||
this.positionX = container.offsetLeft + 16
|
||||
this.positionY = container.offsetTop + 30
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
showContextMenu(event) {
|
||||
let parent = document.getElementById('menu-list')
|
||||
let nodesSameClass = parent.getElementsByClassName('menu-option')
|
||||
|
||||
let VerticalOffsetArea = nodesSameClass.length * 50
|
||||
let HorizontalOffsetArea = 190
|
||||
|
||||
let container = document.getElementById('files-view')
|
||||
|
||||
var offset = container.getClientRects()[0]
|
||||
|
||||
let x = event.clientX - offset.left
|
||||
let y = event.clientY - offset.top
|
||||
|
||||
// Set position Y
|
||||
if (container.offsetHeight - y < VerticalOffsetArea) {
|
||||
this.positionY = y - VerticalOffsetArea
|
||||
} else {
|
||||
this.positionY = y
|
||||
}
|
||||
|
||||
// Set position X
|
||||
if (container.offsetWidth - x < HorizontalOffsetArea) {
|
||||
this.positionX = x - HorizontalOffsetArea
|
||||
} else {
|
||||
this.positionX = x
|
||||
}
|
||||
|
||||
// Show context menu
|
||||
this.isVisible = true
|
||||
},
|
||||
showFilePreviewMenu() {
|
||||
let container = document.getElementById('fast-preview-menu')
|
||||
if (container) {
|
||||
this.positionX = container.offsetLeft + 16
|
||||
this.positionY = container.offsetTop + 51
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
events.$on('showContextMenuPreview:show', (item) => {
|
||||
if (!this.showFromPreview) {
|
||||
this.item = item
|
||||
this.showFromPreview = true
|
||||
this.showFilePreviewMenu()
|
||||
} else if (this.showFromPreview) {
|
||||
this.showFromPreview = false
|
||||
this.item = undefined
|
||||
}
|
||||
})
|
||||
|
||||
events.$on('showContextMenuPreview:hide', () => {
|
||||
this.isVisible = false
|
||||
this.showFromPreview = false
|
||||
this.item = undefined
|
||||
})
|
||||
|
||||
events.$on('contextMenu:show', (event, item) => {
|
||||
// Store item
|
||||
this.item = item
|
||||
|
||||
// Show context menu
|
||||
setTimeout(() => this.showContextMenu(event, item), 10)
|
||||
})
|
||||
|
||||
events.$on('unClick', () => this.closeAndResetContextMenu())
|
||||
|
||||
events.$on('folder:actions', (folder) => {
|
||||
// Store item
|
||||
this.item = folder
|
||||
|
||||
if (this.isVisible) this.isVisible = false
|
||||
else this.showFolderActionsMenu()
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@assets/vuefilemanager/_variables";
|
||||
@import "@assets/vuefilemanager/_mixins";
|
||||
|
||||
.no-options {
|
||||
/deep/ .text-label {
|
||||
color: $text-muted !important;
|
||||
}
|
||||
|
||||
/deep/ &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/ path,
|
||||
/deep/ line,
|
||||
/deep/ circle {
|
||||
stroke: $text-muted !important;
|
||||
}
|
||||
}
|
||||
|
||||
.filePreviewFixed {
|
||||
position: fixed !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.contextmenu {
|
||||
min-width: 250px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
box-shadow: $shadow;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
|
||||
&.showed {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-options {
|
||||
list-style: none;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.contextmenu {
|
||||
background: $dark_mode_foreground;
|
||||
}
|
||||
.no-options {
|
||||
/deep/ .text-label {
|
||||
color: $dark_mode_text_secondary !important;
|
||||
}
|
||||
|
||||
/deep/ &:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/deep/ path,
|
||||
/deep/ line,
|
||||
/deep/ circle {
|
||||
stroke: $dark_mode_text_secondary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+2
-1
@@ -37,6 +37,7 @@
|
||||
<!--Invoice Controls-->
|
||||
<ToolbarGroup v-if="! $isMobile()">
|
||||
<ToolbarButton @click.native="shareInvoice" source="send" :action="$t('actions.share')" />
|
||||
<ToolbarButton @click.native="shareInvoice" source="rename" :action="$t('actions.share')" />
|
||||
<ToolbarButton @click.native="deleteInvoice" source="trash" :action="$t('actions.delete')" />
|
||||
</ToolbarGroup>
|
||||
|
||||
@@ -70,7 +71,7 @@
|
||||
import Option from '@/components/FilesView/Option'
|
||||
|
||||
export default {
|
||||
name: 'ToolBar',
|
||||
name: 'InvoiceDesktopToolbar',
|
||||
components: {
|
||||
FileSortingOptions,
|
||||
MoreHorizontalIcon,
|
||||
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<div class="info-wrapper">
|
||||
|
||||
<!--Is empty clipboard-->
|
||||
<EmptyMessage
|
||||
v-if="isEmpty"
|
||||
:message="$t('messages.nothing_to_preview')"
|
||||
icon="eye-off"
|
||||
/>
|
||||
|
||||
<!--Multiple item selection-->
|
||||
<div v-if="! isSingleFile && !isEmpty" class="info-headline">
|
||||
<TitlePreview
|
||||
icon="check-square"
|
||||
:title="$t('file_detail.selected_multiple')"
|
||||
:subtitle="this.clipboard.length + ' ' + $tc('file_detail.items', this.clipboard.length)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--Single file preview-->
|
||||
<div v-if="isSingleFile && !isEmpty" class="info-headline">
|
||||
<FilePreviewDetail />
|
||||
|
||||
<TitlePreview
|
||||
icon="file-text"
|
||||
:title="singleFile.clientName"
|
||||
:subtitle="'Invoice - ' + singleFile.invoiceNumber"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!--File info-->
|
||||
<ListInfo v-if="isSingleFile && !isEmpty">
|
||||
|
||||
<ListInfoItem
|
||||
title="Invoice Number"
|
||||
:content="singleFile.invoiceNumber"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Total"
|
||||
:content="singleFile.total"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Client"
|
||||
:content="singleFile.clientName"
|
||||
/>
|
||||
|
||||
<!--Created At-->
|
||||
<ListInfoItem
|
||||
:title="$t('file_detail.created_at')"
|
||||
:content="singleFile.created_at"
|
||||
/>
|
||||
|
||||
</ListInfo>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import FilePreviewDetail from '@/components/Others/FilePreviewDetail'
|
||||
import {Edit2Icon, LockIcon, UnlockIcon} from 'vue-feather-icons'
|
||||
import ImageMetaData from '@/components/FilesView/ImageMetaData'
|
||||
import EmptyMessage from '@/components/FilesView/EmptyMessage'
|
||||
import TitlePreview from '@/components/FilesView/TitlePreview'
|
||||
import CopyInput from '@/components/Others/Forms/CopyInput'
|
||||
import ListInfoItem from '@/components/Others/ListInfoItem'
|
||||
import ListInfo from '@/components/Others/ListInfo'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from "@/bus"
|
||||
|
||||
export default {
|
||||
name: 'InfoSidebar',
|
||||
components: {
|
||||
FilePreviewDetail,
|
||||
ImageMetaData,
|
||||
EmptyMessage,
|
||||
TitlePreview,
|
||||
ListInfoItem,
|
||||
UnlockIcon,
|
||||
CopyInput,
|
||||
Edit2Icon,
|
||||
LockIcon,
|
||||
ListInfo,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'permissionOptions',
|
||||
'clipboard',
|
||||
]),
|
||||
isEmpty() {
|
||||
return this.clipboard.length === 0
|
||||
},
|
||||
isSingleFile() {
|
||||
return this.clipboard.length === 1
|
||||
},
|
||||
singleFile() {
|
||||
return this.clipboard[0]
|
||||
},
|
||||
canShowMetaData() {
|
||||
return this.clipboard[0].metadata && this.clipboard[0].metadata.ExifImageWidth
|
||||
},
|
||||
isLocked() {
|
||||
return this.clipboard[0].shared.is_protected
|
||||
},
|
||||
sharedInfo() {
|
||||
let title = this.permissionOptions.find(option => {
|
||||
return option.value === this.clipboard[0].shared.permission
|
||||
})
|
||||
|
||||
return title ? this.$t(title.label) : this.$t('shared.can_download')
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openShareOptions() {
|
||||
events.$emit('popup:open', {name: 'share-edit', item: this.clipboard[0]})
|
||||
},
|
||||
openMoveOptions() {
|
||||
events.$emit("popup:open", {name: "move", item: this.clipboard});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.info-wrapper {
|
||||
padding-bottom: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.info-headline {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.share-link {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
margin-top: 10px;
|
||||
|
||||
.lock-icon {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
margin-right: 9px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.copy-share-link {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,454 @@
|
||||
<template>
|
||||
<div class="file-wrapper" @mouseup.stop="clickedItem" @dblclick="showInvoice">
|
||||
<div class="file-item" :class="{'is-clicked': isClicked , 'no-clicked': !isClicked && $isMobile()}">
|
||||
|
||||
<!-- MultiSelecting for the mobile version -->
|
||||
<transition name="slide-from-left">
|
||||
<div class="check-select" v-if="isMobileSelectMode">
|
||||
<div class="select-box" :class="{'select-box-active': isClicked } ">
|
||||
<CheckIcon v-if="isClicked" class="icon" size="17" />
|
||||
</div>
|
||||
</div>
|
||||
</transition>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
|
||||
<b :ref="item.id" class="name">
|
||||
{{ item.clientName }} - {{ item.total }}
|
||||
</b>
|
||||
|
||||
<div class="item-info">
|
||||
<span class="item-size">
|
||||
{{ item.created_at }}, {{ item.invoiceNumber }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--Show item actions-->
|
||||
<transition name="slide-from-right">
|
||||
<div class="actions" v-if="$isMobile() && ! isMobileSelectMode">
|
||||
<span @mousedown.stop="showItemActions" class="show-actions">
|
||||
<MoreVerticalIcon size="16" class="icon-action text-theme" />
|
||||
</span>
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {CheckIcon, MoreVerticalIcon} from 'vue-feather-icons'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'InvoiceItem',
|
||||
props: [
|
||||
'item'
|
||||
],
|
||||
components: {
|
||||
MoreVerticalIcon,
|
||||
CheckIcon,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'FilePreviewType',
|
||||
'clipboard',
|
||||
'entries'
|
||||
]),
|
||||
isClicked() {
|
||||
return this.clipboard.some(element => element.id === this.item.id)
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isMobileSelectMode: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
showItemActions() {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
|
||||
events.$emit('mobile-menu:show', 'invoice-menu')
|
||||
},
|
||||
clickedItem(e) {
|
||||
if (!this.$isMobile()) {
|
||||
|
||||
if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
|
||||
|
||||
// Click + Ctrl
|
||||
if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
|
||||
} else {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
|
||||
} else if (e.shiftKey) {
|
||||
|
||||
// Click + Shift
|
||||
let lastItem = this.entries.indexOf(this.clipboard[this.clipboard.length - 1])
|
||||
let clickedItem = this.entries.indexOf(this.item)
|
||||
|
||||
// If Click + Shift + Ctrl dont remove already selected items
|
||||
if (!e.ctrlKey && !e.metaKey) {
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
}
|
||||
|
||||
//Shift selecting from top to bottom
|
||||
if (lastItem < clickedItem) {
|
||||
for (let i = lastItem; i <= clickedItem; i++) {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
|
||||
}
|
||||
//Shift selecting from bottom to top
|
||||
} else {
|
||||
for (let i = lastItem; i >= clickedItem; i--) {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entries[i])
|
||||
}
|
||||
}
|
||||
|
||||
} else {
|
||||
|
||||
// Click
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
}
|
||||
|
||||
if (!this.isMobileSelectMode && this.$isMobile()) {
|
||||
events.$emit('file-preview:show')
|
||||
}
|
||||
|
||||
if (this.isMobileSelectMode && this.$isMobile()) {
|
||||
if (this.clipboard.some(item => item.data.id === this.item.data.id)) {
|
||||
this.$store.commit('REMOVE_ITEM_FROM_CLIPBOARD', this.item)
|
||||
} else {
|
||||
this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.item)
|
||||
}
|
||||
}
|
||||
},
|
||||
showInvoice() {
|
||||
events.$emit('file-preview:show')
|
||||
},
|
||||
},
|
||||
created() {
|
||||
events.$on('mobileSelecting:start', () => {
|
||||
this.isMobileSelectMode = true
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
})
|
||||
|
||||
events.$on('mobileSelecting:stop', () => {
|
||||
this.isMobileSelectMode = false
|
||||
this.$store.commit('CLIPBOARD_CLEAR')
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
|
||||
.slide-from-left-move {
|
||||
transition: transform 300s ease;
|
||||
}
|
||||
|
||||
.slide-from-left-enter-active,
|
||||
.slide-from-right-enter-active,
|
||||
.slide-from-left-leave-active,
|
||||
.slide-from-right-leave-active {
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
.slide-from-left-enter,
|
||||
.slide-from-left-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.slide-from-right-enter,
|
||||
.slide-from-right-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
|
||||
.check-select {
|
||||
margin-right: 15px;
|
||||
margin-left: 6px;
|
||||
|
||||
.select-box {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-color: darken($light_background, 5%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.select-box-active {
|
||||
background-color: $theme;
|
||||
|
||||
.icon {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.actions {
|
||||
text-align: right;
|
||||
width: 50px;
|
||||
|
||||
.show-actions {
|
||||
cursor: pointer;
|
||||
padding: 12px 0 12px 6px;
|
||||
|
||||
.icon-action {
|
||||
margin-top: 9px;
|
||||
@include font-size(14);
|
||||
|
||||
circle {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
.item-info {
|
||||
display: block;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.item-shared {
|
||||
display: inline-block;
|
||||
|
||||
.label {
|
||||
@include font-size(12);
|
||||
font-weight: 400;
|
||||
color: $theme;
|
||||
}
|
||||
|
||||
.shared-icon {
|
||||
vertical-align: middle;
|
||||
|
||||
path,
|
||||
circle,
|
||||
line {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
@include font-size(11);
|
||||
font-weight: 400;
|
||||
color: rgba($text, 0.7);
|
||||
}
|
||||
|
||||
.name {
|
||||
white-space: nowrap;
|
||||
|
||||
&[contenteditable] {
|
||||
-webkit-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&[contenteditable='true']:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.name {
|
||||
color: $text;
|
||||
@include font-size(14);
|
||||
font-weight: 700;
|
||||
max-height: 40px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&.actived {
|
||||
max-height: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.selected {
|
||||
.file-item {
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
flex: 0 0 50px;
|
||||
line-height: 0;
|
||||
margin-right: 20px;
|
||||
|
||||
.folder {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
|
||||
/deep/ .folder-icon {
|
||||
@include font-size(52)
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon {
|
||||
@include font-size(45);
|
||||
|
||||
path {
|
||||
fill: #fafafc;
|
||||
stroke: #dfe0e8;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.file-icon-text {
|
||||
line-height: 1;
|
||||
top: 40%;
|
||||
@include font-size(11);
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-weight: 600;
|
||||
user-select: none;
|
||||
max-width: 50px;
|
||||
max-height: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.image {
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
border-radius: 5px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
border: 2px dashed transparent;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 7px 7px 7px 15px;
|
||||
|
||||
&.is-dragenter {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
&.no-clicked {
|
||||
background: white !important;
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $text !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
border-radius: 8px;
|
||||
background: $light_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.check-select {
|
||||
|
||||
.select-box {
|
||||
background-color: lighten($dark_mode_foreground, 10%);
|
||||
}
|
||||
|
||||
.select-box-active {
|
||||
background-color: $theme;
|
||||
|
||||
.icon {
|
||||
stroke: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-wrapper {
|
||||
.icon-item {
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_foreground;
|
||||
stroke: #2f3c54;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.file-item {
|
||||
&.no-clicked {
|
||||
background: $dark_mode_background !important;
|
||||
|
||||
.file-icon {
|
||||
|
||||
path {
|
||||
fill: $dark_mode_foreground !important;
|
||||
stroke: #2F3C54;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
|
||||
.name {
|
||||
color: $dark_mode_text_primary !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.is-clicked {
|
||||
background: $dark_mode_foreground;
|
||||
|
||||
.file-icon {
|
||||
path {
|
||||
fill: $dark_mode_background;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
.name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.item-size,
|
||||
.item-length {
|
||||
color: $dark_mode_text_secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<MenuMobile name="invoice-menu">
|
||||
<TitlePreview
|
||||
v-if="clipboard[0]"
|
||||
class="headline"
|
||||
icon="file-text"
|
||||
:title="clipboard[0].name"
|
||||
:subtitle="'Invoice - ' + clipboard[0].invoiceNumber"
|
||||
/>
|
||||
|
||||
<!--Trash location-->
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="" title="Edit Invoice" icon="rename" />
|
||||
<Option @click.native="" title="Share Invoice" icon="send" />
|
||||
<Option @click.native="" title="Go to Company" icon="user" />
|
||||
<Option @click.native="" :title="$t('context_menu.delete')" icon="trash" />
|
||||
</OptionGroup>
|
||||
|
||||
<OptionGroup>
|
||||
<Option @click.native="" :title="$t('context_menu.detail')" icon="detail" />
|
||||
<Option @click.native="" :title="$t('context_menu.download')" icon="download" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
|
||||
import TitlePreview from '@/components/FilesView/TitlePreview'
|
||||
import ThumbnailItem from '@/components/Others/ThumbnailItem'
|
||||
import OptionGroup from '@/components/FilesView/OptionGroup'
|
||||
import MenuMobile from '@/components/Mobile/MenuMobile'
|
||||
import Option from '@/components/FilesView/Option'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'FileMenuMobile',
|
||||
components: {
|
||||
MenuMobileGroup,
|
||||
ThumbnailItem,
|
||||
TitlePreview,
|
||||
OptionGroup,
|
||||
MenuMobile,
|
||||
Option,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'clipboard',
|
||||
'user',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isVisible: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
.headline {
|
||||
padding: 20px 20px 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user