- Statistiche

- Menu e Sottomenu
- Lista ultimi Movimenti

src/components/CMenuItem/CMenuItem.scss

@@ -0,0 +1,145 @@
+.prova {
+    color: red;
+}
+
+.q-list-header {
+    min-height: 12px;
+    padding: 5px 8px;
+}
+
+.menu-hr {
+    border-color: #dedede;
+    height: 0.5px;
+}
+
+.router-link-active {
+    color: #027be3;
+    background-color: #dadada !important;
+    border-right: 2px solid #027be3;
+}
+
+.list-label:first-child {
+    line-height: 20px;
+    padding: 5px;
+    margin: 1px;
+}
+
+.router-link-active {
+    color: #027be3;
+    background-color: #dadada !important;
+    border-right: 2px solid #027be3;
+}
+
+.router-link-active .item-primary {
+    color: #027be3;
+}
+
+.menu_freccina {
+    position: absolute;
+    right: 10px;
+    display: inline-block;
+    padding: 0 0 0 0;
+    -webkit-transform: rotate(-180deg);
+    transform: rotate(-180deg);
+}
+
+.my-menu,
+.my-menu>i {
+    min-height: 40px;
+    min-width: 26px;
+    font-size: 1rem;
+}
+
+.my-menu-small,
+.my-menu-small>i {
+    min-height: 40px;
+    min-width: 26px;
+    font-size: 0.75rem;
+}
+
+.isAdmin {
+    color: red !important;
+}
+
+.isSocioResidente {
+    color: darkgreen;
+}
+
+.isCalendar {}
+
+.isManager {
+    color: green !important;
+}
+
+.isFacilitatore {
+    color: #201a80;
+}
+
+.my-menu-icon {
+    min-width: 2px;
+    font-size: 1rem;
+}
+
+.my-menu-icon>i {
+    min-width: 26px;
+    font-size: 1.25rem;
+}
+
+.clexpansion {
+    min-width: 0 !important;
+}
+
+.my-menu-active {
+    background-color: rgba(174, 189, 241, 0.71);
+}
+
+.my-menu-separat>i {
+    min-width: 26px;
+    font-size: 1rem;
+}
+
+.my-menu-icon-none>i {
+    display: none;
+}
+
+.clicon img,
+.clicon {
+    font-size: 16px;
+}
+
+.q-item__section--avatar {
+    min-width: 30px;
+}
+
+.OLD_q-item__section--side {
+    padding-right: 8px;
+}
+
+
+.imgicon img {
+    font-size: 2.5rem !important;
+    border-radius: 8px;
+}
+
+
+/*
+  .menu-enter-active, .scale-enter {
+      -webkit-animation: moveFromTopFade .5s ease both;
+      animation: moveFromTopFade .5s ease both;
+  }
+  
+  .menu-leave-to, .scale-leave-active {
+      -webkit-animation: moveToBottom .5s ease both;
+      animation: moveToBottom .5s ease both;
+  }
+  */
+
+.bigmenu {
+    font-size: 1.25rem;
+    font-weight: bold;
+    text-shadow: 0.0512rem 0.052rem .01rem #555;
+}
+
+.subtitle {
+    font-style: italic;
+}

src/components/CMenuItem/CMenuItem.ts

@@ -0,0 +1,61 @@
+import { computed, defineComponent, onMounted, PropType, ref, toRef, watch } from 'vue'
+import { useI18n } from '@src/boot/i18n'
+import { useUserStore } from '@store/UserStore'
+import { useGlobalStore } from '@store/globalStore'
+import { useQuasar } from 'quasar'
+import { costanti } from '@costanti'
+import { fieldsTable } from '@store/Modules/fieldsTable'
+import { shared_consts } from '@/common/shared_vuejs'
+import { IColGridTable, IOperators } from 'model'
+import { tools } from '@store/Modules/tools'
+import { static_data } from '@/db/static_data'
+
+export default defineComponent({
+  name: 'CMenuItem',
+  props: {
+    item: Object,
+    getroute: Function,
+    getmymenuclass: Function,
+    getimgiconclass: Function,
+    clBase: String,
+    mainMenu: Boolean,
+    level: {
+      type: Number,
+      default: 0
+    },
+  },
+
+  components: {},
+  setup(props, { emit }) {
+    const $q = useQuasar()
+    const { t } = useI18n()
+    const userStore = useUserStore()
+    const globalStore = useGlobalStore()
+
+    function mounted() {
+      // ...
+
+    }
+
+    function getmenuByPath(pathoobj: any) {
+      let mymenufind = null
+      if (tools.isObject(pathoobj)) {
+        mymenufind = pathoobj
+      } else {
+        mymenufind = static_data.routes.find((menu: any) => menu.path === '/' + pathoobj)
+      }
+
+      return mymenufind
+    }
+
+    onMounted(mounted)
+
+
+    return {
+      tools,
+      getmenuByPath,
+
+    }
+  }
+})
+

src/components/CMenuItem/CMenuItem.vue

@@ -0,0 +1,64 @@
+<template>
+  <div :style="{ paddingLeft: `${level * 4}px` }">
+    <q-separator v-if="item.isseparator" />
+    <q-expansion-item
+      v-else-if="item.routes2 || item.sottoMenu"
+      :content-inset-level="item.level_parent"
+      :header-class="getmymenuclass(item)"
+      :header-inset-level="item.level_parent"
+      :icon="item.materialIcon"
+      :label="tools.getLabelByItem(item)"
+      active-class="my-menu-active"
+      :expand-icon-class="item.mainMenu ? 'my-menu-separat' : ''"
+      :expand-icon="
+        item.mainMenu || item.routes2 ? 'fas fa-chevron-down' : 'none'
+      "
+    >
+      <c-menu-item
+        v-for="(childItem, childIndex) in item.routes2 || item.sottoMenu"
+        :key="childIndex"
+        :item="getmenuByPath(childItem)"
+        :tools="tools"
+        :getroute="getroute"
+        :getmymenuclass="getmymenuclass"
+        :getimgiconclass="getimgiconclass"
+        :clBase="clBase"
+        :mainMenu="item.mainMenu"
+        :level="level + 1"
+      />
+    </q-expansion-item>
+    <q-item
+      v-else
+      clickable
+      :to="getroute(item)"
+      :content-inset-level="item.level_parent"
+      :header-inset-level="item.level_parent"
+      active-class="my-menu-active"
+      expand-icon="none"
+    >
+      <q-item-section thumbnail>
+        <q-avatar
+          :icon="item.materialIcon"
+          :size="!!item.iconsize ? item.iconsize : '2rem'"
+          :font-size="!!item.iconsize ? item.iconsize : '2rem'"
+          text-color="primary"
+          square
+          rounded
+        >
+        </q-avatar>
+      </q-item-section>
+
+      <q-item-section>
+        <span :class="item.extraclass">{{ tools.getLabelByItem(item) }}</span>
+        <span v-if="item.subtitle" class="subtitle">{{ item.subtitle }}</span>
+      </q-item-section>
+    </q-item>
+  </div>
+</template>
+
+<script lang="ts" src="./CMenuItem.ts">
+</script>
+
+<style lang="scss" scoped>
+@import './CMenuItem.scss';
+</style>

src/components/CMenuItem/index.ts

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