From e0879b9fe41cc00cf33e118d4d76b30d04329e76 Mon Sep 17 00:00:00 2001 From: Abdullokh Musaev Date: Tue, 15 Mar 2022 16:11:53 +0500 Subject: [PATCH 1/6] start implementing drag-n-drop --- .../query_string_input/add_filter_modal.tsx | 145 ++++++++++++++---- 1 file changed, 113 insertions(+), 32 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 9c75d12644ab2a..a1e4fd62d6f44e 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -29,6 +29,11 @@ import { EuiText, EuiIcon, EuiFieldText, + EuiDragDropContext, + EuiDroppable, + EuiDraggable, + DropResult, + ResponderProvided, } from '@elastic/eui'; import { XJsonLang } from '@kbn/monaco'; import { i18n } from '@kbn/i18n'; @@ -146,6 +151,58 @@ export function AddFilterModal({ }, ]); + const onDragEnd = useCallback( + (result: DropResult, provided: ResponderProvided) => { + if (result.destination) { + const [sourceGroup, sourceSubGroup, sourceId] = result.draggableId.split('-'); + const [destGroup, destSubGroup] = result.destination.droppableId.split('-'); + const targetIndex = localFilters.findIndex((f) => f.id === +sourceId); + + let updatedFilters = [...localFilters]; + + const [reorderingItem] = updatedFilters.splice(targetIndex, 1); + const insertIndex = updatedFilters.findIndex( + (f) => f.groupId === +destGroup && f.subGroupId === +destSubGroup + ); + updatedFilters.splice(insertIndex, 0, reorderingItem); + + updatedFilters = localFilters.map((f, idx) => { + if (idx === targetIndex) { + const updatedTarget = { + ...f, + subGroupId: +destSubGroup, + relationship: undefined, + id: idx, + }; + if (+destSubGroup === 1) + // if inserting to the root it has to be with new filter group + return { + ...updatedTarget, + groupId: + Math.max.apply( + Math, + localFilters.map((lcFilter) => lcFilter.groupId) + ) + 1, + }; + return { ...updatedTarget, groupId: +destGroup }; + } + return { ...f, id: idx }; + }); + + if ( + updatedFilters[targetIndex - 1] && + updatedFilters[targetIndex - 1].groupId === updatedFilters[targetIndex].groupId && + updatedFilters[targetIndex - 1].subGroupId === updatedFilters[targetIndex].subGroupId + ) + // give relationship of moved filter to the filter before in the source + updatedFilters[targetIndex - 1].relationship = updatedFilters[targetIndex].relationship; + + setLocalFilters(updatedFilters); + } + }, + [localFilters] + ); + useEffect(() => { const fetchQueries = async () => { const allSavedQueries = await savedQueryService.getAllSavedQueries(); @@ -500,14 +557,22 @@ export function AddFilterModal({ : groupsCount === 1 && subGroup.length > 1 ? 'kbnQueryBar__filterModalGroups' : ''; - return ( - <> -
- {subGroup.map((localfilter, index) => { - return ( - <> + + const group = subGroup.map((localfilter, index) => { + return ( + <> + + {(provided) => ( + - + @@ -520,6 +585,7 @@ export function AddFilterModal({ + {subGroup.length < 2 && ( @@ -568,6 +634,12 @@ export function AddFilterModal({ filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 : (localfilter?.subGroupId ?? 0) + 1; + // const subGroupId = + // filtersOnGroup.length > 2 + // ? localfilter?.subGroupId ?? 0 + // : filtersOnGroup.length > 1 + // ? (localfilter?.subGroupId ?? 0) + 1 + // : 1; const updatedLocalFilter = { ...localfilter, relationship: 'AND', @@ -634,32 +706,41 @@ export function AddFilterModal({ + + )} + - {localfilter.relationship && - localfilter.relationship === 'OR' && - subGroup.length === 0 && ( - <> - - - - - - - OR - - - - - - - - )} + {localfilter.relationship && + localfilter.relationship === 'OR' && + subGroup.length === 0 && ( + <> + + + + + + + OR + + + + + + - ); - })} + )} + + ); + }); + return ( + <> +
+ + {group} +
<> {subGroup.length > 0 && subGroupIdx !== subGroups.length - 1 && ( @@ -687,7 +768,7 @@ export function AddFilterModal({ ); GroupComponent.push(temp); } - return GroupComponent; + return {GroupComponent}; }; return ( From 6a86feb0d8b7ec51df085a1f77d0f77452ae56c2 Mon Sep 17 00:00:00 2001 From: Abdullokh Musaev Date: Fri, 18 Mar 2022 10:21:02 +0500 Subject: [PATCH 2/6] minor fix for margins --- .../data/public/ui/query_string_input/add_filter_modal.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index a1e4fd62d6f44e..ccea39280da970 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -562,7 +562,7 @@ export function AddFilterModal({ return ( <>
{group} From 14554a1ff67feb72d68a5cbfcab2f7cdfec43150 Mon Sep 17 00:00:00 2001 From: Nodir Latipov Date: Mon, 13 Jun 2022 12:47:03 +0500 Subject: [PATCH 3/6] first step --- .../query_string_input/add_filter_modal.tsx | 24 ++++++++++++------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index ccea39280da970..ce116b7566cb1f 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -153,7 +153,22 @@ export function AddFilterModal({ const onDragEnd = useCallback( (result: DropResult, provided: ResponderProvided) => { + if (result.combine) { + console.log('combine', result); + const [sourceGroup, sourceSubGroup, sourceId] = result.draggableId.split('-'); + const [combineGroup, combineSubGroup, combineId] = result.combine.draggableId.split('-'); + const [destGroup, destSubGroup] = result.combine.droppableId.split('-'); + const targetIndex = localFilters.findIndex((f) => f.id === +combineId); + const updatedFilters = [...localFilters]; + const targetFilter = updatedFilters[targetIndex]; + updatedFilters[targetIndex].relationship = 'OR'; + updatedFilters[+sourceId].groupId = targetFilter.groupId; + updatedFilters[+sourceId].subGroupId = targetFilter!.subGroupId + 1; + setLocalFilters(updatedFilters); + } + if (result.destination) { + console.log('destination', result); const [sourceGroup, sourceSubGroup, sourceId] = result.draggableId.split('-'); const [destGroup, destSubGroup] = result.destination.droppableId.split('-'); const targetIndex = localFilters.findIndex((f) => f.id === +sourceId); @@ -513,8 +528,6 @@ export function AddFilterModal({ const finalFilters = builtFilters.filter( (value) => typeof value !== 'undefined' ) as Filter[]; - // onSubmit(finalFilters); - onMultipleFiltersSubmit(localFilters, finalFilters); if (alias) { saveFilters({ @@ -634,12 +647,6 @@ export function AddFilterModal({ filtersOnGroup.length > 2 ? localfilter?.subGroupId ?? 0 : (localfilter?.subGroupId ?? 0) + 1; - // const subGroupId = - // filtersOnGroup.length > 2 - // ? localfilter?.subGroupId ?? 0 - // : filtersOnGroup.length > 1 - // ? (localfilter?.subGroupId ?? 0) + 1 - // : 1; const updatedLocalFilter = { ...localfilter, relationship: 'AND', @@ -738,6 +745,7 @@ export function AddFilterModal({ {group} From 27aead34634c1c66b923455de59aef94cee32cdb Mon Sep 17 00:00:00 2001 From: Nodir Latipov Date: Tue, 28 Jun 2022 22:48:18 +0500 Subject: [PATCH 4/6] feat: remove shadow in row --- .../ui/query_string_input/add_filter_modal.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index ce116b7566cb1f..81cf9acbbc1f71 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -142,9 +142,9 @@ export function AddFilterModal({ : 1, id: multipleFilters?.length ? Math.max.apply( - Math, - multipleFilters.map((f) => f.id) - ) + 1 + Math, + multipleFilters.map((f) => f.id) + ) + 1 : 0, subGroupId: 1, relationship: undefined, @@ -562,6 +562,7 @@ export function AddFilterModal({ filtersInGroup > 1 && groupsCount > 1 ? 'kbnQueryBar__filterModalGroups' : '' )} paddingSize="s" + hasShadow={false} > {subGroups.map((subGroup, subGroupIdx) => { const classes = @@ -583,9 +584,9 @@ export function AddFilterModal({ hasInteractiveChildren={true} > {(provided) => ( - - - + + + From ecb87297ad5dcc8f70888e92bceb744f7a5e0812 Mon Sep 17 00:00:00 2001 From: Nodir Latipov Date: Fri, 1 Jul 2022 19:38:57 +0500 Subject: [PATCH 5/6] feat: comment css --- .../public/ui/query_string_input/add_filter_modal.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 81cf9acbbc1f71..88ac1abdd2844f 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -558,9 +558,9 @@ export function AddFilterModal({ const temp = ( 1 && groupsCount > 1 ? 'kbnQueryBar__filterModalGroups' : '' - )} + // className={classNames( + // filtersInGroup > 1 && groupsCount > 1 ? 'kbnQueryBar__filterModalGroups' : '' + // )} paddingSize="s" hasShadow={false} > @@ -742,7 +742,9 @@ export function AddFilterModal({ }); return ( <> -
+
Date: Mon, 18 Jul 2022 16:17:37 +0500 Subject: [PATCH 6/6] feat: update add filter modal --- .../ui/query_string_input/add_filter_modal.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx index 88ac1abdd2844f..ad62f50f60e9b8 100644 --- a/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx +++ b/src/plugins/data/public/ui/query_string_input/add_filter_modal.tsx @@ -154,7 +154,6 @@ export function AddFilterModal({ const onDragEnd = useCallback( (result: DropResult, provided: ResponderProvided) => { if (result.combine) { - console.log('combine', result); const [sourceGroup, sourceSubGroup, sourceId] = result.draggableId.split('-'); const [combineGroup, combineSubGroup, combineId] = result.combine.draggableId.split('-'); const [destGroup, destSubGroup] = result.combine.droppableId.split('-'); @@ -168,7 +167,6 @@ export function AddFilterModal({ } if (result.destination) { - console.log('destination', result); const [sourceGroup, sourceSubGroup, sourceId] = result.draggableId.split('-'); const [destGroup, destSubGroup] = result.destination.droppableId.split('-'); const targetIndex = localFilters.findIndex((f) => f.id === +sourceId); @@ -558,9 +556,9 @@ export function AddFilterModal({ const temp = ( 1 && groupsCount > 1 ? 'kbnQueryBar__filterModalGroups' : '' - // )} + className={classNames( + filtersInGroup > 1 && groupsCount > 1 ? 'kbnQueryBar__filterModalGroups' : '' + )} paddingSize="s" hasShadow={false} > @@ -585,7 +583,11 @@ export function AddFilterModal({ > {(provided) => ( - + @@ -742,9 +744,7 @@ export function AddFilterModal({ }); return ( <> -
+