TSJR-314 - more updates to admin skill

Author: vas3a

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

@@ -6,18 +6,45 @@ import { Button } from '~/libs/ui'
 import { SkillsManagerContextValue, useSkillsManagerContext } from '../../context'
 
 import { ArchiveSkillsModal } from './archive-skills-modal'
+import { MoveSkillsModal } from './move-skills-modal'
 import styles from './BulkEditor.module.scss'
 
 interface BulkEditorProps {
     className?: string
 }
 
 const BulkEditor: FC<BulkEditorProps> = props => {
-    const { bulkEditorCtx: context }: SkillsManagerContextValue = useSkillsManagerContext()
+    const {
+        bulkEditorCtx: context,
+        refetchSkills,
+    }: SkillsManagerContextValue = useSkillsManagerContext()
+
     const [showArchive, setShowArchive] = useState(false)
+    const [showMoveSkills, setShowMoveSkills] = useState(false)
+
+    function openArchiveModal(): void {
+        setShowArchive(true)
+    }
+
+    function openMoveSkillsModal(): void {
+        setShowMoveSkills(true)
+    }
+
+    function closeArchiveModal(archived?: boolean): void {
+        if (archived) {
+            refetchSkills()
+            context.toggleAll()
+        }
 
-    function toggleArchive(): void {
-        setShowArchive(d => !d)
+        setShowArchive(false)
+    }
+
+    function closeMoveSkillsModal(moved?: boolean): void {
+        if (moved) {
+            refetchSkills()
+        }
+
+        setShowMoveSkills(false)
     }
 
     const hasSelection = context.selectedSkills.length > 0
@@ -37,7 +64,7 @@ const BulkEditor: FC<BulkEditorProps> = props => {
                 label='Archive selected'
                 size='lg'
                 disabled={!hasSelection}
-                onClick={toggleArchive}
+                onClick={openArchiveModal}
             />
             <Button
                 primary
@@ -52,10 +79,15 @@ const BulkEditor: FC<BulkEditorProps> = props => {
                 label='Move selected'
                 size='lg'
                 disabled={!hasSelection}
+                onClick={openMoveSkillsModal}
             />
 
             {showArchive && (
-                <ArchiveSkillsModal skills={context.selectedSkills} onClose={toggleArchive} />
+                <ArchiveSkillsModal skills={context.selectedSkills} onClose={closeArchiveModal} />
+            )}
+
+            {showMoveSkills && (
+                <MoveSkillsModal skills={context.selectedSkills} onClose={closeMoveSkillsModal} />
             )}
         </div>
     )

src/apps/admin/src/skills-manager/components/bulk-editor/archive-skills-modal/ArchiveSkillsModal.tsx

@@ -1,21 +1,34 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 
-import { BaseModal, Button } from '~/libs/ui'
+import { BaseModal, Button, LoadingSpinner } from '~/libs/ui'
 
-import { StandardizedSkill } from '../../../services'
 import { SkillsList } from '../../skills-list'
+import { bulkArchiveStandardizedSkills, StandardizedSkill } from '../../../services'
 import { SkillsManagerContextValue, useSkillsManagerContext } from '../../../context'
 
 import styles from './ArchiveSkillsModal.module.scss'
 
 interface ArchiveSkillsModalProps {
     skills: StandardizedSkill[]
-    onClose: () => void
+    onClose: (archived?: boolean) => void
 }
 
 const ArchiveSkillsModal: FC<ArchiveSkillsModalProps> = props => {
+    const [isLoading, setIsLoading] = useState(false)
+
     const { bulkEditorCtx: context }: SkillsManagerContextValue = useSkillsManagerContext()
 
+    async function archiveAll(): Promise<void> {
+        setIsLoading(true)
+        await bulkArchiveStandardizedSkills(props.skills)
+        props.onClose(true)
+        setIsLoading(false)
+    }
+
+    function close(): void {
+        props.onClose()
+    }
+
     return (
         <BaseModal
             onClose={props.onClose}
@@ -25,8 +38,8 @@ const ArchiveSkillsModal: FC<ArchiveSkillsModalProps> = props => {
             bodyClassName={styles.modalBody}
             buttons={(
                 <>
-                    <Button primary light label='Cancel' onClick={props.onClose} />
-                    <Button primary variant='danger' label='Archive' onClick={props.onClose} />
+                    <Button primary light label='Cancel' onClick={close} size='lg' />
+                    <Button primary variant='danger' label='Archive' onClick={archiveAll} size='lg' />
                 </>
             )}
         >
@@ -37,7 +50,7 @@ const ArchiveSkillsModal: FC<ArchiveSkillsModalProps> = props => {
                 isSelected={context.isSkillSelected}
                 editMode={!!context.isEditing}
             />
-            {/* <LoadingSpinner hide={!loading} overlay /> */}
+            <LoadingSpinner hide={!isLoading} overlay />
         </BaseModal>
     )
 }

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

@@ -0,0 +1,14 @@
+@import '@libs/ui/styles/includes';
+
+.modalBody {
+    .skillsList {
+        column-count: 2;
+        margin: -$sp-2;
+    }
+}
+
+.formInput {
+    &Label {
+        margin-bottom: $sp-2;
+    }
+}

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

@@ -0,0 +1,108 @@
+import { ChangeEvent, FC, useMemo, useState } from 'react'
+import { noop } from 'lodash'
+
+import { BaseModal, Button, InputSelectReact, LoadingSpinner } from '~/libs/ui'
+
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../../../context'
+import { bulkUpdateStandardizedSkills, StandardizedSkill } from '../../../services'
+import { mapCategoryToSelectOption } from '../../../lib'
+import { SkillsList } from '../../skills-list'
+
+import styles from './MoveSkillsModal.module.scss'
+
+interface MoveSkillsModalProps {
+    skills: StandardizedSkill[]
+    onClose: (archived?: boolean) => void
+}
+
+const MoveSkillsModal: FC<MoveSkillsModalProps> = props => {
+    const [isLoading, setIsLoading] = useState(false)
+    const [categoryId, setCategoryId] = useState<string>()
+
+    const {
+        bulkEditorCtx: context,
+        categories,
+    }: SkillsManagerContextValue = useSkillsManagerContext()
+
+    const currentCategoryOptions = useMemo(() => (
+        mapCategoryToSelectOption([props.skills[0]?.category].filter(Boolean))
+    ), [props.skills])
+
+    const categoryOptions = useMemo(() => mapCategoryToSelectOption(categories), [categories])
+
+    function handleCategoryChange(ev: ChangeEvent<HTMLInputElement>): void {
+        setCategoryId(ev.target.value)
+    }
+
+    async function moveAll(): Promise<void> {
+        setIsLoading(true)
+        await bulkUpdateStandardizedSkills(props.skills, { categoryId })
+        props.onClose(true)
+        setIsLoading(false)
+    }
+
+    function close(): void {
+        props.onClose()
+    }
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='lg'
+            title='Move These Skills'
+            bodyClassName={styles.modalBody}
+            buttons={(
+                <>
+                    <Button primary light label='Cancel' onClick={close} size='lg' />
+                    <Button
+                        primary
+                        label='Move'
+                        onClick={moveAll}
+                        size='lg'
+                        disabled={!categoryId || categoryId === currentCategoryOptions[0]?.value}
+                    />
+                </>
+            )}
+        >
+            <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>From:</h2>
+                </div>
+                <InputSelectReact
+                    label='Skill Category'
+                    options={currentCategoryOptions}
+                    value={currentCategoryOptions[0]?.value}
+                    name='from'
+                    onChange={noop}
+                    disabled
+                />
+            </div>
+            <div className={styles.formInput}>
+                <div className={styles.formInputLabel}>
+                    <h2>To:</h2>
+                </div>
+                <InputSelectReact
+                    label='Skill Category'
+                    placeholder='Select category'
+                    options={categoryOptions}
+                    value={categoryId}
+                    name='to'
+                    onChange={handleCategoryChange}
+                />
+            </div>
+
+            <LoadingSpinner hide={!isLoading} overlay />
+        </BaseModal>
+    )
+}
+
+export default MoveSkillsModal

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

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

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

@@ -4,4 +4,4 @@ export * from './category-modal'
 export * from './more-actions-menu'
 export * from './page-header'
 export * from './search-input'
-export * from './skill-modal'
+export * from './skill-modals'