pgo-uiux2 1.0.0

package/src/components/pgo/StackedTableView.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="w-full space-y-4">
+    <!-- Search + Filters Bar -->
+    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-3">
+      <input
+        v-model="searchQuery"
+        type="text"
+        placeholder="Search..."
+        class="border border-gray-200 px-4 py-2 w-full md:w-64"
+      />
+
+      <div class="flex flex-wrap gap-2 items-center">
+        <div v-for="f in filters" :key="f.key" class="flex items-center gap-2">
+          <label class="text-sm font-medium">{{ f.label }}</label>
+          <select v-model="activeFilters[f.key]" class="border border-gray-200 px-3 py-2">
+            <option value="">All</option>
+            <option v-for="o in f.options" :key="o.value" :value="o.value">{{ o.label }}</option>
+          </select>
+        </div>
+      </div>
+    </div>
+
+    <!-- Table (Desktop) -->
+    <div class="hidden md:block border border-gray-200 overflow-hidden">
+      <table class="w-full text-left">
+        <thead class="bg-gray-100">
+          <tr>
+            <th
+              v-for="col in columns"
+              :key="col.key"
+              class="px-4 py-3 cursor-pointer select-none"
+              @click="toggleSort(col.key)"
+            >
+              <div class="flex items-center gap-1">
+                <span>{{ col.label }}</span>
+                <span v-if="sortKey === col.key">{{ sortDirection === 'asc' ? '▲' : '▼' }}</span>
+              </div>
+            </th>
+            <th class="px-4 py-3">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="item in paginatedData" :key="item.id" class="border-t border-gray-200">
+            <td v-for="col in columns" :key="col.key" class="px-4 py-3">{{ item[col.key] }}</td>
+            <td class="px-4 py-3">
+              <button class="text-blue-600 hover:underline" @click="emit('view', item)">View</button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- Stacked Cards (Mobile) -->
+    <div class="md:hidden space-y-4">
+      <div
+        v-for="item in paginatedData"
+        :key="item.id"
+        class="border border-gray-200 p-4 shadow-sm space-y-2"
+      >
+        <div v-for="col in columns" :key="col.key" class="flex justify-between">
+          <span class="text-sm font-medium">{{ col.label }}</span>
+          <span class="text-sm">{{ item[col.key] }}</span>
+        </div>
+
+        <div class="pt-2 border-t mt-2">
+          <button class="text-blue-600 hover:underline" @click="emit('view', item)">View</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- Pagination -->
+    <div class="flex items-center justify-between pt-4">
+      <button
+        class="px-3 py-2 border border-gray-200"
+        :disabled="page === 1"
+        @click="page--"
+      >Prev</button>
+
+      <span>Page {{ page }} / {{ totalPages }}</span>
+
+      <button
+        class="px-3 py-2 border border-gray-200"
+        :disabled="page === totalPages"
+        @click="page++"
+      >Next</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  data: { type: Array, required: true },
+  columns: { type: Array, required: true },
+  filters: { type: Array, default: () => [] },
+})
+
+const emit = defineEmits(['view'])
+
+// Search
+const searchQuery = ref('')
+
+// Filters
+const activeFilters = ref({})
+props.filters.forEach(f => (activeFilters.value[f.key] = ''))
+
+// Sorting
+const sortKey = ref(null)
+const sortDirection = ref('asc')
+
+function toggleSort(key) {
+  if (sortKey.value === key) {
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc'
+  } else {
+    sortKey.value = key
+    sortDirection.value = 'asc'
+  }
+}
+
+// Pagination
+const page = ref(1)
+const pageSize = 10
+
+const filteredData = computed(() => {
+  let result = [...props.data]
+
+  // Search
+  if (searchQuery.value) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter(item =>
+      Object.values(item).some(v => String(v).toLowerCase().includes(q))
+    )
+  }
+
+  // Filters
+  props.filters.forEach(f => {
+    const active = activeFilters.value[f.key]
+    if (active) {
+      result = result.filter(item => item[f.key] === active)
+    }
+  })
+
+  // Sorting
+  if (sortKey.value) {
+    result.sort((a, b) => {
+      const v1 = a[sortKey.value]
+      const v2 = b[sortKey.value]
+      if (v1 === v2) return 0
+      return sortDirection.value === 'asc' ? (v1 > v2 ? 1 : -1) : (v1 < v2 ? 1 : -1)
+    })
+  }
+
+  return result
+})
+
+const totalPages = computed(() => Math.ceil(filteredData.value.length / pageSize))
+
+const paginatedData = computed(() => {
+  const start = (page.value - 1) * pageSize
+  return filteredData.value.slice(start, start + pageSize)
+})
+
+watch([searchQuery, activeFilters, sortKey, sortDirection], () => {
+  page.value = 1
+})
+</script>