|
@@ -0,0 +1,308 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div 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">{{ registration.classroom_info.title }}</q-banner>
|
|
|
|
|
+ {{ getHoldingType(registration.classroom_info.holding_type) }}
|
|
|
|
|
+ |
|
|
|
|
|
+ {{ registration.classroom_info.sessions_count }} جلسه
|
|
|
|
|
+ </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>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</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: {
|
|
|
|
|
+ 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;
|
|
|
|
|
+ margin-bottom: 8px;
|
|
|
|
|
+ justify-content: space-between;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ align-self: stretch;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ background: #FFF;
|
|
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
|
|
+ .right-side {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ padding: 0 4px;
|
|
|
|
|
+
|
|
|
|
|
+ .thumbnail {
|
|
|
|
|
+ max-width: 100%;
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ display: block;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .q-btn {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: 48px;
|
|
|
|
|
+ padding: 8px 24px;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ align-self: stretch;
|
|
|
|
|
+ border-radius: 0 0 0 8px;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ .left-side {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: flex-end;
|
|
|
|
|
+ gap: 12px;
|
|
|
|
|
+ align-self: stretch;
|
|
|
|
|
+
|
|
|
|
|
+ .title-box {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ align-items: flex-start;
|
|
|
|
|
+ align-self: stretch;
|
|
|
|
|
+
|
|
|
|
|
+ :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>
|
