From 360fa51607ca1d7aa264ad6994137fa124d569e2 Mon Sep 17 00:00:00 2001
From: Sockenklaus <sockenklaus@gmail.com>
Date: Sun, 9 Jul 2023 22:37:43 +0200
Subject: [PATCH] fixed problems with tailwind overwriting naive ui styles
 implemented user datatable

---
 app/Controllers/Http/UsersController.ts | 10 +++-
 app/Policies/UserPolicy.ts              |  8 +++
 components.d.ts                         |  1 +
 resources/js/Layouts/BELayout.vue       | 10 ++--
 resources/js/app.ts                     |  1 -
 resources/js/pages/Login.vue            |  1 -
 resources/js/pages/Users/Edit.vue       |  6 +++
 resources/js/pages/Users/Index.vue      | 69 +++++++++++++++++++++----
 resources/views/app.edge                |  2 +-
 tsconfig.vue.json                       |  2 +-
 webpack.config.js                       |  2 +-
 11 files changed, 93 insertions(+), 19 deletions(-)
 create mode 100644 resources/js/pages/Users/Edit.vue

diff --git a/app/Controllers/Http/UsersController.ts b/app/Controllers/Http/UsersController.ts
index 4c6aa2a..297587e 100644
--- a/app/Controllers/Http/UsersController.ts
+++ b/app/Controllers/Http/UsersController.ts
@@ -34,7 +34,15 @@ export default class UsersController {
     return inertia.render('Users/Show', { queriedUser })
   }
 
-  public async edit({}: HttpContextContract) {}
+  public async edit({ bouncer, params, inertia }: HttpContextContract) {
+    const queriedUser: User = await User.findByOrFail('id', params.id)
+
+    await bouncer
+      .with("UserPolicy")
+      .authorize('edit', queriedUser)
+
+      return inertia.render("Users/Edit", { queriedUser })
+  }
 
   public async update({}: HttpContextContract) {}
 
diff --git a/app/Policies/UserPolicy.ts b/app/Policies/UserPolicy.ts
index f5549e4..9b11ea3 100644
--- a/app/Policies/UserPolicy.ts
+++ b/app/Policies/UserPolicy.ts
@@ -5,10 +5,18 @@ export default class UserPolicy extends BasePolicy {
     public async index(user: User) {
         return user.isAdmin
     }
+
+    public async create(user: User) {
+        return user.isAdmin
+    }
     
     public async show(user: User, query: User) {
         return user.isAdmin || user.id === query.id
     }
+
+    public async edit(user: User, query: User) {
+        return user.isAdmin || user.id === query.id
+    }
     
     public async update(user: User, query: User) {
         return user.isAdmin || user.id === query.id
diff --git a/components.d.ts b/components.d.ts
index 225e00b..f702939 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     NButton: typeof import('naive-ui')['NButton']
+    NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDataTable: typeof import('naive-ui')['NDataTable']
     NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
diff --git a/resources/js/Layouts/BELayout.vue b/resources/js/Layouts/BELayout.vue
index 7200fd5..d476f8d 100644
--- a/resources/js/Layouts/BELayout.vue
+++ b/resources/js/Layouts/BELayout.vue
@@ -1,9 +1,11 @@
 <template>
-    <LoginLayout class="w-3/5">
-        <MainNav />
-        <slot></slot>
+    <n-config-provider preflight-style-disabled>
+        <LoginLayout class="w-3/5">
+            <MainNav />
+            <slot></slot>
 
-    </LoginLayout>
+        </LoginLayout>
+    </n-config-provider>
 </template>
 
 <script lang="ts" setup>
diff --git a/resources/js/app.ts b/resources/js/app.ts
index 1789b19..b6a41d5 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -1,7 +1,6 @@
 import '../css/app.css'
 import { createApp, h } from "vue";
 import { createInertiaApp, Link } from "@inertiajs/vue3";
-import '../css/app.css'
 
 createInertiaApp({
   resolve: (name) => require(`./pages/${name}`),
diff --git a/resources/js/pages/Login.vue b/resources/js/pages/Login.vue
index 6bf670e..8c69220 100644
--- a/resources/js/pages/Login.vue
+++ b/resources/js/pages/Login.vue
@@ -37,7 +37,6 @@
 
         <div class="flex justify-center">
             <n-button 
-                class="bg-[#18A058]" 
                 type="success" 
                 @click="onClickLogin"
                 :disabled="!form.password || !form.username"
diff --git a/resources/js/pages/Users/Edit.vue b/resources/js/pages/Users/Edit.vue
new file mode 100644
index 0000000..e59be1d
--- /dev/null
+++ b/resources/js/pages/Users/Edit.vue
@@ -0,0 +1,6 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+</script>
\ No newline at end of file
diff --git a/resources/js/pages/Users/Index.vue b/resources/js/pages/Users/Index.vue
index ca2657c..053fba4 100644
--- a/resources/js/pages/Users/Index.vue
+++ b/resources/js/pages/Users/Index.vue
@@ -7,18 +7,26 @@
    <n-data-table 
       :columns="columns"
       :data="users"
+      row-class-name="group"
    />
-   <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'
+import type { VNode } from 'vue'
+
+import { h } from 'vue'
+import BELayout from '@/layouts/BELayout.vue'
+import FlashMessages from '@/components/FlashMessages.vue'
+import { NIcon, NButton } from 'naive-ui'
+
+import {
+   AdminPanelSettingsFilled as Admin,
+   EditRound as Edit,
+   DeleteRound as Delete,
+} from '@vicons/material'
 
 defineOptions({ layout: BELayout })
 
@@ -29,16 +37,59 @@ const props = defineProps<{
 
 const columns: DataTableColumns<User> = [
    {
-      title: "ID",
-      key: "id",
+      title: "Admin",
+      key: "is_admin",
+      align: "center",
+      render (row) {
+         if(row.is_admin) {
+            return h(
+               NIcon,
+               { size: 20, component: Admin, class: "align-middle" }
+            )
+         }
+      }
    },
    {
       title: "Benutzername",
       key: "username",
    },
    {
-      title: "Admin?",
-      key: "is_admin",
+      title: "Aktionen",
+      key: "actions",
+      className: "space-x-4",
+      render(row) {
+         let arr: VNode[] = []
+         arr[0] = h(
+            NButton,
+            { 
+               class: "invisible group-hover:visible align-middle",
+               circle: true,
+               onClick: () => { clickEdit(row.id) },
+               renderIcon: () => { return h(NIcon, { component: Edit, size: 20 }) },
+            },
+         )
+         arr[1] = h(
+            NButton,
+            { 
+               class: "invisible group-hover:visible align-middle",
+               secondary: true,
+               circle: true,
+               type: "error",
+               onClick: () => { clickDelete(row.id) },
+               renderIcon: () => { return h(NIcon, { component: Delete, size: 20 }) },
+            },
+         )
+         return arr
+      }
    }
 ]
+
+function clickEdit(id: Number){
+   console.log("Edit clicked: "+id)
+}
+
+function clickDelete(id: Number){
+   console.log("Delete clicked: "+id)
+}
+
 </script>
\ No newline at end of file
diff --git a/resources/views/app.edge b/resources/views/app.edge
index 9dbe3c1..6d57f02 100644
--- a/resources/views/app.edge
+++ b/resources/views/app.edge
@@ -9,7 +9,7 @@
   @entryPointScripts('app')
 
   <title>enzos-events</title>
-  
+  <meta name="naive-ui-style" />  
 </head>
 <body>
   @inertia
diff --git a/tsconfig.vue.json b/tsconfig.vue.json
index f14b6cf..25112d5 100644
--- a/tsconfig.vue.json
+++ b/tsconfig.vue.json
@@ -1,7 +1,7 @@
 {
     // tsconfig.vue.json
   
-    "extends": "@vue/tsconfig/tsconfig.json",
+    "extends": "@vue/tsconfig/tsconfig.web.json",
     "include": [
       "./resources/js/**/*"
     ],
diff --git a/webpack.config.js b/webpack.config.js
index 6080932..df320da 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -210,7 +210,7 @@ Encore.enableVueLoader(() => {}, {
 */
 const config = Encore.getWebpackConfig()
 config.infrastructureLogging = {
-  level: 'info',
+  level: 'debug',
 }
 config.stats = 'errors-warnings'