-
+const SubmissionList = ({ data }) => {
+ const { t } = useTranslation();
+
+ const { isLoggedIn, isRole, user } = useUserContext();
+
+ const [tableData, setTableData] = useState([]);
+
+ const [claiming, setClaiming] = useState({ submissionId: null, value: false });
+
+ const [reviewing, setReviewing] = useState({ submissionId: null, value: false });
+
+ const [updateSubmission] = useMutation(UPDATE_SUBMISSION);
+
+ const addToast = useToastContext();
+
+ useEffect(() => {
+ if (data) {
+ setTableData(data.submissions);
+ }
+ }, [data]);
+
+ const claimSubmission = async (submissionId) => {
+ setClaiming({ submissionId, value: true });
+ try {
+ const submission = data.submissions.find((submission) => submission._id === submissionId);
+
+ const incidentEditors = [...submission.incident_editors];
+
+ const isAlreadyEditor = submission.incident_editors.find(
+ (editor) => editor.userId === user.customData.userId
+ );
+
+ if (!isAlreadyEditor) {
+ incidentEditors.push(user.customData.userId);
+
+ await updateSubmission({
+ variables: {
+ query: {
+ _id: submissionId,
+ },
+ set: { incident_editors: { link: incidentEditors } },
+ },
+ });
+ }
+
+ setClaiming({ submissionId: null, value: false });
+ } catch (error) {
+ addToast({
+ message: t(`There was an error claiming this submission. Please try again.`),
+ severity: SEVERITY.danger,
+ });
+
+ setClaiming({ submissionId: null, value: false });
+ }
+ };
+
+ const defaultColumn = React.useMemo(
+ () => ({
+ Filter: DefaultColumnFilter,
+ Header: DefaultColumnHeader,
+ }),
+ []
+ );
+
+ function SelectEditorsColumnFilter({
+ column: { filterValue = [], setFilter, preFilteredRows, id },
+ }) {
+ let options;
+
+ options = React.useMemo(() => {
+ let options = [];
+
+ preFilteredRows.forEach((row) => {
+ if (row.values[id]) {
+ let editors = row.values[id]
+ .filter((editor) => {
+ return editor.first_name && editor.last_name;
+ })
+ .reduce((acc, editor) => {
+ const name = `${editor.first_name} ${editor.last_name}`;
+
+ if (!options.find((e) => e === name)) {
+ acc.push(name);
+ }
+ return acc;
+ }, []);
+
+ options = options.concat(editors);
+ }
+ });
+ return options;
+ }, [id, preFilteredRows]);
+
+ return (
+
+ );
+ }
+
+ function SelectStatusFilter({ column: { filterValue = [], setFilter, preFilteredRows, id } }) {
+ let options;
+
+ options = React.useMemo(() => {
+ const options = [];
+
+ Object.values(STATUS).forEach((status) => {
+ options.push(status);
+ });
+ return options;
+ }, [id, preFilteredRows]);
+
+ return (
+
+ );
+ }
+
+ const [dateFilter, setDateFilter] = useState('incident_date');
+
+ const [dateValues, setDateValues] = useState([]);
+
+ function SelectDatesColumnFilter({ column }) {
+ return (
+
+
+
+ {
+ 0 ? dateValues[0] : null}
+ endDate={dateValues.length > 1 ? dateValues[1] : null}
+ setDates={(vals) => {
+ setDateValues(vals);
+ }}
+ />
+ }
+
+
+ );
+ }
+
+ const columns = React.useMemo(() => {
+ const columns = [
+ {
+ className: 'min-w-[300px]',
+ title: t('Title'),
+ accessor: 'title',
+ width: 300,
+ },
+ {
+ className: 'min-w-[150px]',
+ title: t('Submitters'),
+ accessor: 'submitters',
+ width: 150,
+ Filter: SelectColumnFilter,
+ Cell: ({ row: { values } }) => {
+ return (
+
+ {values.submitters.map((submitter, index) => {
+ return (
+
+ {submitter}
+
+ );
+ })}
- ))}
-
-
+ );
+ },
+ },
+ {
+ className: 'min-w-[220px]',
+ width: 220,
+ title: t('Dates'),
+ accessor: 'incident_date',
+ Filter: SelectDatesColumnFilter,
+ sortType: (rowA, rowB) => {
+ if (
+ rowA.original[dateFilter] &&
+ rowA.original[dateFilter] !== '' &&
+ rowB.original[dateFilter] &&
+ rowB.original[dateFilter] !== ''
+ ) {
+ const dateRowA = new Date(rowA.original[dateFilter]);
+
+ const dateRowB = new Date(rowB.original[dateFilter]);
+
+ if (dateRowA > dateRowB) {
+ return 1;
+ }
+
+ if (dateRowA < dateRowB) {
+ return -1;
+ }
+
+ return 0;
+ }
+ },
+ filter: (rows, _field, value) =>
+ rows.filter((row) => {
+ let fields = [dateFilter];
+
+ const matchingFields = fields.filter((field) => {
+ const rowDate = Date.parse(row.original[field]);
+
+ return value[0] <= rowDate && rowDate <= value[1];
+ });
+
+ return matchingFields.length > 0;
+ }),
+ Cell: ({ row }) => {
+ const values = row.values;
+
+ const dateSubmitted = row.original.date_submitted;
+
+ const datePublished = row.original.date_published;
+
+ return (
+
+ {values.incident_date && (
+
+ {`Inc: ${values.incident_date}`}
+
+ )}
+ {dateSubmitted && (
+
+ {`Sub: ${dateSubmitted}`}
+
+ )}
+ {datePublished && (
+
+ {`Pub: ${datePublished}`}
+
+ )}
+
+ );
+ },
+ },
+ {
+ title: t('Editors'),
+ accessor: 'incident_editors',
+ className: 'min-w-[150px]',
+ width: 150,
+ Filter: SelectEditorsColumnFilter,
+ filter: (rows, [field], value) =>
+ rows.filter((row) => {
+ let rowValue = row.values[field];
+
+ if (value === 'unassigned') return rowValue.length === 0;
+
+ const results = rowValue.filter((editor) => {
+ const fullName = `${editor.first_name} ${editor.last_name}`;
+
+ return fullName.toLowerCase().includes(value.toLowerCase());
+ });
+
+ return results.length > 0;
+ }),
+ Cell: ({ row: { values } }) => {
+ const editors = values.incident_editors;
+
+ if (!editors || editors.length <= 0) return <>;
+
+ return (
+
+ {editors.map((editor) => {
+ const firstName = editor.first_name || '';
+
+ const lastName = editor.last_name || '';
+
+ const fullName = `${firstName} ${lastName}`;
+
+ return (
+
+ {fullName}
+
+ );
+ })}
+
+ );
+ },
+ },
+ {
+ title: t('Status'),
+ className: 'min-w-[200px]',
+ accessor: 'status',
+ width: 200,
+ Filter: SelectStatusFilter,
+ filter: (rows, [field], value) =>
+ rows.filter((row) => {
+ let rowValue = row.values[field];
+
+ if (!rowValue) {
+ rowValue = STATUS.pendingReview.name;
+ }
+ return rowValue === value;
+ }),
+ Cell: ({ row: { values } }) => {
+ let color =
+ STATUS[values.status]?.color ||
+ 'bg-orange-100 text-orange-800 dark:bg-orange-200 dark:text-orange-900';
+
+ return (
+
+
+ {STATUS[values.status]?.text || STATUS.pendingReview.text}
+
+
+ );
+ },
+ },
+ ];
+
+ if (isRole('incident_editor')) {
+ columns.push({
+ title: t('Actions'),
+ accessor: '_id',
+ className: 'min-w-[200px]',
+ width: 'auto',
+ disableFilters: true,
+ disableSortBy: true,
+ disableResizing: true,
+ Cell: ({ row: { values } }) => (
+
+
+ {!values.editor && (
+
+ )}
+
+ ),
+ });
+ }
+
+ return columns;
+ }, [isLoggedIn, claiming, reviewing, dateFilter]);
+
+ const table = useTable(
+ {
+ columns,
+ data: tableData,
+ defaultColumn,
+ },
+ useFilters,
+ useSortBy,
+ usePagination,
+ useBlockLayout,
+ useResizeColumns
+ );
+
+ const setSubmissionStatus = async (submission) => {
+ if (submission.status !== STATUS.inReview.name) {
+ setReviewing({ submissionId: submission._id, value: true });
+ try {
+ await updateSubmission({
+ variables: {
+ query: {
+ _id: submission._id,
+ },
+ set: { status: STATUS.inReview.name },
+ },
+ });
+ setReviewing({ submissionId: submission._id, value: false });
+ } catch (error) {
+ addToast({
+ message: t(`There was an error updating this submission. Please try again.`),
+ severity: SEVERITY.danger,
+ });
+ setReviewing({ submissionId: submission._id, value: false });
+ }
+ }
+ };
+
+ return (
+
);
};
diff --git a/site/gatsby-site/src/components/submissions/SubmissionListWrapper.js b/site/gatsby-site/src/components/submissions/SubmissionListWrapper.js
new file mode 100644
index 0000000000..e19ce8e299
--- /dev/null
+++ b/site/gatsby-site/src/components/submissions/SubmissionListWrapper.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import Link from '../ui/Link';
+import { FIND_SUBMISSIONS } from '../../graphql/submissions';
+import { useQuery } from '@apollo/client';
+import { Trans } from 'react-i18next';
+import ListSkeleton from 'elements/Skeletons/List';
+import SubmissionList from './SubmissionList';
+
+const SubmissionListWrapper = () => {
+ const { data, loading } = useQuery(FIND_SUBMISSIONS);
+
+ return (
+ <>
+
+
+ The following incident reports have been submitted by
+ users and are pending review by editors. Only editors may promote these records to
+ incident reports in the database.
+
+
+ {loading &&
}
+ {data &&
}
+
+ );
+};
+
+export default SubmissionListWrapper;
diff --git a/site/gatsby-site/src/components/submissions/schemas.js b/site/gatsby-site/src/components/submissions/schemas.js
index c9cac47939..ab4eec1ece 100644
--- a/site/gatsby-site/src/components/submissions/schemas.js
+++ b/site/gatsby-site/src/components/submissions/schemas.js
@@ -1,6 +1,11 @@
import * as yup from 'yup';
import { dateRegExp, isPastDate } from '../../utils/date';
+const incident_title = yup
+ .string()
+ .min(6, '*Title must have at least 6 characters')
+ .max(500, "*Titles can't be longer than 500 characters");
+
const developers = yup.array(
yup
.string()
@@ -110,6 +115,7 @@ export const schema = yup.object().shape({
});
export const incidentSchema = schema.shape({
+ incident_title: incident_title.required('*Incident Title is required.'),
developers: developers.required(),
deployers: deployers.required(),
harmed_parties: harmed_parties.required(),
diff --git a/site/gatsby-site/src/components/ui/Table.js b/site/gatsby-site/src/components/ui/Table.js
index 7cd6036405..b40273b549 100644
--- a/site/gatsby-site/src/components/ui/Table.js
+++ b/site/gatsby-site/src/components/ui/Table.js
@@ -71,6 +71,9 @@ export function DefaultDateCell({ cell }) {
export function SelectDatePickerFilter({
column: { filterValue = [], preFilteredRows, setFilter, id },
+ startDate = null,
+ endDate = null,
+ setDates = null,
}) {
const [min, max] = React.useMemo(() => {
let min = new Date(preFilteredRows[0]?.values[id] ?? '1970-01-01').getTime();
@@ -95,32 +98,56 @@ export function SelectDatePickerFilter({
picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY')
);
setFilter([picker.startDate.valueOf(), picker.endDate.valueOf()]);
+
+ if (setDates) {
+ setDates([picker.startDate.valueOf(), picker.endDate.valueOf()]);
+ }
};
const handleCancel = (event, picker) => {
picker.element.val('');
setFilter([min, max]);
+ if (setDates) {
+ setDates([]);
+ }
+ };
+
+ let initialSettings = {
+ showDropdowns: true,
+ autoUpdateInput: false,
+ locale: {
+ cancelLabel: 'Clear',
+ },
};
+ let defaultValue = '';
+
+ if (startDate && endDate) {
+ const formatedStartDate = format(new Date(startDate), 'MM/dd/yyyy');
+
+ const formatedEndDate = format(new Date(endDate), 'MM/dd/yyyy');
+
+ defaultValue = `${formatedStartDate} - ${formatedEndDate}`;
+ initialSettings = {
+ ...initialSettings,
+ startDate: formatedStartDate,
+ endDate: formatedEndDate,
+ };
+ }
+
return (
@@ -231,15 +258,33 @@ export default function Table({
{headerGroups.map((headerGroup) => (
- {headerGroup.headers.map((column) => (
- |
- {column.render('Header')}
- |
- ))}
+ {headerGroup.headers.map((column) => {
+ let headerProps = column.getHeaderProps();
+
+ const style = { ...headerProps.style };
+
+ if (column.width) {
+ style.width = Number.isInteger(column.width)
+ ? `${column.width}px`
+ : column.width; // Allows auto value
+ }
+ headerProps = { ...headerProps, style };
+ return (
+
+ {column.render('Header')}
+ {column.getResizerProps && (
+
+ )}
+ |
+ );
+ })}
))}
@@ -257,10 +302,23 @@ export default function Table({
data-cy={`row`}
>
{row.cells.map((cell) => {
+ const cellOriginalWidth = cell.column?.originalWidth;
+
+ let cellProps = cell.getCellProps();
+
+ if (cellOriginalWidth) {
+ cellProps = {
+ ...cellProps,
+ style: {
+ ...cellProps.style,
+ minWidth: `${cellOriginalWidth}px`, //Doesn't allow resizing under the min-width
+ },
+ };
+ }
return (
{cell.render('Cell')}
diff --git a/site/gatsby-site/src/elements/ProgessCircle/index.js b/site/gatsby-site/src/elements/ProgessCircle/index.js
new file mode 100644
index 0000000000..70db615206
--- /dev/null
+++ b/site/gatsby-site/src/elements/ProgessCircle/index.js
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+
+const ProgressCircle = ({
+ percentage,
+ size = 50,
+ strokeWidth = 5,
+ className = '',
+ color = null,
+}) => {
+ const [offset, setOffset] = useState(0);
+
+ useEffect(() => {
+ const progress = percentage / 100;
+
+ const circumference = 2 * Math.PI * (size / 2 - strokeWidth / 2);
+
+ setOffset(circumference * (1 - progress));
+ }, [size, strokeWidth, percentage]);
+
+ return (
+
+ );
+};
+
+export default ProgressCircle;
diff --git a/site/gatsby-site/src/graphql/submissions.js b/site/gatsby-site/src/graphql/submissions.js
index 672a60649c..731f84671e 100644
--- a/site/gatsby-site/src/graphql/submissions.js
+++ b/site/gatsby-site/src/graphql/submissions.js
@@ -55,6 +55,7 @@ export const FIND_SUBMISSIONS = gql`
entity_id
name
}
+ status
user {
userId
}
@@ -108,6 +109,7 @@ export const FIND_SUBMISSION = gql`
}
editor_similar_incidents
editor_dissimilar_incidents
+ status
}
}
`;
diff --git a/site/gatsby-site/src/graphql/users.js b/site/gatsby-site/src/graphql/users.js
index e25caf6db0..f276fec1a0 100644
--- a/site/gatsby-site/src/graphql/users.js
+++ b/site/gatsby-site/src/graphql/users.js
@@ -39,6 +39,23 @@ export const FIND_USER = gql`
}
`;
+export const FIND_USERS_BY_ROLE = gql`
+ query FindUsersByRole($role: String!) {
+ users(query: { roles_in: [$role] }) {
+ roles
+ userId
+ first_name
+ last_name
+ adminData {
+ email
+ disabled
+ creationDate
+ lastAuthenticationDate
+ }
+ }
+ }
+`;
+
export const UPDATE_USER_ROLES = gql`
mutation UpdateUserRoles($roles: [String]!, $userId: String) {
updateOneUser(query: { userId: $userId }, set: { roles: $roles }) {
diff --git a/site/gatsby-site/src/pages/apps/submitted.js b/site/gatsby-site/src/pages/apps/submitted.js
index 4663c148e9..77ca81d756 100644
--- a/site/gatsby-site/src/pages/apps/submitted.js
+++ b/site/gatsby-site/src/pages/apps/submitted.js
@@ -4,13 +4,19 @@ import { ObjectId } from 'bson';
import { useMutation, useQuery } from '@apollo/client';
import { DELETE_QUICKADD, FIND_QUICKADD } from '../../graphql/quickadd.js';
import { useUserContext } from '../../contexts/userContext';
-import SubmissionList from '../../components/submissions/SubmissionList';
+import SubmissionListWrapper from '../../components/submissions/SubmissionListWrapper';
import useToastContext, { SEVERITY } from '../../hooks/useToast';
import { Trans, useTranslation } from 'react-i18next';
import ListSkeleton from 'elements/Skeletons/List';
import { Badge, Button, ListGroup } from 'flowbite-react';
+import { useQueryParam } from 'use-query-params';
+import SubmissionEdit from 'components/submissions/SubmissionEdit';
const SubmittedIncidentsPage = ({ ...props }) => {
+ const [id] = useQueryParam('editSubmission');
+
+ const [pageLoading, setPageLoading] = useState(true);
+
const { isRole } = useUserContext();
const isAdmin = isRole('admin');
@@ -27,8 +33,12 @@ const SubmittedIncidentsPage = ({ ...props }) => {
// Respond to a successful fetch of the quickadd data
useEffect(() => {
+ if (id) {
+ setPageLoading(false);
+ }
if (!loading && !error && data) {
setQuickAdds(data['quickadds']);
+ setPageLoading(false);
} else if (!loading && error) {
addToast({
message: (
@@ -39,8 +49,9 @@ const SubmittedIncidentsPage = ({ ...props }) => {
severity: SEVERITY.danger,
error,
});
+ setPageLoading(false);
}
- }, [loading, data, error]);
+ }, [id, loading, data, error]);
const submitDeleteQuickAdd = async (id) => {
const bsonID = new ObjectId(id);
@@ -80,77 +91,102 @@ const SubmittedIncidentsPage = ({ ...props }) => {
return (
<>
- {t('Submitted Incident Report List')}
+ {id ? (
+ {t('Edit submission')}
+ ) : (
+ {t('Submitted Incident Report List')}
+ )}
-
-
- Submitted Incident Report List
-
-
-
-
-
-
- Quick Add URLs
-
-
-
- These reports were added anonymously by users in the Quick Add form on the landing
- page
-
-
-
- {sortedQuickAdds.length < 1 && }
- {sortedQuickAdds.map(({ _id, url, date_submitted }) => (
-
-
-
-
- ))}
-
-
-
);
diff --git a/site/gatsby-site/src/utils/submissions.js b/site/gatsby-site/src/utils/submissions.js
new file mode 100644
index 0000000000..1823fd0972
--- /dev/null
+++ b/site/gatsby-site/src/utils/submissions.js
@@ -0,0 +1,22 @@
+const isEmpty = require('lodash/isEmpty');
+
+const filter = require('lodash/filter');
+
+module.exports.STATUS = {
+ inReview: {
+ name: 'inReview',
+ text: 'In Review',
+ color: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-200 dark:text-yellow-900',
+ },
+ pendingReview: {
+ name: 'pendingReview',
+ text: 'Pending Review',
+ color: 'bg-orange-100 text-orange-800 dark:bg-orange-200 dark:text-orange-900',
+ },
+};
+
+module.exports.getRowCompletionStatus = (properties) => {
+ const nonEmptyCount = filter(properties, (value) => !isEmpty(value)).length;
+
+ return Math.ceil((nonEmptyCount / properties.length) * 100);
+};
diff --git a/site/gatsby-site/tailwind.config.js b/site/gatsby-site/tailwind.config.js
index f7b099bf99..009d6f2859 100644
--- a/site/gatsby-site/tailwind.config.js
+++ b/site/gatsby-site/tailwind.config.js
@@ -18,6 +18,14 @@ let safelist = [
'tw-btn-link',
'bg-amber-400',
'tw-toast',
+ 'bg-orange-100',
+ 'text-orange-800',
+ 'dark:bg-orange-200',
+ 'dark:text-orange-900',
+ 'bg-yellow-100',
+ 'text-yellow-800',
+ 'dark:bg-yellow-200',
+ 'dark:text-yellow-900',
];
// Whitelisting level options from ListItem component
diff --git a/site/realm/data_sources/mongodb-atlas/aiidprod/submissions/schema.json b/site/realm/data_sources/mongodb-atlas/aiidprod/submissions/schema.json
index 6974bb563d..25c0c79fea 100644
--- a/site/realm/data_sources/mongodb-atlas/aiidprod/submissions/schema.json
+++ b/site/realm/data_sources/mongodb-atlas/aiidprod/submissions/schema.json
@@ -144,6 +144,9 @@
},
"user": {
"bsonType": "string"
+ },
+ "status": {
+ "bsonType": "string"
}
},
"required": [
|