change whole backend and tables for gorm table references

simplify tables with table components close #31

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -10,7 +10,7 @@
       :loading-label="$t('loading')"
       :rows-per-page-label="$t('recordsPerPage')"
       :selected-rows-label="(val) => val + ' ' + $t('recordSelected')"
-      :rows="responsibles"
+      :rows="responsibleMember"
       :columns="columns"
       row-key="id"
       v-model:pagination="pagination"
@@ -23,30 +23,17 @@
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
-          <q-btn
-            v-if="user.isPermittedTo('responsible', 'write')"
-            dense
-            flat
-            icon="add"
-            @click="openResponsibleDialog"
-          >
-            <q-tooltip>{{ $t('addNewResponsible') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="
-              user.isPermittedTo('responsible', 'write') ||
-              user.isPermittedTo('responsible', 'delete')
-            "
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectResponsibleOptions') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
+        <TopButtonGroup
+          :permit-add="user.isPermittedTo('responsible', 'write')"
+          v-on:add="openResponsibleDialog"
+          :tool-tip-add="$t('addNewResponsible')"
+          :permit-select="
+            user.isPermittedTo('responsible', 'write') ||
+            user.isPermittedTo('responsible', 'delete')
+          "
+          v-model:select-option="selectOption"
+          :tool-tip-select="$t('selectResponsibleOptions')"
+        />
         <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">
@@ -64,42 +51,26 @@
           {{ $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">
-          {{ props.value }}
-        </q-td>
+        <component :td-props="props" :is="props.col.component" :value="props.value" />
       </template>
+
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
-          <q-btn
-            v-if="
-              user.isPermittedTo('responsible', 'write') ||
-              user.isPermittedTo('responsible', '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('responsible', 'delete')"
-              clickable
-              v-close-popup
-              @click="openRemoveDialog(props.row)"
-              class="text-negative"
-              title="zu"
-              >{{ $t('delete') }}</q-item
-            >
-          </q-menu>
-        </q-td>
+        <component
+          :is="props.col.component"
+          :td-props="props"
+          :permitDelete="user.isPermittedTo('responsible', 'delete')"
+          :removeFunction="() => openRemoveDialog(props.row)"
+        >
+        </component>
       </template>
     </q-table>
   </div>
@@ -111,7 +82,7 @@
   >
     <MembersTable
       add-responsible
-      :compare-members="responsibles"
+      :compare-members="responsibleMember"
       v-on:update-event="updateResponsibles"
     />
   </DialogFrame>
@@ -133,17 +104,16 @@ import { appApi } from 'src/boot/axios';
 import { ref, onMounted } from 'vue';
 import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
 import MembersTable from '../members/MembersTable.vue';
-import type { Member, Members } from 'src/vueLib/models/member';
+import type { Members } from 'src/vueLib/models/member';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useResponsibleTable } from './ResponsibleTable';
 import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
-
-export interface ResponsibleDialog {
-  getSelected: () => Members;
-}
+import type { Responsible, Responsibles } from 'src/vueLib/models/responsible';
+import SearchableInput from '../components/SearchableInput.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
 
 const { NotifyResponse } = useNotify();
 const responsibleDialog = ref();
@@ -155,7 +125,8 @@ const openSubmenu = ref(false);
 const filter = ref('');
 const user = useUserStore();
 
-const { responsibles, pagination, loading, columns, updateResponsibles } = useResponsibleTable();
+const { responsibleMember, pagination, loading, columns, updateResponsibles } =
+  useResponsibleTable();
 
 //load on mounting page
 onMounted(() => {
@@ -198,14 +169,14 @@ function openRemoveDialog(...Responsibles: Members) {
 }
 
 //remove Responsible from database
-function removeResponsible(...removeResponsibles: Members) {
+async function removeResponsible(...removeResponsibles: Responsibles) {
   const ResponsibleIds: number[] = [];
 
-  removeResponsibles.forEach((Responsible: Member) => {
-    ResponsibleIds.push(Responsible.id);
+  removeResponsibles.forEach((Responsible: Responsible) => {
+    if (Responsible.id) ResponsibleIds.push(Responsible.id);
   });
 
-  appApi
+  await appApi
     .post('responsible/delete', { ids: ResponsibleIds })
     .then(() => {
       updateResponsibles().catch((err) => {
@@ -217,6 +188,7 @@ function removeResponsible(...removeResponsibles: Members) {
     .finally(() => {
       loading.value = false;
     });
+  await updateResponsibles();
 }
 </script>