feat(webapp): add data view

src/App.vue

@@ -3,7 +3,7 @@
     :drawer-id="drawerId"
     :navigation-entries="navigationEntries"
   >
-    <router-view />
+    <RouterView />
   </MoleculeNavigationDrawer>
 </template>
 
@@ -40,6 +40,7 @@ const navigationEntries: INavigationEntry[] = [
     name: 'Börse',
     icon: TrendingUpIcon,
     to: '/stocks',
+    disabled: true,
   },
   {
     name: 'Radio',
@@ -48,7 +49,6 @@ const navigationEntries: INavigationEntry[] = [
   },
   {
     name: 'divider',
-    to: '',
   },
   {
     name: 'Abmelden',

src/components/molecules/MoleculeDataTable.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="overflow-x-auto">
+    <table class="table w-full table-zebra">
+      <thead class="sticky top-0">
+        <tr>
+          <th v-for="(_, key) of data[0]">{{ key }}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="entries in data">
+          <td
+            v-for="(entry, _, key) of entries"
+            :class="key >= 6 ? 'text-center': null"
+          >
+            <span v-if="key < 6">{{ entry }}</span>
+            <button
+              v-if="key == 6"
+              class="btn btn-sm btn-ghost p-1"
+            >
+              <DocumentTextIcon
+                class="h-6 w-6"
+              />
+            </button>
+            <button
+              v-if="key == 7"
+              class="btn btn-sm btn-ghost p-1"
+            >
+              <CurrencyDollarIcon
+                class="h-6 w-6"
+              />
+            </button>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>import { PropType } from 'vue';
+import { CurrencyDollarIcon, DocumentTextIcon } from '@heroicons/vue/outline';
+
+defineProps({
+  data: {
+    type: Array as PropType<object[]>,
+    required: true,
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/molecules/MoleculeNavigationDrawer.vue

@@ -5,7 +5,7 @@
       type="checkbox"
       class="drawer-toggle"
     />
-    <div class="drawer-content flex flex-col lg:p-6 lg:pt-0 bg-base-200 h-screen">
+    <div class="drawer-content flex flex-col lg:p-6 bg-base-300 h-screen">
       <div
         class="navbar shadow-lg bg-neutral-focus text-neutral-content lg:hidden sticky top-0 z-50 max-w-7xl place-self-center"
       >
@@ -31,7 +31,7 @@
         :for="drawerId"
         class="drawer-overlay"
       />
-      <ul class="menu p-4 overflow-y-auto w-80">
+      <ul class="menu p-4 overflow-y-auto w-64">
         <li class="pointer-events-none">
           <a>
             <AtomLogo class="w-28" />
@@ -39,9 +39,10 @@
         </li>
         <li
           v-for="navigationEntry of navigationEntries"
-          :class="navigationEntry.name === 'divider' ? 'menu-title' : null"
+          :class="getNavigationEntryClass(navigationEntry)"
         >
-          <RouterLink
+          <component
+            :is="!navigationEntry.to || navigationEntry.disabled ? 'span' : 'router-link'"
             v-if="navigationEntry.name !== 'divider'"
             :to="navigationEntry.to"
             active-class="active"
@@ -50,7 +51,7 @@
               :is="navigationEntry.icon"
               class="h-6 w-6"
             />{{ navigationEntry.name }}
-          </RouterLink>
+          </component>
         </li>
         <AtomSwap
           class="mt-auto place-self-end"
@@ -82,6 +83,14 @@ defineProps({
     required: true,
   },
 });
+
+const getNavigationEntryClass = (navigationEntry: INavigationEntry) => {
+  return {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'menu-title': navigationEntry.name === 'divider',
+    disabled: navigationEntry.disabled,
+  };
+};
 </script>
 
 <style lang="scss" scoped>

src/components/views/DataView.vue

@@ -1,8 +1,63 @@
 <template>
-  #Data
+  <MoleculeDataTable :data="data" />
 </template>
 
 <script lang="ts" setup>
+import MoleculeDataTable from '../molecules/MoleculeDataTable.vue';
+/* eslint-disable @typescript-eslint/naming-convention */
+const data = [
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  {
+    'Kontonummer': '0000123456',
+    'Name': 'John Doe',
+    'Geburtsdatum': '13.11.1998',
+    'Kontostand': '150,00 Öro',
+    'Adresse': 'Test-Straße 1, 74613 Öhringen',
+    'Letzter': '12.07.2022 17:39',
+    'Kontakt': null,
+    'Trans.': null,
+  },
+  /* eslint-enable @typescript-eslint/naming-convention */
+];
 
 </script>
 

src/interfaces/navigation-entry.interface.ts

@@ -3,6 +3,7 @@ import { RouteLocationRaw } from 'vue-router';
 
 export interface INavigationEntry {
   name: string;
-  to: RouteLocationRaw;
+  to?: RouteLocationRaw;
   icon?: FunctionalComponent;
+  disabled?: boolean;
 }