pgo-ui 1.0.21 → 1.0.23

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

@@ -1,24 +1,7 @@
 <template>
     <div class="mx-auto m-4">
         <template v-if="items">
-            <!-- <Card >
-                <SearchBox 
-                    v-model="search"
-                    label="Find Users"
-                />
-            </Card> -->
-            <DynamicForm 
-                v-if="showDynamicForm && items.componentSettings?.form"
-                :form="items.componentSettings?.form"
-                rounded="sm"
-                :title="useLanguageSelected(formMode == 'edit' ? items.componentSettings?.form?.editTitle : items.componentSettings?.form?.createTitle) || ''"
-                @close="showDynamicForm = false"
-                @submit:success="handleFormSubmit"
-                :lang="lang"
-                :crud-link="props.items?.componentSettings?.meta?.crudLink"
-                :edit-item-id="editItemId"
-                :mode="formMode"
-            />
+            <slot name="topSlot" :items="items" />
 
             <!-- <hr class="border-input-border my-2" /> -->
              <Card 
@@ -28,22 +11,24 @@
                 margin="mb-4"
                 shadow="shadow-lg"
             >
-                <Toolbar 
-                    v-if="items.componentSettings?.toolbar"
-                    :elevation="false"
-                    color="none"
-                    variant="contained"
-                    :title="useLanguageSelected(items.componentSettings?.toolbar?.title)"
-                    :quick-filters="items.componentSettings?.toolbar?.filters"
-                    :filter-section="items.componentSettings?.filterSection ? true : false"
-                    :filter-values="quickFilterValues"
-                    :filter-section-values="filterSectionValues"
-                    @update:filter-values="quickFilterValues = $event"
-                    @show-filter-section="showFilters = !showFilters"
-                    @search="handleSearch"
-                    @refresh="handleRefresh"
-                    @create-button="handleCreateButton"
-                />
+                <slot name="toolbar" :toolbar="LToolbar" :filterSection="LFilterSection">
+                    <Toolbar 
+                        v-if="items.componentSettings?.toolbar"
+                        :elevation="false"
+                        color="none"
+                        variant="contained"
+                        :title="useLanguageSelected(LToolbar.title)"
+                        :quick-filters="LToolbar?.filters"
+                        :filter-section="LFilterSection ? true : false"
+                        :filter-values="quickFilterValues"
+                        :filter-section-values="filterSectionValues"
+                        @update:filter-values="quickFilterValues = $event"
+                        @show-filter-section="handleShowFilterSection"
+                        @search="handleSearch"
+                        @refresh="handleRefresh"
+                        @create-button="handleCreateButton"
+                    />
+                </slot>
                 <Transition
                     enter-active-class="transition-all duration-300 ease-out"
                     enter-from-class="transform -translate-y-4 opacity-0"
@@ -54,52 +39,54 @@
                 >
             
                 <Card 
-                    v-if="items?.componentSettings?.filterSection && showFilters"
-                    card-class="border-dashed"
-                    rounded="lg"
-                    bg=""
-                    margin="mt-2"
+                v-if="LFilterSection && showFilters"
+                card-class="border-dashed"
+                rounded="lg"
+                bg=""
+                margin="mt-2"
                 >
-                    <FilterSection
-                        dir=""
-                        grid
-                        :grid-columns="2"
-                        v-model="filterSectionValues"
-                        rounded=""
-                        :filters="items.componentSettings.filterSection.filters"
-                        :buttons="items.componentSettings.filterSection.buttons"
-                        @search="handleSearch"
-                        @submit="handleSearch"
-                        @close="showFilters = false"
-                    />
-
+                    <slot name="filterSection">
+                        <FilterSection
+                            dir=""
+                            grid
+                            :grid-columns="2"
+                            v-model="filterSectionValues"
+                            rounded=""
+                            :filters="LFilterSection?.filters"
+                            :buttons="LFilterSection?.buttons"
+                            @search="handleSearch"
+                            @submit="handleSearch"
+                            @close="showFilters = false"
+                        />
+                    </slot>
                 </Card>
             </Transition>
             </Card>
-            <DataTable
-                v-if="props.items?.componentSettings?.table?.headers.length > 0"
-                dir=""
-                :items="tableData.data"
-                :settings="props.items?.componentSettings?.table"
-                :server-side-options="options"
-                :loading="tableLoading"
-                title=""
-                :lang="lang"
-                @update:options="handleOptionsUpdate"
-                :show-actions="items.componentSettings?.table?.showActions ?? true"
-                :show-view="items.componentSettings?.table?.actions?.showView ?? true"
-                :show-edit="items.componentSettings?.table?.actions?.showEdit ?? true"
-                :show-delete="items.componentSettings?.table?.actions?.showDelete ?? true"
-                :inline-edit="items.componentSettings?.table?.showInlineEdit ?? 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>
+            <slot name="table" :table="LTable">
+                <DataTable
+                    v-if="items.componentSettings?.table"
+                    dir=""
+                    :items="tableData?.data"
+                    :settings="LTable"
+                    :server-side-options="options"
+                    :loading="tableLoading"
+                    title=""
+                    :lang="lang"
+                    @update:options="handleOptionsUpdate"
+                    :show-actions="LTable?.showActions ?? true"
+                    :show-view="LTable?.actions?.showView ?? true"
+                    :show-edit="LTable?.actions?.showEdit ?? true"
+                    :show-delete="LTable?.actions?.showDelete ?? true"
+                    :inline-edit="LTable?.showInlineEdit ?? true"
+                    @inline-update="handleInlineUpdate"
+                    @view="handleView"
+                    @edit="handleEdit"
+                    @delete="handleDelete"
+                />
+                <div v-else class="p-8">
+                    <p>No headers found</p>
+                </div>
+            </slot>
 
             
         </template>
@@ -107,24 +94,42 @@
             <p>No data</p>
         </div>
 
+        <!-- FORM -->
+        <slot name="form" :form="LForm">
+            <DynamicForm 
+                v-if="showDynamicForm && items.componentSettings?.form"
+                :form="LForm"
+                rounded="sm"
+                :title="useLanguageSelected(formMode == 'edit' ? LForm?.editTitle : LForm?.createTitle) || ''"
+                @close="showDynamicForm = false"
+                @submit:success="handleFormSubmit"
+                :lang="lang"
+                :crud-link="LForm?.crudLink"
+                :edit-item-id="editItemId"
+                :mode="formMode"
+            />
+        </slot>
         <!-- Delete Confirmation Modal -->
-        <ConfirmationModal
-            v-model="showConfirmation"
-            :item="DeleteItem"
-            :title="items.componentSettings?.table?.delete?.title || 'Delete Confirmation'"
-            :subtitle="items.componentSettings?.table?.delete?.subtitle || 'Are you sure you want to delete this item?'"
-            type="warning"
-            @confirm="handleDeleteConfirm"
-            @cancel="showConfirmation = false; DeleteItem = null"
-        >
-            <div 
-                v-if="items.componentSettings?.table?.delete?.message"
-                v-for="(message, key) in items.componentSettings?.table?.delete?.message"
-                :key="key"
+        <slot name="delete" :delete="LDelete">
+            <ConfirmationModal
+                v-model="showConfirmation"
+                :item="DeleteItem"
+                :title="LDelete?.title || 'Delete Confirmation'"
+                :subtitle="LDelete?.subtitle || 'Are you sure you want to delete this item?'"
+                type="warning"
+                @confirm="handleDeleteConfirm"
+                @cancel="showConfirmation = false; DeleteItem = null"
             >
-                <p><b>{{ useLanguageSelected(message) }}:</b> {{ DeleteItem[key] }}</p>
-            </div>
-        </ConfirmationModal>
+                <div 
+                    v-if="LDelete?.message"
+                    v-for="(message, key) in LDelete?.message"
+                    :key="key"
+                >
+                    <p><b>{{ useLanguageSelected(message) }}:</b> {{ DeleteItem[key] }}</p>
+                </div>
+            </ConfirmationModal>
+        </slot>
+        <slot name="bottomSlot" :items="items" />
     </div>
 </template>
 
@@ -154,7 +159,7 @@ const props = defineProps({
 
 const tableLoading = ref(props.loading)
 
-const emit = defineEmits(['update:queryParams'])
+const emit = defineEmits(['update:queryParams', 'items'])
 
 const showFilters = ref(false)
 // const searchbar = ref({})
@@ -167,6 +172,17 @@ const showDynamicForm = ref(false)
 const formMode = ref('')
 const editItemId = ref(null)
 
+const LTable =ref({})
+const LFilterSection = ref({})
+const LToolbar = ref({})
+const LForm = ref({})
+const LDelete = ref({})
+
+// Computed properties use injected values
+const computedBaseUrl = computed(() => {
+    return baseUrl; // Use baseUrl, don't inject
+});
+
 // Manage options internally
 const options = ref({
     page: 1,
@@ -176,6 +192,85 @@ const options = ref({
     itemsLength: 0
 })
 
+const tableFetch = async (tableurl) => {
+    try {
+        tableLoading.value = true
+
+        const isFullUrl = /^https?:\/\//i.test(tableurl)
+        const url = isFullUrl ? tableurl : computedBaseUrl.value + '/ccs/' + tableurl
+
+        const response = await api.get(url)
+        LTable.value = response
+
+        // Only fetch if componentSettings and table.datalink exist
+        if (LTable.value?.datalink) {
+            fetchData()
+            if (LTable.value?.pagination) {
+                options.value = {
+                    ...options.value,
+                    page: LTable.value?.pagination.current_page, 
+                }
+            }
+        } 
+
+        console.log('Table settings fetched:', LTable.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) => {
+    try {
+        const isFullUrl = /^https?:\/\//i.test(filterSectionUrl)
+        const url = isFullUrl ? filterSectionUrl : computedBaseUrl.value + '/ccs/' + filterSectionUrl
+
+        const response = await api.get(url)
+        LFilterSection.value = response
+    } catch (error) {
+        const errormsg = error.response?.data?.error || 'Error fetching filter section data'
+        snackbar.show({ message: errormsg, variant: 'error' })
+    }
+}
+const toolbarFetch = async (toolbarUrl) => {
+    try {
+        const isFullUrl = /^https?:\/\//i.test(toolbarUrl)
+        const url = isFullUrl ? toolbarUrl : computedBaseUrl.value + '/ccs/' + toolbarUrl
+
+        const response = await api.get(url)
+        LToolbar.value = response
+        console.log('Toolbar settings fetched:', LToolbar.value)
+    } catch (error) {
+        const errormsg = error.response?.data?.error || 'Error fetching toolbar data'
+        snackbar.show({ message: errormsg, variant: 'error' })
+    }
+}
+const formFetch = async (formUrl) => {
+    try {
+        const isFullUrl = /^https?:\/\//i.test(formUrl)
+        const url = isFullUrl ? formUrl : computedBaseUrl.value + '/ccs/' + formUrl
+        const response = await api.get(url)
+        LForm.value = response
+        console.log('Form settings fetched:', LForm.value)
+    } catch (error) {
+        const errormsg = error.response?.data?.error || 'Error fetching form data'
+        snackbar.show({ message: errormsg, variant: 'error' })
+    }
+}
+const deleteFetch = async (deleteUrl) => {
+    try {        const isFullUrl = /^https?:\/\//i.test(deleteUrl)
+        const url = isFullUrl ? deleteUrl : computedBaseUrl.value + '/ccs/' + deleteUrl
+        const response = await api.get(url)
+        LDelete.value = response
+    } catch (error) {
+        const errormsg = error.response?.data?.error || 'Error fetching delete confirmation data'
+        snackbar.show({ message: errormsg, variant: 'error' })
+    }
+}
+
 const fetchData = async (queryParams = {}) => {
     try {
         tableLoading.value = true
@@ -185,12 +280,14 @@ const fetchData = async (queryParams = {}) => {
             ...queryParams
         })
 
+        // console.log('Fetching with params:', params.toString())
+
         // Get the datalink from props
-        const datalink = props.items?.componentSettings?.table?.datalink || ''
+        const datalink = LTable.value?.datalink || ''
 
         // Check if datalink is a full URL
         const isFullUrl = /^https?:\/\//i.test(datalink)
-        const url = isFullUrl ? datalink : baseUrl + '/' + 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) 
@@ -215,26 +312,6 @@ const fetchData = async (queryParams = {}) => {
     }
 }
 
-// Update options from server response
-watch(() => props.items, (newItems) => {
-    // Only fetch if componentSettings and table.datalink exist
-    if (newItems?.componentSettings?.table?.datalink) {
-        fetchData()
-        if (newItems?.componentSettings?.table?.pagination) {
-            options.value = {
-                ...options.value,
-                page: newItems.componentSettings.table.pagination.current_page, 
-            }
-        }
-    } 
-}, { immediate: true, deep: true })
-
-// const headers = computed(() => {
-//     const headersFromTable = props.items?.componentSettings?.table?.headers
-//     const headersFromSettings = props.items?.componentSettings?.headers
-    
-//     return headersFromTable || headersFromSettings || []
-// })
 
 // Handle options update from DataTable
 const handleOptionsUpdate = (newOptions) => {
@@ -298,6 +375,11 @@ const handleSearch = (filters) => {
     fetchData(queryParams)
     // emit('update:queryParams', queryParams)
 }
+
+const handleShowFilterSection = () => {
+    filterSectionFetch(props.items?.componentSettings?.filterSection)
+    showFilters.value = !showFilters.value
+}
 const handleFormSubmit = (msg) => {
     snackbar.show({ message: msg, variant: 'success' })
     showDynamicForm.value = false; 
@@ -327,6 +409,7 @@ const handleQuickSearch = (filters) => {
     fetchData(newOptions)
 }
 const handleCreateButton = () => {
+    formFetch(props.items?.componentSettings?.form)
     editItemId.value = null
     showDynamicForm.value = true
     formMode.value = 'create'
@@ -337,15 +420,17 @@ const handleView = (item) => {
     // Navigate to detail view or open modal
 }
 const handleEdit = (item) => {
+    formFetch(props.items?.componentSettings?.form)
     showDynamicForm.value = true
     editItemId.value = item.id
     formMode.value = 'edit'
     // Navigate to detail view or open modal
 }
 const handleDelete = (item) => {
+    deleteFetch(props.items?.componentSettings?.form)
     DeleteItem.value = item
-  showConfirmation.value = true
-  console.log('Delete item:', item)
+    showConfirmation.value = true
+    console.log('Delete item:', item)
     // Navigate to detail view or open modal
 }
 
@@ -381,4 +466,16 @@ const deleteItemRequest = async (id) => {
     }
   // Perform delete action, e.g. call API to delete item
 }
+
+// Update options from server response
+watch(() => props.items, (newItems) => {
+    tableFetch(newItems?.componentSettings?.table)
+    toolbarFetch(newItems?.componentSettings?.toolbar)
+    console.log('Watching items change:', LTable.value)
+    
+    
+    emit('items', newItems)
+}, { immediate: true, deep: true })
+
+
 </script>

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

@@ -0,0 +1,3 @@
+<template>
+    this is a custom slot
+</template>