inicontent 1.0.0

package/app/components/Table/Search/Button.vue

@@ -0,0 +1,256 @@
+<template>
+    <NPopover style="max-height: 240px;" :style="`width: ${isMobile ? '100vw' : '500px'}`" placement="bottom-end"
+        scrollable v-model:show="isSearchPopoverVisible" :x="isMobile ? 0 : undefined" :y="isMobile ? 180 : undefined"
+        :show-arrow="!isMobile" trigger="click">
+        <template #trigger>
+            <NTooltip :delay="1500">
+                <template #trigger>
+                    <NButton secondary round :size="props.size" :tertiary="isSearchPopoverVisible"
+                        :type="isSearchPopoverVisible ? 'primary' : undefined">
+                        <template #icon>
+                            <NIcon>
+                                <Icon v-if="isSearchPopoverVisible" name="tabler:x" />
+                                <Icon v-else name="tabler:search" />
+                            </NIcon>
+                        </template>
+                    </NButton>
+                </template>
+                {{ t("search") }}
+            </NTooltip>
+        </template>
+        <template #footer>
+            <NFlex justify="space-between">
+                <NTooltip :delay="500" placement="bottom">
+                    <template #trigger>
+                        <NPopover trigger="click" scrollable style="max-height: 300px;">
+                            <template #trigger>
+                                <NButton round type="success" size="small" secondary>
+                                    <template #icon>
+                                        <NIcon>
+                                            <Icon name="tabler:bookmark" />
+                                        </NIcon>
+                                    </template>
+                                </NButton>
+                            </template>
+                            <template #footer>
+                                <NInputGroup style="width: 100%;">
+                                    <NInput v-model:value="newFilterName" :placeholder="t('filterName')" size="small"
+                                        round
+                                        @keyup.enter="() => { saveFavoriteFilter(newFilterName); newFilterName = '' }" />
+                                    <NButton round type="success" secondary size="small" :loading="false"
+                                        :disabled="!newFilterName.trim()"
+                                        @click="() => { saveFavoriteFilter(newFilterName); newFilterName = '' }">
+                                        <template #icon>
+                                            <NIcon>
+                                                <Icon name="tabler:plus" />
+                                            </NIcon>
+                                        </template>
+                                    </NButton>
+                                </NInputGroup>
+                            </template>
+                            <NEmpty v-if="favoriteFilters.length === 0" size="small"
+                                :description="t('noFavoriteFilters')" />
+                            <NFlex v-else vertical size="small" style="padding: 0 8px;">
+                                <NFlex justify="space-between" v-for="filter in favoriteFilters" :key="filter.id" block
+                                    quaternary @click="loadFavoriteFilter(filter)" style="cursor: pointer;">
+                                    <template #default>
+                                        <NFlex justify="space-between" style="width: 100%;">
+                                            <span>{{ filter.name }}</span>
+                                            <NButton circle size="tiny" type="error" text
+                                                @click.stop="deleteFavoriteFilter(filter.id)">
+                                                <template #icon>
+                                                    <NIcon>
+                                                        <Icon name="tabler:trash" />
+                                                    </NIcon>
+                                                </template>
+                                            </NButton>
+                                        </NFlex>
+                                    </template>
+                                </NFlex>
+                            </NFlex>
+                        </NPopover>
+                    </template>
+                    {{ t("favoriteFilters") }}
+                </NTooltip>
+
+                <NButtonGroup>
+                    <NButton round type="error" secondary size="small" :loading="Loading.data"
+                        :disabled="props.disabled" @click="handleReset">
+                        <template #icon>
+                            <NIcon>
+                                <Icon name="tabler:x" />
+                            </NIcon>
+                        </template>
+                        {{ t("reset") }}
+                    </NButton>
+                    <NButton round type="primary" secondary size="small" :loading="Loading.data"
+                        :disabled="props.disabled" @click="handleSearch">
+                        <template #icon>
+                            <NIcon>
+                                <Icon name="tabler:search" />
+                            </NIcon>
+                        </template>
+                        {{ t("search") }}
+                    </NButton>
+                </NButtonGroup>
+            </NFlex>
+        </template>
+        <LazyTableSearch v-model="localSearchArray" :callback="handleSearch" v-model:schema="schema" />
+    </NPopover>
+</template>
+
+<script setup lang="ts">
+import Inison from "inison";
+import {
+    Icon,
+    NButton,
+    NButtonGroup,
+    NIcon,
+    NPopover,
+    NTooltip,
+    NFlex,
+    LazyTableSearch,
+    NEmpty,
+    NInput,
+    NInputGroup,
+} from "#components";
+import { deepClone } from "~/composables";
+import { generateSearchString } from "~/composables/search";
+
+const props = withDefaults(
+    defineProps<{
+        size?: "small" | "medium" | "large";
+        disabled?: boolean;
+    }>(),
+    {
+        disabled: false,
+    },
+);
+
+const schema = defineModel<Schema>("schema");
+
+const searchString = defineModel<string | undefined>("string");
+const searchArray = defineModel<searchType>("array", {
+    default: () => reactive({ and: [[null, "=", null]] }),
+});
+
+const config = useRuntimeConfig();
+const { isMobile } = useDevice();
+const user = useState<User>("user");
+const database = useState<Database>("database");
+const table = useState<Table>("table");
+const sessionID = useState<string>("sessionID");
+const Loading = useState<Record<string, boolean>>("Loading", () => ({}));
+
+const isSearchPopoverVisible = ref(false);
+const newFilterName = ref("");
+
+// Local working copy of search array
+const localSearchArray = ref<searchType>(deepClone(searchArray.value) ?? { and: [[null, "=", null]] });
+
+// Sync local copy when external searchArray changes (without triggering search)
+watch(
+    () => searchArray.value,
+    (newVal) => {
+        localSearchArray.value = deepClone(newVal) as searchType;
+    },
+);
+
+// Convert searchArray back to string for emit
+function emitSearchQuery(locSearchArray: searchType) {
+    const searchInput = generateSearchString(locSearchArray, "display");
+    searchArray.value = locSearchArray;
+    searchString.value = searchInput ? Inison.stringify(searchInput as any) : undefined;
+}
+
+// Handle search button click
+function handleSearch() {
+    emitSearchQuery(localSearchArray.value);
+}
+
+// Handle reset button click
+function handleReset() {
+    const resetArray = { and: [[null, "=", null]] } as searchType;
+    localSearchArray.value = resetArray;
+    emitSearchQuery(resetArray);
+}
+
+// Get favorite filters for current table
+const favoriteFilters = computed({
+    get: () => {
+        const filters = user.value?.config?.filters ?? {};
+        return (filters as Record<string, any>)[table.value?.slug ?? ""] ?? [];
+    },
+    set: (v) => {
+        updateFavoriteFilters(v);
+    },
+});
+
+// Update favorite filters in user config
+async function updateFavoriteFilters(filters: any[]) {
+    if (!user.value || !table.value || !database.value) return;
+
+    try {
+        const allFilters = { ...(user.value?.config?.filters ?? {}) };
+        allFilters[table.value.slug] = filters;
+        const updatedUser = {
+            ...user.value,
+            config: { ...(user.value.config ?? {}), filters: allFilters },
+        };
+
+        await $fetch(
+            `${config.public.apiBase}${database.value.slug}/users/${user.value.id}`,
+            {
+                method: "PUT",
+                body: updatedUser,
+                params: { [`${database.value.slug}_sid`]: sessionID.value },
+                credentials: "include",
+            },
+        );
+    } catch (err: any) {
+        window.$message.error(err.message);
+    }
+}
+
+// ==================== FAVORITE FILTERS LOGIC ====================
+
+async function saveFavoriteFilter(filterName: string) {
+    if (!filterName.trim()) {
+        window.$message.error(t("filterNameCannotBeEmpty"));
+        return;
+    }
+
+    if (favoriteFilters.value.some((f: any) => f.name === filterName)) {
+        window.$message.error(t("filterNameAlreadyExists"));
+        return;
+    }
+
+    const newFilter = {
+        id: Date.now().toString(),
+        name: filterName,
+        searchArray: deepClone(localSearchArray.value),
+        createdAt: new Date().toISOString(),
+    };
+
+    const updatedFilters = [...favoriteFilters.value, newFilter];
+    favoriteFilters.value = updatedFilters;
+    window.$message.success(t("filterSavedSuccessfully"));
+}
+
+function loadFavoriteFilter(filter: any) {
+    const loadedArray = (deepClone(filter.searchArray) as searchType) ?? {
+        and: [[null, "=", null]],
+    };
+    localSearchArray.value = loadedArray;
+    emitSearchQuery(loadedArray);
+    window.$message.success(`${t("filterLoaded")}: ${filter.name}`);
+}
+
+function deleteFavoriteFilter(filterId: string) {
+    const updatedFilters = favoriteFilters.value.filter(
+        (f: any) => f.id !== filterId,
+    );
+    favoriteFilters.value = updatedFilters;
+    window.$message.success(t("filterDeletedSuccessfully"));
+}
+</script>

package/app/components/Table/Search/Items.vue

@@ -0,0 +1,286 @@
+<template>
+	<NFlex item-style="width: 100%">
+		<template v-for="(item, index) in formatedItems">
+			<NInputGroup v-if="Array.isArray(item)" class="searchGroupInput">
+				<NCascader size="small" :consistent-menu-width="false" filterable :value="item[0]"
+					@update:value="(v) => item[0] = v" :options="generateSearchInOptions(schema)"
+					:style="`width:${item[3] ? 33.33 : 100}%`" check-strategy="child" />
+				<template v-if="item[3]">
+					<NCascader size="small" filterable check-strategy="child" :value="item[1]"
+						@update:value="(v) => item[1] = v" :options="getAvailableComparisonOperator(item[3])"
+						style="width:33.33%" />
+					<template v-if="isRelativeOperator(item[1])">
+						<NSelect size="small" style="width:33.33%" :placeholder="t('relativePlaceholder')"
+							:value="(item[2] as string | null) ?? null"
+							:options="relativeSelectOptions[index] ?? getRelativeSelectOptions('', item[2] as string | null, item[3])"
+							filterable remote clearable :on-search="(pattern) => handleRelativeSearch(index, pattern)"
+							tag @update:value="(v) => updateRelativeValue(item, v as string | null)"
+							@keydown.enter.prevent="() => callback && callback()" />
+					</template>
+					<Field v-else :model-value="item[2]" @update:modelValue="(v) => updateFieldValue(item, v)"
+						:field="getFieldFromItem(item)" />
+				</template>
+				<NButton :disabled="formatedItems?.length === 1" @click="modelValue?.splice(index, 1)" circle
+					size="small">
+					<template #icon>
+						<NIcon>
+							<Icon name="tabler:minus" />
+						</NIcon>
+					</template>
+				</NButton>
+			</NInputGroup>
+			<LazyTableSearch v-else v-model="(modelValue[index] as searchType)" v-model:schema="schema" :callback />
+		</template>
+	</NFlex>
+</template>
+
+<script lang="ts" setup>
+import {
+	getField as getFieldFromSchema,
+	isArrayOfObjects,
+	isNumber,
+	isObject,
+} from "inibase/utils"
+import { Icon } from "#components"
+
+const { callback } = defineProps<{
+	callback?: CallableFunction
+}>()
+
+const schema = defineModel<Table['schema']>("schema")
+
+const modelValue = defineModel<searchTypeValue>({
+	default: [[null, "=", null]],
+})
+
+type OperatorOption = {
+	label?: string
+	value?: string
+	children?: OperatorOption[]
+	type?: string
+	key?: string
+}
+
+const relativeBaseSuggestionValues = [
+	"now",
+	"yesterday",
+	"tomorrow",
+	"last week",
+	"last month",
+	"last year",
+	"next week",
+	"next month",
+	"next year",
+]
+
+const relativeBaseAutocompleteOptions = relativeBaseSuggestionValues.map(
+	(value) => ({
+		label: t(value),
+		value,
+	}),
+)
+
+const formatedItems = computed(() =>
+	modelValue.value?.map((item) => {
+		if (Array.isArray(item) && item[0]) {
+			item[3] = getFieldFromSchema(item[0], schema.value as any)
+			item[2] = normalizeSearchItemValue(item)
+		}
+		return item
+	}),
+)
+
+function normalizeSearchItemValue(item: searchTypeValueItem) {
+	const value = item[2]
+	const field = item[3] as Field | undefined
+	if (!field || isRelativeOperator(item[1])) return value
+
+	if (
+		checkFieldType(field.type, ["date", "number"]) &&
+		typeof value === "string" &&
+		isNumber(value)
+	)
+		return Number(value)
+
+	return value
+}
+
+function getSearchSubType(field: Field) {
+	const resolvedType = field.subType ?? field.type
+	if (["radio", "checkbox"].includes(resolvedType as string)) return "select"
+	// long text fields are searched through a single line input
+	if (resolvedType === "textarea") return undefined
+	return field.subType
+}
+
+function getFieldFromItem(item: searchTypeValueItem) {
+	return {
+		...item[3],
+		subType: getSearchSubType(item[3]),
+		required: false,
+		labelProps: {
+			showLabel: false,
+			style: { width: "33.33%" },
+			showFeedback: false,
+		},
+		inputProps: {
+			size: "small",
+			onKeydown: ({ key }: KeyboardEvent) => {
+				if (key === "Enter" && callback) callback()
+			},
+		},
+	}
+}
+
+function getAvailableComparisonOperator(field: Field) {
+	const baseOptions = comparisonOperatorOptions() as OperatorOption[]
+	const selectableOptions = baseOptions.filter((option) => {
+		const optionValue = option.value
+		if (!optionValue) return false
+
+		if (Array.isArray(field.type))
+			return [
+				"=",
+				"!=",
+				...(field.type.some((type: string) =>
+					["string", "email", "url"].includes(type),
+				)
+					? ["*", "!*"]
+					: []),
+				...(field.type.some((type: string) => ["number", "date"].includes(type))
+					? [">", ">=", "<", "<="]
+					: []),
+			].includes(optionValue)
+
+		if (checkFieldType(field.type, ["number", "date"]))
+			return ["=", "!=", ">", ">=", "<", "<="].includes(optionValue)
+		if (
+			checkFieldType(field.type, "array") ||
+			checkFieldType(field.type, "table")
+		)
+			return ![">", ">=", "<", "<="].includes(optionValue)
+		return ![">", ">=", "<", "<=", "[]", "![]"].includes(optionValue)
+	})
+
+	if (checkFieldType(field.type, ["date", "number"])) {
+		const relativeCandidates = selectableOptions.filter(
+			(option) =>
+				option.value &&
+				["=", "!=", ">", ">=", "<", "<="].includes(option.value),
+		)
+		if (relativeCandidates.length)
+			return [
+				{
+					value: "relative",
+					label: t("relativeGroup"),
+					children: relativeCandidates.map((option) => ({
+						label: option.label ?? option.value ?? "",
+						value: `r${option.value as string}`,
+					})),
+				},
+				...selectableOptions,
+			]
+	}
+
+	return selectableOptions
+}
+
+function isRelativeOperator(value: string | undefined) {
+	return typeof value === "string" && value.startsWith("r")
+}
+
+function getRelativeAutocompleteOptions(value: unknown, field?: Field) {
+	if (field?.type && checkFieldType(field.type, "number")) {
+		const input = typeof value === "string" ? value.trim() : ""
+		if (!input)
+			return ["0", "1", "-1", "10", "-10"].map((v) => ({ label: v, value: v }))
+
+		const numericPattern = /^[+-]?\d+(?:\.\d+)?$/
+		if (numericPattern.test(input))
+			return [{ label: input, value: input }]
+
+		return []
+	}
+
+	const input = typeof value === "string" ? value.trim() : ""
+	const numericPattern = /^[+-]?\d+$/
+	if (numericPattern.test(input)) {
+		const parsed = Number.parseInt(input, 10)
+		if (!Number.isFinite(parsed)) return relativeBaseAutocompleteOptions
+		const absolute = Math.abs(parsed)
+		if (absolute === 0) return relativeBaseAutocompleteOptions
+		const units = [
+			{ singular: "day", plural: "days" },
+			{ singular: "week", plural: "weeks" },
+			{ singular: "month", plural: "months" },
+			{ singular: "year", plural: "years" },
+		]
+		const numberText = absolute.toString()
+		const options: { label: string; value: string }[] = []
+
+		for (const { singular, plural } of units) {
+			const unitText = t(absolute === 1 ? singular : plural)
+			const baseLabel = `${numberText} ${unitText}`
+			options.push({ label: `${baseLabel} ${t('ago')}`, value: `${baseLabel} ago` })
+		}
+		for (const { singular, plural } of units) {
+			const unitText = t(absolute === 1 ? singular : plural)
+			const baseLabel = `${numberText} ${unitText}`
+			options.push({ label: `${t('in')} ${baseLabel}`, value: `in ${baseLabel}` })
+		}
+		return options
+	}
+	return relativeBaseAutocompleteOptions
+}
+
+// NSelect support (remote filter): state and helpers
+const relativeSelectOptions = ref<Record<number, { label: string; value: string }[]>>({})
+
+function getRelativeSelectOptions(
+	pattern: unknown,
+	currentValue: string | null,
+	field?: Field,
+) {
+	// Reuse existing generator, ensure current value is present
+	const options = getRelativeAutocompleteOptions(pattern, field)
+	const list = Array.isArray(options) ? [...options] : []
+	if (currentValue && !list.some((o) => o.value === currentValue)) {
+		list.unshift({ label: currentValue, value: currentValue })
+	}
+	return list
+}
+
+function handleRelativeSearch(index: number, pattern: string) {
+	const currentItem = modelValue.value?.[index]
+	const currentValue = Array.isArray(currentItem) ? (currentItem[2] as string | null) : null
+	const currentField = Array.isArray(currentItem) ? (currentItem[3] as Field | undefined) : undefined
+	relativeSelectOptions.value[index] = getRelativeSelectOptions(pattern, currentValue, currentField)
+}
+
+function updateRelativeValue(
+	item: searchTypeValueItem,
+	value: string | null,
+) {
+	const sanitized = value?.trim()
+	item[2] = sanitized ? sanitized : undefined
+}
+
+function updateFieldValue(item: searchTypeValueItem, value: any) {
+	if (value !== undefined) {
+		if (isObject(value) && Object.hasOwn(value, "id"))
+			value = value.id
+		else if (
+			isArrayOfObjects(value) &&
+			value.every((_v: any) => Object.hasOwn(_v, "id"))
+		)
+			value = value.map((_value: any) => _value.id)
+		item[2] = Array.isArray(value) ? value.join(",") : value
+	} else item[2] = undefined
+}
+</script>
+
+<style scoped>
+.searchGroupInput * {
+	border-radius: 0 !important;
+}
+</style>

package/app/components/Table/Search/index.vue

@@ -0,0 +1,87 @@
+<template>
+	<NCollapse :triggerAreas="['main', 'arrow']" accordion default-expanded-names="0">
+		<NCollapseItem v-for="(_items, condition, index) in modelValue" :key="condition" :name="index.toString()"
+			:title="t(`${condition}Group`)">
+			<template #header-extra>
+				<NButtonGroup>
+					<NDropdown :options="conditionDropdownOptions" style="max-height: 200px;" scrollable
+						@select="(value: 'and' | 'or') => modelValue[condition]?.push({ [value]: [[null, '=', null]] })">
+						<NButton round type="primary" secondary @click="modelValue[condition]?.push([null, '=', null])"
+							circle size="small">
+							<template #icon>
+								<NIcon>
+									<Icon name="tabler:plus" />
+								</NIcon>
+							</template>
+						</NButton>
+					</NDropdown>
+
+					<NTooltip :delay="1500">
+						<template #trigger>
+							<NButton round type="info" secondary @click="() => toggleCondition(condition)" circle
+								size="small">
+								<template #icon>
+									<NIcon>
+										<Icon name="tabler:switch-horizontal" />
+									</NIcon>
+								</template>
+							</NButton>
+						</template>
+						{{ t(
+							`convert_to_${condition === "and" ? "or" : "and"}_group`,
+						) }}
+					</NTooltip>
+					<NButton round type="error" secondary @click="() => removeCondition(condition)" circle size="small">
+						<template #icon>
+							<NIcon>
+								<Icon name="tabler:trash" />
+							</NIcon>
+						</template>
+					</NButton>
+				</NButtonGroup>
+			</template>
+			<TableSearchItems v-model="modelValue[condition]" v-model:schema="schema" :callback />
+		</NCollapseItem>
+	</NCollapse>
+</template>
+
+<script lang="ts" setup>
+import { Icon, NIcon } from "#components"
+
+const { callback } = defineProps<{ callback?: CallableFunction }>()
+
+const table = useState<Table>("table")
+
+const schema = defineModel<Table['schema']>("schema")
+if (!schema.value)
+	schema.value = table.value?.schema
+
+const modelValue = defineModel<searchType>({
+	default: { and: [[null, "=", null]] },
+})
+
+const conditionDropdownOptions = [
+	{
+		key: "and",
+		label: t("andGroup"),
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:arrow-merge" })),
+	},
+	{
+		key: "or",
+		label: t("orGroup"),
+		icon: () => h(NIcon, () => h(Icon, { name: "tabler:arrow-fork" })),
+	},
+]
+
+function toggleCondition(oldCondition: "and" | "or") {
+	modelValue.value[oldCondition === "and" ? "or" : "and"] =
+		modelValue.value[oldCondition]
+	delete modelValue.value[oldCondition]
+}
+
+function removeCondition(condition: "and" | "or") {
+	if (Object.keys(modelValue.value).length === 1)
+		modelValue.value[condition] = [[null, "=", null]]
+	else delete modelValue.value[condition]
+}
+</script>