palizvani-front-vite/src/components/Widgets/Classroom/ClassroomList/ClassroomList.vue

<template class="my-container">
  <div class="my-container">
    <breadcrumbs style="margin-top: 29px; margin-bottom: 19px;" />
    <template v-if="mounted">
      <q-card class="barcode-section">
        <q-card-section>
          شناسه ورود به جلسه
        </q-card-section>
        <q-separator />
        <form-builder-bar-code lable=""
                               :value="this.national_code" />
      </q-card>
    </template>
    <entity-index v-if="mounted"
                  ref="entityIndex"
                  v-model:value="inputs"
                  :title="listTitle"
                  :api="api"
                  :table="table"
                  :table-keys="tableKeys"
                  :table-grid-size="$q.screen.lt.sm"
                  :show-expand-button="false"
                  :show-reload-button="false"
                  :show-search-button="false">
      <template #before-form-builder>
        <filters :unitCategories="unitCategories"
                 :units="units"
                 @onUnitCategoriesFilterChanged="onUnitCategoriesFilterChanged"
                 @onUnitsFilterChanged="onUnitsFilterChanged" />
      </template>
      <template #entity-index-table-cell="{inputData}">
        <template v-if="inputData.col.name === 'number'">
          {{ inputData.rowNumber }}
        </template>
        <template v-if="inputData.col.name === 'status'">
          <div :class="this.getRegistrationStatusTitleClass(inputData.props.row)">
            {{ this.getRegistrationStatusTitle(inputData.props.row) }}
          </div>
        </template>
        <template v-else-if="inputData.col.name === 'action'">
          <q-btn size="md"
                 color="primary"
                 label="جزییات"
                 :to="{name: showPageRouteName, params: {id: inputData.props.row.classroom_info.id}}" />
        </template>
        <template v-else>
          {{ inputData.col.value }}
        </template>
      </template>
      <template #entity-index-table-item-cell="{inputData}">
        <q-card class="user-classroom-card-list">
          <user-classroom-card :registration="inputData.props.row" />
        </q-card>
      </template>
    </entity-index>
  </div>
</template>

<script>
import { EntityIndex } from 'quasar-crud'
import Enums from 'src/assets/Enums/Enums.js'
import { Invoice } from 'src/models/Invoice.js'
import ShamsiDate from 'src/assets/ShamsiDate.js'
import { APIGateway } from 'src/api/APIGateway.js'
import { FormBuilderAssist } from 'quasar-form-builder'
import { Registration } from 'src/models/Registration.js'
import { mixinAuth, mixinWidget } from 'src/mixin/Mixins.js'
import UserClassroomCard from 'src/components/Widgets/Classroom/UserClassroomCard/UserClassroomCard.vue'
import Breadcrumbs from 'src/components/Widgets/Breadcrumbs/Breadcrumbs.vue'
import { TranscriptSheet } from 'src/models/TranscriptSheet'
import FormBuilderBarCode from 'src/components/FormBuilderCustumComponents/FormBuilderBarCode.vue'
import Filters from './filters.vue'

export default {
  name: 'UserPanel.Profile.AllClassrooms',
  components: {
    FormBuilderBarCode,
    EntityIndex,
    Breadcrumbs,
    UserClassroomCard,
    Filters
  },
  mixins: [mixinAuth, mixinWidget],
  data () {
    return {
      mounted: false,
      unitCategories: [],
      units: [],
      national_code: null,
      inputs: [
        { type: 'hidden', name: 'classroom__unit__category__type', value: 'TRAINING' },
        { type: 'hidden', name: 'owner', value: null }
      ],
      api: APIGateway.registration.APIAdresses.base,
      table: {
        columns: [
          {
            name: 'number',
            required: true,
            label: 'شماره',
            align: 'left',
            field: () => ''
          },
          {
            name: 'classroom_info.title',
            required: true,
            label: 'عنوان',
            align: 'left',
            field: row => row.classroom_info?.title
          },
          {
            name: 'title',
            required: true,
            label: 'نوع برگزاری',
            align: 'left',
            field: row => this.getClassroomHoldingTypeTitle(row.classroom_info.holding_type)
          },
          {
            name: 'professor_info',
            required: true,
            label: 'استاد',
            align: 'left',
            field: row => row.classroom_info?.professor_info?.firstname + ' ' + row.classroom_info?.professor_info?.lastname
          },
          {
            name: 'sessions_info',
            required: true,
            label: 'تعداد جلسات',
            align: 'left',
            field: row => row.classroom_info?.sessions_count
          },
          {
            name: 'status',
            required: true,
            label: 'وضعیت',
            align: 'left',
            // field: row => (new Registration(row)).status_info.label
            field: row => this.getRegistrationStatusTitle(row)
          },
          {
            name: 'title',
            required: true,
            label: 'زمان ثبت نام',
            align: 'left',
            field: row => ShamsiDate.getDateTime(row.creation_time)
          },
          {
            name: 'invoice_status',
            required: true,
            label: 'وضعیت مالی',
            align: 'left',
            field: row => (new Invoice(row.invoice_info)).status_info.label ? (new Invoice(row.invoice_info)).status_info.label : '-'
          },
          {
            name: 'action',
            required: true,
            label: 'جزییات',
            align: 'left',
            field: ''
          }
        ]
      },
      defaultOptions: {
        classroomType: 'TRAINING'
      },
      tableKeys: {
        data: 'results',
        total: 'count',
        currentPage: 'current',
        perPage: 'per_page',
        pageKey: 'page'
      }
    }
  },
  computed: {
    listTitle () {
      if (this.localOptions.classroomType === 'TRAINING') {
        return 'لیست دوره های آموزشی'
      }
      if (this.localOptions.classroomType === 'EVENT') {
        return 'لیست رویدادها'
      }
      return 'لیست دوره های آموزشی'
    },
    showPageRouteName () {
      if (this.localOptions.classroomType === 'TRAINING') {
        return 'UserPanel.Profile.ClassroomInfo'
      }
      if (this.localOptions.classroomType === 'EVENT') {
        return 'UserPanel.Profile.EventInfo'
      }
      return 'UserPanel.Profile.ClassroomInfo'
    },
    selectedCategoryId () {
      // return this.getInputValue('category')
      return 1 // TODO:
    }
  },
  watch: {
    selectedCategoryId () {
      this.setInputValue('unit', null)
      this.getUnits(this.selectedCategoryId)
    }
  },
  mounted () {
    this.setClassroomTypeOfInputs()
    this.setOwner()
    this.setActionBtn()
    this.loadInputDataOptions()
    this.mounted = true
  },
  methods: {
    onUnitCategoriesFilterChanged () {
    },
    onUnitsFilterChanged () {
    },
    setClassroomTypeOfInputs () {
      FormBuilderAssist.setAttributeByName(this.inputs, 'classroom__unit__category__type', 'value', this.localOptions.classroomType)

      // if (this.localOptions.classroomType === 'TRAINING') {
      // }
      if (this.localOptions.classroomType === 'EVENT') {
        FormBuilderAssist.setAttributeByName(this.inputs, 'classroom__unit__category__type', 'type', 'hidden')
        FormBuilderAssist.setAttributeByName(this.inputs, 'category', 'type', 'hidden')
        FormBuilderAssist.setAttributeByName(this.inputs, 'unit', 'label', 'دسته')
        FormBuilderAssist.setAttributeByName(this.inputs, 'status', 'label', 'مرحله رویداد')

        this.table.columns.forEach(col => {
          if (col.name === 'professor_info') {
            col.label = 'برگزار کننده'
          }
          if (col.name === 'sessions_info') {
            col.label = 'تعداد برنامه ها'
          }
        })
      }
    },
    setOwner () {
      const user = this.$store.getters['Auth/user']
      this.national_code = user.national_code
      FormBuilderAssist.setAttributeByName(this.inputs, 'owner', 'value', user.id)
    },
    setActionBtn () {
      FormBuilderAssist.setAttributeByName(this.inputs, 'btn', 'atClick', this.search)
    },
    search () {
      this.$refs.entityIndex.search()
    },
    getClassroomHoldingTypeTitle (type) {
      const target = Enums.classroomHoldingTypes.find(item => item.value === type)
      if (!target) {
        return '-'
      }

      return target.label
    },
    getRegistrationStatusTitle (registration) {
      if (registration.status === 'REGISTERED' && registration.transcript_sheet_info) {
        return (new TranscriptSheet(registration.transcript_sheet_info)).status_info.label
      } else {
        return (new Registration(registration)).status_info.label
      }
    },
    getRegistrationStatusTitleClass (registration) {
      if (registration.status === 'REGISTERED' && registration.transcript_sheet_info) {
        return (new TranscriptSheet(registration.transcript_sheet_info)).status_info.value
      }
      return null
    },
    getClassroomStatusTitle (type) {
      const target = Enums.classroomStatuses.find(item => item.value === type)
      if (!target) {
        return '-'
      }

      return target.label
    },
    getInvoiceStatusTitle (type) {
      const target = Enums.invoiceStatus.find(item => item.value === type)
      if (!target) {
        return '-'
      }

      return target.label
    },
    loadInputDataOptions () {
      this.getCategories()
      this.getUnits()
    },
    getCategories () {
      APIGateway.unitCategory.index({ per_page: 9999, type: this.localOptions.classroomType })
        .then((categories) => {
          FormBuilderAssist.setAttributeByName(this.inputs, 'category', 'options', categories.list.list.map(item => {
            return {
              value: item.id,
              label: item.title
            }
          }))
          this.unitCategories = categories.list
        })
        .catch(() => {})
    },
    getUnits (selectedcategoryId) {
      APIGateway.unit.index({
        category: selectedcategoryId,
        category__type: this.localOptions.classroomType
      })
        .then(unitList => {
          this.loadSelectOptions('unit', this.getSelectOptions(unitList.list.list, 'id', 'title'))
          this.units = unitList.list
        })
        .catch(() => {
        })
    },
    getInputValue (name) {
      const inputIndex = this.inputs.findIndex(input => input.name === name)
      return this.inputs[inputIndex].value
    },
    setInputValue (name, value) {
      const inputIndex = this.inputs.findIndex(input => input.name === name)
      this.inputs[inputIndex].value = value
    },
    getSelectOptions (result, value, label) {
      return result.map(item => {
        return {
          value: item[value],
          label: item[label]
        }
      })
    },
    loadSelectOptions (name, value) {
      const inputIndex = this.inputs.findIndex(input => input.name === name)
      this.inputs[inputIndex].options = value
    }
  }
}
</script>

<style scoped lang="scss">
.barcode-section{
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.my-container {
  :deep(.entity-index) {
    .entity-crud-formBuilder {
      padding: 8px 0;
    }
  }
}

.CLEAN_PASSED {
  //font-size: 1.1em;
  color: green;
}
.CONDITIONAL_PASSED{
  color: yellow;
}
.FAILED{
  color: darkred;
}
.FAILED_DUE_TO_PRE_CONDITIONAL{
  color: red;
}
.user-classroom-card-list {
  margin: 8px 0;
}
</style>