inicontent 1.0.2 → 1.0.3

package/app/components/Form/Drawer.vue

@@ -98,7 +98,10 @@ defineSlots<{
 }>();
 
 const Drawers = useState<DrawerRef>("drawers", () => []);
-const defaultWidth = useCookie<number | string>("width");
+const defaultWidth = useCookie<number | string>("drawerWidth", {
+	sameSite: true,
+	default: () => 560,
+});
 const formRefs = ref<FormRef[]>([]);
 
 const screenHalf = window.screen.width / 2;

package/app/components/Header.vue

@@ -200,7 +200,7 @@ const userDropdownOptions = computed(() => [
 		show: user.value?.role === config.public.idOne,
 	},
 	{
-		label: () => h(NFlex,{ justify: "start", align: "center", flexDirection: Language.value === "ar" ? 'row-reverse' : 'row' }, () => [
+		label: () => h(NFlex,{ justify: Language.value === "ar" ? "end" : "start", align: "center", style: { flexDirection: Language.value === "ar" ? 'row-reverse' : 'row' } }, () => [
 			t("billing"),
 			h(NIcon, { color: ThemeConfig.value.primaryColor}, () => h(Icon, { name: "tabler:external-link" }))
 		]),

package/app/components/Table/TranslateDrawer.vue

@@ -95,7 +95,7 @@ const Language = useScopedCookie<LanguagesType>("language", database.value?.slug
 const sessionID = useScopedCookie<string>("sid", database.value?.slug);
 const table = useState<Table>("table");
 
-const drawerWidth = useCookie<number | string>("translateDrawerWidth", {
+const drawerWidth = useCookie<number | string>("drawerWidth", {
 	sameSite: true,
 	default: () => 560,
 });

package/app/composables/databaseCookies.ts

@@ -1,12 +1,3 @@
-const syncedCookieKeys = ["language", "theme", "sid", "redirectTo"] as const;
-// Only theme is shared globally across all databases. language, sid and
-// redirectTo are scoped per database so each database keeps its own value.
-const globalOnlyKeys = new Set(["theme"]);
-
-function isSet(value: string | null | undefined) {
-	return value !== null && value !== undefined && value !== "";
-}
-
 function resolveDatabaseSlug(databaseSlug?: string) {
 	if (databaseSlug) return databaseSlug;
 
@@ -31,49 +22,4 @@ export function useScopedCookie<T>(key: string, databaseSlug?: string) {
 		`${resolveDatabaseSlug(databaseSlug)}_${key}`,
 		{ sameSite: true },
 	);
-}
-
-export function syncCookiesFromDatabase(databaseSlug?: string) {
-	for (const key of syncedCookieKeys) {
-		const globalCookie = useCookie<string | null>(key, { sameSite: true });
-		const scopedCookie = useCookie<string | null>(
-			`${resolveDatabaseSlug(databaseSlug)}_${key}`,
-			{
-				sameSite: true,
-			},
-		);
-
-		if (isSet(scopedCookie.value)) {
-			// Always keep global in sync so components reading useCookie(key) work.
-			if (!globalOnlyKeys.has(key)) {
-				globalCookie.value = null;
-			} else {
-				globalCookie.value = scopedCookie.value;
-			}
-		} else if (isSet(globalCookie.value)) {
-			scopedCookie.value = globalCookie.value;
-		}
-	}
-}
-
-export function syncCookiesToDatabase(databaseSlug?: string) {
-	for (const key of syncedCookieKeys) {
-		const globalCookie = useCookie<string | null>(key, { sameSite: true });
-		const scopedCookie = useCookie<string | null>(
-			`${resolveDatabaseSlug(databaseSlug)}_${key}`,
-			{
-				sameSite: true,
-			},
-		);
-
-		if (isSet(globalCookie.value)) {
-			scopedCookie.value = globalCookie.value;
-			// For sid, wipe the global so the token is only in the scoped cookie.
-			if (!globalOnlyKeys.has(key)) {
-				globalCookie.value = null;
-			}
-		} else if (isSet(scopedCookie.value) && globalOnlyKeys.has(key)) {
-			globalCookie.value = scopedCookie.value;
-		}
-	}
-}
+}

package/app/composables/openDrawer.ts

@@ -68,14 +68,15 @@ export default function (
 	mode: "view" | "edit" = "edit",
 ) {
 	const Drawers = useState<DrawerRef>("drawers", () => []);
-	const defaultWidth = useCookie<number | string>("width", {
+	const defaultWidth = useCookie<number | string>("drawerWidth", {
 		sameSite: true,
+		default: () => 560,
 	});
 	const index = Drawers.value.findIndex(
 		(d) => d.table === table && d.id === id,
 	);
 
-	let width = defaultWidth.value ?? 251;
+	let width = defaultWidth.value ?? 560;
 	if (index === -1) {
 		if (Drawers.value.length) {
 			for (let index = 0; index < Drawers.value.length; index++) {

package/app/composables/useDashboardData.ts

@@ -306,5 +306,36 @@ export function useDashboardData(
 		watch(dateRangeOverride, () => refresh());
 	}
 
+	// Re-fetch when the widget's own criteria change (source table, type,
+	// operation, field, filters, sort, …) so inline edits preview live
+	// before the dashboard is saved. A short debounce absorbs rapid
+	// changes while typing in the widget editor.
+	const widgetSignature = computed(() =>
+		JSON.stringify({
+			type: widget.type,
+			table: widget.table,
+			operation: widget.operation,
+			field: widget.field,
+			groupBy: widget.groupBy,
+			dateField: widget.dateField,
+			dateRange: widget.dateRange,
+			searchArray: widget.searchArray,
+			sortField: widget.sortField,
+			sortOrder: widget.sortOrder,
+			columns: widget.columns,
+			limit: widget.limit,
+		}),
+	);
+
+	let refreshTimer: ReturnType<typeof setTimeout> | null = null;
+	watch(widgetSignature, () => {
+		if (refreshTimer) clearTimeout(refreshTimer);
+		refreshTimer = setTimeout(() => refresh(), 250);
+	});
+
+	onBeforeUnmount(() => {
+		if (refreshTimer) clearTimeout(refreshTimer);
+	});
+
 	return { value, data, total, groups, timeSeries, loading, refresh };
 }

package/app/middleware/database.ts

@@ -70,7 +70,6 @@ export default defineNuxtRouteMiddleware(async (to) => {
 	}
 
 	formatDatabase();
-	syncCookiesFromDatabase(database.value.slug);
 
 	useState<ThemeConfig>("ThemeConfig", () => ({
 		primaryColor: "#FF9800",

package/app/pages/[[database]]/admin/dashboards/[id]/index.vue

@@ -1,6 +1,53 @@
 <template>
 	<NSpin :show="loading">
-		<NCard :title="dashboard?.name ?? t('dashboard')" style="background:none" :bordered="false">
+		<NCard style="background: none" :bordered="false">
+			<template #header>
+				<NFlex align="center" :size="8">
+					<template v-if="editMode && draft">
+						<NPopover trigger="click" placement="bottom-start">
+							<template #trigger>
+								<NButton circle quaternary size="small">
+									<NIcon size="20">
+										<Icon
+											:name="
+												draft.icon
+													? `tabler:${draft.icon}`
+													: 'tabler:chart-bar'
+											"
+										/>
+									</NIcon>
+								</NButton>
+							</template>
+							<div style="width: 280px">
+								<LazyFieldIcon
+									v-model="draft.icon"
+									:field="{ key: 'icon', type: 'string', subType: 'icon' }"
+								/>
+							</div>
+						</NPopover>
+						<NInput
+							v-model:value="draft.name"
+							size="small"
+							:placeholder="t('dashboardName')"
+							style="max-width: 360px"
+						/>
+					</template>
+					<template v-else>
+						<NIconWrapper :border-radius="50" style="font-style: normal">
+							<NIcon size="20">
+								<Icon
+									:name="
+										dashboard?.icon
+											? `tabler:${dashboard.icon}`
+											: 'tabler:chart-bar'
+									"
+								/>
+							</NIcon>
+						</NIconWrapper>
+						<NH4 style="margin: 0">{{ dashboard?.name ?? t("dashboard") }}</NH4>
+					</template>
+				</NFlex>
+			</template>
 			<template #header-extra>
 				<NFlex :size="8" align="center">
 					<NPopover v-if="dashboard?.widgets?.length" trigger="click" placement="bottom-end">
@@ -22,12 +69,28 @@
 							style="width: 200px"
 						/>
 					</NPopover>
+					<template v-if="editMode && draft">
+						<NButton size="small" secondary @click="addWidget">
+							<template #icon>
+								<NIcon>
+									<Icon name="tabler:plus" />
+								</NIcon>
+							</template>
+							{{ t("addWidget") }}
+						</NButton>
+						<NButton size="small" secondary @click="cancelEdit">
+							{{ t("cancel") }}
+						</NButton>
+						<NButton size="small" type="primary" secondary :loading="saving" @click="save">
+							{{ t("save") }}
+						</NButton>
+					</template>
 					<NButton
-						v-if="user?.role === config.public.idOne"
+						v-else-if="user?.role === config.public.idOne"
 						size="small"
 						type="primary"
 						secondary
-						@click="navigateTo(`${routeBase}/admin/dashboards/${route.params.id}/edit`)"
+						@click="enterEditMode"
 					>
 						<template #icon>
 							<NIcon>
@@ -40,15 +103,20 @@
 			</template>
 			<LazyDashboardView
 				v-if="dashboard"
-				:dashboard="dashboard"
+				ref="viewRef"
+				:dashboard="editMode && draft ? draft : dashboard"
 				:database-slug="databaseSlug"
 				:date-range-override="dateRangeOverride"
+				:edit-mode="editMode && !!draft"
+				v-model:widgets="widgetsModel"
 			/>
 		</NCard>
 	</NSpin>
 </template>
 
 <script setup lang="ts">
+import type { DashboardView } from "#components";
+
 definePageMeta({
 	layout: "table",
 	middleware: ["database", "user", "dashboard", "global"],
@@ -59,22 +127,35 @@ const config = useRuntimeConfig();
 const user = useState<User>("user");
 const database = useState<Database>("database");
 
-const databaseSlug = computed(() =>
-	(route.params.database as string) || database.value?.slug || "",
+const databaseSlug = computed(
+	() => (route.params.database as string) || database.value?.slug || "",
 );
 
-const routeBase = computed(() =>
-	route.params.database ? `/${route.params.database}` : "",
+const Language = useScopedCookie<LanguagesType>(
+	"language",
+	database.value?.slug,
 );
-
-const Language = useScopedCookie<LanguagesType>("language", database.value?.slug);
 const sessionID = useScopedCookie<string>("sid", database.value?.slug);
 
 const dashboard = ref<Dashboard | null>(null);
-const currentDashboard = useState<Dashboard | null>("currentDashboard", () => null);
+const currentDashboard = useState<Dashboard | null>(
+	"currentDashboard",
+	() => null,
+);
 const loading = ref(true);
 const dateRangeOverride = ref<WidgetDateRange | undefined>(undefined);
 
+const editMode = ref(false);
+const draft = ref<Dashboard | null>(null);
+const saving = ref(false);
+
+const widgetsModel = computed({
+	get: () => draft.value?.widgets ?? [],
+	set: (v) => {
+		if (draft.value) draft.value.widgets = v;
+	},
+});
+
 const dateRangeOptions = [
 	{ label: t("last7Days"), value: "7d" },
 	{ label: t("last30Days"), value: "30d" },
@@ -83,6 +164,76 @@ const dateRangeOptions = [
 	{ label: t("allTime"), value: "all" },
 ];
 
+const canEdit = computed(() => user.value?.role === config.public.idOne);
+
+const viewRef = ref<InstanceType<typeof DashboardView> | null>(null);
+
+function addWidget() {
+	viewRef.value?.addWidget();
+}
+
+const parseWidgets = (d: Dashboard) => {
+	if (typeof d.widgets === "string") {
+		try {
+			d.widgets = JSON.parse(d.widgets);
+		} catch {}
+	}
+};
+
+function enterEditMode() {
+	if (!dashboard.value || editingNow.value) return;
+	draft.value = deepClone(dashboard.value) ?? null;
+	if (draft.value && !draft.value.widgets) draft.value.widgets = [];
+	editMode.value = true;
+}
+
+function cancelEdit() {
+	editMode.value = false;
+	draft.value = null;
+}
+
+const editingNow = computed(() => editMode.value && !!draft.value);
+
+async function save() {
+	if (!draft.value?.name) {
+		window.$message.error(t("inputsAreInvalid"));
+		return;
+	}
+	saving.value = true;
+	try {
+		const slug = databaseSlug.value ? `${databaseSlug.value}/` : "";
+		const res = await $fetch<apiResponse<Dashboard>>(
+			`${config.public.apiBase}${slug}dashboards/${route.params.id}`,
+			{
+				method: "PUT",
+				body: {
+					name: draft.value.name,
+					description: draft.value.description,
+					icon: draft.value.icon,
+					widgets: draft.value.widgets,
+				},
+				params: {
+					locale: Language.value,
+					[`${databaseSlug.value}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+			},
+		);
+		if (res.result) {
+			dashboard.value = res.result;
+			currentDashboard.value = res.result;
+			parseWidgets(dashboard.value);
+			window.$message.success(res.message);
+			cancelEdit();
+		} else {
+			window.$message.error(res.message ?? t("error"));
+		}
+	} catch {
+		window.$message.error(t("error"));
+	}
+	saving.value = false;
+}
+
 onMounted(async () => {
 	try {
 		const slug = databaseSlug.value ? `${databaseSlug.value}/` : "";
@@ -99,11 +250,8 @@ onMounted(async () => {
 		dashboard.value = res.result;
 		currentDashboard.value = res.result;
 		if (dashboard.value) {
-			if (typeof dashboard.value.widgets === "string") {
-				try {
-					dashboard.value.widgets = JSON.parse(dashboard.value.widgets);
-				} catch {}
-			}
+			parseWidgets(dashboard.value);
+			if (route.query.edit === "true" && canEdit.value) enterEditMode();
 		}
 	} catch {
 		window.$message.error(t("error"));
@@ -112,6 +260,8 @@ onMounted(async () => {
 });
 
 useHead({
-	title: computed(() => `${dashboard.value?.name ?? t("dashboard")} | ${t("dashboards")}`),
+	title: computed(
+		() => `${dashboard.value?.name ?? t("dashboard")} | ${t("dashboards")}`,
+	),
 });
-</script>
+</script>

package/app/pages/[[database]]/admin/tables/[table]/[id]/index.vue

@@ -1,6 +1,6 @@
 <template>
     <NFlex vertical>
-        <LazyFormDrawer v-if="!$device.isMobile" />
+        <LazyFormDrawer/>
         <NCard style="height: fit-content">
             <template #header>
                 <NPerformantEllipsis>{{ t(table.slug) }}: {{ itemLabel }}</NPerformantEllipsis>

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "inicontent",
-  "version": "1.0.2",
+  "version": "1.0.3",
+  "license": "Apache-2.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "dependencies": {

package/app/components/Dashboard/Editor.vue

@@ -1,221 +0,0 @@
-<template>
-	<NFlex vertical :size="24">
-		<NCard :title="t('dashboardSettings')">
-			<NForm label-placement="left" label-width="120">
-				<NFormItem :label="t('name')">
-					<NInput v-model:value="model.name" :placeholder="t('dashboardName')" />
-				</NFormItem>
-				<NFormItem :label="t('description')">
-					<NInput
-						v-model:value="model.description"
-						type="textarea"
-						:placeholder="t('description')"
-						:rows="2"
-					/>
-				</NFormItem>
-				<LazyFieldIcon v-model="model.icon" :field="{ key: 'icon', type: 'string', subType: 'icon' }" />
-			</NForm>
-		</NCard>
-
-		<NCard :title="t('widgets')">
-			<template #header-extra>
-				<NButton size="small" @click="addWidget" type="primary" secondary>
-					<template #icon>
-						<NIcon>
-							<Icon name="tabler:plus" />
-						</NIcon>
-					</template>
-					{{ t("addWidget") }}
-				</NButton>
-			</template>
-
-			<VueDraggable
-				:model-value="model.widgets as any[]"
-				item-key="id"
-				handle=".drag-handle"
-				:animation="200"
-			>
-				<template v-for="(widget,index) in model.widgets">
-					<NCard
-						size="small"
-						:style="{ marginBottom: '12px' }"
-						:title="widget.title || t('untitledWidget')"
-					>
-						<template #header-extra>
-							<NFlex :size="4">
-								<span
-									class="drag-handle"
-									style="cursor: grab; display: inline-flex; align-items: center; padding: 4px"
-								>
-									<NIcon :size="16">
-										<Icon name="tabler:grip-vertical" />
-									</NIcon>
-								</span>
-								<NButton
-									size="tiny"
-									quaternary
-									@click="editingWidgetIndex = index"
-								>
-									<template #icon>
-										<NIcon>
-											<Icon name="tabler:edit" />
-										</NIcon>
-									</template>
-								</NButton>
-								<NButton
-									size="tiny"
-									quaternary
-									type="error"
-									@click="removeWidget(index)"
-								>
-									<template #icon>
-										<NIcon>
-											<Icon name="tabler:trash" />
-										</NIcon>
-									</template>
-								</NButton>
-							</NFlex>
-						</template>
-						<NFlex :size="8">
-							<NTag size="small" :bordered="false" type="info">{{
-								t(widget.type)
-							}}</NTag>
-							<NTag size="small" :bordered="false">{{ widget.table || "—" }}</NTag>
-							<NTag v-if="widget.size" size="small" :bordered="false" type="warning">{{
-								t(widget.size)
-							}}</NTag>
-						</NFlex>
-					</NCard>
-				</template>
-			</VueDraggable>
-
-			<NEmpty v-if="!model.widgets?.length" :description="t('noWidgets')" />
-		</NCard>
-
-		<NFlex justify="end">
-			<NButton @click="$router.back()">{{ t("cancel") }}</NButton>
-			<NButton type="primary" :loading="saving" @click="save">
-				{{ t("save") }}
-			</NButton>
-		</NFlex>
-
-		<NDrawer
-			v-model:show="showWidgetDrawer"
-			:width="420"
-			placement="right"
-		>
-			<NDrawerContent :title="t('editWidget')" closable>
-				<DashboardWidgetEditor
-					v-if="editingWidget"
-					v-model="editingWidget"
-				/>
-				<template #footer>
-					<NButton type="primary" @click="showWidgetDrawer = false">
-						{{ t("confirm") }}
-					</NButton>
-				</template>
-			</NDrawerContent>
-		</NDrawer>
-	</NFlex>
-</template>
-
-<script lang="ts" setup>
-import { VueDraggable } from "vue-draggable-plus";
-
-const props = defineProps<{
-	dashboard: Dashboard;
-}>();
-
-const emit = defineEmits<{
-	saved: [dashboard: Dashboard];
-}>();
-
-const database = useState<Database>("database");
-const config = useRuntimeConfig();
-const Language = useScopedCookie<LanguagesType>("language", database.value?.slug);
-const sessionID = useScopedCookie<string>("sid", database.value?.slug);
-
-const model = ref<Dashboard>({ ...props.dashboard, widgets: [...(props.dashboard.widgets ?? [])] });
-const saving = ref(false);
-const editingWidgetIndex = ref<number | null>(null);
-const showWidgetDrawer = ref(false);
-
-const editingWidget = computed({
-	get: () =>
-		editingWidgetIndex.value !== null
-			? model.value.widgets?.[editingWidgetIndex.value] ?? null
-			: null,
-	set: (v) => {
-		if (editingWidgetIndex.value !== null && v && model.value.widgets) {
-			model.value.widgets[editingWidgetIndex.value] = v;
-		}
-	},
-});
-
-watch(editingWidgetIndex, (v) => {
-	showWidgetDrawer.value = v !== null;
-});
-
-watch(showWidgetDrawer, (v) => {
-	if (!v) editingWidgetIndex.value = null;
-});
-
-function addWidget() {
-	if (!model.value.widgets) model.value.widgets = [];
-	const newWidget: Widget = {
-		id: `w_${Date.now()}`,
-		type: "counter",
-		title: "",
-		table: "",
-		operation: "count",
-		size: "small",
-		dateRange: "all",
-		searchArray: { and: [[null, "=", null]] },
-	};
-	model.value.widgets.push(newWidget);
-	editingWidgetIndex.value = model.value.widgets.length - 1;
-}
-
-function removeWidget(index: number) {
-	model.value.widgets?.splice(index, 1);
-}
-
-async function save() {
-	if (!model.value.name) {
-		window.$message.error(t("inputsAreInvalid"));
-		return;
-	}
-	saving.value = true;
-	try {
-		const isUpdate = !!props.dashboard.id;
-		const url = isUpdate
-			? `${config.public.apiBase}${database.value.slug}/dashboards/${props.dashboard.id}`
-			: `${config.public.apiBase}${database.value.slug}/dashboards`;
-
-		const res = await $fetch<apiResponse<Dashboard>>(url, {
-			method: isUpdate ? "PUT" : "POST",
-			body: {
-				name: model.value.name,
-				description: model.value.description,
-				icon: model.value.icon,
-				widgets: model.value.widgets,
-			},
-			params: {
-				locale: Language.value,
-				[`${database.value.slug}_sid`]: sessionID.value,
-			},
-			credentials: "include",
-		});
-
-		if (res.result) {
-			window.$message.success(res.message);
-			emit("saved", res.result);
-		} else {
-			window.$message.error(res.message ?? t("error"));
-		}
-	} catch {
-		window.$message.error(t("error"));
-	}
-	saving.value = false;
-}
-</script>