Merge pull request #9 from heseya/feature/HES-2654

feat: restored shipping number form in order view

package.json

@@ -1,6 +1,6 @@
 {
   "name": "store-admin",
-  "version": "6.0.3",
+  "version": "6.0.4",
   "private": true,
   "description": "Admin panel for Heseya Store API",
   "author": "Heseya",

src/components/modules/orders/ShippingNumberForm.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="flex-column shipping-number">
+    <span class="order-title shipping-number__title">{{ $t('shippingNumber.title') }}</span>
+    <div class="shipping-number__content">
+      <app-input
+        v-model="packageShippingNumber"
+        class="shipping-number__input"
+        :placeholder="$t('shippingNumber.templatePlaceholder')"
+      />
+      <app-button
+        type="primary"
+        size="small"
+        class="shipping-number__btn"
+        @click="setShippingNumber"
+      >
+        {{ $t('shippingNumber.save') }}
+      </app-button>
+    </div>
+  </div>
+</template>
+
+<i18n lang="json">
+{
+  "pl": {
+    "shippingNumber": {
+      "title": "Numer listu przewozowego",
+      "templatePlaceholder": "-- Wpisz numer przesyłki --",
+      "save": "Zapisz",
+      "sameAsBefore": "Podany numer przesyłki nie różni się od obecnego",
+      "changed": "Numer przesyłki został zmieniony",
+      "cantChange": "Nie można zmienić numeru przesyłki"
+    }
+  },
+  "en": {
+    "shippingNumber": {
+      "title": "Shipping number",
+      "templatePlaceholder": "-- Enter shipping number --",
+      "save": "Save",
+      "sameAsBefore": "Given shipping number doesn't differ from the present one",
+      "changed": "Shipping number was changed",
+      "cantChange": "Can't change shipping number"
+    }
+  }
+}
+</i18n>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  props: {
+    shippingNumber: {
+      type: String,
+      default: null,
+    },
+    orderId: {
+      type: String,
+      required: true,
+    },
+  },
+
+  emits: ['set'],
+
+  data: () => ({
+    packageShippingNumber: undefined as string | undefined,
+  }),
+
+  watch: {
+    shippingNumber() {
+      this.packageShippingNumber = this.shippingNumber || ''
+    },
+  },
+
+  mounted() {
+    this.packageShippingNumber = this.shippingNumber || ''
+  },
+
+  methods: {
+    async setShippingNumber() {
+      if (typeof this.packageShippingNumber === 'undefined') return
+      if (!this.packageShippingNumber.trim().length) return
+      if (this.packageShippingNumber.trim() === this.shippingNumber) {
+        this.$toast.warning(this.$t('shippingNumber.sameAsBefore') as string)
+        return
+      }
+      this.$accessor.startLoading()
+      const res = this.$accessor.orders.update({
+        id: this.orderId,
+        item: { shipping_number: this.packageShippingNumber },
+      })
+      this.$emit('set', this.packageShippingNumber)
+
+      if (Boolean(res)) {
+        this.$toast.success(this.$t('shippingNumber.changed') as string)
+      } else {
+        this.$toast.error(this.$t('shippingNumber.cantChange') as string)
+      }
+
+      this.$accessor.stopLoading()
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.shipping-number {
+  &__title {
+    margin-bottom: 8px;
+  }
+
+  &__btn {
+    margin: 8px 0 0;
+
+    @media ($viewport-10) {
+      margin-top: 0;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+
+    @media ($viewport-8) {
+      flex-direction: row;
+
+      > *:first-child {
+        margin-right: 8px;
+      }
+    }
+  }
+
+  &__input {
+    margin-bottom: 0;
+  }
+}
+</style>

src/views/orders/view.vue

@@ -37,8 +37,15 @@
       <card class="order-page__address">
         <CustomerDetails :order="order" />
       </card>
+      <card v-if="order.id && order.shipping_method" class="order-page__shipping">
+        <ShippingNumberForm
+          :order-id="order.id"
+          :shipping-number="order.shipping_number || undefined"
+          @set="onShippingNumberChange"
+        />
+      </card>
       <card class="order-page__documents">
-        <order-documents v-if="order.id" :order-id="order.id" :documents="order.documents" />
+        <OrderDocuments v-if="order.id" :order-id="order.id" :documents="order.documents" />
       </card>
     </main>
   </div>
@@ -64,6 +71,7 @@ import { Order } from '@heseya/store-core'
 import TopNav from '@/components/layout/TopNav.vue'
 import Card from '@/components/layout/Card.vue'
 import NextPrevButtons from '@/components/modules/orders/NextPrevButtons.vue'
+import ShippingNumberForm from '@/components/modules/orders/ShippingNumberForm.vue'
 import OrderSummary from '@/components/modules/orders/Summary.vue'
 import StatusInput from '@/components/modules/orders/StatusInput.vue'
 
@@ -83,6 +91,7 @@ export default defineComponent({
     TopNav,
     Card,
     NextPrevButtons,
+    ShippingNumberForm,
     OrderSummary,
     StatusInput,
     CustomerDetails,
@@ -124,6 +133,11 @@ export default defineComponent({
     ])
     this.isLoading = false
   },
+  methods: {
+    onShippingNumberChange(shippingNumber: string) {
+      this.order.shipping_number = shippingNumber
+    },
+  },
 })
 </script>