Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <fragment>
- <v-modal name='newCustomer' :on-close='onCloseNewCustomer'>
- <v-modal name='newInvoiceAddress' :on-close='onCloseNewInvoiceAddress'>
- <template #default='{ values }'>
- <v-panel>
- <template #header>
- <span>New invoice address</span>
- </template>
- <template #content>
- <v-form class='padding(16px)' :values='values' action='/api/addresses/store' method='post' @on-response='newCustomerInvoiceAddressSubmitted'>
- <template #inputs='{ inputs }'>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.postal")' v-model='inputs.postal'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.city")' v-model='inputs.city'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.house_number")' v-model='inputs.house_number'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.builiding_number")' v-model='inputs.builiding_number'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.country")' v-model='inputs.country'/>
- <input class='fill' type='submit'>
- </template>
- </v-form>
- </template>
- </v-panel>
- </template>
- </v-modal>
- <v-modal name='newHqAddress' :on-close='onCloseNewHqAddress'>
- <template #default='{ values }'>
- <v-panel>
- <template #header>
- <span>New headquarters address</span>
- </template>
- <template #content>
- <v-form class='padding(16px)' :values='values' action='/api/addresses/store' method='post' @on-response='newCustomerHqAddressSubmitted'>
- <template #inputs='{ inputs }'>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.postal")' v-model='inputs.postal'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.city")' v-model='inputs.city'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.house_number")' v-model='inputs.house_number'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.builiding_number")' v-model='inputs.builiding_number'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.country")' v-model='inputs.country'/>
- <input class='fill' type='submit'>
- </template>
- </v-form>
- </template>
- </v-panel>
- </template>
- </v-modal>
- <v-panel>
- <template #header>
- <span>New customer</span>
- </template>
- <template #content>
- <v-form ref='newCustomerForm' class='padding(16px)' action='/api/customers/store' method='post' @on-response='newCustomerSubmitted' :on-submit='onNewCustomerSubmit'>
- <template #inputs='{ inputs }'>
- <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.name')" v-model='inputs.name'/>
- <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.name_short')" v-model='inputs.name_short'/>
- <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.name_shortened')" v-model='inputs.name_shortened'/>
- <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.tin')" v-model='inputs.tin'/>
- <input class='margin-bottom(16px)' type='text' :placeholder="$t('customers.tin_country')" v-model='inputs.tin_country'/>
- <button class='margin-bottom(16px) fill' @click.prevent='openNewInvoiceAddress'>Add invoice address</button>
- <v-checkbox class='margin-bottom(16px)' v-model='inputs.separateHqAddress'>
- Different headquarters address?
- </v-checkbox>
- <button v-show='inputs.separateHqAddress' class='margin-bottom(16px) fill' @click.prevent='openNewHeadquartersAddress'>Add headquarters address</button>
- <input class='fill' type='submit'>
- </template>
- </v-form>
- </template>
- </v-panel>
- </v-modal>
- <v-modal name='commission'>
- <v-panel>
- <template #header>
- <span>{{ $t("orders.commission") }}</span>
- </template>
- <template #content>
- <div class="display(flex) flex-direction(column) flex-grow(1) padding(16px)">
- <textarea class="resize(vertical)" v-model='$refs.form.inputs.commission'/>
- <button class="margin-top(16px)" @click='$modals.commission.close()'>Save</button>
- </div>
- </template>
- </v-panel>
- </v-modal>
- <v-modal name='notes'>
- <v-panel>
- <template #header>
- <span>{{ $t("orders.notes") }}</span>
- </template>
- <template #content>
- <div class="display(flex) flex-direction(column) flex-grow(1) padding(16px)">
- <textarea class="resize(vertical)" v-model='$refs.form.inputs.notes'/>
- <button class="margin-top(16px)" @click='$modals.notes.close()'>Save</button>
- </div>
- </template>
- </v-panel>
- </v-modal>
- <v-modal name='newAddress' :on-close='onCloseNewAddress'>
- <template #default='{ values }'>
- <v-panel>
- <template #header>
- <span>New address</span>
- </template>
- <template #content>
- <v-form class='padding(16px)' :values='values' action='/api/addresses/store' method='post' @on-response='newAddressSubmitted'>
- <template #inputs='{ inputs }'>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.postal")' v-model='inputs.postal'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.city")' v-model='inputs.city'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.house_number")' v-model='inputs.house_number'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.builiding_number")' v-model='inputs.builiding_number'/>
- <input class='margin-bottom(16px)' type='text' :placeholder='$t("addresses.country")' v-model='inputs.country'/>
- <input class='fill' type='submit'>
- </template>
- </v-form>
- </template>
- </v-panel>
- </template>
- </v-modal>
- <v-panel class="grid-column(span_8)">
- <template #header>
- <span>{{ $t('orders.order') }}</span>
- </template>
- <template #content>
- <v-table :filterable='true' :items='orders' v-stash='{ properties: ["selectedKey"] }' @on-row-selected='rowSelected'>
- <template #columns>
- <v-table-column>
- <div class="flex-grow(1) display(flex) justify-content(space-around) align-content(center) align-items(center)">
- <i class="fas fa-bolt"></i>
- </div>
- </v-table-column>
- <v-table-column name='status' :display-name='$t("orders.status")'/>
- <v-table-column name='number' :display-name='$t("orders.number")'/>
- <v-table-column name='customer' :display-name='$t("orders.customer")' :sort-value='(column) => column && column.name'/>
- <v-table-column name='commission' :display-name='$t("orders.commission")'/>
- <v-table-column name='delivery_address' :display-name='$t("orders.delivery_address")'/>
- <v-table-column name='f' :display-name='$t("orders.f")'/>
- <v-table-column name='hs' :display-name='$t("orders.hs")'/>
- <v-table-column name='d' :display-name='$t("orders.d")'/>
- <v-table-column name='r' :display-name='$t("orders.r")'/>
- <v-table-column name='has_addons' :display-name='$t("orders.has_addons")'/>
- <v-table-column name='kg' :display-name='$t("orders.kg")'/>
- <v-table-column name='kw' :display-name='$t("orders.kw")'/>
- <v-table-column name='load_date' :display-name='$t("orders.load_date")'/>
- <v-table-column name='value' :display-name='$t("orders.value")'/>
- <v-table-column name='producent' :display-name='$t("orders.producent")'/>
- <v-table-column name='zd' :display-name='$t("orders.zd")'/>
- <v-table-column name='notes' :display-name='$t("orders.notes")'/>
- <v-table-column name='fv' :display-name='$t("orders.fv")'/>
- <v-table-column name='invoicer' :display-name='$t("orders.invoicer")'/>
- <v-table-column name='representant' :display-name='$t("orders.representant")'/>
- <v-table-column name='provision' :display-name='$t("orders.provision")'/>
- </template>
- <template #rows='{ rows }'>
- <v-table-row class='table-sumrow'>
- <v-table-cell>
- <div class='display(flex) flex-grow(1) justify-content(flex-end)'>
- Σ
- </div>
- </v-table-cell>
- <v-table-cell/>
- <v-table-cell/>
- <v-table-cell/>
- <v-table-cell/>
- <v-table-cell/>
- <v-table-cell>
- <span>{{ Object.values(rows).map(o => o.f).reduce((sum, val) => sum + val, 0) }}</span>
- </v-table-cell>
- <v-table-cell>
- <span>{{ Object.values(rows).map(o => o.hs).reduce((sum, val) => sum + val, 0) }}</span>
- </v-table-cell>
- <v-table-cell>
- <span>{{ Object.values(rows).map(o => o.d).reduce((sum, val) => sum + val, 0) }}</span>
- </v-table-cell>
- <v-table-cell>
- <span>{{ Object.values(rows).map(o => o.r).reduce((sum, val) => sum + val, 0) }}</span>
- </v-table-cell>
- <v-table-cell/>
- <v-table-cell>
- <span>{{ Object.values(rows).map(o => o.kg).reduce((sum, val) => sum + val, 0) }}</span>
- </v-table-cell>
- <v-table-cell/>
- <v-table-cell/>
- <v-table-cell>
- <span>{{ Object.values(rows).map(o => o.value).reduce((sum, val) => sum + val, 0).toFixed(2) }}</span>
- </v-table-cell>
- <v-table-cell/>
- <v-table-cell/>
- <v-table-cell/>
- <v-table-cell>
- <span>{{ Object.values(rows).map(o => o.fv).reduce((sum, val) => sum + val, 0).toFixed(2) }}</span>
- </v-table-cell>
- <v-table-cell/>
- <v-table-cell/>
- <v-table-cell/>
- </v-table-row>
- <v-table-row v-for='(row, r) in rows' :key='row.id'>
- <v-table-cell class='display(flex) justify-content(center) align-content(center) align-items(center)'>
- <a v-tooltip.top='$t("orders.details")' class='fas fa-eye' :href='`/orders/${row.id}`'></a>
- <a v-tooltip.top='$t("orders.edit")' class='fas fa-pen margin-left(8px)' @click='$refs.form.set(row)'></a>
- <a v-tooltip.top='$t("orders.remove")' class='fas fa-trash margin-left(8px)' @click='$refs.form.submit(`/api/orders/delete/${row.id}`)'></a>
- </v-table-cell>
- <v-table-cell>
- {{ $t(`orders.status_value[${row.status}]`) }}
- </v-table-cell>
- <v-table-cell>
- {{ row.number }}
- </v-table-cell>
- <v-table-cell>
- {{ row.customer ? `(${row.customer.name_short}) ${row.customer.name}` : '' }}
- </v-table-cell>
- <v-table-cell>
- {{ row.commission }}
- </v-table-cell>
- <v-table-cell>
- <template v-if='row.delivery_address'>
- {{ row.delivery_address.combined }}
- </template>
- </v-table-cell>
- <v-table-cell>
- {{ row.f }}
- </v-table-cell>
- <v-table-cell>
- {{ row.hs }}
- </v-table-cell>
- <v-table-cell>
- {{ row.d }}
- </v-table-cell>
- <v-table-cell>
- {{ row.r }}
- </v-table-cell>
- <v-table-cell>
- {{ $t(`orders.has_addons_value[${row.has_addons}]`) }}
- </v-table-cell>
- <v-table-cell>
- {{ row.kg }}
- </v-table-cell>
- <v-table-cell>
- {{ row.kw }}
- </v-table-cell>
- <v-table-cell>
- {{ row.load_date }}
- </v-table-cell>
- <v-table-cell>
- {{ row.value }}
- </v-table-cell>
- <v-table-cell>
- {{ row.producent }}
- </v-table-cell>
- <v-table-cell>
- {{ row.zd }}
- </v-table-cell>
- <v-table-cell>
- {{ row.notes }}
- </v-table-cell>
- <v-table-cell>
- {{ row.fv }}
- </v-table-cell>
- <v-table-cell>
- {{ row.invoicer }}
- </v-table-cell>
- <v-table-cell>
- {{ row.representant }}
- </v-table-cell>
- <v-table-cell>
- {{ row.provision }}
- </v-table-cell>
- </v-table-row>
- </template>
- <template #footer>
- <v-form class='table-crud' ref='form' @on-response='formSubmitted' :validate='formValidate'>
- <template #inputs='{ inputs }'>
- <v-table-cell>
- <div class="flex-grow(1) display(flex) justify-content(center) align-content(center) align-items(center)">
- <template v-if='inputs.id'>
- <a v-tooltip:top="$t(`orders.save`)" class="fas fa-save" @click='$refs.form.submit(`/api/orders/update/${inputs.id}`)'></a>
- <a v-tooltip:top="$t(`orders.cancel`)" class="fas fa-ban margin-left(8px)" @click='$refs.form.set({})'></a>
- </template>
- <template v-else>
- <a v-tooltip:top="$t(`orders.add`)" class="fas fa-plus" @click='$refs.form.submit("/api/orders/store")'></a>
- </template>
- </div>
- </v-table-cell>
- <v-table-cell/>
- <v-table-cell>
- <div class="display(flex) align-items(center)" v-if='selectedCustomer'>
- <span>{{ selectedCustomer.name_short || inputs.number_customer_short }}{{ ('' + (inputs.number_id || selectedCustomer.next_order_number_id)).padStart(4, '0') }}-</span>
- <input type='text' maxlength='3' v-model='inputs.number_custom'/>
- <span>-{{ currentDateDigits }}</span>
- </div>
- </v-table-cell>
- <v-table-cell>
- <template v-if='!inputs.id'>
- <button class='margin-right(8px)' @click.prevent='$modals.newCustomer.open()'>New</button>
- <select v-model='inputs.customer_id'>
- <option v-for='(customer, c) in customers' :value='customer.id' v-text='customer.name'/>
- </select>
- </template>
- </v-table-cell>
- <v-table-cell>
- <div class="flex-grow(1) display(flex) justify-content(center) align-content(center) align-items(center)">
- <a v-tooltip.top="$t(`orders.edit`)" class="fas fa-pen" @click='$modals.commission.open()'></a>
- </div>
- </v-table-cell>
- <v-table-cell>
- <template v-if='selectedCustomer'>
- <button class='margin-right(8px)' @click.prevent='$modals.newAddress.open({ customer_id: selectedCustomer.id, type: $config.address_types.DELIVERY })'>New</button>
- <select v-model='inputs.delivery_address_id'>
- <option v-for='(address, a) in selectedCustomer.addresses' :value='address.id' v-text='address.combined'/>
- </select>
- </template>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model.number='inputs.f'/>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model.number='inputs.hs'/>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model.number='inputs.d'/>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model.number='inputs.r'/>
- </v-table-cell>
- <v-table-cell class="display(flex) flex-grow(1) justify-content(center) align-items(center)">
- <input type='checkbox' v-model='inputs.has_addons'/>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model.number='inputs.kg'/>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model.number='inputs.kw'/>
- </v-table-cell>
- <v-table-cell>
- <input type='date' v-model='inputs.load_date'/>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model.number='inputs.value'/>
- </v-table-cell>
- <v-table-cell>
- <select v-model='inputs.producent'>
- <option v-for='(item, i) in $config.producers' :value='item' v-text='item'/>
- </select>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model.number='inputs.zd'/>
- </v-table-cell>
- <v-table-cell>
- <div class="flex-grow(1) display(flex) justify-content(center) align-content(center) align-items(center)">
- <a v-tooltip.top="$t(`orders.edit`)" class="fas fa-pen" @click='$modals.notes.open()'></a>
- </div>
- </v-table-cell>
- <v-table-cell>
- <input type='text' v-model='inputs.fv'/>
- </v-table-cell>
- <v-table-cell>
- <select name='invoicer' v-model='inputs.invoicer'>
- <option v-for='(item, i) in $config.order_invoicers' :value='item' v-text='item'/>
- </select>
- </v-table-cell>
- <v-table-cell>
- <input type='text' v-model='inputs.representant'/>
- </v-table-cell>
- <v-table-cell>
- <input type='number' v-model='inputs.provision'/>
- </v-table-cell>
- </template>
- </v-form>
- </template>
- </v-table>
- </template>
- </v-panel>
- </fragment>
- </template>
- <script>
- export default
- {
- props: ['orders', 'customers'],
- data: () =>
- ({
- currentDateDigits: new Date().getFullYear().toString().substr(-2),
- currentWeek: new Date().getWeek()
- }),
- methods:
- {
- formValidate(form)
- {
- if(form.inputs.kw)
- {
- if(((1 > form.inputs.kw) || (53 < form.inputs.kw)) || form.inputs.kw < this.currentWeek)
- if(!confirm(`${this.$t("orders.kw")} can only be between 1 and 53, aswell as after current week (${this.currentWeek}). Continue regardless?`))
- return false
- }
- if(form.inputs.load_date)
- {
- var date = new Date(form.inputs.load_date)
- var currentDate = new Date()
- if(date < currentDate)
- if(!confirm(`${this.$t("orders.load_date")} cannot be set to date before today. Continue regardless?`))
- return false
- }
- if(form.inputs.zd)
- {
- if(((1 > form.inputs.zd) || (53 < form.inputs.zd)) || form.inputs.zd < this.currentWeek)
- if(!confirm(`${this.$t("orders.zd")} can only be between 1 and 53, aswell as after current week (${this.currentWeek}). Continue regardless?`))
- return false
- }
- return true
- },
- formSubmitted(response)
- {
- this.fetch()
- },
- newAddressSubmitted(response)
- {
- this.$modals.newAddress.close(response.data)
- this.fetch()
- },
- newCustomerSubmitted(response)
- {
- this.$modals.newCustomer.close(response.data)
- this.fetch()
- },
- newCustomerInvoiceAddressSubmitted(response)
- {
- this.$modals.newInvoiceAddress.close(response.data)
- this.fetch()
- },
- newCustomerHqAddressSubmitted(response)
- {
- this.$modals.newHqAddress.close(response.data)
- this.fetch()
- },
- onNewCustomerSubmit(inputs)
- {
- if(!inputs.separateHqAddress)
- inputs.headquarters_address_id = inputs.invoice_address_id
- },
- onCloseNewAddress(values)
- {
- this.$refs.form.inputs.delivery_address_id = values.id
- },
- onCloseNewCustomer(values)
- {
- this.$refs.form.inputs.customer_id = values.id
- },
- onCloseNewInvoiceAddress(values)
- {
- this.$refs.newCustomerForm.inputs.invoice_address_id = values.id
- },
- onCloseNewHqAddress(values)
- {
- this.$refs.newCustomerForm.inputs.headquarters_address_id = values.id
- },
- openNewInvoiceAddress()
- {
- this.$modals.newInvoiceAddress.open({ type: this.$config.address_types.INVOICE })
- },
- openNewHeadquartersAddress()
- {
- this.$modals.newHqAddress.open({ type: this.$config.address_types.HEADQUARTERS })
- },
- rowSelected(key)
- {
- this.$emit('on-row-selected', key)
- },
- fetch()
- {
- this.$emit('fetch')
- }
- },
- computed:
- {
- selectedCustomer()
- {
- return this.customers.find(x => x.id == this.$refs.form.inputs.customer_id)
- }
- }
- }
- </script>
- <style lang='scss'>
- .modal
- {
- width: 512px;
- > .panel
- {
- flex-grow: 1;
- }
- }
- </style>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement