ali 3 лет назад
Родитель
Сommit
e2e4ee5ea3

+ 2 - 0
src/api/APIGateway.js

@@ -5,6 +5,7 @@ import UnitAPI from 'src/api/models/Unit.js'
 import TicketAPI from 'src/api/models/Ticket.js'
 import WalletAPI from 'src/api/models/Wallet.js'
 import InvoiceAPI from 'src/api/models/Invoice.js'
+import PaymentAPI from 'src/api/models/Payment.js'
 import SessionAPI from 'src/api/models/Session.js'
 import ClassroomAPI from 'src/api/models/Classroom.js'
 import TransactionAPI from 'src/api/models/Transaction.js'
@@ -23,6 +24,7 @@ export const APIGateway = {
   ticket: new TicketAPI(),
   wallet: new WalletAPI(),
   invoice: new InvoiceAPI(),
+  payment: new PaymentAPI(),
   session: new SessionAPI(),
   classroom: new ClassroomAPI(),
   transaction: new TransactionAPI(),

+ 55 - 0
src/api/models/Payment.js

@@ -0,0 +1,55 @@
+import { appApi } from 'src/boot/axios.js'
+import APIRepository from '../classes/APIRepository.js'
+import { Payment, PaymentList } from 'src/models/Payment.js'
+
+export default class PaymentAPI extends APIRepository {
+  constructor() {
+    super('invoice', appApi)
+    this.APIAdresses = {
+      base: '/accounting/payments',
+      byId: (id) => '/accounting/payments/' + id
+    }
+    this.CacheList = {
+      base: this.name + this.APIAdresses.base
+    }
+    this.restUrl = (id) => this.APIAdresses.base + '/' + id
+    /* Setting the callback functions for the CRUD operations. */
+    this.setCrudCallbacks({
+      get: (response) => { return new Payment(response.data) },
+      post: (response) => { return new Payment(response.data) },
+      put: (response) => { return new Payment(response.data) },
+      delete: (response) => { return response.data }
+    })
+  }
+
+  index(data) {
+    return this.sendRequest({
+      apiMethod: 'get',
+      api: this.api,
+      request: this.APIAdresses.base,
+      data: this.getNormalizedSendData({
+        page: 1 // Number
+      }, data),
+      resolveCallback: (response) => {
+        const paginate = response.data
+        const results = response.data.results
+        delete paginate.results
+        return {
+          list: new PaymentList(results),
+          paginate
+          // {
+          //   "count": 1,
+          //   "num_pages": 1,
+          //   "per_page": 10,
+          //   "current": 1,
+          //   "next": null,
+          //   "previous": null,
+          // }
+        }
+      },
+      rejectCallback: (error) => {
+        return error
+      }
+    })
+  }
+}

+ 12 - 0
src/components/Control/btn.vue

@@ -1,4 +1,6 @@
 <template>
+  <div v-if="placeholder && label"
+       class="outside-label" />
   <q-btn :label="label"
          :color="color"
          :class="btnClass"
@@ -27,6 +29,10 @@ export default {
       default: '',
       type: String
     },
+    placeholder: {
+      default: '',
+      type: String
+    },
     disable: {
       default: false,
       type: Boolean
@@ -56,3 +62,9 @@ export default {
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.outside-label {
+  height: 25px;
+}
+</style>

+ 13 - 9
src/components/Template/Header/AdminPanelHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header-inside col">
     <div class="admin-top-menu">
-      <div class="logo">
+      <div class="logo gt-sm">
         <router-link :to="{name: 'Public.Home'}">
           <q-img class="logo-image"
                  src="/assets/images/admin/layout/admin-logo.png" />
@@ -9,6 +9,9 @@
       </div>
       <div class="top-menu-items">
         <div class="right-side">
+          <q-btn flat
+                 icon="menu"
+                 @click="updateLayoutLeftDrawerVisible(true)" />
           <q-btn flat
                  :to="{name: 'Public.Home'}">
             <svg xmlns="http://www.w3.org/2000/svg"
@@ -190,9 +193,6 @@ export default {
     margin-left: 78px;
   }
   @media screen and (max-width: 1023px) {
-    margin-left: 42px;
-  }
-  @media screen and (max-width: 599px) {
     margin-left: 0;
   }
 
@@ -238,6 +238,9 @@ export default {
       display: flex;
       flex-flow: row;
       justify-content: space-between;
+      @media screen and (max-width: 1023px) {
+        width: 100%;
+      }
       .q-btn {
         height: 40px;
         svg {
@@ -249,12 +252,18 @@ export default {
         flex-flow: row;
         align-items: center;
         padding-left: 50px;
+        @media screen and (max-width: 1023px) {
+          padding-left: 0;
+        }
       }
       .left-side {
         display: flex;
         flex-flow: row;
         align-items: center;
         padding-right: 50px;
+        @media screen and (max-width: 1023px) {
+          padding-right: 0;
+        }
       }
     }
     .logo {
@@ -275,11 +284,6 @@ export default {
 
 .top-menu-items {
   border-radius: 10px;
-  @media only screen and (max-width: 1439px) {
-    & {
-      display: none !important;
-    }
-  }
   @media only screen and (max-width: 500px) {
     .q-btn__content {
       margin: 4px;

+ 17 - 7
src/components/Template/Header/UserPanelHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="header-inside col">
     <div class="admin-top-menu">
-      <div class="logo">
+      <div class="logo gt-sm">
         <router-link :to="{name: 'Public.Home'}">
           <q-img class="logo-image"
                  src="/assets/images/admin/layout/admin-logo.png" />
@@ -9,6 +9,9 @@
       </div>
       <div class="top-menu-items">
         <div class="right-side">
+          <q-btn flat
+                 icon="menu"
+                 @click="updateLayoutLeftDrawerVisible(true)" />
           <q-btn flat
                  :to="{name: 'Public.Home'}">
             <svg xmlns="http://www.w3.org/2000/svg"
@@ -184,6 +187,9 @@ export default {
       width: calc( 100% - 240px );
       display: flex;
       flex-flow: row;
+      @media screen and (max-width: 1023px) {
+        width: 100%;
+      }
       justify-content: space-between;
       .q-btn {
         height: 40px;
@@ -196,12 +202,18 @@ export default {
         flex-flow: row;
         align-items: center;
         padding-left: 50px;
+        @media screen and (max-width: 1023px) {
+          padding-left: 0;
+        }
       }
       .left-side {
         display: flex;
         flex-flow: row;
         align-items: center;
         padding-right: 50px;
+        @media screen and (max-width: 1023px) {
+          padding-right: 0;
+        }
       }
     }
     .logo {
@@ -222,10 +234,8 @@ export default {
 
 .top-menu-items {
   border-radius: 10px;
-  @media only screen and (max-width: 1439px) {
-    & {
-      display: none !important;
-    }
+  @media screen and (max-width: 1023px) {
+    margin-left: 0;
   }
   @media only screen and (max-width: 500px) {
     .q-btn__content {
@@ -325,8 +335,8 @@ export default {
   display: flex;
   justify-content: flex-end;
   @media screen and (max-width: 1439px) {
-    position: absolute;
-    right: 30px;
+    //position: absolute;
+    //right: 30px;
   }
   @media screen and (max-width: 599px) {
     right: 16px;

+ 0 - 0
src/components/Widgets/Transaction/TransactionList/OptionPanel.vue → src/components/Widgets/Payment/PaymentList/OptionPanel.vue


+ 175 - 0
src/components/Widgets/Payment/PaymentList/PaymentList.vue

@@ -0,0 +1,175 @@
+<template>
+  <div class="PaymentList"
+       :style="localOptions.style">
+    <entity-index v-if="mounted"
+                  ref="entityIndex"
+                  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 === 'action'">
+          <q-btn flat
+                 color="primary"
+                 :to="{name: 'UserPanel.Invoice.Show', params: {id: inputData.props.row.id}}">
+            مشاهده جزییات
+          </q-btn>
+        </template>
+        <template v-else>
+          {{ inputData.col.value }}
+        </template>
+      </template>
+    </entity-index>
+  </div>
+</template>
+
+<script>
+import { shallowRef } from 'vue'
+import Assist from 'assets/js/Assist.js'
+import { EntityIndex } from 'quasar-crud'
+import { Invoice } from 'src/models/Invoice.js'
+import { mixinWidget } from 'src/mixin/Mixins.js'
+import { APIGateway } from 'src/api/APIGateway.js'
+import BtnControl from 'src/components/Control/btn.vue'
+
+const BtnControlComp = shallowRef(BtnControl)
+
+export default {
+  name: 'PaymentList',
+  components: { EntityIndex },
+  mixins: [mixinWidget],
+  data: () => {
+    return {
+      api: APIGateway.payment.APIAdresses.base,
+      tableKeys: {
+        data: 'results',
+        total: 'count',
+        currentPage: 'current',
+        perPage: 'per_page',
+        pageKey: 'page'
+      },
+      inputs: [
+        {
+          type: 'date',
+          name: 'creation_time',
+          label: 'از تاریخ',
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
+        },
+        {
+          type: 'date',
+          name: 'creation_time',
+          label: 'تا تاریخ',
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
+        },
+        { type: 'select', name: 'category', options: [], label: 'نوع تراکنش', placeholder: ' ', col: 'col-md-2 col-12' },
+        { type: 'input', name: 'category', label: 'عنوان تراکنش', placeholder: ' ', col: 'col-md-2 col-12' },
+        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'جستجو', placeholder: ' ', atClick: () => {}, col: 'col-md-2 col-12' }
+      ],
+      table: {
+        columns: [
+          {
+            name: 'id',
+            required: true,
+            label: 'شناسه',
+            align: 'left',
+            field: row => row.id
+          },
+          {
+            name: 'invoice_info.title',
+            required: true,
+            label: 'عنوان',
+            align: 'left',
+            field: row => row.invoice_info?.title
+          },
+          {
+            name: 'type',
+            required: true,
+            label: 'نوع تراکنش',
+            align: 'left',
+            field: row => (row.type === 'WITHDRAW') ? 'برداشت' : 'واریز'
+          },
+          {
+            name: 'invoice_info.status',
+            required: true,
+            label: 'وضعیت',
+            align: 'left',
+            field: row => (new Invoice(row.invoice_info)).status_info.label
+          },
+          {
+            name: 'amount',
+            required: true,
+            label: 'مبلغ تراکنش (تومان)',
+            align: 'left',
+            field: row => row.amount.toLocaleString('fa')
+          },
+          {
+            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.setActionBtn()
+    this.mounted = true
+  },
+  methods: {
+    setActionBtn () {
+      this.inputs.forEach((item, index) => {
+        if (item.name === 'btn') {
+          this.inputs[index].atClick = this.search
+        }
+      })
+    },
+    search () {
+      this.$refs.entityIndex.search()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.PaymentList {
+  .title {
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 140%;
+    color: #424242;
+    margin-bottom: 27px;
+  }
+  :deep(.list) {
+    .quasar-crud-index-table {
+      padding: 0;
+      .q-table__container {
+        background-color: transparent;
+        box-shadow: none;
+        border: none;
+        .q-table__top {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>

+ 0 - 146
src/components/Widgets/Transaction/TransactionList/TransactionList.vue

@@ -1,146 +0,0 @@
-<template>
-  <div class="TransactionList"
-       :style="localOptions.style">
-    <div class="title">
-      لیست تراکنش ها
-    </div>
-    <q-card class="list"
-            flat>
-      <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"
-                    :default-layout="false">
-        <template #entity-index-table-cell="{inputData}">
-          <template v-if="inputData.col.name === 'action'">
-            <q-btn flat
-                   color="primary"
-                   :to="{name: 'UserPanel.Invoice.Show', params: {id: inputData.props.row.id}}">
-              مشاهده جزییات
-            </q-btn>
-          </template>
-          <template v-else>
-            {{ inputData.col.value }}
-          </template>
-        </template>
-      </entity-index>
-    </q-card>
-  </div>
-</template>
-
-<script>
-import Assist from 'assets/js/Assist.js'
-import { EntityIndex } from 'quasar-crud'
-import { Invoice } from 'src/models/Invoice.js'
-import { mixinWidget } from 'src/mixin/Mixins.js'
-import { APIGateway } from 'src/api/APIGateway.js'
-
-export default {
-  name: 'TransactionList',
-  components: { EntityIndex },
-  mixins: [mixinWidget],
-  data: () => {
-    return {
-      api: APIGateway.invoice.APIAdresses.base,
-      tableKeys: {
-        data: 'results',
-        total: 'count',
-        currentPage: 'current',
-        perPage: 'per_page',
-        pageKey: 'page'
-      },
-      inputs: [],
-      table: {
-        columns: [
-          {
-            name: 'id',
-            required: true,
-            label: 'صورت‌حساب',
-            align: 'left',
-            field: row => row.id
-          },
-          {
-            name: 'title',
-            required: true,
-            label: 'پکیج یا خدمت',
-            align: 'left',
-            field: row => row.title
-          },
-          {
-            name: 'creation_time',
-            required: true,
-            label: 'تاریخ صورت‌حساب',
-            align: 'left',
-            field: row => Assist.miladiToShamsi(row.creation_time)
-          },
-          {
-            name: 'creation_time',
-            required: true,
-            label: 'تاریخ سررسید',
-            align: 'left',
-            field: row => Assist.miladiToShamsi(row.creation_time)
-          },
-          {
-            name: 'amount',
-            required: true,
-            label: 'کل',
-            align: 'left',
-            field: row => row.amount.toLocaleString('fa')
-          },
-          {
-            name: 'status',
-            required: true,
-            label: 'وضعیت',
-            align: 'left',
-            field: row => (new Invoice(row)).status_info.label
-          },
-          {
-            name: 'action',
-            required: true,
-            label: 'جزییات',
-            align: 'left',
-            field: row => ''
-          }
-        ]
-      },
-      mounted: false,
-      createRouteName: ''
-    }
-  },
-  mounted() {
-    this.mounted = true
-  }
-}
-</script>
-
-<style scoped lang="scss">
-.TransactionList {
-  .title {
-    font-style: normal;
-    font-weight: 700;
-    font-size: 24px;
-    line-height: 140%;
-    color: #424242;
-    margin-bottom: 27px;
-  }
-  :deep(.list) {
-    .quasar-crud-index-table {
-      padding: 0;
-      .q-table__container {
-        background-color: transparent;
-        box-shadow: none;
-        border: none;
-        .q-table__top {
-          display: none;
-        }
-      }
-    }
-  }
-}
-</style>

+ 8 - 0
src/css/Theme/quasar-crud/EntityIndex.scss

@@ -0,0 +1,8 @@
+.entity-index {
+  .q-card {
+    border-radius: 8px;
+    .entity-crud-formBuilder {
+      margin-bottom: 11px;
+    }
+  }
+}

+ 0 - 24
src/css/Theme/quasar-crud/dateTimeInput.scss

@@ -12,30 +12,6 @@
         padding-right: 12px;
         height: 48px;
       }
-      &:first-child {
-        .q-field__control {
-          border-top-right-radius: 0;
-          border-bottom-right-radius: 0;
-          border-right: none;
-          &:before {
-            border-top-right-radius: 0;
-            border-bottom-right-radius: 0;
-            border-right: none;
-          }
-        }
-      }
-      &:nth-child(2) {
-        .q-field__control {
-          border-top-left-radius: 0;
-          border-bottom-left-radius: 0;
-          border-left: none;
-          &:before {
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-            border-left: none;
-          }
-        }
-      }
     }
   }
 }

+ 4 - 4
src/css/Theme/quasar-crud/input.scss

@@ -2,12 +2,16 @@
   .q-field__inner {
     .q-field__control {
       height: 48px;
+      min-height: 48px;
       &:before {
         background: #FFFFFF 0 0 no-repeat padding-box;
         border: 1px solid #DFE1EC;
         border-radius: 8px;
       }
       .q-field__control-container {
+        input.q-field__native {
+          padding: 6px 23px;
+        }
         .q-field__label {
           font-size: 15px;
           letter-spacing: 0;
@@ -15,10 +19,6 @@
           margin-left: 23px;
           top: 14px;
         }
-        input {
-          padding-left: 23px;
-          padding-right: 23px;
-        }
       }
     }
   }

+ 1 - 0
src/css/Theme/quasar-crud/quasar-crud.scss

@@ -16,3 +16,4 @@
 @import 'select';
 @import 'dateTimeInput';
 @import 'tiptapEditor';
+@import 'EntityIndex';

+ 11 - 0
src/css/Theme/quasar-crud/select.scss

@@ -1,5 +1,16 @@
 .form-builder-select-col {
   .q-field {
+    .q-field__inner {
+      .q-field__control {
+        .q-field__control-container {
+          padding-top: 5px;
+        }
+        .q-field__append {
+          height: 48px;
+          min-height: 48px;
+        }
+      }
+    }
     .q-field__native {
       padding-left: 23px;
     }

+ 2 - 2
src/css/Theme/theme.scss

@@ -20,8 +20,8 @@
 }
 
 .main-layout {
-  &:not(.isHomePage) > .q-layout {
-    background: #FFFFFF;
+  .q-layout {
+    background: #F9F9F9
   }
   & > .q-layout {
     background: #F5F5F5;

+ 4 - 4
src/layouts/AdminLayout.vue

@@ -71,9 +71,9 @@ export default {
 
 <style lang="scss" scoped>
 .AdminLayout {
-  padding-top: 35px;
-  padding-right: 35px;
-  padding-left: 61px;
-  padding-bottom: 35px;
+  padding: 35px 35px 35px 61px;
+  @media screen and (max-width: 1023px) {
+    padding: 15px 10px !important;
+  }
 }
 </style>

+ 4 - 4
src/layouts/UserPanelLayout.vue

@@ -71,9 +71,9 @@ export default {
 
 <style lang="scss" scoped>
 .UserPanelLayout {
-  padding-top: 35px;
-  padding-right: 35px;
-  padding-left: 61px;
-  padding-bottom: 35px;
+  padding: 35px 35px 35px 61px;
+  @media screen and (max-width: 1023px) {
+    padding: 15px 5px !important;
+  }
 }
 </style>

+ 4 - 0
src/models/Classroom.js

@@ -76,6 +76,10 @@ class Classroom extends Model {
       {
         label: 'قبل از دوره حذف و اضافه',
         value: 'BEFORE_DROP_ADD_PERIOD'
+      },
+      {
+        label: 'در دوره حذف و اضافه',
+        value: 'IN_REGISTRATION_PERIOD'
       }
     ]
 

+ 8 - 4
src/models/Invoice.js

@@ -1,11 +1,13 @@
 import { User } from 'src/models/User.js'
-import { BasketList } from 'src/models/Basket.js'
+import { Classroom } from 'src/models/Classroom.js'
 import { Model, Collection } from 'js-abstract-model'
 
 class Invoice extends Model {
   constructor (data) {
     super(data, [
       { key: 'id' },
+      { key: 'title' },
+      { key: 'wallet_inventory' },
       {
         key: 'amount',
         default: 0
@@ -18,11 +20,13 @@ class Invoice extends Model {
       { key: 'last_modification_time' },
       { key: 'is_active' },
       { key: 'is_deleted' },
-      { key: 'creator' },
+      { key: 'item_id' },
+      { key: 'item_type' }, // CLASSROOM
       {
-        key: 'products_info',
-        relatedModel: BasketList
+        key: 'item_info',
+        relatedModel: Classroom
       },
+      { key: 'creator' },
       {
         key: 'creator_info',
         relatedModel: User

+ 46 - 0
src/models/Payment.js

@@ -0,0 +1,46 @@
+import { User } from 'src/models/User'
+import { Invoice } from 'src/models/Invoice.js'
+import { Model, Collection } from 'js-abstract-model'
+import { Transaction } from 'src/models/Transaction.js'
+
+class Payment extends Model {
+  constructor (data) {
+    super(data, [
+      { key: 'id' },
+      { key: 'creator' },
+      {
+        key: 'creator_info',
+        relatedModel: User
+      },
+      { key: 'invoice' },
+      {
+        key: 'invoice_info',
+        relatedModel: Invoice
+      },
+      { key: 'wallet' },
+      { key: 'transaction' },
+      {
+        key: 'transaction_info',
+        relatedModel: Transaction
+      },
+      { key: 'amount' },
+      { key: 'description' },
+      { key: 'type' }, // WITHDRAW - ...
+      {
+        key: 'additional_data',
+        default: []
+      },
+      { key: 'creation_time' },
+      { key: 'last_modification_time' },
+      { key: 'is_active' },
+      { key: 'is_deleted' }
+    ])
+  }
+}
+
+class PaymentList extends Collection {
+  model () {
+    return Payment
+  }
+}
+export { Payment, PaymentList }

+ 12 - 3
src/models/Transaction.js

@@ -1,5 +1,6 @@
-import { Model, Collection } from 'js-abstract-model'
 import { User } from 'src/models/User'
+import { Invoice } from 'src/models/Invoice.js'
+import { Model, Collection } from 'js-abstract-model'
 
 class Transaction extends Model {
   constructor (data) {
@@ -7,8 +8,11 @@ class Transaction extends Model {
       { key: 'id' },
       { key: 'is_active' },
       { key: 'is_deleted' },
-      { key: 'inventory' },
+      { key: 'amount' },
+      { key: 'authority_code' },
+      { key: 'reference_code' },
       { key: 'description' },
+      { key: 'status' }, // IN_PROGRESS
       {
         key: 'additional_data',
         default: []
@@ -22,8 +26,13 @@ class Transaction extends Model {
       },
       { key: 'owner' },
       {
-        key: 'owner',
+        key: 'owner_info',
         relatedModel: User
+      },
+      { key: 'invoice' },
+      {
+        key: 'invoice_info',
+        relatedModel: Invoice
       }
     ])
   }

+ 122 - 91
src/pages/Admin/Classroom/create.vue

@@ -2,6 +2,7 @@
   <div class="AdminClassroomCreate">
     <entity-create v-if="mounted"
                    ref="classroomEntityCreate"
+                   :key="classroomEntityCreateKey"
                    v-model:value="inputs"
                    title="مشخصات دوره آموزشی"
                    :api="api"
@@ -37,6 +38,7 @@ export default {
   data () {
     return {
       mounted: false,
+      classroomEntityCreateKey: Date.now(),
       newUnitLoading: false,
       newUnitName: null,
       newUnitSessionCount: null,
@@ -45,87 +47,94 @@ export default {
       entityParamKey: 'id',
       showRouteName: 'Admin.Classroom.Show',
       inputs: [
-        { type: 'file', name: 'thumbnail', responseKey: 'thumbnail', label: 'آپلود عکس دوره', col: 'col-md-3' },
-        { type: 'input', name: 'title', responseKey: 'title', label: 'نام دوره', col: 'col-md-12' },
+        { type: 'separator', name: 'space', label: 'مشخصات دوره', className: 'custom-separator', col: 'col-12' },
+        { type: 'file', name: 'thumbnail', responseKey: 'thumbnail', label: 'آپلود عکس دوره', col: 'col-md-3 col-12' },
+        { type: 'separator', name: 'space', size: '0', col: 'col-md-12' },
+        { type: 'select', name: 'category', responseKey: 'unit_info.category', options: [], value: null, placeholder: ' ', label: 'دسته بندی', col: 'col-md-3 col-12' },
+        { type: 'select', name: 'unit', responseKey: 'unit', options: [], value: null, placeholder: ' ', label: 'درس', col: 'col-md-3 col-12' },
+        { type: 'select', name: 'holding_type', responseKey: 'holding_type', options: Enums.classroomHoldingTypes, value: null, placeholder: ' ', label: 'نوع برگزاری', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'price', responseKey: 'price', placeholder: ' ', label: 'هزینه برگزاری', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'live_streaming_url', responseKey: 'live_streaming_url', placeholder: ' ', label: 'لینک مکان مجازی دوره', col: 'col-12' },
+        { type: 'inputEditor', name: 'classroom_address', responseKey: 'classroom_address', placeholder: ' ', label: 'آدرس مکان فیزیکی دوره', col: 'col-12' },
         {
           type: 'select',
-          name: 'category',
-          responseKey: 'category',
-          options: [],
+          name: 'holding_year',
+          responseKey: 'holding_year',
+          options: [1402, 1403, 1404, 1405, 1406, 1407, 1408, 1409, 1410],
           value: null,
-          label: 'دسته بندی',
+          label: 'انتخاب سال دوره',
+          placeholder: ' ',
           col: 'col-md-3'
         },
         {
           type: 'select',
-          name: 'unit',
-          responseKey: 'unit',
-          options: [],
+          name: 'holding_month',
+          responseKey: 'holding_month',
+          options: [
+            'فروردین',
+            'اردیبهشت',
+            'خرداد',
+            'تیر',
+            'مرداد',
+            'شهریور',
+            'مهر',
+            'آبان',
+            'آذر',
+            'دی',
+            'بهمن',
+            'اسفند'
+          ],
           value: null,
-          label: 'درس',
+          label: 'انتخاب ماه دوره',
+          placeholder: ' ',
           col: 'col-md-3'
         },
-        {
-          type: 'select',
-          name: 'audience_gender_type',
-          responseKey: 'audience_gender_type',
-          options: Enums.genders,
-          value: null,
-          label: 'جنسیت',
-          col: 'col-md-3'
-        },
-        {
-          type: 'select',
-          name: 'audience_role',
-          responseKey: 'audience_role',
-          options: Enums.groups,
-          value: null,
-          label: 'نقش',
-          col: 'col-md-3'
-        },
-        {
-          type: 'select',
-          name: 'category',
-          responseKey: 'category',
-          options: [],
-          value: null,
-          label: 'مجموعه',
-          col: 'col-md-3'
-        },
-        {
-          type: 'select',
-          name: 'professor',
-          responseKey: 'professor',
-          options: [],
-          value: null,
-          label: 'استاد دوره',
-          col: 'col-md-3'
-        },
-        { type: 'input', name: 'price', responseKey: 'price', label: 'هزینه برگزاری', col: 'col-md-3' },
-        { type: 'input', name: 'capacity', responseKey: 'capacity', label: 'ظرفیت گروه درسی', col: 'col-md-3' },
-        { type: 'input', name: 'allowed_absence_count', responseKey: 'allowed_absence_count', label: 'تعداد مجاز غیبت', col: 'col-md-3' },
-        { type: 'input', name: 'effective_absence_coefficient', responseKey: 'effective_absence_coefficient', label: 'ضریب نمره حضور و غیاب', col: 'col-md-3' },
-        { type: 'input', name: 'mandatory_assignment_count', responseKey: 'mandatory_assignment_count', label: 'تعداد تکالیف اجباری', col: 'col-md-3' },
-        { type: 'input', name: 'maximum_failing_mark', responseKey: 'maximum_failing_mark', label: 'حداقل نمره قبولی', col: 'col-md-3' },
-        { type: 'input', name: 'minimum_conditional_passing_mark', responseKey: 'minimum_conditional_passing_mark', label: 'حداقل نمره عدم مردودی', col: 'col-md-3' },
-        { type: 'input', name: 'minimum_clean_passing_mark', responseKey: 'minimum_clean_passing_mark', label: 'حداقل نمره قبولی مشروط', col: 'col-md-3' },
-        {
-          type: 'select',
-          name: 'holding_type',
-          responseKey: 'holding_type',
-          options: Enums.classroomHoldingTypes,
-          value: null,
-          label: 'نوع برگزاری',
-          col: 'col-md-3'
-        },
-        { type: 'input', name: 'live_streaming_url', responseKey: 'live_streaming_url', label: 'لینک مکان برگزاری', col: 'col-md-12' },
-        { type: 'inputEditor', name: 'classroom_address', responseKey: 'classroom_address', label: 'آدرس مکان برگزاری', col: 'col-md-12' },
-        { type: 'dateTime', name: 'beginning_enrollment_period', responseKey: 'beginning_enrollment_period', label: 'تاریخ شروع پیش ثبت نام', col: 'col-md-6' },
-        { type: 'dateTime', name: 'ending_enrollment_period', responseKey: 'ending_enrollment_period', label: 'تاریخ پایان پیش ثبت نام', col: 'col-md-6' },
-        { type: 'dateTime', name: 'beginning_registration_period', responseKey: 'beginning_registration_period', label: 'تاریخ شروع ثبت نام', col: 'col-md-6' },
-        { type: 'dateTime', name: 'ending_registration_period', responseKey: 'ending_registration_period', label: 'تاریخ پایان ثبت نام', col: 'col-md-6' },
-        { type: 'inputEditor', name: 'rules', responseKey: 'rules', label: 'قوانین دوره آموزشی', col: 'col-md-12' },
-        { type: 'dateTime', name: 'publish_time', responseKey: 'publish_time', label: 'تاریخ انتشار', col: 'col-md-6' }
+        { type: 'input', name: 'sessions_frequency', responseKey: 'sessions_frequency', placeholder: ' ', label: 'دوره تناوب', col: 'col-12' },
+        { type: 'select', name: 'professor', responseKey: 'professor', options: [], value: null, placeholder: ' ', label: 'استاد دوره', col: 'col-md-3 col-12' },
+
+        { type: 'separator', name: 'space', label: 'مشخصات اندیشه جو', className: 'custom-separator', col: 'col-12' },
+        { type: 'select', name: 'audience_status_wwwww', responseKey: 'audience_status_wwwww', options: [], placeholder: ' ', label: 'وضعیت(؟)', col: 'col-md-3 col-12' },
+        { type: 'select', name: 'category', responseKey: 'category', options: [], placeholder: ' ', label: 'مجموعه(؟)', col: 'col-md-3 col-12' },
+        { type: 'select', name: 'audience_gender_type', responseKey: 'audience_gender_type', options: Enums.genders, placeholder: ' ', label: 'جنسیت', col: 'col-md-3 col-12' },
+        { type: 'select', name: 'audience_bashgah_wwwww', responseKey: 'audience_bashgah_wwwww', options: [], placeholder: ' ', label: 'باشگاه(؟)', col: 'col-md-3 col-12' },
+
+        { type: 'separator', name: 'space', label: 'تنظیمات دوره', className: 'custom-separator', col: 'col-12' },
+        { type: 'input', name: 'capacity', responseKey: 'capacity', placeholder: ' ', label: 'ظرفیت گروه درسی', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'allowed_absence_count', responseKey: 'allowed_absence_count', placeholder: ' ', label: 'تعداد مجاز غیبت', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'effective_absence_coefficient', responseKey: 'effective_absence_coefficient', placeholder: ' ', label: 'ضریب نمره حضور و غیاب', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'mandatory_assignment_count', responseKey: 'mandatory_assignment_count', placeholder: ' ', label: 'تعداد تکالیف اجباری', col: 'col-md-3 col-12' },
+
+        { type: 'input', name: 'maximum_failing_mark', responseKey: 'maximum_failing_mark', placeholder: ' ', label: 'حداقل نمره قبولی', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'minimum_conditional_passing_mark', responseKey: 'minimum_conditional_passing_mark', placeholder: ' ', label: 'حداقل نمره عدم مردودی', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'minimum_clean_passing_mark', responseKey: 'minimum_clean_passing_mark', placeholder: ' ', label: 'حداقل نمره قبولی مشروط', col: 'col-md-3 col-12' },
+
+        { type: 'separator', name: 'space', label: 'ثبت نام و حذف و اضافه', className: 'custom-separator', col: 'col-12' },
+        { type: 'dateTime', name: 'beginning_enrollment_period', responseKey: 'beginning_enrollment_period', placeholder: ' ', label: 'تاریخ شروع پیش ثبت نام', col: 'col-md-6 col-12' },
+        { type: 'dateTime', name: 'ending_enrollment_period', responseKey: 'ending_enrollment_period', placeholder: ' ', label: 'تاریخ پایان پیش ثبت نام', col: 'col-md-6 col-12' },
+        { type: 'dateTime', name: 'beginning_registration_period', responseKey: 'beginning_registration_period', placeholder: ' ', label: 'تاریخ شروع ثبت نام', col: 'col-md-6 col-12' },
+        { type: 'dateTime', name: 'ending_registration_period', responseKey: 'ending_registration_period', placeholder: ' ', label: 'تاریخ پایان ثبت نام', col: 'col-md-6 col-12' },
+
+        { type: 'input', name: 'registration_period_refund_percent', responseKey: 'registration_period_refund_percent', placeholder: ' ', label: 'درصد برگشت هزینه انصراف در بازه ثبت نام', col: 'col-md-3 col-12' },
+        { type: 'checkbox', name: 'allow_dropping_on_drop_add_period', responseKey: 'allow_dropping_on_drop_add_period', label: 'امکان انصراف در بازه ثبت نام', col: 'col-md-9 col-12' },
+
+        { type: 'dateTime', name: 'beginning_drop_add_period', responseKey: 'beginning_drop_add_period', placeholder: ' ', label: 'تاریخ شروع حذف و اضافه', col: 'col-md-6 col-12' },
+        { type: 'dateTime', name: 'ending_drop_add_period', responseKey: 'ending_drop_add_period', placeholder: ' ', label: 'تاریخ پایان حذف و اضافه', col: 'col-md-6 col-12' },
+
+        { type: 'input', name: 'drop_add_period_refund_percent', responseKey: 'drop_add_period_refund_percent', placeholder: ' ', label: 'درصد برگشت هزینه انصراف در بازه حذف و اضافه', col: 'col-md-3 col-12' },
+        { type: 'checkbox', name: 'allow_dropping_on_drop_add_period', responseKey: 'allow_dropping_on_drop_add_period', label: 'امکان انصراف در بازه ثبت نام', col: 'col-md-3 col-12' },
+        { type: 'checkbox', name: 'allow_dropping_on_drop_add_period', responseKey: 'allow_dropping_on_drop_add_period', label: 'امکان انصراف در بازه ثبت نام', col: 'col-md-6 col-12' },
+
+        { type: 'dateTime', name: 'publish_time', responseKey: 'publish_time', placeholder: ' ', label: 'تاریخ انتشار', col: 'col-md-6 col-12' },
+
+        { type: 'separator', name: 'space', label: 'قوانین', className: 'custom-separator', col: 'col-12' },
+        { type: 'inputEditor', name: 'rules', responseKey: 'rules', label: 'قوانین دوره آموزشی', col: 'col-12' },
+        // -----------------------------------------------------------------------------------------------------------
+
+        { type: 'separator', name: 'space', label: 'موارد زیر در طرح نبودند', className: 'custom-separator', col: 'col-12' },
+        { type: 'select', name: 'audience_role', responseKey: 'audience_role', options: Enums.groups, placeholder: ' ', label: 'نقش', col: 'col-md-4 col-12' },
+        { type: 'inputEditor', name: 'description', responseKey: 'description', label: '??توضیحات', col: 'col-12' },
+
+        { type: 'hidden', name: 'id', responseKey: 'id', label: 'id', col: 'col-md-3 col-12' }
       ]
     }
   },
@@ -142,47 +151,69 @@ export default {
   },
   mounted () {
     this.mounted = true
-    this.beforeLoadInputData()
+    this.preLoadData()
   },
   methods: {
-    async beforeLoadInputData (responseData, setNewInputData) {
-      this.getProfessors(setNewInputData)
-      await this.getCategories(setNewInputData)
-      await this.getUnits(responseData.unit_info.category, setNewInputData)
+    setInputAttr (name, attr, value) {
+      this.$refs.classroomEntityCreate.setInputAttributeByName(name, attr, value)
+    },
+    preLoadData () {
+      this.beforeLoadInputData()
+    },
+    beforeLoadInputData () {
+      const promise1 = this.getProfessors()
+      const promise2 = this.getCategories()
+      const promise3 = this.getUnits()
       this.$nextTick(() => {
-        this.setInputValue('category', responseData.unit_info.category)
-        this.setInputValue('unit', responseData.unit)
+        Promise.all([promise1, promise2, promise3])
+          .then(() => {
+            // this.setInputAttr('category', 'value', responseData.unit_info.category)
+            // this.setInputAttr('unit', 'value', responseData.unit)
+            this.classroomEntityCreateKey = Date.now()
+          })
+          .catch(() => {})
       })
     },
-    async getProfessors (setNewInputData) {
-      APIGateway.user.index({ per_page: 9999, role: 'professor' })
+    getProfessors () {
+      return APIGateway.user.index({ per_page: 9999, role: 'professor' })
         .then((users) => {
-          this.loadSelectOptions('professor', users.list.list.map(item => {
+          this.setInputAttr('professor', 'options', users.list.list.map(item => {
             return {
               value: item.id,
               label: this.getUserFullname(item)
             }
-          }), setNewInputData)
+          }))
         })
         .catch(() => {})
     },
-    getUserFullname (user) {
-      return user.firstname + ' ' + user.lastname
-    },
-    async getCategories (setNewInputData) {
-      APIGateway.unitCategory.index({ per_page: 9999 })
+    getCategories () {
+      return APIGateway.unitCategory.index({ per_page: 9999 })
         .then((categories) => {
-          this.loadSelectOptions('category', this.getSelectOptions(categories.list.list, 'id', 'title'), setNewInputData)
+          this.setInputAttr('category', 'options', categories.list.list.map(item => {
+            return {
+              value: item.id,
+              label: item.title
+            }
+          }))
         })
         .catch(() => {})
     },
-    async getUnits (selectedcategoryId, setNewInputData) {
-      APIGateway.unit.index({ per_page: 9999, category: selectedcategoryId })
+    getUnits (selectedcategoryId = null) {
+      return APIGateway.unit.index({ per_page: 9999, category: selectedcategoryId })
         .then((units) => {
-          this.loadSelectOptions('unit', this.getSelectOptions(units.list.list, 'id', 'title'), setNewInputData)
+          this.setInputAttr('unit', 'options', units.list.list.map(item => {
+            return {
+              value: item.id,
+              label: item.title
+            }
+          }))
         })
         .catch(() => {})
     },
+
+    getUserFullname (user) {
+      return user.firstname + ' ' + user.lastname
+    },
     getSelectOptions (result, value, label) {
       return result.map(item => {
         return {

+ 17 - 3
src/pages/Admin/Classroom/index.vue

@@ -18,6 +18,7 @@
       </q-btn>
     </div>
     <entity-index v-if="mounted"
+                  ref="entityIndex"
                   v-model:value="inputs"
                   title="لیست دسته بندی ها"
                   :api="api"
@@ -72,7 +73,8 @@ export default {
           options: Enums.classroomStatuses,
           value: null,
           label: 'وضعیت دوره',
-          col: 'col-md-2'
+          placeholder: ' ',
+          col: 'col-md-2 col-12'
         },
         {
           type: 'select',
@@ -80,9 +82,10 @@ export default {
           options: [],
           value: null,
           label: 'درس',
-          col: 'col-md-2'
+          placeholder: ' ',
+          col: 'col-md-2 col-12'
         },
-        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'جستجو', props: { atClick: this.search }, col: 'col-md-2' }
+        { type: BtnControlComp, name: 'btn', label: 'جستجو', placeholder: ' ', atClick: () => {}, col: 'col-md-2 col-12' }
       ],
       api: APIGateway.classroom.APIAdresses.base,
       table: {
@@ -170,10 +173,21 @@ export default {
     }
   },
   mounted () {
+    this.setActionBtn()
     this.mounted = true
     this.getUnits()
   },
   methods: {
+    setActionBtn () {
+      this.inputs.forEach((item, index) => {
+        if (item.name === 'btn') {
+          this.inputs[index].atClick = this.search
+        }
+      })
+    },
+    search () {
+      this.$refs.entityIndex.search()
+    },
     getUnits () {
       APIGateway.unit.index({ per_page: 9999 })
         .then((units) => {

+ 54 - 25
src/pages/Admin/Classroom/show.vue

@@ -25,7 +25,8 @@
                   v-model="tab"
                   animated>
       <q-tab-panel name="classroomInfo">
-        <entity-edit ref="categoryEntityEdit"
+        <entity-edit ref="classroomEntityEdit"
+                     :key="classroomEntityEditKey"
                      v-model:value="inputs"
                      title="مشخصات دوره آموزشی"
                      :api="api"
@@ -36,8 +37,7 @@
                      :show-edit-button="false"
                      :show-expand-button="false"
                      :show-save-button="false"
-                     :show-reload-button="false"
-                     :before-load-input-data="beforeLoadInputData">
+                     :show-reload-button="false">
           <template #after-form-builder>
             <div class="flex justify-end">
               <q-btn color="primary"
@@ -104,6 +104,7 @@ export default {
   data () {
     return {
       mounted: false,
+      classroomEntityEditKey: Date.now(),
       tab: 'classroomInfo',
       api: null,
       entityIdKey: 'id',
@@ -126,6 +127,7 @@ export default {
           options: [1402, 1403, 1404, 1405, 1406, 1407, 1408, 1409, 1410],
           value: null,
           label: 'انتخاب سال دوره',
+          placeholder: ' ',
           col: 'col-md-3'
         },
         {
@@ -148,6 +150,7 @@ export default {
           ],
           value: null,
           label: 'انتخاب ماه دوره',
+          placeholder: ' ',
           col: 'col-md-3'
         },
         { type: 'input', name: 'sessions_frequency', responseKey: 'sessions_frequency', placeholder: ' ', label: 'دوره تناوب', col: 'col-12' },
@@ -192,9 +195,7 @@ export default {
         // -----------------------------------------------------------------------------------------------------------
 
         { type: 'separator', name: 'space', label: 'موارد زیر در طرح نبودند', className: 'custom-separator', col: 'col-12' },
-        { type: 'input', name: 'title', responseKey: 'title', placeholder: ' ', label: '??نام دوره', col: 'col-md-4 col-12' },
         { type: 'select', name: 'audience_role', responseKey: 'audience_role', options: Enums.groups, placeholder: ' ', label: 'نقش', col: 'col-md-4 col-12' },
-        { type: 'input', name: 'unit', responseKey: 'unit', placeholder: ' ', label: '??unit', col: 'col-md-4 col-12' },
         { type: 'inputEditor', name: 'description', responseKey: 'description', label: '??توضیحات', col: 'col-12' },
 
         { type: 'hidden', name: 'id', responseKey: 'id', label: 'id', col: 'col-md-3 col-12' }
@@ -267,46 +268,74 @@ export default {
   mounted () {
     this.api = APIGateway.classroom.APIAdresses.byId(this.$route.params.id)
     this.mounted = true
+    this.preLoadData()
   },
   methods: {
-    async beforeLoadInputData (responseData, setNewInputData) {
-      this.getProfessors(setNewInputData)
-      await this.getCategories(setNewInputData)
-      await this.getUnits(responseData.unit_info.category, setNewInputData)
+    setInputAttr (name, attr, value) {
+      this.$refs.classroomEntityEdit.setInputAttributeByName(name, attr, value)
+    },
+    preLoadData () {
+      APIGateway.classroom.get(this.$route.params.id)
+        .then((classroom) => {
+          this.setInputAttr('category', 'value', classroom.unit_info.category)
+          this.setInputAttr('unit', 'value', classroom.unit)
+          this.beforeLoadInputData(classroom)
+        })
+        .catch(() => {})
+    },
+    beforeLoadInputData (responseData) {
+      const promise1 = this.getProfessors()
+      const promise2 = this.getCategories()
+      const promise3 = this.getUnits(responseData.unit_info.category)
       this.$nextTick(() => {
-        this.setInputValue('category', responseData.unit_info.category)
-        this.setInputValue('unit', responseData.unit)
+        Promise.all([promise1, promise2, promise3])
+          .then(() => {
+            // this.setInputAttr('category', 'value', responseData.unit_info.category)
+            // this.setInputAttr('unit', 'value', responseData.unit)
+            this.classroomEntityEditKey = Date.now()
+          })
+          .catch(() => {})
       })
     },
-    async getProfessors (setNewInputData) {
-      APIGateway.user.index({ per_page: 9999, role: 'professor' })
+    getProfessors () {
+      return APIGateway.user.index({ per_page: 9999, role: 'professor' })
         .then((users) => {
-          this.loadSelectOptions('professor', users.list.list.map(item => {
+          this.setInputAttr('professor', 'options', users.list.list.map(item => {
             return {
               value: item.id,
               label: this.getUserFullname(item)
             }
-          }), setNewInputData)
+          }))
         })
         .catch(() => {})
     },
-    getUserFullname (user) {
-      return user.firstname + ' ' + user.lastname
-    },
-    async getCategories (setNewInputData) {
-      APIGateway.unitCategory.index({ per_page: 9999 })
+    getCategories () {
+      return APIGateway.unitCategory.index({ per_page: 9999 })
         .then((categories) => {
-          this.loadSelectOptions('category', this.getSelectOptions(categories.list.list, 'id', 'title'), setNewInputData)
+          this.setInputAttr('category', 'options', categories.list.list.map(item => {
+            return {
+              value: item.id,
+              label: item.title
+            }
+          }))
         })
         .catch(() => {})
     },
-    async getUnits (selectedcategoryId, setNewInputData) {
-      APIGateway.unit.index({ per_page: 9999, category: selectedcategoryId })
+    getUnits (selectedcategoryId) {
+      return APIGateway.unit.index({ per_page: 9999, category: selectedcategoryId })
         .then((units) => {
-          this.loadSelectOptions('unit', this.getSelectOptions(units.list.list, 'id', 'title'), setNewInputData)
+          this.setInputAttr('unit', 'options', units.list.list.map(item => {
+            return {
+              value: item.id,
+              label: item.title
+            }
+          }))
         })
         .catch(() => {})
     },
+    getUserFullname (user) {
+      return user.firstname + ' ' + user.lastname
+    },
     getSelectOptions (result, value, label) {
       return result.map(item => {
         return {
@@ -331,7 +360,7 @@ export default {
       }
     },
     updateClassroom () {
-      this.$refs.categoryEntityEdit.editEntity()
+      this.$refs.classroomEntityEdit.editEntity()
     },
     getRemoveMessage (row) {
       return 'آیا از حذف ' + row.title + ' اطمینان دارید؟'

+ 8 - 8
src/pages/Admin/Session/show.vue

@@ -44,14 +44,14 @@ export default {
       entityParamKey: 'id',
       showRouteName: 'Admin.SessionTemplate.Show',
       inputs: [
-        { type: 'input', name: 'title', responseKey: 'title', label: 'نام جلسه', col: 'col-md-9' },
-        { type: 'separator', name: 'space', size: '0', col: 'col-md-12' },
-        { type: 'dateTime', name: 'ending_enrollment_period', responseKey: 'ending_enrollment_period', label: 'زمان شروع جلسه', col: 'col-md-6' },
-        { type: 'dateTime', name: 'ending_enrollment_period', responseKey: 'ending_enrollment_period', label: 'زمان پایان جلسه', col: 'col-md-6' },
-        { type: 'inputEditor', name: 'description', responseKey: 'description', label: 'توضیحات', col: 'col-md-6' },
-        { type: 'inputEditor', name: 'syllabus', responseKey: 'syllabus', label: 'مقرری', col: 'col-md-6' },
-        { type: 'inputEditor', name: 'assignment_description', responseKey: 'assignment_description', label: 'تکلیف جلسه', col: 'col-md-12' },
-        { type: 'hidden', name: 'id', responseKey: 'id', label: 'id', col: 'col-md-12' }
+        { type: 'input', name: 'title', responseKey: 'title', label: 'نام جلسه', placeholder: ' ', col: 'col-md-9 col-12' },
+        { type: 'separator', name: 'space', size: '0', col: 'col-12' },
+        { type: 'dateTime', name: 'ending_enrollment_period', responseKey: 'ending_enrollment_period', label: 'زمان شروع جلسه', placeholder: ' ', col: 'col-md-6 col-12' },
+        { type: 'dateTime', name: 'ending_enrollment_period', responseKey: 'ending_enrollment_period', label: 'زمان پایان جلسه', placeholder: ' ', col: 'col-md-6 col-12' },
+        { type: 'inputEditor', name: 'description', responseKey: 'description', label: 'توضیحات', placeholder: ' ', col: 'col-md-6 col-12' },
+        { type: 'inputEditor', name: 'syllabus', responseKey: 'syllabus', label: 'مقرری', placeholder: ' ', col: 'col-md-6 col-12' },
+        { type: 'inputEditor', name: 'assignment_description', responseKey: 'assignment_description', label: 'تکلیف جلسه', placeholder: ' ', col: 'col-12' },
+        { type: 'hidden', name: 'id', responseKey: 'id', label: 'id', col: 'col-12' }
       ]
     }
   },

+ 19 - 6
src/pages/Admin/User/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="AdminUserIndex">
-    <entity-index ref="entityIndex"
+    <entity-index v-if="mounted"
+                  ref="entityIndex"
                   v-model:value="inputs"
                   title="لیست کاربران"
                   :api="api"
@@ -56,12 +57,13 @@ export default {
   },
   data () {
     return {
+      mounted: false,
       inputs: [
-        { type: 'input', name: 'id', value: null, label: 'شماره', col: 'col-md-2' },
-        { type: 'input', name: 'firstname', value: null, label: 'نام', col: 'col-md-2' },
-        { type: 'input', name: 'lastname', value: null, label: 'نام خانوادگی', col: 'col-md-2' },
-        { type: 'input', name: 'national_code', value: null, label: 'کد ملی', col: 'col-md-2' },
-        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'جستجو', props: { atClick: this.search }, col: 'col-md-2' }
+        { type: 'input', name: 'id', value: null, label: 'شماره', placeholder: ' ', col: 'col-md-2' },
+        { type: 'input', name: 'firstname', value: null, label: 'نام', placeholder: ' ', col: 'col-md-2' },
+        { type: 'input', name: 'lastname', value: null, label: 'نام خانوادگی', placeholder: ' ', col: 'col-md-2' },
+        { type: 'input', name: 'national_code', value: null, label: 'کد ملی', placeholder: ' ', col: 'col-md-2' },
+        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'جستجو', placeholder: ' ', atClick: () => {}, col: 'col-md-2' }
       ],
       api: APIGateway.user.APIAdresses.base,
       table: {
@@ -127,7 +129,18 @@ export default {
       }
     }
   },
+  mounted() {
+    this.setActionBtn()
+    this.mounted = true
+  },
   methods: {
+    setActionBtn () {
+      this.inputs.forEach((item, index) => {
+        if (item.name === 'btn') {
+          this.inputs[index].atClick = this.search
+        }
+      })
+    },
     search () {
       this.$refs.entityIndex.search()
     },

+ 36 - 31
src/pages/Admin/User/show.vue

@@ -93,7 +93,7 @@ export default {
       entityParamKey: 'id',
       showRouteName: 'Admin.User.Show',
       inputs: [
-        { type: 'separator', name: 'space', label: 'نقش و وضعیت ها', col: 'col-md-12' },
+        { type: 'separator', name: 'space', label: 'نقش و وضعیت ها', className: 'custom-separator', col: 'col-12' },
         {
           type: 'select',
           name: 'roles',
@@ -101,19 +101,18 @@ export default {
           options: Enums.groups,
           multiple: true,
           label: 'نقش',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
         },
-        { type: 'separator', name: 'space', label: 'اطلاعات ضروری', col: 'col-md-12' },
-        { type: 'input', name: 'email', label: 'ایمیل', responseKey: 'email', col: 'col-md-3' },
-        { type: 'input', name: 'on_call_mobile_number', label: 'تلفن همراه', responseKey: 'on_call_mobile_number', col: 'col-md-3' },
-        { type: 'input', name: 'national_code', label: 'کدملی/کد اتباع غیر ایرانی', responseKey: 'national_code', col: 'col-md-3' },
-        { type: 'separator', name: 'space', label: 'اطلاعات پروفایل', col: 'col-md-12' },
-        { type: 'file', name: 'picture', label: 'عکس پروفایل', responseKey: 'picture', col: 'col-md-3' },
-        { type: 'separator', name: 'space', size: '0', col: 'col-md-12' },
-        { type: 'input', name: 'firstname', label: 'نام', responseKey: 'firstname', col: 'col-md-3' },
-        { type: 'input', name: 'lastname', label: 'نام خانوادگی', responseKey: 'lastname', col: 'col-md-3' },
-        { type: 'hidden', name: 'id', responseKey: 'id', label: 'id', col: 'col-md-12' },
-        { type: 'hidden', name: 'is_active', responseKey: 'is_active', label: 'is_active', col: 'col-md-12' },
+        { type: 'separator', name: 'space', placeholder: ' ', label: 'اطلاعات ضروری', className: 'custom-separator', col: 'col-12' },
+        { type: 'input', name: 'email', placeholder: ' ', label: 'ایمیل', responseKey: 'email', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'on_call_mobile_number', placeholder: ' ', label: 'تلفن همراه', responseKey: 'on_call_mobile_number', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'national_code', placeholder: ' ', label: 'کدملی/کد اتباع غیر ایرانی', responseKey: 'national_code', col: 'col-md-3 col-12' },
+        { type: 'separator', name: 'space', label: 'اطلاعات پروفایل', className: 'custom-separator', col: 'col-12' },
+        { type: 'file', name: 'picture', placeholder: ' ', label: 'عکس پروفایل', responseKey: 'picture', col: 'col-md-3 col-12' },
+        { type: 'separator', name: 'space', size: '0', col: 'col-12' },
+        { type: 'input', name: 'firstname', placeholder: ' ', label: 'نام', responseKey: 'firstname', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'lastname', placeholder: ' ', label: 'نام خانوادگی', responseKey: 'lastname', col: 'col-md-3 col-12' },
         {
           type: 'select',
           name: 'gender',
@@ -121,9 +120,10 @@ export default {
           options: Enums.genders,
           value: null,
           label: 'جنسیت',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
         },
-        { type: 'date', name: 'birthdate', label: 'تولد', responseKey: 'birthdate', col: 'col-md-3' },
+        { type: 'date', name: 'birthdate', placeholder: ' ', label: 'تولد', responseKey: 'birthdate', col: 'col-md-3 col-12' },
         {
           type: 'select',
           name: 'marital_status',
@@ -131,11 +131,12 @@ export default {
           options: Enums.maritalStatuses,
           value: null,
           label: 'وضعیت تاهل',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
         },
-        { type: 'input', name: 'on_call_mobile_number', label: 'تلفن همراه جهت تماس', responseKey: 'on_call_mobile_number', col: 'col-md-3' },
-        { type: 'input', name: 'on_social_network_mobile_number', label: 'تلفن همراه جهت شبکه های اجتماعی', responseKey: 'on_social_network_mobile_number', col: 'col-md-3' },
-        { type: 'input', name: 'phone_number', label: 'تلفن منزل', responseKey: 'phone_number', col: 'col-md-3' },
+        { type: 'input', name: 'on_call_mobile_number', placeholder: ' ', label: 'تلفن همراه جهت تماس', responseKey: 'on_call_mobile_number', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'on_social_network_mobile_number', placeholder: ' ', label: 'تلفن همراه جهت شبکه های اجتماعی', responseKey: 'on_social_network_mobile_number', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'phone_number', placeholder: ' ', label: 'تلفن منزل', responseKey: 'phone_number', col: 'col-md-3 col-12' },
         {
           type: 'select',
           name: 'last_academic_degree',
@@ -143,10 +144,11 @@ export default {
           options: Enums.academicDegree,
           value: null,
           label: 'آخرین مقطع تحصیلی',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
         },
-        { type: 'input', name: 'last_academic_degree_field', label: 'رشته تحصیلی', responseKey: 'last_academic_degree_field', col: 'col-md-3' },
-        { type: 'input', name: 'last_academy_name', label: 'نام دانشگاه یا حوزه تحصیلی', responseKey: 'last_academy_name', col: 'col-md-3' },
+        { type: 'input', name: 'last_academic_degree_field', placeholder: ' ', label: 'رشته تحصیلی', responseKey: 'last_academic_degree_field', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'last_academy_name', placeholder: ' ', label: 'نام دانشگاه یا حوزه تحصیلی', responseKey: 'last_academy_name', col: 'col-md-3 col-12' },
         {
           type: 'select',
           name: 'educational_status',
@@ -154,16 +156,19 @@ export default {
           options: Enums.educationalStatus,
           value: null,
           label: 'وضعیت تحصیلی',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-3 col-12'
         },
-        { type: 'input', name: 'birth_country', label: 'کشور محل تولد', responseKey: 'birth_country', col: 'col-md-4' },
-        { type: 'input', name: 'birth_province', label: 'استان محل تولد', responseKey: 'birth_province', col: 'col-md-4' },
-        { type: 'input', name: 'birth_city', label: 'شهر محل تولد', responseKey: 'birth_city', col: 'col-md-4' },
-        { type: 'input', name: 'living_country', label: 'کشور محل زندگی فعلی', responseKey: 'living_country', col: 'col-md-4' },
-        { type: 'input', name: 'living_province', label: 'استان محل زندگی فعلی', responseKey: 'living_province', col: 'col-md-4' },
-        { type: 'input', name: 'living_city', label: 'شهر محل زندگی فعلی', responseKey: 'living_city', col: 'col-md-4' },
-        { type: 'input', name: 'living_postal_code', label: 'کد پستی محل زندگی', responseKey: 'living_postal_code', col: 'col-md-3' },
-        { type: 'input', name: 'living_address', label: 'آدرس پستی محل زندگی', responseKey: 'living_address', col: 'col-md-6' }
+        { type: 'input', name: 'birth_country', placeholder: ' ', label: 'کشور محل تولد', responseKey: 'birth_country', col: 'col-md-4 col-12' },
+        { type: 'input', name: 'birth_province', placeholder: ' ', label: 'استان محل تولد', responseKey: 'birth_province', col: 'col-md-4 col-12' },
+        { type: 'input', name: 'birth_city', placeholder: ' ', label: 'شهر محل تولد', responseKey: 'birth_city', col: 'col-md-4 col-12' },
+        { type: 'input', name: 'living_country', placeholder: ' ', label: 'کشور محل زندگی فعلی', responseKey: 'living_country', col: 'col-md-4 col-12' },
+        { type: 'input', name: 'living_province', placeholder: ' ', label: 'استان محل زندگی فعلی', responseKey: 'living_province', col: 'col-md-4 col-12' },
+        { type: 'input', name: 'living_city', placeholder: ' ', label: 'شهر محل زندگی فعلی', responseKey: 'living_city', col: 'col-md-4 col-12' },
+        { type: 'input', name: 'living_postal_code', placeholder: ' ', label: 'کد پستی محل زندگی', responseKey: 'living_postal_code', col: 'col-md-3 col-12' },
+        { type: 'input', name: 'living_address', placeholder: ' ', label: 'آدرس پستی محل زندگی', responseKey: 'living_address', col: 'col-md-6 col-12' },
+        { type: 'hidden', name: 'id', responseKey: 'id', label: 'id', col: 'col-12' },
+        { type: 'hidden', name: 'is_active', responseKey: 'is_active', label: 'is_active', col: 'col-12' }
       ]
     }
   },

+ 16 - 5
src/pages/User/Profile/classrooms.vue

@@ -46,7 +46,8 @@ export default {
           options: Enums.classroomStatuses,
           value: null,
           label: 'وضعیت دوره',
-          col: 'col-md-2'
+          placeholder: ' ',
+          col: 'col-md-2 col-12'
         },
         {
           type: 'select',
@@ -54,7 +55,8 @@ export default {
           options: [],
           value: null,
           label: 'گروه آموزشی',
-          col: 'col-md-2'
+          placeholder: ' ',
+          col: 'col-md-2 col-12'
         },
         {
           type: 'select',
@@ -63,10 +65,11 @@ export default {
           options: [],
           value: null,
           label: 'درس',
-          col: 'col-md-2'
+          placeholder: ' ',
+          col: 'col-md-2 col-12'
         },
-        { type: 'input', name: 'search', label: 'جستجو', col: 'col-md-2' },
-        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'جستجو', props: { atClick: this.search }, col: 'col-md-2' }
+        { type: 'input', name: 'search', label: 'جستجو', placeholder: ' ', col: 'col-md-2 col-12' },
+        { type: BtnControlComp, name: 'btn', responseKey: 'btn', label: 'جستجو', placeholder: ' ', atClick: () => {}, col: 'col-md-2 col-12' }
       ],
       api: APIGateway.registration.APIAdresses.base,
       table: {
@@ -172,9 +175,17 @@ export default {
     }
   },
   created () {
+    this.setActionBtn()
     this.loadInputDataOptions()
   },
   methods: {
+    setActionBtn () {
+      this.inputs.forEach((item, index) => {
+        if (item.name === 'btn') {
+          this.inputs[index].atClick = this.search
+        }
+      })
+    },
     search () {
       this.$refs.entityIndex.search()
     },

+ 34 - 30
src/pages/User/Profile/profile.vue

@@ -53,17 +53,17 @@ export default {
       entityParamKey: 'id',
       showRouteName: 'UserPanel.Profile.UserInfo',
       inputs: [
-        { type: 'separator', name: 'space', label: 'اطلاعات ضروری', col: 'col-md-12' },
-        { type: WarningComp, label: 'بعد از تایید اطلاعات ضروری، امکان تغییر این اطلاعات وجود ندارد', col: 'col-md-12' },
-        { type: VerifyEmailComp, name: 'email', label: 'ایمیل', responseKey: 'email', col: 'col-md-3' },
-        { type: NationalCodeComp, name: 'national_code', value: '', label: 'کدملی/کد اتباع غیر ایرانی', responseKey: 'national_code', col: 'col-md-3' },
-        // { type: 'input', name: 'on_call_mobile_number', label: 'تلفن همراه', responseKey: 'on_call_mobile_number', col: 'col-md-3' },
-        { type: VerifyMobileNumberComp, name: 'on_call_mobile_number', label: 'تلفن همراه', responseKey: 'on_call_mobile_number', col: 'col-md-3' },
-        { type: 'separator', name: 'space', label: 'اطلاعات پروفایل', col: 'col-md-12' },
-        { type: 'file', name: 'picture', label: 'عکس پروفایل', responseKey: 'picture', col: 'col-md-3' },
-        { type: 'separator', name: 'space', size: '0', col: 'col-md-12' },
-        { type: 'input', name: 'firstname', label: 'نام', responseKey: 'firstname', col: 'col-md-3' },
-        { type: 'input', name: 'lastname', label: 'نام خانوادگی', responseKey: 'lastname', col: 'col-md-3' },
+        { type: 'separator', name: 'space', placeholder: ' ', label: 'اطلاعات ضروری', className: 'custom-separator', col: 'col-12' },
+        { type: WarningComp, label: 'بعد از تایید اطلاعات ضروری، امکان تغییر این اطلاعات وجود ندارد', col: 'col-12' },
+        { type: VerifyEmailComp, name: 'email', placeholder: ' ', label: 'ایمیل', responseKey: 'email', col: 'col-md-6 col-12' },
+        { type: NationalCodeComp, name: 'national_code', value: '', placeholder: ' ', label: 'کدملی/کد اتباع غیر ایرانی', responseKey: 'national_code', col: 'col-md-6 col-12' },
+        // { type: 'input', name: 'on_call_mobile_number', placeholder: ' ', label: 'تلفن همراه', responseKey: 'on_call_mobile_number', col: 'col-md-6 col-12' },
+        { type: VerifyMobileNumberComp, name: 'on_call_mobile_number', placeholder: ' ', label: 'تلفن همراه', responseKey: 'on_call_mobile_number', col: 'col-md-6 col-12' },
+        { type: 'separator', name: 'space', label: 'اطلاعات پروفایل', className: 'custom-separator', col: 'col-12' },
+        { type: 'file', name: 'picture', placeholder: ' ', label: 'عکس پروفایل', responseKey: 'picture', col: 'col-md-6 col-12' },
+        { type: 'separator', name: 'space', size: '0', col: 'col-12' },
+        { type: 'input', name: 'firstname', placeholder: ' ', label: 'نام', responseKey: 'firstname', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'lastname', placeholder: ' ', label: 'نام خانوادگی', responseKey: 'lastname', col: 'col-md-6 col-12' },
         {
           type: 'select',
           name: 'gender',
@@ -71,9 +71,10 @@ export default {
           options: Enums.genders,
           value: null,
           label: 'جنسیت',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-6 col-12'
         },
-        { type: 'date', name: 'birthdate', label: 'تولد', responseKey: 'birthdate', col: 'col-md-3' },
+        { type: 'date', name: 'birthdate', placeholder: ' ', label: 'تولد', responseKey: 'birthdate', col: 'col-md-6 col-12' },
         {
           type: 'select',
           name: 'marital_status',
@@ -81,11 +82,12 @@ export default {
           options: Enums.maritalStatuses,
           value: null,
           label: 'وضعیت تاهل',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-6 col-12'
         },
-        { type: 'input', name: 'on_call_mobile_number', label: 'تلفن همراه جهت تماس', responseKey: 'on_call_mobile_number', col: 'col-md-3' },
-        { type: 'input', name: 'on_social_network_mobile_number', label: 'تلفن همراه جهت شبکه های اجتماعی', responseKey: 'on_social_network_mobile_number', col: 'col-md-3' },
-        { type: 'input', name: 'phone_number', label: 'تلفن منزل', responseKey: 'phone_number', col: 'col-md-3' },
+        { type: 'input', name: 'on_call_mobile_number', placeholder: ' ', label: 'تلفن همراه جهت تماس', responseKey: 'on_call_mobile_number', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'on_social_network_mobile_number', placeholder: ' ', label: 'تلفن همراه جهت شبکه های اجتماعی', responseKey: 'on_social_network_mobile_number', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'phone_number', placeholder: ' ', label: 'تلفن منزل', responseKey: 'phone_number', col: 'col-md-6 col-12' },
         {
           type: 'select',
           name: 'last_academic_degree',
@@ -93,10 +95,11 @@ export default {
           options: Enums.academicDegree,
           value: null,
           label: 'آخرین مقطع تحصیلی',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-6 col-12'
         },
-        { type: 'input', name: 'last_academic_degree_field', label: 'رشته تحصیلی', responseKey: 'last_academic_degree_field', col: 'col-md-3' },
-        { type: 'input', name: 'last_academy_name', label: 'نام دانشگاه یا حوزه تحصیلی', responseKey: 'last_academy_name', col: 'col-md-3' },
+        { type: 'input', name: 'last_academic_degree_field', placeholder: ' ', label: 'رشته تحصیلی', responseKey: 'last_academic_degree_field', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'last_academy_name', placeholder: ' ', label: 'نام دانشگاه یا حوزه تحصیلی', responseKey: 'last_academy_name', col: 'col-md-6 col-12' },
         {
           type: 'select',
           name: 'educational_status',
@@ -104,17 +107,18 @@ export default {
           options: Enums.educationalStatus,
           value: null,
           label: 'وضعیت تحصیلی',
-          col: 'col-md-3'
+          placeholder: ' ',
+          col: 'col-md-6 col-12'
         },
-        { type: 'input', name: 'birth_country', label: 'کشور محل تولد', responseKey: 'birth_country', col: 'col-md-4' },
-        { type: 'input', name: 'birth_province', label: 'استان محل تولد', responseKey: 'birth_province', col: 'col-md-4' },
-        { type: 'input', name: 'birth_city', label: 'شهر محل تولد', responseKey: 'birth_city', col: 'col-md-4' },
-        { type: 'input', name: 'living_country', label: 'کشور محل زندگی فعلی', responseKey: 'living_country', col: 'col-md-4' },
-        { type: 'input', name: 'living_province', label: 'استان محل زندگی فعلی', responseKey: 'living_province', col: 'col-md-4' },
-        { type: 'input', name: 'living_city', label: 'شهر محل زندگی فعلی', responseKey: 'living_city', col: 'col-md-4' },
-        { type: 'input', name: 'living_postal_code', label: 'کد پستی محل زندگی', responseKey: 'living_postal_code', col: 'col-md-3' },
-        { type: 'input', name: 'living_address', label: 'آدرس پستی محل زندگی', responseKey: 'living_address', col: 'col-md-6' },
-        { type: 'hidden', name: 'id', responseKey: 'id', label: 'id', col: 'col-md-12' }
+        { type: 'input', name: 'birth_country', placeholder: ' ', label: 'کشور محل تولد', responseKey: 'birth_country', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'birth_province', placeholder: ' ', label: 'استان محل تولد', responseKey: 'birth_province', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'birth_city', placeholder: ' ', label: 'شهر محل تولد', responseKey: 'birth_city', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'living_country', placeholder: ' ', label: 'کشور محل زندگی فعلی', responseKey: 'living_country', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'living_province', placeholder: ' ', label: 'استان محل زندگی فعلی', responseKey: 'living_province', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'living_city', placeholder: ' ', label: 'شهر محل زندگی فعلی', responseKey: 'living_city', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'living_postal_code', placeholder: ' ', label: 'کد پستی محل زندگی', responseKey: 'living_postal_code', col: 'col-md-6 col-12' },
+        { type: 'input', name: 'living_address', placeholder: ' ', label: 'آدرس پستی محل زندگی', responseKey: 'living_address', col: 'col-md-6 col-12' },
+        { type: 'hidden', name: 'id', responseKey: 'id', label: 'id', col: 'col-12' }
       ]
     }
   },

+ 1 - 1
src/pages/User/Wallet/Show.vue

@@ -13,7 +13,7 @@ export default {
   mixins: [mixinPageOptions],
   data: () => {
     return {
-      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'MyWallet' }], options: { style: { paddingTop: '124px' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '30px', style: { maxWidth: '1200px', width: '1200px' } } }] } }]
+      sections: [{ data: { rows: [{ cols: [{ widgets: [{ name: 'MyWallet' }, { name: 'PaymentList', options: { style: { marginTop: '40px', marginBottom: '100px' } } }], options: { style: { paddingTop: '124px' } } }], options: { className: '', height: 'auto', boxed: true, boxedWidth: 1200, gutterXSize: 'md', gutterYSize: 'md', absolute: 'none', paddingOfBoxedInFullWidth: '30px', style: { maxWidth: '1200px', width: '1200px' } } }] } }]
     }
   },
   created() {