-
Notifications
You must be signed in to change notification settings - Fork 16
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #605 from psarando/CORE-1955-app-ver-reorder
CORE-1955 App Version Ordering Form
- Loading branch information
Showing
10 changed files
with
395 additions
and
3 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,204 @@ | ||
| /** | ||
| * A form component for setting App version order. | ||
| * | ||
| * @author psarando | ||
| */ | ||
| import React from "react"; | ||
|
|
||
| import { FieldArray, Form, Formik } from "formik"; | ||
| import { useMutation } from "react-query"; | ||
|
|
||
| import { useTranslation } from "i18n"; | ||
|
|
||
| import ids from "./ids"; | ||
| import styles from "./styles"; | ||
|
|
||
| import { announce } from "components/announcer/CyVerseAnnouncer"; | ||
| import { SUCCESS } from "components/announcer/AnnouncerConstants"; | ||
| import withErrorAnnouncer from "components/error/withErrorAnnouncer"; | ||
| import WrappedErrorHandler from "components/error/WrappedErrorHandler"; | ||
| import TableLoading from "components/table/TableLoading"; | ||
| import buildID from "components/utils/DebugIDUtil"; | ||
| import BackButton from "components/utils/BackButton"; | ||
|
|
||
| import { setAppVersionOrder } from "serviceFacades/apps"; | ||
|
|
||
| import { | ||
| Button, | ||
| ButtonGroup, | ||
| Card, | ||
| CardContent, | ||
| CardHeader, | ||
| Table, | ||
| Toolbar, | ||
| Typography, | ||
| } from "@mui/material"; | ||
|
|
||
| import { makeStyles } from "tss-react/mui"; | ||
|
|
||
| import { ArrowDownward, ArrowUpward } from "@mui/icons-material"; | ||
|
|
||
| const useStyles = makeStyles()(styles); | ||
|
|
||
| function VersionOrderForm(props) { | ||
| const { baseId, version, onMoveUp, onMoveDown } = props; | ||
|
|
||
| const { t } = useTranslation("common"); | ||
| const { classes } = useStyles(); | ||
|
|
||
| const versionBaseId = buildID(baseId, version.version_id); | ||
|
|
||
| return ( | ||
| <Card className={classes.paramCard}> | ||
| <CardHeader | ||
| title={version.version} | ||
| titleTypographyProps={{ variant: "body1" }} | ||
| action={ | ||
| <ButtonGroup color="primary" variant="text"> | ||
| <Button | ||
| id={buildID(versionBaseId, ids.BUTTONS.MOVE_UP_BTN)} | ||
| aria-label={t("moveUp")} | ||
| onClick={onMoveUp} | ||
| > | ||
| <ArrowUpward /> | ||
| </Button> | ||
| <Button | ||
| id={buildID( | ||
| versionBaseId, | ||
| ids.BUTTONS.MOVE_DOWN_BTN | ||
| )} | ||
| aria-label={t("moveDown")} | ||
| onClick={onMoveDown} | ||
| > | ||
| <ArrowDownward /> | ||
| </Button> | ||
| </ButtonGroup> | ||
| } | ||
| /> | ||
| </Card> | ||
| ); | ||
| } | ||
|
|
||
| function VersionsOrderingForm(props) { | ||
| const { baseId, app, isLoading, error, showErrorAnnouncer } = props; | ||
| const { system_id: systemId, id: appId, versions } = app || {}; | ||
|
|
||
| const { t } = useTranslation(["app_editor", "common"]); | ||
|
|
||
| const { mutate: saveAppVersions } = useMutation( | ||
| ({ values }) => | ||
| setAppVersionOrder({ systemId, appId, versions: values }), | ||
| { | ||
| onSuccess: (resp, { onSuccess }) => { | ||
| onSuccess(resp); | ||
| }, | ||
| onError: (error, { onError }) => { | ||
| onError(error); | ||
| }, | ||
| } | ||
| ); | ||
|
|
||
| return error ? ( | ||
| <WrappedErrorHandler errorObject={error} baseId={baseId} /> | ||
| ) : isLoading ? ( | ||
| <Table> | ||
| <TableLoading baseId={baseId} numColumns={2} numRows={3} /> | ||
| </Table> | ||
| ) : ( | ||
| <Formik | ||
| initialValues={{ versions }} | ||
| onSubmit={(values, actions) => { | ||
| const { resetForm, setSubmitting, setStatus } = actions; | ||
|
|
||
| const onSuccess = ({ versions }) => { | ||
| setSubmitting(false); | ||
| setStatus({ success: true }); | ||
| resetForm({ values: { versions } }); | ||
|
|
||
| announce({ | ||
| text: t("appSaved"), | ||
| variant: SUCCESS, | ||
| }); | ||
| }; | ||
|
|
||
| const onError = (errorMessage) => { | ||
| showErrorAnnouncer(t("appSaveErr"), errorMessage); | ||
|
|
||
| setSubmitting(false); | ||
| setStatus({ success: false, errorMessage }); | ||
| }; | ||
|
|
||
| saveAppVersions({ values, onSuccess, onError }); | ||
| }} | ||
| > | ||
| {({ handleSubmit, isSubmitting, dirty, values }) => { | ||
| return ( | ||
| <Form> | ||
| <Toolbar variant="dense"> | ||
| <BackButton dirty={dirty} /> | ||
| <Typography | ||
| id={buildID(baseId, ids.TITLE)} | ||
| variant="h6" | ||
| paddingLeft={1} | ||
| style={{ flex: 1, overflow: "auto" }} | ||
| > | ||
| {t("orderAppVersions")} | ||
| </Typography> | ||
| <Button | ||
| id={buildID(baseId, ids.BUTTONS.SAVE_BTN)} | ||
| variant="contained" | ||
| type="submit" | ||
| onClick={handleSubmit} | ||
| disabled={!dirty || isSubmitting} | ||
| > | ||
| {t("common:save")} | ||
| </Button> | ||
| </Toolbar> | ||
|
|
||
| <Card> | ||
| <CardHeader title={t("orderAppVersionsHelp")} /> | ||
| <CardContent> | ||
| <FieldArray | ||
| name="versions" | ||
| render={(arrayHelpers) => | ||
| values.versions.map( | ||
| (version, index) => ( | ||
| <VersionOrderForm | ||
| key={version.version_id} | ||
| baseId={baseId} | ||
| version={version} | ||
| onMoveUp={() => { | ||
| if (index > 0) { | ||
| arrayHelpers.move( | ||
| index, | ||
| index - 1 | ||
| ); | ||
| } | ||
| }} | ||
| onMoveDown={() => { | ||
| if ( | ||
| index + 1 < | ||
| values.versions | ||
| .length | ||
| ) { | ||
| arrayHelpers.move( | ||
| index, | ||
| index + 1 | ||
| ); | ||
| } | ||
| }} | ||
| /> | ||
| ) | ||
| ) | ||
| } | ||
| /> | ||
| </CardContent> | ||
| </Card> | ||
| </Form> | ||
| ); | ||
| }} | ||
| </Formik> | ||
| ); | ||
| } | ||
|
|
||
| export default withErrorAnnouncer(VersionsOrderingForm); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React from "react"; | ||
|
|
||
| import { useRouter } from "next/router"; | ||
|
|
||
| import { useTranslation } from "i18n"; | ||
| import ids from "../ids"; | ||
|
|
||
| import NavigationConstants from "common/NavigationConstants"; | ||
| import buildID from "components/utils/DebugIDUtil"; | ||
|
|
||
| import { ListItemIcon, ListItemText, MenuItem } from "@mui/material"; | ||
| import { Edit } from "@mui/icons-material"; | ||
|
|
||
| export default function EditVersionOrderMenuItem(props) { | ||
| const { baseId, app, onClose } = props; | ||
|
|
||
| const router = useRouter(); | ||
| const { t } = useTranslation("apps"); | ||
|
|
||
| return ( | ||
| <MenuItem | ||
| id={buildID(baseId, ids.EDIT_APP_VERSION_ORDER_MENU_ITEM)} | ||
| onClick={() => { | ||
| onClose(); | ||
| router.push( | ||
| `/${NavigationConstants.APPS}/${app.system_id}/${app.id}/versions` | ||
| ); | ||
| }} | ||
| > | ||
| <ListItemIcon> | ||
| <Edit fontSize="small" /> | ||
| </ListItemIcon> | ||
| <ListItemText primary={t("editAppVersionOrder")} /> | ||
| </MenuItem> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| /** | ||
| * A page for displaying the App Versions Ordering Form. | ||
| * | ||
| * @author psarando | ||
| */ | ||
| import React from "react"; | ||
|
|
||
| import { useRouter } from "next/router"; | ||
| import { serverSideTranslations } from "next-i18next/serverSideTranslations"; | ||
| import { useQuery } from "react-query"; | ||
|
|
||
| import { i18n, RequiredNamespaces } from "i18n"; | ||
|
|
||
| import ids from "components/apps/editor/ids"; | ||
| import VersionsOrderingForm from "components/apps/editor/VersionsOrderingForm"; | ||
|
|
||
| import { | ||
| getAppDescription, | ||
| APP_DESCRIPTION_QUERY_KEY, | ||
| } from "serviceFacades/apps"; | ||
|
|
||
| export default function VersionsOrderEdit() { | ||
| const [app, setApp] = React.useState(null); | ||
|
|
||
| const router = useRouter(); | ||
| const { systemId, appId } = router.query; | ||
|
|
||
| const { isFetching, error } = useQuery({ | ||
| queryKey: [APP_DESCRIPTION_QUERY_KEY, { systemId, appId }], | ||
| queryFn: () => getAppDescription({ systemId, appId }), | ||
| enabled: !!(systemId && appId), | ||
| onSuccess: setApp, | ||
| }); | ||
|
|
||
| return ( | ||
| <VersionsOrderingForm | ||
| baseId={ids.APP_VERSION} | ||
| app={app} | ||
| error={error} | ||
| isLoading={isFetching} | ||
| /> | ||
| ); | ||
| } | ||
|
|
||
| export async function getServerSideProps({ locale }) { | ||
| const title = i18n.t("app_editor:orderAppVersions"); | ||
|
|
||
| return { | ||
| props: { | ||
| title, | ||
| ...(await serverSideTranslations(locale, [ | ||
| "app_editor", | ||
| ...RequiredNamespaces, | ||
| ])), | ||
| }, | ||
| }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.