change whole backend and tables for gorm table references

simplify tables with table components close #31

src/vueLib/tables/roles/RoleTable.vue

@@ -59,13 +59,15 @@
         {{ $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"
@@ -153,6 +155,7 @@ import { useRoleTable } from './RoleTable';
 import { i18n } from 'src/boot/lang';
 import { QTable } from 'quasar';
 import { useUserStore } from 'src/vueLib/login/userStore';
+import SearchableInput from '../components/SearchableInput.vue';
 
 const { NotifyResponse } = useNotify();
 const editOneDialog = ref();