mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-23 17:50:38 +00:00
- Client list
- Context menu
This commit is contained in:
Peter Papp
@@ -0,0 +1,461 @@
|
||||
<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>
|
||||
|
||||
<!--Thumbnail for item-->
|
||||
<div class="icon-item">
|
||||
|
||||
<!--Image thumbnail-->
|
||||
<img loading="lazy" class="image" :src="item.avatar" :alt="item.name" />
|
||||
</div>
|
||||
|
||||
<!--Name-->
|
||||
<div class="item-name">
|
||||
|
||||
<b :ref="item.id" class="name">
|
||||
{{ item.name }}
|
||||
</b>
|
||||
|
||||
<div class="item-info">
|
||||
<span class="item-size">
|
||||
Created at: {{ item.created_at }}, Total: {{ item.totalNet }}
|
||||
</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>
|
||||
@@ -27,6 +27,15 @@
|
||||
<InvoiceItem
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-if="item.type === 'invoice'"
|
||||
v-for="item in entries"
|
||||
:key="item.id"
|
||||
class="file-item"
|
||||
/>
|
||||
<ClientItem
|
||||
@contextmenu.native.prevent="contextMenu($event, item)"
|
||||
:item="item"
|
||||
v-if="item.type === 'client'"
|
||||
v-for="item in entries"
|
||||
:key="item.id"
|
||||
class="file-item"
|
||||
@@ -56,6 +65,7 @@
|
||||
import InvoiceActionsMobile from '@/Oasis/Modules/Invoices/components/InvoiceActionsMobile'
|
||||
import InvoiceInfoSidebar from '@/Oasis/Modules/Invoices/components/InvoiceInfoSidebar'
|
||||
import InvoiceItem from '@/Oasis/Modules/Invoices/components/InvoiceItem'
|
||||
import ClientItem from '@/Oasis/Modules/Invoices/components/ClientItem'
|
||||
import EmptyFilePage from '@/components/FilesView/EmptyFilePage'
|
||||
import MobileToolbar from '@/components/FilesView/MobileToolbar'
|
||||
import EmptyMessage from '@/components/FilesView/EmptyMessage'
|
||||
@@ -67,11 +77,12 @@
|
||||
name: 'FilesContainer',
|
||||
components: {
|
||||
InvoiceActionsMobile,
|
||||
InvoiceInfoSidebar,
|
||||
EmptyFilePage,
|
||||
MobileToolbar,
|
||||
InvoiceItem,
|
||||
EmptyMessage,
|
||||
InvoiceInfoSidebar,
|
||||
InvoiceItem,
|
||||
ClientItem,
|
||||
SearchBar,
|
||||
},
|
||||
computed: {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<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">
|
||||
<!--Invoice-->
|
||||
<div v-show="isInvoice" class="menu-options" id="menu-list">
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="" title="Edit Invoice" icon="rename" />
|
||||
<Option @click.native="" title="Send Invoice" icon="send" />
|
||||
@@ -16,6 +16,17 @@
|
||||
</OptionGroup>
|
||||
</div>
|
||||
|
||||
<!--Client-->
|
||||
<div v-show="isClient" class="menu-options" id="menu-list">
|
||||
<OptionGroup class="menu-option-group">
|
||||
<Option @click.native="" title="Edit" icon="rename" />
|
||||
<Option @click.native="deleteItem" title="Delete" icon="trash" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showDetail" title="Go to Profile" icon="user" />
|
||||
<Option @click.native="showDetail" :title="$t('context_menu.detail')" icon="detail" />
|
||||
</OptionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -36,6 +47,12 @@ export default {
|
||||
'user',
|
||||
'clipboard'
|
||||
]),
|
||||
isInvoice() {
|
||||
return this.clipboard[0] && this.clipboard[0].type === 'invoice'
|
||||
},
|
||||
isClient() {
|
||||
return this.clipboard[0] && this.clipboard[0].type === 'client'
|
||||
},
|
||||
isMultiSelectContextMenu() {
|
||||
|
||||
// If is context Menu open on multi selected items open just options for the multi selected items
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<MenuMobile name="invoice-create">
|
||||
<MenuMobileGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showLocation('invoices')" title="New Invoice" icon="file-plus" is-hover-disabled="true" />
|
||||
<Option @click.native="showLocation('advance-invoices')" title="New Advance Invoices" icon="file-plus" is-hover-disabled="true" />
|
||||
<Option @click.native="showLocation('invoices')" title="Create Invoice" icon="file-plus" is-hover-disabled="true" />
|
||||
<Option @click.native="showLocation('advance-invoices')" title="Create Advance Invoice" icon="clock" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
<Option @click.native="showLocation('clients')" title="New Client" icon="user-plus" is-hover-disabled="true" />
|
||||
<Option @click.native="showLocation('clients')" title="Create Client" icon="user-plus" is-hover-disabled="true" />
|
||||
</OptionGroup>
|
||||
</MenuMobileGroup>
|
||||
</MenuMobile>
|
||||
|
||||
@@ -20,10 +20,10 @@
|
||||
<!--Creating controls-->
|
||||
<ToolbarGroup>
|
||||
<PopoverWrapper>
|
||||
<ToolbarButton @click.stop.native="createCreateMenu" source="file-plus" :action="$t('actions.create_folder')" />
|
||||
<ToolbarButton @click.stop.native="createCreateMenu" source="plus" :action="$t('actions.create_folder')" />
|
||||
<PopoverItem name="desktop-create-invoices">
|
||||
<OptionGroup>
|
||||
<Option title="Create Invoice" icon="file-text" />
|
||||
<Option title="Create Invoice" icon="file-plus" />
|
||||
<Option title="Create Advance Invoice" icon="clock" />
|
||||
</OptionGroup>
|
||||
<OptionGroup>
|
||||
@@ -94,9 +94,7 @@
|
||||
'clipboard',
|
||||
]),
|
||||
directoryName() {
|
||||
return this.currentFolder
|
||||
? this.currentFolder.name
|
||||
: this.homeDirectory.name
|
||||
return this.currentFolder ? this.currentFolder.name : 'Invoices'
|
||||
},
|
||||
canActiveInView() {
|
||||
let locations = [
|
||||
@@ -235,11 +233,8 @@
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.toolbar .directory-name {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
.toolbar-go-back {
|
||||
.location {
|
||||
.location-title {
|
||||
color: $dark_mode_text_primary;
|
||||
}
|
||||
|
||||
@@ -8,51 +8,88 @@
|
||||
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>
|
||||
<div v-if="isClient">
|
||||
|
||||
<!--Single file preview-->
|
||||
<div v-if="isSingleFile && !isEmpty" class="info-headline">
|
||||
<FilePreviewDetail />
|
||||
<!--Single file preview-->
|
||||
<div v-if="isSingleFile && !isEmpty" class="info-headline">
|
||||
<TitlePreview
|
||||
icon="user"
|
||||
:title="singleFile.name"
|
||||
subtitle="Client"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<TitlePreview
|
||||
icon="file-text"
|
||||
:title="singleFile.clientName"
|
||||
:subtitle="'Invoice - ' + singleFile.invoiceNumber"
|
||||
/>
|
||||
</div>
|
||||
<!--File info-->
|
||||
<ListInfo v-if="isSingleFile && !isEmpty">
|
||||
|
||||
<!--File info-->
|
||||
<ListInfo v-if="isSingleFile && !isEmpty">
|
||||
<ListInfoItem
|
||||
title="Email"
|
||||
:content="singleFile.email"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Invoice Number"
|
||||
:content="singleFile.invoiceNumber"
|
||||
/>
|
||||
<ListInfoItem
|
||||
title="Total Net"
|
||||
:content="singleFile.totalNet"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Total"
|
||||
:content="singleFile.total"
|
||||
/>
|
||||
<ListInfoItem
|
||||
title="Total Invoices"
|
||||
:content="singleFile.totalInvoices + ' Pcs.'"
|
||||
/>
|
||||
|
||||
<ListInfoItem
|
||||
title="Client"
|
||||
:content="singleFile.clientName"
|
||||
/>
|
||||
<!--Created At-->
|
||||
<ListInfoItem
|
||||
:title="$t('file_detail.created_at')"
|
||||
:content="singleFile.created_at"
|
||||
/>
|
||||
</ListInfo>
|
||||
</div>
|
||||
|
||||
<!--Created At-->
|
||||
<ListInfoItem
|
||||
:title="$t('file_detail.created_at')"
|
||||
:content="singleFile.created_at"
|
||||
/>
|
||||
<div v-if="isInvoice">
|
||||
|
||||
</ListInfo>
|
||||
<!--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">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -87,6 +124,12 @@
|
||||
'permissionOptions',
|
||||
'clipboard',
|
||||
]),
|
||||
isInvoice() {
|
||||
return this.clipboard[0] && this.clipboard[0].type === 'invoice'
|
||||
},
|
||||
isClient() {
|
||||
return this.clipboard[0] && this.clipboard[0].type === 'client'
|
||||
},
|
||||
isEmpty() {
|
||||
return this.clipboard.length === 0
|
||||
},
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
|
||||
<div class="item-info">
|
||||
<span class="item-size">
|
||||
{{ item.created_at }}, {{ item.invoiceNumber }}
|
||||
{{ item.created_at }}, n. {{ item.invoiceNumber }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user