diff --git a/web_src/js/components/projects/ProjectWorkflow.vue b/web_src/js/components/projects/ProjectWorkflow.vue index 5d2a993732..d64abc3efe 100644 --- a/web_src/js/components/projects/ProjectWorkflow.vue +++ b/web_src/js/components/projects/ProjectWorkflow.vue @@ -3,7 +3,8 @@ import {onMounted, onUnmounted, useTemplateRef, computed, ref, nextTick, watch} import {createWorkflowStore} from './WorkflowStore.ts'; import {svg} from '../../svg.ts'; import {confirmModal} from '../../features/comp/ConfirmModal.ts'; -import LabelSelector from '../LabelSelector.vue'; +import {fomanticQuery} from '../../modules/fomantic/base.ts'; +import {contrastColor} from '../../utils/color.ts'; const elRoot = useTemplateRef('elRoot'); @@ -415,6 +416,27 @@ const hasAction = (actionType: any) => { return store.selectedWorkflow?.capabilities?.available_actions?.includes(actionType); }; +// Toggle label selection for add_labels, remove_labels, or filter_labels +const toggleLabel = (type: string, labelId: any) => { + let labels; + if (type === 'filter_labels') { + labels = store.workflowFilters.labels; + } else { + labels = (store.workflowActions as any)[type]; + } + const index = labels.indexOf(labelId); + if (index > -1) { + labels.splice(index, 1); + } else { + labels.push(labelId); + } +}; + +// Calculate text color based on background color for better contrast +const getLabelTextColor = (hexColor: any) => { + return contrastColor(hexColor); +}; + const getStatusClass = (item: any) => { if (!item.isConfigured) { return 'status-inactive'; // Gray dot for unconfigured @@ -476,6 +498,27 @@ const persistDraftState = () => { store.updateDraft(draftKey, store.workflowFilters, store.workflowActions); }; +// Initialize Fomantic UI dropdowns for label selection +const initLabelDropdowns = async () => { + await nextTick(); + const dropdowns = elRoot.value?.querySelectorAll('.ui.dropdown'); + if (dropdowns) { + dropdowns.forEach((dropdown) => { + fomanticQuery(dropdown).dropdown({ + action: 'nothing', // Don't hide on selection for multiple selection + fullTextSearch: true, + }); + }); + } +}; + +// Watch for edit mode changes to initialize dropdowns +watch(isInEditMode, async (newVal) => { + if (newVal) { + await initLabelDropdowns(); + } +}); + watch(() => store.workflowFilters, () => { persistDraftState(); }, {deep: true}); @@ -810,12 +853,44 @@ onUnmounted(() => {