change whole backend and tables for gorm table references

simplify tables with table components close #31

src/vueLib/tables/group/GroupTable.ts

@@ -3,6 +3,8 @@ import { ref, computed } from 'vue';
 import type { Members } from 'src/vueLib/models/member';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
+import ClickableComponent from '../components/ClickableComponent.vue';
+import MenuComponent from '../components/MenuComponent.vue';
 
 export function useGroupTable() {
   const groups = ref<Members>([]);
@@ -21,8 +23,16 @@ export function useGroupTable() {
       label: i18n.global.t('name'),
       field: 'name',
       sortable: true,
+      component: ClickableComponent,
+    },
+    {
+      name: 'option',
+      align: 'center' as const,
+      label: '',
+      field: 'option',
+      icon: 'option',
+      component: MenuComponent,
     },
-    { name: 'option', align: 'center' as const, label: '', field: 'option', icon: 'option' },
   ]);
 
   const { NotifyResponse } = useNotify();

src/vueLib/tables/group/GroupTable.vue

@@ -23,27 +23,16 @@
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
-          <q-btn
-            v-if="user.isPermittedTo('group', 'write')"
-            dense
-            flat
-            icon="add"
-            @click="openGroupDialog()"
-          >
-            <q-tooltip>{{ $t('addNewgroup') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectgroupOptions') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
+        <TopButtonGroup
+          :permit-add="user.isPermittedTo('group', 'write')"
+          v-on:add="openGroupDialog"
+          :tool-tip-add="$t('addNewgroup')"
+          :permit-select="
+            user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')
+          "
+          v-model:select-option="selectOption"
+          :tool-tip-select="$t('selectgroupOptions')"
+        />
         <div v-if="selectOption && selected.length > 0">
           <q-btn flat dense icon="more_vert" @click="openSubmenu = true" />
           <q-menu v-if="openSubmenu" anchor="bottom middle" self="top middle">
@@ -61,49 +50,35 @@
           {{ $t('selected') }}: {{ selected.length }}
         </div>
       </template>
+
+      <!-- top right of table-->
+
       <template v-slot:top-right>
-        <q-input filled dense debounce="300" v-model="filter" :placeholder="$t('search')">
-          <template v-slot:append>
-            <q-icon name="search" />
-          </template>
-        </q-input>
+        <SearchableInput v-model="filter" :placeholder="$t('search')" />
       </template>
+
+      <!-- table body content-->
       <template v-slot:body-cell="props">
-        <q-td
-          :props="props"
-          :style="user.isPermittedTo('group', 'write') ? 'cursor: pointer' : ''"
-          @click="
-            user.isPermittedTo('group', 'write') && openGroupDialog(props.col.label, props.row)
-          "
-        >
-          {{ props.value }}
-        </q-td>
+        <component
+          :is="props.col.component"
+          :td-props="props"
+          :permitted="user.isPermittedTo('group', 'write')"
+          v-on:onClick="openGroupDialog(props.col.label, props.row)"
+          :value="props.value"
+        />
       </template>
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
-          <q-btn
-            v-if="user.isPermittedTo('group', 'write') || user.isPermittedTo('group', 'delete')"
-            flat
-            dense
-            icon="more_vert"
-            @click="openSubmenu = true"
-          />
-          <q-menu v-if="openSubmenu" anchor="top right" self="top left">
-            <q-item
-              v-if="user.isPermittedTo('group', 'delete')"
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
-              class="text-negative"
-              title="zu"
-              >{{ $t('delete') }}</q-item
-            >
-          </q-menu>
-        </q-td>
+        <component
+          :td-props="props"
+          :is="props.col.component"
+          :permitDelete="user.isPermittedTo('group', 'delete')"
+          :removeFunction="() => openRemoveDialog(props.row)"
+        >
+        </component>
       </template>
     </q-table>
   </div>
-  <DialogFrame ref="groupDialog" :header-title="$t('addNewgroup')" :height="600" :width="500">
+  <DialogFrame ref="groupDialog" :header-title="$t('addNewgroup')" :height="250" :width="350">
     <q-form ref="form">
       <div class="row justify-center q-gutter-md">
         <q-input
@@ -145,10 +120,8 @@ import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
 import type { Group, Groups } from 'src/vueLib/models/group';
-
-export interface groupDialog {
-  getSelected: () => Groups;
-}
+import SearchableInput from '../components/SearchableInput.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
 
 const { NotifyResponse } = useNotify();
 const groupDialog = ref();