Changes to import and notifications

resources/js/Pages/Testing/Index.vue

@@ -1,21 +1,98 @@
 <script setup>
-import AppLayout from '@/Layouts/AppLayout.vue'
+import { ref } from "vue";
+import AppLayout from "@/Layouts/AppLayout.vue";
+import DataTableClient from "@/Components/DataTable/DataTableClient.vue";
 
 const props = defineProps({
-  example: { type: String, default: 'Demo' },
-})
+  example: { type: String, default: "Demo" },
+});
+
+// Dummy columns
+const columns = [
+  { key: "id", label: "ID", sortable: true, class: "w-16" },
+  { key: "name", label: "Ime", sortable: true },
+  { key: "email", label: "Email", sortable: true },
+  {
+    key: "balance",
+    label: "Stanje",
+    sortable: true,
+    align: "right",
+    formatter: (row) =>
+      new Intl.NumberFormat("de-DE", { style: "currency", currency: "EUR" }).format(
+        row.balance
+      ),
+  },
+  { key: "created_at", label: "Ustvarjeno", sortable: true },
+];
+
+// Generate some dummy rows
+function makeRow(i) {
+  const bal = Math.round((Math.random() * 5000 - 1000) * 100) / 100;
+  const dt = new Date(Date.now() - Math.floor(Math.random() * 1000 * 60 * 60 * 24 * 90));
+  const iso = dt.toISOString().slice(0, 10);
+  return {
+    id: i + 1,
+    name: `Uporabnik ${i + 1}`,
+    email: `user${i + 1}@example.com`,
+    balance: bal,
+    created_at: iso,
+  };
+}
+// Increase dataset to visualize multi-page pagination (e.g., 100 pages at size 10)
+const rows = ref(Array.from({ length: 1000 }, (_, i) => makeRow(i)));
+
+// Controls (two-way bound)
+const sort = ref({ key: null, direction: null });
+const search = ref("");
+const page = ref(1);
+const pageSize = ref(10);
+const searchKeys = ["name", "email"];
+
+function onRowClick(row) {
+  // no-op demo; could show toast or details
+  console.debug("Row clicked:", row);
+}
 </script>
 
 <template>
   <AppLayout title="Testing Sandbox">
-    <div class="space-y-6">
+    <div class="space-y-6 p-6">
       <div class="prose dark:prose-invert max-w-none">
         <h1 class="text-2xl font-semibold">Testing Page</h1>
-        <p>This page is for quick UI or component experiments. Remove or adapt as needed.</p>
+        <p>
+          This page is for quick UI or component experiments. Remove or adapt as needed.
+        </p>
+        <p class="text-slate-700 dark:text-slate-200 text-sm">
+          Prop example value: <span class="font-mono">{{ props.example }}</span>
+        </p>
       </div>
-      <div class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm">
-        <h2 class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3">Example Area</h2>
-        <p class="text-slate-700 dark:text-slate-200 text-sm">Prop example value: <span class="font-mono">{{ props.example }}</span></p>
+
+      <div
+        class="rounded-lg border border-slate-200 dark:border-slate-700 bg-white/70 dark:bg-slate-800/60 p-4 shadow-sm"
+      >
+        <h2
+          class="text-sm font-semibold tracking-wide uppercase text-slate-500 dark:text-slate-400 mb-3"
+        >
+          DataTable (Client-side)
+        </h2>
+        <DataTableClient
+          :columns="columns"
+          :rows="rows"
+          v-model:sort="sort"
+          v-model:search="search"
+          v-model:page="page"
+          v-model:pageSize="pageSize"
+          :search-keys="searchKeys"
+          @row:click="onRowClick"
+        >
+          <template #actions="{ row }">
+            <button
+              class="px-2 py-1 rounded border border-gray-300 hover:bg-gray-50 text-xs"
+            >
+              Akcija
+            </button>
+          </template>
+        </DataTableClient>
       </div>
     </div>
   </AppLayout>