Feature/JS-7500: Filter templates

src/json/text.json

@@ -2696,6 +2696,11 @@
 	"notificationMode2": "Disable all",
 	"notificationMode3": "Custom",
 
+	"filterTemplate0": "Value template",
+	"filterTemplate1": "Current User",
+	"filterTemplate2": "Current Object",
+	"filterTemplate3": "Space Member",
+
 	"spaceUxType0": "None",
 	"spaceUxType1": "Space",
 	"spaceUxType2": "Stream",

src/scss/menu/dataview/filter.scss

@@ -74,10 +74,12 @@
 		.select:hover, .select.isFocused { background: none; }
 		.select {
 			.icon.arrow { background-image: url('~img/arrow/filter.svg') !important; }
-		}
-		.select.checkboxValue {
-			.item { @include text-common; }
-			.icon.arrow { right: -8px !important; }
+
+			&.checkboxValue,
+			&.templateValue {
+				.item { @include text-common; }
+				.icon.arrow { right: -8px !important; }
+			}
 		}
 
 		.item { display: flex; gap: 0px 6px; }

src/scss/menu/icon.scss

@@ -165,6 +165,10 @@
 		.icon.chat-link { background-image: url('~img/icon/chat/buttons/link0.svg'); }
 		.icon.chat-pencil { background-image: url('~img/icon/chat/buttons/pencil0.svg'); }
 
+		.icon.filterTemplate-user { background-image: url('~img/icon/widget/button/member.svg'); }
+		.icon.filterTemplate-object { background-image: url('~img/icon/settings/spaces.svg'); }
+		.icon.filterTemplate-participant { background-image: url('~img/icon/settings/members.svg'); }
+
 		.icon.embed-latex { background-image: url('~img/icon/menu/action/block/embed/latex.svg'); }
 		.icon.embed-mermaid { background-image: url('~img/icon/menu/action/block/embed/mermaid.svg'); }
 		.icon.embed-youtube { background-image: url('~img/icon/menu/action/block/embed/youtube.svg'); }

src/ts/component/block/dataview/view/board/column.tsx

@@ -85,8 +85,8 @@ const BoardColumn = observer(forwardRef<RefProps, Props>((props, ref) => {
 		U.Subscription.destroyList([ subId ], false, () => {
 			U.Subscription.subscribe({
 				subId,
-				filters: filters.map(Dataview.filterMapper),
-				sorts: sorts.map(Dataview.filterMapper),
+				filters: filters.map(it => Dataview.filterMapper(it, { rootId })),
+				sorts: sorts.map(it => Dataview.sortMapper(it)),
 				keys: getKeys(view.id),
 				sources: target.setOf || [],
 				limit,

src/ts/component/block/dataview/view/calendar/item.tsx

@@ -85,7 +85,7 @@ const CalendarItem = observer(forwardRef<Ref, Props>((props, ref) => {
 		U.Subscription.subscribe({
 			subId,
 			limit,
-			filters: filters.map(Dataview.filterMapper),
+			filters: filters.map(it => Dataview.filterMapper(it, { rootId })),
 			sorts: sorts.map(Dataview.filterMapper),
 			keys: getKeys(view.id),
 			sources: object.setOf || [],

src/ts/component/block/dataview/view/graph.tsx

@@ -8,7 +8,7 @@ const PADDING = 46;
 
 const ViewGraph = observer(forwardRef<I.ViewRef, I.ViewComponent>((props, ref) => {
 
-	const { block, className, isCollection, isPopup, isInline, getView, getSearchIds, getTarget } = props;
+	const { rootId, block, className, isCollection, isPopup, isInline, getView, getSearchIds, getTarget } = props;
 	const cn = [ 'viewContent', className ];
 	const nodeRef = useRef(null);
 	const graphRef = useRef(null);
@@ -21,9 +21,9 @@ const ViewGraph = observer(forwardRef<I.ViewRef, I.ViewComponent>((props, ref) =
 		};
 
 		const searchIds = getSearchIds();
+		const filters = [].concat(view.filters).concat(U.Data.getGraphFilters()).map(it => Dataview.filterMapper(it, { rootId }));
 		const settings = S.Common.getGraph(J.Constant.graphId.dataview);
 		const target = getTarget();
-		const filters = [].concat(view.filters).concat(U.Data.getGraphFilters()).map(Dataview.filterMapper);
 
 		if (searchIds) {
 			filters.push({ relationKey: 'id', condition: I.FilterCondition.In, value: searchIds || [] });

src/ts/component/block/dataview/view/timeline.tsx

@@ -370,8 +370,8 @@ const ViewTimeline = observer(forwardRef<{}, I.ViewComponent>((props, ref) => {
 
 		U.Subscription.subscribe({
 			subId,
-			filters: filters.map(Dataview.filterMapper),
-			sorts: sorts.map(Dataview.filterMapper),
+			filters: filters.map(it => Dataview.filterMapper(it, { rootId })),
+			sorts: sorts.map(it => Dataview.sortMapper(it)),
 			keys: getKeys(view.id),
 			sources: object.setOf || [],
 			collectionId: (isCollection ? object.id : ''),

src/ts/component/menu/dataview/filter/values.tsx

@@ -3,7 +3,7 @@ import $ from 'jquery';
 import { observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { I, S, U, J, translate, keyboard, analytics, Relation } from 'Lib';
-import { Select, Tag, Icon, IconObject, Input, MenuItemVertical } from 'Component';
+import { Select, Tag, Icon, IconObject, Input, MenuItemVertical, ObjectName } from 'Component';
 
 const TIMEOUT = 1000;
 
@@ -135,15 +135,22 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
 				Item = (element: any) => {	
 					const type = S.Record.getTypeById(element.type);
 
+					let icon = null;
+					if (element.icon) {
+						icon = <Icon className={element.icon} />;
+					} else {
+						icon = <IconObject object={element} />;
+					};
+
 					return (
 						<div 
 							id={`item-object-${element.id}`} 
 							className={[ 'item', 'withCaption', (isReadonly ? 'isReadonly' : '') ].join(' ')}
 							onMouseEnter={() => setHover({ id: `object-${element.id}` })}
 						>
 							<div className="clickable" onClick={e => this.onObject(e, item)}>
-								<IconObject object={element} />
-								<div className="name">{element.name}</div>
+								{icon}
+								<ObjectName object={element} />
 							</div>
 							<div className="caption">
 								{type?.name}
@@ -155,7 +162,7 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
 					);
 				};
 
-				list = Relation.getArrayValue(item.value).map(it => S.Detail.get(rootId, it, []));
+				list = Relation.getArrayValue(item.value).map(it => Relation.getFilterTemplateOption(it) || S.Detail.get(rootId, it, []));
 				list = list.filter(it => !it._empty_);
 
 				value = (
@@ -703,6 +710,7 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
 			return;
 		};
 
+		const { config } = S.Common;
 		const { id, param, getId, getSize } = this.props;
 		const { data, className, classNameWrap } = param;
 		const { rootId, blockId } = data;
@@ -732,6 +740,19 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
 					relation: observable.box(relation),
 					canAdd: true,
 					canEdit: true,
+					dataChange: (context: any, items: any) => {
+						if (!config.experimental) {
+							return items;
+						};
+
+						const templates = Relation.filterTemplateOptions().map(it => ({ ...it, isSystem: true }));
+
+						if (items.length) {
+							templates.push({ isDiv: true });
+						};
+
+						return templates.concat(items);
+					},
 					onChange: (value: any, callBack?: () => void) => {
 						this.onChange('value', value);
 						callBack?.();

src/ts/component/menu/dataview/object/list.tsx

@@ -56,8 +56,7 @@ const MenuDataviewObjectList = observer(class MenuDataviewObjectList extends Rea
 				return null;
 			};
 
-			const type = S.Record.getTypeById(item.type);
-			const name = <ObjectName object={item} />;
+			const type = item.type ? S.Record.getTypeById(item.type) : null;
 
 			let content = null;
 			if (item.isDiv) {
@@ -69,23 +68,16 @@ const MenuDataviewObjectList = observer(class MenuDataviewObjectList extends Rea
 			} else
 			if (item.isSection) {
 				content = (<div className="sectionName" style={param.style}>{item.name}</div>);
-			} else
-			if (item.id == 'add') {
-				content = (
-					<div id="item-add" className="item add" onMouseEnter={e => this.onOver(e, item)} onClick={e => this.onClick(e, item)} style={param.style}>
-						<Icon className="plus" />
-						<div className="name">{item.name}</div>
-					</div>
-				);
 			} else {
 				content = (
 					<MenuItemVertical 
 						id={item.id}
-						object={item}
+						object={item.isSystem ? null : item}
+						icon={item.icon}
 						name={<ObjectName object={item} />}
 						onMouseEnter={e => this.onOver(e, item)} 
 						onClick={e => this.onClick(e, item)}
-						caption={<ObjectType object={type} />}
+						caption={type ? <ObjectType object={type} /> : ''}
 						style={param.style}
 					/>
 				);
@@ -296,14 +288,20 @@ const MenuDataviewObjectList = observer(class MenuDataviewObjectList extends Rea
 	getItems () {
 		const { param } = this.props;
 		const { data } = param;
-		const { canAdd, canEdit, nameCreate } = data;
+		const { canAdd, canEdit, nameCreate, dataChange } = data;
 		const value = Relation.getArrayValue(data.value);
 		const typeNames = this.getTypeNames();
 
 		let ret = U.Common.objectCopy(this.items);
+
+		if (dataChange) {
+			ret = dataChange(this, ret);
+		};
+
 		if (canEdit) {
 			ret = ret.filter(it => !value.includes(it.id));
 		};
+
 		if (typeNames) {
 			ret.unshift({ isSection: true, name: typeNames });
 		};
@@ -312,7 +310,7 @@ const MenuDataviewObjectList = observer(class MenuDataviewObjectList extends Rea
 			if (ret.length || typeNames) {
 				ret.push({ isDiv: true });
 			};
-			ret.push({ id: 'add', name: U.Common.sprintf(nameCreate || translate('commonCreateObjectWithName'), data.filter) });
+			ret.push({ id: 'add', icon: 'plus', name: U.Common.sprintf(nameCreate || translate('commonCreateObjectWithName'), data.filter), isSystem: true });
 		};
 
 		return ret;

src/ts/component/menu/item/filter.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { I, S, U, Relation, translate } from 'Lib';
-import { Icon, Tag, IconObject } from 'Component';
+import { Icon, Tag, IconObject, ObjectName } from 'Component';
 
 interface Props extends I.Menu, I.Filter {
 	id: string;
@@ -112,17 +112,25 @@ const MenuItemFilter = observer(forwardRef<{}, Props>((props, ref) => {
 		case I.RelationType.File:
 		case I.RelationType.Object: {
 			Item = (item: any) => {
+				let icon = null;
+				if (item.icon) {
+					icon = <Icon className={item.icon} />;
+				} else {
+					icon = <IconObject object={item} />;
+				};
 				return (
 					<div className="element">
 						<div className="flex">
-							<IconObject object={item} />
-							<div className="name">{item.name}</div>
+							{icon}
+							<ObjectName object={item} />
 						</div>
 					</div>
 				);
 			};
 
-			list = Relation.getArrayValue(value).map(it => S.Detail.get(subId, it, []));
+			list = Relation.getArrayValue(value).map(it => {
+				return Relation.getFilterTemplateOption(it) || S.Detail.get(subId, it, []);
+			});
 			list = list.filter(it => !it._empty_);
 
 			v = (

src/ts/component/sidebar/page/settings/library.tsx

@@ -297,7 +297,7 @@ const SidebarPageSettingsLibrary = observer(forwardRef<{}, I.SidebarPageComponen
 				menuId = 'blockRelationEdit';
 				menuParam.data = Object.assign(menuParam.data, {
 					rootId: item.id,
-					filter: filter,
+					filter: item.name,
 					relationId: item.id,
 					route: analytics.route.settingsSpace,
 					noUnlink: true,

src/ts/component/widget/view/board/group.tsx

@@ -48,8 +48,8 @@ const Group = observer(forwardRef<{}, Props>((props, ref) => {
 		U.Subscription.destroyList([ subId ], false, () => {
 			U.Subscription.subscribe({
 				subId,
-				filters: filters.map(Dataview.filterMapper),
-				sorts: sorts.map(Dataview.filterMapper),
+				filters: filters.map(it => Dataview.filterMapper(it)),
+				sorts: sorts.map(it => Dataview.sortMapper(it)),
 				keys: J.Relation.sidebar,
 				sources: object.setOf || [],
 				limit,

src/ts/component/widget/view/graph/index.tsx

@@ -15,8 +15,8 @@ const WidgetViewGraph = observer(forwardRef<{}, I.WidgetViewComponent>((props, r
 			return;
 		};
 
-		const filters = [].concat(view.filters).concat(U.Data.getGraphFilters()).map(Dataview.filterMapper);
 		const object = getObject();
+		const filters = [].concat(view.filters).concat(U.Data.getGraphFilters()).map(it => Dataview.filterMapper(it, { rootId: object.id }));
 		const isCollection = U.Object.isCollectionLayout(object.layout);
 		const settings = S.Common.getGraph(J.Constant.graphId.dataview);
 

src/ts/interface/block/dataview.ts

@@ -89,6 +89,13 @@ export enum FilterQuickOption {
 	NextYear		 = 14,
 };
 
+export enum FilterValueTemplate {
+	None			 = 0,
+	User			 = 1,
+	Object			 = 2,
+	Participant		 = 3,
+};
+
 export enum FormulaType {
 	None				 = 0,
 	Count				 = 1,