easycomponentstools 1.0.0-dev.1.1 → 1.0.0-dev.10

package/src/composables/useDataTableExport.ts

@@ -0,0 +1,259 @@
+import printJS from 'print-js'
+import xlsx, { type IColumn, type IJsonSheet } from 'json-as-xlsx'
+import pdfMake from 'pdfmake/build/pdfmake'
+import pdfFonts from 'pdfmake/build/vfs_fonts'
+import { ref, Ref } from 'vue'
+import { AdvancedFiltersDTO, HardFiltersDTO, HeaderDTO, SortDTO } from '../types/table'
+
+export default function useDataTableExport() {
+    const api: Ref<string> = ref('')
+    const sort: Ref<SortDTO | null> = ref(null)
+    const filters: Ref<AdvancedFiltersDTO[]> = ref([])
+    const hard_filters: Ref<HardFiltersDTO[]> = ref([])
+    const headers: Ref<HeaderDTO[]> = ref([])
+    const total: Ref<number> = ref(0)
+    const allPrintableItems: Ref<any[]> = ref([])
+    const loading: Ref<boolean> = ref(false)
+
+    const setApi = (newApi: string) => {
+        api.value = newApi
+    }
+    const setSort = (newSort: SortDTO) => {
+        sort.value = { ...newSort }
+    }
+    const setFilters = (newFilters: AdvancedFiltersDTO[]) => {
+        filters.value = [...newFilters]
+    }
+    const setHardFilters = (newHardFilters: HardFiltersDTO[]) => {
+        hard_filters.value = [...newHardFilters]
+    }
+    const setHeaders = (newHeaders: HeaderDTO[]) => {
+        headers.value = [...newHeaders]
+    }
+    const setTotal = (newTotal: number) => {
+        total.value = newTotal
+    }
+    const getAllItems = async () => {
+        try {
+            const params = new URLSearchParams({
+                sort: JSON.stringify(sort.value ?? {}),
+                filters: JSON.stringify(filters.value),
+                hard_filters: JSON.stringify(hard_filters.value),
+                page: '1',
+                limit: total.value.toString(),
+            })
+            const response: any = await fetch(`${api.value}?${params}`, { method: 'GET' })
+            if (!response.ok) {
+                throw new Error(`Error: ${response.status}`)
+            }
+            const data = response.json()
+            allPrintableItems.value = 'data' in data ? data.data : data
+        } catch (e) {
+            console.error('Failed Export Error', e)
+        }
+    }
+    const prepareExport = () => {
+        allPrintableItems.value.map((item: any, index: number) => {
+            for (const headKey in headers.value) {
+                if (
+                    headers.value[headKey] &&
+                    typeof headers.value[headKey].valueFormatter === 'function'
+                ) {
+                    const render = headers.value[headKey].valueFormatter(
+                        item[headers.value[headKey].value],
+                        item
+                    )
+                    const cleanHtml = render ? render.replace(/(<([^>]+)>)/gi, '') : ''
+                    allPrintableItems.value[index][headers.value[headKey].value] = cleanHtml.trim()
+                }
+            }
+        })
+    }
+    const exportPrint = () => {
+        const properties: any = headers.value
+            .map((head: HeaderDTO) => {
+                return head.value !== 'actions'
+                    ? { field: head.value, displayName: head.title }
+                    : ''
+            })
+            .filter((val) => val)
+        const itemsPrint = [...allPrintableItems.value]
+        itemsPrint.forEach((item: any, index: number) => {
+            Object.keys(item).forEach((key) => (itemsPrint[index][key] = item[key] ?? ''))
+        })
+        printJS({ printable: itemsPrint, properties, type: 'json' })
+    }
+    const exportXlsx = () => {
+        const settings = {
+            fileName: 'export', // Name of the resulting spreadsheet
+            extraLength: 3, // A bigger number means that columns will be wider
+            writeOptions: {}, // Style options from https://github.com/SheetJS/sheetjs#writing-options
+        }
+
+        const properties = headers.value.map((head: HeaderDTO) => {
+            return head.value !== 'actions' ? { value: head.value, label: head.title } : ''
+        })
+        const columns: IColumn[] | any[] = properties.filter((val) => val)
+
+        const data: IJsonSheet[] = [
+            {
+                sheet: 'export-excel',
+                columns: [...columns],
+                content: [...allPrintableItems.value],
+            },
+        ]
+
+        xlsx(data, settings)
+    }
+    const exportCsv = () => {
+        const properties = headers.value
+            .map((head: HeaderDTO) => {
+                return head.value !== 'actions' ? { value: head.value, label: head.title } : ''
+            })
+            .filter((val) => val)
+
+        const items = allPrintableItems.value
+        const replacer = (key: string, value: any) => (value === null ? '' : value)
+        const header = properties.map((head: any) => head.label)
+        const csv = [
+            header.join(','),
+            ...items.map((row: any) =>
+                properties
+                    .map((fieldName: any) => JSON.stringify(row[fieldName.value], replacer))
+                    .join(',')
+            ),
+        ].join('\r\n')
+
+        const blob = new Blob(['\ufeff' + csv], { type: 'text/csv;charset=utf-8;' })
+        const url = URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.setAttribute('href', url)
+        link.setAttribute('download', 'export.csv')
+        document.body.appendChild(link)
+
+        link.click()
+    }
+    const exportPDF = async () => {
+        const props: HeaderDTO[] = headers.value.filter(
+            (item: HeaderDTO) => item.value !== 'actions'
+        )
+        // Ορισμός γραμματοσειρών (απαραίτητο!)
+        const pdfMakeInstance = (pdfMake as any).default || pdfMake
+        // @ts-nocheck
+        pdfMakeInstance.vfs = pdfFonts.pdfMake
+            ? (pdfFonts.pdfMake as any).vfs
+            : (pdfFonts as any)?.vfs
+
+        const docDefinition = {
+            content: [
+                { text: 'Export PDF', style: 'header' },
+                {
+                    table: {
+                        widths: props.map(() => 70),
+                        body: [
+                            props.map((header: HeaderDTO) => header.title),
+                            ...allPrintableItems.value.map((row) =>
+                                props.map((header: HeaderDTO) => row[header.value])
+                            ),
+                        ],
+                    },
+                },
+            ],
+            styles: {
+                header: {
+                    fontSize: 18,
+                    bold: true,
+                    margin: [0, 0, 0, 10],
+                },
+            },
+        }
+
+        pdfMakeInstance.createPdf(docDefinition).download('export.pdf')
+    }
+    const exportWORD = () => {
+        const properties = headers.value
+            .filter((head: HeaderDTO) => head.value !== 'actions')
+            .map((head) => ({ value: head.value, label: head.title }))
+        const propertyLabels = properties.map((property) => property.label)
+
+        const items = allPrintableItems.value.map((row) =>
+            properties.map((property) => row[property.value] ?? '-')
+        )
+
+        const tableHtml = `<table><tr>${propertyLabels.map((label) => `<th>${label}</th>`).join('')}</tr>${items
+            .map((item) => `<tr>${item.map((value) => `<td>${value}</td>`).join('')}</tr>`)
+            .join('')}</table>`
+
+        const css = `<style>
+        @page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}
+        div.WordSection1 {page: WordSection1;}
+           table {
+            min-width: 100%;
+            border-collapse: collapse;
+        }
+
+        th, td {
+            border: thin solid rgba(0,0,0,.12);
+            padding: 8px;
+            text-align: center;
+        }
+
+        th {
+            background-color: #f3f2f7;
+            color: rgba(0,0,0,.6);
+        }
+
+        tr:nth-child(even) {
+            background-color: #f2f2f2;
+        }
+        </style>
+        `
+
+        const blob = new Blob([css + tableHtml], { type: 'application/msword' })
+
+        const url = URL.createObjectURL(blob)
+
+        const a = document.createElement('a')
+        a.href = url
+        a.download = 'export.docx'
+        a.click()
+
+        URL.revokeObjectURL(url)
+    }
+    const exportData = async (type: string) => {
+        loading.value = true
+        await getAllItems()
+        prepareExport()
+
+        if (type === 'xlsx') {
+            exportXlsx()
+        } else if (type === 'csv') {
+            exportCsv()
+        } else if (type === 'pdf') {
+            exportPDF()
+        } else if (type === 'word') {
+            exportWORD()
+        } else {
+            exportPrint()
+        }
+        loading.value = false
+    }
+
+    return {
+        api,
+        sort,
+        filters,
+        hard_filters,
+        headers,
+        total,
+        loading,
+
+        setApi,
+        setSort,
+        setFilters,
+        setHardFilters,
+        setHeaders,
+        setTotal,
+        exportData,
+    }
+}

package/src/composables/useHeadersStorage.ts

@@ -0,0 +1,49 @@
+import { HeaderDTO, SavedHeaderDTO } from '../types/table'
+
+export default function useHeadersStorage() {
+    const submitHeaders = (newHeaders: HeaderDTO[], idDataTable: string) => {
+        const dataTableHeadersStorage: SavedHeaderDTO[] = newHeaders.map((item, index) => {
+            return {
+                value: item.value,
+                hidden: !!item.hidden,
+                order: index,
+            }
+        })
+        window.localStorage.setItem(
+            `dataTableHeaders_${idDataTable}`,
+            JSON.stringify(dataTableHeadersStorage)
+        )
+    }
+    const loadHeaders = (headers: HeaderDTO[], idDataTable: string) => {
+        const savedHeadersStorage: string | null = window.localStorage.getItem(
+            `dataTableHeaders_${idDataTable}`
+        )
+        if (savedHeadersStorage) {
+            try {
+                const savedHeaders: SavedHeaderDTO[] = JSON.parse(savedHeadersStorage)
+                savedHeaders.forEach((header: SavedHeaderDTO) => {
+                    const index: number = headers.findIndex(
+                        (v: HeaderDTO) => v.value === header.value
+                    )
+                    if (index !== -1 && headers[index]) {
+                        headers[index].hidden = header.hidden
+                        Object.assign(headers[index], { order: header.order })
+                    }
+                })
+                headers.sort((a: any, b: any) => a?.order - b?.order)
+                return headers
+            } catch (error) {
+                console.error(error)
+                window.localStorage.removeItem(`dataTableHeaders_${idDataTable}`)
+                return []
+            }
+        } else {
+            return []
+        }
+    }
+
+    return {
+        submitHeaders,
+        loadHeaders,
+    }
+}

package/src/dev.ts

@@ -0,0 +1,114 @@
+import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+import langEn from '../src/lang/en'
+import langEl from '../src/lang/el'
+import { useInfo } from './stores/useInfo'
+import EasyForm from './components/Form/EasyForm.vue'
+import 'vuetify/styles'
+import './scss/app.scss'
+import { createPinia } from 'pinia'
+import { FormDTO } from './types/form'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import * as directives from 'vuetify/directives'
+import { VFileUpload } from 'vuetify/labs/components'
+import { en, el } from 'vuetify/locale'
+import { removeMdiSet } from './composables/removeMdiSet'
+
+const formData: FormDTO = {
+    title: 'test',
+    inputs: [
+        {
+            type: 'map',
+            key: 'test',
+            label: 'Test',
+            required: true,
+            validation: [(v: any) => !!v],
+            options: {
+                variant: 'underlined',
+                'hide-details': true,
+                enableTime: true,
+            },
+        },
+    ],
+    binder: {
+        test: '2026-06-01T14:15:00',
+    },
+    submit: {
+        label: 'OK',
+        icon: 'icon-timer',
+        color: 'primary',
+        onSubmit: (data: any) => {
+            console.log(data)
+        },
+    },
+    menuButtons: {
+        label: 'Menu asdasdasd  asdasd asd asd asd',
+        color: 'secondary',
+        items: [
+            {
+                label: 'select1 as das ',
+                onClick: () => {
+                    console.log('select1')
+                },
+            },
+            {
+                label: 'select2 asd as ',
+                onClick: () => {
+                    console.log('select2')
+                },
+            },
+        ],
+    },
+}
+const pinia = createPinia()
+const app = createApp(EasyForm, { form: formData })
+const vuetify = createVuetify({
+    components: {
+        ...components,
+        VFileUpload,
+    },
+    directives,
+    defaults: {},
+    theme: {
+        defaultTheme: 'testTheme',
+        themes: {
+            testTheme: {
+                colors: {
+                    background: '#f1f1f1',
+                    surface: '#f1f1f1',
+                    primary: '#9a8209',
+                    secondary: '#242424',
+                    error: '#b71c1c',
+                    grey: '#ACAAAAFF',
+                },
+                variables: {
+                    'font-family': '"Roboto", "Helvetica", "Arial", sans-serif',
+                },
+            },
+        },
+    },
+    locale: {
+        locale: 'en',
+        fallback: 'en',
+        messages: {
+            en: { ...en },
+            el: { ...el },
+        },
+    },
+})
+const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: {
+        en: langEn,
+        el: langEl,
+    },
+})
+app.use(i18n)
+app.use(pinia)
+app.use(vuetify)
+const info = useInfo()
+info.timeZone = 'UTC'
+removeMdiSet().run()
+app.mount('#app')

package/src/lang/el/index.ts

@@ -1,5 +1,7 @@
 import form from './form'
+import table from './table'
 
 export default {
     form: { ...form },
+    table: { ...table },
 }

package/src/lang/el/table.ts

@@ -0,0 +1,14 @@
+export default {
+    columns: 'Στήλες',
+    cancel: 'Άκυρο',
+    submit: 'Υποβολή',
+    print: 'Εκτύπωση',
+    filters: 'Φίλτρα',
+    more: 'Περισσότερα',
+    create: 'Δημιουργία',
+    delete: 'Διαγραφή',
+    deletion_description: 'Είστε σίγουροι για την διαγραφή;',
+    multiple_deletion_description: 'Είστε σίγουροι για την πολλαπλή διαγραφή;',
+    yes: 'Ναι',
+    no: 'Όχι',
+}

package/src/lang/en/index.ts

@@ -1,5 +1,7 @@
 import form from './form'
+import table from './table'
 
 export default {
     form: { ...form },
+    table: { ...table },
 }

package/src/lang/en/table.ts

@@ -0,0 +1,14 @@
+export default {
+    columns: 'Columns',
+    cancel: 'Cancel',
+    submit: 'Submit',
+    print: 'Print',
+    filters: 'Filters',
+    more: 'More',
+    create: 'Create',
+    delete: 'Delete',
+    deletion_description: 'Are you sure for the deletion?',
+    multiple_deletion_description: 'Are you sure for the multiple deletion?',
+    yes: 'Yes',
+    no: 'No',
+}

package/src/main.ts

@@ -1,48 +1,25 @@
 import { App } from 'vue'
-import { en, el } from 'vuetify/locale'
 import { pluginsPropertiesDTO } from './types/plugins'
-import { createVuetify } from 'vuetify/framework'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
-import { VFileUpload } from 'vuetify/labs/components'
+import { createVuetify } from 'vuetify'
 import { createI18n } from 'vue-i18n'
 import langEn from '../src/lang/en'
 import langEl from '../src/lang/el'
-import { createPinia } from 'pinia'
 import { useInfo } from './stores/useInfo'
 import EasyForm from './components/Form/EasyForm.vue'
 import './scss/app.scss'
+import { createPinia, getActivePinia } from 'pinia'
+import { removeMdiSet } from './composables/removeMdiSet'
+import EasyTable from './components/Table/EasyTable.vue'
+import EasyConfirmationModal from './components/Modal/EasyConfirmationModal.vue'
 
 export default {
     install(app: App, props: pluginsPropertiesDTO) {
-        useInfo().timeZone = props.timeZone
-        const vuetify = createVuetify({
-            components: {
-                ...components,
-                VFileUpload,
-            },
-            directives,
-            defaults: {},
-            theme: {
-                defaultTheme: 'customTheme',
-                themes: {
-                    customTheme: {
-                        colors: props.colors,
-                        variables: {
-                            'font-family': props.fontFamily,
-                        },
-                    },
-                },
-            },
-            locale: {
-                locale: props.locale,
-                fallback: props.locale,
-                messages: {
-                    en: { ...en },
-                    el: { ...el },
-                },
-            },
-        })
+        if (!createVuetify) {
+            throw new Error(
+                '[EasyComponents] Vuetify is required. Please install it:\n' + 'npm install vuetify'
+            )
+        }
+
         const i18n = createI18n({
             legacy: false,
             locale: props.locale ?? 'en',
@@ -51,9 +28,16 @@ export default {
                 el: langEl,
             },
         })
-        app.use(createPinia())
-        app.use(vuetify)
         app.use(i18n)
         app.component('EasyForm', EasyForm)
+        app.component('EasyTable', EasyTable)
+        app.component('EasyConfirmationModal', EasyConfirmationModal)
+        const pinia = getActivePinia() ?? createPinia()
+        app.use(pinia)
+        app.runWithContext(() => {
+            const info = useInfo()
+            info.timeZone = props.timeZone
+            removeMdiSet().run()
+        })
     },
 }

package/src/scss/app.scss

@@ -1,6 +1,5 @@
-@use 'vuetify/styles';
-@import "../../node_modules/lucide-static/font/lucide.css";
-@import "../../node_modules/@mdi/font/css/materialdesignicons.min.css";
+@import "lucide-static/font/lucide.css";
+@import "@mdi/font/css/materialdesignicons.min.css";
 
 .mainform {
   .required_field label:after{

package/src/types/plugins.ts

@@ -1,15 +1,4 @@
-export type colorsDTO = {
-    background: string
-    surface: string
-    primary: string
-    secondary: string
-    error: string
-    grey: string
-}
-
 export type pluginsPropertiesDTO = {
-    colors: colorsDTO
-    fontFamily: string
-    locale: 'el' | 'en'
+    locale: string
     timeZone: string
 }

package/vite.config.ts

@@ -3,6 +3,11 @@ import vue from '@vitejs/plugin-vue'
 import dts from 'vite-plugin-dts'
 
 export default defineConfig({
+    resolve: {
+        alias: {
+            'vue-i18n': 'vue-i18n/dist/vue-i18n.esm-bundler.js',
+        },
+    },
     plugins: [vue(), dts()],
     build: {
         cssCodeSplit: false,