feat: select multiple keys with holding shift key (#2712)

Closes #2713 tolgee/documentation#761
tolgee · Nov 22, 2024 · 0079d36 · 0079d36
1 parent e18c9b3
commit 0079d36
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 15 deletions.
diff --git a/webapp/src/views/projects/translations/CellKey.tsx b/webapp/src/views/projects/translations/CellKey.tsx
@@ -8,6 +8,7 @@ import { Zap } from '@untitled-ui/icons-react';
 import { LimitedHeightText } from 'tg.component/LimitedHeightText';
 import { components } from 'tg.service/apiSchema.generated';
 import { stopBubble } from 'tg.fixtures/eventHandler';
+import { wrapIf } from 'tg.fixtures/wrapIf';
 
 import { Tags } from './Tags/Tags';
 import { ScreenshotsPopover } from './Screenshots/ScreenshotsPopover';
@@ -126,25 +127,32 @@ export const CellKey: React.FC<Props> = ({
   editEnabled,
   active,
   simple,
-  onSaveSuccess,
   className,
 }) => {
   const cellRef = useRef<HTMLDivElement>(null);
   const [screenshotsOpen, setScreenshotsOpen] = useState(false);
-  const { toggleSelect, addTag } = useTranslationsActions();
+  const { toggleSelect, groupToggleSelect, addTag } = useTranslationsActions();
   const { t } = useTranslate();
 
   const screenshotEl = useRef<HTMLButtonElement | null>(null);
 
   const isSelected = useTranslationsSelector((c) =>
     c.selection.includes(data.keyId)
   );
+  const somethingSelected = useTranslationsSelector((c) =>
+    Boolean(c.selection.length)
+  );
 
   // prevent blinking, when closing popup
   const [screenshotsOpenDebounced] = useDebounce(screenshotsOpen, 100);
 
-  const handleToggleSelect = () => {
-    toggleSelect(data.keyId);
+  const handleToggleSelect = (e: React.PointerEvent) => {
+    const shiftPressed = e.nativeEvent.shiftKey;
+    if (shiftPressed) {
+      groupToggleSelect(data.keyId);
+    } else {
+      toggleSelect(data.keyId);
+    }
   };
 
   const handleAddTag = (name: string) => {
@@ -176,15 +184,23 @@ export const CellKey: React.FC<Props> = ({
         ref={cellRef}
       >
         <>
-          {!simple && (
-            <StyledCheckbox
-              size="small"
-              checked={isSelected}
-              onChange={handleToggleSelect}
-              onClick={stopBubble()}
-              data-cy="translations-row-checkbox"
-            />
-          )}
+          {!simple &&
+            wrapIf(
+              somethingSelected && !isSelected,
+              <StyledCheckbox
+                size="small"
+                checked={isSelected}
+                onChange={handleToggleSelect as any}
+                onClick={stopBubble()}
+                data-cy="translations-row-checkbox"
+              />,
+              // @ts-ignore
+              <Tooltip
+                title={t('translations_checkbox_select_multiple_hint')}
+                enterDelay={1000}
+                enterNextDelay={1000}
+              />
+            )}
           <StyledKey>
             <LimitedHeightText width={width} maxLines={3} wrap="break-all">
               {data.keyName}

diff --git a/webapp/src/views/projects/translations/context/TranslationsContext.ts b/webapp/src/views/projects/translations/context/TranslationsContext.ts
@@ -186,8 +186,11 @@ export const [
         return positionService.updatePosition(edit);
       }
     },
-    toggleSelect(index: number) {
-      return selectionService.toggle(index);
+    toggleSelect(keyId: number) {
+      return selectionService.toggle(keyId);
+    },
+    groupToggleSelect(keyId: number) {
+      return selectionService.groupToggle(keyId);
     },
     async selectAll() {
       const allItems = await translationService.getAllIds();

diff --git a/webapp/src/views/projects/translations/context/services/useSelectionService.tsx b/webapp/src/views/projects/translations/context/services/useSelectionService.tsx
@@ -20,12 +20,42 @@ export const useSelectionService = ({ translations }: Props) => {
     setSelection(data);
   };
 
+  const groupToggle = (keyId: number) => {
+    const lastSelected = selection[selection.length - 1];
+    const lastIndex =
+      translations.fixedTranslations?.findIndex(
+        (t) => t.keyId === lastSelected
+      ) ?? -1;
+    const currentIndex =
+      translations.fixedTranslations?.findIndex((t) => t.keyId === keyId) ?? -1;
+
+    if (lastIndex < 0 || currentIndex < 0) {
+      toggle(keyId);
+      return;
+    }
+
+    let from = lastIndex;
+    let to = currentIndex;
+
+    if (lastIndex > currentIndex) {
+      from = currentIndex;
+      to = lastIndex;
+    }
+    const keys =
+      translations.fixedTranslations
+        ?.filter((_, i) => i >= from && i <= to)
+        .map((k) => k.keyId)
+        .filter((id) => !selection.includes(id)) ?? [];
+    setSelection((selected) => [...selected, ...keys]);
+  };
+
   const clear = () => {
     setSelection([]);
   };
 
   return {
     toggle,
+    groupToggle,
     clear,
     select,
     data: selection,