pgo-uiux2 1.0.0

package/src/pgo-components/pages/ListView.vue

@@ -0,0 +1,370 @@
+<template>
+    <div class="mx-auto m-4">
+        <template v-if="items">
+
+            <!-- <hr class="border-input-border my-2" /> -->
+             <Card 
+                card-class="border-none"
+                bg="vts-bg-surface-elevated"
+                padding="p-3"
+                margin="mb-4"
+                shadow="shadow-lg"
+            >
+                <Searchbar 
+                    v-if="searchbars"
+                    :elevation="false"
+                    color="none"
+                    variant="contained"
+                    :title="searchbars.title"
+                    :quick-filters="searchbars.quickFilters"
+                    :filter-section="items.componentSettings?.FilterSection ? true : false"
+                    :filter-values="quickFilterValues"
+                    @update:filter-values="quickFilterValues = $event"
+                    @show-filter-section="showFilters = !showFilters"
+                    @search="handleQuickSearch"
+                    @refresh=""
+                    @create-button="handleCreateButton"
+                />
+                <Transition
+                    enter-active-class="transition-all duration-300 ease-out"
+                    enter-from-class="transform -translate-y-4 opacity-0"
+                    enter-to-class="transform translate-y-0 opacity-100"
+                    leave-active-class="transition-all duration-200 ease-in"
+                    leave-from-class="transform translate-y-0 opacity-100"
+                    leave-to-class="transform -translate-y-4 opacity-0"
+                >
+            
+                <Card 
+                    v-if="items.componentSettings.FilterSection && showFilters"
+                    card-class="border-dashed"
+                    rounded="lg"
+                    bg=""
+                    margin="mt-2"
+                >
+                    <FilterSection
+                        
+                        dir=""
+                        grid
+                        :grid-columns="2"
+                        v-model="searchbar"
+                        rounded=""
+                        :filters="items.componentSettings.FilterSection.filters"
+                        :buttons="items.componentSettings.FilterSection.buttons"
+                        @search="handleSearch"
+                        @submit="handleSearch"
+                        @close="showFilters = false"
+                    />
+
+                </Card>
+            </Transition>
+            </Card>
+            <DataTable
+                v-if="headers.length > 0"
+                dir=""
+                :items="tableData.data"
+                :headers="headers"
+                :server-side-options="options"
+                :loading="tableLoading"
+                title=""
+                @update:options="handleOptionsUpdate"
+                :showActions="true"
+                :inline-edit="true"
+                @inline-update="handleInlineUpdate"
+                @view="handleView"
+                @edit="handleEdit"
+                @delete="handleDelete"
+            />
+            <div v-else class="p-8">
+                <p>No headers found</p>
+                <pre>{{ JSON.stringify(items.componentSettings, null, 2) }}</pre>
+            </div>
+        </template>
+        <div v-else class="flex items-center justify-center p-8">
+            <p>No data</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, inject } from 'vue'
+import { useRoute } from 'vue-router'
+import DataTable from '../../components/pgo/DataTable.vue'
+import FilterSection from '../../components/pgo/filters/FilterSection.vue'
+import Card from '../../components/pgo/Card.vue'
+import Searchbar from '../../components/pgo/filters/Searchbar.vue'
+
+const api = inject('api')
+const route = useRoute()
+
+const props = defineProps({
+    items: {
+        type: Object,
+        required: true
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    }
+})
+
+const searchbars = ref({
+    title: "މީހުންގެ ލިސްޓް",
+    quickFilters: [
+        {
+            type: "ChipGroup",
+            key: "status",
+            chips: [
+                { value: "all", label: "All" },
+                { value: "active", label: "Active" },
+                { value: "pending", label: "Pending" },
+                { value: "completed", label: "Completed" }
+            ],
+            color: "primary",
+            size: "small",
+            clickable: true
+        },
+        {
+            type: "ChipGroup",
+            key: "priority",
+            chips: [
+                { value: "all", label: "All Priority" },
+                { value: "high", label: "High" },
+                { value: "medium", label: "Medium" },
+                { value: "low", label: "Low" }
+            ],
+            color: "secondary",
+            size: "small",
+            clickable: true
+        },
+        {
+            type: "InputSearch",
+            key: "search",
+            placeholder: "Search...",
+            size: "md"
+        },
+        {
+            type: "DatePicker",
+            key: "dob",
+            placeholder: "DoB...",
+            size: "md"
+        }
+    ],
+    buttons: [
+        {
+            type: "search",
+            color: "primary",
+            icon: "magnifying-glass",
+            variant: "contained"
+        },
+        {
+            type: "Clear",
+            label: "Clear",
+            color: "secondary"
+        }
+    ]
+})
+
+const tableLoading = ref(props.loading)
+
+const emit = defineEmits(['update:queryParams'])
+
+const showFilters = ref(true)
+const searchbar = ref({})
+const quickFilterValues = ref({})
+const tableData = ref({})
+const createForm = ref(false)
+
+// Manage options internally
+const options = ref({
+    page: 1,
+    itemsPerPage: 10,
+    sortBy: [],
+    sortDesc: [],
+    itemsLength: 0
+})
+
+const fetchData = async (queryParams = {}) => {
+    try {
+        tableLoading.value = true
+        
+        // Build query string from params
+        const params = new URLSearchParams({
+            ...queryParams
+        })
+
+        console.log('Table Fetching with params:', params.toString())
+        
+        const response = await api.get(`${props.items.componentSettings.table.datalink}` + (params.toString() ? '&' + params.toString() : '')) // uncomment this line to use real API) 
+        // const response = person // comment this line to use real API
+        tableData.value = response
+        if (response?.pagination) {
+            options.value = {
+                ...options.value,
+                page: response.pagination.current_page,
+                itemsPerPage: response.pagination.per_page,
+                itemsLength: response?.pagination.total
+            }
+        }
+        
+        console.log('Table Fetched data:', tableData.value)
+    } catch (error) {
+        console.error('Error fetching data:', error)
+    } finally {
+        tableLoading.value = false
+    }
+}
+
+// Update options from server response
+watch(() => props.items, (newItems) => {
+    console.log('Items updated:', newItems)
+    console.log('Headers from API:', newItems?.componentSettings?.table?.headers)
+    fetchData()
+    if (newItems?.componentSettings?.table?.pagination) {
+        options.value = {
+            ...options.value,
+            page: newItems.componentSettings.table.pagination.current_page, 
+        }
+    }
+}, { immediate: true, deep: true })
+
+const headers = computed(() => {
+    // Check different possible paths
+    const headersFromTable = props.items?.componentSettings?.table?.headers
+    const headersFromSettings = props.items?.componentSettings?.headers
+    
+    console.log('Headers from table:', headersFromTable)
+    console.log('Headers from settings:', headersFromSettings)
+    console.log('Full componentSettings:', props.items?.componentSettings)
+    
+    const rawHeaders = headersFromTable || headersFromSettings
+    
+    if (!rawHeaders || !Array.isArray(rawHeaders)) {
+        console.warn('No valid headers array found')
+        return []
+    }
+    
+    const processedHeaders = rawHeaders
+        .filter(h => {
+            if (!h.key && !h.value) {
+                console.warn('Header missing key and value:', h)
+                return false
+            }
+            return true
+        })
+        .map(h => {
+            const header = {
+                value: h.key || h.value || '',
+                title: h.title || '',
+                sortable: h.sortable !== false,
+                lang: h.lang,
+                displayType: h.displayType || 'text',
+                displayProps: h.displayProps || {},
+                inlineEditable: h.inlineEditable || false
+            }
+            // console.log('Processed header:', header)
+            return header
+        })
+    
+    // console.log('Final headers:', processedHeaders)
+    return processedHeaders
+})
+
+// Handle options update from DataTable
+const handleOptionsUpdate = (newOptions) => {
+    // console.log('Options updated:', newOptions)
+    
+    // Update local options
+    options.value = { ...options.value, ...newOptions }
+    
+    // Build query params
+    const queryParams = {
+        page: newOptions.page,
+        per_page: newOptions.itemsPerPage
+    }
+    
+    // Add sorting if exists
+    if (newOptions.sortBy && newOptions.sortBy.length > 0) {
+        const sortParams = newOptions.sortBy.map((field, index) => {
+            const isDesc = newOptions.sortDesc[index]
+            return isDesc ? `-${field}` : field
+        })
+        queryParams.sort = sortParams.join(',')
+    }
+    fetchData(queryParams)
+    // Emit to parent ComponentRenderer
+    // emit('update:queryParams', queryParams)
+}
+
+const handleInlineUpdate = async ({ item, key, value, updateData }) => {
+  console.log('Inline update:', { item, key, value, updateData })
+  // Optionally refetch data after update
+  // await fetchData()
+}
+
+const handleSearch = (filters) => {
+    // Transform filters object into filter=key:value,key:value format
+    let filterString = ''
+    if (filters && typeof filters === 'object') {
+        const filterPairs = []
+        Object.entries(filters).forEach(([key, value]) => {
+            if (value !== null && value !== undefined && value !== '') {
+                filterPairs.push(`${key}:${value}`)
+            }
+        })
+        if (filterPairs.length > 0) {
+            filterString = filterPairs.join(',')
+        }
+    }
+    
+    // Build query params
+    const queryParams = {
+        page: 1,
+        per_page: options.value.itemsPerPage
+    }
+    
+    if (filterString) {
+        queryParams.filter = filterString
+    }
+    
+    // Update options and emit
+    options.value = { ...options.value, page: 1 }
+    fetchData(queryParams)
+    // emit('update:queryParams', queryParams)
+}
+
+// Handle quick search from searchbar
+const handleQuickSearch = (filters) => {
+    console.log('Quick search triggered:', filters)
+    // Transform filters object into filter={columnName}:{value} format
+    const filterParams = {}
+    if (filters && typeof filters === 'object') {
+        Object.entries(filters).forEach(([key, value]) => {
+            if (value !== null && value !== undefined && value !== '') {
+                filterParams[`filter[${key}]`] = value
+            }
+        })
+    }
+    // Reset to page 1 and fetch with filters
+    const newOptions = { ...options.value, ...filters, page: 1 }
+    options.value = newOptions
+    // emit('update:queryParams', newOptions)
+    fetchData(newOptions)
+}
+const handleCreateButton = () => {
+    console.log('Create button clicked')
+    createForm.value = !createForm.value
+}
+
+const handleView = (item) => {
+    console.log('View item:', item)
+    // Navigate to detail view or open modal
+}
+const handleEdit = (item) => {
+    console.log('Edit item:', item)
+    // Navigate to detail view or open modal
+}
+const handleDelete = (item) => {
+    console.log('Delete item:', item)
+    // Navigate to detail view or open modal
+}
+</script>

package/src/pgo-components/pages/Page1.vue

@@ -0,0 +1,296 @@
+<template>
+    <div class="mx-auto m-4">
+        <!-- <ChipExample /> -->
+            <!-- <DynamicForm  v-model="createForm" /> -->
+            <template v-if="items">
+            <Searchbar 
+                :elevation="false"
+                :title="items.componentSettings.table.Searchbar.title"
+                :quick-filters="items.componentSettings.table.Searchbar.quickFilters"
+                :filter-section="items.componentSettings.table.FilterSection ? true : false"
+                :filter-values="quickFilterValues"
+                @update:filter-values="quickFilterValues = $event"
+                @show-filter-section="showFilters = !showFilters"
+                @search="handleQuickSearch"
+                @refresh=""
+                @create-button="handleCreateButton"
+            />
+            <Card 
+                card-class="border-none"
+                bg="bg-gray-50"
+                padding="p-3"
+                shadow="shadow"
+            >
+                <Card 
+                    card-class="border-dashed"
+                    rounded="lg"
+                    bg="bg-gray-50"
+                    margin="m-0"
+                >
+                    <FilterSection
+                        v-if="items.componentSettings.FilterSection && showFilters"
+                        dir=""
+                        grid
+                        :grid-columns="2"
+                        v-model="searchbar"
+                        rounded=""
+                        :filters="items.componentSettings.FilterSection.filters"
+                        :buttons="items.componentSettings.FilterSection.buttons"
+                        @search="handleSearch"
+                        @submit="handleSearch"
+                        @close="showFilters = false"
+                    />
+
+                </Card>
+            </Card>
+            
+            <DataTable
+                dir=""
+                :items="items.data"
+                :headers="headers"
+                :server-side-options="options"
+                :loading="loading"
+                title=""
+                :showActions="true"
+                :inline-edit="true"
+                @update:options="handleOptionsUpdate"
+                @inline-update="handleInlineUpdate"
+                @view="handleView"
+                @edit="handleEdit"
+                @delete="handleDelete"
+            />
+        </template>
+        <div v-else class="flex items-center justify-center p-8">
+            <p>No data</p>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, inject } from 'vue'
+import Searchbar from '../../components/pgo/filters/Searchbar.vue'
+import FilterSection from '../../components/pgo/filters/FilterSection.vue'
+import DataTable from '../../components/pgo/DataTable.vue'
+import entryData from '../../pgo-components/services/person.json'
+import DynamicForm from '../../components/pgo/forms/DynamicForm.vue'
+import Card from '../../components/pgo/Card.vue'
+const { language } = inject('i18n')
+
+
+const api = inject('api')
+
+const newheaders = [
+    // {
+    //     "title": "\u078a\u07aa\u0783\u07a6\u078c\u07a6\u0789\u07a6 \u0782\u07a6\u0782\u07b0",
+    //     "key": "first_name_eng",
+    //     "sortable": true,
+    //     "hidden": false,
+    //     "lang": "en",
+    //     "displayType": "text",
+
+    // },
+    {
+        "title": "\u078a\u07aa\u0783\u07a6\u078c\u07a6\u0789\u07a6 \u0782\u07a6\u0782\u07b0",
+        "key": "first_name_div",
+        "sortable": true,
+        "hidden": false,
+        "lang": "dv",
+        "displayType": "text",
+    },
+    {
+        "title": "\u078e\u07a6\u0787\u07aa\u0789\u07aa",
+        "key": "country.name_eng",
+        "sortable": true,
+        "hidden": false,
+        "displayType": "text",
+    },
+    {
+        "title": "\u0796\u07a8\u0782\u07b0\u0790\u07aa",
+        "key": "gender",
+        "sortable": false,
+        "hidden": false,
+        "displayType": "chip",
+        "displayProps": { 
+            "M": {
+                "label":"Male",
+                "color": "primary",
+                "prependIcon": "user"
+            }, 
+            "F": {
+                "label" : "Female",
+                "color": "success",
+                "prependIcon": "users"
+            } 
+        },
+    },
+    {
+        "title": "\u0796\u07a8\u0782\u07b0\u0790\u07aa",
+        "key": "gender",
+        "sortable": false,
+        "hidden": false,
+        "displayType": "select",
+        "inlineEditable": true,
+        "displayProps": { 
+            "items": [   
+                { "title":"Male", "value":"M" }, 
+                { "title": "Female", "value": "F" } 
+            ]
+        },
+    },
+    {
+        "title": "\u0780\u07aa\u0783\u07a9 \u0780\u07a6\u0787\u07b0\u0794\u07a6\u0783\u07aa\u078e\u07a6",
+        "key": "is_in_custody",
+        "sortable": true,
+        "hidden": false,
+        "type": "boolean",
+        "lang": "en",
+        "displayType": "checkbox",
+        "inlineEditable": true,
+        "displayProps": {
+            "label": " ",
+            "color": "primary"
+        },
+    },
+    {
+        "title": "\u0787\u07aa\u078a\u07a6\u0782\u07b0 \u078b\u07aa\u0788\u07a6\u0790\u07b0",
+        "key": "date_of_birth",
+        "sortable": true,
+        "hidden": false,
+        "displayType": "englishText",
+    }
+]
+
+const loading = ref(false)
+const createForm = ref(false)
+const showFilters = ref(true)
+const searchbar = ref({})
+// const items = ref({}) // Initialize as empty object instead of array
+const items = ref(entryData) // Initialize as empty object instead of array
+const quickFilterValues = ref({})
+
+const options = ref({
+    page: 1,
+    itemsPerPage: 15,
+    sortBy: [],
+    sortDesc: [],
+    itemsLength: 0
+})
+
+// const fetchData = async (queryOptions = null) => {
+//     try {
+//         loading.value = true
+        
+//         // Use provided options or fallback to current options
+//         const currentOptions = queryOptions || options.value
+        
+//         // Build query string from options
+//         const queryParams = new URLSearchParams({
+//             page: currentOptions.page,
+//             per_page: currentOptions.itemsPerPage,
+//             component: 'listView',
+//             lang: language.value || 'dv'
+//         })
+        
+//         // Add sorting if exists - using your API's format
+//         if (currentOptions.sortBy && currentOptions.sortBy.length > 0) {
+//             // For each sort field, prefix with - for descending
+//             const sortParams = currentOptions.sortBy.map((field, index) => {
+//                 const isDesc = currentOptions.sortDesc[index]
+//                 return isDesc ? `-${field}` : field
+//             })
+            
+//             // Join multiple sorts with comma (if you support multiple sorts)
+//             queryParams.append('sort', sortParams.join(','))
+//         }
+        
+//         console.log('Fetching with params:', queryParams.toString())
+        
+//         const response = await api.get(`/Person?${queryParams}`)
+//         items.value = response
+        
+//         // Update options with server response
+//         if (response.componentSettings?.table?.pagination) {
+//             options.value = {
+//                 ...options.value,
+//                 page: response.componentSettings.table.pagination.current_page,
+//                 itemsPerPage: response.componentSettings.table.pagination.per_page,
+//                 itemsLength: response.componentSettings.table.pagination.total,
+//                 sortBy: currentOptions.sortBy,
+//                 sortDesc: currentOptions.sortDesc
+//             }
+//         }
+        
+//         console.log('Fetched data:', items.value)
+//     } catch (error) {
+//         console.error('Error fetching data:', error)
+//     } finally {
+//         loading.value = false
+//     }
+// }
+
+// fetchData()
+
+const headers = computed(() => {
+    if (!items.value.componentSettings?.table?.headers) {
+        return []
+    }
+    
+    return items.value.componentSettings.table.headers
+})
+
+// Handle options update from DataTable
+const handleOptionsUpdate = (newOptions) => {
+    console.log('=== handleOptionsUpdate called ===')
+    console.log('New options received:', newOptions)
+    console.log('Current options:', options.value)
+    
+    // Update local options first
+    options.value = { ...options.value, ...newOptions }
+    
+    console.log('Merged options:', options.value)
+    
+    // Fetch new data with updated options
+    // fetchData(newOptions)
+}
+
+// Handle quick search from searchbar
+const handleQuickSearch = (filters) => {
+    console.log('Quick search triggered:', filters)
+    // Reset to page 1 and fetch with filters
+    const newOptions = { ...options.value, ...filters, page: 1 }
+    options.value = newOptions
+    // fetchData(newOptions)
+}
+
+// Handle search event from FilterSection
+const handleSearch = (filters) => {
+    console.log('Search triggered:', filters)
+    const newOptions = { ...options.value, ...filters, page: 1 }
+    options.value = newOptions
+    // fetchData(newOptions)
+}
+
+const handleCreateButton = () => {
+    console.log('Create button clicked')
+    createForm.value = !createForm.value
+}
+
+const handleInlineUpdate = async ({ item, key, value, updateData }) => {
+  console.log('Inline update:', { item, key, value, updateData })
+  // Optionally refetch data after update
+  // await fetchData()
+}
+
+const handleView = (item) => {
+    console.log('View item:', item)
+    // Navigate to detail view or open modal
+}
+const handleEdit = (item) => {
+    console.log('Edit item:', item)
+    // Navigate to detail view or open modal
+}
+const handleDelete = (item) => {
+    console.log('Delete item:', item)
+    // Navigate to detail view or open modal
+}
+</script>