use text-muted className for unavailable catalogs in dropdown select

rdmorganiser · Nov 28, 2024 · 471df6e · 471df6e
1 parent 755e014
commit 471df6e
Showing 1 changed file with 8 additions and 1 deletion.
diff --git a/rdmo/projects/assets/js/projects/components/helper/ProjectFilters.js b/rdmo/projects/assets/js/projects/components/helper/ProjectFilters.js
@@ -36,7 +36,14 @@ const ProjectFilters = ({ catalogs, config, configActions, isManager, projectsAc
   }
 
   const catalogOptions = catalogs?.filter(catalog => isManager || catalog.available)
-                                  .map(catalog => ({ value: catalog.id.toString(), label: catalog.title }))
+                                  .map(catalog => ({
+                                    value: catalog.id.toString(),
+                                    label: (
+                                      <span className={catalog.available ? '' : 'text-muted'}>
+                                        {catalog.title}
+                                      </span>
+                                    ),
+                                  }))
   const selectedCatalog = get(config, 'params.catalog', '')
   const updateCatalogFilter = (value) => {
     value ? configActions.updateConfig('params.catalog', value) : configActions.deleteConfig('params.catalog')