mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-29 20:51:09 -04:00
build version 400
This commit is contained in:
Mohit Panjwani
@ -1,100 +0,0 @@
|
||||
<template>
|
||||
<div v-click-outside="clickOutsideMenu" class="search-select" >
|
||||
<div
|
||||
class="activator"
|
||||
@click="toggleSearchMenu">
|
||||
<slot name="activator" />
|
||||
</div>
|
||||
<transition name="fade">
|
||||
<div
|
||||
v-if="showMenu"
|
||||
:class="{'selector-menu-above': isAbove}"
|
||||
class="selector-menu"
|
||||
>
|
||||
|
||||
<slot />
|
||||
|
||||
</div>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
toggle: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
openDirection: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxHeight: {
|
||||
type: Number,
|
||||
default: 180
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
showMenu: false,
|
||||
preferredOpenDirection: 'below',
|
||||
optimizedHeight: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isAbove () {
|
||||
if (this.openDirection === 'above' || this.openDirection === 'top') {
|
||||
return true
|
||||
} else if (this.openDirection === 'below' || this.openDirection === 'bottom') {
|
||||
return false
|
||||
} else {
|
||||
return this.preferredOpenDirection === 'above'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleSearchMenu () {
|
||||
this.adjustPosition()
|
||||
if (this.toggle) {
|
||||
this.showMenu = !this.showMenu
|
||||
} else {
|
||||
this.showMenu = true
|
||||
}
|
||||
},
|
||||
clickOutsideMenu () {
|
||||
this.showMenu = false
|
||||
},
|
||||
open () {
|
||||
this.showMenu = true
|
||||
},
|
||||
close () {
|
||||
this.showMenu = false
|
||||
},
|
||||
adjustPosition () {
|
||||
if (typeof window === 'undefined') return
|
||||
|
||||
const spaceAbove = this.$el.getBoundingClientRect().top
|
||||
const spaceBelow = window.innerHeight - this.$el.getBoundingClientRect().bottom
|
||||
const hasEnoughSpaceBelow = spaceBelow > this.maxHeight
|
||||
|
||||
if (hasEnoughSpaceBelow || spaceBelow > spaceAbove || this.openDirection === 'below' || this.openDirection === 'bottom') {
|
||||
this.preferredOpenDirection = 'below'
|
||||
this.optimizedHeight = Math.min(spaceBelow - 20, this.maxHeight)
|
||||
} else {
|
||||
this.preferredOpenDirection = 'above'
|
||||
this.optimizedHeight = Math.min(spaceAbove - 20, this.maxHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity .5s;
|
||||
}
|
||||
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@ -1,98 +1,136 @@
|
||||
<template>
|
||||
<div class="customer-select">
|
||||
<div class="main">
|
||||
<div class="search-bar">
|
||||
<base-input
|
||||
<div class="flex flex-col w-full pb-4">
|
||||
<div class="flex px-4 pt-4 pb-2">
|
||||
<sw-input
|
||||
v-model="search"
|
||||
:placeholder="$t('general.search')"
|
||||
focus
|
||||
type="text"
|
||||
icon="search"
|
||||
@input="searchCustomer"
|
||||
/>
|
||||
>
|
||||
<template v-slot:leftIcon>
|
||||
<search-icon class="h-5 m-2 text-gray-500" />
|
||||
</template>
|
||||
</sw-input>
|
||||
</div>
|
||||
|
||||
<div v-if="(customers.length > 0) && !loading" class="list">
|
||||
<div
|
||||
v-if="customers.length > 0 && !loading"
|
||||
class="relative flex flex-col overflow-auto sw-scroll list"
|
||||
>
|
||||
<div
|
||||
v-for="(customer, index) in customers"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
class="flex px-6 py-2 border-b border-gray-200 border-solid cursor-pointer hover:cursor-pointer hover:bg-gray-100 last:border-b-0"
|
||||
@click="selectNewCustomer(customer.id)"
|
||||
>
|
||||
<span class="avatar" >{{ initGenerator(customer.name) }}</span>
|
||||
<div class="name">
|
||||
<label class="title">{{ customer.name }}</label>
|
||||
<label class="sub-title">{{ customer.contact_name }}</label>
|
||||
<span
|
||||
class="flex items-center content-center justify-center w-10 h-10 mr-4 text-xl font-semibold leading-9 text-white bg-gray-400 rounded-full avatar"
|
||||
>{{ initGenerator(customer.name) }}</span
|
||||
>
|
||||
<div class="flex flex-col justify-center">
|
||||
<label class="m-0 leading-tight cursor-pointer font-base">{{
|
||||
customer.name
|
||||
}}</label>
|
||||
<label
|
||||
class="m-0 text-sm font-medium text-gray-500 cursor-pointer font-base"
|
||||
>{{ customer.contact_name }}</label
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="loading" class="list flex justify-content-center align-items-center">
|
||||
<font-awesome-icon icon="spinner" class="fa-spin"/>
|
||||
|
||||
<div v-if="loading" class="flex items-center justify-center list">
|
||||
<refresh-icon class="animate-spin" />
|
||||
</div>
|
||||
<div v-if="customers.length === 0" class="no-data-label">
|
||||
<label> {{ $t('customers.no_customers_found') }} </label>
|
||||
|
||||
<div
|
||||
v-if="customers.length === 0"
|
||||
class="flex justify-center p-5 text-gray-400"
|
||||
>
|
||||
<label class="cursor-pointer">
|
||||
{{ $t('customers.no_customers_found') }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="list-add-button" @click="openCustomerModal">
|
||||
<font-awesome-icon class="icon" icon="user-plus" />
|
||||
<label>{{ $t('customers.add_new_customer') }}</label>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full px-2 py-3 bg-gray-200 border-none outline-none"
|
||||
@click="openCustomerModal"
|
||||
>
|
||||
<user-add-icon class="text-primary-400" />
|
||||
|
||||
<label
|
||||
class="m-0 ml-3 text-sm leading-none cursor-pointer font-base text-primary-400"
|
||||
>{{ $t('customers.add_new_customer') }}</label
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { UserAddIcon, SearchIcon, RefreshIcon } from '@vue-hero-icons/solid'
|
||||
|
||||
export default {
|
||||
components: { UserAddIcon, SearchIcon, RefreshIcon },
|
||||
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
userId: {
|
||||
type: Number,
|
||||
required: false,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
|
||||
data() {
|
||||
return {
|
||||
search: null,
|
||||
loading: false
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters('customer', [
|
||||
'customers'
|
||||
])
|
||||
...mapGetters('customer', ['customers']),
|
||||
},
|
||||
created () {
|
||||
|
||||
created() {
|
||||
this.fetchInitialCustomers()
|
||||
},
|
||||
|
||||
methods: {
|
||||
...mapActions('modal', [
|
||||
'openModal'
|
||||
]),
|
||||
...mapActions('customer', [
|
||||
'fetchCustomers'
|
||||
]),
|
||||
...mapActions('modal', ['openModal']),
|
||||
...mapActions('customer', ['fetchCustomers']),
|
||||
...mapActions('invoice', {
|
||||
setInvoiceCustomer: 'selectCustomer'
|
||||
setInvoiceCustomer: 'selectCustomer',
|
||||
}),
|
||||
...mapActions('estimate', {
|
||||
setEstimateCustomer: 'selectCustomer'
|
||||
setEstimateCustomer: 'selectCustomer',
|
||||
}),
|
||||
async fetchInitialCustomers () {
|
||||
|
||||
async fetchInitialCustomers() {
|
||||
await this.fetchCustomers({
|
||||
filter: {},
|
||||
orderByField: '',
|
||||
orderBy: ''
|
||||
orderBy: '',
|
||||
customer_id: this.userId,
|
||||
})
|
||||
},
|
||||
async searchCustomer () {
|
||||
|
||||
async searchCustomer() {
|
||||
let data = {
|
||||
display_name: this.search,
|
||||
email: '',
|
||||
phone: '',
|
||||
orderByField: '',
|
||||
orderBy: '',
|
||||
page: 1
|
||||
page: 1,
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
@ -101,27 +139,38 @@ export default {
|
||||
|
||||
this.loading = false
|
||||
},
|
||||
openCustomerModal () {
|
||||
|
||||
openCustomerModal() {
|
||||
this.openModal({
|
||||
title: this.$t('customers.add_customer'),
|
||||
componentName: 'CustomerModal',
|
||||
size: 'lg'
|
||||
variant: 'lg',
|
||||
})
|
||||
},
|
||||
initGenerator (name) {
|
||||
|
||||
initGenerator(name) {
|
||||
if (name) {
|
||||
let nameSplit = name.split(' ')
|
||||
let initials = nameSplit[0].charAt(0).toUpperCase()
|
||||
return initials
|
||||
}
|
||||
},
|
||||
selectNewCustomer (id) {
|
||||
|
||||
selectNewCustomer(id) {
|
||||
if (this.type === 'estimate') {
|
||||
this.setEstimateCustomer(id)
|
||||
} else {
|
||||
this.setInvoiceCustomer(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.customer-select {
|
||||
.list {
|
||||
max-height: 173px;
|
||||
min-height: 173px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
114
resources/assets/js/components/base/popup/NoteSelectPopup.vue
Normal file
114
resources/assets/js/components/base/popup/NoteSelectPopup.vue
Normal file
@ -0,0 +1,114 @@
|
||||
<template>
|
||||
<div class="tax-select">
|
||||
<div class="flex flex-col w-full px-4 py-4">
|
||||
<div class="relative flex w-full mb-2">
|
||||
<sw-input
|
||||
v-model="textSearch"
|
||||
:placeholder="$t('general.search')"
|
||||
focus
|
||||
class="text-black"
|
||||
icon="search"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-if="filteredNotes.length > 0"
|
||||
class="relative flex flex-col overflow-auto sw-scroll list"
|
||||
style="max-height: 112px"
|
||||
>
|
||||
<div
|
||||
v-for="(note, index) in filteredNotes"
|
||||
:key="index"
|
||||
class="flex justify-between p-4 border-b border-gray-200 border-solid cursor-pointer list-item last:border-b-0 hover:bg-gray-100"
|
||||
@click="selectNote(index)"
|
||||
>
|
||||
<label
|
||||
class="inline-block m-0 text-base font-normal leading-tight text-black font-base"
|
||||
>
|
||||
{{ note.name }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex justify-center p-5 text-gray-400">
|
||||
<label class="m-0">{{ $t('general.no_note_found') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full px-2 py-3 bg-gray-200 border-none outline-none"
|
||||
@click="openNoteModal"
|
||||
>
|
||||
<check-circle-icon class="h-5" />
|
||||
<label
|
||||
class="m-0 ml-3 text-sm leading-none cursor-pointer font-base text-primary-400"
|
||||
>
|
||||
{{ $t('settings.customization.notes.add_new_note') }}
|
||||
</label>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { CheckCircleIcon } from '@vue-hero-icons/solid'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CheckCircleIcon,
|
||||
},
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
textSearch: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('notes', ['notes']),
|
||||
|
||||
filteredNotes() {
|
||||
if (this.textSearch) {
|
||||
var textSearch = this.textSearch
|
||||
return this.notes.filter(function (el) {
|
||||
return el.name.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1
|
||||
})
|
||||
} else {
|
||||
return this.notes
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.fetchInitialData()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('modal', ['openModal']),
|
||||
...mapActions('notes', ['fetchNotes']),
|
||||
selectNote(index) {
|
||||
this.$emit('select', { ...this.notes[index] })
|
||||
},
|
||||
|
||||
async fetchInitialData() {
|
||||
await this.fetchNotes({
|
||||
filter: {},
|
||||
orderByField: '',
|
||||
orderBy: '',
|
||||
type: this.type ? this.type : '',
|
||||
})
|
||||
},
|
||||
|
||||
openNoteModal() {
|
||||
this.openModal({
|
||||
title: this.$t('settings.customization.notes.add_note'),
|
||||
componentName: 'NoteSelectModal',
|
||||
variant: 'lg',
|
||||
data: this.type,
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -1,62 +1,89 @@
|
||||
<template>
|
||||
<div class="tax-select">
|
||||
<div class="main-section">
|
||||
<div class="search-bar">
|
||||
<base-input
|
||||
<div class="flex flex-col w-full p-4">
|
||||
<div class="relative flex w-full mb-2">
|
||||
<sw-input
|
||||
v-model="textSearch"
|
||||
:placeholder="$t('general.search')"
|
||||
focus
|
||||
class="text-black"
|
||||
icon="search"
|
||||
class="search-input"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="filteredTaxType.length > 0" class="list" >
|
||||
<div
|
||||
v-if="filteredTaxType.length > 0"
|
||||
class="relative flex flex-col overflow-auto sw-scroll list"
|
||||
style="max-height: 112px"
|
||||
>
|
||||
<div
|
||||
v-for="(taxType, index) in filteredTaxType"
|
||||
:key="index"
|
||||
:class="{'item-disabled': taxes.find(val => {return val.tax_type_id === taxType.id})}"
|
||||
class="list-item"
|
||||
:class="{
|
||||
'bg-gray-100 cursor-not-allowed opacity-50 pointer-events-none': taxes.find(
|
||||
(val) => {
|
||||
return val.tax_type_id === taxType.id
|
||||
}
|
||||
),
|
||||
}"
|
||||
class="flex justify-between p-4 border-b border-gray-200 border-solid cursor-pointer list-item last:border-b-0 hover:bg-gray-100"
|
||||
@click="selectTaxType(index)"
|
||||
>
|
||||
<label>{{ taxType.name }}</label>
|
||||
<label>{{ taxType.percent }} %</label>
|
||||
|
||||
<label
|
||||
class="inline-block m-0 text-base font-normal leading-tight text-black font-base"
|
||||
>
|
||||
{{ taxType.name }}
|
||||
</label>
|
||||
<label
|
||||
class="inline-block m-0 text-base font-normal leading-tight text-black font-base"
|
||||
>
|
||||
{{ taxType.percent }} %
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data-label">
|
||||
<label>{{ $t('general.no_tax_found') }}</label>
|
||||
<div v-else class="flex justify-center p-5 text-gray-400">
|
||||
<label class="m-0">{{ $t('general.no_tax_found') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" class="list-add-button" @click="openTaxModal">
|
||||
<font-awesome-icon class="icon" icon="check-circle" />
|
||||
<label>{{ $t('invoices.add_new_tax') }}</label>
|
||||
<button
|
||||
type="button"
|
||||
class="flex items-center justify-center w-full px-2 py-3 bg-gray-200 border-none outline-none"
|
||||
@click="openTaxModal"
|
||||
>
|
||||
<check-circle-icon class="h-5" />
|
||||
<label
|
||||
class="m-0 ml-3 text-sm leading-none cursor-pointer font-base text-primary-400"
|
||||
>
|
||||
{{ $t('invoices.add_new_tax') }}
|
||||
</label>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import { CheckCircleIcon } from '@vue-hero-icons/solid'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CheckCircleIcon,
|
||||
},
|
||||
props: {
|
||||
taxes: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
textSearch: null
|
||||
textSearch: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('taxType', [
|
||||
'taxTypes'
|
||||
]),
|
||||
filteredTaxType () {
|
||||
...mapGetters('taxType', ['taxTypes']),
|
||||
filteredTaxType() {
|
||||
if (this.textSearch) {
|
||||
var textSearch = this.textSearch
|
||||
return this.taxTypes.filter(function (el) {
|
||||
@ -65,21 +92,19 @@ export default {
|
||||
} else {
|
||||
return this.taxTypes
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
...mapActions('modal', [
|
||||
'openModal'
|
||||
]),
|
||||
selectTaxType (index) {
|
||||
this.$emit('select', {...this.taxTypes[index]})
|
||||
...mapActions('modal', ['openModal']),
|
||||
selectTaxType(index) {
|
||||
this.$emit('select', { ...this.taxTypes[index] })
|
||||
},
|
||||
openTaxModal () {
|
||||
openTaxModal() {
|
||||
this.openModal({
|
||||
'title': this.$t('settings.tax_types.add_tax'),
|
||||
'componentName': 'TaxTypeModal'
|
||||
title: this.$t('settings.tax_types.add_tax'),
|
||||
componentName: 'TaxTypeModal',
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user