mirror of
https://github.com/openmhz/trunk-server.git
synced 2026-11-12 08:47:40 -05:00
it works - the group stuff!
This commit is contained in:
Luke Berndt
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user