Merge pull request #95 from SafeExamBrowser/Refactor-Entity-Table

Refactor entity table

Author: Rad14nt

client/src/components/blocks/entity-table/EntityTable.vue

@@ -0,0 +1,72 @@
+<template>
+    <div class="pt-4">
+        <v-divider />
+
+        <v-row no-gutters class="px-5 pt-4 pb-3 align-center">
+            <v-col cols="12" md="4" class="d-none d-md-block" />
+
+            <v-col cols="12" md="4" class="d-flex justify-center">
+                <v-pagination
+                    :model-value="page"
+                    :length="pageCount"
+                    :total-visible="5"
+                    active-color="primary"
+                    density="comfortable"
+                    rounded="lg"
+                    variant="text"
+                    prev-icon="mdi-chevron-left"
+                    next-icon="mdi-chevron-right"
+                    class="text-medium-emphasis"
+                    @update:model-value="emit('update:page', $event)"
+                />
+            </v-col>
+
+            <v-col
+                cols="12"
+                md="4"
+                class="d-flex justify-center justify-md-end"
+            >
+                <div
+                    class="d-flex flex-wrap align-center justify-center justify-md-end ga-3"
+                >
+                    <span
+                        class="text-body-2 text-medium-emphasis font-weight-medium text-no-wrap"
+                    >
+                        {{ $t("general.itemsPerPage") }}
+                    </span>
+
+                    <v-select
+                        :model-value="itemsPerPage"
+                        :items="itemsPerPageOptions"
+                        base-color="primary"
+                        color="primary"
+                        max-width="90"
+                        min-width="90"
+                        variant="outlined"
+                        density="compact"
+                        rounded="lg"
+                        hide-details
+                        class="text-body-2 font-weight-semibold"
+                        @update:model-value="
+                            emit('update:items-per-page', $event)
+                        "
+                    />
+                </div>
+            </v-col>
+        </v-row>
+    </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+    page: number;
+    itemsPerPage: number;
+    pageCount: number;
+    itemsPerPageOptions: number[];
+}>();
+
+const emit = defineEmits<{
+    "update:page": [page: number];
+    "update:items-per-page": [itemsPerPage: number];
+}>();
+</script>

client/src/components/blocks/entity-table/components/TableFooter.vue

@@ -0,0 +1,40 @@
+<template>
+    <div class="d-flex justify-center align-center ga-1">
+        <v-hover
+            v-for="action in visibleActions"
+            :key="action.key"
+            v-slot="{ isHovering, props: hoverProps }"
+        >
+            <v-btn
+                v-bind="hoverProps"
+                :icon="action.icon"
+                :disabled="action.disabled?.(item) ?? false"
+                :aria-label="action.label"
+                variant="text"
+                density="comfortable"
+                size="small"
+                rounded="lg"
+                class="text-medium-emphasis"
+                :color="isHovering ? (action.color ?? 'primary') : undefined"
+                @click.stop="action.onClick(item)"
+            />
+        </v-hover>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import type {
+    TableAction,
+    TableItem,
+} from "@/components/blocks/entity-table/types.ts";
+
+const props = defineProps<{
+    item: TableItem;
+    actions: TableAction[];
+}>();
+
+const visibleActions = computed(() =>
+    props.actions.filter((a) => a.visible?.(props.item) ?? true),
+);
+</script>

client/src/components/blocks/entity-table/components/TableRowActions.vue

@@ -0,0 +1,25 @@
+import { computed, type MaybeRefOrGetter, toValue } from "vue";
+import type { TableHeader } from "@/components/blocks/entity-table/types.ts";
+
+export function useTableHeaders(
+    headers: MaybeRefOrGetter<TableHeader[]>,
+    hasActions: MaybeRefOrGetter<boolean>,
+) {
+    const computedHeaders = computed<TableHeader[]>(() => {
+        const base = [...toValue(headers)];
+
+        if (toValue(hasActions)) {
+            base.push({
+                title: "",
+                key: "_actions",
+                sortable: false,
+                width: "1%",
+                align: "center",
+            });
+        }
+
+        return base;
+    });
+
+    return { computedHeaders };
+}

client/src/components/blocks/entity-table/composables/useTableCellFormatters.ts

@@ -0,0 +1,37 @@
+import { type MaybeRefOrGetter, toValue } from "vue";
+import type {
+    CellFormatter,
+    TableItem,
+} from "@/components/blocks/entity-table/types.ts";
+
+export function useTableItems(
+    cellFormatters: MaybeRefOrGetter<Record<string, CellFormatter> | undefined>,
+) {
+    function getRawItem(item: unknown): TableItem {
+        if (
+            item &&
+            typeof item === "object" &&
+            "raw" in item &&
+            item.raw &&
+            typeof item.raw === "object"
+        ) {
+            return item.raw as TableItem;
+        }
+
+        return item as TableItem;
+    }
+
+    function formatCell(key: string, item: TableItem): string {
+        const formatter = toValue(cellFormatters)?.[key];
+
+        if (formatter) return formatter(item[key], item);
+
+        const value = item[key];
+
+        if (value === null || value === undefined) return "";
+
+        return String(value);
+    }
+
+    return { getRawItem, formatCell };
+}

client/src/components/blocks/entity-table/composables/useTableHeaders.ts

@@ -51,7 +51,6 @@ export function useTableNavigation(
 
     return {
         identifierKey,
-        getItemIdentifier,
         buildItemRoute,
         navigateToItem,
     };

client/src/components/blocks/entity-table/composables/useTableItems.ts

@@ -0,0 +1,88 @@
+import { computed, type MaybeRefOrGetter, toValue } from "vue";
+import type { ServerTablePaging } from "@/models/types.ts";
+
+type SortItemForTable = { key: string; order?: boolean | "asc" | "desc" };
+
+const DEFAULT_ITEMS_PER_PAGE = 10;
+
+export function useTablePagination(deps: {
+    options: MaybeRefOrGetter<ServerTablePaging | undefined>;
+    itemsPerPage: MaybeRefOrGetter<number | undefined>;
+    pageCount: MaybeRefOrGetter<number | undefined>;
+    items: MaybeRefOrGetter<readonly unknown[]>;
+    itemsLength: MaybeRefOrGetter<number | undefined>;
+    emit: (options: ServerTablePaging) => void;
+}) {
+    const currentPage = computed(() => toValue(deps.options)?.page ?? 1);
+
+    const currentItemsPerPage = computed(
+        () =>
+            toValue(deps.options)?.itemsPerPage ??
+            toValue(deps.itemsPerPage) ??
+            DEFAULT_ITEMS_PER_PAGE,
+    );
+
+    const resolvedPageCount = computed(() => toValue(deps.pageCount) ?? 0);
+
+    const itemsPerPageOptions = computed(() => {
+        const pc = resolvedPageCount.value;
+        const ic = toValue(deps.items).length;
+        const opts = [5];
+
+        if (pc > 1 || ic > 5) opts.push(10);
+        if (pc > 2 || ic > 10) opts.push(15);
+
+        return opts;
+    });
+
+    const internalItemsLength = computed(() => {
+        const override = toValue(deps.itemsLength);
+        if (override !== undefined) return override;
+
+        const page = currentPage.value;
+        const perPage = currentItemsPerPage.value;
+        const pc = resolvedPageCount.value;
+        const ic = toValue(deps.items).length;
+
+        if (pc === 0) return ic;
+        if (page === pc) {
+            return (pc - 1) * perPage + ic;
+        }
+        return pc * perPage;
+    });
+
+    const sortByForTable = computed<SortItemForTable[]>(() =>
+        (toValue(deps.options)?.sortBy ?? []).map((s) => ({
+            key: s.key,
+            order: s.order as "asc" | "desc" | undefined,
+        })),
+    );
+
+    function emitOptionsUpdate(partial: Partial<ServerTablePaging>) {
+        deps.emit({
+            page: currentPage.value,
+            itemsPerPage: currentItemsPerPage.value,
+            sortBy: toValue(deps.options)?.sortBy ?? [],
+            ...partial,
+        });
+    }
+
+    function onPageUpdate(page: number) {
+        emitOptionsUpdate({ page });
+    }
+
+    function onItemsPerPageUpdate(itemsPerPage: number) {
+        emitOptionsUpdate({ page: 1, itemsPerPage });
+    }
+
+    return {
+        currentPage,
+        currentItemsPerPage,
+        resolvedPageCount,
+        itemsPerPageOptions,
+        internalItemsLength,
+        sortByForTable,
+        onPageUpdate,
+        onItemsPerPageUpdate,
+    };
+}