stash

web/src/store.js

@@ -460,6 +460,12 @@ const store = createStore({
             if (data && success) {
                 commit('setShippingCodes', data);
             }
+        },
+        async createShippingCode({commit, state}, code) {
+            const {data, success} = await http.post('/2/shipping_codes/', {code}, state.user.token);
+            if (data && success) {
+                commit('setShippingCodes', data);
+            }
         }
     },
     plugins: [

web/src/views/admin/Shipping.vue

@@ -1,4 +1,6 @@
 <template>
+    <div>
+        <h3>Shipping Codes</h3>
         <Table
             :columns="['type', 'code']"
             :items="shippingCodes"
@@ -17,6 +19,30 @@
                 </div>
             </template>
         </Table>
+        <div class="mt-3">
+            <textarea class="form-control mb-3" rows="5" placeholder="Shipping Code List" v-model="bulk_codes" v-if="bulk"></textarea>
+            <div class="input-group">
+                <input type="text" class="form-control" placeholder="Shipping Code" v-model="code" v-if="!bulk">
+                <select class="form-control" v-model="type">
+                    <option value="2kg-eu">2kg DE</option>
+                    <option value="2kg-uk">2kg EU</option>
+                    <option value="2kg-us">5kg DE</option>
+                    <option value="2kg-us">5kg EU</option>
+                    <option value="2kg-us">10kg DE</option>
+                </select>
+                <div class="input-group-prepend">
+                    <div class="input-group-text">
+                        <input type="checkbox" v-model="bulk" class="mr-2" id="bulk" style="margin: 0;">
+                        <label for="bulk" style="margin: 0;">Bulk</label>
+                    </div>
+                </div>
+                <button class="btn btn-primary form-control" @click="createSingleOrBulkShippingCode">
+                    <font-awesome-icon icon="plus"/>
+                    {{ (bulk ? "Add Shipping Codes" : "Add Shipping Code") }}
+                </button>
+            </div>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -26,8 +52,29 @@ import Table from '@/components/Table';
 export default {
     name: 'Shipping',
     components: {Table},
+    data() {
+        return {
+            code: '',
+            bulk_codes: '',
+            type: '2kg-eu',
+            bulk: false,
+        };
+    },
     computed: mapState(['shippingCodes']),
-    methods: mapActions(['fetchShippingCodes']),
+    methods: {
+        ...mapActions(['fetchShippingCodes', 'createShippingCode']),
+        createSingleOrBulkShippingCode() {
+            if (this.bulk) {
+                this.bulk_codes.split('\n').forEach(code => {
+                    this.createShippingCode({code: code.trim(), type: this.type});
+                });
+                this.bulk_codes = '';
+            } else {
+                this.createShippingCode({code: this.code, type: this.type});
+                this.code = '';
+            }
+        },
+    },
     mounted() {
         this.fetchShippingCodes();
     },