Attaching operations add/remove attribute to group tree view.

Author: krulis-martin

src/components/Groups/GroupsTreeView/GroupsTreeNode.js

@@ -5,9 +5,10 @@ import { Badge, OverlayTrigger, Popover } from 'react-bootstrap';
 import Collapse from 'react-collapse';
 
 import Button from '../../widgets/TheButton';
+import Confirm from '../../widgets/Confirm';
 import GroupsTreeList from './GroupsTreeList.js';
 import GroupMembershipIcon from '../GroupMembershipIcon';
-import Icon, { CloseIcon, GroupIcon, LectureIcon, LoadingIcon, TermIcon } from '../../icons';
+import Icon, { AddIcon, CloseIcon, GroupIcon, LectureIcon, LoadingIcon, TermIcon } from '../../icons';
 import withLinks from '../../../helpers/withLinks.js';
 import { EMPTY_OBJ } from '../../../helpers/common.js';
 
@@ -136,31 +137,46 @@ const GroupsTreeNode = React.memo(({ group, isExpanded = false, addAttribute, re
         <GroupMembershipIcon id={id} membership={membership} gapLeft={2} />
         {pending && <LoadingIcon gapLeft={2} />}
 
+        {addAttribute && (
+          <span className="float-end" onClick={clickEventDissipator}>
+            <Button size="xs" variant="success" className="ms-3" disabled={pending} onClick={() => addAttribute(group)}>
+              <AddIcon gapRight />
+              <FormattedMessage id="app.groupsTreeView.addAttribute" defaultMessage="Add" />
+            </Button>
+          </span>
+        )}
+
         {attributes && Object.keys(attributes).length > 0 && (
           <span className="float-end" onClick={clickEventDissipator}>
             {Object.keys(attributes).map(key =>
               attributes[key].map(value => (
-                <Badge key={value} bg={KNOWN_ATTR_KEYS[key] || 'secondary'} className="ms-1">
+                <Badge
+                  key={value}
+                  bg={KNOWN_ATTR_KEYS[key] || 'secondary'}
+                  className={'ms-1' + (pending ? ' opacity-25' : '')}>
                   {ATTR_ICONS[key]}
                   {!KNOWN_ATTR_KEYS[key] && `${key}: `}
                   {value}
-                  {removeAttribute && <CloseIcon gapLeft onClick={() => removeAttribute(id, key, value)} />}
+
+                  {removeAttribute && !pending && (
+                    <Confirm
+                      id={id}
+                      onConfirmed={() => removeAttribute(id, key, value)}
+                      question={
+                        <FormattedMessage
+                          id="app.groupsTreeView.removeAttributeConfirm"
+                          defaultMessage="Are you sure you want to remove this attribute?"
+                        />
+                      }>
+                      <CloseIcon gapLeft className="clickable" />
+                    </Confirm>
+                  )}
+                  {pending && <LoadingIcon gapLeft />}
                 </Badge>
               ))
             )}
           </span>
         )}
-
-        {addAttribute && (
-          <span className="float-end" onClick={clickEventDissipator}>
-            <Button size="xs" variant="success" onClick={() => addAttribute(id)}>
-              <Icon icon="plus" fixedWidth />
-              <span className="d-none d-sm-inline">
-                <FormattedMessage id="app.groupsTreeView.addAttribute" defaultMessage="Add attribute" />
-              </span>
-            </Button>
-          </span>
-        )}
       </span>
 
       {!leafNode && (

src/locales/cs.json

@@ -111,12 +111,13 @@
   "app.groupsTeacher.selectParentGroupForCreating": "Vyberte rodičovskou skupinu pro nově vytvářenou skupinu",
   "app.groupsTeacher.selectedEvent": "Vybraná událost",
   "app.groupsTeacher.title": "Vytvořit skupiny pro předměty ze SISu",
-  "app.groupsTreeView.addAttribute": "Přidat atribut",
+  "app.groupsTreeView.addAttribute": "Přidat",
   "app.groupsTreeView.adminPopover.title": "Administrátoři skupiny",
   "app.groupsTreeView.adminsCount": "{count} {count, plural, one {administrátor} =2 {administrátoři} =3 {administrátoři} =4 {administrátoři} other {administrátorů}}",
   "app.groupsTreeView.empty": "Nejsou dostupné žádné skupiny.",
   "app.groupsTreeView.examTooltip": "Skupina pro zkoušky",
   "app.groupsTreeView.organizationalTooltip": "Skupina je organizační (nemá žádné studenty ani zadané úlohy)",
+  "app.groupsTreeView.removeAttributeConfirm": "Jste si jisti, že chcete odstranit tento atribut?",
   "app.header.languageSwitching.translationTitle": "Jazyková verze",
   "app.headerNotification.copiedToClipboard": "Zkopírováno do schránky.",
   "app.homepage.about": "Toto rozšíření ReCodExu má na starost datovou integraci mezi ReCodExem a Studijním Informačním Systémem (SIS) Karlovy Univerzity. Prosíme vyberte si jednu ze stránek níže.",
@@ -256,4 +257,4 @@
   "generic.reset": "Resetovat",
   "generic.save": "Uložit",
   "generic.search": "Vyhledat"
-}
+}

src/locales/en.json

@@ -111,12 +111,13 @@
   "app.groupsTeacher.selectParentGroupForCreating": "Select Parent Group for a New Group",
   "app.groupsTeacher.selectedEvent": "Selected event",
   "app.groupsTeacher.title": "Create Groups for SIS Courses",
-  "app.groupsTreeView.addAttribute": "Add attribute",
+  "app.groupsTreeView.addAttribute": "Add",
   "app.groupsTreeView.adminPopover.title": "Group administrators",
   "app.groupsTreeView.adminsCount": "{count} {count, plural, one {admin} other {admins}}",
   "app.groupsTreeView.empty": "No groups available",
   "app.groupsTreeView.examTooltip": "Exam group",
   "app.groupsTreeView.organizationalTooltip": "The group is organizational (it does not have any students or assignments)",
+  "app.groupsTreeView.removeAttributeConfirm": "Are you sure you want to remove this attribute?",
   "app.header.languageSwitching.translationTitle": "Translation",
   "app.headerNotification.copiedToClipboard": "Copied to clipboard.",
   "app.homepage.about": "This ReCodEx extension handles data integration and exchange between ReCodEx and Charles University Student Information System (SIS). Please choose one of the pages below.",

src/pages/GroupsSuperadmin/GroupsSuperadmin.js

@@ -9,10 +9,10 @@ import Page from '../../components/layout/Page';
 import Box from '../../components/widgets/Box';
 import GroupsTreeView from '../../components/Groups/GroupsTreeView';
 import Button, { TheButtonGroup } from '../../components/widgets/TheButton';
-import { CloseIcon, ManagementIcon } from '../../components/icons';
+import { CloseIcon, GroupIcon, ManagementIcon } from '../../components/icons';
 // import ResourceRenderer from '../../components/helpers/ResourceRenderer';
 
-import { fetchAllGroups } from '../../redux/modules/groups.js';
+import { fetchAllGroups, addGroupAttribute, removeGroupAttribute } from '../../redux/modules/groups.js';
 import { fetchUserIfNeeded } from '../../redux/modules/users.js';
 import { fetchAllTerms } from '../../redux/modules/terms.js';
 import { loggedInUserIdSelector } from '../../redux/selectors/auth.js';
@@ -43,18 +43,18 @@ const getGroupAdmins = group => {
 
 class GroupsSuperadmin extends Component {
   state = {
+    modalGroup: null,
     modalPending: false,
     modalError: null,
-    selectGroups: null,
-    selectedGroupId: '',
   };
 
+  openModal = modalGroup => this.setState({ modalGroup, modalPending: false, modalError: null });
+
   closeModal = () =>
     this.setState({
+      modalGroup: null,
       modalPending: false,
       modalError: null,
-      selectGroups: null,
-      selectedGroupId: '',
     });
 
   // handleGroupChange = ev => this.setState({ selectedGroupId: ev.target.value });
@@ -83,7 +83,7 @@ class GroupsSuperadmin extends Component {
     ]);
 
   render() {
-    const { loggedInUser, groups } = this.props;
+    const { loggedInUser, groups, removeAttribute } = this.props;
 
     return (
       <Page
@@ -98,10 +98,15 @@ class GroupsSuperadmin extends Component {
               <Box
                 unlimitedHeight
                 title={<FormattedMessage id="app.groupsSupervisor.currentlyManagedGroups" defaultMessage="Groups" />}>
-                <GroupsTreeView groups={groups} />
+                <GroupsTreeView groups={groups} addAttribute={this.openModal} removeAttribute={removeAttribute} />
               </Box>
 
-              <Modal show={false} backdrop="static" size="xl" fullscreen="xl-down" onHide={this.closeModal}>
+              <Modal
+                show={this.state.modalGroup !== null}
+                backdrop="static"
+                size="xl"
+                fullscreen="xl-down"
+                onHide={this.closeModal}>
                 <Modal.Header closeButton={!this.state.modalPending}>
                   <Modal.Title>
                     <FormattedMessage
@@ -112,6 +117,11 @@ class GroupsSuperadmin extends Component {
                 </Modal.Header>
 
                 <Modal.Body>
+                  <h5>
+                    <GroupIcon gapRight={3} className="text-muted" />
+                    {this.state.modalGroup?.fullName}
+                  </h5>
+
                   {this.state.modalError && (
                     <Callout variant="danger" className="mt-3">
                       <p>
@@ -154,6 +164,8 @@ GroupsSuperadmin.propTypes = {
   terms: ImmutablePropTypes.list,
   groups: ImmutablePropTypes.map,
   loadAsync: PropTypes.func.isRequired,
+  addAttribute: PropTypes.func.isRequired,
+  removeAttribute: PropTypes.func.isRequired,
 };
 
 export default connect(
@@ -166,5 +178,7 @@ export default connect(
   dispatch => ({
     loadAsync: (userId, expiration = DEFAULT_EXPIRATION) =>
       GroupsSuperadmin.loadAsync({ userId }, dispatch, expiration),
+    addAttribute: (groupId, key, value) => dispatch(addGroupAttribute(groupId, key, value)),
+    removeAttribute: (groupId, key, value) => dispatch(removeGroupAttribute(groupId, key, value)),
   })
 )(GroupsSuperadmin);