mirror of
https://github.com/VueFileManager/vuefilemanager.git
synced 2026-04-23 09:40:39 +00:00
Billing profile implementation
This commit is contained in:
Peter Papp
@@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div id="single-page">
|
||||
<MobileHeader :title="$router.currentRoute.meta.title" />
|
||||
<PageHeader :title="$router.currentRoute.meta.title" />
|
||||
|
||||
<div id="page-content" class="medium-width">
|
||||
<div class="content-page">
|
||||
<PageTab :is-loading="! profile">
|
||||
<PageTabGroup>
|
||||
<div class="form block-form">
|
||||
<FormLabel>Company & Logo</FormLabel>
|
||||
<InfoBox>
|
||||
Here you can set your <b class="text-theme">billing profile</b> which will be paste to your every newly generated invoice.
|
||||
</InfoBox>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Logo (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="logo" v-slot="{ errors }">
|
||||
<ImageInput @input="$updateImage('/oasis/invoices/profile', 'logo', profile.logo)" :image="$getImage(profile.logo)" v-model="profile.logo" :error="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Company name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="company" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'company', profile.company)" v-model="profile.company" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Registration Notes (optional):</label>
|
||||
<div class="input-wrapper">
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="registration_notes" rules="required" v-slot="{ errors }">
|
||||
<textarea
|
||||
rows="2"
|
||||
@input="$updateText('/oasis/invoices/profile', 'registration_notes', profile.registration_notes)"
|
||||
v-model="profile.registration_notes"
|
||||
placeholder=""
|
||||
:class="{'is-error': errors[0]}"
|
||||
class="focus-border-theme"
|
||||
/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup>
|
||||
<div class="form block-form">
|
||||
<FormLabel>Company Details</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>ICO:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ico" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'ico', profile.ico)" v-model="profile.ico" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>DIC:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="dic" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'dic', profile.dic)" v-model="profile.dic" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>IC DPH (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="ic_dph" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'ic_dph', profile.ic_dph)" v-model="profile.ic_dph" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup>
|
||||
<div class="form block-form">
|
||||
<FormLabel>Company Address</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Address:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="address" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'address', profile.address)" v-model="profile.address" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>City:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="city" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'city', profile.city)" v-model="profile.city" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Postal Code:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="postal_code" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'postal_code', profile.postal_code)" v-model="profile.postal_code" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Country:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="country" rules="required" v-slot="{ errors }">
|
||||
<SelectInput @input="$updateText('/oasis/invoices/profile', 'country', profile.country)" v-model="profile.country" :default="profile.country" :options="countries" placeholder="" :isError="errors[0]"/>
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup>
|
||||
<div class="form block-form">
|
||||
<FormLabel>Bank Info</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Bank Name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="bank" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'bank', profile.bank)" v-model="profile.bank" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Iban:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="iban" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'iban', profile.iban)" v-model="profile.iban" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Swift code:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="swift" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'swift', profile.swift)" v-model="profile.swift" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
<PageTabGroup>
|
||||
<div class="form block-form">
|
||||
<FormLabel>Author</FormLabel>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Phone (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="phone" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'phone', profile.phone)" v-model="profile.phone" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Email (optional):</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="email" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'email', profile.email)" v-model="profile.email" placeholder="" type="email"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Author name:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="author" rules="required" v-slot="{ errors }">
|
||||
<input @input="$updateText('/oasis/invoices/profile', 'author', profile.author)" v-model="profile.author" placeholder="" type="text"
|
||||
:class="{'is-error': errors[0]}" class="focus-border-theme" />
|
||||
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
|
||||
<div class="block-wrapper">
|
||||
<label>Stamp:</label>
|
||||
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="stamp" v-slot="{ errors }">
|
||||
<ImageInput @input="$updateImage('/oasis/invoices/profile', 'stamp', profile.stamp)" :image="$getImage(profile.stamp)" v-model="profile.stamp" :error="errors[0]" />
|
||||
</ValidationProvider>
|
||||
</div>
|
||||
</div>
|
||||
</PageTabGroup>
|
||||
</PageTab>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
|
||||
import PageTabGroup from '@/components/Others/Layout/PageTabGroup'
|
||||
import SelectInput from '@/components/Others/Forms/SelectInput'
|
||||
import ImageInput from '@/components/Others/Forms/ImageInput'
|
||||
import FormLabel from '@/components/Others/Forms/FormLabel'
|
||||
import MobileHeader from '@/components/Mobile/MobileHeader'
|
||||
import ButtonBase from '@/components/FilesView/ButtonBase'
|
||||
import PageTab from '@/components/Others/Layout/PageTab'
|
||||
import PageHeader from '@/components/Others/PageHeader'
|
||||
import ThemeLabel from '@/components/Others/ThemeLabel'
|
||||
import InfoBox from '@/components/Others/Forms/InfoBox'
|
||||
import {required} from 'vee-validate/dist/rules'
|
||||
import {mapGetters} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'BillingProfile',
|
||||
props: [
|
||||
'user'
|
||||
],
|
||||
components: {
|
||||
ValidationProvider,
|
||||
ValidationObserver,
|
||||
PageTabGroup,
|
||||
MobileHeader,
|
||||
SelectInput,
|
||||
ImageInput,
|
||||
PageHeader,
|
||||
ButtonBase,
|
||||
ThemeLabel,
|
||||
FormLabel,
|
||||
required,
|
||||
InfoBox,
|
||||
PageTab,
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'countries',
|
||||
'config',
|
||||
]),
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isLoading: false,
|
||||
profile: undefined,
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
created() {
|
||||
axios.get('/api/oasis/invoices/profile')
|
||||
.then(response => {
|
||||
this.profile = response.data.data.attributes
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@assets/vuefilemanager/_variables';
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
@import '@assets/vuefilemanager/_forms';
|
||||
|
||||
.block-form {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -14,7 +14,50 @@
|
||||
<MobileNavigation />
|
||||
<SidebarNavigation />
|
||||
|
||||
<router-view :class="{'is-scaled-down': isScaledDown}" />
|
||||
<div id="viewport">
|
||||
|
||||
<!--Sidebar navigation-->
|
||||
<ContentSidebar>
|
||||
<ContentGroup title="Invoices" class="navigator menu-list-wrapper vertical">
|
||||
<a @click="goTo('regular-invoice')" :class="{'is-active': $isThisLocation(['regular-invoice']) && $route.name === 'InvoicesList'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<file-text-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Invoices
|
||||
</div>
|
||||
</a>
|
||||
<a @click="goTo('advance-invoice')" :class="{'is-active': $isThisLocation(['advance-invoice']) && $route.name === 'InvoicesList'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<clock-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Advance Invoices
|
||||
</div>
|
||||
</a>
|
||||
</ContentGroup>
|
||||
<ContentGroup title="Others" class="navigator menu-list-wrapper vertical">
|
||||
<a @click="goTo('clients')" :class="{'is-active': $isThisLocation(['clients']) && $route.name === 'InvoicesList'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<users-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Clients
|
||||
</div>
|
||||
</a>
|
||||
<router-link :to="{name: 'InvoicesProfile'}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<edit2-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Billing Profile
|
||||
</div>
|
||||
</router-link>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
|
||||
<router-view :class="{'is-scaled-down': isScaledDown}" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -25,7 +68,7 @@
|
||||
import ClientMobileMenu from '@/Oasis/Modules/Invoices/components/ClientMobileMenu'
|
||||
import InvoiceCreateMenu from '@/Oasis/Modules/Invoices/components/InvoiceCreateMenu'
|
||||
|
||||
import {UsersIcon, FileTextIcon, ClockIcon} from 'vue-feather-icons'
|
||||
import {UsersIcon, FileTextIcon, ClockIcon, Edit2Icon} from 'vue-feather-icons'
|
||||
import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
|
||||
import MobileNavigation from '@/components/Others/MobileNavigation'
|
||||
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
|
||||
@@ -53,6 +96,7 @@
|
||||
FileTextIcon,
|
||||
ContentGroup,
|
||||
FilePreview,
|
||||
Edit2Icon,
|
||||
UsersIcon,
|
||||
ClockIcon,
|
||||
},
|
||||
@@ -68,14 +112,21 @@
|
||||
'advance-invoice': 'getAdvanceInvoices',
|
||||
'clients': 'getClients',
|
||||
}
|
||||
|
||||
if (this.$route.name !== 'InvoicesList') {
|
||||
this.$router.push({name: 'InvoicesList'})
|
||||
}
|
||||
|
||||
this.$store.dispatch(routes[location])
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
events.$on('mobile-menu:show', () => this.isScaledDown = true)
|
||||
|
||||
events.$on('fileItem:deselect', () => this.isScaledDown = false)
|
||||
events.$on('mobile-menu:hide', () => this.isScaledDown = false)
|
||||
|
||||
this.$store.dispatch('getRegularInvoices')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,115 +0,0 @@
|
||||
<template>
|
||||
<section id="viewport">
|
||||
|
||||
<!--Sidebar navigation-->
|
||||
<ContentSidebar>
|
||||
<ContentGroup title="Invoices" class="navigator menu-list-wrapper vertical">
|
||||
<a @click="goTo('regular-invoice')" :class="{'is-active': $isThisLocation(['regular-invoice'])}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<file-text-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Invoices
|
||||
</div>
|
||||
</a>
|
||||
<a @click="goTo('advance-invoice')" :class="{'is-active': $isThisLocation(['advance-invoice'])}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<clock-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Advance Invoices
|
||||
</div>
|
||||
</a>
|
||||
</ContentGroup>
|
||||
<ContentGroup title="Others" class="navigator menu-list-wrapper vertical">
|
||||
<a @click="goTo('clients')" :class="{'is-active': $isThisLocation(['clients'])}" class="menu-list-item link">
|
||||
<div class="icon text-theme">
|
||||
<users-icon size="17" />
|
||||
</div>
|
||||
<div class="label text-theme">
|
||||
Clients
|
||||
</div>
|
||||
</a>
|
||||
</ContentGroup>
|
||||
</ContentSidebar>
|
||||
|
||||
<ContentInvoiceView />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ContentInvoiceView from '@/Oasis/Modules/Invoices/ContentInvoiceView'
|
||||
import InvoiceSortingMobile from '@/Oasis/Modules/Invoices/components/InvoiceSortingMobile'
|
||||
import InvoiceFilterMobile from '@/Oasis/Modules/Invoices/components/InvoiceFilterMobile'
|
||||
import InvoiceMobileMenu from '@/Oasis/Modules/Invoices/components/InvoiceMobileMenu'
|
||||
import ClientMobileMenu from '@/Oasis/Modules/Invoices/components/ClientMobileMenu'
|
||||
import InvoiceCreateMenu from '@/Oasis/Modules/Invoices/components/InvoiceCreateMenu'
|
||||
|
||||
import {UsersIcon, FileTextIcon, ClockIcon} from 'vue-feather-icons'
|
||||
import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
|
||||
import MobileNavigation from '@/components/Others/MobileNavigation'
|
||||
import ContentSidebar from '@/components/Sidebar/ContentSidebar'
|
||||
import FilePreview from '@/components/FilesView/FilePreview'
|
||||
import ContentGroup from '@/components/Sidebar/ContentGroup'
|
||||
import {mapGetters} from 'vuex'
|
||||
import {events} from '@/bus'
|
||||
|
||||
export default {
|
||||
name: 'Settings',
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'config'
|
||||
]),
|
||||
},
|
||||
components: {
|
||||
ContentInvoiceView,
|
||||
InvoiceSortingMobile,
|
||||
InvoiceFilterMobile,
|
||||
InvoiceCreateMenu,
|
||||
InvoiceMobileMenu,
|
||||
SidebarNavigation,
|
||||
ClientMobileMenu,
|
||||
MobileNavigation,
|
||||
ContentSidebar,
|
||||
FileTextIcon,
|
||||
ContentGroup,
|
||||
FilePreview,
|
||||
UsersIcon,
|
||||
ClockIcon,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isScaledDown: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goTo(location) {
|
||||
let routes = {
|
||||
'regular-invoice': 'getRegularInvoices',
|
||||
'advance-invoice': 'getAdvanceInvoices',
|
||||
'clients': 'getClients',
|
||||
}
|
||||
this.$store.dispatch(routes[location])
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
events.$on('mobile-menu:show', () => this.isScaledDown = true)
|
||||
|
||||
events.$on('fileItem:deselect', () => this.isScaledDown = false)
|
||||
events.$on('mobile-menu:hide', () => this.isScaledDown = false)
|
||||
|
||||
this.$store.dispatch('getRegularInvoices')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@assets/vuefilemanager/_mixins';
|
||||
|
||||
@media only screen and (max-width: 690px) {
|
||||
|
||||
.is-scaled-down {
|
||||
@include transform(scale(0.95));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user