JS-4800: wip

src/ts/component/block/dataview/controls.tsx

@@ -24,6 +24,7 @@ const Controls = observer(class Controls extends React.Component<Props> {
 
 		this.onButton = this.onButton.bind(this);
 		this.sortOrFilterRelationSelect = this.sortOrFilterRelationSelect.bind(this);
+		this.onSortOrFilterAdd = this.onSortOrFilterAdd.bind(this);
 		this.onSortStart = this.onSortStart.bind(this);
 		this.onSortEnd = this.onSortEnd.bind(this);
 		this.onViewAdd = this.onViewAdd.bind(this);
@@ -266,7 +267,7 @@ const Controls = observer(class Controls extends React.Component<Props> {
 		const obj = $(element);
 
 		if ((component == 'dataviewSort' && !view.sorts.length) || (component == 'dataviewFilterList' && !view.filters.length)) {
-			this.sortOrFilterRelationSelect({ element, component }, () => {
+			this.sortOrFilterRelationSelect(component,{ element }, () => {
 				this.onButton(element, component);
 			});
 			return;
@@ -311,7 +312,11 @@ const Controls = observer(class Controls extends React.Component<Props> {
 				onViewRemove: this.onViewRemove,
 				view: observable.box(view),
 				onAdd: (menuId, menuWidth) => {
-					this.sortOrFilterRelationSelect({ element, component, menuId, menuWidth });
+					this.sortOrFilterRelationSelect(component,{
+						element: `#${menuId} #item-add`,
+						offsetX: menuWidth,
+						horizontal: I.MenuDirection.Right
+					});
 				},
 			},
 		};
@@ -326,28 +331,52 @@ const Controls = observer(class Controls extends React.Component<Props> {
 		S.Menu.open(component, param);
 	};
 
-	sortOrFilterRelationSelect (param: any, callBack?: () => void) {
-		const { rootId, block, getView, onSortAdd, onFilterAdd } = this.props;
-		const { element, component, menuId, menuWidth } = param;
-		
+	sortOrFilterRelationSelect (component: string, param: any, callBack?: () => void) {
+		const { rootId, block, getView } = this.props;
+
 		U.Menu.sortOrFilterRelationSelect({
-			element,
-			component,
+			menuParam: param,
 			rootId,
-			block,
+			blockId: block.id,
 			getView,
-			onSortAdd,
-			onFilterAdd,
-			menuId,
-			menuWidth,
-			onSelect: () => {
-				if (callBack) {
-					callBack();
-				};
+			onSelect: (item) => {
+				this.onSortOrFilterAdd(item, component, () => {
+					if (callBack) {
+						callBack();
+					};
+				});
 			}
 		});
 	};
 
+	onSortOrFilterAdd (item: any, component: string, callBack: () => void) {
+		const { onSortAdd, onFilterAdd } = this.props;
+
+		let newItem = {
+			relationKey: item.relationKey ? item.relationKey : item.id
+		};
+
+		if (component == 'dataviewSort') {
+			newItem = Object.assign(newItem, {
+				type: I.SortType.Asc,
+			});
+
+			onSortAdd(newItem, callBack);
+		} else
+		if (component == 'dataviewFilterList') {
+			const conditions = Relation.filterConditionsByType(item.format);
+			const condition = conditions.length ? conditions[0].id : I.FilterCondition.None;
+
+			newItem = Object.assign(newItem, {
+				operator: I.FilterOperator.And,
+				condition: condition as I.FilterCondition,
+				value: Relation.formatValue(item, null, false),
+			});
+
+			onFilterAdd(newItem, callBack);
+		};
+	};
+
 	onViewAdd (e: any) {
 		e.persist();
 

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

@@ -414,7 +414,7 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
 	onOver (e: any, item: any) {
 		const { getId, getSize, setActive, param } = this.props;
 		const { data } = param;
-		const { getView, itemId } = data;
+		const { rootId, blockId, getView, itemId } = data;
 		const view = getView();
 		const filter = view.getFilter(itemId);
 		const isReadonly = this.isReadonly();
@@ -430,13 +430,27 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
 		let options = [];
 		let key = item.id;
 
-		switch (item.id) {
-			case 'relation': {
-				options = this.getRelationOptions();
-				key = 'relationKey';
-				break;
+		if (item.id == 'relation') {
+			const menuParam = {
+				element: `#${getId()} #item-${item.id}`,
+				offsetX: getSize().width,
+				horizontal: I.MenuDirection.Right
 			};
 
+			U.Menu.sortOrFilterRelationSelect({
+				menuParam,
+				rootId,
+				blockId,
+				getView,
+				onSelect: (item) => {
+					this.onChange('relationKey', item.relationKey ? item.relationKey : item.id);
+				}
+			});
+
+			return;
+		};
+
+		switch (item.id) {
 			case 'condition': {
 				if (Relation.isDictionary(filter.relationKey)) {
 					options = Relation.filterConditionsDictionary();	
@@ -758,4 +772,4 @@ const MenuDataviewFilterValues = observer(class MenuDataviewFilterValues extends
 
 });
 
-export default MenuDataviewFilterValues;
+export default MenuDataviewFilterValues;

src/ts/lib/util/menu.ts

@@ -833,30 +833,19 @@ class UtilMenu {
 	};
 
 	sortOrFilterRelationSelect (param: any) {
-		const { rootId, block, getView, element, component, menuId, menuWidth, onSelect } = param;
-		const options = Relation.getFilterOptions(rootId, block.id, getView());
+		const { rootId, blockId, getView, onSelect, menuParam } = param;
+		const options = Relation.getFilterOptions(rootId, blockId, getView());
 
 		const callBack = (item: any) => {
-			this.sortOrFilterAdd(item, param, () => {
-				onSelect();
-				S.Menu.close('select');
-			});
+			onSelect(item);
+			S.Menu.close('select');
 		};
 
-		let menu = {
-			element,
+		const menu = Object.assign({
 			horizontal: I.MenuDirection.Center,
 			offsetY: 10,
 			noFlipY: true,
-		};
-
-		if (menuId && menuWidth) {
-			menu = Object.assign(menu, {
-				element: `#${menuId} #item-add`,
-				offsetX: menuWidth,
-				horizontal: I.MenuDirection.Right
-			});
-		};
+		}, menuParam);
 
 		S.Menu.open('select', {
 			...menu,
@@ -865,8 +854,7 @@ class UtilMenu {
 				withFilter: true,
 				maxHeight: 378,
 				onAdd: (menuId, menuWidth) => {
-					const menuParam = { menuId, menuWidth };
-					this.sortOrFilterRelationAdd(menuParam, param, (relation) => callBack(relation));
+					this.sortOrFilterRelationAdd({ menuId, menuWidth }, param, (relation) => callBack(relation));
 				},
 				onSelect: (e: any, item: any) => callBack(item)
 			}
@@ -874,9 +862,9 @@ class UtilMenu {
 	};
 
 	sortOrFilterRelationAdd (menuParam: any, param: any, callBack: (relation: any) => void) {
-		const { rootId, block, getView } = param;
+		const { rootId, blockId, getView } = param;
 		const { menuId, menuWidth } = menuParam;
-		const relations = Relation.getFilterOptions(rootId, block.id, getView());
+		const relations = Relation.getFilterOptions(rootId, blockId, getView());
 		const element = `#${menuId} #item-add`;
 
 		S.Menu.open('relationSuggest', {
@@ -888,7 +876,7 @@ class UtilMenu {
 			onClose: () => $(element).removeClass('active'),
 			data: {
 				rootId,
-				blockId: block.id,
+				blockId,
 				skipKeys: relations.map(it => it.id),
 				ref: 'dataview',
 				menuIdEdit: 'blockRelationEdit',
@@ -902,34 +890,6 @@ class UtilMenu {
 		});
 	};
 
-	sortOrFilterAdd (item: any, param: any, callBack: () => void) {
-		const { onSortAdd, onFilterAdd, component } = param;
-
-		let newItem = {
-			relationKey: item.relationKey ? item.relationKey : item.id
-		};
-
-		if (component == 'dataviewSort') {
-			newItem = Object.assign(newItem, {
-				type: I.SortType.Asc,
-			});
-
-			onSortAdd(newItem, callBack);
-		} else
-		if (component == 'dataviewFilterList') {
-			const conditions = Relation.filterConditionsByType(item.format);
-			const condition = conditions.length ? conditions[0].id : I.FilterCondition.None;
-
-			newItem = Object.assign(newItem, {
-				operator: I.FilterOperator.And,
-				condition: condition as I.FilterCondition,
-				value: Relation.formatValue(item, null, false),
-			});
-
-			onFilterAdd(newItem, callBack);
-		};
-	};
-
 };
 
 export default new UtilMenu();