From 29579b833ceae956cc4609d7b3548071ca232139 Mon Sep 17 00:00:00 2001 From: Dell Date: Tue, 1 Feb 2022 21:09:03 +0300 Subject: [PATCH 1/3] Select multiple objects with single tap --- .../Objects/ListObjects/ListObjects.tsx | 71 +++++++++++++------ 1 file changed, 51 insertions(+), 20 deletions(-) diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx index a53c2ac998..03cc5c1dba 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx @@ -276,6 +276,7 @@ const ListObjects = ({ const [loadingVersioning, setLoadingVersioning] = useState(true); const [isVersioned, setIsVersioned] = useState(false); const [rewindSelect, setRewindSelect] = useState(false); + const [previousSelection, setPreviousSelection] = useState(null); const [selectedObjects, setSelectedObjects] = useState([]); const [previewOpen, setPreviewOpen] = useState(false); const [selectedPreview, setSelectedPreview] = useState( @@ -652,6 +653,7 @@ const ListObjects = ({ if (refresh) { setSnackBarMessage(`Objects deleted successfully.`); setSelectedObjects([]); + setPreviousSelection(null); setLoading(true); } }; @@ -994,26 +996,6 @@ const ListObjects = ({ setSelectedPreview(null); }; - const selectListObjects = (e: React.ChangeEvent) => { - const targetD = e.target; - const value = targetD.value; - const checked = targetD.checked; - - let elements: string[] = [...selectedObjects]; // We clone the selectedBuckets array - - if (checked) { - // If the user has checked this field we need to push this to selectedBucketsList - elements.push(value); - } else { - // User has unchecked this field, we need to remove it from the list - elements = elements.filter((element) => element !== value); - } - setSelectedObjects(elements); - setSelectedInternalPaths(null); - - return elements; - }; - const sortChange = (sortData: any) => { const newSortDirection = get(sortData, "sortDirection", "DESC"); setCurrentSortField(sortData.sortBy); @@ -1097,7 +1079,56 @@ const ListObjects = ({ payload = sortASC.reverse(); } + const selectListObjects = (e: React.ChangeEvent) => { + const targetD = e.target; + const value = targetD.value; + let checked = targetD.checked; + // @ts-ignore shiftKey is defined for click events + const shift: bool = e.nativeEvent.shiftKey; + + let elements: string[] = [...selectedObjects]; // We clone the selectedBuckets array + + let previous = value; // By default, start and end are one element + // Use the shift effect if different elements are selected + if (shift && previousSelection !== value) { + if (previousSelection === null) { + // There was no previous action, сhecked only first elements + checked = true; + previous = payload[0].name; + } else { + // Repeat the previous steps for everyone in the range + checked = elements.indexOf(previousSelection) !== -1; + previous = previousSelection; + } + } + + const [min, max] = [ + payload.findIndex(object => object.name === value), + payload.findIndex(object => object.name === previous), + ].sort((a, b) => a - b); // correctly sort an array of numbers + for (let i = min; i <= max; i++) { + const current = payload[i].name; + if (checked) { + // If the user has checked this field we need to push this to selectedBucketsList + if (elements.indexOf(current) === -1) { + elements.push(current); + } + } else { + // User has unchecked this field, we need to remove it from the list + elements = elements.filter((element) => element !== current); + } + } + + setSelectedObjects(elements); + setPreviousSelection(value); + setSelectedInternalPaths(null); + + return elements; + }; + const selectAllItems = () => { + setPreviousSelection(null); + if (selectedObjects.length === payload.length) { setSelectedObjects([]); return; From 9cd84e8b780b7e2119dec48634b2bcfdc86040d4 Mon Sep 17 00:00:00 2001 From: Dell Date: Sun, 20 Feb 2022 18:36:14 +0300 Subject: [PATCH 2/3] Selecting objects works like in Linux Files --- .../Objects/ListObjects/ListObjects.tsx | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx index 03cc5c1dba..dbaa93166f 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx @@ -276,7 +276,7 @@ const ListObjects = ({ const [loadingVersioning, setLoadingVersioning] = useState(true); const [isVersioned, setIsVersioned] = useState(false); const [rewindSelect, setRewindSelect] = useState(false); - const [previousSelection, setPreviousSelection] = useState(null); + const [selectedMainObject, setSelectedMainObject] = useState(null); const [selectedObjects, setSelectedObjects] = useState([]); const [previewOpen, setPreviewOpen] = useState(false); const [selectedPreview, setSelectedPreview] = useState( @@ -653,7 +653,7 @@ const ListObjects = ({ if (refresh) { setSnackBarMessage(`Objects deleted successfully.`); setSelectedObjects([]); - setPreviousSelection(null); + setSelectedMainObject(null); setLoading(true); } }; @@ -1085,26 +1085,29 @@ const ListObjects = ({ let checked = targetD.checked; // @ts-ignore shiftKey is defined for click events const shift: bool = e.nativeEvent.shiftKey; + // @ts-ignore ctrlKey is defined for click events + const ctrl: bool = e.nativeEvent.ctrlKey; + let elements: string[] = ctrl ? [...selectedObjects] : []; // We clone the selectedBuckets array - let elements: string[] = [...selectedObjects]; // We clone the selectedBuckets array - - let previous = value; // By default, start and end are one element + let mainObject = value; // Use the shift effect if different elements are selected - if (shift && previousSelection !== value) { - if (previousSelection === null) { + if (shift) { + if (selectedMainObject === null) { // There was no previous action, сhecked only first elements + mainObject = payload[0].name; checked = true; - previous = payload[0].name; } else { // Repeat the previous steps for everyone in the range - checked = elements.indexOf(previousSelection) !== -1; - previous = previousSelection; + mainObject = selectedMainObject; + checked = elements.indexOf(mainObject) !== -1 || (shift && !ctrl); } + } else { + setSelectedMainObject(value); } const [min, max] = [ payload.findIndex(object => object.name === value), - payload.findIndex(object => object.name === previous), + payload.findIndex(object => object.name === mainObject), ].sort((a, b) => a - b); // correctly sort an array of numbers for (let i = min; i <= max; i++) { const current = payload[i].name; @@ -1120,14 +1123,13 @@ const ListObjects = ({ } setSelectedObjects(elements); - setPreviousSelection(value); setSelectedInternalPaths(null); return elements; }; const selectAllItems = () => { - setPreviousSelection(null); + setSelectedMainObject(null); if (selectedObjects.length === payload.length) { setSelectedObjects([]); From 3400aa0d11247343db41dcd1fd720802bcb4d016 Mon Sep 17 00:00:00 2001 From: Dell Date: Wed, 16 Mar 2022 21:12:42 +0300 Subject: [PATCH 3/3] There was no main object then ignore shift --- .../Objects/ListObjects/ListObjects.tsx | 14 ++++---------- 1 file changed, 4 insertions(+), 10 deletions(-) diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx index 68e8676190..657f44453d 100644 --- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx +++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx @@ -1027,16 +1027,10 @@ const ListObjects = ({ let mainObject = value; // Use the shift effect if different elements are selected - if (shift) { - if (selectedMainObject === null) { - // There was no previous action, сhecked only first elements - mainObject = payload[0].name; - checked = true; - } else { - // Repeat the previous steps for everyone in the range - mainObject = selectedMainObject; - checked = elements.indexOf(mainObject) !== -1 || (shift && !ctrl); - } + if (shift && selectedMainObject !== null) { + // Repeat the previous steps for everyone in the range + mainObject = selectedMainObject; + checked = elements.indexOf(mainObject) !== -1 || (shift && !ctrl); } else { setSelectedMainObject(value); }