TSJR-314 - Add bulk replace skills

Author: vas3a

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

@@ -7,6 +7,7 @@ import { SkillsManagerContextValue, useSkillsManagerContext } from '../../contex
 
 import { ArchiveSkillsModal } from './archive-skills-modal'
 import { MoveSkillsModal } from './move-skills-modal'
+import { ReplaceSkillsModal } from './replace-skills-modal'
 import styles from './BulkEditor.module.scss'
 
 interface BulkEditorProps {
@@ -17,9 +18,11 @@ const BulkEditor: FC<BulkEditorProps> = props => {
     const {
         bulkEditorCtx: context,
         refetchSkills,
+        skillsList,
     }: SkillsManagerContextValue = useSkillsManagerContext()
 
     const [showArchive, setShowArchive] = useState(false)
+    const [showReplaceSkills, setShowReplaceSkills] = useState(false)
     const [showMoveSkills, setShowMoveSkills] = useState(false)
 
     function openArchiveModal(): void {
@@ -30,8 +33,12 @@ const BulkEditor: FC<BulkEditorProps> = props => {
         setShowMoveSkills(true)
     }
 
+    function openReplaceSkillsModal(): void {
+        setShowReplaceSkills(true)
+    }
+
     function closeArchiveModal(archived?: boolean): void {
-        if (archived) {
+        if (archived === true) {
             refetchSkills()
             context.toggleAll()
         }
@@ -40,14 +47,23 @@ const BulkEditor: FC<BulkEditorProps> = props => {
     }
 
     function closeMoveSkillsModal(moved?: boolean): void {
-        if (moved) {
+        if (moved === true) {
             refetchSkills()
             context.toggleAll()
         }
 
         setShowMoveSkills(false)
     }
 
+    function closeReplaceSkillsModal(replaced?: boolean): void {
+        if (replaced === true) {
+            refetchSkills()
+            context.toggleAll()
+        }
+
+        setShowReplaceSkills(false)
+    }
+
     const hasSelection = context.selectedSkills.length > 0
 
     return (
@@ -69,14 +85,13 @@ const BulkEditor: FC<BulkEditorProps> = props => {
             />
             <Button
                 primary
-                variant='linkblue'
                 label='Replace selected'
                 size='lg'
                 disabled={!hasSelection}
+                onClick={openReplaceSkillsModal}
             />
             <Button
                 primary
-                variant='linkblue'
                 label='Move selected'
                 size='lg'
                 disabled={!hasSelection}
@@ -87,6 +102,14 @@ const BulkEditor: FC<BulkEditorProps> = props => {
                 <ArchiveSkillsModal skills={context.selectedSkills} onClose={closeArchiveModal} />
             )}
 
+            {showReplaceSkills && (
+                <ReplaceSkillsModal
+                    allSkills={skillsList}
+                    skills={context.selectedSkills}
+                    onClose={closeReplaceSkillsModal}
+                />
+            )}
+
             {showMoveSkills && (
                 <MoveSkillsModal skills={context.selectedSkills} onClose={closeMoveSkillsModal} />
             )}

src/apps/admin/src/skills-manager/components/bulk-editor/replace-skills-modal/ReplaceSkillsModal.module.scss

@@ -0,0 +1,18 @@
+@import '@libs/ui/styles/includes';
+
+.modalBody {
+    .skillsList {
+        column-count: 2;
+        margin: -$sp-2;
+        margin-bottom: $sp-3;
+    }
+}
+
+.formInput {
+    &Label {
+        display: flex;
+        align-items: center;
+        gap: $sp-6;
+        margin-bottom: $sp-2;
+    }
+}

src/apps/admin/src/skills-manager/components/bulk-editor/replace-skills-modal/ReplaceSkillsModal.tsx

@@ -0,0 +1,122 @@
+import { ChangeEvent, FC, useState } from 'react'
+import { find } from 'lodash'
+
+import { BaseModal, Button, InputRadio, LoadingSpinner } from '~/libs/ui'
+
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../../../context'
+import { StandardizedSkill } from '../../../services'
+import { SkillsList } from '../../skills-list'
+import { SearchSkillInput } from '../search-skill-input'
+import { SkillForm } from '../../skill-modals'
+
+import styles from './ReplaceSkillsModal.module.scss'
+
+interface ReplaceSkillsModalProps {
+    allSkills: StandardizedSkill[]
+    skills: StandardizedSkill[]
+    onClose: (archived?: boolean) => void
+}
+
+const ReplaceSkillsModal: FC<ReplaceSkillsModalProps> = props => {
+    const [isLoading, setIsLoading] = useState(false)
+    const [type, setType] = useState<'existing'|'new'>('existing')
+    const [replacingSkill, setReplacingSkill] = useState<StandardizedSkill>()
+
+    const {
+        bulkEditorCtx: context,
+    }: SkillsManagerContextValue = useSkillsManagerContext()
+
+    async function replaceAll(): Promise<void> {
+        setIsLoading(true)
+        // TODO: call api to replace skills
+        props.onClose(true)
+        setIsLoading(false)
+    }
+
+    function close(): void {
+        props.onClose()
+    }
+
+    function handleSkillSelect(event: ChangeEvent<HTMLInputElement>): void {
+        setReplacingSkill(find(props.allSkills, { id: event.target.value }))
+    }
+
+    function handleNewForm(skillData: Partial<StandardizedSkill>, dataIsValid: boolean):void {
+        setReplacingSkill(dataIsValid ? skillData as StandardizedSkill : undefined)
+    }
+
+    function toggleType(t: 'existing'|'new'): void {
+        setReplacingSkill(undefined)
+        setType(t)
+    }
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='lg'
+            title='Replace These Skills'
+            bodyClassName={styles.modalBody}
+            buttons={(
+                <>
+                    <Button primary light label='Cancel' onClick={close} size='lg' />
+                    <Button
+                        primary
+                        label='Replace'
+                        onClick={replaceAll}
+                        size='lg'
+                        disabled={!replacingSkill}
+                    />
+                </>
+            )}
+        >
+            <SkillsList
+                className={styles.skillsList}
+                skills={props.skills}
+                onSelect={context.toggleSkill}
+                isSelected={context.isSkillSelected}
+                editMode={!!context.isEditing}
+            />
+
+            <div className={styles.formInput}>
+                <div className={styles.formInputLabel}>
+                    <h2>With:</h2>
+                    <InputRadio
+                        label='Existing Skill'
+                        name='replace-with'
+                        id='replace-with-existing'
+                        value='existing'
+                        checked={type === 'existing'}
+                        onChange={function t() { toggleType('existing') }}
+                    />
+                    <InputRadio
+                        label='New Skill'
+                        name='replace-with'
+                        id='replace-with-new'
+                        value='new'
+                        checked={type === 'new'}
+                        onChange={function t() { toggleType('new') }}
+                    />
+                </div>
+                {type === 'existing' && (
+                    <SearchSkillInput
+                        skills={props.allSkills}
+                        onChange={handleSkillSelect}
+                    />
+                )}
+                {type === 'new' && (
+                    <SkillForm
+                        onChange={handleNewForm}
+                        onLoading={setIsLoading as (l?: boolean) => void}
+                        hideCancelBtn
+                        hideSaveBtn
+                    />
+                )}
+            </div>
+
+            <LoadingSpinner hide={!isLoading} overlay />
+        </BaseModal>
+    )
+}
+
+export default ReplaceSkillsModal

src/apps/admin/src/skills-manager/components/bulk-editor/replace-skills-modal/index.ts

@@ -0,0 +1 @@
+export { default as ReplaceSkillsModal } from './ReplaceSkillsModal'

src/apps/admin/src/skills-manager/components/bulk-editor/search-skill-input/SearchSkillInput.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent, FC, useMemo } from 'react'
+import { escapeRegExp } from 'lodash'
+import { FilterOptionOption } from 'react-select/dist/declarations/src/filters'
+
+import { InputSelectReact } from '~/libs/ui'
+
+import { mapSkillToSelectOption } from '../../../lib'
+import { StandardizedSkill } from '../../../services'
+
+interface SearchSkillInputProps {
+    skills: StandardizedSkill[]
+    onChange: (event: ChangeEvent<HTMLInputElement>) => void
+}
+
+const normalize = (s: string): string => (s || '')
+    .trim()
+    .toLowerCase()
+
+const SearchSkillInput: FC<SearchSkillInputProps> = props => {
+    const skillsOptionsList = useMemo(() => (
+        mapSkillToSelectOption(props.skills)
+    ), [props.skills])
+
+    function filterOptions(o: FilterOptionOption<any>, v: string): boolean {
+        const normValue = normalize(v)
+        const normLabel = normalize(o.label)
+
+        if (v.length < 3 && normValue !== normLabel) {
+            return false
+        }
+
+        const m = new RegExp(escapeRegExp(normValue), 'i')
+        return !!normLabel.match(m)
+    }
+
+    return (
+        <InputSelectReact
+            placeholder='Search skills'
+            options={skillsOptionsList}
+            name='select-skill'
+            onChange={props.onChange}
+            openMenuOnClick={false}
+            openMenuOnFocus={false}
+            filterOption={filterOptions}
+        />
+    )
+}
+
+export default SearchSkillInput

src/apps/admin/src/skills-manager/components/bulk-editor/search-skill-input/index.ts

@@ -0,0 +1 @@
+export { default as SearchSkillInput } from './SearchSkillInput'

src/apps/admin/src/skills-manager/components/skill-modals/SkillModal.tsx

@@ -10,6 +10,7 @@ import {
     BaseModal,
     Button,
     LoadingSpinner,
+    useConfirmationModal,
 } from '~/libs/ui'
 
 import {
@@ -33,6 +34,8 @@ const SkillModal: FC<SkillModalProps> = props => {
         setEditSkill,
     }: SkillsManagerContextValue = useSkillsManagerContext()
 
+    const confirmModal = useConfirmationModal()
+
     const [isLoading, setIsLoading] = useState(false)
     const isArchived = useMemo(() => isSkillArchived(props.skill), [props.skill])
 
@@ -62,8 +65,16 @@ const SkillModal: FC<SkillModalProps> = props => {
     }, [setEditSkill])
 
     const archiveSkill = useCallback(async (): Promise<void> => {
-        setIsLoading(true)
+        const confirmed = await confirmModal.confirm({
+            content: 'Are you sure you want to archive this skill?',
+            title: 'Confirm Archive',
+        })
+
+        if (!confirmed) {
+            return undefined
+        }
 
+        setIsLoading(true)
         return archiveStandardizedSkill(props.skill)
             .then(() => {
                 refetchSkills()
@@ -74,7 +85,7 @@ const SkillModal: FC<SkillModalProps> = props => {
                 setIsLoading(false)
                 return Promise.reject(e)
             })
-    }, [setEditSkill, props.skill, refetchSkills])
+    }, [confirmModal, props.skill, refetchSkills, setEditSkill])
 
     const restoreSkill = useCallback(async (): Promise<void> => {
         setIsLoading(true)
@@ -137,6 +148,7 @@ const SkillModal: FC<SkillModalProps> = props => {
                 primaryButtons={renderSaveAndAddBtn}
             />
             <LoadingSpinner hide={!isLoading} overlay />
+            {confirmModal.modal}
         </BaseModal>
     )
 }

src/apps/admin/src/skills-manager/components/skill-modals/index.ts

@@ -1 +1,2 @@
 export { default as SkillModal } from './SkillModal'
+export * from './skill-form'