mirror of
https://github.com/crater-invoice/crater.git
synced 2025-10-30 13:11:08 -04:00
init crater
This commit is contained in:
Mohit Panjwani
100
resources/assets/js/components/base/popup/BasePopup.vue
Normal file
100
resources/assets/js/components/base/popup/BasePopup.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<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>
|
||||
@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div class="customer-select">
|
||||
<div class="main">
|
||||
<div class="search-bar">
|
||||
<base-input
|
||||
v-model="search"
|
||||
:placeholder="$t('general.search')"
|
||||
focus
|
||||
type="text"
|
||||
icon="search"
|
||||
@input="searchCustomer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="(customers.length > 0) && !loading" class="list">
|
||||
<div
|
||||
v-for="(customer, index) in customers"
|
||||
:key="index"
|
||||
class="list-item"
|
||||
@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>
|
||||
</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>
|
||||
<div v-if="customers.length === 0" class="no-data-label">
|
||||
<label> {{ $t('customers.no_customers_found') }} </label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="list-add-button" @click="openCustomerModal">
|
||||
<font-awesome-icon class="icon" icon="user-plus" />
|
||||
<label>{{ $t('customers.add_new_customer') }}</label>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
search: null,
|
||||
loading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('customer', [
|
||||
'customers'
|
||||
])
|
||||
},
|
||||
created () {
|
||||
this.fetchInitialCustomers()
|
||||
},
|
||||
methods: {
|
||||
...mapActions('modal', [
|
||||
'openModal'
|
||||
]),
|
||||
...mapActions('customer', [
|
||||
'fetchCustomers'
|
||||
]),
|
||||
...mapActions('invoice', {
|
||||
setInvoiceCustomer: 'selectCustomer'
|
||||
}),
|
||||
...mapActions('estimate', {
|
||||
setEstimateCustomer: 'selectCustomer'
|
||||
}),
|
||||
async fetchInitialCustomers () {
|
||||
await this.fetchCustomers({
|
||||
filter: {},
|
||||
orderByField: '',
|
||||
orderBy: ''
|
||||
})
|
||||
},
|
||||
async searchCustomer () {
|
||||
let data = {
|
||||
display_name: this.search,
|
||||
email: '',
|
||||
phone: '',
|
||||
orderByField: '',
|
||||
orderBy: '',
|
||||
page: 1
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
|
||||
await this.fetchCustomers(data)
|
||||
|
||||
this.loading = false
|
||||
},
|
||||
openCustomerModal () {
|
||||
this.openModal({
|
||||
title: 'Add Customer',
|
||||
componentName: 'CustomerModal',
|
||||
size: 'lg'
|
||||
})
|
||||
},
|
||||
initGenerator (name) {
|
||||
if (name) {
|
||||
let nameSplit = name.split(' ')
|
||||
let initials = nameSplit[0].charAt(0).toUpperCase()
|
||||
return initials
|
||||
}
|
||||
},
|
||||
selectNewCustomer (id) {
|
||||
if (this.type === 'estimate') {
|
||||
this.setEstimateCustomer(id)
|
||||
} else {
|
||||
this.setInvoiceCustomer(id)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
85
resources/assets/js/components/base/popup/TaxSelectPopup.vue
Normal file
85
resources/assets/js/components/base/popup/TaxSelectPopup.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<div class="tax-select">
|
||||
<div class="main-section">
|
||||
<div class="search-bar">
|
||||
<base-input
|
||||
v-model="textSearch"
|
||||
:placeholder="$t('general.search')"
|
||||
focus
|
||||
icon="search"
|
||||
class="search-input"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="filteredTaxType.length > 0" class="list" >
|
||||
<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"
|
||||
@click="selectTaxType(index)"
|
||||
>
|
||||
<label>{{ taxType.name }}</label>
|
||||
<label>{{ taxType.percent }} %</label>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="no-data-label">
|
||||
<label>{{ $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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
taxes: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
textSearch: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters('taxType', [
|
||||
'taxTypes'
|
||||
]),
|
||||
filteredTaxType () {
|
||||
if (this.textSearch) {
|
||||
var textSearch = this.textSearch
|
||||
return this.taxTypes.filter(function (el) {
|
||||
return el.name.toLowerCase().indexOf(textSearch.toLowerCase()) !== -1
|
||||
})
|
||||
} else {
|
||||
return this.taxTypes
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions('modal', [
|
||||
'openModal'
|
||||
]),
|
||||
selectTaxType (index) {
|
||||
this.$emit('select', {...this.taxTypes[index]})
|
||||
},
|
||||
openTaxModal () {
|
||||
this.openModal({
|
||||
'title': 'Add Tax',
|
||||
'componentName': 'TaxTypeModal'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user