TSJR-314 - work for bulk edit

vas3a · vas3a · commit aa29a0268c44 · 2023-11-28T09:45:14.000+02:00
diff --git a/src/apps/admin/src/skills-manager/SkillsManager.tsx b/src/apps/admin/src/skills-manager/SkillsManager.tsx
@@ -4,7 +4,7 @@ import { Outlet, Routes } from 'react-router-dom'
 import { routerContext, RouterContextData } from '~/libs/core'
 
 import { skillsManagerRoutes } from './skills-manager.routes'
-import { SkillsManagerContext } from './skills-manager.context'
+import { SkillsManagerContext } from './context'
 
 const SkillsManager: FC<{}> = () => {
     const { getRouteElement }: RouterContextData = useContext(routerContext)
diff --git a/src/apps/admin/src/skills-manager/components/actions-menu/ActionsMenu.module.scss b/src/apps/admin/src/skills-manager/components/actions-menu/ActionsMenu.module.scss
@@ -9,6 +9,10 @@
 
     padding: $sp-1;
     margin: -$sp-1;
+
+    + * {
+        z-index: 9;
+    }
 }
 
 .menu {
diff --git a/src/apps/admin/src/skills-manager/components/categories-accordion/CategoriesAccordion.tsx b/src/apps/admin/src/skills-manager/components/categories-accordion/CategoriesAccordion.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 
 import { Accordion, AccordionItem } from '../accordion'
 import { SkillsList } from '../skills-list'
-import { SkillsManagerContextValue, useSkillsManagerContext } from '../../skills-manager.context'
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../../context'
 import { StandardizedSkillCategory } from '../../services'
 import { CATEGORY_ITEM_ACTIONS, MENU_ACTIONS } from '../../config'
 
@@ -16,13 +16,20 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
         setEditCategory,
         categories,
         groupedSkills,
+        isBulkEditing,
+        toggleEditMode,
+        toggleEditSkill,
+        isSkillSelected,
     }: SkillsManagerContextValue = useSkillsManagerContext()
 
     function handleMenuActions(action: string, category: StandardizedSkillCategory): void {
         switch (action) {
             case MENU_ACTIONS.editCategory.action:
                 setEditCategory(category)
                 break
+            case MENU_ACTIONS.bulkEditSkills.action:
+                toggleEditMode(category)
+                break
             default: break
         }
     }
@@ -35,20 +42,30 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
                 key={category.id}
                 label={category.name}
                 badgeCount={categorySkills.length}
-                open={props.defaultOpen}
+                open={props.defaultOpen || !!isBulkEditing}
                 menuActions={CATEGORY_ITEM_ACTIONS}
                 onMenuAction={function handle(action: string) { handleMenuActions(action, category) }}
             >
                 {() => (
-                    <SkillsList skills={categorySkills} key={`cat-${category.id}-list`} />
+                    <SkillsList
+                        skills={categorySkills}
+                        key={`cat-${category.id}-list`}
+                        onSelect={toggleEditSkill}
+                        isSelected={isSkillSelected}
+                        editMode={!!isBulkEditing}
+                    />
                 )}
             </AccordionItem>
         ) : <></>
     }
 
     return (
         <Accordion defaultOpen={props.defaultOpen}>
-            {categories.map(renderCategoryAccordion)}
+            {isBulkEditing ? (
+                renderCategoryAccordion(isBulkEditing)
+            ) : (
+                categories.map(renderCategoryAccordion)
+            )}
         </Accordion>
     )
 }
diff --git a/src/apps/admin/src/skills-manager/components/more-actions-menu/MoreActionsMenu.module.scss b/src/apps/admin/src/skills-manager/components/more-actions-menu/MoreActionsMenu.module.scss
@@ -5,6 +5,7 @@
     top: 0;
     right: 0;
     height: 100%;
+    width: 0;
     &::before {
         content: '';
         display: block;
@@ -17,3 +18,14 @@
     right: 0;
     bottom: $sp-4;
 }
+
+.triggerBtn.triggerBtn {
+    padding-left: $sp-4;
+    padding-right: $sp-4;
+}
+
+.menu {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+}
diff --git a/src/apps/admin/src/skills-manager/components/more-actions-menu/MoreActionsMenu.tsx b/src/apps/admin/src/skills-manager/components/more-actions-menu/MoreActionsMenu.tsx
@@ -5,7 +5,7 @@ import { Button, IconOutline } from '~/libs/ui'
 import { GLOBAL_ACTIONS, MENU_ACTIONS } from '../../config'
 import { ActionsMenu } from '../actions-menu'
 import { StandardizedSkill, StandardizedSkillCategory } from '../../services'
-import { SkillsManagerContextValue, useSkillsManagerContext } from '../../skills-manager.context'
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../../context'
 
 import styles from './MoreActionsMenu.module.scss'
 
@@ -39,8 +39,9 @@ const MoreActionsMenu: FC<{}> = () => {
                 >
                     <Button
                         primary
-                        color='blue'
+                        variant='linkblue'
                         size='xl'
+                        className={styles.triggerBtn}
                     >
                         <IconOutline.PlusIcon className='icon-xxl' />
                     </Button>
diff --git a/src/apps/admin/src/skills-manager/components/skills-list/SkillsList.module.scss b/src/apps/admin/src/skills-manager/components/skills-list/SkillsList.module.scss
@@ -11,4 +11,11 @@
 
 .skillItem {
     padding: $sp-2 $sp-2;
+    display: flex;
+    align-items: center;
+    gap: $sp-2;
+
+    .isEditMode & {
+        cursor: pointer;
+    }
 }
diff --git a/src/apps/admin/src/skills-manager/components/skills-list/SkillsList.tsx b/src/apps/admin/src/skills-manager/components/skills-list/SkillsList.tsx
@@ -1,25 +1,48 @@
 import { FC } from 'react'
+import CheckBox from 'rc-checkbox'
+import classNames from 'classnames'
 
 import { StandardizedSkill } from '../../services'
 
 import styles from './SkillsList.module.scss'
 
 interface SkillsListProps {
     skills: StandardizedSkill[]
+    editMode?: boolean
+    onSelect: (skill: StandardizedSkill) => void
+    isSelected: (skill: StandardizedSkill) => boolean
 }
 
-const SkillsList: FC<SkillsListProps> = props => (
-    <div className={styles.wrap}>
-        <ul className={styles.listWrap}>
-            {props.skills.map(skill => (
-                <li className={styles.skillItem} key={skill.id}>
-                    <div className='body-main'>
-                        {skill.name}
-                    </div>
-                </li>
-            ))}
-        </ul>
-    </div>
-)
+const SkillsList: FC<SkillsListProps> = props => {
+    function handleToggle(skill: StandardizedSkill): void {
+        if (!props.editMode) {
+            return
+        }
+
+        props.onSelect(skill)
+    }
+
+    return (
+        <div className={classNames(styles.wrap, props.editMode && styles.isEditMode)}>
+            <ul className={styles.listWrap}>
+                {props.skills.map(skill => (
+                    <li className={styles.skillItem} key={skill.id}>
+                        {props.editMode && (
+                            <div className={styles.checkbox}>
+                                <CheckBox
+                                    checked={props.isSelected(skill)}
+                                    onChange={function toggl() { handleToggle(skill) }}
+                                />
+                            </div>
+                        )}
+                        <div className='body-main' onClick={function toggl() { handleToggle(skill) }}>
+                            {skill.name}
+                        </div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
 
 export default SkillsList
diff --git a/src/apps/admin/src/skills-manager/config/constants.ts b/src/apps/admin/src/skills-manager/config/constants.ts
@@ -34,5 +34,5 @@ export const MENU_ACTIONS = {
 
 export const CATEGORY_ITEM_ACTIONS: ActionsMenuItem[] = [
     EDIT_CATEGORY_ACTION,
-    // BULK_EDIT_SKILLS_ACTION,
+    BULK_EDIT_SKILLS_ACTION,
 ]
diff --git a/src/apps/admin/src/skills-manager/context/index.ts b/src/apps/admin/src/skills-manager/context/index.ts
@@ -0,0 +1 @@
+export * from './skills-manager.context'
diff --git a/src/apps/admin/src/skills-manager/context/skills-manager.context.tsx b/src/apps/admin/src/skills-manager/context/skills-manager.context.tsx
@@ -1,11 +1,13 @@
 import { createContext, FC, ReactNode, useContext, useMemo, useState } from 'react'
-import { noop, orderBy } from 'lodash'
+import { orderBy } from 'lodash'
 import { SWRResponse } from 'swr'
 
-import { StandardizedSkill, StandardizedSkillCategory, useFetchCategories, useFetchSkills } from './services'
-import { findSkillsMatches, GroupedSkills, groupSkillsByCategory } from './lib'
+import { StandardizedSkill, StandardizedSkillCategory, useFetchCategories, useFetchSkills } from '../services'
+import { findSkillsMatches, GroupedSkills, groupSkillsByCategory } from '../lib'
 
-export interface SkillsManagerContextValue {
+import { SkillsBulkEditorValue, useSkillsBulkEditor } from './use-skills-bulk-editor'
+
+export interface SkillsManagerContextValue extends SkillsBulkEditorValue {
     categories: StandardizedSkillCategory[]
     skillsFilter: string
     setSkillsFilter: (filter: string) => void
@@ -20,18 +22,7 @@ export interface SkillsManagerContextValue {
 }
 
 const SkillsManagerRC = createContext<SkillsManagerContextValue>({
-    categories: [],
-    editCategory: undefined,
-    editSkill: undefined,
-    groupedSkills: {},
-    refetchCategories: noop,
-    refetchSkills: noop,
-    setEditCategory: noop,
-    setEditSkill: noop,
-    setSkillsFilter: noop,
-    skillsFilter: '',
-    skillsList: [],
-})
+} as SkillsManagerContextValue)
 
 interface SkillsManagerContextProps {
     children?: ReactNode
@@ -46,6 +37,7 @@ export const SkillsManagerContext: FC<SkillsManagerContextProps> = props => {
         data: allSkills,
         mutate: refetchSkills,
     }: SWRResponse<StandardizedSkill[]> = useFetchSkills()
+
     const {
         data: allCategories,
         mutate: refetchCategories,
@@ -54,7 +46,10 @@ export const SkillsManagerContext: FC<SkillsManagerContextProps> = props => {
     const skills = useMemo(() => findSkillsMatches(allSkills ?? [], skillsFilter), [allSkills, skillsFilter])
     const groupedSkills = useMemo(() => groupSkillsByCategory(skills), [skills])
 
+    const skillsBulkEditor = useSkillsBulkEditor(skills)
+
     const contextValue = useMemo(() => ({
+        ...skillsBulkEditor,
         categories: orderBy(allCategories ?? [], 'name', 'asc'),
         editCategory,
         editSkill,
@@ -67,6 +62,7 @@ export const SkillsManagerContext: FC<SkillsManagerContextProps> = props => {
         skillsFilter,
         skillsList: skills,
     }), [
+        skillsBulkEditor,
         allCategories,
         editCategory,
         editSkill,
diff --git a/src/apps/admin/src/skills-manager/context/use-skills-bulk-editor.tsx b/src/apps/admin/src/skills-manager/context/use-skills-bulk-editor.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useState } from 'react'
+import { isEmpty } from 'lodash'
+
+import { GenericDataObject } from '~/libs/shared'
+
+import { StandardizedSkill, StandardizedSkillCategory } from '../services'
+
+type SelectedSkillsKeyMap = GenericDataObject<StandardizedSkill | undefined>
+
+export interface SkillsBulkEditorValue {
+    isBulkEditing: StandardizedSkillCategory | undefined
+    isSkillSelected: (skill: StandardizedSkill) => boolean
+    selectAll: () => void
+    toggleAll: () => void
+    toggleEditMode: (category: StandardizedSkillCategory) => void
+    toggleEditSkill: (skill: StandardizedSkill) => void
+}
+
+export const useSkillsBulkEditor = (skills: StandardizedSkill[]): SkillsBulkEditorValue => {
+    const [isBulkEditing, setIsBulkEditing] = useState<StandardizedSkillCategory>()
+    const [selectedSkills, setSelectedSkills] = useState({} as SelectedSkillsKeyMap)
+
+    function toggleEditMode(category?: StandardizedSkillCategory): void {
+        setIsBulkEditing(d => (d?.id === category?.id ? undefined : category))
+    }
+
+    function isSkillSelected(skill: StandardizedSkill): boolean {
+        return !!selectedSkills[skill.id]
+    }
+
+    function toggleEditSkill(skill: StandardizedSkill): void {
+        setSelectedSkills(prevSkills => ({
+            ...prevSkills,
+            [skill.id]: prevSkills[skill.id] ? undefined : skill,
+        }))
+    }
+
+    function selectAll(): void {
+        const skillsById = skills.reduce((all, skill) => {
+            all[skill.id] = skill
+            return all
+        }, {} as SelectedSkillsKeyMap)
+        setSelectedSkills(skillsById)
+    }
+
+    function toggleAll(): void {
+        if (isEmpty(selectedSkills)) {
+            selectAll()
+            return
+        }
+
+        setSelectedSkills({} as SelectedSkillsKeyMap)
+    }
+
+    useEffect(() => {
+        setSelectedSkills({} as SelectedSkillsKeyMap)
+    }, [isBulkEditing])
+
+    return {
+        isBulkEditing,
+        isSkillSelected,
+        selectAll,
+        toggleAll,
+        toggleEditMode,
+        toggleEditSkill,
+    }
+}
diff --git a/src/apps/admin/src/skills-manager/context/use-skills.context.tsx b/src/apps/admin/src/skills-manager/context/use-skills.context.tsx
@@ -0,0 +1,14 @@
+import { SWRResponse } from 'swr'
+
+import { StandardizedSkill, useFetchSkills } from '../services'
+
+interface SkillsContextValue {
+
+}
+
+export const useSkillsContext = (): void => {
+    const {
+        data: allSkills,
+        mutate: refetchSkills,
+    }: SWRResponse<StandardizedSkill[]> = useFetchSkills()
+}
diff --git a/src/apps/admin/src/skills-manager/landing-page/LandingPage.tsx b/src/apps/admin/src/skills-manager/landing-page/LandingPage.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 
 import { ContentLayout, PageTitle } from '~/libs/ui'
 
-import { SkillsManagerContextValue, useSkillsManagerContext } from '../skills-manager.context'
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../context'
 import {
     CategoriesAccordion,
     CategoryModal,
diff --git a/src/libs/shared/lib/utils/generic-data-object.type.ts b/src/libs/shared/lib/utils/generic-data-object.type.ts
@@ -1 +1 @@
-export type GenericDataObject = { [key: string]: string | GenericDataObject }
+export type GenericDataObject<T = string> = { [key: string]: GenericDataObject | T }

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,10 @@`
`9`	`9`
`10`	`10`	`padding: $sp-1;`
`11`	`11`	`margin: -$sp-1;`
	`12`	`+`
	`13`	`+ + * {`
	`14`	`+ z-index: 9;`
	`15`	`+ }`
`12`	`16`	`}`
`13`	`17`
`14`	`18`	`.menu {`
Original file line number	Diff line number	Diff line change
`@@ -34,5 +34,5 @@ export const MENU_ACTIONS = {`
`34`	`34`
`35`	`35`	`export const CATEGORY_ITEM_ACTIONS: ActionsMenuItem[] = [`
`36`	`36`	`EDIT_CATEGORY_ACTION,`
`37`		`- // BULK_EDIT_SKILLS_ACTION,`
	`37`	`+ BULK_EDIT_SKILLS_ACTION,`
`38`	`38`	`]`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export * from './skills-manager.context'`