other components...

src/components/CCardDiscipline/CCardDiscipline.scss

@@ -0,0 +1,91 @@
+$heightBtn: 100%;
+$grayshadow: #555;
+
+.text-subtitle-carica {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+}
+
+.text-subtitle-certificato {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+@media (max-width: 718px) {
+  // PER VERSIONE MOBILE
+  .text-subtitle-carica {
+    font-size: 1rem;
+  }
+}
+
+.my-card-discipline {
+  width: 100%;
+  max-width: 350px;
+  min-width: 300px;
+  padding: 0;
+
+  box-shadow: none;
+  border-radius: 30px;
+}
+
+.yes_shadow {
+  -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.16);
+  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.16);
+}
+
+
+.disc {
+  text-align: center !important;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.75rem;
+  letter-spacing: .00937em;
+  text-shadow: .1rem .1rem .1rem $grayshadow;
+
+  &__title {
+    //color: white;
+    text-shadow: .125rem .125rem .125rem #2d2260;
+  }
+
+  &__cell {
+    font-size: 1rem;
+    color: red;
+  }
+
+  &__email {
+    font-size: 1rem;
+    color: #3b5998;
+  }
+
+  &__description {
+    font-size: 1rem;
+    color: #000000;
+    height: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__email a {
+    text-decoration: none;
+  }
+
+}
+
+.myimg {
+  height: 200px;
+  border-radius: 30px !important;
+}
+
+.q-img {
+  &__image {
+    border-radius: 30px !important;
+  }
+}
+
+
+.q-card__section{
+  padding: 4px !important;
+}

src/components/CCardDiscipline/CCardDiscipline.ts

@@ -0,0 +1,85 @@
+import { computed, defineComponent, PropType, ref, toRef, watch } from 'vue'
+
+import { tools } from '@store/Modules/tools'
+import { IDiscipline, IEvents } from 'model'
+
+import { useCalendarStore } from '@store/CalendarStore'
+
+import CMyTeacher from '@/components/CMyTeacher/CMyTeacher'
+
+// @ts-ignore
+import MixinOperator from '../../mixins/mixin-operator'
+import MixinUsers from '@/mixins/mixin-users'
+
+export default defineComponent({
+  name: 'CCardDiscipline',
+  components: { CMyTeacher },
+  props: {
+    discipline: {
+      Type: Object as PropType<IDiscipline>,
+      required: true,
+    },
+    mystyle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    autoplay: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+
+  setup(props) {
+
+    const nextlesson = ref()
+    const calendarStore = useCalendarStore()
+
+    const { getImgTeacherByUsername } = MixinOperator()
+    const { isValidUsername } = MixinUsers()
+
+    // const mydiscipline = toRef(props, 'discipline');
+
+    const getLinkEvent = computed(() => `event/${nextlesson.value.typol}/${nextlesson.value._id}`)
+
+    function getNextLesson(typol: any): IEvents | undefined {
+      // Get next lesson
+      const datenow = tools.addDays(tools.getDateNow(), -1)
+      return calendarStore.eventlist.find((myevent: IEvents) => (myevent.typol === typol) && (new Date(myevent.dateTimeEnd!) >= datenow))
+    }
+
+    function disciplinechanged(myrec: IDiscipline | any) {
+      nextlesson.value = getNextLesson(myrec.typol_code)
+      // console.log('nextlesson', this.nextlesson)
+    }
+
+    watch(() => props.discipline, (value: any, oldval: any) => {
+      nextlesson.value = getNextLesson(value.typol_code)
+    },
+    )
+
+    function ExistLesson() {
+      return !!nextlesson.value
+    }
+
+    function NextEventDate() {
+      return tools.getstrDateTimeEventSimple(nextlesson.value)
+    }
+
+    function created() {
+      disciplinechanged(props.discipline)
+    }
+
+    created()
+
+    return {
+      ExistLesson,
+      NextEventDate,
+      tools,
+      getImgTeacherByUsername,
+      getLinkEvent,
+      isValidUsername,
+    }
+  },
+})

src/components/CCardDiscipline/CCardDiscipline.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="my-card-shadow yes_shadow" style="opacity: 1 !important;">
+    <q-card class="my-card-discipline text-center inset-shadow" :style="mystyle">
+      <q-img :src="`statics/` + discipline.img_small" class="myimg" :alt="discipline.label">
+        <div class="absolute-bottom text-spacetrans">
+          <q-btn rounded :to="discipline.linkpage">
+            <div class="text-h5 disc__title shadow-max">{{ discipline.label }}</div>
+          </q-btn>
+        </div>
+      </q-img>
+
+      <q-card-section>
+        <div class="disc__description" v-html="discipline.description"></div>
+      </q-card-section>
+
+      <q-card-section v-if="ExistLesson()" class="text-blue">
+        <span v-if="!tools.isMobile()">{{ $t('cal.nextevent') }}:</span>
+        <q-btn rounded type="a" :to="getLinkEvent" color="primary" icon="event" :label="NextEventDate()">
+        </q-btn>
+      </q-card-section>
+
+      <span v-if="!tools.isMobile()"><q-separator></q-separator></span>
+
+      <q-card-section class="row justify-center">
+        <div
+          v-for="(teach, index) in discipline.teachers" :key="index">
+          <div v-if="getImgTeacherByUsername(teach) && isValidUsername(teach)">
+            <CMyTeacher :username="teach">
+            </CMyTeacher>
+          </div>
+        </div>
+      </q-card-section>
+
+      <q-btn
+        class="q-mb-md" rounded size="md" color="primary" :to="discipline.linkpage"
+        :label="$t('cal.readall')"></q-btn>
+    </q-card>
+  </div>
+</template>
+
+<script lang="ts" src="./CCardDiscipline.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CCardDiscipline.scss';
+</style>

src/components/CCardDiscipline/index.ts

@@ -0,0 +1 @@
+export {default as CCardDiscipline} from './CCardDiscipline.vue'