From a69ecc2825fbb793e13fd1c9f940d9dd73dd2ef8 Mon Sep 17 00:00:00 2001
From: edmondlang <edmond_wuiming@hotmail.com>
Date: Mon, 27 Sep 2021 23:56:13 +0800
Subject: [PATCH] update create load container form

---
 .../CreateLoadContainerFormComponent.vue      | 41 ++++++++++---------
 resources/views/pages/containers.blade.php    | 10 ++---
 2 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/resources/assets/vue/components/containers/forms/CreateLoadContainerFormComponent.vue b/resources/assets/vue/components/containers/forms/CreateLoadContainerFormComponent.vue
index cf8e4aaa..d3f03b07 100644
--- a/resources/assets/vue/components/containers/forms/CreateLoadContainerFormComponent.vue
+++ b/resources/assets/vue/components/containers/forms/CreateLoadContainerFormComponent.vue
@@ -1,6 +1,6 @@
 <template>
-    <div class="row" @keyup.enter="submitForm">
-        <div class="col">
+    <div class="row justify-content-center" @keyup.enter="submitForm">
+        <div class="col col-md-8">
             <div class="row m-b-20 text-info">
                 <div class="col">
                     <h3 class="text-left">Create Load Container</h3>
@@ -49,6 +49,21 @@
                         </div>
                     </div>
 
+                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.container_reference">
+                        <label class="text-primary">Container Reference</label>
+                        <input type="text" class="form-control fs-12" v-model.trim="parameters.container_reference">
+                    </validation-wrapper-component>
+
+                     <validation-wrapper-component class="m-b-15" :validator="$v.parameters.container_number">
+                        <label class="text-primary">Container Number</label>
+                        <input type="text" class="form-control fs-12" v-model.trim="parameters.container_number">
+                    </validation-wrapper-component>
+
+                     <validation-wrapper-component class="m-b-15" :validator="$v.parameters.seal_reference">
+                        <label class="text-primary">Seal Reference</label>
+                        <input type="text" class="form-control fs-12" v-model.trim="parameters.seal_reference">
+                    </validation-wrapper-component>
+
                     <div class="row">
                         <div class="col">
                             <validation-wrapper-component class="m-b-10" :validator="$v.parameters.etd">
@@ -65,24 +80,12 @@
                         </div>
                     </div>
 
-                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.container_reference">
-                        <label class="text-primary">Container Reference</label>
-                        <input type="text" class="form-control fs-12" v-model.trim="parameters.container_reference">
-                    </validation-wrapper-component>
-
-                     <validation-wrapper-component class="m-b-15" :validator="$v.parameters.container_number">
-                        <label class="text-primary">Container Number</label>
-                        <input type="text" class="form-control fs-12" v-model.trim="parameters.container_number">
-                    </validation-wrapper-component>
-
-                     <validation-wrapper-component class="m-b-15" :validator="$v.parameters.seal_reference">
-                        <label class="text-primary">Seal Reference</label>
-                        <input type="text" class="form-control fs-12" v-model.trim="parameters.seal_reference">
-                    </validation-wrapper-component>
-
                     <div class="row m-t-15 align-items-center justify-content-center">
+                        <div class="col auto">
+                            <div class="btn btn-block btn-lg btn-default b-rad-none" @click="$store.dispatch('toggleSection', {name: 'createContainerFormSection', status: false})">Cancel</div>
+                        </div>
                         <div class="col">
-                            <div class="btn btn-block btn-lg btn-primary b-rad-none no-border" @click="submitForm">Submit</div>
+                            <div class="btn btn-block btn-lg btn-primary b-rad-none" @click="submitForm">Submit</div>
                         </div>
                     </div>
                 </div>
@@ -113,7 +116,7 @@
         methods: {
             submitForm(){
                 this.submit(this.route('api.packing_list.container.create.load'), 'post', this.section, true, true)
-            }
+            },
         },
         mixins: [createContainerFormValidation, componentHandler, modalFormHandler]
     }
diff --git a/resources/views/pages/containers.blade.php b/resources/views/pages/containers.blade.php
index de556fa0..1aa6244e 100644
--- a/resources/views/pages/containers.blade.php
+++ b/resources/views/pages/containers.blade.php
@@ -9,16 +9,14 @@
     </div>
 </div>
 
-<div class="row m-b-15">
+<div class="row m-b-15" v-show="!$store.getters.isShowing('createContainerFormSection')">
     <div class="col">
-        <div data-type="createContainer" class="btn btn-sm btn-primary all-caps b-rad-none pointer requestModal m-l-5 rounded btn-lg"><i class="fa fa-plus m-r-10"></i>Add Container</div>
-        <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="stick-up" type="createContainer" size="large">
-            <create-load-container-form-component :section="'containerListSection'"></create-load-container-form-component>
-        </modal-component>
+        <div data-type="createContainer" class="btn btn-sm btn-primary all-caps b-rad-none pointer m-l-5 rounded btn-lg" @click="$store.dispatch('toggleSection', {name: 'createContainerFormSection', status: true})"><i class="fa fa-plus m-r-10"></i>Add Container</div>
     </div>
 </div>
 
-<list-component section="containerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'with_packing_lists': true, order_by: {column: 'created_at', DESC: true}}">
+<create-load-container-form-component :section="'containerListSection'" v-show="$store.getters.isShowing('createContainerFormSection')"></create-load-container-form-component>
+<list-component section="containerListSection" :endpoint="route('api.packing_list.container.list')" :options="{'per_page': 5, 'with_packing_lists': true, order_by: {column: 'created_at', DESC: true}}" v-show="!$store.getters.isShowing('createContainerFormSection')">
     <template slot="list" slot-scope="{data}">
         <container-component :data="data"></container-component>
     </template>