mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 12:50:43 +00:00
CE-882 Initial checkin
This commit is contained in:
481
src/qqq/components/sharing/ShareModal.tsx
Normal file
481
src/qqq/components/sharing/ShareModal.tsx
Normal file
@ -0,0 +1,481 @@
|
||||
/*
|
||||
* QQQ - Low-code Application Framework for Engineers.
|
||||
* Copyright (C) 2021-2024. Kingsrook, LLC
|
||||
* 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States
|
||||
* contact@kingsrook.com
|
||||
* https://github.com/Kingsrook/
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU Affero General Public License as
|
||||
* published by the Free Software Foundation, either version 3 of the
|
||||
* License, or (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU Affero General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU Affero General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData";
|
||||
import {QJobComplete} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobComplete";
|
||||
import {QJobError} from "@kingsrook/qqq-frontend-core/lib/model/processes/QJobError";
|
||||
import {QRecord} from "@kingsrook/qqq-frontend-core/lib/model/QRecord";
|
||||
import {Alert} from "@mui/material";
|
||||
import Autocomplete from "@mui/material/Autocomplete";
|
||||
import Box from "@mui/material/Box";
|
||||
import Button from "@mui/material/Button";
|
||||
import Card from "@mui/material/Card";
|
||||
import Icon from "@mui/material/Icon";
|
||||
import Modal from "@mui/material/Modal";
|
||||
import TextField from "@mui/material/TextField";
|
||||
import Tooltip from "@mui/material/Tooltip/Tooltip";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import FormData from "form-data";
|
||||
import colors from "qqq/assets/theme/base/colors";
|
||||
import {QCancelButton} from "qqq/components/buttons/DefaultButtons";
|
||||
import Client from "qqq/utils/qqq/Client";
|
||||
import React, {useEffect, useReducer, useState} from "react";
|
||||
|
||||
interface ShareModalProps
|
||||
{
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
tableMetaData: QTableMetaData;
|
||||
record: QRecord;
|
||||
}
|
||||
|
||||
ShareModal.defaultProps = {};
|
||||
|
||||
|
||||
interface CurrentShare
|
||||
{
|
||||
shareId: any;
|
||||
scopeId: string;
|
||||
audienceType: string;
|
||||
audienceId: any;
|
||||
audienceLabel: string;
|
||||
}
|
||||
|
||||
interface Scope
|
||||
{
|
||||
id: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
const scopeOptions: Scope[] = [
|
||||
{id: "READ_ONLY", label: "Read-Only"},
|
||||
{id: "READ_WRITE", label: "Read and Edit"}
|
||||
];
|
||||
|
||||
const defaultScope = scopeOptions[0];
|
||||
|
||||
const qController = Client.getInstance();
|
||||
|
||||
/*******************************************************************************
|
||||
** component containing a Modal dialog for sharing records
|
||||
*******************************************************************************/
|
||||
export default function ShareModal({open, onClose, tableMetaData, record}: ShareModalProps): JSX.Element
|
||||
{
|
||||
const [statusString, setStatusString] = useState("Loading...");
|
||||
const [alert, setAlert] = useState(null as string);
|
||||
|
||||
const [selectedAudienceType, setSelectedAudienceType] = useState(null);
|
||||
const [selectedAudienceId, setSelectedAudienceId] = useState(null);
|
||||
const [selectedScopeId, setSelectedScopeId] = useState(defaultScope.id);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
const [currentShares, setCurrentShares] = useState([] as CurrentShare[])
|
||||
const [needToLoadCurrentShares, setNeedToLoadCurrentShares] = useState(true);
|
||||
const [everLoadedCurrentShares, setEverLoadedCurrentShares] = useState(false);
|
||||
|
||||
const [, forceUpdate] = useReducer((x) => x + 1, 0);
|
||||
|
||||
|
||||
/////////////////////////////////////////////////////////
|
||||
// trigger initial load, and post any changes, re-load //
|
||||
/////////////////////////////////////////////////////////
|
||||
useEffect(() =>
|
||||
{
|
||||
if(needToLoadCurrentShares)
|
||||
{
|
||||
loadShares();
|
||||
}
|
||||
}, [needToLoadCurrentShares]);
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function close(event: object, reason: string)
|
||||
{
|
||||
if (reason === "backdropClick" || reason === "escapeKeyDown")
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
onClose();
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function handleAudienceChange(event: React.SyntheticEvent, value: any | any[], reason: string)
|
||||
{
|
||||
if(value)
|
||||
{
|
||||
const [audienceType, audienceId] = value.id.split(":");
|
||||
setSelectedAudienceType(audienceType);
|
||||
setSelectedAudienceId(audienceId);
|
||||
}
|
||||
else
|
||||
{
|
||||
setSelectedAudienceType(null);
|
||||
setSelectedAudienceId(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function handleScopeChange(event: React.SyntheticEvent, value: any | any[], reason: string)
|
||||
{
|
||||
if(value)
|
||||
{
|
||||
setSelectedScopeId(value.id);
|
||||
}
|
||||
else
|
||||
{
|
||||
setSelectedScopeId(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function editingExistingShareScope(shareId: number, value: any | any[])
|
||||
{
|
||||
setStatusString("Saving...");
|
||||
setAlert(null);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("tableName", tableMetaData.name);
|
||||
formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
|
||||
formData.append("shareId", shareId);
|
||||
formData.append("scopeId", value.id);
|
||||
|
||||
const processResult = await qController.processRun("editSharedRecord", formData, null, true);
|
||||
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
setStatusString(null);
|
||||
setAlert("Error editing shared record: " + jobError.error);
|
||||
setSubmitting(false)
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
setStatusString(null);
|
||||
setAlert(null);
|
||||
setNeedToLoadCurrentShares(true);
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function loadShares()
|
||||
{
|
||||
setNeedToLoadCurrentShares(false);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("tableName", tableMetaData.name);
|
||||
formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
|
||||
const processResult = await qController.processRun("getSharedRecords", formData, null, true);
|
||||
|
||||
setStatusString("Loading...");
|
||||
setAlert(null)
|
||||
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
setStatusString(null);
|
||||
setAlert("Error loading: " + jobError.error);
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
|
||||
const newCurrentShares: CurrentShare[] = [];
|
||||
for (let i in result.values["resultList"])
|
||||
{
|
||||
newCurrentShares.push(result.values["resultList"][i].values);
|
||||
}
|
||||
setCurrentShares(newCurrentShares);
|
||||
setEverLoadedCurrentShares(true);
|
||||
|
||||
setStatusString(null);
|
||||
setAlert(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function saveNewShare()
|
||||
{
|
||||
setSubmitting(true)
|
||||
setStatusString("Saving...");
|
||||
setAlert(null);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("tableName", tableMetaData.name);
|
||||
formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
|
||||
formData.append("audienceType", selectedAudienceType);
|
||||
formData.append("audienceId", selectedAudienceId);
|
||||
formData.append("scopeId", selectedScopeId);
|
||||
|
||||
const processResult = await qController.processRun("insertSharedRecord", formData, null, true);
|
||||
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
setStatusString(null);
|
||||
setAlert("Error sharing record: " + jobError.error);
|
||||
setSubmitting(false)
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
setStatusString(null);
|
||||
setAlert(null);
|
||||
setNeedToLoadCurrentShares(true);
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
async function removeShare(shareId: number)
|
||||
{
|
||||
setStatusString("Deleting...");
|
||||
setAlert(null);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append("tableName", tableMetaData.name);
|
||||
formData.append("recordId", record.values.get(tableMetaData.primaryKeyField));
|
||||
formData.append("shareId", shareId);
|
||||
|
||||
const processResult = await qController.processRun("deleteSharedRecord", formData, null, true);
|
||||
|
||||
if (processResult instanceof QJobError)
|
||||
{
|
||||
const jobError = processResult as QJobError;
|
||||
setStatusString(null);
|
||||
setAlert("Error deleting share: " + jobError.error);
|
||||
}
|
||||
else
|
||||
{
|
||||
const result = processResult as QJobComplete;
|
||||
setNeedToLoadCurrentShares(true);
|
||||
setStatusString(null);
|
||||
setAlert(null);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// todo - need this to be real
|
||||
const audienceOptions = [
|
||||
{id: "user:1", label: "Darin Kelkhoff"},
|
||||
{id: "user:2", label: "Tom Chutterloin"},
|
||||
{id: "user:3", label: "Tylers Ample"},
|
||||
{id: "user:4", label: "Mames Mames"},
|
||||
{id: "group:2", label: "Cold Track Engineering"}
|
||||
];
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function getScopeOption(scopeId: string): Scope
|
||||
{
|
||||
for (let scopeOption of scopeOptions)
|
||||
{
|
||||
if(scopeOption.id == scopeId)
|
||||
{
|
||||
return (scopeOption);
|
||||
}
|
||||
}
|
||||
|
||||
return (null);
|
||||
}
|
||||
|
||||
|
||||
/*******************************************************************************
|
||||
**
|
||||
*******************************************************************************/
|
||||
function renderScopeDropdown(id: string, defaultValue: Scope, onChange: (event: React.SyntheticEvent, value: any | any[], reason: string) => void)
|
||||
{
|
||||
return (
|
||||
<Autocomplete
|
||||
id={id}
|
||||
disabled={id == "new-share-scope" && submitting}
|
||||
renderInput={(params) => (<TextField {...params} label="Scope" variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
|
||||
options={scopeOptions}
|
||||
// @ts-ignore
|
||||
defaultValue={defaultValue}
|
||||
onChange={onChange}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
// @ts-ignore Property label does not exist on string | {thing with label}
|
||||
getOptionLabel={(option) => option.label}
|
||||
autoSelect={true}
|
||||
autoHighlight={true}
|
||||
disableClearable
|
||||
fullWidth
|
||||
sx={autocompleteSX}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
//////////////////////
|
||||
// render the modal //
|
||||
//////////////////////
|
||||
return (<Modal open={open} onClose={close}>
|
||||
<div className="share">
|
||||
<Box sx={{position: "absolute", overflowY: "auto", maxHeight: "100%", width: "100%", display: "flex", height: "100%", flexDirection: "column", justifyContent: "center"}}>
|
||||
<Card sx={{my: 5, mx: "auto", p: 3}}>
|
||||
|
||||
{/* header */}
|
||||
<Box display="flex" flexDirection="row" justifyContent="space-between" alignItems="flex-start">
|
||||
<Typography variant="h4" pb={1} fontWeight="600">
|
||||
Share {tableMetaData.label}: {record?.recordLabel ?? record?.values?.get(tableMetaData.primaryKeyField) ?? "Unknown"}
|
||||
<Box color={colors.gray.main} pb={"0.5rem"} fontSize={"0.875rem"} fontWeight="400" maxWidth="590px">
|
||||
{/* todo move to helpContent (what do we attach the meta-data too??) */}
|
||||
Select a user or a group to share this record with.
|
||||
You can choose if they should only be able to Read the record, or also make Edits to it.
|
||||
</Box>
|
||||
<Box fontSize={14} maxWidth="590px" pb={1} fontWeight="300">
|
||||
{alert && <Alert color="error" onClose={() => setAlert(null)}>{alert}</Alert>}
|
||||
{statusString}
|
||||
</Box>
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* body */}
|
||||
<Box pb={3} display="flex" flexDirection="column">
|
||||
{/* row for adding a new share */}
|
||||
<Box display="flex" flexDirection="row" alignItems="center">
|
||||
<Box width="350px" pr={2}>
|
||||
<Autocomplete
|
||||
id="new-share-audience"
|
||||
disabled={submitting}
|
||||
renderInput={(params) => (<TextField {...params} label="User or Group" variant="outlined" autoComplete="off" type="search" InputProps={{...params.InputProps}} />)}
|
||||
options={audienceOptions}
|
||||
onChange={handleAudienceChange}
|
||||
isOptionEqualToValue={(option, value) => option.id === value.id}
|
||||
// @ts-ignore Property label does not exist on string | {thing with label}
|
||||
getOptionLabel={(option) => option.label}
|
||||
autoSelect={true}
|
||||
autoHighlight={true}
|
||||
disableClearable
|
||||
fullWidth
|
||||
sx={autocompleteSX}
|
||||
/>
|
||||
</Box>
|
||||
<Box width="180px" pr={2}>
|
||||
{renderScopeDropdown("new-share-scope", defaultScope, handleScopeChange)}
|
||||
</Box>
|
||||
<Box>
|
||||
<Tooltip title={selectedAudienceId == null ? "Select a user or group to share with." : null}>
|
||||
<span>
|
||||
<Button disabled={submitting || selectedAudienceId == null} sx={iconButtonSX} onClick={() => saveNewShare()}>
|
||||
<Icon color={selectedAudienceId == null ? "secondary" : "info"}>save</Icon>
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* row showing existing shares */}
|
||||
<Box pt={3}>
|
||||
<Box pb="0.25rem">
|
||||
<h5 style={{fontWeight: "600"}}>Current Shares
|
||||
{
|
||||
everLoadedCurrentShares ? <> ({currentShares.length})</> : <></>
|
||||
}
|
||||
</h5>
|
||||
</Box>
|
||||
<Box sx={{border: `1px solid ${colors.grayLines.main}`, borderRadius: "1rem", overflow: "auto"}} height="180px" pt="0.5rem">
|
||||
{
|
||||
currentShares.map((share) => (
|
||||
<Box key={share.shareId} display="flex" justifyContent="space-between" alignItems="center" p="0.25rem" fontSize="1rem">
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box width="310px" pl="1rem">{share.audienceLabel}</Box>
|
||||
<Box width="160px">{renderScopeDropdown(`scope-${share.shareId}`, getScopeOption(share.scopeId), (event: React.SyntheticEvent, value: any | any[], reason: string) => editingExistingShareScope(share.shareId, value))}</Box>
|
||||
</Box>
|
||||
<Box pr="1rem">
|
||||
<Button sx={{...iconButtonSX, ...redIconButton}} onClick={() => removeShare(share.shareId)}><Icon>clear</Icon></Button>
|
||||
</Box>
|
||||
</Box>
|
||||
))
|
||||
}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
</Box>
|
||||
|
||||
{/* footer */}
|
||||
<Box display="flex" flexDirection="row" justifyContent="flex-end">
|
||||
<QCancelButton label="Done" iconName="check" onClickHandler={() => close(null, null)} disabled={false} />
|
||||
</Box>
|
||||
</Card>
|
||||
</Box>
|
||||
</div>
|
||||
</Modal>);
|
||||
|
||||
}
|
||||
|
||||
const autocompleteSX =
|
||||
{
|
||||
"& .MuiAutocomplete-input": {padding: "0.125rem 0.5rem !important"},
|
||||
"& .MuiOutlinedInput-root": {borderRadius: "0.75rem !important"}
|
||||
};
|
||||
|
||||
const iconButtonSX =
|
||||
{
|
||||
border: `1px solid ${colors.grayLines.main} !important`,
|
||||
borderRadius: "0.75rem",
|
||||
textTransform: "none",
|
||||
fontSize: "1rem",
|
||||
fontWeight: "400",
|
||||
width: "40px",
|
||||
minWidth: "40px",
|
||||
paddingLeft: 0,
|
||||
paddingRight: 0,
|
||||
color: colors.secondary.main,
|
||||
"&:hover": {color: colors.secondary.main},
|
||||
"&:focus": {color: colors.secondary.main},
|
||||
"&:focus:not(:hover)": {color: colors.secondary.main},
|
||||
};
|
||||
|
||||
const redIconButton =
|
||||
{
|
||||
color: colors.error.main,
|
||||
"&:hover": {color: colors.error.main},
|
||||
"&:focus": {color: colors.error.main},
|
||||
"&:focus:not(:hover)": {color: colors.error.main},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user