Changes to UI and other stuff

2025-11-20 18:11:43 +01:00
parent b7fa2d261b
commit 3b284fa4bd
87 changed files with 7872 additions and 2330 deletions
@@ -0,0 +1,86 @@
+<script setup>
+import { ref } from 'vue';
+import DataTableToolbar from './DataTableToolbar.vue';
+
+// Example: Using DataTableToolbar standalone
+const search = ref('');
+const pageSize = ref(10);
+const selectedCount = ref(0);
+
+const handleSearchChange = (value) => {
+  search.value = value;
+  console.log('Search changed:', value);
+};
+
+const handlePageSizeChange = (value) => {
+  pageSize.value = value;
+  console.log('Page size changed:', value);
+};
+
+const handleExport = (format) => {
+  console.log('Export:', format);
+};
+
+const handleAdd = () => {
+  console.log('Add button clicked');
+};
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Standalone DataTableToolbar -->
+    <DataTableToolbar
+      :search="search"
+      :show-search="true"
+      :show-page-size="true"
+      :page-size="pageSize"
+      :selected-count="selectedCount"
+      :show-selected-count="true"
+      :show-export="true"
+      :show-add="true"
+      :show-filters="true"
+      @update:search="handleSearchChange"
+      @update:page-size="handlePageSizeChange"
+      @export="handleExport"
+    >
+      <!-- Add button dropdown content -->
+      <template #add>
+        <button
+          @click="handleAdd"
+          class="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-50"
+        >
+          Dodaj novo
+        </button>
+      </template>
+
+      <!-- Custom options -->
+      <template #options>
+        <button class="px-3 py-1 text-sm bg-blue-100 text-blue-700 rounded">
+          Opcija 1
+        </button>
+      </template>
+
+      <!-- Filters -->
+      <template #filters>
+        <div class="space-y-2">
+          <label class="text-sm font-medium">Filtriraj po:</label>
+          <input type="text" class="w-full px-2 py-1 border rounded" />
+        </div>
+      </template>
+
+      <!-- Custom actions -->
+      <template #actions>
+        <button class="px-3 py-1 text-sm bg-gray-100 text-gray-700 rounded">
+          Akcija
+        </button>
+      </template>
+    </DataTableToolbar>
+
+    <!-- Your content here -->
+    <div class="p-4 bg-gray-50 rounded">
+      <p>Search: {{ search }}</p>
+      <p>Page Size: {{ pageSize }}</p>
+      <p>Selected: {{ selectedCount }}</p>
+    </div>
+  </div>
+</template>