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

<template>
  <q-card-section class="classroom-card row">
    <div class="right-side col-6">
      <img class="thumbnail"
           :src="registration.classroom_info.thumbnail">
      <q-btn color="primary"
             :to="{name: showPageRouteName, params: {id: registration.classroom_info.id}}">
        مشاهده
      </q-btn>
    </div>
    <div class="left-side col-6">
      <div class="title-box">
        <q-banner class="banner">{{ convertClassroomTitle(registration.classroom_info.title) }}</q-banner>
        <div>
          {{ getClassroomTitleCaption(registration.classroom_info.title) }}
        </div>
        <div>
          {{ getHoldingType(registration.classroom_info.holding_type) }}
          |
          {{ registration.classroom_info.sessions_count }} جلسه
        </div>
      </div>
      <div class="status-box">
        <div class="registration-status-box">
          <q-icon name="event_note"
                  class="material-icons-outlined" />
          {{ this.getRegistrationStatusTitle(registration) }}
        </div>
        <div class="financial-status-box">
          <q-icon name="credit_card"
                  class="material-icons-outlined" />
          {{ this.getInvoiceStatusTitle(registration.invoice_info.status) }}
        </div>
      </div>
    </div>
  </q-card-section>
</template>

<script>
import Enums from 'assets/Enums/Enums.js'
import ShamsiDate from 'assets/ShamsiDate.js'
import { APIGateway } from 'src/api/APIGateway.js'
import { Classroom } from 'src/models/Classroom.js'
import { Registration } from 'src/models/Registration.js'
import { UnitCategory } from 'src/models/UnitCategory'
import { mixinWidget } from 'src/mixin/Mixins.js'
import { TranscriptSheet } from 'src/models/TranscriptSheet'

export default {
  name: 'UserClassroomCard',
  mixins: [mixinWidget],
  props: {
    registration: {
      type: Registration,
      default: new Registration()
    },
    classroom: {
      type: Classroom,
      default: new Classroom()
    },
    classroomId: {
      type: Number,
      default: null
    },
    ownerId: {
      type: Number,
      default: null
    },
    classroomType: {
      type: String,
      default: 'TRAINING'
    }
  },
  emits: [],
  data: () => ({
    defaultOptions: {
      profileMode: false,
      classroomType: 'TRAINING'
    },
    acceptClassType: 'register', // accept - enrollment - rules
    fetchCodesLoading: false,
    dropLoading: false,
    rulesAccept: false,
    rulesDialog: false,
    loading: true
  }),
  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'
    },
    classroomTypeTitle () {
      const unitCategory = new UnitCategory({ type: this.localOptions.classroomType })
      return unitCategory.type_info.label
    }
  },
  methods: {
    getClassroomTitleCaption(title) {
      const match = title.match(/^(.*?)\s*\((.*?)\)$/)
      if (match) {
        const insideParenthesis = match[2].split('-')[0].trim()
        return `${insideParenthesis}`
      } else {
        return ''
      }
    },
    convertClassroomTitle(title) {
      const match = title.match(/^(.*?)\s*\((.*?)\)$/)
      if (match) {
        const beforeParenthesis = match[1]
        return `${beforeParenthesis}`
      } else {
        return title
      }
    },
    getTitledDateTime (dateTime) {
      return ShamsiDate.getTitledDateTime(dateTime)
    },
    acceptAndContinue () {
      this.$store.commit('Shop/updateOnRegisterClassroom', this.classroom)
      this.$router.push({ name: 'UserPanel.ShopCompleteInfo', query: { type: this.acceptClassType, source: this.classroomType === 'EVENT' ? 'event' : 'classroom' } })
    },
    onEnrolment () {
      this.acceptClassType = 'enrollment'
      this.rulesDialog = true
    },
    onDropping () {
      this.$q.dialog({
        title: 'توجه',
        message: 'آیا از حذف این دوره اطمینان دارید؟',
        cancel: true,
        persistent: true
      }).onOk(() => {
        this.dropLoading = true
        APIGateway.classroom.dropByUser(this.classroom.id)
          .then(() => {
            this.dropLoading = false
            this.$emit('onDrop')
          })
          .catch(() => {
            this.dropLoading = false
          })
      })
    },
    openRulesDialog () {
      this.acceptClassType = 'rules'
      this.rulesDialog = true
    },
    openCodeLink () {
      if (!this.classroom.codes) {
        return
      }

      const fileName = (this.classroom.codes.match(/(?<=\/)[^/?#]+(?=[^/]*$)/gm) || [this.classroom.title])[0]
      this.fetchCodesLoading = true
      fetch(this.classroom.codes)
        .then(response => response.blob())
        .then(blob => {
          const link = document.createElement('a')
          link.href = URL.createObjectURL(blob)
          link.download = fileName
          link.click()
          this.fetchCodesLoading = false
        })
        .catch(() => {
          this.fetchCodesLoading = false
        })
    },
    openRegisterDialog () {
      this.acceptClassType = 'register'
      this.rulesDialog = true
    },
    getHoldingType (type) {
      const target = Enums.classroomHoldingTypes.find(item => item.value === type)
      if (target) {
        return target.label
      }
      return '-'
    },
    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
    },
    getAudienceGenderType (type) {
      const target = Enums.classroomGenders.find(item => item.value === type)
      if (target) {
        return target.label
      }
      return '-'
    },
    getTime (time) {
      return ShamsiDate.getDateTime(time)
    },
    getTerm (classroom) {
      if (!classroom.beginning_registration_period) {
        return '-'
      }
      return ShamsiDate.getTerm(classroom.beginning_registration_period)
    }
  }
}
</script>

<style scoped lang="scss">
.classroom-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  padding: 0;
  :deep(.q-card__section--vert){
    padding: 0;
  }
  .q-card__section.q-card__section--vert.classroom-card.row {
    padding: 0;
  }
  .right-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0 4px 0 0;

    .thumbnail {
      max-width: 100%;
      height: auto;
      display: block;
    }

    .q-btn {
      display: flex;
      height: 48px;
      justify-content: center;
      align-items: center;
      align-self: stretch;
      border-radius: 0 0 0 4px;
    }
  }
  .left-side {
    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: 16px;
    align-self: stretch;

    .title-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      align-self: stretch;
      gap: 8px;

      :deep(.q-banner) {
        padding: 8px 4px;
        .q-banner__content {
          font-size: 16px;
        }
      }
    }

    .status-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      align-self: stretch;

      .registration-status-box {
        display: flex;
        height: 30px;
        align-items: center;
        gap: 4px;
        align-self: stretch;
      }

      .financial-status-box {
        display: flex;
        align-items: center;
        gap: 4px;
        align-self: stretch;
      }
    }
  }
}
</style>