inicontent 1.0.0

package/app/components/Table/Grid.vue

@@ -0,0 +1,296 @@
+<template>
+	<NGrid :x-gap="12" :y-gap="12" cols="1 500:2 800:4">
+		<NGridItem v-for="table in filteredTables" :key="table.slug">
+			<NCard hoverable>
+				<template #header>
+					<NuxtLink :to="getTableUrl(table.slug)">
+						<NFlex align="center">
+							<NIconWrapper :border-radius="50" style="font-style: normal">
+								<LazyTableIcon :table="table" />
+							</NIconWrapper>
+							<NH4 style="margin: 0">{{ t(table.slug) }}</NH4>
+						</NFlex>
+					</NuxtLink>
+				</template>
+				<template #header-extra>
+					<NDropdown :options="getDropdownOptions(table)" :renderLabel="renderDropdownLabel">
+						<NButton secondary size="small">
+							<template #icon>
+								<NIcon>
+									<Icon name="tabler:dots" />
+								</NIcon>
+							</template>
+						</NButton>
+					</NDropdown>
+				</template>
+			</NCard>
+		</NGridItem>
+		<NGridItem v-if="user?.role === config.public.idOne">
+			<NCard hoverable>
+				<template #header>
+					<NuxtLink :to="getTableUrl('backups')">
+						<NFlex align="center">
+							<NIconWrapper :border-radius="50" style="font-style: normal">
+								<NIcon>
+									<Icon name="tabler:database-export" />
+								</NIcon>
+							</NIconWrapper>
+							<NH4 style="margin: 0">{{ t("backups") }}</NH4>
+						</NFlex>
+					</NuxtLink>
+				</template>
+			</NCard>
+		</NGridItem>
+		<NGridItem v-if="user?.role === config.public.idOne">
+			<NPopover placement="bottom">
+				<template #trigger>
+					<NPopover trigger="click" v-model:show="showPopover">
+						<template #trigger>
+							<NCard style="cursor: pointer" content-style="padding: 15px 0" hoverable
+								@click="showPopover = !showPopover">
+								<NFlex justify="center" align="center">
+									<NIcon size="36">
+										<Icon name="tabler:plus" />
+									</NIcon>
+								</NFlex>
+							</NCard>
+						</template>
+						<NFlex vertical>
+							<NInputGroup>
+								<NInput v-model:value="newTableSlug" @keydown.enter.prevent="createTable"
+									:placeholder="t('tableSlug')">
+									<template #suffix>
+										<NIcon>
+											<Icon name="tabler:letter-case" />
+										</NIcon>
+									</template>
+								</NInput>
+								<NTooltip :delay="600">
+									<template #trigger>
+										<NButton tertiary :type="showQuickSettings ? 'primary' : 'default'"
+											@click="toggleQuickSettings">
+											<template #icon>
+												<NIcon>
+													<Icon v-if="showQuickSettings" name="tabler:settings-off" />
+													<Icon v-else name="tabler:settings" />
+												</NIcon>
+											</template>
+										</NButton>
+									</template>
+									{{ t('quickSettings') }}
+								</NTooltip>
+								<NButton secondary type="primary" @click="createTable" :loading="Loading.Table">
+									<template #icon>
+										<NIcon>
+											<Icon name="tabler:chevron-right" />
+										</NIcon>
+									</template>
+								</NButton>
+							</NInputGroup>
+							<template v-if="showQuickSettings">
+								<NDivider style="margin: 0" />
+								<NCheckbox v-model:checked="quickSettingsPrivate">
+									{{ t('makeItPrivate') }}
+								</NCheckbox>
+								<template v-if="!quickSettingsPrivate">
+									<NFlex :reverse="Language === 'ar'" v-for="role of modelValue.roles" :key="role.id" align="center"
+										justify="space-between" :wrap="false">
+										<NText strong>{{ t(role.name) }} :</NText>
+										<NCheckboxGroup v-model:value="rolePermissions[role.id]" :disabled="role.id === config.public.idOne">
+											<NCheckbox value="c" :label="t('create')" />
+											<NCheckbox value="r" :label="t('read')" />
+											<NCheckbox value="u" :label="t('update')" />
+											<NCheckbox value="d" :label="t('delete')" />
+										</NCheckboxGroup>
+									</NFlex>
+								</template>
+							</template>
+						</NFlex>
+					</NPopover>
+				</template>
+				{{ t('newTable') }}
+			</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 config = useRuntimeConfig()
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}))
+const user = useState<User>("user")
+const newTableSlug = ref()
+const route = useRoute()
+
+const database = useState<Database>("database")
+
+function getTableUrl(slug: string) {
+	return `/${!route.params.database && database.value?.slug !== "inicontent" ? "" : `${modelValue.value.slug}/`}admin/tables/${slug}`
+}
+
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug)
+
+const sessionID = useScopedCookie<string>("sid", database.value?.slug)
+
+type CrudPermission = "c" | "r" | "u" | "d"
+const permissionMethods: Record<CrudPermission, string> = {
+	c: "POST",
+	r: "GET",
+	u: "PUT",
+	d: "DELETE",
+}
+
+const showQuickSettings = ref(false)
+const quickSettingsPrivate = ref(false)
+const rolePermissions = reactive<Record<string, CrudPermission[]>>({})
+
+function toggleQuickSettings() {
+	showQuickSettings.value = !showQuickSettings.value
+	if (showQuickSettings.value){
+		for (const { id } of modelValue.value.roles ?? [])
+			rolePermissions[id] = ["c", "r", "u", "d"]
+	} else resetQuickSettings()
+}
+
+function resetQuickSettings() {
+	showQuickSettings.value = false
+	quickSettingsPrivate.value = false
+	for (const id of Object.keys(rolePermissions)) delete rolePermissions[id]
+}
+
+// "@user.4" is the user role field, role ids come from database.roles
+function generateQuickSettingsFlows(): FlowType[] {
+	if (quickSettingsPrivate.value) return [[["error", "accessDenied"]]]
+
+	// if no change made to role permissions, no need to create flows
+	if (Object.values(rolePermissions).filter(permissions => permissions.length === 4).length === modelValue.value.roles?.length)
+		return []
+
+	const flows: FlowType[] = []
+	for (const { id } of modelValue.value.roles ?? []) {
+		// skip flows for admin
+		if (id === config.public.idOne) continue;
+
+		const allowedPermissions = rolePermissions[id]
+		if (!allowedPermissions || allowedPermissions.length === 4) continue
+		const deniedMethods = (
+			Object.keys(permissionMethods) as CrudPermission[]
+		)
+			.filter((permission) => !allowedPermissions.includes(permission))
+			.map((permission) => permissionMethods[permission])
+		if (!deniedMethods.length) continue
+		const flow: FlowType = [["@user.4", "=", id]]
+		if (deniedMethods.length < Object.keys(permissionMethods).length)
+			flow.push(["@method", "[]", deniedMethods])
+		flow.push(["error", "accessDenied"])
+		flows.push(flow)
+	}
+	return flows
+}
+
+const createTable = async () => {
+	if (newTableSlug.value) {
+		Loading.value.Table = true
+		
+		const bodyContent: string = toRaw(newTableSlug.value)
+		const quickSettingsFlows = generateQuickSettingsFlows()
+
+		const data = await $fetch<apiResponse<Table>>(
+			`${config.public.apiBase}inicontent/databases/${modelValue.value.slug}/${bodyContent}`,
+			{
+				method: "POST",
+				body: quickSettingsFlows.length ? { onRequest: quickSettingsFlows } : undefined,
+				params: {
+					locale: Language.value,
+					[`${database.value.slug}_sid`]: sessionID.value,
+				},
+				credentials: "include",
+			},
+		)
+
+		if (data.result) {
+			modelValue.value.tables?.push(data.result)
+			window.$message.success(data.message)
+			newTableSlug.value = null
+			showPopover.value = false
+		} else window.$message.error(data.message ?? t("error"))
+	
+		Loading.value.Table = false
+	} else window.$message.error(t("inputsAreInvalid"))
+}
+
+const filteredTables = computed(() =>
+	modelValue.value.tables
+		?.filter(
+			({ allowedMethods, show, slug }) =>
+				allowedMethods?.includes("r") && show !== false && slug !== "dashboards",
+		)
+		.sort(
+			(a, b) =>
+				Number(
+					["users", "sessions", "translations", "assets"].includes(b.slug),
+				) -
+				Number(
+					["users", "sessions", "translations", "assets"].includes(a.slug),
+				),
+		),
+)
+
+const getDropdownOptions = (table: Table) => {
+	const tableUrl = getTableUrl(table.slug)
+	return [
+		{
+			key: tableUrl,
+			label: t("showAll"),
+			icon: () => h(NIcon, () => h(Icon, { name: "tabler:eye" })),
+		},
+		{
+			key: `${tableUrl}/new`,
+			label: t("newItem"),
+			icon: () => h(NIcon, () => h(Icon, { name: "tabler:plus" })),
+			show: table.slug !== "assets" && table.allowedMethods?.includes("c"),
+		},
+		{
+			key: `${tableUrl}/settings`,
+			label: t("settings"),
+			icon: () => h(NIcon, () => h(Icon, { name: "tabler:settings" })),
+			show:
+				!["sessions", "translations", "assets"].includes(table.slug) &&
+				user.value?.role === config.public.idOne,
+		},
+		{
+			key: `${tableUrl}/flows`,
+			label: t("flows"),
+			icon: () => h(NIcon, () => h(Icon, { name: "tabler:webhook" })),
+			show:
+				!["sessions", "translations"].includes(table.slug) &&
+				user.value?.role === config.public.idOne,
+		},
+		{
+			key: `${tableUrl}/schedules`,
+			label: t("schedules"),
+			icon: () => h(NIcon, () => h(Icon, { name: "tabler:clock-play" })),
+			show:
+				!["sessions", "translations", "assets"].includes(table.slug) &&
+				table.allowedMethods?.includes("c") &&
+				user.value?.role === config.public.idOne,
+		},
+	]
+}
+
+function renderDropdownLabel(option: DropdownOption) {
+	return h(
+		NuxtLink,
+		{
+			to: option.key as string,
+		},
+		() => option.label,
+	)
+}
+</script>

package/app/components/Table/Icon.vue

@@ -0,0 +1,36 @@
+<template>
+    <NIcon>
+        <Icon
+            v-if="table.icon || ['assets', 'translations', 'users', 'sessions', 'pages', 'blocks', 'templates'].includes(table.slug)"
+            :name="getTableIcon(table)" />
+        <span v-else>{{ t(table.slug).charAt(0).toUpperCase() }}</span>
+    </NIcon>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+	table: Table
+}>()
+
+function getTableIcon(table: Table) {
+	if (table.icon) return `tabler:${table.icon}`
+	switch (table.slug) {
+		case "assets":
+			return "tabler:folder"
+		case "translations":
+			return "tabler:language"
+		case "users":
+			return "tabler:users"
+		case "sessions":
+			return "tabler:fingerprint"
+		case "pages":
+			return "tabler:template"
+		case "blocks":
+			return "tabler:layout-2"
+		case "templates":
+			return "tabler:mail-spark"
+		default:
+			return "tabler:table"
+	}
+}
+</script>

package/app/components/Table/Logs.vue

@@ -0,0 +1,181 @@
+<template>
+	<NCollapse v-if="hasLogs" :default-expanded-names="isOpen ? ['logs'] : []" @item-header-click="handleCollapseChange">
+		<NCollapseItem name="logs">
+			<template #header>
+				<NH4 style="margin: 0">{{ t('latestActivities') }}</NH4>
+			</template>
+			<NSpin :show="Loading.logs">
+				<NScrollbar v-if="data?.result" style="max-height: 340px">
+					<NTimeline :item-placement="Language === 'ar' ? 'right' : 'left'">
+						<NTimelineItem v-for="log in data.result?.filter((log) => log.actions?.length)" :key="log.id"
+							:type="getTypeFromAction((log.actions[0] as Actions[0])[0])">
+							<template #header>
+								<NFlex align="center" size="small">
+									<NText type="primary">{{ renderLabel(usersTable, log.madeBy) }}</NText>
+									<template v-if="(log.actions[0] as Actions[0])[0] === 'create'">
+										{{ t('created') }} {{ t("newItem") }}:
+										<NButtonGroup>
+											<NButton v-for="item in ([] as Item[]).concat(log.item)" round secondary
+												size="small" type="primary">
+												{{ renderLabel(table, item, `[${t('removed')}]`) }}
+											</NButton>
+										</NButtonGroup>
+									</template>
+									<template v-else-if="(log.actions[0] as Actions[0])[0] === 'delete'">
+										{{ t('deleted') }} {{ t("anItem") }}
+									</template>
+									<template v-else>
+										{{ t('updated') }}
+										<NButtonGroup>
+											<NButton v-for="item in ([] as Item[]).concat(log.item)" round secondary
+												size="small" type="primary">{{ renderLabel(table, item) }}
+											</NButton>
+										</NButtonGroup>
+										{{ t('asFollow') }}:
+									</template>
+								</NFlex>
+							</template>
+							<NFlex vertical style="line-height: 2.5;">
+								<template v-for="action in log.actions">
+									<NText v-if="action[0] === 'unset'">{{ t(action[0]) }} <NTag :bordered="false" round
+											type="warning">{{
+												t(action[1]) }}</NTag>
+									</NText>
+									<NText v-else-if="action[0] === 'remove'">{{ t(action[0]) }} {{ t("from") }}
+										<NTag :bordered="false" round type="error">{{ t(action[1]) }}</NTag>
+									</NText>
+									<NText v-else-if="action[0] === 'add'">{{ t(action[0]) }} {{ t("to") }} <NTag
+											:bordered="false" round type="success">{{ t(action[1]) }}</NTag>
+									</NText>
+									<NText v-else-if="action[0] === 'set'">{{ t(action[0]) }} <NTag :bordered="false"
+											round type="info">{{ t(action[1]) }}</NTag> {{ t("as") }} <NTag
+											:bordered="false" round>{{ t(action[2]) }}
+										</NTag>
+									</NText>
+									<NText v-else-if="action[0] === 'update'">{{ t(action[0]) }} <NTag :bordered="false"
+											round type="info">
+											{{ t(action[1]) }}</NTag> {{
+												t("to") }}
+										<NTag :bordered="false" round>{{ t(action[2]) }}</NTag>
+									</NText>
+								</template>
+							</NFlex>
+							<template #footer>
+								<NTime :time="log.createdAt" type="relative" />
+							</template>
+						</NTimelineItem>
+					</NTimeline>
+				</NScrollbar>
+			</NSpin>
+		</NCollapseItem>
+	</NCollapse>
+</template>
+
+<script lang="ts" setup>
+import Inison from "inison"
+
+type ActionName =
+	| "set"
+	| "add"
+	| "remove"
+	| "update"
+	| "unset"
+	| "delete"
+	| "create"
+type Actions = [ActionName, string, any?][]
+interface Log extends Item {
+	actions: Actions
+	madeBy?: User
+	item: Item | Item[]
+}
+
+const { id, open } = defineProps<{
+	id?: string | number
+	open?: boolean
+}>()
+const isOpen = ref(open)
+
+const config = useRuntimeConfig()
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}))
+const database = useState<Database>("database");
+const Language = useScopedCookie<LanguagesType>("language", database.value?.slug)
+
+const usersTable = database.value.tables?.find(({ slug }) => slug === "users")
+
+const table = useState<Table>("table")
+
+onBeforeRouteLeave(() => {
+	clearNuxtData(`${database.value.slug}/${table.value?.slug as string}/logs`)
+})
+
+const sessionID = useScopedCookie<string>("sid", database.value?.slug)
+const hasLogs = ref(true)
+
+const { data, execute } = await useLazyFetch<apiResponse<Log[]>>(
+	() => `${config.public.apiBase}${database.value.slug}/${table.value.slug}/logs`,
+	{
+		query: {
+			where: id ? `{item:${id}}` : undefined,
+			options: Inison.stringify({
+				columns: [
+					"*",
+					...(table.value.columns?.map((column) => `item.${column}`) ?? []),
+					...(usersTable?.columns?.map((column) => `madeBy.${column}`) ?? []),
+				],
+			}),
+			locale: Language,
+			[`${database.value.slug}_sid`]: sessionID.value,
+		},
+		immediate: false,
+		onRequest() {
+			Loading.value.logs = true
+		},
+		onResponse: ({ response: { _data } }) => {
+			Loading.value.logs = false
+			hasLogs.value = !!_data?.result?.length
+		},
+		credentials: "include",
+	},
+)
+
+let firstTime = true
+watch(
+	isOpen,
+	(newValue) => {
+		if (newValue && firstTime) {
+			execute()
+			firstTime = false
+		}
+	},
+	{ immediate: true },
+)
+
+// Refetch logs when the current language changes (log messages are
+// locale-dependent), but only once they've been loaded at least once
+watch(Language, () => {
+	if (!firstTime) execute()
+})
+
+function handleCollapseChange({
+	name,
+	expanded,
+}: {
+	name: string | number
+	expanded: boolean
+}) {
+	if (name === "logs") isOpen.value = expanded
+}
+
+function getTypeFromAction(
+	ActionName: ActionName,
+): "error" | "info" | "success" {
+	switch (ActionName) {
+		case "create":
+			return "success"
+		case "delete":
+			return "error"
+		default:
+			return "info"
+	}
+}
+</script>