Circuit table...

src/components/CMyRecCircuitCard/CMyRecCircuitCard.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/CMyRecCircuitCard/CMyRecCircuitCard.ts

@@ -0,0 +1,74 @@
+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: 'CMyRecCircuitCard',
+  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)
+
+    watch(() => props.prop_myrec, (newval, oldval) => {
+
+      mounted()
+    })
+
+    function mounted() {
+      if (props.prop_myrec) {
+        myrec.value = props.prop_myrec
+      }
+    }
+
+    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,
+      // naviga,
+      setCmd,
+      shared_consts,
+      userStore,
+      tools,
+      toolsext,
+      fieldsTable,
+      cmdExt,
+    }
+  },
+})

src/components/CMyRecCircuitCard/CMyRecCircuitCard.vue

@@ -0,0 +1,62 @@
+<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="myrec.img_logo" avatar
+                      @click="cmdExt(costanti.CMD_SHOW_PAGE, myrec)">
+        <q-avatar size="60px">
+          <q-img :src="userStore.getImgByCircuit(myrec)" :alt="myrec.descr"
+                 img-class="imgprofile" height="60px"/>
+        </q-avatar>
+      </q-item-section>
+
+      <q-item-section @click="cmdExt(costanti.CMD_SHOW_PAGE, myrec)">
+        <q-item-label v-if="myrec.name" lines="1" class="text_title">
+          <span class="text-weight-bold">{{ myrec.name }}</span>
+        </q-item-label>
+        <q-item-label v-if="myrec.subname" lines="1" class="text_title">
+          <span>{{ myrec.subname }}</span>
+        </q-item-label>
+        <q-item-label lines="3" v-if="myrec.longdescr">{{ myrec.longdescr }}<br>
+        </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="./CMyRecCircuitCard.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMyRecCircuitCard.scss';
+</style>

src/components/CMyRecCircuitCard/index.ts

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