- implemented #1357

Author: boriskovar-m2ms

js/components/preview/tags/details/newTagDetailRow.js

@@ -1,12 +1,13 @@
-import React, { memo, useState, useEffect } from 'react';
+import React, { memo, useState, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { CATEGORY_TYPE, CATEGORY_ID, CATEGORY_TYPE_BY_ID } from '../../../../constants/constants';
 import { ColorPicker } from '../../../common/Components/ColorPicker';
 import {
   DEFAULT_CATEGORY,
   DEFAULT_TAG_COLOR,
   augumentTagObjectWithId,
-  createMoleculeTagObject
+  createMoleculeTagObject,
+  getEditNewTagCategories
 } from '../utils/tagUtils';
 import { DJANGO_CONTEXT } from '../../../../utils/djangoContext';
 import { updateTagProp, removeSelectedTag } from '../redux/dispatchActions';
@@ -73,11 +74,15 @@ const NewTagDetailRow = memo(({ moleculesToEditIds, moleculesToEdit }) => {
   const allMolList = useSelector(state => state.apiReducers.all_mol_lists);
   const categoriesList = useSelector(state => state.apiReducers.categoryList);
 
-  const [newTagCategory, setNewTagCategory] = useState(1);
+  const [newTagCategory, setNewTagCategory] = useState(DEFAULT_CATEGORY);
   const [newTagColor, setNewTagColor] = useState(DEFAULT_TAG_COLOR);
   const [newTagName, setNewTagName] = useState('');
   const [newTagLink, setNewTagLink] = useState('');
 
+  const comboCategories = useMemo(() => {
+    return getEditNewTagCategories(categoriesList);
+  }, [categoriesList]);
+
   useEffect(() => {
     const category = dispatch(getCategoryById(DEFAULT_CATEGORY));
     if (category) {
@@ -160,18 +165,32 @@ const NewTagDetailRow = memo(({ moleculesToEditIds, moleculesToEdit }) => {
   const updateTag = () => {
     if (tagToEdit && newTagCategory && newTagName) {
       // update all props at once
-      dispatch(
-        updateTagProp(
-          Object.assign({}, tagToEdit, {
-            category: newTagCategory,
-            colour: newTagColor,
-            tag: newTagName,
-            discourse_url: newTagLink
-          }),
-          newTagName,
-          'tag'
-        )
-      );
+      if (newTagCategory) {
+        dispatch(
+          updateTagProp(
+            Object.assign({}, tagToEdit, {
+              category: newTagCategory,
+              colour: newTagColor,
+              tag: newTagName,
+              discourse_url: newTagLink
+            }),
+            newTagName,
+            'tag'
+          )
+        );
+      } else {
+        dispatch(
+          updateTagProp(
+            Object.assign({}, tagToEdit, {
+              colour: newTagColor,
+              tag: newTagName,
+              discourse_url: newTagLink
+            }),
+            newTagName,
+            'tag'
+          )
+        );
+      }
       // reset tag/fields after updating selected one
       resetTagToEditState();
     }
@@ -240,7 +259,7 @@ const NewTagDetailRow = memo(({ moleculesToEditIds, moleculesToEdit }) => {
         onChange={onCategoryForNewTagChange}
         disabled={!DJANGO_CONTEXT.pk}
       >
-        {categoriesList?.map(c => (
+        {comboCategories?.map(c => (
           <MenuItem key={`tag-editor-new-category-${c.id}`} value={c.id}>
             {c.category}
           </MenuItem>

js/components/preview/tags/tagCategory.js

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import TagCategoryView from './tagCategoryListView';
 import TagCategoryGridView from './tagCategoryGridView';
 import { CATEGORY_TYPE } from '../../../constants/constants';
-import { compareTagsAsc } from './utils/tagUtils';
+import { compareTagsAsc, getProhibitedCategoriesForEditIds } from './utils/tagUtils';
 
 const useStyles = makeStyles(theme => ({
   category: {
@@ -16,10 +16,11 @@ const TagCategory = memo(({ tagClickCallback, disabled = false }) => {
   const classes = useStyles();
 
   const categoryList = useSelector(state => state.apiReducers.categoryList);
+  const listOfProhibitedCategories = getProhibitedCategoriesForEditIds(categoryList);
   let tagList = useSelector(state => state.apiReducers.tagList);
   tagList = tagList
     .filter(t => {
-      if (t.additional_info?.downloadName) {
+      if (t.additional_info?.downloadName || listOfProhibitedCategories.some(cid => cid === t.category)) {
         return false;
       } else {
         return true;

js/components/preview/tags/tagView.js

@@ -130,9 +130,11 @@ const TagView = memo(
       if (tagCategory) {
         if (!tag.colour || tag.colour === '') {
           setBgColor(`#${tagCategory.colour}`);
+        } else {
+          setBgColor(`${tag.colour}`);
         }
       }
-    }, [tagCategory]);
+    }, [tagCategory, tag.colour, tagCategories]);
 
     useEffect(() => {
       if (assignTagView === undefined) {

js/components/preview/tags/utils/tagUtils.js

@@ -3,11 +3,12 @@ import {
   CATEGORY_TYPE_BY_ID,
   OBSERVATION_TAG_CATEGORIES,
   COMPOUND_PRIO_TAG_CATEGORIES,
-  TAG_DETAILS_REMOVED_CATEGORIES
+  TAG_DETAILS_REMOVED_CATEGORIES,
+  NON_ASSIGNABLE_CATEGORIES
 } from '../../../../constants/constants';
 
 export const DEFAULT_TAG_COLOR = '#E0E0E0';
-export const DEFAULT_CATEGORY = 1;
+export const DEFAULT_CATEGORY = 8;
 
 export const createMoleculeTagObject = (
   tagName,
@@ -247,3 +248,23 @@ export const getAllTagsForLHSCmp = (observations, tagList, tagCategoryList) => {
 export const getDefaultTagDiscoursePostText = tag => {
   return `This post for tag ${tag.tag} is here to discuss its contents.`;
 };
+
+export const getEditNewTagCategories = tagCategoryList => {
+  let result = [];
+
+  result = tagCategoryList?.filter(categ => !NON_ASSIGNABLE_CATEGORIES.some(c => c === categ.category)) || [];
+
+  return result;
+};
+
+export const getProhibitedCategoriesForEdit = tagCategoryList => {
+  let result = [];
+
+  result = tagCategoryList?.filter(categ => NON_ASSIGNABLE_CATEGORIES.some(c => c === categ.category)) || [];
+
+  return result;
+};
+
+export const getProhibitedCategoriesForEditIds = tagCategoryList => {
+  return getProhibitedCategoriesForEdit(tagCategoryList).map(c => c.id);
+};