change whole backend and tables for gorm table references

simplify tables with table components close #31

src/vueLib/tables/events/EventsTable.vue

@@ -23,27 +23,14 @@
       class="bigger-table-text"
     >
       <template v-slot:top-left>
-        <q-btn-group push flat style="color: grey">
-          <q-btn
-            v-if="user.isPermittedTo('events', 'write')"
-            dense
-            flat
-            icon="add"
-            @click="openAllValueDialog(null)"
-          >
-            <q-tooltip>{{ $t('addNewEvent') }}</q-tooltip>
-          </q-btn>
-          <q-btn
-            v-if="user.isPermittedTo('events', 'write')"
-            dense
-            flat
-            style="color: grey"
-            :icon="selectOption ? 'check_box' : 'check_box_outline_blank'"
-            @click="selectOption = !selectOption"
-          >
-            <q-tooltip>{{ $t('selectEventOptions') }}</q-tooltip>
-          </q-btn>
-        </q-btn-group>
+        <TopButtonGroup
+          :permit-add="user.isPermittedTo('events', 'write')"
+          v-on:add="openAllValueDialog(null)"
+          :tool-tip-add="$t('addNewEvent')"
+          :permit-select="user.isPermittedTo('events', 'write')"
+          :tool-tip-select="$t('selectEventOptions')"
+          v-model:select-option="selectOption"
+        />
         <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">
@@ -60,67 +47,49 @@
           {{ $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 v-if="props.col.field === 'attendees'" :props="props">
           <q-btn dense flat icon="people" @click="openAttendees(props.rowIndex, props.row)"
             ><q-badge color="primary" text-color="primary-text" floating transparent>{{
-              props.row.count
+              props.row.attendees.length
             }}</q-badge></q-btn
           >
         </q-td>
-        <q-td
+        <component
           v-else
-          :props="props"
-          :style="
-            user.isPermittedTo('events', 'write') && props.col.field !== 'count'
-              ? 'cursor: pointer'
-              : ''
-          "
-          @click="
-            user.isPermittedTo('events', 'write') &&
-            props.col.field !== 'count' &&
-            openSingleValueDialog(props.col.label, props.col.name, props.row)
-          "
-        >
-          {{ props.value }}
-        </q-td>
+          :td-props="props"
+          :is="props.col.component"
+          :permitted="user.isPermittedTo('events', 'write') && props.col.field !== 'count'"
+          v-on:onClick="openSingleValueDialog(props.col.label, props.col.name, props.row)"
+          :value="props.value"
+        />
+      </template>
+      <template v-slot:body-cell-day="props">
+        <component
+          :td-props="props"
+          :is="props.col.component"
+          :value="props.value ? $t(props.value) : ''"
+        />
       </template>
       <template v-slot:body-cell-option="props">
-        <q-td :props="props">
-          <q-btn
-            v-if="user.isPermittedTo('events', 'write') || user.isPermittedTo('events', '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('events', 'write')"
-              clickable
-              v-close-popup
-              @click="openAllValueDialog(props.row)"
-              class="text-primary"
-              >{{ $t('edit') }}</q-item
-            >
-            <q-item
-              v-if="user.isPermittedTo('events', '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"
+          :permitEdit="user.isPermittedTo('events', 'write')"
+          :permitDelete="user.isPermittedTo('events', 'delete')"
+          :editFunction="() => openAllValueDialog(props.row)"
+          :removeFunction="() => openRemoveDialog(props.row)"
+        >
+        </component>
       </template>
     </q-table>
   </div>
@@ -159,6 +128,8 @@ import { useUserStore } from 'src/vueLib/login/userStore';
 import AttendeesTableDialog from '../attendees/AttendeesTableDialog.vue';
 import type { Members } from 'src/vueLib/models/member';
 import { i18n } from 'src/boot/lang';
+import SearchableInput from '../components/SearchableInput.vue';
+import TopButtonGroup from '../components/TopButtonGroup.vue';
 
 export interface EventDialog {
   getSelected: () => Events;