ver. 0.2.12

Sistemare i Gruppi : cardGruppo

src/components/CMyRecGrpCard/CMyRecGrpCard.scss

@@ -0,0 +1,30 @@
+.myflex{
+  display: flex;
+  flex: 1;
+}
+
+.text_user_city{
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  font-size: 0.85rem;
+  color: grey;
+}
+
+
+.actualdate{
+
+}
+
+
+.cardrec{
+  @media (min-width: 500px) {
+    margin: 1px;
+    padding: 4px;
+  }
+
+}
+
+.text_title{
+  color: blue;
+}

src/components/CMyRecGrpCard/CMyRecGrpCard.ts

@@ -0,0 +1,95 @@
+import { defineComponent, onMounted, PropType, ref, watch } from 'vue'
+import { useUserStore } from '@store/UserStore'
+import { IImgGallery, IUserFields, IUserProfile } from 'model'
+import { costanti } from '@costanti'
+import { shared_consts } from '@/common/shared_vuejs'
+import { fieldsTable } from '@store/Modules/fieldsTable'
+import { tools } from '@store/Modules/tools'
+import { toolsext } from '@store/Modules/toolsext'
+import { useQuasar } from 'quasar'
+import { useI18n } from '@/boot/i18n'
+import { CMyCardPopup } from '@/components/CMyCardPopup'
+// import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'CMyRecGrpCard',
+  components: { CMyCardPopup },
+  emits: ['setCmd', 'cmdext'],
+  props: {
+    table: {
+      type: String,
+      required: true,
+    },
+    prop_myrec: {
+      type: Object as PropType<any | null>,
+      required: false,
+      default: null,
+    },
+  },
+
+  setup(props, { emit }) {
+
+    const userStore = useUserStore()
+    // const $q = useQuasar()
+    const { t } = useI18n()
+    // const $router = useRouter()
+
+    const myrec = ref(<any | null>null)
+
+    const visupage = ref(false)
+
+    watch(() => props.prop_myrec, (newval, oldval) => {
+
+      mounted()
+    })
+
+    function mounted() {
+      if (props.prop_myrec) {
+        myrec.value = props.prop_myrec
+      }
+    }
+
+    function showBadge() {
+      if (shared_consts.TABLES_SHOW_ADTYPE.includes(props.table)) {
+        return true
+      }
+
+      return false
+    }
+
+    function getImgUser(profile: IUserFields) {
+      return userStore.getImgByProfile(profile)
+    }
+
+    /*function naviga(path: string) {
+      $router.push(path)
+    }*/
+
+    function setCmd($q: any, cmd: number, myusername: string, value: any, groupname: string) {
+      emit('setCmd', $q, cmd, myusername, value, groupname)
+    }
+
+    function cmdExt(cmd: any, val1: any, val2: any) {
+      emit('cmdext', cmd, val1, val2)
+    }
+
+    onMounted(mounted)
+
+    return {
+      t,
+      myrec,
+      costanti,
+      getImgUser,
+      // naviga,
+      setCmd,
+      shared_consts,
+      userStore,
+      tools,
+      toolsext,
+      fieldsTable,
+      cmdExt,
+      visupage,
+      showBadge,
+    }
+  },
+})

src/components/CMyRecGrpCard/CMyRecGrpCard.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="q-py-xs centermydiv cardrec" :style="`max-width: `+ (tools.getwidth($q) - 20) +`px; ` + ($q.screen.lt.sm ? (`min-width: `+ (tools.getwidth($q) - 20) +`px;`) : ``)">
+
+    <q-item v-if="myrec" clickable v-ripple class="shadow-2 q-btn--rounded bg-teal-1">
+
+      <q-item-section v-if="(shared_consts.TABLES_VISU_IMG.includes(table)) && (myrec.photos && myrec.photos.length > 0)" avatar
+                      @click="cmdExt(costanti.CMD_SHOW_PAGE, myrec)">
+        <q-avatar size="60px">
+          <q-img :src="tools.getFullFileName(myrec.photos, table, myrec.username, myrec.groupname)" :alt="myrec.descr"
+                 img-class="imgprofile" height="60px"/>
+        </q-avatar>
+      </q-item-section>
+      <q-item-section v-else avatar @click="naviga(`/my/` + myrec.username)">
+        <q-badge v-if="showBadge" class="q-my-xs self-center" :color="fieldsTable.getColByAdType(myrec.adType)">
+          {{ fieldsTable.getValByTabAndId(table, 'adType', myrec.adType) }}
+          <q-icon :name="fieldsTable.getIconByAdType(myrec.adType)" color="white"
+                  class="q-ml-xs"/>
+        </q-badge>
+        <q-avatar size="60px">
+          <q-img :src="getImgUser(myrec)" :alt="myrec.username" img-class="imgprofile" height="60px"/>
+        </q-avatar>
+      </q-item-section>
+
+      <q-item-section @click="cmdExt(costanti.CMD_SHOW_PAGE, myrec)">
+        <q-item-label class="full-width">
+          <span v-for="(rec, ind) of myrec.recCatGrp" :key="ind"> <q-chip
+            dense
+            class="text-center shadow-5 glossy bg-blue chipmodif">{{ rec.descr }}</q-chip></span>
+
+          <!--<span class="dateevent" v-if="myrec.dateTimeStart">dal <span class="datainizio">{{tools.getstrVeryShortDate(myrec.dateStart) }}</span> al <span class="datafine">{{ tools.getstrVeryShortDate(myrec.dateEnd) }}</span>
+          </span>-->
+        </q-item-label>
+        <q-item-label v-if="myrec.title" lines="1" class="text_title">
+          <span class="text-weight-bold">{{ myrec.title }}</span>
+        </q-item-label>
+        <q-item-label lines="3" v-if="myrec.descr">{{ myrec.descr }}<br>
+        </q-item-label>
+        <q-item-label lines="1" style="text-align: right" class="text_user_city">
+          <span class="text-weight-bold">{{ myrec.username }}</span> -
+          <span v-for="(rec, ind) of myrec.mycities" :key="ind"><span v-if="ind > 0">, </span>{{ rec.comune }}</span>
+        </q-item-label>
+
+      </q-item-section>
+      <q-item-section side v-if="tools.canModifyThisRec(myrec, table)">
+        <q-item-label>
+          <q-btn rounded icon="fas fa-pencil-alt">
+            <q-menu>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup
+                        @click="cmdExt(costanti.CMD_MODIFY, myrec._id)">
+                  <q-item-section side>
+                    <q-icon name="fas fa-pencil-alt"/>
+                  </q-item-section>
+                  <q-item-section>{{ $t('reg.edit') }}</q-item-section>
+                </q-item>
+              </q-list>
+              <q-list style="min-width: 150px">
+                <q-item clickable v-close-popup @click="cmdExt(costanti.CMD_DELETE, myrec._id)">
+                  <q-item-section side>
+                    <q-icon name="fas fa-trash-alt"/>
+                  </q-item-section>
+                  <q-item-section>{{ $t('reg.elimina') }}</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-item-label>
+      </q-item-section>
+
+    </q-item>
+    <q-separator inset="item"/>
+  </div>
+
+</template>
+
+<script lang="ts" src="./CMyRecGrpCard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyRecGrpCard.scss';
+</style>

src/components/CMyRecGrpCard/index.ts

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