Add Competency Framework UI and Assessor View#271
Merged
sei-tspencer merged 110 commits intomainfrom May 7, 2026
Merged
Conversation
- Add Administration menu item to topbar user dropdown - Only visible to users with admin permissions - Navigates to /admin route when clicked - Appears above Logout option
- Add data-option-import-dialog component for importing competencies from JSON files - Supports NICE Framework v1.0.0, v2.0.0, and generic JSON formats - Parses task elements and allows selective import - Handles duplicate detection and display order assignment - Add data-option-list-dialog component for managing large option lists - Search/filter functionality for lists with 1000+ options - Edit, delete, add, and import actions - Fixed-height dialog prevents jumping during filtering - Update data-field-edit-dialog component - Replace inline option display with "Manage Options" button - Improve layout: align checkboxes and option count on same row - Only show add/import buttons for data types that support option lists - Permission checks: verify data type supports lists before allowing edits - Update data-field-list component - Display option count instead of full comma-separated list - Make option count clickable to open manage dialog - Permission-aware: delegate to edit dialog for add/import operations
- Move search field from above table into table header column - admin-groups: search now in "Name" column header - admin-units: search now in "Name" column header (removed separate search bar) - data-field-list: search now in "Options" column header - Add consistent flexbox alignment for search elements - Search field, label, and clear button properly aligned - Responsive width constraints (100px-400px) - Clean up orphaned CSS from previous layout - Remove unused .move-container, .search-field, .sp-icon classes
The option count in the data field list now displays as a clickable link with primary color and underline when options are present.
# Conflicts: # src/app/components/data-field-edit-dialog/data-field-edit-dialog.component.html
# Conflicts: # src/app/components/admin/admin-groups/admin-groups.component.html # src/app/components/admin/admin-groups/admin-groups.component.scss # src/app/components/shared/top-bar/topbar.component.html # src/app/components/shared/top-bar/topbar.component.ts
Remove duplicate minWidth property that was causing TypeScript compilation error TS1117.
Resolved conflicts by adopting mat-table layout from main for admin-units and data-field-list components, maintaining consistency with the new table-based UI pattern.
- Show clickable options link inline on data field edit dialog - Convert manage options table to mat-table for consistency - Move add/import buttons above table - Add title to edit option dialog - Align field labels (ID, Description) across table and edit dialog
Competency data fields get their own manage dialog with search, mat-table, add/edit/delete, and NICE Framework JSON import. String and other types use the existing manage options dialog via a clickable options link instead of inline editing.
Add, edit, and delete now work inline from the manage options dialog instead of redirecting to the data field edit dialog.
- Add generic import supporting JSON, CSV, and XLSX file formats - Add NICE Framework format detection (skip sort/opm_code elements, use title as fallback) - Competency dialog now uses shared import dialog with competency-specific instructions - Add sortable columns to manage options and manage competencies tables - Fix import callback on data field list page to open import dialog correctly - Add xlsx dependency for spreadsheet parsing
- Add admin page for managing competency frameworks, proficiency scales, levels, and competency elements - Dialog-based add/edit for all entities (matching inject-type-edit pattern) - Sortable columns, pagination, and search on elements sub-table - Add sidebar entry under Competencies (above Users) - Add generated API services for framework, scale, level, element CRUD - Add optionDescription field to data options for competency imports - Update competency options dialog with Name/Description columns
- Merged Manage Competencies and Import From Framework into single dialog with checkbox-based element selection from stored frameworks - Added Competency handler in data-value component with chips, search, and checkbox list for multi-select during event editing - Multi-value fields (competency, teams, custom multi-select) display one per line in scenario event list view - Competency fields auto-default to option list + multi-select + facilitation with save disabled until competencies are configured - Framework import dialog opens as dialog instead of inline file picker - Always-clickable options column for Competency fields showing count or Manage - Removed unused CompetencyFrameworkSelectDialogComponent
- Parse DCWF Work Role Tool XLSX (work roles, tasks, KSAs from Master sheet) - Infer knowledge/skill/ability types from KSA description prefix - Prefix work role identifiers with WRL- to avoid collisions - Use "identifier - description" format for element names - Fix JSON import name falling back to text when title is empty/N/A - Add element type filter dropdown to admin framework elements panel - Add description column to elements table - Widen expansion panels to full width for consistent layout
Use scrollable list with fixed bottom-div for versions/logo instead of absolute positioning that overlapped the nav items.
…editing - Add/edit/delete competencies within imported frameworks - Autocomplete search for adding related competencies in edit dialog - Fix type detection across all formats (NICE 2017/1.0.0/2.1.0, Moodle CSV, DCWF XLSX) - Fix XLSX parser: deduplicate IdNumbers and relationships - Regenerate API client for new competency endpoints
Adds search field, paginator, and multiTemplateDataRows expand pattern to match other admin pages. Levels sub-table now expands inline with animation. Description and levels columns are sortable.
Split expanded view into Work Roles and Competencies panels. Add expandable rows with related/children detail to both sub-tables. Add Category column to work roles, type dropdown to edit dialog with ID prefix auto-fill, and fix detail row spacing. Rename topbar label to Competency Frameworks.
Add generated MselCompetency service and model, Akita store/query/ data-service for MselCompetency, and LMT metadata fields to Msel model and MselPlus class.
Add dropdowns for Educational Level, Educational Use, Course Mode and text inputs for Subject, Keywords, Language. Simplify competency display to count with edit button.
New MselCompetenciesComponent with table showing MSEL competency pool. Columns for ID, Name, Description with search, pagination, and remove action. Adds tab to MSEL builder sidebar between CITE Duties and Scenario Events.
- Move MSEL viewed xAPI call from API service to msel-view component - Move join page viewed xAPI call from API service to join component - Only log xAPI on explicit page views, not when loading data on build/dashboard - Fix assessor page checkbox filter to show Checked/Unchecked options - Handle empty checkbox values as false in filter logic
Features: - Framework filter in competency picker dialog - Team filter scoped to competency assignments - Simplified competency display (ID only with tooltip showing name) - Inline comma-separated display with individual tooltips - No word wrap on competency ID dashes - Team selection required for competency assertions - Submit All button disabled when no submittable ratings
- Merged package.json and package-lock.json from main - Combined assessor column with default and devs columns in data-field-list - Improved column tooltips and sort functionality - Fixed column width and layout issues
- Moved display order number to left of action buttons - Moved Assess column between View and Info columns - Improved column layout consistency
Admin page now checks if framework is in use before allowing delete. Shows error dialog listing affected MSELs if framework has dependencies. - checkCanDeleteCompetencyFramework service method - FrameworkDeleteCheck and MselReference TypeScript interfaces - Updated deleteCompetencyFramework to check dependencies first - Error dialog shows up to 10 affected MSELs by name
…n use Instead of showing error dialog after clicking delete, now: - Checks all frameworks when admin page loads - Disables delete button for frameworks in use - Tooltip shows which MSELs are using the framework (up to 3 names) Better UX - user sees immediately which frameworks can't be deleted.
Each framework now has a download button in the action column that exports as JSON. Filename format: {name}-{version}.json with spaces/special chars replaced by underscores.
API returns camelCase (canDelete, affectedMsels) but TypeScript interfaces were PascalCase. Fixed to match API serialization.
Added action-div flex layout and increased column width to 150px to fit all three buttons.
Now includes version field in poolFrameworks array so dropdown shows 'Framework Name (Version)' instead of empty parentheses.
…ort UX - Remove XLSX.js dependency from client for security - Call server-side preview APIs for all import formats (CSV, JSON, XLSX) - Show preview with element counts and relationships before import - Add processing spinner during file upload and import - Add auto-save for data fields before import (no need to manually save first) - Show green success banner after import with Close button instead of auto-closing - Update import dialog to stay open on success with visible success message - Remove all client-side parsing logic (parseJson, parseCsv, parseXlsx methods) - Regenerate API client with new preview endpoints
- Increase checkbox column width from 48px to 60px - Add padding to checkbox cells for better spacing - Increase child checkbox width from 32px to 40px with less density - Adjust expanded children padding to align with wider checkbox column - Remove horizontal scrollbar (overflow-x: hidden) on table containers
Added header checkbox to Add Competencies work role browser with same pattern as MSEL Competencies pool. Allows bulk selection/removal of all visible work roles based on current filters.
- Replace $(pwd) with $INIT_CWD using cross-env-shell - Add cross-env 10.1.0 dependency
Changed host height to 100% and moved padding to section-panel margins to eliminate duplicate vertical scrollbar.
sei-tspencer
approved these changes
May 7, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements UI for competency framework management, MSEL-level competency selection, assessor view with xAPI evidence, and competency rating interface. Completes Phase 1-4 of the competency assessment plan.
Features Added
Framework Import & Management (Admin)
MSEL Competencies Tab
Data Field Competency Type
Assessor View
Info Page Enhancements
Display Improvements
white-space: nowrapprevents word wrapping on dash charactersData Field List Improvements
Components Added/Modified
New:
Modified:
Routing
/msel/{mselId}/assessor(Assessor MSEL View tab)/admin/competency-frameworks(Framework management)State Management
CompetencyFrameworkDataService,MselCompetencyDataService,TeamCompetencyDataServiceCompetencyFrameworkQuery,MselCompetencyQuery,TeamCompetencyQueryTesting Notes
Related Work