easycomponentstools 1.0.0-dev.1.1 → 1.0.0-dev.11

package/src/components/Table/Headers/DialogColumns.vue

@@ -0,0 +1,147 @@
+<template>
+    <v-dialog v-model="dialog" max-width="450">
+        <template #activator="{ props }">
+            <v-btn
+                elevation="0"
+                v-bind="props"
+                style="margin-left: -14px"
+                class="text-md-body-large"
+            >
+                <i class="icon-columns-3 mr-1" /> {{ $i18n.t('table.columns') }}
+            </v-btn>
+        </template>
+        <v-card class="list_draggable" @mousemove="onDragMove">
+            <div
+                v-if="draggedItem"
+                class="floating-drag-item"
+                :style="`top:${mouseY}px;left:${mouseX}px`"
+            >
+                {{ draggedItem.title }}
+            </div>
+            <v-card-title>
+                <v-row>
+                    <v-col cols="11">
+                        {{ $i18n.t('table.columns') }}
+                    </v-col>
+                    <v-col cols="1" class="d-flex justify-end">
+                        <i class="icon icon-x" style="cursor: pointer" @click="dialog = false"></i>
+                    </v-col>
+                </v-row>
+            </v-card-title>
+            <v-card-text>
+                <v-list style="background: transparent">
+                    <v-list-item
+                        v-for="(header, index) in headerItems"
+                        :key="index"
+                        class="draggable-item"
+                        @mousedown.left="onDragStart($event, header)"
+                        @mouseup.left="onDrop($event, header)"
+                    >
+                        <v-row>
+                            <v-col
+                                cols="2"
+                                class="d-flex justify-content-start align-items-center"
+                                style="margin-top: -15px"
+                            >
+                                <v-switch
+                                    v-model="header.show"
+                                    hide-details
+                                    color="primary"
+                                ></v-switch>
+                            </v-col>
+                            <v-col cols="7" class="d-flex align-items-center">
+                                {{ header.title }}
+                            </v-col>
+                            <v-col cols="3" class="d-flex justify-content-end align-items-center">
+                                <i class="icon icon-grip-horizontal"></i>
+                            </v-col>
+                        </v-row>
+                    </v-list-item>
+                </v-list>
+            </v-card-text>
+            <v-card-actions>
+                <v-row>
+                    <v-col class="d-flex justify-start">
+                        <v-btn color="error" @click="dialog = false">
+                            {{ $i18n.t('table.cancel') }}
+                        </v-btn>
+                    </v-col>
+                    <v-col class="d-flex justify-end">
+                        <v-btn color="success" @click="submit">
+                            {{ $i18n.t('table.submit') }}
+                        </v-btn>
+                    </v-col>
+                </v-row>
+            </v-card-actions>
+        </v-card>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref, Ref } from 'vue'
+import { HeaderDTO } from '../../../types/table'
+import { useI18n } from 'vue-i18n'
+
+type propsType = {
+    headers: HeaderDTO[]
+}
+const props = defineProps<propsType>()
+const $i18n = useI18n()
+const emit = defineEmits(['submit'])
+const headerItems: Ref<HeaderDTO[]> = ref([])
+const dialog: Ref<boolean> = ref(false)
+const mouseX: Ref<number> = ref(0)
+const mouseY: Ref<number> = ref(0)
+const startX: Ref<number> = ref(0)
+const startY: Ref<number> = ref(0)
+const offsetX: Ref<number> = ref(0)
+const offsetY: Ref<number> = ref(0)
+const draggedItem: Ref<HeaderDTO | null> = ref(null)
+
+const onDragStart = (event: DragEvent, header: HeaderDTO) => {
+    startX.value = event.clientX
+    startY.value = event.clientY
+    const rect = document.querySelector('.list_draggable')?.getBoundingClientRect()
+    offsetX.value = event.clientX - (rect?.left ?? 0) - 20
+    offsetY.value = event.clientY - (rect?.top ?? 0) - 20
+    draggedItem.value = header
+}
+const onDrop = (event: DragEvent, targetHeader: HeaderDTO) => {
+    event.preventDefault()
+    if (draggedItem.value && draggedItem.value !== targetHeader) {
+        const targetIndex = headerItems.value.findIndex((v) => v.value === targetHeader.value)
+        const draggableIndex = headerItems.value.findIndex(
+            (v) => v.value === draggedItem.value?.value
+        )
+        if (targetIndex !== -1 && draggableIndex !== -1) {
+            headerItems.value.splice(draggableIndex, 1)
+            headerItems.value.splice(targetIndex, 0, draggedItem.value)
+        }
+    }
+    draggedItem.value = null
+}
+const onDragMove = (event: DragEvent) => {
+    if (draggedItem.value) {
+        mouseX.value = event.clientX - startX.value + offsetX.value
+        mouseY.value = event.clientY - startY.value + offsetY.value
+    }
+}
+const submit = () => {
+    const headers = headerItems.value.map((header) => {
+        header['hidden'] = !header?.show
+        return header
+    })
+    emit('submit', headers)
+    dialog.value = false
+}
+
+onBeforeMount(() => {
+    headerItems.value = [...props.headers]
+    headerItems.value = headerItems.value.map((header) => {
+        Object.assign(header, { show: !header?.hidden })
+        return header
+    })
+})
+</script>
+
+<style scoped lang="scss"></style>

package/src/components/Table/Headers/ExportData.vue

@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <v-list-item :disabled="disabledComputed" @click="$useDataTableExport.exportData('pdf')">
+            <i class="icon-file-sliders" /> PDF
+        </v-list-item>
+        <v-list-item :disabled="disabledComputed" @click="$useDataTableExport.exportData('csv')">
+            <i class="icon-file-sliders" /> CSV
+        </v-list-item>
+        <v-list-item :disabled="disabledComputed" @click="$useDataTableExport.exportData('xlsx')">
+            <i class="icon-file-sliders" /> EXCEL
+        </v-list-item>
+        <v-list-item :disabled="disabledComputed" @click="$useDataTableExport.exportData('word')">
+            <i class="icon-file-sliders" /> WORD
+        </v-list-item>
+        <v-list-item :disabled="disabledComputed" @click="$useDataTableExport.exportData('print')">
+            <i class="icon-file-sliders" /> {{ $i18n.t('table.print') }}
+        </v-list-item>
+    </div>
+</template>
+
+<script setup lang="ts">
+import useDataTableExport from '../../../composables/useDataTableExport'
+import { useI18n } from 'vue-i18n'
+import { computed, watch } from 'vue'
+import { AdvancedFiltersDTO, HardFiltersDTO, HeaderDTO, SortDTO } from '../../../types/table'
+
+const emit = defineEmits(['loading'])
+const $i18n = useI18n()
+const $useDataTableExport = useDataTableExport()
+const disabledComputed = computed(
+    () => !$useDataTableExport.api.value || $useDataTableExport.total.value === 0
+)
+
+const setExportDataInfo = (
+    api: string,
+    headers: HeaderDTO[],
+    total: number,
+    sort: SortDTO | null,
+    filters: AdvancedFiltersDTO[],
+    hard_filters: HardFiltersDTO[]
+) => {
+    $useDataTableExport.setApi(api)
+    if (sort) $useDataTableExport.setSort({ ...sort })
+    $useDataTableExport.setFilters([...filters])
+    $useDataTableExport.setHardFilters([...hard_filters])
+    $useDataTableExport.setHeaders([...headers])
+    $useDataTableExport.setTotal(total)
+}
+const setHeaders = (headers: HeaderDTO[]) => {
+    $useDataTableExport.setHeaders([...headers])
+}
+const setFilters = (filters: AdvancedFiltersDTO[]) => {
+    $useDataTableExport.setFilters([...filters])
+}
+const setSort = (sort: SortDTO) => {
+    $useDataTableExport.setSort({ ...sort })
+}
+const setHardFilters = (HardFilters: HardFiltersDTO[]) => {
+    $useDataTableExport.setHardFilters([...HardFilters])
+}
+const setTotal = (total: number) => {
+    $useDataTableExport.setTotal(total)
+}
+
+watch($useDataTableExport.loading, (v) => emit('loading', v), { immediate: true })
+
+defineExpose({ setExportDataInfo, setHeaders, setFilters, setSort, setHardFilters, setTotal })
+</script>
+
+<style scoped></style>

package/src/components/Table/Headers/Filters.vue

@@ -0,0 +1,219 @@
+<template>
+    <div style="width: 100%">
+        <v-btn
+            v-if="active_filters.length !== 0"
+            color="primary"
+            width="45%"
+            class="mr-2"
+            @click="clear"
+        >
+            <i class="icon-funnel-x"></i>
+        </v-btn>
+        <v-btn
+            v-bind="props"
+            color="primary"
+            :width="active_filters.length === 0 ? '100%' : '50%'"
+            @click="dialog = true"
+        >
+            <i class="icon-funnel mr-1"></i> {{ $i18n.t('table.filters') }}
+        </v-btn>
+        <v-dialog v-model="dialog" width="600">
+            <v-card>
+                <v-card-title>
+                    <v-row>
+                        <v-col cols="11">
+                            {{ $i18n.t('table.filters') }}
+                        </v-col>
+                        <v-col cols="1" class="d-flex justify-end">
+                            <i
+                                class="icon icon-x"
+                                style="cursor: pointer"
+                                @click="dialog = false"
+                            ></i>
+                        </v-col>
+                    </v-row>
+                </v-card-title>
+                <v-card-text>
+                    <v-row v-for="(filter, index) in allFilters" :key="index">
+                        <v-col v-if="isFilterTypeInput(filter.type)" cols="12">
+                            <v-text-field
+                                v-model="allFilters[index].value"
+                                :label="filter.label"
+                                hide-details
+                                variant="underlined"
+                            ></v-text-field>
+                        </v-col>
+                        <v-col v-if="filter.type === 'selects'" cols="12">
+                            <v-select
+                                v-model="allFilters[index].value"
+                                :label="filter.label"
+                                :items="filter.items"
+                                hide-details
+                                variant="underlined"
+                            ></v-select>
+                        </v-col>
+                        <v-col
+                            v-if="filter.type === 'date' && Array.isArray(allFilters[index].value)"
+                            cols="12"
+                        >
+                            <RangeDatePicker
+                                v-model="allFilters[index].value"
+                                :input="{ ...inputRangDatePicker, label: filter?.label ?? '' }"
+                            />
+                        </v-col>
+                        <v-col
+                            v-if="
+                                filter.type === 'dateTime' && Array.isArray(allFilters[index].value)
+                            "
+                            cols="12"
+                        >
+                            <RangeDatePicker
+                                v-model="allFilters[index].value"
+                                :input="{ ...inputRangDateTimePicker, label: filter?.label ?? '' }"
+                            />
+                        </v-col>
+                        <v-col
+                            v-if="
+                                isAdvancedFiltersComparisonDTO(filter.type, allFilters[index].value)
+                            "
+                            cols="12"
+                        >
+                            <v-row>
+                                <v-col cols="2">
+                                    <v-select
+                                        v-model="allFilters[index].value.symbol"
+                                        hide-details
+                                        :items="['<', '<=', '=', '>', '>=']"
+                                        variant="underlined"
+                                    ></v-select>
+                                </v-col>
+                                <v-col cols="10">
+                                    <v-text-field
+                                        v-model.number="allFilters[index].value.value"
+                                        type="number"
+                                        hide-details
+                                        :label="filter.label"
+                                        variant="underlined"
+                                    ></v-text-field>
+                                </v-col>
+                            </v-row>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+                <v-card-actions class="ma-2">
+                    <v-row>
+                        <v-col class="d-flex justify-start">
+                            <v-btn color="error" variant="flat" @click="dialog = false">
+                                {{ $i18n.t('message.cancel') }}
+                            </v-btn>
+                        </v-col>
+                        <v-col class="d-flex justify-end">
+                            <v-btn color="success" variant="flat" @click="submit">
+                                {{ $i18n.t('message.submit') }}
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-card-actions>
+            </v-card>
+        </v-dialog>
+    </div>
+</template>
+
+<script setup lang="ts">
+import RangeDatePicker from '../../Form/types/RangeDatePicker.vue'
+import { onMounted, Ref, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { AdvancedFiltersComparisonDTO, AdvancedFiltersDTO } from '../../../types/table'
+import { InputDTO } from '../../../types/form'
+
+type propsType = {
+    filters: AdvancedFiltersDTO[]
+}
+
+const emit = defineEmits(['search'])
+const dialog: Ref<boolean> = ref(false)
+const $i18n = useI18n()
+const active_filters: Ref<AdvancedFiltersDTO[]> = ref([])
+const allFilters: Ref<AdvancedFiltersDTO[]> = ref([])
+const props = defineProps<propsType>()
+const inputRangDateTimePicker: InputDTO = {
+    type: 'rangeDate',
+    key: 'inputRangDateTimePicker',
+    label: '',
+    options: {
+        enableTime: true,
+    },
+}
+const inputRangDatePicker: InputDTO = {
+    type: 'rangeDate',
+    key: 'inputRangDatePicker',
+    label: '',
+    options: {
+        enableTime: false,
+    },
+}
+
+function isAdvancedFiltersComparisonDTO(
+    type: string,
+    obj: any
+): obj is AdvancedFiltersComparisonDTO {
+    return (
+        type === 'comparison' &&
+        typeof obj === 'object' &&
+        obj !== null &&
+        'symbol' in obj &&
+        'value' in obj
+    )
+}
+function isFilterTypeInput(type: string) {
+    return type === 'input' || type === 'inArray' || type === 'likeInArray'
+}
+const submit = () => {
+    active_filters.value = []
+    props.filters.forEach((filter: AdvancedFiltersDTO) => {
+        let val = null
+        if (
+            isAdvancedFiltersComparisonDTO(filter.type, filter.value) ||
+            ((filter.type === 'date' || filter.type === 'dateTime') &&
+                Array.isArray(filter.value) &&
+                filter.value.length !== 0) ||
+            ((filter.type === 'input' ||
+                filter.type === 'inArray' ||
+                filter.type === 'likeInArray' ||
+                filter.type === 'selects') &&
+                filter.value)
+        ) {
+            val = filter.value
+        }
+        if (val) {
+            active_filters.value.push({
+                type: filter.type,
+                column: filter.column,
+                value: val,
+            })
+        }
+    })
+    emit('search', active_filters.value)
+    dialog.value = false
+}
+const clear = () => {
+    dialog.value = false
+    active_filters.value = []
+    emit('search', active_filters.value)
+    props.filters.forEach((filter) => {
+        if (filter.type === 'comparison') {
+            filter.value = { value: 0, symbol: '<' }
+        } else if (filter.type === 'date' || filter.type === 'dateTime') {
+            filter.value = []
+        } else if (filter.value) {
+            filter.value = ''
+        }
+    })
+}
+
+onMounted(() => {
+    allFilters.value = props.filters
+})
+</script>
+
+<style scoped></style>

package/src/components/Table/Headers/Headers.vue

@@ -0,0 +1,154 @@
+<template>
+    <v-row class="mb-2">
+        <v-col cols="12" md="12" lg="6" sm="12">
+            <h4 v-if="title">{{ title }}</h4>
+            <v-chip-group
+                v-model="active_hard_filters"
+                :multiple="multipleHardFilters"
+                filter
+                @update:model-value="updateHardFilters"
+            >
+                <v-chip
+                    v-for="(hardFilter, index) in hardFilters"
+                    :key="index"
+                    :text="hardFilter?.label ?? ''"
+                    :value="hardFilter.key"
+                ></v-chip>
+            </v-chip-group>
+        </v-col>
+        <v-col cols="12" md="12" lg="2" sm="12" class="d-flex justify-end">
+            <v-btn v-if="create" color="primary" width="100%" @click="create">
+                <i class="icon-plus" /> {{ $i18n.t('table.create') }}
+            </v-btn>
+        </v-col>
+        <v-col cols="12" md="12" lg="2" sm="12" class="d-flex justify-end">
+            <Filters :filters="advancedFilters" @search="search"></Filters>
+        </v-col>
+        <v-col cols="12" md="12" lg="2" sm="12" class="d-flex justify-end">
+            <v-menu eager>
+                <template #activator="{ props: propsMenu }">
+                    <v-btn color="primary" v-bind="propsMenu" width="100%">
+                        <v-icon>icon-menu</v-icon>
+                        {{ $i18n.t('table.more') }}
+                    </v-btn>
+                </template>
+                <v-list>
+                    <v-list-item>
+                        <DialogColumns
+                            :headers="props.headers"
+                            @submit="submitHeaders"
+                        ></DialogColumns>
+                    </v-list-item>
+                    <slot name="moreActions"></slot>
+                    <ExportData
+                        v-if="showExportData"
+                        ref="exportDataRef"
+                        @loading="(v: boolean) => emit('loading', v)"
+                    ></ExportData>
+                </v-list>
+            </v-menu>
+        </v-col>
+    </v-row>
+    <v-row v-if="multipleDeletion && selected.length !== 0" class="mb-2 d-flex justify-end">
+        <v-col cols="12" md="12" lg="2" sm="12">
+            <v-btn color="error" width="100%" @click="multipleDelete">
+                <i class="icon-trash" /> {{ $i18n.t('table.delete') }}
+            </v-btn>
+        </v-col>
+    </v-row>
+</template>
+
+<script setup lang="ts">
+import { AdvancedFiltersDTO, HardFiltersDTO, HeaderDTO, SortDTO } from '../../../types/table'
+import { useI18n } from 'vue-i18n'
+import { nextTick, onMounted, ref, Ref } from 'vue'
+import useHeadersStorage from '../../../composables/useHeadersStorage'
+import Filters from './Filters.vue'
+import DialogColumns from './DialogColumns.vue'
+import ExportData from './ExportData.vue'
+
+type propsType = {
+    id: string
+    headers: HeaderDTO[]
+    create?: any
+    showExportData?: boolean
+    title?: string
+    multipleHardFilters?: boolean
+    multipleDeletion?: boolean
+    hardFilters: HardFiltersDTO[]
+    advancedFilters: AdvancedFiltersDTO[]
+    selected: any[]
+}
+const props = defineProps<propsType>()
+const $i18n = useI18n()
+const $useHeadersStorage = useHeadersStorage()
+const emit = defineEmits(['loading', 'headers', 'search', 'hardFilters', 'multipleDelete'])
+const active_hard_filters: Ref<any[]> = ref([])
+const exportDataRef: any = ref(null)
+
+const updateHardFilters = (hard_filters_keys: any) => {
+    const hard_filters: HardFiltersDTO[] = []
+    if (!Array.isArray(hard_filters_keys)) hard_filters_keys = [hard_filters_keys]
+    hard_filters_keys.forEach((key: string) => {
+        const hardFilter = props.hardFilters.filter((v) => v.key === key)
+        if (hardFilter.length !== 0) {
+            hard_filters.push({
+                type: hardFilter[0].type,
+                column: hardFilter[0].column,
+            })
+        }
+    })
+    exportDataRef.value?.setHardFilters(hard_filters)
+    emit('hardFilters', hard_filters)
+}
+const multipleDelete = () => {
+    emit('multipleDelete', true)
+}
+const search = (filters: AdvancedFiltersDTO[]) => {
+    exportDataRef.value?.setFilters(filters)
+    emit('search', filters)
+}
+const submitHeaders = (headers: HeaderDTO[]) => {
+    $useHeadersStorage.submitHeaders(headers, props.id)
+    const displayHeaders = headers.filter((v) => !v.hidden)
+    emit('headers', displayHeaders)
+    exportDataRef.value?.setHeaders(displayHeaders)
+}
+const updateExportSortData = (sort: SortDTO) => {
+    exportDataRef.value?.setSort(sort)
+}
+const updateExportDataTotal = (total: number) => {
+    exportDataRef.value?.setTotal(total)
+}
+const updateExportData = (
+    api: string,
+    headers: HeaderDTO[],
+    total: number,
+    sort: SortDTO | null,
+    filters: AdvancedFiltersDTO[],
+    hard_filters: HardFiltersDTO[]
+) => {
+    const displayHeaders = headers.filter((header: HeaderDTO) => !header.hidden)
+    nextTick(() => {
+        exportDataRef.value?.setExportDataInfo(
+            api,
+            displayHeaders,
+            total,
+            sort,
+            filters,
+            hard_filters
+        )
+    })
+}
+
+onMounted(() => {
+    active_hard_filters.value = props.hardFilters
+        .filter((item) => !!item.active)
+        .map((item) => item.column)
+    updateHardFilters(active_hard_filters.value)
+})
+
+defineExpose({ updateExportData, updateExportSortData, updateExportDataTotal })
+</script>
+
+<style scoped></style>

package/src/composables/removeMdiSet.ts

@@ -0,0 +1,19 @@
+export const removeMdiSet = () => {
+    const run = () => {
+        setInterval(() => {
+            document.querySelectorAll('.v-icon')?.forEach((icon) => {
+                if (
+                    [...icon.classList].some(
+                        (cls) => cls.startsWith('icon-') || cls.startsWith('iconapp-')
+                    )
+                ) {
+                    icon.classList.remove('mdi')
+                }
+            })
+        }, 700)
+    }
+
+    return {
+        run,
+    }
+}