SalesOrdersDetail.vue javascript code

<v-container grid-list-lg fluid pa-0>

<v-dialog v-if="fullscreenLoading" v-model="fullscreenLoading" fullscreen full-width>

<v-container fluid fill-height style="background-color: rgba(255, 255, 255, 0.5);">

<v-layout justify-center align-center>

<v-progress-circular

indeterminate

color="primary">

</v-progress-circular>

</v-layout>

</v-container>

</v-dialog>

<v-snackbar

v-model="snackbar.value"

:color="snackbar.color"

top

multi-line

block

>

<v-btn flat color="dark" @click.native="snackbar.value = false"><v-icon color="white">cancel</v-icon></v-btn>

</v-snackbar>

<v-layout column>

<v-flex>

<v-layout row align-center>

<v-flex shrink>

<h1 class="title font-weight-bold" id="invoice-sales-order-detail">{{ renderSODataID }}</h1>

</v-flex>

<v-flex shrink>

<v-chip :class="[salesOrderData.status, 'white--text']">{{ salesOrderData.status ? _(salesOrderData.status.replace(/_/g, ' ')).capitalize() : '' }}</v-chip>

</v-flex>

</v-layout>

</v-flex>

<v-flex>

<v-card>

<v-card-text>

<v-container grid-list-xl fluid pa-0>

<v-layout row wrap>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Merchant Name

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderMerchantName(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Owner Name

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderOwnerName(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

City

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderMerchantcity(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Owner Phone Number

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderOwnerPhoneNumber(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Address

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderMerchantAddress(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Sales Name

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderSalesName(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Post Code

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderMerchantPostcode(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Sales Phone Number

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderSalesPhoneNumber(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Patokan

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderMerchantPatokan(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

<v-flex xs12 sm6>

<v-layout row justify-space-between>

<v-flex xs6>

Operation Hour

</v-flex>

<v-flex xs6 class="text-xs-right">

{{ renderOperationHour(salesOrderData) || '-' }}

</v-flex>

</v-layout>

</v-flex>

</v-layout>

</v-container>

</v-card-text>

</v-card>

</v-flex>

<v-flex>

<v-layout row wrap>

<v-flex xs12>

<v-card>

<v-card-text class="pa-0 py-3">

<v-layout row wrap>

<v-flex xs12 class="mx-3 mb-2">

<v-tabs

v-model="tab"

slider-color="custom-green"

light

>

<v-tab

style="text-transform: capitalize;"

v-for="opt in tabOpt"

:key="opt.value"

:disabled="opt.disabled"

class="grey--text text--darken-3"

>

{{ opt.text }}

</v-tab>

</v-tabs>

</v-flex>

<v-flex xs12 class="mx-3 mb-2">

<td class="py-3 px-1">Product</td>

<td class="py-3 px-1">{{ currentTab ? currentTab.text : '' }}</td>

<td class="py-3 px-1" align="right">Subtotal</td>

</tr>

<td class="py-3 px-1">{{ product.product_id }}</td>

{{ product.name || '-'}}

</td>

{{ product.units[0].unit_name ? _(product.units[0].unit_name).capitalize() : '-'}}

</td>

{{ (product.units[0].quantity ? product.units[0].quantity : '-') | thousandSeparator}}

</td>

</td>

</tr>

</template>

</td>

</td>

</td>

</td>

Discount

</td>

- {{ currentDiscount | formatCurrency}}

</td>

</tr>

<tr>

</td>

</td>

</td>

</td>

<td class="py-3 px-5">Total Price</td>

{{ getTotalPrice() | formatCurrency }}

</td>

</tr>

</table>

</v-flex>

</v-layout>

</v-card-text>

</v-card>

</v-flex>

</v-layout>

</v-flex>

<v-flex v-if="salesExchangeId !== ''">

<v-layout row wrap>

<v-flex xs12>

<v-card>

<v-card-title>

<v-layout row wrap>

<v-flex xs12>{{ salesExchangeData.id }}</v-flex>

</v-layout>

</v-card-title>

<v-divider></v-divider>

<v-card-text>

<tr>

<td>RECENT SALES ORDER</td>

<td>PRODUCT NAME</td>

<td>{{ currentTab ? currentTab.text : '' }}</td>

</tr>

<td>

</td>

<td>

</td>

<td>

</div>

</td>

<td>

<td>{{ renderQuantitySE(unit.quantity) }}</td>

</div>

</td>

</tr>

</template>

</table>

</v-card-text>

</v-card>

</v-flex>

</v-layout>

</v-flex>

<v-flex>

<v-layout row wrap>

<v-flex xs12>

<v-card>

<v-card-title>

<v-layout row wrap>

<v-flex xs12>Notes</v-flex>

<v-flex xs12>{{ salesOrderData.notes || '-' }}</v-flex>

</v-layout>

</v-card-title>

</v-card>

</v-flex>

</v-layout>

</v-flex>

<v-flex>

<v-layout row wrap>

<v-flex xs6>

<v-card>

<v-card-title>

<v-layout row wrap>

<v-flex xs12>{{ salesOrderData.delivery_order_id || '-' }}</v-flex>

<v-flex xs12>

<v-layout row wrap>

<v-flex xs4>

DO Status

</v-flex>

<v-flex xs4>: {{ renderDOStatus(salesOrderData) || '-' }}</v-flex>

<v-flex xs4></v-flex>

<v-flex xs4>

</v-flex>

<v-flex xs4> </v-flex>

<v-flex xs4></v-flex>

</v-layout>

</v-flex>

</v-layout>

</v-card-title>

</v-card>

</v-flex>

<v-flex xs6>

<v-card>

<v-card-title>

<v-layout row wrap>

<v-flex xs12>{{ salesOrderData.payment_details ? salesOrderData.payment_details.payment_type : '' | orderPaymentText }}</v-flex>

<v-flex xs12>

<v-layout row wrap>

<v-flex xs4>

Payment Status

</v-flex>

<v-flex xs4>: {{ renderPaymentStatus(salesOrderData) }}</v-flex>

<v-flex xs4></v-flex>

<v-flex xs4>

Payment Date

</v-flex>

<v-flex xs4>: {{ renderPaymentDate(salesOrderData) }}</v-flex>

<v-flex xs4></v-flex>

</v-layout>

</v-flex>

</v-layout>

</v-card-title>

</v-card>

</v-flex>

</v-layout>

</v-flex>

<v-flex>

<v-layout row wrap>

<v-flex xs6>

<v-card>

<v-card-title>

<v-layout row wrap>

<v-flex xs12>{{ renderVoucher(salesOrderData) || '-' }}</v-flex>

<v-flex xs12>

<v-layout row wrap>

<v-flex xs3>

Type

</v-flex>

<v-flex xs5>: {{ getVoucherType(salesOrderData) || '-' }}</v-flex>

<v-flex xs4></v-flex>

<v-flex xs3>

Code

</v-flex>

<v-flex xs5>: {{ renderCode(salesOrderData) || '-' }}</v-flex>

<v-flex xs4></v-flex>

<v-flex xs3>

Value Rules

</v-flex>

<v-flex xs5>: {{ getValueRulesText || '-' }}</v-flex>

<v-flex xs4></v-flex>

</v-layout>

</v-flex>

</v-layout>

</v-card-title>

</v-card>

</v-flex>

<v-flex xs6>

<v-card>

<v-card-title>

<v-layout row wrap>

<v-flex xs12>Sales Order Detail</v-flex>

<v-flex xs12>

<v-layout row wrap>

<v-flex xs3>

Order Date

</v-flex>

<v-flex xs5>: {{ renderOrderDate(salesOrderData) || '-' }}</v-flex>

<v-flex xs4></v-flex>

<v-flex xs3>

Delivery Date

</v-flex>

<v-flex xs5>: {{ renderDeliveryDate(salesOrderData) || '-' }}</v-flex>

<v-flex xs4></v-flex>

<v-flex xs3>

Paid Date

</v-flex>

<v-flex xs5>: {{ renderPaidDate(salesOrderData) || '-' }}</v-flex>

<v-flex xs4></v-flex>

<v-flex xs3>

Admin Notes

</v-flex>

<v-flex xs5>: {{ renderAdminNotes(salesOrderData) || '-' }}</v-flex>

<v-flex xs4></v-flex>

<!-- <v-flex xs4>

Admin Notes

</v-flex>

<v-flex xs4>: Value</v-flex>

<v-flex xs4></v-flex> -->

</v-layout>

</v-flex>

</v-layout>

</v-card-title>

</v-card>

</v-flex>

</v-layout>

</v-flex>

</v-layout>

</v-container>

</template>

import _ from 'underscore'

import moment from 'moment'

import FormatCurrency from '../../filters/currency'

export default {

data () {

return {

tab: null,

fullscreenLoading: false,

salesOrderData: {},

voucher: {},

salesExchangeData: {},

salesExchangeId: '',

filterOpt: [

{

text: 'REQUESTED',

value: 'requested'

},

{

text: 'FULFILLED',

value: 'fulfilled'

},

{

text: 'DELIVERED',

value: 'delivered'

},

{

text: 'RETURN',

value: 'return'

}

],

headersSalesExchange: [

{

text: 'RECENT SALES ORDER',

value: 'name'

},

{ text: 'PRODUCT NAME', value: 'calories' },

{ text: 'UNIT', value: 'fat' },

{ text: 'REQUESTED', value: 'carbs' },

{ text: 'FULFILLED', value: 'protein' },

{ text: 'DELIVERED', value: 'iron' },

{ text: 'RETURN', value: 'iron' }

],

snackbar: {

value: false,

color: 'primary',

message: ''

}

},

created () {

this.fetchSalesOrders()

},

computed: {

renderSODataID () {

return this.salesOrderData.id

},

tabOpt () {

let opt = []

this.filterOpt.forEach(o => {

let index = _.indexOf(this.flag, o.value)

if (index > -1) {

let newOpt = JSON.parse(JSON.stringify(o))

if (_.has(this.salesOrderData, 'products_' + newOpt.value + '_array') && !_.isEmpty(this.salesOrderData['products_' + newOpt.value + '_array'])) {

opt.push(newOpt)

}

})

return opt

},

getValueRulesText () {

let returnValue = '-'

if (!this.voucher) {

return returnValue

}

const voucherBenefit = this.voucher.benefit

const voucherRule = this.voucher.rules

if (!voucherBenefit || !voucherBenefit.discount || !voucherRule || !voucherRule.order) {

return returnValue

}

const discountObject = voucherBenefit.discount

returnValue = ''

if (discountObject.type === 'percentage' && discountObject.scope === 'cart') {

returnValue += `Discount cart ` + discountObject.value + `% Off Maximum ` + FormatCurrency(discountObject.maximum_amount)

} else if (discountObject.type === 'percentage' && discountObject.scope === 'product') {

returnValue += `Discount product ` + discountObject.products[0].value + `% Off Maximum ` + FormatCurrency(discountObject.products[0].maximum_amount)

} else if (discountObject.type === 'value' && discountObject.scope === 'product') {

let tempProduct = discountObject.products.map(e => `${e.name} ${FormatCurrency(e.value)}`).join(', ')

returnValue += 'Discount ' + tempProduct

} else if (discountObject.type === 'value' && discountObject.scope === 'cart') {

returnValue += 'Discount Cart ' + FormatCurrency(discountObject.value)

} else if (discountObject.type === 'value' && discountObject.value > 0) {

returnValue += `Discount Value ${FormatCurrency(discountObject.value)}`

}

const rulesStr = []

const minimumAmount = voucherRule.order.minimum_amount

if (minimumAmount) {

rulesStr.push(`min order ` + FormatCurrency(minimumAmount))

} else {

rulesStr.push(`min order Rp 300.000`)

}

const orderProducts = voucherRule.order.products

const orderProductsCategory = voucherRule.order.products_category

const minimumQty = voucherRule.order.minimum_quantity

const minimumAmountWording = minimumQty ? 'with minimum quantity of ' + minimumQty : ''

if (orderProducts) {

if (orderProducts.included) {

rulesStr.push('include product(s)' + orderProducts.included.map(product => product.name).join(' , ') + minimumAmountWording)

} else if (orderProducts.excluded) {

rulesStr.push('exclude product(s) ' + orderProducts.excluded.map(product => product.name).join(' , '))

}

} else if (orderProductsCategory) {

const productCategory = orderProductsCategory.type

const productCategoryIncluded = orderProductsCategory.included

if (productCategory === 'department') {

rulesStr.push('include products in Department ' + productCategoryIncluded.map(product => product.name).join(' , '))

} else if (productCategory === 'category') {

rulesStr.push('include products in Category ' + productCategoryIncluded.map(product => product.name).join(' , ') +

' Department ' + productCategoryIncluded.map(product => product.department_name))

} else if (productCategory === 'subcategory') {

rulesStr.push(

'include products in Subcategory ' + productCategoryIncluded.map(product => product.name).join(' , ') +

' Category ' + productCategoryIncluded.map(product => product.category_name) +

' Department ' + productCategoryIncluded.map(product => product.department_name)

)

} else if (productCategory === 'brand') {

rulesStr.push('include products in Brand ' +

productCategoryIncluded.map(product => product.name).join(' , '))

}

returnValue += ' with ' + rulesStr.join(' and ')

// console.log('voucherRule', voucherRule)

if (voucherRule.order.type === 'all') {

returnValue += ' All Products'

}

return returnValue

},

flag () {

const flag = {

waiting_for_confirmation: ['requested'],

waiting_for_payment: ['requested'],

requested: ['requested'],

pending: ['requested'],

processed: ['requested', 'fulfilled'],

on_delivery: ['requested', 'fulfilled'],

delivered: ['requested', 'fulfilled', 'delivered', 'return'],

paid: ['requested', 'fulfilled', 'delivered', 'return'],

canceled: ['requested'],

expired: ['requested']

}

return _.isEmpty(this.salesOrderData) ? [] : flag[this.salesOrderData.status]

},

currentTab () {

return this.tabOpt[this.tab]

},

objectSelected () {

console.log(this.currentTab)

if (this.currentTab && _.has(this.salesOrderData, 'products_' + this.currentTab.value + '_array')) {

let products = this.salesOrderData['products_' + this.currentTab.value + '_array']

Object.values(products).forEach(product => {

if (product.hasOwnProperty('composite_items')) {

// test

product.units = product.composite_items.map(unit => ({

unit_name: 'Composite',

product_name: product.name,

quantity: product.quantity

}))

} else if (!product.hasOwnProperty('composite_items')) {

if (this.currentTab.value === 'requested') {

product.units = product.units.map(unit => ({

...unit,

product_name: product.name

}))

} else if (this.currentTab.value === 'fulfilled') {

product.units = product.fulfilled_units.map(unit => ({

...unit,

product_name: product.name

}))

} else if (this.currentTab.value === 'delivered') {

const productsRequested = this.item.products_requested

product.units = product.delivered_units.map(unit => ({

...unit,

price: productsRequested[product.product_id].units.find(val => val.unit_name === unit.unit_name).price,

product_name: product.name

}))

} else if (this.currentTab.value === 'return') {

const productsRequested = this.item.products_requested

product.units = product.returned_units.map(unit => ({

...unit,

price: productsRequested[product.product_id].units.find(val => val.unit_name === unit.unit_name).price,

product_name: product.name

}))

}

for (const unit of product.units) {

unit.subtotal_price = unit.quantity * unit.price

}

})

return products

} else {

return null

}

},

isB2C () {

const item = this.salesOrderData

if (item) {

const createdUsing = item.created_using

if (['b2c_app'].includes(createdUsing)) {

return true

}

return false

},

currentDiscount () {

let returnValue = 0

const voucher = this.salesOrderData.voucher

if (

!voucher ||

!voucher.values

) { return returnValue }

const initialTotalPrice = this.initialTotalPrice

return initialTotalPrice - this.currentTotalPrice

},

initialTotalPrice () {

const products = this.objectSelected

return Object.keys(products).reduce(

(sum, productId) => sum + products[productId].units.reduce(

(productSum, unit) => productSum + (unit.subtotal_price || 0)

, 0)

},

currentTotalPrice () {

if (this.currentTab && _.has(this.salesOrderData, 'total_price_' + this.currentTab.value)) {

let price = parseInt(this.salesOrderData['total_price_' + this.currentTab.value])

if (_.isNumber(price) && !_.isNaN(price)) return price

}

return 0

}

},

methods: {

flattenProductUnitComposition (products) {

let flatProducts = []

for (let i = 0; i < products.length; i++) {

if (products[i].units.length < 2 && !products[i].hasOwnProperty('composite_items')) {

flatProducts.push({

...products[i],

isCompositeChildren: false

})

continue

}

if (products[i].hasOwnProperty('composite_items')) {

flatProducts.push({

...products[i],

isCompositeChildren: false

})

for (let j = 0; j < products[i].composite_items.length; j++) {

flatProducts.push({

...products[i].composite_items[j],

isCompositeChildren: true

})

}

continue

}

for (let k = 0; k < products[i].units.length; k++) {

flatProducts.push({

...products[i],

units: [

products[i].units[k]

],

isCompositeChildren: false

})

}

return flatProducts

},

async fetchSalesOrders () {

this.fullscreenLoading = true

let temp = await this.$store.dispatch('sales/fetchSalesOrder', this.$route.params.id)

this.salesOrderData = JSON.parse(JSON.stringify(temp.data))

if (this.salesOrderData.hasOwnProperty('voucher')) {

this.voucher = JSON.parse(JSON.stringify(this.salesOrderData.voucher))

}

if (this.salesOrderData.hasOwnProperty('sales_exchange_id')) {

this.salesExchangeId = this.salesOrderData.sales_exchange_id

this.fetchSalesExchange()

}

this.fullscreenLoading = false

},

async fetchSalesExchange () {

let temp = await this.$store.dispatch('salesExchange/getSalesExchange', { salesExchangeId: this.salesExchangeId })

this.salesExchangeData = JSON.parse(JSON.stringify(temp.data))

console.log('temp2', temp)

},

renderMerchantName (soData) {

if (soData.merchant) return soData.merchant.store_name

},

renderOwnerName (soData) {

if (soData.merchant) return soData.merchant.owner_name

},

renderOwnerPhoneNumber (soData) {

if (soData.merchant) return soData.merchant.phone_number

},

renderMerchantAddress (soData) {

if (soData.merchant) return soData.merchant.address

},

renderMerchantcity (soData) {

if (soData.merchant && soData.merchant.detail_area) return soData.merchant.detail_area.city

},

renderMerchantPostcode (soData) {

if (soData.merchant && soData.merchant.detail_area) return soData.merchant.detail_area.post_code

},

renderOperationHour (soData) {

if (soData.merchant) return `${soData.merchant.opening_hours} - ${soData.merchant.closing_hours}`

},

renderSalesName (soData) {

if (soData.merchant) return soData.merchant.sales_name

},

renderSalesPhoneNumber (soData) {

if (soData.merchant) return soData.merchant.sales_phone_number

},

renderMerchantPatokan (soData) {

if (soData.merchant) return soData.merchant.additional_information

},

renderDOStatus (soData) {

if (soData.status) return _(soData.status).capitalize()

},

renderOrderDate (soData) {

if (soData.requested_date_manual) return moment(soData.requested_date_manual).format('dddd, DD/MM/YYYY')

},

renderDeliveryDate (soData) {

if (soData.delivered_date) return moment.unix(soData.delivered_date._seconds).format('dddd, DD/MM/YY')

},

renderPaidDate (soData) {

if (soData.paid_at) return moment.unix(soData.paid_at._seconds).format('dddd, DD/MM/YY')

},

renderAdminNotes (soData) {

if (soData.admin_notes) return soData.admin_notes

},

renderVoucher (soData) {

if (soData.hasOwnProperty('voucher')) return soData.voucher.name

},

getVoucherType (soData) {

let returnValue = '-'

if (!soData.voucher || !soData.voucher.type) {

return returnValue

}

returnValue = soData.voucher.type

return _(returnValue || '-').capitalize().replace('_', ' ')

},

renderCode (soData) {

if (soData.hasOwnProperty('voucher')) return soData.voucher.code

},

getUniqueCodeValue () {

if (

!this.salesOrderData ||

!this.salesOrderData.payment_details ||

!this.salesOrderData.payment_details.unique_code

) {

return 0

}

const uniqueCode = Number.parseInt(this.salesOrderData.payment_details.unique_code)

if (Number.isNaN(uniqueCode)) return 0

return uniqueCode

},

getTotalPrice () {

if (this.currentTab && this.currentTab.value === 'return') return this.currentTotalPrice

return this.currentTotalPrice + this.getUniqueCodeValue()

},

renderQuantitySE (quantity) {

if (quantity.requested) return quantity.requested

},

renderPayment (salesOrderData) {

if (salesOrderData.payment_details) return salesOrderData.payment_details.payment_type

},

renderPaymentStatus (salesOrderData) {

if (salesOrderData.payment_details) return _(salesOrderData.payment_details.status).capitalize()

},

renderPaymentDate (salesOrderData) {

if (salesOrderData.paid_at) return moment(salesOrderData.payment_details.expiry_date._seconds).format('dddd, DD/MM/YYYY')

}

</script>

<style>

* {

margin-top: 0;

}

.light-grey {

color: #aeaeae;

}

#table-detail-order-fulfill {

border-collapse: collapse;

}

.table-row-underline {

border-bottom: 1px solid #e3e3e3;

}

.v-tabs .v-tabs__slider.custom-green {

height: 4px;

background-color: #4cb050 !important;

border-color: #4cb050 !important;

}

</style>

[javascript] SalesOrdersDetail.vue

Viewer

Editor

Tools

[javascript] SalesOrdersDetail.vue

Viewer

Editor