inicontent 1.0.0

package/app/components/Table/index.vue

@@ -0,0 +1,890 @@
+<template>
+	<div>
+		<LazyFormDrawer>
+			<template #default="{ onAfterCreate, onAfterUpdate }">
+				<slot name="form" :onAfterCreate :onAfterUpdate></slot>
+			</template>
+		</LazyFormDrawer>
+		<LazyTableTranslateDrawer
+			v-if="database?.secondaryLanguages?.length"
+			v-model:show="translateDrawerShow"
+			:item="translateDrawerItem"
+		/>
+		<input ref="importFileInputRef" type="file" accept=".csv,.json,text/csv,application/json"
+			hidden @change="handleImportFileSelected" />
+		<NCard :title="t(table.slug) ?? '--'"
+			:class="`table_${table.slug}`" id="tableCard" 
+			style="background-color: transparent;"
+			:header-style="{ paddingRight: 0, paddingLeft: 0 }" content-style="padding: 0" :bordered="false">
+			<template #header-extra>
+				<NFlex id="navbarActions" align="center" justify="center" :size="isSlotSet('navbarExtraActions') ? 'medium' : 0" style="flex-direction: row-reverse;">
+					<slot name="navbarActions">
+						<NButtonGroup id="navbarExtraButtons">
+							<NTooltip v-if="table.config?.realtime" :delay="1500">
+								<template #trigger>
+									<NButton round size="small" type="success" secondary :loading="isConnecting">
+										<template #icon>
+											<NIcon>
+												<Icon :name="isConnected ? 'tabler:wifi' : 'tabler:wifi-off'" />
+											</NIcon>
+										</template>
+									</NButton>
+								</template>
+								{{ isConnected ? t("realtimeEnabled") : t("connectingToRealtime") }}
+							</NTooltip>
+
+							<NDropdown :options="toolsDropdownOptions" @select="toolsDropdownOnSelect" trigger="click">
+								<NTooltip :delay="1500">
+									<template #trigger>
+										<NButton secondary round size="small">
+											<template #icon>
+												<NIcon>
+													<Icon name="tabler:tools" />
+												</NIcon>
+											</template>
+										</NButton>
+									</template>
+									{{ t("tools") }}
+								</NTooltip>
+							</NDropdown>
+
+							<NDropdown v-if="table.allowedMethods?.includes('c')" placement="bottom" trigger="hover"
+								size="small" :options="createDropdownOptions" @select="createDropdownOnSelect">
+								<NTooltip placement="top" :delay="1500">
+									<template #trigger>
+										<NButton secondary round :disabled="!table.schema" tag="a"
+											:href="table.schema ? `${$route.params.database ? `/${$route.params.database}` : ''}/admin/tables/${table.slug}/new` : '#'"
+											@click.prevent="() => {
+												if (!isMobile)
+													openDrawer(table.slug)
+												else
+													navigateTo(`${$route.params.database ? `/${$route.params.database}` : ''}/admin/tables/${table.slug}/new`);
+											}" size="small">
+											<template #icon>
+												<NIcon>
+													<Icon name="tabler:plus" />
+												</NIcon>
+											</template>
+										</NButton>
+									</template>
+									{{ t("newItem") }}
+								</NTooltip>
+							</NDropdown>
+							<TableSearchButton v-model:string="searchString" v-model:array="searchArray"
+								size="small" />
+							<slot name="navbarExtraButtons"></slot>
+						</NButtonGroup>
+						<slot name="navbarExtraActions"></slot>
+					</slot>
+					<template v-if="isSlotSet('navbarActions')">
+						<div id="navbarExtraButtons"></div>
+						<div id="navbarExtraActions"></div>
+					</template>
+				</NFlex>
+			</template>
+			<slot name="default" :data>
+				<LazyTableViewsKanban v-if="table.displayAs === 'kanban'" v-model:columns="columns" v-model:data="data"
+					v-model:searchString="searchString" :slots />
+				<LazyTableViewsTable v-else v-model:columns="columns" v-model:data="data"
+					v-model:searchString="searchString" ref="tableViewRef" :slots />
+			</slot>
+		</NCard>
+		<LazyTableLogs v-if="table.config?.log" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { isStringified } from "inibase/utils";
+import Inison from "inison";
+import type {
+	DataTableColumns,
+	DropdownOption,
+	NotificationReactive,
+} from "naive-ui";
+import {
+	Icon,
+	NButton,
+	NButtonGroup,
+	NFlex,
+	NIcon,
+	NPopconfirm,
+	NProgress,
+	NTime,
+	NTooltip,
+} from "#components";
+import {
+	generateSearchArray,
+	generateSearchString,
+} from "~/composables/search";
+import { useRealtimeSync } from "~/composables/useRealtimeSync";
+
+const user = useState<User>("user");
+const route = useRoute();
+const router = useRouter();
+const { isMobile } = useDevice();
+
+const searchString = ref<string>(
+	(route.query.search as string | undefined) ?? "",
+);
+const searchArray = ref<searchType>(
+	route.query.search
+		? generateSearchArray(Inison.unstringify(route.query.search as string))
+		: { and: [[null, "=", null]] },
+);
+
+const columns = ref<DataTableColumns>();
+const data = ref<apiResponse<Item[]>>();
+
+const database = useState<Database>("database");
+const table = useState<Table>("table");
+
+// ── When the current language isn't the primary language, disable inline table edit feature ──
+const { isConnected, isConnecting } = useRealtimeSync(table, data, database);
+
+// ── Offline-queued creates appear in the table ──────────────────────────────
+// When a create is queued (device offline), the cached table data has no trace
+// of the new item. Merge the pending POSTs back in as virtual rows so the item
+// is visibly "there" — at the top when the table's `prepend` config is set,
+// otherwise appended at the bottom. Once the mutation syncs and the server has
+// the real item, the next refresh drops the virtual row automatically.
+const pendingMergeSignature = ref("");
+async function mergePendingCreates() {
+	const db = database.value?.slug;
+	const slug = table.value?.slug;
+	if (!db || !slug || !Array.isArray(data.value?.result)) return;
+
+	const pending = await getPendingCreates(db, slug);
+	const signature = pending
+		.map((p) => (p as any).__pending?.queuedId ?? "")
+		.sort()
+		.join(",");
+	// Same queue state as last merge — nothing to do. This guard also stops
+	// this watcher from looping after the in-place re-sort below.
+	if (signature === pendingMergeSignature.value) return;
+	pendingMergeSignature.value = signature;
+
+	// Drop previously-merged virtual rows, then re-add the pending set.
+	const result = data.value.result.filter((row) => !(row as any).__pending);
+	if (pending.length) {
+		const prepend = !!table.value?.config?.prepend;
+		for (const item of pending) {
+			if (prepend) result.unshift(item);
+			else result.push(item);
+		}
+	}
+	data.value.result = result;
+}
+watch(data, () => {
+	mergePendingCreates();
+});
+onMounted(() => {
+	mergePendingCreates();
+});
+
+watch(searchString, (v) => {
+	const { search, page, ...Query }: any = route.query;
+
+	router.push({
+		query: {
+			...(Query ?? {}),
+			search: v,
+		},
+	});
+});
+
+watch(
+	searchArray,
+	(v) => {
+		const searchInput = v ? generateSearchString(v, "display") : undefined;
+		const nextSearchString = searchInput
+			? Inison.stringify(searchInput)
+			: undefined;
+
+		if (searchString.value !== nextSearchString)
+			searchString.value = nextSearchString;
+	},
+	{ deep: true },
+);
+
+const tablesConfig = computed({
+	get: () => user.value?.config?.tables ?? {},
+	set: (v) => {
+		user.value.config = { ...(user.value.config ?? {}), tables: v };
+		$fetch(
+			`${config.public.apiBase}${database.value.slug}/users/${user.value?.id}`,
+			{
+				method: "PUT",
+				body: user.value,
+				params: {
+					return: false,
+					locale: Language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+			},
+		).catch((err) => window.$message.error(err.message));
+	},
+});
+
+if (tablesConfig.value[table.value.slug]?.view)
+	table.value.displayAs = tablesConfig.value[table.value.slug]?.view;
+
+const config = useRuntimeConfig();
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}));
+const Language = useScopedCookie<LanguagesType>(
+	"language",
+	database.value?.slug,
+);
+const sessionID = useScopedCookie<string>("sid", database.value?.slug);
+const importFileInputRef = ref<HTMLInputElement>();
+const importUploadProgress = ref(0);
+
+watch(Language, () => {
+	searchString.value = "";
+	searchArray.value = { and: [[null, "=", null]] };
+});
+
+async function deleteItem(id?: string | number | (string | number)[]) {
+	if (!data.value) return;
+	Loading.value.data = true;
+	const deleteResponse = await useOfflineFetch()
+		.request(
+			`${config.public.apiBase}${database.value.slug}/${table.value?.slug}${!id || Array.isArray(id) ? "" : `/${id}`}`,
+			{
+				method: "DELETE",
+				query: {
+					where: id && Array.isArray(id) ? Inison.stringify(id) : undefined,
+					locale: Language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+				offline: {
+					database: database.value.slug,
+					table: table.value?.slug ?? "",
+				},
+			},
+		)
+		.catch((err) => {
+			window.$message.error(err.message);
+			return null;
+		});
+	if (isOfflineQueuedResult(deleteResponse)) {
+		window.$message.warning(t("queuedOfflineToast"));
+		useOfflineSync().refreshCounts();
+		Loading.value.data = false;
+		return;
+	}
+	if ((deleteResponse as any)?.result)
+		window.$message.success((deleteResponse as any).message);
+	else window.$message.error((deleteResponse as any)?.message);
+	Loading.value.data = false;
+	if (isSlotSet("default") && !table.value.displayAs)
+		data.value = await $fetch<apiResponse<Item[]>>(
+			`${config.public.apiBase}${database.value.slug}/${table.value?.slug as string}`,
+			{
+				credentials: "include",
+				query: { [`${database.value.slug}_sid`]: sessionID.value },
+			},
+		);
+	else
+		await refreshNuxtData(
+			`${database.value.slug}/${table.value?.slug as string}`,
+		);
+	if (table.value.config?.log)
+		await refreshNuxtData(
+			`${database.value.slug}/${table.value?.slug as string}/logs`,
+		);
+}
+provide("deleteItem", deleteItem);
+
+const translateDrawerShow = ref(false);
+const translateDrawerItem = ref<Item | null>(null);
+
+function openTranslateDrawer(row: Item) {
+	translateDrawerItem.value = row;
+	translateDrawerShow.value = true;
+}
+
+function renderItemButtons(row: Item) {
+	const viewHref = `${route.params.database ? `/${route.params.database}` : ""}/admin/tables/${table.value?.slug}/${row.id}`;
+
+	return h(NButtonGroup, { vertical: isMobile }, () =>
+		[
+			slots.itemExtraButtons ? slots.itemExtraButtons(row) : undefined,
+			database.value?.secondaryLanguages?.length &&
+			table.value?.slug !== "translations"
+				? h(
+						NTooltip,
+						{ delay: 1500 },
+						{
+							trigger: () =>
+								h(
+									NButton,
+									{
+										class: "translateItemButton",
+										secondary: true,
+										circle: true,
+										type: "warning",
+										onClick: () => openTranslateDrawer(row),
+									},
+									{
+										icon: () =>
+											h(NIcon, () => h(Icon, { name: "tabler:language" })),
+									},
+								),
+							default: () => t("translateItem"),
+						},
+					)
+				: null,
+			table.value?.allowedMethods?.includes("r")
+				? h(
+						NButton,
+						{
+							class: "viewItemButton",
+							tag: "a",
+							href: viewHref,
+							onClick: async (e: MouseEvent) => {
+								// Keep native anchor behaviors for modified/middle clicks.
+								if (
+									e.button !== 0 ||
+									e.metaKey ||
+									e.ctrlKey ||
+									e.shiftKey ||
+									e.altKey
+								)
+									return;
+
+								e.preventDefault();
+
+								// If a page component exists for this table's item route, bail out and let
+								try {
+									// Use project-root relative path so glob works in dev and production builds
+									const pages = Object.keys(
+										import.meta.glob("/pages/admin/tables/**/[id]/index.vue"),
+									);
+									const slug = table.value?.slug;
+									if (
+										slug &&
+										pages.some((p) =>
+											p.includes(`/tables/${slug}/[id]/index.vue`),
+										)
+									)
+										return navigateTo(
+											`${route.params.database ? `/${route.params.database}` : ""}/admin/tables/${table.value?.slug}/${row.id}`,
+										);
+								} catch (e) {
+									// ignore and continue with drawer behavior
+								}
+								openDrawer(table.value?.slug as string, row.id, {}, "view");
+							},
+							secondary: true,
+							circle: true,
+							type: "primary",
+						},
+						{
+							icon: () => h(NIcon, () => h(Icon, { name: "tabler:eye" })),
+						},
+					)
+				: null,
+			table.value?.allowedMethods?.includes("u")
+				? h(
+						NButton,
+						{
+							class: "editItemButton",
+							tag: "a",
+							href: `${route.params.database ? `/${route.params.database}` : ""}/admin/tables/${table.value?.slug}/${row.id}/edit`,
+							onClick: (e) => {
+								e.preventDefault();
+								if (!isMobile)
+									openDrawer(table.value?.slug as string, row.id, toRaw(row));
+								else
+									navigateTo(
+										`${route.params.database ? `/${route.params.database}` : ""}/admin/tables/${table.value?.slug}/${row.id}/edit`,
+									);
+							},
+							secondary: true,
+							circle: true,
+							type: "info",
+						},
+						{ icon: () => h(NIcon, () => h(Icon, { name: "tabler:pencil" })) },
+					)
+				: null,
+			table.value?.allowedMethods?.includes("d")
+				? h(
+						NPopconfirm,
+						{
+							onPositiveClick: () => deleteItem(row.id),
+						},
+						{
+							trigger: () =>
+								h(
+									NButton,
+									{
+										class: "deleteItemButton",
+										strong: true,
+										secondary: true,
+										circle: true,
+										type: "error",
+									},
+									{
+										icon: () =>
+											h(NIcon, () => h(Icon, { name: "tabler:trash" })),
+									},
+								),
+							default: () => t("theFollowingActionIsIrreversible"),
+						},
+					)
+				: null,
+		].filter((i) => i !== null),
+	);
+}
+provide("renderItemButtons", renderItemButtons);
+
+defineExpose<TableRef>({
+	search: searchArray as searchType,
+	columns: columns as any,
+	delete: deleteItem,
+	data: data as any,
+});
+
+const slots = defineSlots<{
+	default(props: { data?: apiResponse<Item[]> }): any;
+	form(props: {
+		onAfterCreate: () => Promise<void>;
+		onAfterUpdate: () => Promise<void>;
+	}): any;
+	navbarActions(): any;
+	navbarExtraButtons(): any;
+	navbarExtraActions(): any;
+	itemActions(props: Item): any;
+	itemExtraActions(props: Item): any;
+	itemExtraButtons(props: Item): any;
+	item(props: Item): any;
+}>();
+
+const isSlotSet = (slotName: keyof typeof slots) => !!slots[slotName];
+
+provide("isSlotSet", isSlotSet);
+
+if (isSlotSet("default") && !table.value.displayAs)
+	data.value = await $fetch<apiResponse<Item[]>>(
+		`${config.public.apiBase}${database.value.slug}/${table.value?.slug as string}`,
+		{
+			credentials: "include",
+			query: { [`${database.value.slug}_sid`]: sessionID.value },
+		},
+	);
+
+const notificationRef = ref<NotificationReactive>();
+const currentJob = computed(() => table.value?.currentJob);
+let jobTimer: ReturnType<typeof setTimeout> | undefined;
+
+function clearJobTimer() {
+	if (jobTimer) clearTimeout(jobTimer);
+	jobTimer = undefined;
+}
+
+async function refreshTableAfterImport() {
+	if (isSlotSet("default") && !table.value.displayAs)
+		data.value = await $fetch<apiResponse<Item[]>>(
+			`${config.public.apiBase}${database.value.slug}/${table.value.slug}`,
+			{
+				credentials: "include",
+				query: { [`${database.value.slug}_sid`]: sessionID.value },
+			},
+		);
+	else await refreshNuxtData(`${database.value.slug}/${table.value.slug}`);
+}
+
+function uploadImportFile(file: File) {
+	return new Promise<apiResponse<TableImportStatus>>((resolve, reject) => {
+		const url = new URL(
+			`${config.public.apiBase}inicontent/databases/${database.value.slug}/${table.value.slug}/import`,
+			window.location.origin,
+		);
+		if (sessionID.value)
+			url.searchParams.set(`${database.value.slug}_sid`, sessionID.value);
+		if (Language.value) url.searchParams.set("locale", Language.value);
+
+		const request = new XMLHttpRequest();
+		request.open("POST", url.toString());
+		request.withCredentials = true;
+		request.responseType = "json";
+		request.setRequestHeader(
+			"Content-Type",
+			file.type || "application/octet-stream",
+		);
+		request.setRequestHeader(
+			"x-import-file-name",
+			encodeURIComponent(file.name),
+		);
+		request.upload.onprogress = (event) => {
+			if (event.lengthComputable)
+				importUploadProgress.value = Math.round(
+					(event.loaded / event.total) * 100,
+				);
+		};
+		request.onload = () => {
+			const response =
+				request.response as apiResponse<TableImportStatus> | null;
+			if (request.status >= 200 && request.status < 300 && response)
+				resolve(response);
+			else reject(new Error(response?.message || t("uploadFailed")));
+		};
+		request.onerror = () => reject(new Error(t("uploadFailed")));
+		request.onabort = () => reject(new Error(t("uploadFailed")));
+		request.send(file);
+	});
+}
+
+async function handleImportFileSelected(event: Event) {
+	const input = event.target as HTMLInputElement;
+	const file = input.files?.[0];
+	if (!file) return;
+
+	const extension = file.name.split(".").pop()?.toLowerCase();
+	if (!extension || !["csv", "json"].includes(extension)) {
+		window.$message.error(t("isInvalidFormat"));
+		input.value = "";
+		return;
+	}
+
+	Loading.value.import = true;
+	importUploadProgress.value = 0;
+	notificationRef.value?.destroy();
+	notificationRef.value = window.$notification.info({
+		title: t("uploadingImportFile"),
+		duration: 0,
+		content: () =>
+			h(NProgress, {
+				type: "line",
+				percentage: importUploadProgress.value,
+				indicatorPlacement: "inside",
+				processing: importUploadProgress.value < 100,
+			}),
+	});
+
+	try {
+		const response = await uploadImportFile(file);
+		if (!response.result) throw new Error(response.message);
+		notificationRef.value?.destroy();
+		notificationRef.value = undefined;
+		table.value.currentJob = "import";
+	} catch (error) {
+		notificationRef.value?.destroy();
+		notificationRef.value = undefined;
+		window.$message.error(
+			error instanceof Error ? error.message : t("uploadFailed"),
+		);
+	} finally {
+		Loading.value.import = false;
+		input.value = "";
+	}
+}
+
+async function jobNotification() {
+	clearJobTimer();
+	const job = currentJob.value;
+	if (!job) return;
+
+	if (!notificationRef.value) {
+		// NOTE: don't pass `onClose` here — with naive-ui 2.45 + Vue 3.5,
+		// mergeProps turns it into an array ([userOnClose, handleClose]),
+		// so the notification's close button throws
+		// "TypeError: props.onClose is not a function" when clicked.
+		// Use onAfterLeave instead (it isn't merged the same way).
+		const notification = window.$notification.info({
+			title: t(`an_${job}_job_is_running_in_background`),
+			duration: 0,
+			onAfterLeave: () => {
+				clearJobTimer();
+				// Only clear the ref if it still points at the notification
+				// that actually left (e.g. don't clobber a newer notification).
+				if (notificationRef.value === notification)
+					notificationRef.value = undefined;
+			},
+			meta: () => h(NTime),
+		});
+		notificationRef.value = notification;
+	} else
+		notificationRef.value.title = t(`an_${job}_job_is_running_in_background`);
+
+	const pollJob = async () => {
+		if (!notificationRef.value || currentJob.value !== job) return true;
+
+		try {
+			const result = (
+				await $fetch<apiResponse<number | TableImportStatus>>(
+					`${config.public.apiBase}inicontent/databases/${database.value.slug}/${table.value.slug}/${job}`,
+					{
+						credentials: "include",
+						query: { [`${database.value.slug}_sid`]: sessionID.value },
+					},
+				)
+			).result;
+			const importStatus =
+				typeof result === "object" && result ? result : undefined;
+			const progress =
+				typeof result === "number" ? result : (importStatus?.progress ?? 0);
+
+			if (job === "import" && importStatus?.state === "failed") {
+				clearJobTimer();
+				notificationRef.value?.destroy();
+				notificationRef.value = window.$notification.error({
+					title: t("an_import_job_failed"),
+					content: importStatus.error || t("uploadFailed"),
+					duration: 0,
+				});
+				table.value.currentJob = undefined;
+				return true;
+			}
+
+			if (progress >= 100 || importStatus?.state === "completed") {
+				clearJobTimer();
+				if (notificationRef.value)
+					notificationRef.value.title = t(`an_${job}_job_is_done`);
+
+				if (job === "import") {
+					await refreshTableAfterImport();
+					if (notificationRef.value)
+						notificationRef.value.content = t("importedRows", {
+							count: importStatus?.processedRows ?? 0,
+						});
+					table.value.currentJob = undefined;
+				} else if (notificationRef.value)
+					notificationRef.value.action = () =>
+						h(
+							NButton,
+							{
+								text: true,
+								type: "primary",
+								onClick: () => {
+									window.open(
+										`${config.public.apiBase}inicontent/databases/${database.value.slug}/${table.value.slug}/export/download?${`${database.value.slug}_sid`}=${sessionID.value}`,
+									);
+									notificationRef.value?.destroy();
+									notificationRef.value = undefined;
+									table.value.currentJob = undefined;
+								},
+							},
+							{ default: () => t("download") },
+						);
+				return true;
+			}
+
+			if (notificationRef.value)
+				notificationRef.value.content = () =>
+					h(NProgress, {
+						type: "line",
+						percentage: progress,
+						indicatorPlacement: "inside",
+						processing: true,
+					});
+		} catch (error) {
+			console.error("Failed to poll table job", error);
+		}
+		return false;
+	};
+
+	const schedulePoll = () => {
+		jobTimer = setTimeout(async () => {
+			if (!(await pollJob())) schedulePoll();
+		}, 1000);
+	};
+	if (!(await pollJob())) schedulePoll();
+}
+watch(currentJob, jobNotification);
+onMounted(jobNotification);
+onBeforeUnmount(clearJobTimer);
+
+const tableViewRef = ref();
+
+const toolsDropdownOptions = computed(() => [
+	{
+		icon: () =>
+			h(NIcon, () => h(Icon, { name: "tabler:layout-dashboard-filled" })),
+		label: t("view"),
+		key: "view",
+		children: [
+			{
+				icon: () => h(NIcon, () => h(Icon, { name: "tabler:table" })),
+				label: t("table"),
+				key: "viewTable",
+				children: [
+					{
+						icon: () => "S",
+						label: t("small"),
+						key: "tableSizeS",
+						disabled:
+							!table.value.displayAs &&
+							tablesConfig.value[table.value.slug]?.size === "small",
+					},
+					{
+						icon: () => "M",
+						label: t("medium"),
+						key: "tableSizeM",
+						disabled:
+							!table.value.displayAs &&
+							!tablesConfig.value[table.value.slug]?.size,
+					},
+					{
+						icon: () => "L",
+						label: t("large"),
+						key: "tableSizeL",
+						disabled:
+							!table.value.displayAs &&
+							tablesConfig.value[table.value.slug]?.size === "large",
+					},
+				],
+			},
+			{
+				icon: () =>
+					h(NIcon, () => h(Icon, { name: "tabler:layout-kanban-filled" })),
+				label: t("kanban"),
+				key: "viewKanban",
+				disabled: table.value.displayAs === "kanban",
+				show: !!table.value?.groupBy,
+			},
+		],
+	},
+	{
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:table-import" })),
+		label: t("import"),
+		key: "import",
+		disabled:
+			!table.value?.schema || !!currentJob.value || Loading.value.import,
+		show: user.value?.role === config.public.idOne,
+	},
+	{
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:table-export" })),
+		label: t("export"),
+		key: "export",
+		disabled: !table.value?.schema,
+		show: user.value?.role === config.public.idOne,
+		children: [
+			{
+				icon: () =>
+					h(NIcon, () => h(Icon, { name: "tabler:file-arrow-right" })),
+				label: t("exportCurrentData"),
+				key: "exportCurrentData",
+			},
+			{
+				icon: () => h(NIcon, () => h(Icon, { name: "tabler:table-export" })),
+				disabled: !!currentJob.value,
+				label: t("exportAllData"),
+				key: "exportAllData",
+			},
+		],
+	},
+]);
+
+async function toolsDropdownOnSelect(
+	value:
+		| "import"
+		| "exportCurrentData"
+		| "exportAllData"
+		| "viewTable"
+		| "viewKanban"
+		| "tableSizeS"
+		| "tableSizeM"
+		| "tableSizeL",
+) {
+	switch (value) {
+		case "import": {
+			importFileInputRef.value?.click();
+			break;
+		}
+		case "exportAllData": {
+			await $fetch(
+				`${config.public.apiBase}inicontent/databases/${database.value.slug}/${table.value?.slug}/export`,
+				{
+					method: "POST",
+					credentials: "include",
+					query: { [`${database.value.slug}_sid`]: sessionID.value },
+				},
+			);
+			table.value.currentJob = "export";
+			break;
+		}
+		case "exportCurrentData": {
+			tableViewRef.value.dataTableRef?.downloadCsv({
+				fileName: `${table.value.slug}-${new Date().toISOString().split("T")[0]}`,
+				keepOriginalData: false,
+			});
+			break;
+		}
+		case "tableSizeS":
+		case "tableSizeM":
+		case "tableSizeL":
+		case "viewTable":
+		case "viewKanban": {
+			const clonedTablesConfig = structuredClone(toRaw(tablesConfig.value));
+			const displayAs = value === "viewKanban" ? "kanban" : undefined;
+			if (!clonedTablesConfig[table.value.slug])
+				clonedTablesConfig[table.value.slug] = {};
+			// @ts-expect-error
+			clonedTablesConfig[table.value.slug].view = displayAs;
+
+			if (value.startsWith("tableSize"))
+				// @ts-expect-error
+				clonedTablesConfig[table.value.slug].size = value.endsWith("S")
+					? "small"
+					: value.endsWith("L")
+						? "large"
+						: undefined;
+			else data.value = undefined;
+			table.value.displayAs = displayAs;
+			tablesConfig.value = clonedTablesConfig;
+			break;
+		}
+	}
+}
+
+const createDropdownOptions: DropdownOption[] = [
+	{
+		label: () => t("createFromClipboard"),
+		key: "paste",
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:copy" })),
+	},
+];
+async function createDropdownOnSelect(value: string) {
+	try {
+		const itemFromClipboard = await navigator.clipboard.readText();
+
+		if (!itemFromClipboard) {
+			window.$message.error(t("clipboardEmpty"));
+			return;
+		}
+		if (!isStringified(itemFromClipboard)) {
+			window.$message.error(t("clipboardItemIsNotCorrect"));
+			return;
+		}
+
+		const unstringifiedItem = Inison.unstringify<Item>(itemFromClipboard);
+		if (!unstringifiedItem) {
+			window.$message.error(t("clipboardItemIsNotCorrect"));
+			return;
+		}
+
+		switch (value) {
+			case "paste": {
+				if (!isMobile)
+					openDrawer(table.value.slug, undefined, unstringifiedItem);
+				else
+					await navigateTo(
+						`${route.params.database ? `/${route.params.database}` : ""}/admin/tables/${table.value.slug}/new?data=${itemFromClipboard}`,
+					);
+			}
+		}
+	} catch {
+		window.$message.error(t("clipboardItemIsNotCorrect"));
+	}
+}
+
+useHead({
+	title: `${t(database.value.slug)} | ${t(table.value.slug)}`,
+	link: [
+		{ rel: "icon", href: database.value?.icon?.publicURL ?? "/favicon.ico" },
+	],
+});
+</script>