From bda4b0489b8ce10a8b45327d62585c463a19cb94 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 9 Jul 2023 18:04:40 +0200
Subject: [PATCH] first datatable

---
 components.d.ts                      |  2 +-
 resources/js/Layouts/BELayout.vue    |  8 +++---
 resources/js/Layouts/LoginLayout.vue |  5 +++-
 resources/js/components/MainNav.vue  |  9 +++----
 resources/js/pages/Users/Index.vue   | 39 ++++++++++++++++++++--------
 webpack.config.js                    |  2 +-
 6 files changed, 41 insertions(+), 24 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index c6953a9..225e00b 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,9 +8,9 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     NButton: typeof import('naive-ui')['NButton']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
-    NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
     NMenu: typeof import('naive-ui')['NMenu']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
diff --git a/resources/js/Layouts/BELayout.vue b/resources/js/Layouts/BELayout.vue
index 108a9ea..7200fd5 100644
--- a/resources/js/Layouts/BELayout.vue
+++ b/resources/js/Layouts/BELayout.vue
@@ -1,13 +1,13 @@
 <template>
-    <LoginLayout>
+    <LoginLayout class="w-3/5">
         <MainNav />
         <slot></slot>
 
     </LoginLayout>
 </template>
 
-<script setup>
-    import LoginLayout from '@/layouts/LoginLayout'
-    import MainNav from '@/components/MainNav'
+<script lang="ts" setup>
+    import LoginLayout from '@/layouts/LoginLayout.vue'
+    import MainNav from '@/components/MainNav.vue'
 
 </script>
\ No newline at end of file
diff --git a/resources/js/Layouts/LoginLayout.vue b/resources/js/Layouts/LoginLayout.vue
index 7d1f96e..f71fa2d 100644
--- a/resources/js/Layouts/LoginLayout.vue
+++ b/resources/js/Layouts/LoginLayout.vue
@@ -1,10 +1,13 @@
 <template>
     <main class="bg-slate-100 flex justify-center h-screen">
-        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow">
+        <div class="m-auto bg-white p-4 border rounded space-y-4 drop-shadow" :class="class">
                 <slot></slot>
         </div>
     </main>
 </template>
 
 <script setup lang="ts">
+
+defineProps(['class'])
+
 </script>
diff --git a/resources/js/components/MainNav.vue b/resources/js/components/MainNav.vue
index fcea292..6070198 100644
--- a/resources/js/components/MainNav.vue
+++ b/resources/js/components/MainNav.vue
@@ -1,10 +1,12 @@
 <template>
-    <n-menu 
+    <div class="flex justify-center">
+        <n-menu 
         v-model:value="activeKey" 
         mode="horizontal" 
         :options="menuOptions" 
         class="-mx-4"
     />
+    </div>
 </template>
 
 <script lang="ts" setup>
@@ -25,8 +27,6 @@
     const activeKey: Ref<string> = ref((usePage().props.request as any)?.url)
     const user: User = usePage().props.user as User
     
-    console.log(usePage().props.request)
-
     const menuOptions: MenuOption[] = []
 
     menuOptions.push({
@@ -85,9 +85,6 @@
             icon: renderIcon(Logout)
         }]
     })
-    menuOptions.push({
-        
-    })
 
     
 
diff --git a/resources/js/pages/Users/Index.vue b/resources/js/pages/Users/Index.vue
index 6a5bdde..ca2657c 100644
--- a/resources/js/pages/Users/Index.vue
+++ b/resources/js/pages/Users/Index.vue
@@ -3,25 +3,42 @@
         <FlashMessages 
             :messages="props.flashMessages"
         />
-    </n-message-provider>
- <div>
-    Bin in Users
- </div>
- <div>
-   {{ users }}
- </div>
+   </n-message-provider>
+   <n-data-table 
+      :columns="columns"
+      :data="users"
+   />
+   <div>
+      {{ users }}
+   </div>
 </template>
 
 <script setup lang="ts">
 
 import BELayout from '@/layouts/BELayout.vue'
 import FlashMessages from '@/components/FlashMessages.vue'
+import type { User } from '../../types/User'
+import type { DataTableColumns } from 'naive-ui'
 
 defineOptions({ layout: BELayout })
 
-const props = defineProps({
-   users: Object,
-   flashMessages: Object
-})
+const props = defineProps<{
+   users?: User[],
+   flashMessages?: Object
+}>()
 
+const columns: DataTableColumns<User> = [
+   {
+      title: "ID",
+      key: "id",
+   },
+   {
+      title: "Benutzername",
+      key: "username",
+   },
+   {
+      title: "Admin?",
+      key: "is_admin",
+   }
+]
 </script>
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 6b37d68..6080932 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,4 +1,4 @@
-const { join, resolve } = require('path')
+const { join } = require('path')
 const Encore = require('@symfony/webpack-encore')
 const Components = require('unplugin-vue-components/webpack')
 const { NaiveUiResolver } = require('unplugin-vue-components/resolvers')