inicontent 1.0.0

package/app/components/Column/Url.vue

@@ -0,0 +1,9 @@
+<template>
+    <NA :href="value" target="_blank">
+        {{ value }}
+    </NA>
+</template>
+
+<script lang="ts" setup>
+defineProps<{ value?: string }>()
+</script>

package/app/components/Column/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div v-if="value === null || value === undefined || (Array.isArray(value) && value.length === 0)">
+        <ColumnBoolean v-if="detectedFieldType === 'boolean'" />
+        <NText :depth="3" v-else>--</NText>
+    </div>
+    <div v-else>
+        <ColumnRole v-if="detectedFieldType === 'role'" :value />
+        <ColumnId v-else-if="['id', 'ip'].includes(detectedFieldType)" :value />
+        <NScrollbar v-else-if="field.table === 'assets'" x-scrollable>
+            <ColumnAsset :value />
+        </NScrollbar>
+        <ColumnTable v-else-if="detectedFieldType === 'table'" :value :field />
+        <ColumnTags v-else-if="['tags', 'select', 'radio', 'checkbox'].includes(detectedFieldType)" :value :field />
+        <ColumnLocale v-else-if="detectedFieldType === 'locale'" :value />
+        <ColumnColor v-else-if="detectedFieldType === 'color'" :value />
+        <ColumnUrl v-else-if="detectedFieldType === 'url'" :value />
+        <ColumnEmail v-else-if="detectedFieldType === 'email'" :value />
+        <ColumnHtml v-else-if="detectedFieldType === 'html'" :value :field :item-label="itemLabel" />
+        <ColumnPassword v-else-if="detectedFieldType === 'password'" :value />
+        <ColumnBoolean v-else-if="detectedFieldType === 'boolean'" :value />
+        <ColumnDate v-else-if="detectedFieldType === 'date'" :value :field />
+        <ColumnObject v-else-if="detectedFieldType === 'object'" :value :field />
+        <ColumnArray v-else-if="detectedFieldType === 'array'" :value :field />
+        <ColumnText
+            v-else-if="['string', 'text', 'textarea', 'number', 'radio', 'multiple'].includes(detectedFieldType)"
+            :value />
+    </div>
+</template>
+
+<script lang="ts" setup>
+const { field, value, itemLabel } = defineProps<{
+	field: Field;
+	value?: any;
+	itemLabel?: string;
+}>();
+
+let detectedFieldType = (field.subType ?? field.type) as
+	| DB_FieldType
+	| CMS_FieldType;
+if (Array.isArray(detectedFieldType)) detectedFieldType = getField(field).key;
+</script>

package/app/components/Dashboard/Editor.vue

@@ -0,0 +1,221 @@
+<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>

package/app/components/Dashboard/Grid.vue

@@ -0,0 +1,270 @@
+<template>
+	<NGrid :x-gap="12" :y-gap="12" cols="1 500:2 800:4">
+		<NGridItem v-for="dashboard in dashboards" :key="dashboard.id">
+			<NCard hoverable>
+				<template #header>
+					<NuxtLink :to="getDashboardUrl(dashboard.id)">
+						<NFlex align="center">
+							<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 }}</NH4>
+						</NFlex>
+					</NuxtLink>
+				</template>
+				<template #header-extra>
+					<NDropdown
+						:options="getDropdownOptions(dashboard)"
+						:renderLabel="renderDropdownLabel"
+					>
+						<NButton secondary size="small">
+							<template #icon>
+								<NIcon>
+									<Icon name="tabler:dots" />
+								</NIcon>
+							</template>
+						</NButton>
+					</NDropdown>
+				</template>
+				<NText depth="3">
+					{{
+						dashboard.description ||
+						t("widgetCount", { count: dashboard.widgets?.length ?? 0 })
+					}}
+				</NText>
+			</NCard>
+		</NGridItem>
+
+		<NGridItem v-if="user?.role === config.public.idOne">
+			<NPopover trigger="click" v-model:show="showPopover">
+				<template #trigger>
+					<NCard
+						style="cursor: pointer"
+						content-style="padding: 36.5px 0px"
+						hoverable
+						@click="showPopover = !showPopover"
+					>
+						<NFlex justify="center" align="center">
+							<NIcon size="36">
+								<Icon name="tabler:plus" />
+							</NIcon>
+						</NFlex>
+					</NCard>
+				</template>
+				<NInputGroup>
+					<NInput
+						v-model:value="newDashboardName"
+						@keydown.enter.prevent="createDashboard"
+						:placeholder="t('dashboardName')"
+					>
+						<template #suffix>
+							<NIcon>
+								<Icon name="tabler:chart-bar" />
+							</NIcon>
+						</template>
+					</NInput>
+					<NButton @click="createDashboard" :loading="Loading.Dashboard">
+						<template #icon>
+							<NIcon>
+								<Icon name="tabler:chevron-right" />
+							</NIcon>
+						</template>
+					</NButton>
+				</NInputGroup>
+			</NPopover>
+		</NGridItem>
+	</NGrid>
+</template>
+
+<script lang="ts" setup>
+import { type DropdownOption, NIcon } from "naive-ui";
+import { Icon, NuxtLink } from "#components";
+
+const modelValue = defineModel<Database>({ required: true });
+
+const showPopover = ref(false);
+const newDashboardName = ref("");
+
+const config = useRuntimeConfig();
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}));
+const user = useState<User>("user");
+const route = useRoute();
+const database = useState<Database>("database");
+
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug);
+const sessionID = useScopedCookie<string>("sid", database.value?.slug);
+
+const dashboards = ref<Dashboard[]>([]);
+
+const hasDashboardsTable = computed(() =>
+	modelValue.value.tables?.some((t) => t.slug === "dashboards"),
+);
+
+const ensureDashboardsTable = async () => {
+	if (hasDashboardsTable.value) return true;
+	if (user.value?.role !== config.public.idOne) return false;
+	try {
+		const res = await $fetch<apiResponse<Table>>(
+			`${config.public.apiBase}inicontent/databases/${modelValue.value.slug}/dashboards`,
+			{
+				method: "POST",
+				body: {
+					schema: [
+						{ key: "name", type: "string", required: true },
+						{ key: "description", type: "string" },
+						{ key: "icon", type: "string" },
+						{ key: "widgets", type: "json" },
+					],
+					show: false,
+					onRequest: [
+						[
+							["@user.4", "!=", 1],
+							["@method", "!=", "GET"],
+							["error", "accessDenied"],
+						],
+					],
+				},
+				params: {
+					locale: Language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+			},
+		);
+		if (res.result) {
+			modelValue.value.tables?.push(res.result);
+			return true;
+		}
+	} catch {}
+	return false;
+};
+
+const fetchDashboards = async () => {
+	if (!hasDashboardsTable.value) {
+		const created = await ensureDashboardsTable();
+		if (!created) return;
+	}
+	try {
+		const res = await $fetch<apiResponse<Dashboard[]>>(
+			`${config.public.apiBase}${modelValue.value.slug}/dashboards`,
+			{
+				params: {
+					locale: Language.value,
+					[`${modelValue.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+			},
+		);
+		dashboards.value = res.result ?? [];
+	} catch {
+		dashboards.value = [];
+	}
+};
+
+onMounted(fetchDashboards);
+
+function getDashboardUrl(id?: string | number) {
+	return `/${route.params.database || (database.value?.slug === "inicontent" && route.path === "/admin") ? `${modelValue.value.slug}/` : ""}admin/dashboards/${id}`
+}
+
+const createDashboard = async () => {
+	if (!newDashboardName.value) {
+		window.$message.error(t("inputsAreInvalid"));
+		return;
+	}
+	Loading.value.Dashboard = true;
+	try {
+		const res = await $fetch<apiResponse<Dashboard>>(
+			`${config.public.apiBase}${modelValue.value.slug}/dashboards`,
+			{
+				method: "POST",
+				body: {
+					name: newDashboardName.value,
+					widgets: [],
+				},
+				params: {
+					locale: Language.value,
+					[`${modelValue.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+			},
+		);
+		if (res.result) {
+			dashboards.value.push(res.result);
+			window.$message.success(res.message);
+			newDashboardName.value = "";
+			showPopover.value = false;
+		} else {
+			window.$message.error(res.message ?? t("error"));
+		}
+	} catch {
+		window.$message.error(t("error"));
+	}
+	Loading.value.Dashboard = false;
+};
+
+const deleteDashboard = async (id: string | number) => {
+	try {
+		const res = await $fetch<apiResponse<any>>(
+			`${config.public.apiBase}${modelValue.value.slug}/dashboards/${id}`,
+			{
+				method: "DELETE",
+				params: {
+					locale: Language.value,
+					[`${modelValue.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+			},
+		);
+		if (res.result) {
+			dashboards.value = dashboards.value.filter((d) => d.id !== id);
+			window.$message.success(res.message);
+		} else {
+			window.$message.error(res.message ?? t("error"));
+		}
+	} catch {
+		window.$message.error(t("error"));
+	}
+};
+
+const getDropdownOptions = (dashboard: Dashboard) => {
+	const url = getDashboardUrl(dashboard.id);
+	return [
+		{
+			key: url,
+			label: t("view"),
+			icon: () => h(NIcon, () => h(Icon, { name: "tabler:eye" })),
+		},
+		{
+			key: `${url}/edit`,
+			label: t("edit"),
+			icon: () => h(NIcon, () => h(Icon, { name: "tabler:edit" })),
+			show: user.value?.role === config.public.idOne,
+		},
+		{
+			key: `delete-${dashboard.id}`,
+			label: t("delete"),
+			icon: () => h(NIcon, () => h(Icon, { name: "tabler:trash" })),
+			show: user.value?.role === config.public.idOne,
+		},
+	];
+};
+
+function renderDropdownLabel(option: DropdownOption) {
+	const key = String(option.key);
+	if (key.startsWith("delete-")) {
+		const id = key.replace("delete-", "");
+		return h(
+			"span",
+			{
+				style: "color: var(--error-color); cursor: pointer;",
+				onClick: () => deleteDashboard(id),
+			},
+			() => option.label,
+		);
+	}
+	return h(NuxtLink, { to: key }, () => option.label);
+}
+</script>

package/app/components/Dashboard/View.vue

@@ -0,0 +1,131 @@
+<template>
+	<NGrid v-if="dashboard.widgets?.length" :x-gap="12" :y-gap="12" :cols="24" responsive="screen">
+		<NGridItem
+			v-for="widget in dashboard.widgets"
+			:key="widget.id + dateRangeKey"
+			:span="getSpan(widget)"
+		>
+			<NCard
+				:title="widget.title"
+				size="small"
+				:style="widget.color ? `border-left: 3px solid ${widget.color}` : ''"
+			>
+				<template #header-extra>
+					<NTag size="small" :bordered="false" type="info">
+						{{ t(widget.type) }}
+					</NTag>
+				</template>
+				<DashboardWidgetCounter
+					v-if="widget.type === 'counter'"
+					:widget="widget"
+					:database-slug="databaseSlug"
+					:date-range-override="dateRangeOverride"
+				/>
+				<DashboardWidgetLineChart
+					v-else-if="widget.type === 'line'"
+					:widget="widget"
+					:database-slug="databaseSlug"
+					:date-range-override="dateRangeOverride"
+				/>
+				<DashboardWidgetBarChart
+					v-else-if="widget.type === 'bar'"
+					:widget="widget"
+					:database-slug="databaseSlug"
+					:date-range-override="dateRangeOverride"
+				/>
+				<DashboardWidgetPieChart
+					v-else-if="widget.type === 'pie'"
+					:widget="widget"
+					:database-slug="databaseSlug"
+					:date-range-override="dateRangeOverride"
+				/>
+				<DashboardWidgetTable
+					v-else-if="widget.type === 'table'"
+					:widget="widget"
+					:database-slug="databaseSlug"
+					:date-range-override="dateRangeOverride"
+				/>
+			</NCard>
+		</NGridItem>
+	</NGrid>
+	<NEmpty v-if="!(dashboard.widgets?.length)" :description="t('noWidgets')" />
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+	dashboard: Dashboard;
+	databaseSlug: string;
+	dateRangeOverride?: WidgetDateRange;
+}>();
+
+const dateRangeKey = computed(() => props.dateRangeOverride ?? "default");
+
+const windowWidth = ref(0);
+
+const smallWidgetsCount = computed(
+	() =>
+		(props.dashboard.widgets ?? []).filter(
+			(widget) => widget.size === "small" || !widget.size,
+		).length,
+);
+
+const desktopSmallWidgetsPerLine = computed(() => {
+	if (windowWidth.value < 1024) {
+		return 2;
+	}
+
+	let maxPerLine = 3;
+
+	if (windowWidth.value >= 2160) {
+		maxPerLine = 8;
+	} else if (windowWidth.value >= 1920) {
+		maxPerLine = 7;
+	} else if (windowWidth.value >= 1600) {
+		maxPerLine = 6;
+	} else if (windowWidth.value >= 1366) {
+		maxPerLine = 5;
+	} else if (windowWidth.value >= 1200) {
+		maxPerLine = 4;
+	}
+
+	if (smallWidgetsCount.value === 0) {
+		return 3;
+	}
+
+	if (smallWidgetsCount.value < 3) {
+		return smallWidgetsCount.value;
+	}
+
+	return Math.min(maxPerLine, smallWidgetsCount.value);
+});
+
+const smallWidgetSpan = computed(() =>
+	Math.max(3, Math.floor(24 / Math.max(1, desktopSmallWidgetsPerLine.value))),
+);
+
+function updateWindowWidth() {
+	windowWidth.value = window.innerWidth;
+}
+
+onMounted(() => {
+	updateWindowWidth();
+	window.addEventListener("resize", updateWindowWidth);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener("resize", updateWindowWidth);
+});
+
+function getSpan(widget: Widget): number {
+	// Tables always get the full row so columns can breathe.
+	if (widget.type === "table") return 24;
+	switch (widget.size) {
+		case "large":
+			return 24;
+		case "medium":
+			return 12;
+		default:
+			return smallWidgetSpan.value;
+	}
+}
+</script>