TSJR-314 - bulk archive skills

Author: vas3a

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

@@ -0,0 +1,7 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+    > * {
+        margin-left: $sp-4;
+    }
+}

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

@@ -0,0 +1,64 @@
+import { FC, useState } from 'react'
+import classNames from 'classnames'
+
+import { Button } from '~/libs/ui'
+
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../../context'
+
+import { ArchiveSkillsModal } from './archive-skills-modal'
+import styles from './BulkEditor.module.scss'
+
+interface BulkEditorProps {
+    className?: string
+}
+
+const BulkEditor: FC<BulkEditorProps> = props => {
+    const { bulkEditorCtx: context }: SkillsManagerContextValue = useSkillsManagerContext()
+    const [showArchive, setShowArchive] = useState(false)
+
+    function toggleArchive(): void {
+        setShowArchive(d => !d)
+    }
+
+    const hasSelection = context.selectedSkills.length > 0
+
+    return (
+        <div className={classNames(styles.wrap, props.className)}>
+            <Button
+                primary
+                light
+                label='Cancel'
+                size='lg'
+                onClick={function cancel() { context.toggle() }}
+            />
+            <Button
+                secondary
+                variant='danger'
+                label='Archive selected'
+                size='lg'
+                disabled={!hasSelection}
+                onClick={toggleArchive}
+            />
+            <Button
+                primary
+                variant='linkblue'
+                label='Replace selected'
+                size='lg'
+                disabled={!hasSelection}
+            />
+            <Button
+                primary
+                variant='linkblue'
+                label='Move selected'
+                size='lg'
+                disabled={!hasSelection}
+            />
+
+            {showArchive && (
+                <ArchiveSkillsModal skills={context.selectedSkills} onClose={toggleArchive} />
+            )}
+        </div>
+    )
+}
+
+export default BulkEditor

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

@@ -0,0 +1,7 @@
+@import '@libs/ui/styles/includes';
+
+.modalBody {
+    .skillsList {
+        column-count: 2;
+    }
+}

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

@@ -0,0 +1,45 @@
+import { FC } from 'react'
+
+import { BaseModal, Button } from '~/libs/ui'
+
+import { StandardizedSkill } from '../../../services'
+import { SkillsList } from '../../skills-list'
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../../../context'
+
+import styles from './ArchiveSkillsModal.module.scss'
+
+interface ArchiveSkillsModalProps {
+    skills: StandardizedSkill[]
+    onClose: () => void
+}
+
+const ArchiveSkillsModal: FC<ArchiveSkillsModalProps> = props => {
+    const { bulkEditorCtx: context }: SkillsManagerContextValue = useSkillsManagerContext()
+
+    return (
+        <BaseModal
+            onClose={props.onClose}
+            open
+            size='lg'
+            title='Archive Skills'
+            bodyClassName={styles.modalBody}
+            buttons={(
+                <>
+                    <Button primary light label='Cancel' onClick={props.onClose} />
+                    <Button primary variant='danger' label='Archive' onClick={props.onClose} />
+                </>
+            )}
+        >
+            <SkillsList
+                className={styles.skillsList}
+                skills={props.skills}
+                onSelect={context.toggleSkill}
+                isSelected={context.isSkillSelected}
+                editMode={!!context.isEditing}
+            />
+            {/* <LoadingSpinner hide={!loading} overlay /> */}
+        </BaseModal>
+    )
+}
+
+export default ArchiveSkillsModal

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

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

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

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

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

@@ -16,10 +16,7 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
         setEditCategory,
         categories,
         groupedSkills,
-        isBulkEditing,
-        toggleEditMode,
-        toggleEditSkill,
-        isSkillSelected,
+        bulkEditorCtx,
     }: SkillsManagerContextValue = useSkillsManagerContext()
 
     function handleMenuActions(action: string, category: StandardizedSkillCategory): void {
@@ -28,7 +25,7 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
                 setEditCategory(category)
                 break
             case MENU_ACTIONS.bulkEditSkills.action:
-                toggleEditMode(category)
+                bulkEditorCtx.toggle(category)
                 break
             default: break
         }
@@ -42,17 +39,17 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
                 key={category.id}
                 label={category.name}
                 badgeCount={categorySkills.length}
-                open={props.defaultOpen || !!isBulkEditing}
+                open={props.defaultOpen || !!bulkEditorCtx.isEditing}
                 menuActions={CATEGORY_ITEM_ACTIONS}
                 onMenuAction={function handle(action: string) { handleMenuActions(action, category) }}
             >
                 {() => (
                     <SkillsList
                         skills={categorySkills}
                         key={`cat-${category.id}-list`}
-                        onSelect={toggleEditSkill}
-                        isSelected={isSkillSelected}
-                        editMode={!!isBulkEditing}
+                        onSelect={bulkEditorCtx.toggleSkill}
+                        isSelected={bulkEditorCtx.isSkillSelected}
+                        editMode={!!bulkEditorCtx.isEditing}
                     />
                 )}
             </AccordionItem>
@@ -61,8 +58,8 @@ const CategoriesAccordion: FC<CategoriesAccordionProps> = props => {
 
     return (
         <Accordion defaultOpen={props.defaultOpen}>
-            {isBulkEditing ? (
-                renderCategoryAccordion(isBulkEditing)
+            {!!bulkEditorCtx.isEditing ? (
+                renderCategoryAccordion(bulkEditorCtx.isEditing)
             ) : (
                 categories.map(renderCategoryAccordion)
             )}

src/apps/admin/src/skills-manager/components/more-actions-menu/MoreActionsMenu.module.scss

@@ -9,7 +9,7 @@
     &::before {
         content: '';
         display: block;
-        height: calc(100% - 48px);
+        height: 100%;
     }
 }
 

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 '../../context'
+import { SkillsManagerContextValue, useSkillsManagerContext } from '../../context/skills-manager.context'
 
 import styles from './MoreActionsMenu.module.scss'
 

src/apps/admin/src/skills-manager/components/page-header/PageHeader.module.scss

@@ -7,4 +7,9 @@
 .inner {
     display: flex;
     align-items: center;
+    gap: $sp-8;
+
+    h1 {
+        line-height: $sp-10;
+    }
 }