Implement linking field

3 files changed, 143 insertions, 0 deletions

diff --git a/modern/src/DevicePage.js b/modern/src/DevicePage.js
index 7c9b5671..a8a3de65 100644
--- a/modern/src/DevicePage.js
+++ b/modern/src/DevicePage.js
@@ -9,6 +9,8 @@ import EditAttributesView from './attributes/EditAttributesView';
 import deviceAttributes from './attributes/deviceAttributes';
 import SelectField from './form/SelectField';
 import { deviceCategories } from './common/deviceCategories';
+import LinkField from './form/LinkField';
+import { prefixString } from './common/stringUtils';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -107,6 +109,36 @@ const DevicePage = () => {
                 />
             </AccordionDetails>
           </Accordion>
+          {item.id &&
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography variant="subtitle1">
+                  {t('sharedConnections')}
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails className={classes.details}>
+                <LinkField
+                  margin="normal"
+                  endpointAll="/api/geofences"
+                  endpointLinked={"/api/geofences?deviceId=" + item.id}
+                  baseId={item.id}
+                  keyBase="deviceId"
+                  keyLink="geofenceId"
+                  label={t('sharedGeofences')}
+                  variant="filled" />
+                <LinkField
+                  margin="normal"
+                  endpointAll="/api/notifications"
+                  endpointLinked={"/api/notifications?deviceId=" + item.id}
+                  baseId={item.id}
+                  keyBase="deviceId"
+                  keyLink="notificationId"
+                  titleGetter={it => t(prefixString('event', it.type))}
+                  label={t('sharedNotifications')}
+                  variant="filled" />
+              </AccordionDetails>
+            </Accordion>
+          }
         </>
       }
     </EditItemView>
diff --git a/modern/src/UserPage.js b/modern/src/UserPage.js
index 98b9b414..0fa0918b 100644
--- a/modern/src/UserPage.js
+++ b/modern/src/UserPage.js
@@ -7,6 +7,7 @@ import EditItemView from './EditItemView';
 import { Accordion, AccordionSummary, AccordionDetails, makeStyles, Typography } from '@material-ui/core';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import EditAttributesView from './attributes/EditAttributesView';
+import LinkField from './form/LinkField';
 
 const useStyles = makeStyles(() => ({
   details: {
@@ -64,6 +65,35 @@ const UserPage = () => {
                 />
             </AccordionDetails>
           </Accordion>
+          {item.id &&
+            <Accordion>
+              <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+                <Typography variant="subtitle1">
+                  {t('sharedConnections')}
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails className={classes.details}>
+                <LinkField
+                  margin="normal"
+                  endpointAll="/api/devices?all=true"
+                  endpointLinked={"/api/devices?userId=" + item.id}
+                  baseId={item.id}
+                  keyBase="userId"
+                  keyLink="deviceId"
+                  label={t('deviceTitle')}
+                  variant="filled" />
+                <LinkField
+                  margin="normal"
+                  endpointAll="/api/groups?all=true"
+                  endpointLinked={"/api/groups?userId=" + item.id}
+                  baseId={item.id}
+                  keyBase="userId"
+                  keyLink="groupId"
+                  label={t('settingsGroups')}
+                  variant="filled" />
+              </AccordionDetails>
+            </Accordion>
+          }
         </>
       }
     </EditItemView>
diff --git a/modern/src/form/LinkField.js b/modern/src/form/LinkField.js
new file mode 100644
index 00000000..b228fb34
--- /dev/null
+++ b/modern/src/form/LinkField.js
@@ -0,0 +1,81 @@
+import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
+import React, { useState } from 'react';
+import { useEffectAsync } from '../reactHelper';
+
+const LinkField = ({
+  margin,
+  variant,
+  label,
+  endpointAll,
+  endpointLinked,
+  baseId,
+  keyBase,
+  keyLink,
+  keyGetter = item => item.id,
+  titleGetter = item => item.name,
+}) => {
+  const [items, setItems] = useState();
+  const [linked, setLinked] = useState();
+
+  useEffectAsync(async () => {
+    const response = await fetch(endpointAll);
+    if (response.ok) {
+      setItems(await response.json());
+    }
+  }, []);
+
+  useEffectAsync(async () => {
+    const response = await fetch(endpointLinked);
+    if (response.ok) {
+      const data = await response.json();
+      setLinked(data.map(it => it.id));
+    }
+  }, []);
+
+  const createBody = linkId => {
+    const body = {};
+    body[keyBase] = baseId;
+    body[keyLink] = linkId;
+    return body;
+  }
+
+  const onChange = async event => {
+    const oldValue = linked;
+    const newValue = event.target.value;
+    for (const added of newValue.filter(it => !oldValue.includes(it))) {
+      await fetch('/api/permissions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(createBody(added)),
+      });
+    }
+    for (const removed of oldValue.filter(it => !newValue.includes(it))) {
+      await fetch('/api/permissions', {
+        method: 'DELETE',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(createBody(removed)),
+      });
+    }
+    setLinked(newValue);
+  };
+
+  if (items && linked) {
+    return (
+      <FormControl margin={margin} variant={variant}>
+        <InputLabel>{label}</InputLabel>
+        <Select
+          multiple
+          value={linked}
+          onChange={onChange}>
+          {items.map(item => (
+            <MenuItem key={keyGetter(item)} value={keyGetter(item)}>{titleGetter(item)}</MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    );
+  } else {
+    return null;
+  }
+}
+
+export default LinkField;