pgo-ui 1.0.21 → 1.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pgo-ui",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "description": "A Vue 3 component library with PGO design system",
   "private": false,
   "type": "module",

package/src/components/pgo/Card.vue

@@ -90,12 +90,12 @@ const { language } = inject('i18n')
 
         //footer props
         footerClass: { type: String, default: '' },
-        footerBg: { type: String, default: '' },
+        footerBg: { type: String, default: 'vts-bg-surface' },
         footerText: { type: String, default: 'text-input-text' },
         footerTextSize: { type: String, default: '' },
         footerBd: { type: String, default: '' },
         footerMargin: { type: String, default: '' },
-        footerPadding: { type: String, default: 'px-6 py-4' },
+        footerPadding: { type: String, default: 'px-4 py-4' },
 
     })
 

package/src/components/pgo/DataTable.vue

@@ -388,6 +388,9 @@ import ConfirmationModal from './ConfirmationModal.vue'
 
 import { textAlign, initializeFunctions } from '../../pgo-components/lib/componentConfig.js'
 
+const api = inject('api')
+const snackbar = inject('snackbar')
+
 const props = defineProps({
   // Data
   items: {
@@ -658,8 +661,8 @@ const initializeAllFunctions = () => {
       emit,
       props,
       console,
-      snackbar: inject('snackbar', null),
-      api: inject('api', null),
+      snackbar: snackbar,
+      api: api,
       this: {
         variables: tableVariables
       }
@@ -888,11 +891,8 @@ const confirmUpdate = async () => {
     
     // If updateUrl is provided, send API request
     if (props.updateUrl) {
-      const api = inject('api', null)
-      if (api) {
         const url = `${props.updateUrl}/${item[props.itemKey]}`
         await api.patch(url, updateData)
-      }
     }
     
     // Update local data

package/src/components/pgo/SearchBox.vue

@@ -45,28 +45,29 @@
                     @focus="handleFocus"
                     @blur="handleBlur"
                 />
-                <Button 
-                    type="button" 
-                    label="buttons.search"
-                    variant="tonal" 
-                    prepend-icon="magnifying-glass"
-                    size="xs" 
-                    icon-type="soild"
-                    :icon-rotate="props.iconRotate ? props.iconRotate : (computedLang === 'dv' ? 90 : 0)"
-                    :disabled="disabled || loading"
-                    @click="handleSubmit"  
-                />              
+                             
                     <!-- :icon-rotate="props.iconRotate ?? (computedLang === 'dv' ? 180 : 0)" -->
             </div>
         </template>
 
 
       <!-- Loading spinner in append slot -->
-      <template v-if="loading" #append>
-        <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+      <template #append>
+        <svg v-if="loading" class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
           <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
           <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 714 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
         </svg>
+        <Button 
+            type="button" 
+            label="buttons.search"
+            variant="tonal" 
+            prepend-icon="magnifying-glass"
+            size="xs" 
+            icon-type="soild"
+            :icon-rotate="props.iconRotate ? props.iconRotate : (computedLang === 'dv' ? 90 : 0)"
+            :disabled="disabled || loading"
+            @click="handleSubmit"  
+        /> 
       </template>
     </Base>
   </div>

package/src/components/pgo/base/Base.vue

@@ -46,6 +46,7 @@
             <HeroIcon :size="iconSizes[size]" :name="append" :type="iconType == 'outline' ? 'outline' : 'solid'" />
           </slot>
         </div>
+        <!-- <slot name="" -->
       </div>
     </div>
     <div v-if="messagesToShow.length" :class="['.vts-mt-1 text-xs', selectLanguage === 'dv' ? 'text-right' : 'text-left', 'text-input-text']">

package/src/components/pgo/forms/DynamicForm.vue

@@ -3,11 +3,12 @@
         v-model="open" 
         persistent
         padding="p-3"
+        :bg="bg"
     >
         <Banner
             v-if="form?.banner"
             v-bind="form?.banner"
-            bannerClass="mb-4"
+            bannerClass="mb-4" 
         />
         <Form 
             v-model="valid"
@@ -19,11 +20,12 @@
                 type="hidden"
             />
             <!-- Render grouped fields --> 
+             <!--    -->
             <template v-if="form.groups">
                 <template v-for="(group, id) in form.groups" :key="id">
                     <div v-if="shouldShowGroup(group)" class="mb-4">
-                        <div :class="['relative grid border border-gray-300 rounded px-4 py-4 ', gridColsMap[group.numberOfColumns] || gridColsMap[2], 'gap-2']">
-                            <div v-if="group.title" :class="['absolute top-0 -translate-y-1/2 bg-white px-2 text-sm font-semibold mb-2', lang === 'dv' ? 'right-4' : 'left-4']">
+                        <div :class="['relative grid border border-gray-300 rounded px-4 pt-6 pb-4', bg, gridColsMap[group.numberOfColumns] || gridColsMap[2], 'gap-2']">
+                            <div v-if="group.title" :class="['absolute top-0 -translate-y-1/2 bg-inherit px-2 text-sm font-semibold mb-2', lang === 'dv' ? 'right-4' : 'left-4']">
                                 {{ group.title ? useLanguageSelected(group.title, lang) : '' }}
                             </div>
                             <template 
@@ -90,7 +92,7 @@
             </div>
         </Form>
         <template #footer>
-            <div class="flex justify-end gap-2">
+            <div class="flex justify-end gap-2 ">
                 <Button v-if="mode == 'edit'"
                     label="buttons.edit" 
                     color="primary" 
@@ -148,7 +150,9 @@
         lang:{ type: String, default: 'dv' },
         crudLink:{ type: String },
         editItemId: { type: [String, Number], default: null },
-        mode: { type: String, default: 'create', enum: ['create', 'edit'] }
+        mode: { type: String, default: 'create', enum: ['create', 'edit'] },
+
+        bg: { type: String, default: 'bg-background-color' },
     });
 
     const api = inject('api');
@@ -234,17 +238,17 @@
                         formData[field.key] = false;
                         break;
                     case 'array':
-                        formData[field.key] = [];
+                        formData[field.key] = null;
                         break;
                     case 'object':
-                        formData[field.key] = {};
+                        formData[field.key] = null;
                         break;
                     case 'string':
                     default:
                        if (field.inputType === 'checkbox') {
                             formData[field.key] = false; // Default checkboxes to false
                         } else {
-                            formData[field.key] = '';
+                            formData[field.key] = null;
                         }
                         break;
                 }
@@ -721,7 +725,7 @@
             return;
         }
 
-        if (!props.crudLink) {
+        if (!props.form?.crudLink) {
             console.error('No crudLink defined in form config');
             snackbar?.show({ message: 'Form configuration error', variant: 'error' });
             return;
@@ -733,8 +737,8 @@
             // Filter out non-database fields before submission
             const submitData = getDbFieldsOnly(formData);
             
-            const isFullUrl = /^https?:\/\//i.test(props.crudLink)
-            let url = isFullUrl ? props.crudLink : baseUrl + '/' + props.crudLink
+            const isFullUrl = /^https?:\/\//i.test(props.form?.crudLink)
+            let url = isFullUrl ? props.form?.crudLink : baseUrl + '/' + props.form?.crudLink
             let completeUrl =  ''
             if (props.mode === 'edit' && props.editItemId) {
                 url += `/${props.editItemId}`;
@@ -754,7 +758,8 @@
             
         } catch (error) {
             console.error('Form submission error:', error);
-        
+            const errorMessage = error.response?.data?.message || 'Form submission failed';
+            snackbar?.show({ message: errorMessage, variant: 'error' });
             if (error.response?.status === 422 || error.response?.data?.errors) {
                 const backendErrors = error.response.data.errors;
 
@@ -765,7 +770,6 @@
                 }
                 
                 const errorMessage = error.response.data.message || 'Validation failed';
-                snackbar?.show({ message: errorMessage, variant: 'error' });
                 emit('submit:error', error);
             }
         } finally {
@@ -806,8 +810,9 @@
         }
 
         try {
-            const isFullUrl = /^https?:\/\//i.test(props.crudLink)
-            let url = isFullUrl ? props.crudLink : baseUrl + '/' + props.crudLink
+            console.log('form:', props.form);
+            const isFullUrl = /^https?:\/\//i.test(props.form?.crudLink)
+            let url = isFullUrl ? props.form?.crudLink : baseUrl + '/' + props.form?.crudLink
             
             const response = await api.get(`${url}/${props.editItemId}`)
             
@@ -856,6 +861,10 @@
             if (newForm.functions) {
                 initializeAllFunctions();
             }
+            // Only fetch data if we're in edit mode and have the necessary data
+        if (props.mode === 'edit' && props.editItemId && newForm.crudLink) {
+            fetchData();
+        }
         }
     }, { deep: true });
 
@@ -880,7 +889,7 @@
     // Initialize on mount
     onMounted(() => {
         if (props.mode === 'edit' && props.editItemId) {
-            fetchData()
+            // fetchData()
         } else {
             initializeFormData()
         }

package/src/components/pgo/forms/Form.vue

@@ -1,5 +1,6 @@
 <template>
-  <form @submit.prevent="handleSubmit">
+  <form @submit.prevent="handleSubmit" enctype="multipart/form-data">
+
     <slot 
       :isValid="isValid" 
       :validate="validate"

package/src/main.js

@@ -11,7 +11,6 @@ const baseUrl = import.meta.env.VITE_API_BASE_URL
 const app = createApp(App)
 
 app.use(router)
-// app.provide('api', api);
 app.provide('baseUrl', baseUrl);
 
 app.use(PgoUiux)

package/src/pgo-components/lib/componentConfig.js

@@ -62,7 +62,7 @@ export const colorMap = {
     tonal: 'bg-blue-50 vts-text-info vts-transition-colors hover:bg-blue-100'
   },
   gray: {
-    contained: 'vts-bg-surface-elevated vts-text vts-transition-colors vts-hover-bg-surface',
+    contained: 'bg-gray-200 text-gray-700 vts-transition-colors hover:bg-gray-300',
     outlined: 'vts-border vts-border-color vts-text-secondary vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
     text: 'vts-text-secondary vts-bg-transparent vts-transition-colors vts-hover-bg-surface',
     tonal: 'vts-bg-border-light vts-text-secondary vts-transition-colors vts-hover-bg-surface'

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

@@ -57,13 +57,14 @@ const fetchData = async (queryParams = {}) => {
         // const response = await api.get(`/ccs/${modelName.value}?${params}`) // uncomment this line to use real API
         // const response = person // comment this line to use real API
         console
-        if (!response || !response.component) {
+        if (!response || !response.componentSettings) {
             console.error('Invalid response:', response)
             errormsg.value = response.error
             snackbar.show({ message: errormsg.value, variant: 'error' })
         }
         items.value = response
         DisplayComponent.value = response.component
+        // DisplayComponent.value = componentName.value
 
         console.log('DisplayComponent:', DisplayComponent.value)
         

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

@@ -0,0 +1,385 @@
+<template>
+    <div class="mx-auto m-4">
+        <template v-if="items">
+            <slot name="topSlot" />
+
+            <!-- <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"
+            >
+                <slot name="toolbar">
+                    <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>
+                <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"
+                >
+                    <slot name="filterSection">
+                        <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>
+                </Card>
+            </Transition>
+            </Card>
+            <slot name="table" >
+                <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>
+
+            
+        </template>
+        <div v-else class="flex items-center justify-center p-8">
+            <p>No data</p>
+        </div>
+
+        <!-- FORM -->
+        <slot name="form">
+            <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>
+        <!-- Delete Confirmation Modal -->
+        <slot name="delete">
+            <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"
+                >
+                    <p><b>{{ useLanguageSelected(message) }}:</b> {{ DeleteItem[key] }}</p>
+                </div>
+            </ConfirmationModal>
+        </slot>
+        <slot name="bottomSlot" />
+    </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, inject } from 'vue'
+import { DynamicForm, Toolbar, FilterSection, DataTable, SearchBox, ConfirmationModal } from '../../components/pgo'
+import { useLanguageSelected } from '../lib/componentConfig'
+
+const api = inject('api')
+const baseUrl = inject('baseUrl')
+const snackbar = inject('snackbar')
+// const route = useRoute()
+
+const search = ref('')
+
+const props = defineProps({
+    items: {
+        type: Object,
+        required: true
+    },
+    loading: {
+        type: Boolean,
+        default: false
+    },
+    lang:{ type: String, default: 'dv' }
+})
+
+const tableLoading = ref(props.loading)
+
+const emit = defineEmits(['update:queryParams', 'items'])
+
+const showFilters = ref(false)
+// const searchbar = ref({})
+const filterSectionValues = ref({})
+const quickFilterValues = ref({})
+const tableData = ref({})
+const showConfirmation = ref(false)
+const DeleteItem = ref(null)
+const showDynamicForm = ref(false)
+const formMode = ref('')
+const editItemId = ref(null)
+
+// 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
+        })
+
+        // Get the datalink from props
+        const datalink = props.items?.componentSettings?.table?.datalink || ''
+
+        // Check if datalink is a full URL
+        const isFullUrl = /^https?:\/\//i.test(datalink)
+        const url = isFullUrl ? datalink : baseUrl + '/' + 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 = 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)
+        // snackbar.show({ message: 'Data fetched successfully', variant: 'success' })
+    } catch (error) {
+        console.error('Error fetching data:', error)
+        snackbar.show({ message: 'Error fetching data', variant: 'error' })
+    } finally {
+        tableLoading.value = false
+    }
+}
+
+// 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, 
+            }
+        }
+    } 
+    emit('items', newItems)
+}, { immediate: true, deep: true })
+
+
+// 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)
+}
+const handleFormSubmit = (msg) => {
+    snackbar.show({ message: msg, variant: 'success' })
+    showDynamicForm.value = false; 
+    editItemId.value = null
+    handleRefresh()
+}
+const handleRefresh = (msg) => {
+    fetchData()
+}
+// Handle quick search from searchbar
+const handleQuickSearch = (filters) => {
+
+    console.log('Quick search filters:', 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 = () => {
+    editItemId.value = null
+    showDynamicForm.value = true
+    formMode.value = 'create'
+
+}
+
+const handleView = (item) => {
+    // Navigate to detail view or open modal
+}
+const handleEdit = (item) => {
+    showDynamicForm.value = true
+    editItemId.value = item.id
+    formMode.value = 'edit'
+    // Navigate to detail view or open modal
+}
+const handleDelete = (item) => {
+    DeleteItem.value = item
+  showConfirmation.value = true
+  console.log('Delete item:', item)
+    // Navigate to detail view or open modal
+}
+
+const handleDeleteConfirm = (item) => {
+  showConfirmation.value = false
+  console.log('Confirmed delete for item:', item)
+  deleteItemRequest(item.id)
+}
+
+const deleteItemRequest = async (id) => {
+    try {
+        // Get the delete link from componentSettings
+        const deleteLink = props.items?.componentSettings?.meta?.crudLink
+        if (!deleteLink) {
+            console.error('Delete link not defined in componentSettings')
+            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() // Refresh the table after deletion
+    } catch (error) {
+        console.error('Error deleting item:', error)
+        snackbar.show({ message: 'Error deleting item', variant: 'error' })
+    }
+  // Perform delete action, e.g. call API to delete item
+}
+</script>