fixed problems with tailwind overwriting naive ui styles

implemented user datatable

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) {}
 

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

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']

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>

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}`),

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"

resources/js/pages/Users/Edit.vue

@@ -0,0 +1,6 @@
+<template>
+
+</template>
+
+<script setup lang="ts">
+</script>

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>

resources/views/app.edge

@@ -9,7 +9,7 @@
   @entryPointScripts('app')
 
   <title>enzos-events</title>
-  
+  <meta name="naive-ui-style" />  
 </head>
 <body>
   @inertia

tsconfig.vue.json

@@ -1,7 +1,7 @@
 {
     // tsconfig.vue.json
   
-    "extends": "@vue/tsconfig/tsconfig.json",
+    "extends": "@vue/tsconfig/tsconfig.web.json",
     "include": [
       "./resources/js/**/*"
     ],

webpack.config.js

@@ -210,7 +210,7 @@ Encore.enableVueLoader(() => {}, {
 */
 const config = Encore.getWebpackConfig()
 config.infrastructureLogging = {
-  level: 'info',
+  level: 'debug',
 }
 config.stats = 'errors-warnings'