@citruslime/ui 2.0.0-beta.2 → 2.0.0-beta.23

package/src/components/grid/cl-ui-grid.vue

@@ -1,477 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
-
-import { FilterRequest, FilterResponse, GridColumn, GridColumnType, GridFilterLocalisations, GridFooterLocalisations, GridHeaderLocalisations, GridLocalisations, GridViewManagerLocalisations } from '../../@types';
-import { copy } from '../../utils/copy';
-
-import ClUiGridCell from './cell/cl-ui-grid-cell.vue';
-import ClUiGridFilter from './filter/cl-ui-grid-filter.vue';
-import ClUiGridFooter from './footer/cl-ui-grid-footer.vue';
-import ClUiGridHeader from './header/cl-ui-grid-header.vue';
-
-const props = withDefaults(defineProps<{
-    currentLocale?: string;
-    localisations?: GridLocalisations & GridHeaderLocalisations & GridViewManagerLocalisations & GridFilterLocalisations & GridFooterLocalisations;
-    columns: GridColumn[];
-    request: FilterRequest;
-    loading: boolean;
-    data?: FilterResponse<Record<string, unknown>> | null;
-}>(), {
-    currentLocale: 'en-GB',
-    localisations: () => ({
-        confirmFilters: 'Confirm Filters',
-        noData: 'No data to show.',
-        noDataFiltersPresent: 'We noticed you have some filters present. Please update or clear your filters.',
-        field: 'Field',
-        filter: 'Filter',
-        sortBy: 'Sort By',
-        gridTools: 'Grid Tools',
-
-        clearFilters: 'Clear Filters',
-        modifyFilters: 'Modify Filters',
-        editData: 'Edit Data',
-        finishEditing: 'Finish Editing',
-
-        equal: 'Equals',
-        notequal: 'Does not equal',
-        contains: 'Contains',
-        notcontains: 'Does not contain',
-        startswith: 'Starts with',
-        endswith: 'Ends with',
-        lessthan: 'Less than',
-        greaterthan: 'Greater than',
-        equalorlessthan: 'Less than or equal to',
-        equalorgreaterthan: 'Greater than or equal to',
-        currentMethod: 'Current filter method',
-        availableMethods: 'Available filter methods',
-        true: 'True',
-        false: 'False',
-        selectDate: 'Select date',
-        selectDateTime: 'Select date & time',
-
-        page: 'Page',
-        pageSize: 'Page Size',
-        totalRecords: 'Total Records',
-        jumpToPage: 'Jump to Page',
-
-        manageView: 'Manage View',
-        column: 'Column',
-        visible: 'Visible',
-        order: 'Order',
-        hidden: 'Hidden'
-    }),
-    data: () => null
-});
-
-const emit = defineEmits({
-    'update:columns': null,
-    'update:request': null,
-    'data-request': null,
-    'row-edit': null,
-    'edit-start': null,
-    'edit-end': null
-});
-
-const columnStyles = ref<Record<string, string>>({});
-const editMode = ref<boolean>(false);
-const editRow = ref<{ index: number; record: Record<string, unknown>; }>({
-    index: -1,
-    record: {}
-});
-const filterPanelOpen = ref<boolean>(false);
-
-const currentColumns = computed<GridColumn[]>({
-    get: () => props.columns,
-    set: (value) => emit('update:columns', value)
-});
-
-const currentRequest = computed<FilterRequest>({
-    get: () => props.request,
-    set: (value) => emit('update:request', value)
-});
-
-const visibleColumns = computed<GridColumn[]>(() => currentColumns.value.filter(e => typeof e.visible === 'undefined' || e.visible !== false));
-
-/**
- * Updates the columns styles, adding width, max width and min width values, for every column. No styles are added, for smaller screens.
- */
-function setColumnStyles (): void {
-    const result: Record<string, string> = {};
-
-    if (window.innerWidth >= 1024) {
-        currentColumns.value.forEach((c) => {
-            const value = c.width ? `${c.width}px` : '';
-
-            result[`${c.name}`] = `width: ${value}; min-width: ${value};`;
-        });
-    }
-
-    columnStyles.value = result;
-}
-
-/**.
-         * Retrieves the style value, for the column with the provided name.
-         *
-         * @param name The name of the column.
-         * @returns The calculated style value, as a string.
-         */
-function getStyleForColumn (name: string): string {
-    return columnStyles.value[name] ?? '';
-}
-
-/**
- * Set the column which the data is being ordered by or update that ordering from ascending to descending.
- *
- * @param field The field to sort by.
- */
-function setSort (field: string | undefined): void {
-    if (typeof field !== 'undefined') {
-        const filterRequest = copy(props.request);
-
-        if (filterRequest.sort === null || filterRequest.sort.sortOnColumn !== field) {
-            filterRequest.sort = {
-                sortOnColumn: field,
-                sortByAscending: true
-            };
-        }
-        else if (filterRequest.sort.sortOnColumn === field && filterRequest.sort.sortByAscending === true) {
-            filterRequest.sort.sortByAscending = false;
-        }
-        else {
-            filterRequest.sort = null;
-        }
-
-        currentRequest.value = filterRequest;
-    }
-}
-
-/**
- * Empty the filters, from the current filter request.
- */
-function resetFilters (): void {
-    const request = copy(currentRequest.value);
-
-    request.pageNumber = 1;
-    request.filters = [];
-
-    currentRequest.value = request;
-}
-
-/**
- * Updates the index of the cell for the current row If the row has updated, fires the row edited event.
- *
- * @param index The index of the row that the cell is in.
- */
-function cellFocused (index: number): void {
-    if (editRow.value.index !== -1 && editRow.value.index !== index) {
-        rowEdited();
-    }
-
-    editRow.value.index = index;
-}
-
-/**
- * Adds the provided property to the currently edited row data.
- *
- * @param value The value to add.
- * @param field The property to add.
- */
-function cellChanged (value: unknown, field?: string): void {
-    if (field !== undefined) {
-        editRow.value.record[field] = value;
-    }
-}
-
-/**
- * Removes the provided property from the currently edited row data.
- *
- * @param field The property to remove.
- */
-function cellReverted (field?: string): void {
-    if (field !== undefined) {
-        const { [field]: _, ...remainder } = editRow.value.record;
-
-        editRow.value.record = {
-            ...remainder
-        };
-    }
-}
-
-/**
- * Emits an event containing information about the current edited row, before resetting the edited row data.
- */
-function rowEdited (): void {
-    if (Object.keys(editRow.value.record).length !== 0) {
-        emit('row-edit', copy(editRow.value));
-
-        editRow.value.record = {};
-    }
-}
-
-onMounted(() => {
-    window.addEventListener('resize', setColumnStyles);
-
-    setColumnStyles();
-});
-onUnmounted(() => window.removeEventListener('resize', setColumnStyles));
-
-watch(() => props.request, () => emit('data-request'), {
-    deep: true,
-    immediate: true
-});
-
-watch(() => editMode.value, () => {
-    if (editMode.value) {
-        emit('edit-start');
-    }
-    else {
-        rowEdited();
-        emit('edit-end');
-
-        editRow.value.index = -1;
-    }
-});
-</script>
-
-<style scoped lang="postcss">
-table {
-	@apply lg:min-h-[450px];
-}
-
-td,
-colgroup {
-	@apply whitespace-nowrap;
-}
-
-td {
-	@apply grid grid-cols-2 lg:table-cell lg:border-none border-b border-grey-0 text-xs lg:text-base font-light;
-}
-
-td > span {
-	@apply font-light;
-}
-
-th {
-	@apply opacity-90;
-}
-
-td > *:last-child {
-	@apply overflow-auto;
-}
-
-td:first-child {
-	@apply lg:pt-2 pt-5 pb-2;
-}
-
-td:last-child {
-	@apply lg:pt-2 pb-5 pt-2;
-}
-
-.grid-wrapper[data-loading='true']:after {
-	@apply absolute animate-spin border-2 border-primary-default rounded-full h-16 w-16 top-1/3 left-[calc(50%-2rem)];
-
-	border-bottom: 2px solid transparent;
-	content: '';
-}
-
-.grid.grid-cols-3 {
-	grid-template-columns: 75px auto 50px;
-}
-</style>
-
-<template>
-    <div class="hidden lg:block lg:text-right mb-4 w-full">
-        <cl-ui-grid-header v-model:columns="currentColumns"
-                           v-model:edit-mode="editMode"
-                           :localisations="localisations"
-                           @reset-filters="resetFilters" />
-    </div>
-
-    <div class="grid-wrapper relative w-full"
-         :data-loading="loading">
-        <div v-show="loading"
-             class="absolute bg-white h-full opacity-40 w-full z-20"></div>
-
-        <div class="bg-white flex flex-wrap lg:hidden sticky top-0 w-full">
-            <div class="border-b border-grey-2 flex flex-wrap px-2 py-4 w-full">
-                <strong class="mb-4 text-sm w-full">
-                    {{ localisations.gridTools }}
-                </strong>
-
-                <div class="flex flex-wrap w-full">
-                    <cl-ui-grid-header v-model:columns="currentColumns"
-                                       v-model:edit-mode="editMode"
-                                       v-model:filter-panel-open="filterPanelOpen"
-                                       :localisations="localisations"
-                                       @reset-filters="resetFilters" />
-                </div>
-            </div>
-
-            <div v-show="filterPanelOpen"
-                 class="absolute bg-white h-screen overflow-x-auto p-4 text-sm w-full z-10">
-                <div class="border-b border-grey-3 mb-2 pb-2 text-right w-full">
-                    <cl-ui-button colour="blue"
-                                  size="small"
-                                  @click.prevent="filterPanelOpen = false;">
-                        <icon class="-mt-1 inline-block"
-                              icon="ph:x"
-                              :size="16" />
-
-                        {{ localisations.confirmFilters }}
-                    </cl-ui-button>
-                </div>
-
-                <div class="grid grid-cols-3">
-                    <div>
-                        {{ localisations.field }}
-                    </div>
-
-                    <div>
-                        {{ localisations.filter }}
-                    </div>
-
-                    <div>
-                        {{ localisations.sortBy }}
-                    </div>
-                </div>
-
-                <div v-for="(column, index) in visibleColumns"
-                     :key="index"
-                     class="grid grid-cols-3 mb-4 w-full">
-                    <div>
-                        {{ column.caption }}
-                    </div>
-
-                    <cl-ui-grid-filter v-model:request="currentRequest"
-                                       :localisations="localisations"
-                                       :column="column"
-                                       :current-locale="currentLocale" />
-
-                    <template v-if="(column.type !== GridColumnType.SLOT || (column.slotType !== undefined) && column.field !== undefined) &&
-                        (column.sortable === undefined || column.sortable === true)">
-                        <icon v-if="currentRequest.sort === null || currentRequest.sort.sortOnColumn !== column.field"
-                              class="cursor-pointer ml-2"
-                              icon="ph:minus"
-                              @click="setSort(column.field)" />
-                        <icon v-else-if="currentRequest.sort.sortByAscending === false"
-                              class="cursor-pointer ml-2"
-                              icon="ph:caret-down"
-                              @click="setSort(column.field)" />
-                        <icon v-else
-                              class="cursor-pointer ml-2"
-                              icon="ph:caret-up"
-                              @click="setSort(column.field)" />
-                    </template>
-                    <div v-else
-                         class="ml-2">
-                        &nbsp;
-                    </div>
-                </div>
-            </div>
-        </div>
-
-        <div class="overflow-auto w-full">
-            <table class="min-w-full table-fixed">
-                <colgroup class="hidden lg:table-column-group">
-                    <col v-for="(column, index) in visibleColumns"
-                         :key="index"
-                         :style="getStyleForColumn(column.name)"
-                         :span="1">
-                </colgroup>
-
-                <thead class="hidden lg:table-header-group">
-                    <tr>
-                        <th v-for="(column, index) in visibleColumns"
-                            :key="index"
-                            class="border-b border-grey-2 font-semibold p-1 text-grey-3 text-left text-sm uppercase"
-                            :style="getStyleForColumn(column.name)">
-                            <span v-if="data && data.results?.length &&
-                                      (column.type !== GridColumnType.SLOT || (column.slotType !== undefined && column.field !== undefined)) &&
-                                      (column.sortable === undefined || column.sortable === true)"
-                                  class="cursor-pointer"
-                                  @click="setSort(column.field)">
-                                {{ column.caption }}
-
-                                <icon v-show="currentRequest.sort !== null && currentRequest.sort.sortOnColumn === column.field && currentRequest.sort.sortByAscending === true"
-                                      class="-mt-1 inline-block"
-                                      icon="ph:caret-up" />
-
-                                <icon v-show="currentRequest.sort !== null && currentRequest.sort.sortOnColumn === column.field && currentRequest.sort.sortByAscending === false"
-                                      class="-mt-1 inline-block"
-                                      icon="ph:caret-down" />
-                            </span>
-                            <span v-else>
-                                {{ column.caption }}
-                            </span>
-                        </th>
-                    </tr>
-
-                    <tr v-if="(data && data.results?.length) || currentRequest.filters.length > 0">
-                        <th v-for="(column, index) in visibleColumns"
-                            :key="index"
-                            class="p-1"
-                            :style="getStyleForColumn(column.name)">
-                            <cl-ui-grid-filter v-model:request="currentRequest"
-                                               :localisations="localisations"
-                                               :column="column"
-                                               :current-locale="currentLocale"
-                                               :first-half="index <= visibleColumns.length / 2" />
-                        </th>
-                    </tr>
-                </thead>
-
-                <tbody>
-                    <template v-if="data && data.results?.length">
-                        <tr v-for="(record, recordIndex) in data.results"
-                            :key="recordIndex"
-                            :class="{
-                                'bg-white': (recordIndex % 2) !== 1,
-                                'bg-off-white': (recordIndex % 2) === 1
-                            }">
-                            <cl-ui-grid-cell v-for="(column, columnIndex) in visibleColumns"
-                                             :key="columnIndex"
-                                             class="align-top p-2 whitespace-nowrap"
-                                             :style="getStyleForColumn(column.name)"
-                                             :current-locale="currentLocale"
-                                             :column="column"
-                                             :record="record"
-                                             :edit-mode="editMode"
-                                             @focus="cellFocused(recordIndex)"
-                                             @edit="cellFocused(recordIndex); cellChanged($event, column.field);"
-                                             @undo-edit="cellReverted(column.field)">
-                                <template v-for="(_, name) in $slots"
-                                          #[name]="cellData">
-                                    <slot :name="name"
-                                          v-bind="cellData"></slot>
-                                </template>
-                            </cl-ui-grid-cell>
-                        </tr>
-                    </template>
-                    <tr v-else>
-                        <td :colspan="visibleColumns.length">
-                            <div class="my-10 py-1 text-center text-sm w-full">
-                                <strong>
-                                    {{ localisations.noData }}
-                                </strong>
-
-                                <div v-if="currentRequest.filters.length > 0"
-                                     class="w-full">
-                                    {{ localisations.noDataFiltersPresent }}
-
-                                    <cl-ui-button size="small"
-                                                  @click.prevent="resetFilters">
-                                        {{ localisations.clearFilters }}
-                                    </cl-ui-button>
-                                </div>
-                            </div>
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-
-        <cl-ui-grid-footer v-model:request="currentRequest"
-                           :localisations="localisations"
-                           :data="data" />
-    </div>
-</template>