mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
create update UI for transaction group
This commit is contained in:
edmondlang
@@ -30,6 +30,7 @@ class TransactionResource extends JsonResource
|
||||
'payment_method' => (float) $this->payment_method,
|
||||
'recipient_bank_account' => new BankResource($booking->bank),
|
||||
'issuer_name' => $this->issuerCompany->name,
|
||||
'issuer_id' => $this->issuerCompany->id,
|
||||
'amount' => (double) $this->amount,
|
||||
'original_amount' => (double) $this->original_amount,
|
||||
'currency' => new CurrencyResource($this->currency),
|
||||
|
||||
@@ -34,10 +34,16 @@
|
||||
<div class="col-auto">
|
||||
<div class="row parentContainer">
|
||||
<div class="col p-l-0">
|
||||
<button class="btn btn-xs btn-default bg-danger b-rad-none no-border requestModal" data-type="approveDocument">
|
||||
<button class="btn btn-xs btn-default bg-warning b-rad-none no-border requestModal" data-type="editTransactionGroup">
|
||||
<i class="fa fa-pencil text-white"></i>
|
||||
</button>
|
||||
<modal-component small type="editTransactionGroup">
|
||||
<edit-transaction-group-form-component :section="section" :currency_rate="item.currency_rate" :supplier_id ="data.transactions[0].issuer_id"></edit-transaction-group-form-component>
|
||||
</modal-component>
|
||||
<button class="btn btn-xs btn-default bg-danger b-rad-none no-border requestModal" data-type="deleteTransactionGroup">
|
||||
<i class="fa fa-times text-white"></i>
|
||||
</button>
|
||||
<modal-component small type="approveDocument">
|
||||
<modal-component small type="deleteTransactionGroup">
|
||||
<div class="row">
|
||||
<div class="col text-center">
|
||||
<div class="row">
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<h5 class="all-caps m-b-5 bold no-margin">Edit Transaction Group</h5>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-5 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
|
||||
<div class="col">
|
||||
<small class="bold fs-10 text-danger">{{error}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<div class="bg-white bg-hover-complete h-100 btn btn-xs btn-outline-none btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="selectedSupplier.status = !selectedSupplier.status">
|
||||
<div class="row h-100">
|
||||
<div class="col fs-9 d-flex align-items-center flex-column" style="padding-top: 7px; padding-bottom: 4px;">
|
||||
<label class="all-caps w-100 m-b-0" style="font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500;">Supplier</label>
|
||||
<span class="w-100 fs-14">{{selectedSupplier.name}}</span>
|
||||
</div>
|
||||
<div class="col-auto b-l b-grey">
|
||||
<div class="row h-100 align-items-center">
|
||||
<div class="col">
|
||||
<i class="fa" :class="[{'fa-angle-down': !selectedSupplier.status}, {'fa-angle-up': selectedSupplier.status}]"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="relative w-100">
|
||||
<div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !selectedSupplier.status}]" style="top: 100%; right: 0; z-index: 1;">
|
||||
<div class="row text-left no-margin bg-white">
|
||||
<div class="col no-padding">
|
||||
<div class="row no-margin" v-for="supplier in suppliers" v-bind:key="supplier.id" :data="supplier">
|
||||
<div class="col b-b b-grey p-t-10 p-b-10 pointer hover-t-10 p-b-10" :class="[{'bg-primary-light': selectedSupplier.id === supplier.id}, {'text-white': selectedSupplier.id === supplier.id}, {'hover-primary': selectedSupplier.id !== supplier.id}, {'pointer': selectedSupplier.id !== supplier.id}]" @click="updateSupplier(supplier)">
|
||||
<div class="row align-items-center justify-content-center">
|
||||
<div class="col">
|
||||
<div class="font-heading fs-10">{{supplier.name}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row m-b-10">
|
||||
<div class="col">
|
||||
<validation-wrapper-component :validator="$v.rate">
|
||||
<label class="all-caps">Purchase Rate</label>
|
||||
<input type="text" class="form-control" v-model.lazy="rate" v-money="exchangeRate">
|
||||
</validation-wrapper-component>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col p-r-5">
|
||||
<div class="btn btn-sm btn-default bg-master-lightest btn-block b-rad-none" data-dismiss="modal">Cancel</div>
|
||||
</div>
|
||||
<div class="col p-l-5">
|
||||
<div class="btn btn-sm btn-success btn-block b-rad-none" @click="submit(route('api.company.team.create'), 'post', section, true, false)">Update</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { required } from "vuelidate/lib/validators";
|
||||
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
currency_rate:{
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
supplier_id: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
error: '',
|
||||
suppliers: [],
|
||||
selectedSupplier: {
|
||||
id: '',
|
||||
name: '',
|
||||
status: false
|
||||
},
|
||||
email: '',
|
||||
rate: (Math.round((this.currency_rate + Number.EPSILON) * 10000) / 10000).toFixed(5)
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.submit(route('api.company.list') + '?filters=' + JSON.stringify({'business_type': 3, 'status_in': [2, 0]}), 'get', 'pendingOrdersSection', false, false)
|
||||
},
|
||||
validations: {
|
||||
email: { },
|
||||
rate: { },
|
||||
},
|
||||
methods: {
|
||||
successHandler(response){
|
||||
var selected_supplier_id = this.supplier_id;
|
||||
var selected_supplier = null;
|
||||
this.suppliers = response.payload.data;
|
||||
|
||||
this.suppliers.forEach(function(supplier) {
|
||||
supplier.id === selected_supplier_id ? selected_supplier = supplier : '';
|
||||
});
|
||||
|
||||
this.selectedSupplier = selected_supplier;
|
||||
this.selectedSupplier.status = false;
|
||||
},
|
||||
updateSupplier(supplier){
|
||||
this.selectedSupplier = supplier;
|
||||
this.selectedSupplier.status = false;
|
||||
},
|
||||
},
|
||||
mixins: [ModalFormHandler]
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user