fixed #417

src/components/Template/SideBar/UserPanelSideBar.vue

@@ -114,6 +114,12 @@ export default {
               show: true,
               active: false
             },
+            {
+              title: 'سفارش های من',
+              routeName: 'UserPanel.MyOrders.List',
+              show: true,
+              active: false
+            },
             {
               title: 'تاریخچه اتصال به درگاه بانک',
               routeName: 'UserPanel.Payment.TransactionList',

src/components/Widgets/Store/Basket/AdminStoreBasketShow/AdminStoreBasketShow.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="AdminDiscountShow"
+  <div class="AdminStoreBasketShow"
        :style="localOptions.style">
     <div class="flex justify-end">
       <q-btn flat
@@ -272,7 +272,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.AdminDiscountShow {
+.AdminStoreBasketShow {
   .title {
     font-style: normal;
     font-weight: 700;

src/components/Widgets/Store/Basket/UserStoreBasketList/OptionPanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      ...
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: {
+    OptionPanelTabs
+  },
+  mixins: [mixinOptionPanel]
+})
+</script>

src/components/Widgets/Store/Basket/UserStoreBasketList/UserStoreBasketList.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="UserStoreBasketList"
+       :style="localOptions.style">
+    <entity-index v-if="mounted"
+                  v-model:value="inputs"
+                  title="لیست سفارشات"
+                  :api="api"
+                  :table="table"
+                  :table-keys="tableKeys"
+                  :create-route-name="createRouteName"
+                  :show-search-button="false"
+                  :show-expand-button="false"
+                  :show-reload-button="false">
+      <template #entity-index-table-cell="{inputData}">
+        <template v-if="inputData.col.name === 'number'">
+          {{ inputData.rowNumber }}
+        </template>
+        <template v-else-if="inputData.col.name === 'thumbnail'">
+          <q-img :src="inputData.col.value"
+                 width="100px" />
+        </template>
+        <template v-else-if="inputData.col.name === 'action'">
+          <q-btn color="primary"
+                 :to="{name: 'UserPanel.MyOrders.Show', params: {id: inputData.props.row.id}}">
+            جزییات
+          </q-btn>
+        </template>
+        <template v-else>
+          {{ inputData.col.value }}
+        </template>
+      </template>
+    </entity-index>
+  </div>
+</template>
+
+<script>
+import { EntityIndex } from 'quasar-crud'
+import { Basket } from 'src/models/Basket.js'
+import { mixinWidget } from 'src/mixin/Mixins.js'
+import { APIGateway } from 'src/api/APIGateway.js'
+import Assist from 'assets/js/Assist'
+
+export default {
+  name: 'UserStoreBasketList',
+  components: { EntityIndex },
+  mixins: [mixinWidget],
+  props: {
+    showBackBtn: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data () {
+    return {
+      api: APIGateway.basket.APIAdresses.listOrders,
+      tableKeys: {
+        data: 'results',
+        total: 'count',
+        currentPage: 'current',
+        perPage: 'per_page',
+        pageKey: 'page'
+      },
+      inputs: [],
+      table: {
+        columns: [
+          {
+            name: 'number',
+            required: true,
+            label: 'شماره',
+            align: 'left',
+            field: () => ''
+          },
+          {
+            name: 'id',
+            required: true,
+            label: 'شناسه',
+            align: 'left',
+            field: row => row.id
+          },
+          {
+            name: 'owner_info',
+            required: true,
+            label: 'نام خریدار',
+            align: 'left',
+            field: row => row.owner_info?.firstname + ' ' + row.owner_info?.lastname
+          },
+          {
+            name: 'items_info_length',
+            required: true,
+            label: 'تعداد اقلام',
+            align: 'left',
+            field: row => row.items_info.length
+          },
+          {
+            name: 'order_type',
+            required: true,
+            label: 'نوع سفارش',
+            align: 'left',
+            field: () => '-'
+          },
+          {
+            name: 'overall_order_price',
+            required: true,
+            label: 'قیمت کل(تومان)',
+            align: 'left',
+            field: row => parseInt(row.overall_order_price).toLocaleString('fa')
+          },
+          {
+            name: 'status',
+            required: true,
+            label: 'وضعیت',
+            align: 'left',
+            field: row => (new Basket(row)).status_info.label
+          },
+          {
+            name: 'creation_time',
+            required: true,
+            label: 'تاریخ ثبت',
+            align: 'left',
+            field: row => Assist.miladiToShamsi(row.creation_time)
+          },
+          {
+            name: 'action',
+            required: true,
+            label: 'جزییات',
+            align: 'left',
+            field: row => ''
+          }
+        ]
+      },
+      mounted: false,
+      createRouteName: ''
+    }
+  },
+  mounted() {
+    this.mounted = true
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.UserStoreBasketList {
+  .more-action {
+    display: flex;
+    flex-flow: row;
+    justify-content: flex-end;
+    margin-bottom: 10px;
+  }
+}
+</style>

src/components/Widgets/Store/Basket/UserStoreBasketShow/OptionPanel.vue

@@ -0,0 +1,21 @@
+<template>
+  <option-panel-tabs v-model:options="localOptions">
+    <template #main-tab>
+      ...
+    </template>
+  </option-panel-tabs>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+import { mixinOptionPanel } from 'quasar-ui-q-page-builder'
+import OptionPanelTabs from 'quasar-ui-q-page-builder/src/components/OptionPanelComponents/OptionPanelTabs.vue'
+
+export default defineComponent({
+  name: 'OptionPanel',
+  components: {
+    OptionPanelTabs
+  },
+  mixins: [mixinOptionPanel]
+})
+</script>

src/components/Widgets/Store/Basket/UserStoreBasketShow/UserStoreBasketShow.vue

@@ -0,0 +1,282 @@
+<template>
+  <div class="UserStoreBasketShow"
+       :style="localOptions.style">
+    <div class="flex justify-end">
+      <q-btn flat
+             color="grey"
+             @click="$router.go(-1)">
+        بازگشت
+        >
+      </q-btn>
+    </div>
+    <entity-show v-if="mounted"
+                 ref="entityShow"
+                 v-model:value="inputs"
+                 title="جزییات صورتحساب"
+                 :api="api"
+                 :entity-id-key="entityIdKey"
+                 :entity-param-key="entityParamKey"
+                 :show-close-button="false"
+                 :show-edit-button="false"
+                 :show-expand-button="false"
+                 :show-reload-button="false"
+                 :show-index-button="false"
+                 :after-load-input-data="afterLoadInputData">
+      <template #before-form-builder>
+        <div class="basket-form-header row">
+          <div class="col-md-4 col-12 flex justify-start items-center">
+            <q-icon name="shopping_cart" />
+            شناسه:
+            {{ basket.id }}
+          </div>
+          <div class="col-md-8 col-12">
+            <span class="text-info">
+              {{ basket.status_info.label }}
+            </span>
+            <q-linear-progress :value="basketStatusProgress"
+                               color="info"
+                               size="16px"
+                               rounded
+                               class="q-mt-سپ" />
+          </div>
+        </div>
+      </template>
+    </entity-show>
+
+    <div class="q-mt-md">
+      <entity-index v-if="basket.id"
+                    v-model:value="tableInputs"
+                    title="لیست محصولات سفارش"
+                    :table="table"
+                    :loaded-data="basket"
+                    :table-keys="tableKeys"
+                    :show-search-button="false"
+                    :show-expand-button="false"
+                    :show-reload-button="false">
+        <template #entity-index-table-cell="{inputData}">
+          <template v-if="inputData.col.name === 'number'">
+            {{ inputData.rowNumber }}
+          </template>
+          <template v-else-if="inputData.col.name === 'thumbnail'">
+            <q-img :src="inputData.col.value"
+                   width="100px" />
+          </template>
+          <template v-else-if="inputData.col.name === 'action'">
+            <q-btn color="primary"
+                   outline
+                   :to="{name: inputData.props.row.product ? 'Public.Product' : 'Public.Package', params: {id: inputData.props.row.product || inputData.props.row.package}}">
+              <q-icon name="visibility"
+                      class="q-mr-sm" />
+              مشاهده
+            </q-btn>
+          </template>
+          <template v-else>
+            {{ inputData.col.value }}
+          </template>
+        </template>
+      </entity-index>
+    </div>
+  </div>
+</template>
+
+<script>
+import { Package } from 'src/models/Package'
+import { Basket } from 'src/models/Basket.js'
+import { Product } from 'src/models/Product.js'
+import { mixinWidget } from 'src/mixin/Mixins.js'
+import { APIGateway } from 'src/api/APIGateway.js'
+import { EntityShow, EntityIndex } from 'quasar-crud'
+import { FormBuilderAssist } from 'quasar-form-builder'
+
+export default {
+  name: 'AdminStoreBasketShow',
+  components: {
+    EntityShow,
+    EntityIndex
+  },
+  mixins: [mixinWidget],
+  data () {
+    return {
+      mounted: false,
+      entityLoading: false,
+      api: APIGateway.basket.APIAdresses.byId(this.$route.params.id),
+      entityIdKey: 'id',
+      entityParamKey: 'id',
+      indexRouteName: 'UserPanel.MyOrders.List',
+      inputs: [],
+
+      tableKeys: {
+        data: 'items_info.list',
+        total: 'count',
+        currentPage: 'current',
+        perPage: 'per_page',
+        pageKey: 'page'
+      },
+      tableInputs: [],
+      table: {
+        columns: [
+          {
+            name: 'number',
+            required: true,
+            label: 'شماره',
+            align: 'left',
+            field: () => ''
+          },
+          {
+            name: 'id',
+            required: true,
+            label: 'شناسه',
+            align: 'left',
+            field: row => row.id
+          },
+          {
+            name: 'title',
+            required: true,
+            label: 'نام محصول',
+            align: 'left',
+            field: row => (row.product_info || row.package_info).title
+          },
+          {
+            name: 'is_package_or_product',
+            required: true,
+            label: 'نوع محصول',
+            align: 'left',
+            field: row => row.package ? 'بسته' : 'تکی'
+          },
+          {
+            name: 'content_category',
+            required: true,
+            label: 'دسته بندی اصلی',
+            align: 'left',
+            field: row => row.content_category
+          },
+          {
+            name: 'count',
+            required: true,
+            label: 'تعداد',
+            align: 'left',
+            field: row => row.count
+          },
+          {
+            name: 'is_physical_info',
+            required: true,
+            label: 'نوع جنس',
+            align: 'left',
+            field: row => row.product_info ? (new Product(row.product_info)).is_physical_info.label : (new Package(row.product_info)).is_physical_info.label
+          },
+          {
+            name: 'physical_type_info',
+            required: true,
+            label: 'نوع محصول',
+            align: 'left',
+            field: row => row.product_info ? (new Product(row.product_info)).physical_type_info.label : '-'
+          },
+          {
+            name: 'unit_price',
+            required: true,
+            label: 'قیمت',
+            align: 'left',
+            field: row => parseInt((row.product_info || row.package_info).unit_price?.toString()).toLocaleString('fa')
+          },
+          {
+            name: 'action',
+            required: true,
+            label: 'عملیات',
+            align: 'left',
+            field: row => ''
+          }
+        ]
+      },
+
+      basket: new Basket()
+    }
+  },
+  computed: {
+    basketStatusProgress () {
+      if (this.basket.status === 'OPEN') {
+        return 0.1
+      }
+      if (this.basket.status === 'CANCELED') {
+        return 0
+      }
+      if (this.basket.status === 'PAID') {
+        return 0.5
+      }
+      if (this.basket.status === 'CLOSED') {
+        return 1
+      }
+      if (this.basket.status === 'SENT') {
+        return 1
+      }
+      return 0.5
+    }
+  },
+  created() {
+    this.inputs = [
+      { type: 'separator', name: 'space1', label: 'مشخصات سفارش', className: 'custom-separator', col: 'col-12' },
+      { type: 'input', name: 'id', responseKey: 'id', label: 'شناسه', placeholder: ' ', disable: true, col: 'col-md-2 col-12' },
+      { type: 'input', name: 'items_info.length', responseKey: 'items_info.length', label: 'تعداد اقلام', placeholder: ' ', disable: true, col: 'col-md-2 col-12' },
+      { type: 'dateTime', name: 'creation_time', responseKey: 'creation_time', outsideLabel: 'تاریخ ثبت', placeholder: ' ', disable: true, col: 'col-md-3 col-12' },
+      { type: 'input', name: 'overall_order_price', responseKey: 'overall_order_price', label: 'قیمت کل(تومان)', placeholder: ' ', disable: true, col: 'col-md-3 col-12' }
+    ]
+  },
+  mounted() {
+    this.mounted = true
+  },
+  methods: {
+    afterLoadInputData (data) {
+      this.entityLoading = false
+      this.basket = new Basket(data)
+
+      FormBuilderAssist.setAttributeByName(this.inputs, 'overall_order_price', 'value', parseInt(data.overall_order_price).toLocaleString('fa'))
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.UserStoreBasketShow {
+  .title {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 140%;
+    color: #424242;
+    margin-bottom: 27px;
+    display: flex;
+    flex-flow: row;
+    position: relative;
+    .static-title {
+
+    }
+    .dynamic-title {
+
+    }
+    .back-action {
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+  }
+  .basket-form-header {
+    background: #FCF9F4;
+    border: 1px solid #DFE1EC;
+    margin: -16px -16px 0  -16px;
+    padding: 16px 40px;
+    .q-icon {
+      color: #AAA095;
+    }
+  }
+  :deep(.form) {
+    padding: 24px;
+  }
+  :deep(.entity-index) {
+    .entity-crud-formBuilder {
+      display: none;
+    }
+    .q-table__bottom {
+      display: none;
+    }
+  }
+}
+</style>

src/pages/User/MyOrders/List.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-page-builder v-model:sections="currenSections"
+                  v-model:options="pageConfig"
+                  :editable="pageBuilderEditable"
+                  :loading="pageBuilderLoading" />
+</template>
+
+<script>
+import { mixinPageOptions } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'Admin.Store.Basket.List',
+  mixins: [mixinPageOptions],
+  data: () => {
+    return {
+      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'UserStoreBasketList' }], options: {} }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '10px', alignment: { justifyContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignItems: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null } }, style: { maxWidth: '1200px', width: '1200px' } } }] } }]
+    }
+  },
+  created() {
+    this.currenSections = this.sections
+  }
+}
+</script>

src/pages/User/MyOrders/Show.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-page-builder v-model:sections="currenSections"
+                  v-model:options="pageConfig"
+                  :editable="pageBuilderEditable"
+                  :loading="pageBuilderLoading" />
+</template>
+
+<script>
+import { mixinPageOptions } from 'src/mixin/Mixins.js'
+
+export default {
+  name: 'Admin.Store.Basket.Show',
+  mixins: [mixinPageOptions],
+  data: () => {
+    return {
+      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'UserStoreBasketShow' }], options: {} }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '10px', alignment: { justifyContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignItems: { global: null, xl: null, lg: null, md: null, sm: null, xs: null }, alignContent: { global: null, xl: null, lg: null, md: null, sm: null, xs: null } }, style: { maxWidth: '1200px', width: '1200px' } } }] } }]
+    }
+  },
+  created() {
+    this.currenSections = this.sections
+  }
+}
+</script>

src/router/routes/UserPanel.js

@@ -328,6 +328,15 @@ export default {
         }
       }
     },
+    {
+      path: 'my-orders',
+      name: 'UserPanel.MyOrders',
+      component: () => import('layouts/bareLayout.vue'),
+      children: [
+        { path: '', name: 'UserPanel.MyOrders.List', component: () => import('src/pages/User/MyOrders/List.vue') },
+        { path: ':id', name: 'UserPanel.MyOrders.Show', component: () => import('src/pages/User/MyOrders/Show.vue') }
+      ]
+    },
     {
       path: 'payment',
       name: 'UserPanel.Payment',