TSJR-314 - improvments to bulk editor

Author: vas3a

src/apps/admin/src/skills-manager/components/bulk-editor/BulkEditor.tsx

@@ -42,6 +42,7 @@ const BulkEditor: FC<BulkEditorProps> = props => {
     function closeMoveSkillsModal(moved?: boolean): void {
         if (moved) {
             refetchSkills()
+            context.toggleAll()
         }
 
         setShowMoveSkills(false)

src/apps/admin/src/skills-manager/components/bulk-editor/move-skills-modal/MoveSkillsModal.module.scss

@@ -4,11 +4,12 @@
     .skillsList {
         column-count: 2;
         margin: -$sp-2;
+        margin-bottom: $sp-3;
     }
 }
 
 .formInput {
     &Label {
-        margin-bottom: $sp-2;
+        margin-bottom: $sp-1;
     }
 }

src/apps/admin/src/skills-manager/components/categories-accordion/CategoriesAccordion.tsx

@@ -3,7 +3,7 @@ import { FC, useCallback, useMemo } from 'react'
 import { Accordion, AccordionItem } from '../accordion'
 import { SkillsList } from '../skills-list'
 import { SkillsManagerContextValue, useSkillsManagerContext } from '../../context'
-import { StandardizedSkillCategory } from '../../services'
+import { StandardizedSkill, StandardizedSkillCategory } from '../../services'
 import { CATEGORY_ITEM_ACTIONS, MENU_ACTIONS } from '../../config'
 
 interface CategoriesAccordionProps {
@@ -32,6 +32,10 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
         }
     }, [bulkEditorCtx, setEditCategory])
 
+    const handleBulkEditClick = useCallback((skill: StandardizedSkill) => {
+        bulkEditorCtx.toggle(skill.category)
+    }, [bulkEditorCtx])
+
     const renderCategoryAccordion = useCallback((category: StandardizedSkillCategory): JSX.Element => {
         const categorySkills = groupedSkills[category.id] ?? []
 
@@ -52,6 +56,7 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
                         isSelected={bulkEditorCtx.isSkillSelected}
                         editMode={!!bulkEditorCtx.isEditing}
                         onEditSkill={setEditSkill}
+                        onBulkEditSkill={handleBulkEditClick}
                     />
                 )}
             </AccordionItem>

src/apps/admin/src/skills-manager/components/skills-list/SkillsList.module.scss

@@ -27,3 +27,13 @@
         // pointer-events: none;
     }
 }
+
+.checkbox {
+    > * {
+        margin: -$sp-2;
+        > * {
+            display: block;
+            padding: $sp-2;
+        }
+    }
+}

src/apps/admin/src/skills-manager/components/skills-list/SkillsList.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, MouseEvent } from 'react'
 import classNames from 'classnames'
 
 import { InputCheckbox } from '~/libs/ui'
@@ -15,15 +15,34 @@ interface SkillsListProps {
     onSelect: (skill: StandardizedSkill) => void
     isSelected: (skill: StandardizedSkill) => boolean
     onEditSkill?: (skill: StandardizedSkill) => void
+    onBulkEditSkill?: (skill: StandardizedSkill) => void
 }
 
 const SkillsList: FC<SkillsListProps> = props => {
-    function handleToggle(skill: StandardizedSkill): void {
-        if (!props.editMode) {
-            props.onEditSkill?.(skill)
+    const handleSkillItemClick = (skill: StandardizedSkill) => (ev: MouseEvent) => {
+        // prevent when clicking the checkbox
+        const targetEl = ev.target as HTMLInputElement
+        if (targetEl.nodeName === 'INPUT' && targetEl.type?.toLowerCase() === 'checkbox') {
             return
         }
 
+        // trigger bulk edit when holding ctrl key and bulk editor is not active
+        if (ev.ctrlKey && !props.editMode && props.onBulkEditSkill) {
+            props.onBulkEditSkill(skill)
+            setTimeout(props.onSelect, 100, skill)
+            return
+        }
+
+        // toggle skill selection when holding ctrl key (rather than triggering skill edit)
+        if (ev.ctrlKey) {
+            props.onSelect(skill)
+            return
+        }
+
+        props.onEditSkill?.(skill)
+    }
+
+    const handleCheckboxToggle = (skill: StandardizedSkill) => () => {
         props.onSelect(skill)
     }
 
@@ -34,15 +53,15 @@ const SkillsList: FC<SkillsListProps> = props => {
                     <li
                         className={classNames(styles.skillItem, isSkillArchived(skill) && styles.archived)}
                         key={skill.id}
-                        onClick={function toggl() { handleToggle(skill) }}
+                        onClick={handleSkillItemClick(skill)}
                     >
                         {props.editMode && (
                             <div className={styles.checkbox}>
                                 <InputCheckbox
                                     name='toggle-skill'
                                     accent='blue'
                                     checked={props.isSelected(skill)}
-                                    onChange={function toggl() { handleToggle(skill) }}
+                                    onChange={handleCheckboxToggle(skill)}
                                 />
                             </div>
                         )}

src/apps/admin/src/skills-manager/services/skills.service.ts

@@ -59,7 +59,7 @@ export const bulkUpdateStandardizedSkills = (
 
         return xhrPutAsync(
             url,
-            pick({ ...skill, ...updates }, 'name', 'description', 'categoryId', 'deleted_at'),
+            pick({ ...skill, ...updates }, 'name', 'description', 'categoryId'),
         ) as Promise<StandardizedSkill>
     })
 

src/libs/ui/lib/components/form/form-groups/form-input/input-checkbox/InputCheckbox.module.scss

@@ -19,6 +19,7 @@
     position: relative;
     line-height: 1;
     vertical-align: middle;
+    z-index: 1;
 
     :global(.rc-checkbox-input) {
         position: absolute;