ver. 0.2.12

Sistemare i Gruppi : cardGruppo

src/components/CMyCardGrpPopup/CMyCardGrpPopup.scss

@@ -0,0 +1,127 @@
+.profile {
+  width: 100%;
+  margin: 0 auto;
+  max-width: 450px;
+}
+
+.myrow{
+  display: flex;
+  @media (max-width: 600px) {
+    flex-flow: column;
+  }
+}
+
+.qualifica{
+  border: solid 2px #4198ef;
+  border-radius: 1rem;
+  padding: 5px;
+}
+
+
+.text-bacheca{
+  margin: 10px;
+  border: solid 2px #4198ef;
+  border-radius: 1rem;
+  padding: 10px;
+
+}
+
+.note-bacheca{
+  border: solid 2px #C10015;
+  border-radius: 1rem;
+  padding: 10px;
+
+}
+
+.img {
+  margin-left: auto;
+  margin-right: auto;
+
+  max-height: 350px;
+  max-width: 350px;
+  @media (max-width: 500px) {
+    max-height: 400px;
+    max-width: 400px;
+  }
+}
+
+$graytext: #555;
+.cal {
+  color: black;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.25rem;
+  letter-spacing: 0.03333em;
+
+  &__title {
+    color: white;
+    font-weight: 700;
+    font-size: 1rem;
+    padding-bottom: 10px;
+  }
+
+  &__details {
+    color: black;
+  }
+
+  &__hours {
+    color: blue;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      font-weight: 400;
+    }
+  }
+
+  &__where {
+    margin-top: 5px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue !important;
+    }
+  }
+
+  &__when {
+    margin-top: 5px;
+    color: blue;
+
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue !important;;
+    }
+  }
+
+  &__teacher {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+      color: darkblue !important;;
+    }
+  }
+
+  &__quota {
+    margin-top: 5px;
+    &-title {
+      color: $graytext;
+    }
+    &-content {
+
+    }
+  }
+
+  &__img {
+    width: 100px;
+    height: 100px;
+    padding: 10px;
+  }
+
+}

src/components/CMyCardGrpPopup/CMyCardGrpPopup.ts

@@ -0,0 +1,95 @@
+import { computed, defineComponent, onMounted, PropType, ref, watch } from 'vue'
+
+import { CMyFieldDb } from '@/components/CMyFieldDb'
+import { CTitleBanner } from '@/components/CTitleBanner'
+import { CProfile } from '@/components/CProfile'
+import { CDateTime } from '@/components/CDateTime'
+import { CMyPage } from '@/components/CMyPage'
+import { CMyFieldRec } from '@/components/CMyFieldRec'
+import { tools } from '@store/Modules/tools'
+import { useUserStore } from '@store/UserStore'
+import { useGlobalStore } from '@store/globalStore'
+import { useI18n } from '@/boot/i18n'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { IColGridTable, IImgGallery, IUserFields } from 'model'
+import { shared_consts } from '@/common/shared_vuejs'
+import { colCitys, fieldsTable } from '@store/Modules/fieldsTable'
+
+export default defineComponent({
+  name: 'CMyCardGrpPopup',
+  components: { CProfile, CTitleBanner, CMyFieldDb, CDateTime, CMyPage, CMyFieldRec },
+  props: {
+    table: {
+      type: String,
+      required: true,
+    },
+    prop_myrec: {
+      type: Object as PropType<any>,
+      required: false,
+      default: null,
+    },
+    idRec: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  setup(props) {
+
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+    const $q = useQuasar()
+    const { t } = useI18n()
+
+    const showPic = ref(false)
+
+    const myrec = ref({})
+    const col = ref(<IColGridTable>{})
+
+    function profile() {
+      return userStore.my.profile
+    }
+
+    function load() {
+      // Carica il profilo di quest'utente
+      if (props.idRec > 0) {
+        userStore.loadGeneric(props.table, props.idRec).then((ris) => {
+          myrec.value = ris
+        })
+
+      } else {
+        myrec.value = props.prop_myrec
+      }
+
+      col.value = fieldsTable.getArrColsByTable(props.table)
+    }
+
+    watch(() => props.idRec, (to: any, from: any) => {
+      load()
+    })
+
+    function mounted() {
+      load()
+    }
+
+    onMounted(mounted)
+
+    return {
+      profile,
+      tools,
+      costanti,
+      myrec,
+      shared_consts,
+      globalStore,
+      showPic,
+      userStore,
+      t,
+      fieldsTable,
+      colCitys,
+      toolsext,
+      col,
+    }
+  }
+})

src/components/CMyCardGrpPopup/CMyCardGrpPopup.vue

@@ -0,0 +1,87 @@
+<template>
+
+  <q-card class="dialog_card q-mb-lg" v-if="myrec">
+    <q-footer
+      class="bg-white small-screen-only text-center"
+      bordered
+    >
+      <q-btn push rounded color="primary" icon="close" label="Chiudi" v-close-popup></q-btn>
+
+    </q-footer>
+    <q-bar dense class="bg-primary text-white">
+      {{ myrec.title }} ({{ myrec.groupname }})
+      <q-space/>
+      <q-btn flat round color="white" icon="close" v-close-popup></q-btn>
+    </q-bar>
+    <q-card-section class="inset-shadow">
+      <!-- Per ora visualizzo solo la Prima Immagine -->
+      <div class="text-center">
+
+        <q-img
+          v-if="tools.getValue(myrec, 'photos', '')"
+          :src="tools.getFullFileName(tools.getValue(myrec, 'photos', ''), table, myrec.username, myrec.groupname)" class="img"
+          alt="immagine del gruppo"></q-img>
+      </div>
+
+      <!--:title="t(mycol.label_trans)"-->
+
+      <div v-for="(mycol, index) of col" :key="index">
+        <div
+          v-if="(mycol.visible && (tools.checkIfShowField(mycol, tools.TIPOVIS_SHOW_RECORD, false, tools.getValue(myrec, mycol.field, mycol.subfield))))">
+          <div v-if="mycol.fieldtype === costanti.FieldType.html && tools.getValue(myrec, mycol.field, mycol.subfield)">
+            <div class="note-bacheca"
+                 v-html="tools.getValue(myrec, mycol.field, mycol.subfield)">
+
+            </div>
+          </div>
+          <div v-else-if="mycol.name === 'descr'">
+            <div class="text-bacheca">
+              {{ tools.getValue(myrec, mycol.field, mycol.subfield) }}
+            </div>
+          </div>
+          <div v-else-if="mycol.name === 'photos' && myrec.photos.length <= 1">
+          </div>
+          <div v-else-if="mycol.name === 'admins'">
+            <CMyFieldRec
+              title="Amministratori:"
+              :table="table"
+              :id="myrec._id"
+              :rec="myrec"
+              :field="mycol.field"
+              :canEdit="false"
+              :canModify="false">
+            </CMyFieldRec>
+
+          </div>
+          <CMyFieldRec
+            v-else
+            :table="table"
+            :id="myrec._id"
+            :rec="myrec"
+            :field="mycol.field"
+            :canEdit="false"
+            :canModify="false">
+          </CMyFieldRec>
+        </div>
+      </div>
+
+      <div class="text-center">
+        <q-btn
+          icon="far fa-file-alt" label="Apri Pagina" color="primary" text-color="white"
+          :to="tools.getToByCol(col, table, myrec)"
+        />
+      </div>
+
+      <br><br>
+    </q-card-section>
+
+  </q-card>
+</template>
+
+<script lang="ts" src="./CMyCardGrpPopup.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyCardGrpPopup.scss';
+</style>
+

src/components/CMyCardGrpPopup/index.ts

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