GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-12 00:37:29 -05:00
Code Issues Packages Projects Releases Wiki Activity

it works - the group stuff!

Browse Source
This commit is contained in:
Luke Berndt
2023-03-18 12:46:31 -04:00
parent 5bfff7bb90
commit 8f7f4fae37
7 changed files with 400 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
admin/server/controllers/groups.js
View File

@@ -41,7 +41,7 @@ exports.getGroups = async function (req, res, next) {
return;
}
} else {
const group = await Group.findOne(
const group = await Group.find(
{
shortName: req.params.shortName.toLowerCase()
}).sort("position").exec();
@@ -63,57 +63,56 @@ exports.getGroups = async function (req, res, next) {
);
};
exports.deleteGroup = function (req, res, next) {
//router.get('/system/:shortName/remove_group/:groupId', isLoggedIn, function(req, res) {
System.findOne({
'shortName': req.params.shortName.toLowerCase()
}, function (err, system) {
if (err) {
console.error(err);
res.json({ success: false, message: err });
return;
}
if (!system) {
console.error(err);
res.json({
success: false,
message: "That Short Name does not exist."
});
return;
}
if (!system.userId.equals(req.user._id)) {
res.json({
success: false,
message: "You are not the user associated with this system."
});
return;
}
Group.findOneAndRemove({
shortName: req.params.shortName.toLowerCase(),
'_id': new mongoose.Types.ObjectId(req.params.groupId)
}, function (err) {
if (err) {
res.json({
success: false,
message: err
});
return;
} else {
res.json({
success: true
});
return;
}
// removed!
});
exports.deleteGroup = async function (req, res, next) {
const system = await System.findOne({ 'shortName': req.params.shortName.toLowerCase() }).catch(err => {
console.error(err);
res.status(500);
res.json({ success: false, message: err });
return;
});
if (!system) {
console.error(err);
res.status(404);
res.json({
success: false,
message: "That Short Name does not exist."
});
return;
}
if (!system.userId.equals(req.user._id)) {
res.status(401);
res.json({
success: false,
message: "You are not the user associated with this system."
});
return;
}
await Group.findOneAndRemove({
shortName: req.params.shortName.toLowerCase(),
'_id': new mongoose.Types.ObjectId(req.params.groupId)
}).catch(err => {
res.status(500);
res.json({
success: false,
message: err
});
return;
});
};
exports.reorderGroups = function (req, res, next) {
res.json({
success: true
});
return;
}
exports.reorderGroups = function (req, res, next) {
console.log(req.body)
//router.post('/system/:shortName/group_order', isLoggedIn, function(req, res) {
process.nextTick(async function () {
process.nextTick(async function () {
const system = await System.findOne({ shortName: req.params.shortName.toLowerCase() });
if (!system) {
@@ -132,7 +131,15 @@ exports.reorderGroups = function (req, res, next) {
});
return;
}
console.log(req.body)
if (!req.body.groupOrder) {
res.status(500);
res.json({
success: false,
message: "Order data is wrong."
});
return;
}
var groupOrder = JSON.parse(req.body.groupOrder);
for (var i = 0; i < groupOrder.length; i++) {
@@ -166,14 +173,15 @@ exports.reorderGroups = function (req, res, next) {
res.json({
success: true
});
}
);
});
};
exports.upsertGroup = function (req, res, next) {
console.log(req.body)
//router.post('/system/:shortName/group/:groupId?', isLoggedIn, function(req, res) {
process.nextTick(async function () {
let system = System.findOne({ shortName: req.params.shortName.toLowerCase() });
console.log(req.body)
let system = await System.findOne({ shortName: req.params.shortName.toLowerCase() });
if (!system) {
res.status(404);
@@ -213,7 +221,7 @@ exports.upsertGroup = function (req, res, next) {
var groupId = req.params.groupId;
let group = Group.findOneAndUpdate(
let group = await Group.findOneAndUpdate(
{
_id: new mongoose.Types.ObjectId(groupId),
shortName: req.params.shortName.toLowerCase()
@@ -225,20 +233,17 @@ exports.upsertGroup = function (req, res, next) {
{
new: true,
upsert: true
}).catch(err => {
res.status(500);
res.json({
success: false,
message: err
});
return;
});
res.json(group);
return;
if (!group) {
res.status(500);
res.json({
success: false,
message: err
});
return;
} else {
res.json(group);
return;
}
}
);
}

1
admin/server/index.js
View File

@@ -128,6 +128,7 @@ function isAdmin(req, res, next) {
}
function isLoggedIn(req, res, next) {
console.log(req.body);
if (req.isAuthenticated()) return next();
res.status(401).send({
success: false,

266
admin/src/Group/GroupModal.js
View File

@@ -1,4 +1,6 @@
import React, { Component } from "react";
import React, { useEffect, useLayoutEffect, useState, useRef, useCallback, useMemo } from "react";
import { useGetSystemsQuery, useGetTalkgroupsQuery, useGetGroupsQuery, useUpdateGroupMutation, useCreateGroupMutation, useDeleteGroupMutation, useSaveGroupOrderMutation} from '../features/api/apiSlice'
import {
Grid,
Modal,
@@ -13,84 +15,81 @@ import {
// ----------------------------------------------------
class GroupModal extends Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleClose = this.handleClose.bind(this);
const GroupModal = (props) => {
// Set initial state
this.state = {
editGroup: false,
groupName: "",
group: {
name: "",
items: []
},
talkgroups: this.props.talkgroups ? this.props.talkgroups : []
};
const emptyGroup = {
name: "",
items: []
}
const [editGroup, setEditGroup] = useState(false);
const [groupName, setGroupName] = useState("");
const [group, setGroup] = useState(emptyGroup)
const [talkgroups, setTalkgroups] = useState(props.talkgroups ? props.talkgroups : [])
componentDidMount() {
//this.props.groupActions.fetchGroups(this.props.shortName);
const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(props.shortName);
const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(props.shortName);
const [ updateGroup,{ isLoading: isUpdating } ] = useUpdateGroupMutation();
const [ createGroup,{ isLoading: isCreating } ] = useCreateGroupMutation();
this.props.talkgroupActions.fetchTalkgroups(this.props.shortName);
}
useEffect(() => {
if (talkgroupsData && groupsData && props.editGroupId) {
let editGroup = groupsData.find(
group => group._id === props.editGroupId
);
let items = [];
componentDidUpdate(prevProps) {
// This determines if you are trying to edit a group.
// In this case, the value of editGroupID will chane to the group being edited
if (this.props.talkgroups && this.props.groups && this.props.editGroupId && !prevProps.editGroupId) {
var editGroup = this.props.groups.find(
group => group._id === this.props.editGroupId
);
var items = [];
var talkgroups = this.props.talkgroups;
for (var i = 0; i < editGroup.talkgroups.length; i++) {
const talkgroupId = editGroup.talkgroups[i];
const index = talkgroups.findIndex(tg => tg.num === talkgroupId);
if (index >= 0) {
const item = {
num: talkgroups[index].num,
description: talkgroups[index].description
};
items.push(item);
talkgroups = talkgroups
.slice(0, index)
.concat(talkgroups.slice(index + 1));
}
let talkgroups = talkgroupsData.slice(0); //copy
for (var i = 0; i < editGroup.talkgroups.length; i++) {
const talkgroupNum = editGroup.talkgroups[i];
const index = talkgroups.findIndex(tg => tg.num === talkgroupNum);
if (index >= 0) {
const item = {
num: talkgroups[index].num,
description: talkgroups[index].description
};
items.push(item);
talkgroups = talkgroups
.slice(0, index)
.concat(talkgroups.slice(index + 1));
}
// we want to remove that are part of the Group from the list on the Left
const group = { name: editGroup.groupName, items: items }
this.setState({ group: group, talkgroups: talkgroups, groupName: editGroup.groupName });
}
if (this.props.talkgroups && !prevProps.talkgroups) {
// If we are not editing, make sure there is the full list on the left.
this.setState({ talkgroups: [...this.props.talkgroups] })
// we want to remove that are part of the Group from the list on the Left
const group = { name: editGroup.groupName, items: items }
setGroup(group);
setTalkgroups(talkgroups);
setGroupName(editGroup.groupName);
}
},[groupsData,talkgroupsData, props.editGroupId]);
// If we are done editing, clear out the modal
if (!this.props.editGroupId && (this.props.editGroupId !== prevProps.editGroupId)) {
this.setState({
groupName: "", group: {
name: "",
items: []
},
talkgroups: [...this.props.talkgroups]
});
useEffect(() => {
if (!props.editGroupId && talkgroupsData) {
setTalkgroups([...talkgroupsData]);
}
}
},[talkgroupsData]);
removeTalkgroup(event, index) {
useEffect(() => {
if (!props.editGroupId && props.talkgroups) {
setGroupName("");
setGroup(emptyGroup);
setTalkgroups( [...props.talkgroups]);
}
},[props.editGroupId]);
const removeTalkgroup = (event, index) => {
const item = {
num: this.state.group.items[index].num,
description: this.state.group.items[index].description
num: group.items[index].num,
description: group.items[index].description
};
const talkgroups = this.state.talkgroups.slice(0); // copy
let talkgroups = talkgroupsData.slice(0); // copy
for (var i = 0, len = talkgroups.length; i < len; i++) {
if (item.num < talkgroups[i].num) {
@@ -98,110 +97,76 @@ class GroupModal extends Component {
break;
}
}
this.setState({
group: {
items: this.state.group.items
.slice(0, index)
.concat(this.state.group.items.slice(index + 1))
},
talkgroups: talkgroups
setGroup( {
items: this.state.group.items
.slice(0, index)
.concat(this.state.group.items.slice(index + 1))
});
setTalkgroups(talkgroups);
}
handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
const handleInputChange = (e, { name, value }) => this.setState({ [name]: value });
addTalkgroup(event, index) {
const addTalkgroup = (event, index) => {
const item = {
num: this.state.talkgroups[index].num,
description: this.state.talkgroups[index].description
num: talkgroupsData[index].num,
description: talkgroupsData[index].description
};
this.setState({
group: { items: this.state.group.items.concat(item) },
talkgroups: this.state.talkgroups
.slice(0, index)
.concat(this.state.talkgroups.slice(index + 1))
});
setGroup({ items: group.items.concat(item) })
setTalkgroups(talkgroups.slice(0, index).concat(talkgroups.slice(index + 1)));
}
handleClose = () => {
this.setState({
groupName: "", group: {
name: "",
items: []
},
talkgroups: [...this.props.talkgroups]
});
this.props.onClose(false);
}
handleSubmit() {
var talkgroupNums = this.state.group.items.map(a => a.num);
if (this.props.editGroupId) {
const handleClose = () => {
setGroupName("");
setGroup(emptyGroup);
setTalkgroups([...talkgroupsData]);
props.onClose();
}
const handleSubmit = async () => {
const talkgroupNums = group.items.map(a => a.num);
if (props.editGroupId) {
const data = {
_id: this.props.editGroupId,
shortName: this.props.shortName,
groupName: this.state.groupName,
_id: props.editGroupId,
shortName: props.shortName,
groupName: groupName,
talkgroups: JSON.stringify(talkgroupNums)
};
this.setState({
groupName: "", group: {
name: "",
items: []
},
talkgroups: [...this.props.talkgroups]
});
this.props.groupActions.updateGroup(data).then(requestMessage => {
if (requestMessage) {
// report to the user is there was a problem during registration
this.setState({
requestMessage
});
this.props.onClose(false);
} else {
this.props.onClose(true);
}
});
setGroupName("");
setGroup(emptyGroup);
setTalkgroups([...talkgroupsData]);
await updateGroup(data);
props.onClose(true);
} else {
const data = {
shortName: this.props.shortName,
groupName: this.state.groupName,
shortName: props.shortName,
groupName: groupName,
talkgroups: JSON.stringify(talkgroupNums)
};
this.setState({
groupName: "", group: {
name: "",
items: []
},
talkgroups: [...this.props.talkgroups]
});
setGroupName("");
setGroup(emptyGroup);
setTalkgroups([...talkgroupsData]);
await createGroup(data);
props.onClose();
this.props.groupActions.createGroup(data).then(requestMessage => {
if (requestMessage) {
// report to the user is there was a problem during registration
this.setState({
requestMessage
});
this.props.onClose(false);
} else {
this.props.onClose(true);
}
});
}
}
render() {
const talkgroups = this.state.talkgroups;
const group = this.state.group.items;
const railStyle = {
top: "15px",
minHeight: "200px"
};
return (
<Modal open={this.props.open} onClose={this.handleClose} centered={false}>
<Modal open={props.open} onClose={handleClose} centered={false}>
<Modal.Header>
{this.props.editGroupId ? "Edit Group" : "Create Group"}
{props.editGroupId ? "Edit Group" : "Create Group"}
</Modal.Header>
<Modal.Content scrolling>
<Modal.Description>
@@ -227,7 +192,7 @@ class GroupModal extends Component {
<Icon
link
name="plus"
onClick={e => this.addTalkgroup(e, i)}
onClick={e => addTalkgroup(e, i)}
/>
</Table.Cell>
</Table.Row>
@@ -238,26 +203,26 @@ class GroupModal extends Component {
<Segment style={railStyle}>
<Input
name="groupName"
onChange={this.handleInputChange}
onChange={e => setGroupName(e.target.value)}
placeholder="Group Name"
value={this.state.groupName}
value={groupName}
/>
<List divided relaxed>
{group.map((talkgroup, i) => (
{group.items.map((talkgroup, i) => (
<List.Item key={"Group-" + i}>
<List.Icon
name="remove"
verticalAlign="middle"
link={true}
onClick={e => this.removeTalkgroup(e, i)}
onClick={e => removeTalkgroup(e, i)}
/>
<List.Content>{talkgroup.description}</List.Content>
</List.Item>
))}
</List>
<Button onClick={this.handleSubmit}>
<Button onClick={handleSubmit}>
<Icon name="checkmark" />{" "}
{this.props.editGroupId ? "Update" : "Save"}
{props.editGroupId ? "Update" : "Save"}
</Button>
</Segment>
</Rail>
@@ -266,14 +231,13 @@ class GroupModal extends Component {
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<Button onClick={this.handleSubmit}>
<Button onClick={handleSubmit}>
<Icon name="checkmark" />{" "}
{this.props.editGroupId ? "Update" : "Save"}
{props.editGroupId ? "Update" : "Save"}
</Button>
</Modal.Actions>
</Modal>
);
}
}
export default GroupModal;

28
admin/src/Group/ListGroups.js
View File

@@ -19,18 +19,15 @@ import {
// ----------------------------------------------------
class ListGroups extends Component {
constructor(props) {
super(props);
}
const ListGroups = (props) => {
//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
//https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
render() {
const groups = this.props.groups;
const groups = props.groups;
if (groups) {
let groupsDisplay = props.order.map( id => props.groups.find( group => group._id == id ));
return (
<Table >
@@ -42,7 +39,7 @@ class ListGroups extends Component {
</Table.Row>
</Table.Header>
<Table.Body>
{groups.map((group, i) => (
{groupsDisplay.map((group, i) => (
<Table.Row key={ "Group-" + i}>
<Table.Cell>{group.groupName}</Table.Cell>
<Table.Cell>{group.talkgroups.length}</Table.Cell>
@@ -50,19 +47,21 @@ class ListGroups extends Component {
<Icon
name="pencil alternate"
link={true}
onClick={e => this.props.editGroup(group._id)}
onClick={e => props.editGroup(group._id)}
/><Icon
name="up arrow"
link={true}
onClick={e => this.props.reorderGroup(i, i-1)}
link={i==0?false:true}
disabled={i==0?true:false}
onClick={e => props.reorderGroup(i, i-1)}
/><Icon
name="down arrow"
link={true}
onClick={e => this.props.reorderGroup(i, i+1)}
link={i==groupsDisplay.length-1?false:true}
disabled={i==groupsDisplay.length-1?true:false}
onClick={e => props.reorderGroup(i, i+1)}
/><Icon
name="remove"
link={true}
onClick={e => this.props.deleteGroup(group._id)}
onClick={e => props.deleteGroup(group._id)}
/>
</Table.Cell>
</Table.Row>
@@ -77,6 +76,5 @@ class ListGroups extends Component {
);
}
}
}
export default ListGroups;

10
admin/src/System/ListSystems.js
View File

@@ -10,14 +10,15 @@ import {
} from "semantic-ui-react";
import { useGetSystemsQuery, } from '../features/api/apiSlice'
import { useDispatch } from 'react-redux'
import { push } from '@lagunovsky/redux-react-router'
import { useLocation, useNavigate, useParams } from 'react-router-dom';
// ----------------------------------------------------
const ListSystems = (props) => {
const { data, isSuccess } = useGetSystemsQuery();
const dispatch = useDispatch();
const navigate = useNavigate();
let systems = false;
if (isSuccess) {
systems = data.systems;
@@ -30,12 +31,13 @@ const ListSystems = (props) => {
<div>
<Container>
<Header as="h1">Radio Systems</Header>
<Button onClick={(e) => dispatch(push("/create-system"))}><Icon name='plus' />Add System</Button>
<Button onClick={(e) => navigate("/create-system")}><Icon name='plus' />Add System</Button>
<Divider />
<Card.Group itemsPerRow={4}>
{systems &&
systems.map((system) =>
<SystemCard system={system} key={system.shortName} onClick={(e) => dispatch(push("/system/" + system.shortName))}/>
<SystemCard system={system} key={system.shortName} onClick={(e) => navigate("/system/" + system.shortName)}/>
)}
</Card.Group>
</Container>

200
admin/src/System/System.js
View File

@@ -8,7 +8,7 @@ import UpdatePermissionModal from "../Permission/UpdatePermissionModalContainer.
import AddPermissionModal from "../Permission/AddPermissionModalContainer.js";
import ErrorChart from "./ResponsiveErrorChart"
import CallChart from "./ResponsiveCallChart"
import { useGetSystemsQuery, useGetTalkgroupsQuery, useGetGroupsQuery, useGetErrorsQuery} from '../features/api/apiSlice'
import { useGetSystemsQuery, useGetTalkgroupsQuery, useGetGroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useSaveGroupOrderMutation } from '../features/api/apiSlice'
import {
Button,
Confirm,
@@ -31,6 +31,8 @@ const System = (props) => {
const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName);
const { data: errorsData, isSuccess: isErrorsSuccess } = useGetErrorsQuery(shortName);
const [deleteGroupAPI, { isLoading: isDeleting }] = useDeleteGroupMutation();
const [reorderGroupsAPI, { isLoading: isReordering }] = useSaveGroupOrderMutation();
const [openSystemDeleteConfirm, setOpenSystemDeleteConfirm] = useState(false);
const [openPermissionDeleteConfirm, setOpenPermissionDeleteConfirm] = useState(false);
const [openMessage, setOpenMessage] = useState(false);
@@ -39,6 +41,7 @@ const System = (props) => {
const [editGroupId, setEditGroupId] = useState(false);
const [errorData, setErrorData] = useState({});
const [callData, setCallData] = useState({});
const [groupOrder, setGroupOrder] = useState([]);
const processErrors = (errors) => {
@@ -149,109 +152,123 @@ const System = (props) => {
}
}
*/
const editGroup = (groupId) => {
setEditGroupId(groupId)
setGroupVisible((state)=> !state)
}
const deleteGroup = (groupId) => {
//this.props.groupActions.deleteGroup(this.props.shortName, groupId);
}
const reorderGroup = (oldIndex, newIndex) => {
/*this.props.groupActions.reorderGroup(
this.props.shortName,
oldIndex,
newIndex
);*/
}
const editGroup = (groupId) => {
setEditGroupId(groupId)
setGroupVisible((state) => !state)
}
const handleGroupClose = () => {
setEditGroupId(false)
setGroupVisible(false)
const deleteGroup = async (groupId) => {
for (const num in groupsData) {
if (groupsData[num]._id == groupId) {
await deleteGroupAPI(groupsData[num])
}
}
const handleGroupToggle = () => {
setEditGroupId(false)
setGroupVisible((state)=> !state)
}
const reorderGroup = (oldIndex, newIndex) => {
if ((newIndex < 0) || (newIndex > (groupOrder.length - 1))) {
return
}
const handleExport = () => {
/* this.props.talkgroupActions
.exportTalkgroups(this.props.system.shortName)
.then(requestMessage => {
if (requestMessage) {
// report to the user is there was a problem during registration
this.setState({ requestMessage });
}
});*/
}
const saveGroupOrder = () => {
/*const order = this.props.groups.map(x => x._id);
const data = {
groupOrder: JSON.stringify(order)
};
this.props.groupActions
.saveGroupOrder(this.props.system.shortName, data)
.then(requestMessage => {
if (requestMessage) {
}
});*/
}
const handleUpload = (file) => {
/*this.props.talkgroupActions
.importTalkgroups(this.props.system.shortName, file)
.then(requestMessage => {
if (requestMessage) {
// report to the user is there was a problem during registration
this.setState({ requestMessage });
}
});*/
}
const handleSystemDeleteConfirm = () => {
setOpenSystemDeleteConfirm(false);
/*
this.props.systemActions
.deleteSystem(this.props.system.shortName)
.then(requestMessage => {
if (requestMessage) {
// report to the user is there was a problem during login
this.setState({ requestMessage: requestMessage, openMessage: true });
}
});*/
const moveOrder = groupOrder.slice();
moveOrder.splice(newIndex, 0, moveOrder.splice(oldIndex, 1)[0]);
setGroupOrder(moveOrder);
}
const handleGroupClose = () => {
setEditGroupId(false)
setGroupVisible(false)
}
const handleGroupToggle = () => {
setEditGroupId(false)
setGroupVisible((state) => !state)
}
const handleExport = () => {
/* this.props.talkgroupActions
.exportTalkgroups(this.props.system.shortName)
.then(requestMessage => {
if (requestMessage) {
// report to the user is there was a problem during registration
this.setState({ requestMessage });
}
});*/
}
const saveGroupOrder = async () => {
await reorderGroupsAPI({shortName: shortName, order: {groupOrder: JSON.stringify(groupOrder)}});
/*const order = this.props.groups.map(x => x._id);
const data = {
groupOrder: JSON.stringify(order)
};
const handleSystemDeleteCancel = () => setOpenSystemDeleteConfirm(false);
this.props.groupActions
.saveGroupOrder(this.props.system.shortName, data)
.then(requestMessage => {
if (requestMessage) {
}
});*/
}
let system = false;
const handleUpload = (file) => {
/*this.props.talkgroupActions
.importTalkgroups(this.props.system.shortName, file)
.then(requestMessage => {
if (requestMessage) {
// report to the user is there was a problem during registration
this.setState({ requestMessage });
}
});*/
}
const handleSystemDeleteConfirm = () => {
setOpenSystemDeleteConfirm(false);
/*
this.props.systemActions
.deleteSystem(this.props.system.shortName)
.then(requestMessage => {
if (requestMessage) {
// report to the user is there was a problem during login
this.setState({ requestMessage: requestMessage, openMessage: true });
}
});*/
};
const handleSystemDeleteCancel = () => setOpenSystemDeleteConfirm(false);
let system = false;
if (isSystemsSuccess) {
system = systemsData.systems.find(sys=>sys.shortName == shortName);
system = systemsData.systems.find(sys => sys.shortName == shortName);
}
useEffect(() => {
if (isSystemsSuccess) {
processStatistics(systemsData.stats[shortName])
}
},[isSystemsSuccess]);
if (groupsData) {
let newOrder = [];
groupsData.forEach(group => {
newOrder.push(group._id);
});
setGroupOrder(newOrder);
}
}, [groupsData])
useEffect(() => {
if (isSystemsSuccess) {
processStatistics(systemsData.stats[shortName])
}
}, [isSystemsSuccess]);
useEffect(() => {
if (isErrorsSuccess) {
processErrors(errorData)
}
},[isErrorsSuccess]);
}, [isErrorsSuccess]);
let fileInput = null;
var location = "";
@@ -266,6 +283,7 @@ const System = (props) => {
<Button onClick={saveGroupOrder} > Save Order</Button>
<ListGroups
groups={groupsData}
order={groupOrder}
reorderGroup={reorderGroup}
deleteGroup={deleteGroup}
editGroup={editGroup}
@@ -333,7 +351,7 @@ const System = (props) => {
<Segment clearing={true}>
<Button
color="red"
onClick={ ()=>setOpenSystemDeleteConfirm(true)}
onClick={() => setOpenSystemDeleteConfirm(true)}
disabled={!isSystemsSuccess}
content="Delete"
floated="right"
@@ -515,7 +533,7 @@ const System = (props) => {
<GroupModal
shortName={system.shortName}
shortName={shortName}
editGroupId={editGroupId}
open={groupVisible}
onClose={handleGroupClose}
@@ -548,7 +566,7 @@ const System = (props) => {
pointing: true
}}
panes={panes}
//defaultActiveIndex={activeTab}
//defaultActiveIndex={activeTab}
/>
</Container>
}

148
admin/src/features/api/apiSlice.js
View File

@@ -1,73 +1,97 @@
// Import the RTK Query methods from the React-specific entry point
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { createSelector} from '@reduxjs/toolkit'
import { createSelector } from '@reduxjs/toolkit'
// Define our single API slice object
export const apiSlice = createApi({
// The cache reducer expects to be added at `state.api` (already default - this is optional)
reducerPath: 'api',
// All of our requests will have URLs starting with '/fakeApi'
baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_ADMIN_SERVER}),
// The "endpoints" represent operations and requests for this server
endpoints: builder => ({
// The `getPosts` endpoint is a "query" operation that returns data
getTalkgroups: builder.query({
// The URL for the request is '/fakeApi/posts'
query: (shortName) => ({ url: `/talkgroups/${shortName}`, credentials: "include" })
}),
getGroups: builder.query({
// The URL for the request is '/fakeApi/posts'
query: (shortName) => ({ url: `/groups/${shortName}`, credentials: "include" })
}),
getErrors: builder.query({
// The URL for the request is '/fakeApi/posts'
query: (shortName) => ({ url: `${process.env.REACT_APP_BACKEND_SERVER}/${shortName}/errors`})
}),
updateGroup: builder.mutation({
query: (group) => ({
url: `/groups/${group.shortName}/${group._id}`,
method: 'POST',
credentials: "include",
body: group,
}),
async onQueryStarted(group, { dispatch, queryFulfilled }) {
try {
const { data: updatedGroup } = await queryFulfilled
const patchResult = dispatch(
apiSlice.util.updateQueryData('getGroups', updatedGroup.shortName, (groups) => {
const groupIndex = groups.findIndex((obj => obj.groupId == updatedGroup.groupId));
groups[groupIndex] = updatedGroup;
})
)
} catch {}
},
}),
createGroup: builder.mutation({
query: (group) => ({
url: `/groups/${group.shortName}`,
method: 'POST',
credentials: "include",
body: group,
}),
async onQueryStarted(group, { dispatch, queryFulfilled }) {
try {
const { data: newGroup } = await queryFulfilled;
const patchResult = dispatch(
apiSlice.util.updateQueryData('getGroups', newGroup.shortName, (groups) => {
groups.push(newGroup);
})
)
} catch {}
},
}),
getSystems: builder.query({
// The URL for the request is '/fakeApi/posts'
query: () => ({ url: `/systems`, credentials: "include" })
})
// The cache reducer expects to be added at `state.api` (already default - this is optional)
reducerPath: 'api',
// All of our requests will have URLs starting with '/fakeApi'
baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_ADMIN_SERVER }),
// The "endpoints" represent operations and requests for this server
endpoints: builder => ({
// The `getPosts` endpoint is a "query" operation that returns data
getTalkgroups: builder.query({
// The URL for the request is '/fakeApi/posts'
query: (shortName) => ({ url: `/talkgroups/${shortName}`, credentials: "include" })
}),
getGroups: builder.query({
// The URL for the request is '/fakeApi/posts'
query: (shortName) => ({ url: `/groups/${shortName}`, credentials: "include" }),
providesTags: (result, error, arg) =>
result
? [...result.map(({ _id }) => ({ type: 'Group', _id })), 'Group']
: ['Group'],
}),
getErrors: builder.query({
// The URL for the request is '/fakeApi/posts'
query: (shortName) => ({ url: `${process.env.REACT_APP_BACKEND_SERVER}/${shortName}/errors` })
}),
updateGroup: builder.mutation({
query: (group) => ({
url: `/groups/${group.shortName}/${group._id}`,
method: 'POST',
credentials: "include",
body: group,
}),
async onQueryStarted(group, { dispatch, queryFulfilled }) {
try {
const { data: updatedGroup } = await queryFulfilled
const patchResult = dispatch(
apiSlice.util.updateQueryData('getGroups', updatedGroup.shortName, (groups) => {
const groupIndex = groups.findIndex((obj => obj.groupId == updatedGroup.groupId));
groups[groupIndex] = updatedGroup;
})
)
} catch { }
},
}),
createGroup: builder.mutation({
query: (group) => ({
url: `/groups/${group.shortName}`,
method: 'POST',
credentials: "include",
body: group,
}),
async onQueryStarted(group, { dispatch, queryFulfilled }) {
try {
const { data: newGroup } = await queryFulfilled;
const patchResult = dispatch(
apiSlice.util.updateQueryData('getGroups', newGroup.shortName, (groups) => {
groups.push(newGroup);
})
)
} catch { }
},
}),
deleteGroup: builder.mutation({
query: (group) => ({
url: `/groups/${group.shortName}/${group._id}`,
method: 'DELETE',
credentials: "include"
}),
invalidatesTags: (result, error, group) => [{ type: 'Group', id: group._id }],
}),
saveGroupOrder: builder.mutation({
query: ({shortName, order}) => ({
url: `/groups/${shortName}/reorder`,
method: 'POST',
credentials: "include",
body: order,
}),
//invalidatesTags: (result, error, group) => ['Group'],
}),
getSystems: builder.query({
// The URL for the request is '/fakeApi/posts'
query: () => ({ url: `/systems`, credentials: "include" })
})
})
})
// Export the auto-generated hook for the `getPosts` query endpoint
export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery} = apiSlice
export const { useGetGroupsQuery, useGetSystemsQuery, useGetTalkgroupsQuery, useGetErrorsQuery, useDeleteGroupMutation, useCreateGroupMutation, useSaveGroupOrderMutation, useUpdateGroupMutation } = apiSlice