Better visualization of for-term attributes.

Author: krulis-martin

src/components/Groups/GroupsTreeView/GroupsTreeNode.js

@@ -8,7 +8,16 @@ import Button from '../../widgets/TheButton';
 import Confirm from '../../widgets/Confirm';
 import GroupsTreeList from './GroupsTreeList.js';
 import GroupMembershipIcon from '../GroupMembershipIcon';
-import Icon, { AddIcon, CloseIcon, GroupIcon, LectureIcon, LoadingIcon, TermIcon, WarningIcon } from '../../icons';
+import Icon, {
+  AddIcon,
+  CloseIcon,
+  GroupIcon,
+  LectureIcon,
+  LoadingIcon,
+  PlantIcon,
+  TermIcon,
+  WarningIcon,
+} from '../../icons';
 import { EMPTY_OBJ } from '../../../helpers/common.js';
 
 const DEFAULT_ICON = ['far', 'square'];
@@ -34,16 +43,29 @@ const getLocalizedName = (name, id, locale) => {
 
 const KNOWN_ATTR_KEYS = {
   course: 'primary',
+  'for-term': 'success',
   term: 'info',
   group: 'warning',
 };
 
 const ATTR_ICONS = {
   course: <LectureIcon gapRight />,
+  'for-term': <PlantIcon gapRight />,
   term: <TermIcon gapRight />,
   group: <GroupIcon gapRight />,
 };
 
+const ATTR_TRANSFORM = {
+  'for-term': value =>
+    value === '1' ? (
+      <FormattedMessage id="app.terms.winter" defaultMessage="Winter" />
+    ) : value === '2' ? (
+      <FormattedMessage id="app.terms.summer" defaultMessage="Summer" />
+    ) : (
+      value
+    ),
+};
+
 const GroupsTreeNode = React.memo(
   ({
     group,
@@ -195,7 +217,7 @@ const GroupsTreeNode = React.memo(
                     className={'ms-1' + (pending ? ' opacity-25' : '')}>
                     {ATTR_ICONS[key]}
                     {!KNOWN_ATTR_KEYS[key] && `${key}: `}
-                    {value}
+                    {ATTR_TRANSFORM[key] ? ATTR_TRANSFORM[key](value) : value}
 
                     {removeAttribute && !pending && (
                       <Confirm

src/components/icons/index.js

@@ -88,6 +88,7 @@ export const PersonalDataIcon = props => <Icon {...props} icon="id-card" />;
 export const PipelineIcon = props => <Icon {...props} icon="random" />;
 export const PipelineStructureIcon = props => <Icon {...props} icon="sitemap" />;
 export const PlagiarismIcon = props => <Icon icon="person-circle-exclamation" {...props} />;
+export const PlantIcon = props => <Icon icon="leaf" {...props} />;
 export const PointsIcon = props => <Icon icon="comment-dollar" {...props} />;
 export const PointsDecreasedIcon = props => <Icon icon="level-down-alt" className="text-body-secondary" {...props} />;
 export const PointsGraphIcon = props => <Icon icon={['far', 'chart-bar']} {...props} />;

src/pages/GroupsSuperadmin/GroupsSuperadmin.js

@@ -15,7 +15,7 @@ import AddAttributeForm, { INITIAL_VALUES as ADD_FORM_INITIAL_VALUES } from '../
 import PlantTermGroupsForm, {
   initialValuesCreator as plantFormInitialValuesCreator,
 } from '../../components/forms/PlantTermGroupsForm';
-import Icon, { CloseIcon, GroupIcon, LoadingIcon, ManagementIcon } from '../../components/icons';
+import Icon, { CloseIcon, GroupIcon, LoadingIcon, ManagementIcon, PlantIcon } from '../../components/icons';
 import ResourceRenderer from '../../components/helpers/ResourceRenderer';
 import Button, { TheButtonGroup } from '../../components/widgets/TheButton';
 import Callout from '../../components/widgets/Callout';
@@ -291,7 +291,7 @@ class GroupsSuperadmin extends Component {
                               size="sm"
                               onClick={() => this.plantGroups(this.state.plantTerm || terms[0])}
                               disabled={this.state.plantGroupsCount === 0 || this.state.plantGroupsPending}>
-                              {this.state.plantGroupsPending ? <LoadingIcon gapRight /> : <Icon icon="leaf" gapRight />}
+                              {this.state.plantGroupsPending ? <LoadingIcon gapRight /> : <PlantIcon gapRight />}
                               <FormattedMessage
                                 id="app.groupsSupervisor.plantTermGroupsConfirmButton"
                                 defaultMessage="Plant Term Groups"
@@ -356,7 +356,7 @@ class GroupsSuperadmin extends Component {
                             <Button
                               variant="success"
                               onClick={() => this.openModalPlant(groups, this.state.plantTerm || terms[0])}>
-                              <Icon icon="leaf" gapRight />
+                              <PlantIcon gapRight />
                               <FormattedMessage
                                 id="app.groupsSupervisor.plantTermButton"
                                 defaultMessage="Plant groups for"
@@ -380,7 +380,7 @@ class GroupsSuperadmin extends Component {
                               variant={this.state.plantGroupsErrors ? 'danger' : 'success'}
                               onClick={() => this.plantGroups(this.state.plantTerm || terms[0])}
                               disabled={this.state.plantGroupsCount === 0 || this.state.plantGroupsPending}>
-                              {this.state.plantGroupsPending ? <LoadingIcon gapRight /> : <Icon icon="leaf" gapRight />}
+                              {this.state.plantGroupsPending ? <LoadingIcon gapRight /> : <PlantIcon gapRight />}
                               <FormattedMessage
                                 id="app.groupsSupervisor.plantTermGroupsConfirmButton"
                                 defaultMessage="Plant Term Groups"