Updated Warehouse

public/js/pages/WarehouseOrder/WarehouseOrder.js

@@ -16,6 +16,7 @@ Vue.component('warehouse-order-modal', {
                                sm
                                row
                                v-model="order.editor"/>
+                    <tt-input label="Externe Referenz" v-model="order.extReference" sm row/>
 
                     <hr>
                     <h4 class="text-center">Positionen</h4>
@@ -80,6 +81,7 @@ Vue.component('warehouse-order-modal', {
                 },
             },
             order:           {
+                extReference: '',
                 delAddrName:  'XINON GmbH',
                 delAddrLine:  'Fladnitz im Raabtal 150',
                 delAddrPLZ:   '8322',
@@ -92,11 +94,13 @@ Vue.component('warehouse-order-modal', {
         }
     },
     async mounted() {
-        if (this.id !== 'create') {
-            const response = await axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder/getById`, {params: {id: this.id}});
-            response.data.positions = JSON.parse(response.data.positions);
-            this.order = response.data;
-        }
+        if (this.id === 'create') return;
+
+        console.log(this.id);
+
+        const response = await axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder/getById?disableParse`, {params: {id: this.id}});
+        response.data.positions = JSON.parse(response.data.positions);
+        this.order = response.data;
     },
     methods: {
         async submit() {
@@ -112,18 +116,20 @@ Vue.component('warehouse-order-modal', {
                             positions: this.order.positions.filter(position => position.distributorId === distributorId)
                         }
                     );
-                    if (response.data.success) window.notify('success', response.data.message ?? 'Bestellung erfolgreich erstellt');
-                    else window.notify('error',
+                    if (response.data.success) {
+                        this.$emit('close');
+                        window.notify('success', response.data.message ?? 'Bestellung erfolgreich erstellt');
+                    } else window.notify('error',
                         response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message || 'Ein Fehler ist aufgetreten');
                 }
             } else {
                 const response = await axios.post(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder/update`, this.order);
-                if (response.data.success) window.notify('success', response.data.message ?? 'Bestellung erfolgreich aktualisiert');
-                else window.notify('error',
+                if (response.data.success) {
+                    this.$emit('close');
+                    window.notify('success', response.data.message ?? 'Bestellung erfolgreich aktualisiert');
+                } else window.notify('error',
                     response.data.errors ? Object.values(response.data.errors).join('<br>') : response.data.message || 'Ein Fehler ist aufgetreten');
             }
-            this.$emit('close');
-
         },
         async fetchDistributors(article) {
             const url = `${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder/getArticleDistributorData`;
@@ -148,22 +154,93 @@ Vue.component('warehouse-order-modal', {
     },
 });
 
-
-Vue.component('warehouse-order', {
+Vue.component('warehouse-order-detail', {
     //language=Vue
     template: `
                 <tt-card>
-                  <warehouse-order-modal v-if="orderModalId" :id="orderModalId" @close="orderModalId = null;$refs.table.$refs.table.refreshTable()"/>
-                  <button @click="orderModalId = 'create'" class="btn btn-primary">Bestellung erstellen</button>
-                  <tt-table-crud emit-edit @edit="orderModalId = $event.id" ref="table">
-                    <template v-slot:expandedRow="{ row }"><span>Work in Progress</span></template>
-                  </tt-table-crud>
-                </tt-card>
-              `, data() {
-        return {
-            window:       window,
-            orderModalId: null,
+                  <template v-slot:header><h4>Bestellungsdetails für #{{ loading ? 'Laden...' : order.orderNumber }}</h4></template>
 
+                  <template v-if="loading">
+                    <div class="d-flex justify-content-center align-items-center">
+                      <div class="spinner-border spinner-border-sm text-primary" role="status">
+                        <span class="sr-only">Loading...</span>
+                      </div>
+                    </div>
+                  </template>
+
+                  <template v-else>
+                    <h3>Lieferadresse</h3>
+                    <div>{{order.delAddrName}}</div>
+                    <div>{{order.delAddrEMail}}</div>
+                    <div>{{order.delAddrLine}}</div>
+                    <div>{{order.delAddrPLZ}} {{order.delAddrCity}}</div>
+                    
+                    <div style="display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;margin-top: 24px">
+                        <div><strong>Artikel</strong></div>
+                        <div><strong>Menge</strong></div>
+                        <div><strong>Preis</strong></div>
+                        <div><strong>Lieferant</strong></div>
+                        <div><strong>Verwendung</strong></div>
+                        <div><strong>Summe</strong></div>
+                    </div>
+
+                    <div style="display: grid; grid-gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;" v-for="position in order.positions">
+                        <div>{{ position.articleName }}</div>
+                        <div>{{ position.amount }}</div>
+                        <div>{{ position.buyPrice }}</div>
+                        <div>{{ position.distributorName }}</div>
+                        <div>{{ position.verwendung }}</div>
+                        <div>{{ position.amount * position.buyPrice }}</div>
+                    </div>
+                  </template>
+
+                </tt-card>
+              `,
+    props:    {
+        id: {type: [String, Number], required: true}
+    },
+    data() {
+        return {
+            window:  window,
+            order:   {},
+            loading: true
         }
     },
-})
+    async mounted() {
+        const response = await axios.get(`${window.TT_CONFIG["BASE_PATH"]}/WarehouseOrder/getById`, {params: {id: this.id}});
+        this.order = response.data;
+        this.loading = false;
+    },
+});
+
+Vue.component('warehouse-order', {
+    template: `
+                <tt-card>
+                  <warehouse-order-modal v-if="orderModalId" :id="orderModalId" @close="closeOrderModal"/>
+                  <button @click="orderModalId = 'create'" class="btn btn-primary">Bestellung erstellen</button>
+                  <tt-table-crud emit-edit @edit="orderModalId = $event.id" ref="table">
+                    <template v-slot:expandedRow="{ row }">
+                      <warehouse-order-detail :id="row['id']"/>
+                    </template>
+
+                    <template v-slot:sum="{ row }">{{ calculateSum(JSON.parse(row["positions"])).toFixed(2)}} €</template>
+<!--                    TODO: think of a way here prob we add it to the database as field-->
+                    <template v-slot:distributor="{ row }">{{ row.id % 2 == 0 ? 'Triotronik' : 'Discomp' }}</template>
+                  </tt-table-crud>
+                </tt-card>
+              `,
+    data() {
+        return {
+            orderModalId: null,
+        }
+    },
+    methods: {
+        closeOrderModal() {
+            this.orderModalId = null;
+            this.$refs.table.$refs.table.refreshTable();
+        },
+        calculateSum(positions) {
+            return positions.reduce((sum, position) => sum + position.amount * position.buyPrice, 0);
+        }
+    }
+});