pgo-ui 1.0.39 → 1.0.41

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

@@ -7,13 +7,13 @@
             :show-print="true"
             title="View Document"
         />
-        <Button @click="handlePdfView('../../../public/Sex_offenders.pdf')">View</Button>
+        <!-- <Button @click="handlePdfView('../../../public/Sex_offenders.pdf')">View</Button> -->
         <!-- <Button @click="handlePdfView('../../../public/1_ref_20251120_050755.pdf')">View</Button> -->
         <template v-if="items">
             <slot name="topSlot" :items="items" />
 
             <!-- <hr class="border-input-border my-2" /> -->
-             <Card 
+             <Card
                 card-class="border-none"
                 bg="vts-bg-surface-elevated"
                 padding="p-3"
@@ -21,7 +21,7 @@
                 shadow="shadow-lg"
             >
                 <slot name="toolbar" :toolbar="LToolbar" :filterSection="LFilterSection">
-                    <Toolbar 
+                    <Toolbar
                         v-if="items.componentSettings?.toolbar"
                         :elevation="false"
                         color="none"
@@ -47,8 +47,8 @@
                     leave-from-class="transform translate-y-0 opacity-100"
                     leave-to-class="transform -translate-y-4 opacity-0"
                 >
-            
-                <Card 
+
+                <Card
                 v-if="LFilterSection && showFilters"
                 card-class="border-dashed"
                 rounded="lg"
@@ -94,12 +94,25 @@
                     @delete="handleDelete"
                     @viewpdf="handlePdfView"
                 />
-                <div v-else class="p-8">
-                    <p>No headers found</p>
-                </div>
             </slot>
 
-            
+            <slot name="card" :card="LCard">
+                <CardView
+                    v-if="items.componentSettings?.card"
+                    :items="tableData?.data"
+                    :settings="LCard"
+                    :server-side-options="options"
+                    :loading="tableLoading"
+                    :lang="lang"
+                    @update:options="handleOptionsUpdate"
+                />
+            </slot>
+
+            <div v-if="!items.componentSettings?.table && !items.componentSettings?.card" class="p-8">
+                <p>No display component configured</p>
+            </div>
+
+
         </template>
         <div v-else class="flex items-center justify-center p-8">
             <p>No data</p>
@@ -107,7 +120,7 @@
 
         <!-- FORM -->
         <slot name="form" :form="LForm">
-            <DynamicForm 
+            <DynamicForm
                 v-if="showDynamicForm && items.componentSettings?.form"
                 :form="LForm"
                 rounded="sm"
@@ -131,7 +144,7 @@
                 @confirm="handleDeleteConfirm"
                 @cancel="showConfirmation = false; DeleteItem = null"
             >
-                <div 
+                <div
                     v-if="LTable?.delete?.message"
                     v-for="(message, key) in LTable?.delete?.message"
                     :key="key"
@@ -146,7 +159,7 @@
 
 <script setup>
 import { ref, computed, watch, inject } from 'vue'
-import { DynamicForm, Toolbar, FilterSection, DataTable, SearchBox, ConfirmationModal } from '../../components/pgo'
+import { DynamicForm, Toolbar, FilterSection, DataTable, CardView, SearchBox, ConfirmationModal } from '../../components/pgo'
 import { useLanguageSelected } from '../lib/componentConfig'
 import { useRoute, useRouter } from 'vue-router'
 import DocumentViewer from '@/components/pgo/DocumentViewer.vue'
@@ -190,6 +203,7 @@ const formMode = ref('')
 const editItemId = ref(null)
 const pdfSrc =  ref(null)
 const LTable =ref({})
+const LCard = ref({})
 const LFilterSection = ref({})
 const LToolbar = ref({})
 const LForm = ref({})
@@ -229,10 +243,10 @@ const tableFetch = async (tableurl) => {
             if (LTable.value?.pagination) {
                 options.value = {
                     ...options.value,
-                    page: LTable.value?.pagination.current_page, 
+                    page: LTable.value?.pagination.current_page,
                 }
             }
-        } 
+        }
 
         console.log('Table settings fetched:', LTable.value)
     } catch (error) {
@@ -241,7 +255,40 @@ const tableFetch = async (tableurl) => {
     } finally {
         tableLoading.value = false
     }
-    
+
+}
+
+const cardFetch = async (cardUrl) => {
+    try {
+        tableLoading.value = true
+
+        const params = new URLSearchParams({
+            lang: language.value || 'dv'
+        })
+
+        const isFullUrl = /^https?:\/\//i.test(cardUrl)
+        const url = isFullUrl ? cardUrl + params.toString() : computedBaseUrl.value + '/ccs/' + cardUrl + '?' + params.toString()
+
+        const response = await api.get(url)
+        LCard.value = response
+
+        if (LCard.value?.datalink) {
+            fetchData()
+            if (LCard.value?.pagination) {
+                options.value = {
+                    ...options.value,
+                    page: LCard.value?.pagination.current_page,
+                }
+            }
+        }
+
+        console.log('Card settings fetched:', LCard.value)
+    } catch (error) {
+        const errormsg = error.response?.data?.error || 'Error fetching data'
+        snackbar.show({ message: errormsg, variant: 'error' })
+    } finally {
+        tableLoading.value = false
+    }
 }
 
 const filterSectionFetch = async (filterSectionUrl) => {
@@ -310,7 +357,7 @@ const deleteFetch = async (deleteUrl) => {
 const fetchData = async (queryParams = {}) => {
     try {
         tableLoading.value = true
-        
+
         // Build query string from params
         const params = new URLSearchParams({
             ...queryParams
@@ -318,15 +365,15 @@ const fetchData = async (queryParams = {}) => {
 
         // console.log('Fetching with params:', params.toString())
 
-        // Get the datalink from props
-        const datalink = LTable.value?.datalink || ''
+        // Get the datalink from table or card settings
+        const datalink = LTable.value?.datalink || LCard.value?.datalink || ''
 
         // Check if datalink is a full URL
         const isFullUrl = /^https?:\/\//i.test(datalink)
         const url = isFullUrl ? datalink : computedBaseUrl.value + '/' + datalink
 
         const response = await api.get(url + (params.toString() ? '&' + 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 = 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) {
@@ -337,7 +384,7 @@ const fetchData = async (queryParams = {}) => {
                 itemsLength: response?.pagination.total
             }
         }
-        
+
         console.log('Table Fetched data:', tableData.value)
         // snackbar.show({ message: 'Data fetched successfully', variant: 'success' })
     } catch (error) {
@@ -357,16 +404,16 @@ const formClose = () => {
 // 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) => {
@@ -400,17 +447,17 @@ const handleSearch = (filters) => {
             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)
@@ -423,7 +470,7 @@ const handleShowFilterSection = () => {
 }
 const handleFormSubmit = (msg) => {
     snackbar.show({ message: msg, variant: 'success' })
-    showDynamicForm.value = false; 
+    showDynamicForm.value = false;
     editItemId.value = null
     fetchData({ page: options.value.page, per_page: options.value.itemsPerPage })
 }
@@ -515,14 +562,14 @@ const deleteItemRequest = async (id) => {
             snackbar.show({ message: 'Delete action not configured', variant: 'error' })
             return
         }
-    
+
         // Replace {id} in the template with the actual id
         // const deleteLink = deleteLinkTemplate.replace('{id}', id)
-    
+
         // Check if deleteLink is a full URL
         const isFullUrl = /^https?:\/\//i.test(deleteLink)
         const url = isFullUrl ? deleteLink : baseUrl + '/' + deleteLink
-    
+
         await api.delete(url+`/${id}`)
         snackbar.show({ message: 'Item deleted successfully', variant: 'success' })
         fetchData({ page: options.value.page, per_page: options.value.itemsPerPage }) // Refresh the table after deletion
@@ -535,13 +582,19 @@ const deleteItemRequest = async (id) => {
 
 // Update options from server response
 watch(() => props.items, (newItems) => {
-    tableFetch(newItems?.componentSettings?.table)
-    toolbarFetch(newItems?.componentSettings?.toolbar)
-    console.log('Watching items change:', LTable.value)
-    
-    
+    if (newItems?.componentSettings?.table) {
+        tableFetch(newItems.componentSettings.table)
+    }
+    if (newItems?.componentSettings?.card) {
+        cardFetch(newItems.componentSettings.card)
+    }
+    if (newItems?.componentSettings?.toolbar) {
+        toolbarFetch(newItems.componentSettings.toolbar)
+    }
+    console.log('Watching items change:', LTable.value, LCard.value)
+
     emit('items', newItems)
 }, { immediate: true, deep: true })
 
 
-</script>
+</script>