diff --git a/resources/scripts/api/admin/nodes/updateNode.ts b/resources/scripts/api/admin/nodes/updateNode.ts new file mode 100644 index 000000000..f8bf28e6a --- /dev/null +++ b/resources/scripts/api/admin/nodes/updateNode.ts @@ -0,0 +1,12 @@ +import http from '@/api/http'; +import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes'; + +export default (id: number, name: string, description: string | null, include: string[] = []): Promise => { + return new Promise((resolve, reject) => { + http.patch(`/api/application/nodes/${id}`, { + name, description, + }, { params: { include: include.join(',') } }) + .then(({ data }) => resolve(rawDataToNode(data))) + .catch(reject); + }); +}; diff --git a/resources/scripts/components/admin/SubNavigation.tsx b/resources/scripts/components/admin/SubNavigation.tsx index b3e2da712..1ce12d408 100644 --- a/resources/scripts/components/admin/SubNavigation.tsx +++ b/resources/scripts/components/admin/SubNavigation.tsx @@ -4,7 +4,7 @@ import styled from 'styled-components/macro'; import tw from 'twin.macro'; export const SubNavigation = styled.div` - ${tw`h-12 flex flex-row items-center border-b border-neutral-700`}; + ${tw`h-12 flex flex-row items-center border-b border-neutral-700 mb-4`}; & > div { ${tw`h-full flex flex-col flex-shrink-0 justify-center`}; diff --git a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx index 87ed4d8c0..8c2c5bd26 100644 --- a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx +++ b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx @@ -1,3 +1,5 @@ +import AdminBox from '@/components/admin/AdminBox'; +import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer'; import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router'; import tw from 'twin.macro'; @@ -24,6 +26,14 @@ export const Context = createContextStore({ }), }); +const Code = ({ children }: { children: React.ReactNode }) => { + return ( + + {children} + + ); +}; + const NodeEditContainer = () => { const location = useLocation(); const match = useRouteMatch<{ id?: string }>(); @@ -60,13 +70,15 @@ const NodeEditContainer = () => { return ( -
+

{node.name}

{node.uuid}

+ + @@ -99,15 +111,19 @@ const NodeEditContainer = () => { - - -

About

+ +

Version 1.2.2

+
-

Settings

+
+
+ +
+
diff --git a/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx new file mode 100644 index 000000000..add1b794b --- /dev/null +++ b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx @@ -0,0 +1,94 @@ +import React from 'react'; +import AdminBox from '@/components/admin/AdminBox'; +import tw from 'twin.macro'; +import { number, object, string } from 'yup'; +import updateNode from '@/api/admin/nodes/updateNode'; +import Button from '@/components/elements/Button'; +import Field from '@/components/elements/Field'; +import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; +import { Form, Formik, FormikHelpers } from 'formik'; +import { Context } from '@/components/admin/nodes/NodeEditContainer'; +import { ApplicationStore } from '@/state'; +import { Actions, useStoreActions } from 'easy-peasy'; + +interface Values { + name: string; + description: string; +} + +export default () => { + const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); + + const node = Context.useStoreState(state => state.node); + const setNode = Context.useStoreActions(actions => actions.setNode); + + if (node === undefined) { + return ( + <> + ); + } + + const submit = ({ name, description }: Values, { setSubmitting }: FormikHelpers) => { + clearFlashes('database'); + + updateNode(node.id, name, description) + .then(() => setNode({ ...node, name, description })) + .catch(error => { + console.error(error); + clearAndAddHttpError({ key: 'node', error }); + }) + .then(() => setSubmitting(false)); + }; + + return ( + + { + ({ isSubmitting, isValid }) => ( + + + + +
+
+ +
+ +
+ +
+ +
+
+ +
+
+
+
+
+ ) + } +
+ ); +};