feat(webapp): add company overview in admin settings

webapp/src/components/views/ViewCompaniesData.vue

@@ -0,0 +1,117 @@
+<template>
+  <MoleculeAuthDialog v-if="!isAdmin" />
+  <div
+    v-else
+    class="flex h-full flex-col p-6"
+  >
+    <AtomInput
+      v-model="searchQuery"
+      placeholder="Nach Firmenname suchen"
+      class="mb-4"
+    />
+    <MoleculeDataTable
+      v-if="companies && changeAccountNumberModal"
+      :table-headers="tableHeaders"
+      :data="companies"
+      @change-account-number="changeAccountNumberModal.show($event);"
+    />
+    <MoleculeChanceAccountNumberModal
+      id="changeAccountNumber"
+      ref="changeAccountNumberModal"
+      title="Kontonummer ändern"
+      @submit="changeAccountNumber"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, watch } from 'vue';
+import { useEventBus } from '@vueuse/core';
+import { UnsubscribeFunc } from 'pocketbase';
+import { CompaniesResponse } from '../../types/pocketbase.types';
+import { AuthService } from '../../services/auth.service';
+import AtomInput from '../atoms/AtomInput.vue';
+import MoleculeDataTable, { TableHeaderType } from '../molecules/MoleculeDataTable.vue';
+import MoleculeAuthDialog from '../molecules/MoleculeAuthDialog.vue';
+import MoleculeChanceAccountNumberModal from '../molecules/MoleculeChanceAccountNumberModal.vue';
+import { CompanyService } from '../../services/company.service';
+
+const isAdmin = ref(false);
+const companiesSubscription = ref<UnsubscribeFunc>();
+const changeAccountNumberModal = ref<InstanceType<typeof MoleculeChanceAccountNumberModal>>();
+
+const companies = ref<CompaniesResponse[]>([]);
+const initCompanies = ref<CompaniesResponse[]>([]);
+const searchQuery = ref('');
+const tableHeaders = [
+  {
+    title: 'Kontonummer',
+    key: 'accountNumber',
+    type: TableHeaderType.STRING,
+  },
+  {
+    title: 'Name',
+    key: 'name',
+    type: TableHeaderType.STRING,
+  },
+  {
+    title: 'Trans.',
+    key: '',
+    type: TableHeaderType.BUTTON_ACCOUNT,
+  },
+  {
+    title: 'Knr. änd.',
+    key: '',
+    type: TableHeaderType.BUTTON_CHANGE_ACCOUNT_NUMBER,
+  },
+];
+
+useEventBus<boolean>('isAdmin').on(state => {
+  isAdmin.value = state;
+  if(isAdmin.value) {
+    getData();
+  }
+});
+
+async function getData() {
+  initCompanies.value = await CompanyService.getCompanies();
+  companies.value = initCompanies.value;
+}
+
+watch(
+  searchQuery,
+  (value) => {
+    search(value);
+  },
+);
+
+function search(value: string) {
+  if(initCompanies.value) {
+    companies.value = initCompanies.value.filter((company) =>
+      company.name?.toLocaleLowerCase().includes(value.toLocaleLowerCase()),
+    );
+  }
+}
+
+function changeAccountNumber(account: {id: string, accountNumber: string}) {
+  CompanyService.updateAccountNumber(account.id, account.accountNumber);
+}
+
+onMounted(async () => {
+  isAdmin.value = AuthService.isAdmin();
+  if(isAdmin.value) {
+    getData();
+  }
+  companiesSubscription.value = await CompanyService.subscribeToCompanyChanges(async () => {
+    await getData();
+    search(searchQuery.value);
+  });
+});
+
+onUnmounted(() => {
+  companiesSubscription.value?.();
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

webapp/src/components/views/ViewStatePortal.vue

@@ -71,6 +71,13 @@
             <UsersIcon class="h-5 w-5" />
             Stammdaten-Übersicht
           </RouterLink>
+          <RouterLink
+            class="btn"
+            :to="{ name: 'companies-data' }"
+          >
+            <BriefcaseIcon class="h-5 w-5" />
+            Firmen-Übersicht
+          </RouterLink>
           <RouterLink
             class="btn"
             :to="{ name: 'admin' }"

webapp/src/router/router.ts

@@ -3,6 +3,7 @@ import ViewAdmin from '../components/views/ViewAdmin.vue';
 import ViewBank from '../components/views/ViewBank.vue';
 import ViewCheckIn from '../components/views/ViewCheckIn.vue';
 import ViewData from '../components/views/ViewData.vue';
+import ViewCompaniesData from '../components/views/ViewCompaniesData.vue';
 import ViewEmployer from '../components/views/ViewEmployer.vue';
 import ViewRadio from '../components/views/ViewRadio.vue';
 import ViewStatePortal from '../components/views/ViewStatePortal.vue';
@@ -14,6 +15,11 @@ const routes = [
     name: 'data',
     component: ViewData,
   },
+  {
+    path: '/companies-data',
+    name: 'companies-data',
+    component: ViewCompaniesData,
+  },
   {
     path: '/admin',
     name: 'admin',
@@ -52,6 +58,7 @@ const router = VueRouter.createRouter({
 });
 
 router.beforeEach((to) => {
+  window.scrollTo(0, 0);
   if(to.name === 'admin') {
     useEventBus<boolean>('hideNavigation').emit(true);
   } else {

webapp/src/services/account.service.ts

@@ -31,7 +31,6 @@ export class AccountService {
   public static async updateWage(accountId: string, wageFactor: number): Promise<AccountsResponse> {
     return COLLECTION.update(accountId, { wageFactor });
   }
-
   public static async subscribeToAccountChanges(
     callback: (data: RecordSubscription<AccountsResponse>)=> void,
   ): Promise<UnsubscribeFunc> {

webapp/src/services/company.service.ts

@@ -1,4 +1,4 @@
-import { RecordAuthResponse } from 'pocketbase';
+import { RecordAuthResponse, RecordSubscription, UnsubscribeFunc } from 'pocketbase';
 import { Collections, CompaniesRecord, CompaniesResponse } from '../types/pocketbase.types';
 import { PocketbaseService } from './pocketbase.service';
 import { useEventBus } from '@vueuse/core';
@@ -43,4 +43,14 @@ export class CompanyService {
   public static async getCompanyByAccountNumber(accountNumber: string): Promise<CompaniesResponse> {
     return COLLECTION.getFirstListItem(`accountNumber="${accountNumber}"`);
   }
+  public static async updateAccountNumber(accountId: string, accountNumber: string): Promise<CompaniesResponse> {
+    return COLLECTION.update(accountId, { accountNumber });
+  }
+  public static async subscribeToCompanyChanges(
+    callback: (data: RecordSubscription<CompaniesResponse>)=> void,
+  ): Promise<UnsubscribeFunc> {
+    return await COLLECTION.subscribe<CompaniesResponse>('*', (data) => {
+      callback(data);
+    });
+  }
 }