mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/izyim.git
synced 2026-08-19 04:24:00 +00:00
Omair Saleh
203 lines
12 KiB
Vue
203 lines
12 KiB
Vue
<template>
|
|
<div class="panel">
|
|
<div class="row m-t-30">
|
|
<div class="col-3">
|
|
<div class="row">
|
|
<div class="col">
|
|
<company-summary-component :data="companyId"></company-summary-component>
|
|
</div>
|
|
</div>
|
|
<div class="row no-margin">
|
|
<div class="col">
|
|
<ul class="nav" role="tablist">
|
|
<li class="full-width side-tab">
|
|
<a href="#orders" class="active" data-toggle="tab" role="tab">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="row p-b-5 p-t-5 bg-white tab-container">
|
|
<div class="col text-master">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto p-r-0">
|
|
<div class="btn-rounded bg-primary text-center text-white" style="width: 30px; height: 30px;">
|
|
<i class="fa fa-cube fs-12 lh-30"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col all-caps fs-12">
|
|
My Orders
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-angle-right fs-14 lh-25"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="full-width side-tab">
|
|
<a href="#address-book" data-toggle="tab" role="tab">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="row p-b-5 p-t-5 bg-white tab-container">
|
|
<div class="col text-master">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto p-r-0">
|
|
<div class="btn-rounded bg-complete text-center text-white" style="width: 30px; height: 30px;">
|
|
<i class="fa fa-book fs-12 lh-30"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col all-caps fs-12">
|
|
Delivery Addresses
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-angle-right fs-12 lh-25"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
<li class="full-width side-tab">
|
|
<a href="#profile" data-toggle="tab" role="tab">
|
|
<div class="row m-b-10">
|
|
<div class="col">
|
|
<div class="row p-b-5 p-t-5 bg-white tab-container">
|
|
<div class="col text-master">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto p-r-0">
|
|
<div class="btn-rounded bg-warning text-center text-white" style="width: 30px; height: 30px;">
|
|
<i class="fa fa-cubes fs-12 lh-30"></i>
|
|
</div>
|
|
</div>
|
|
<div class="col all-caps fs-12">
|
|
Manage Company
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fa fa-angle-right fs-12 lh-25"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-9">
|
|
<div class="card no-border bg-transparent">
|
|
<div class="tab-content bg-transparent p-l-0 p-r-0">
|
|
<div class="tab-pane active" id="orders">
|
|
<ul class="nav nav-tabs nav-tabs-simple" role="tablist" data-init-reponsive-tabs="dropdownfx">
|
|
<li>
|
|
<a class="active" data-toggle="tab" href="#processing">
|
|
Processing
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-toggle="tab" href="#ship">
|
|
To Ship
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-toggle="tab" href="#receive">
|
|
To Receive
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-toggle="tab" href="#complete">
|
|
Complete
|
|
</a>
|
|
</li>
|
|
<li class="ml-auto">
|
|
<div class="row h-100 parentContainer">
|
|
<div class="col">
|
|
<button class="btn btn-xs btn-primary b-rad-none no-border h-100 fs-11 all-caps semi-bold p-l-20 p-r-20 requestModal" data-type="newOrder">Create new order</button>
|
|
<modal-component type="newOrder">
|
|
<order-form-component :data="companyId"></order-form-component>
|
|
</modal-component>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content bg-transparent p-l-0 p-r-0">
|
|
<div class="tab-pane active" id="processing">
|
|
<orders-list-component :id="companyId" type="company" category="processing"></orders-list-component>
|
|
</div>
|
|
<div class="tab-pane" id="ship">
|
|
<orders-list-component :id="companyId" type="company" category="shipping"></orders-list-component>
|
|
</div>
|
|
<div class="tab-pane" id="receive">
|
|
<orders-list-component :id="companyId" type="company" category="receiving"></orders-list-component>
|
|
</div>
|
|
<div class="tab-pane" id="complete">
|
|
<orders-list-component :id="companyId" type="company" category="complete"></orders-list-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-pane" id="address-book">
|
|
<address-book-list-component :data="companyId"></address-book-list-component>
|
|
</div>
|
|
<div class="tab-pane" id="profile">
|
|
<ul class="nav nav-tabs nav-tabs-simple" role="tablist" data-init-reponsive-tabs="dropdownfx">
|
|
<li>
|
|
<a class="active" data-toggle="tab" href="#about">
|
|
About
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a data-toggle="tab" href="#contacts">
|
|
Contacts
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content bg-transparent p-l-0 p-r-0">
|
|
<div class="tab-pane active" id="about">
|
|
<company-form-component v-if="company !== null" :data="company"></company-form-component>
|
|
</div>
|
|
<div class="tab-pane" id="contacts">
|
|
<!--<contact-list-component :data="initContacts()"></contact-list-component>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: ['data'],
|
|
data() {
|
|
return {
|
|
companyId: this.data,
|
|
company: null
|
|
}
|
|
},
|
|
created(){
|
|
this.fetchCompany();
|
|
},
|
|
methods: {
|
|
fetchCompany(){
|
|
fetch(route('api.company.profile', {'id': this.companyId})).then(response => response.json())
|
|
.then(response => {
|
|
this.company = response.data;
|
|
})
|
|
.catch(error => console.log(error))
|
|
},
|
|
initContacts(){
|
|
return {
|
|
'type': 'company',
|
|
'reference': this.company_id
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script> |