Skip to content

Commit

Permalink
Display command 'edit' in new page
Browse files Browse the repository at this point in the history
  • Loading branch information
@N00bG1rl
N00bG1rl committed Mar 8, 2024
1 parent d94f3fd commit 932b8a1
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 141 deletions.
0 ...ndsListDetailPanel/DetailPanelColumns.tsx → ...ndsListDetailPanel/DetailPanelColumns.tsx
View file
File renamed without changes.
113 changes: 11 additions & 102 deletions ...ataGrid/commandsListDetailPanel/index.tsx → ...command/commandsListDetailPanel/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,14 @@

import React, { useState } from 'react';

import { Paper, Typography } from '@mui/material';
import { DataGridPro, GRID_CHECKBOX_SELECTION_FIELD, GridFilterModel, GridSelectionModel } from '@mui/x-data-grid-pro';

import { Button, DataGridCustomToolbar, dataGridDefaultProps, DataGridWrapper, Form, InlineWrapper, Input, NewSwitch } from '@dolittle/design-system';
import { Button, ContentDivider, ContentWithSubtitle, DataGridCustomToolbar, dataGridDefaultProps, DataGridWrapper, Form, NewSwitch } from '@dolittle/design-system';

import { commandsListDetailPanelColumns } from './DetailPanelColumns';

const styles = {
// Hack for secret cell active state. Otherwise size is going to be different.
// Hack for select cell active state. Otherwise size is going to be different.
'& .MuiOutlinedInput-root': {
'& .MuiSelect-select': { p: '5px 15px' },
'& fieldset': { border: 'none' },
Expand Down Expand Up @@ -86,98 +85,14 @@ const commandsListDetailPanelRows = [
length: 1,
required: false
},
// {
// "name": "CFI1",
// "description": "User-definedfield1-supplier",
// "type": "StringType",
// "length": 10,
// "required": false
// },
// {
// "name": "CFI2",
// "description": "User-definedfield2-supplier",
// "type": "StringType",
// "length": 17,
// "required": false
// },
// {
// "name": "CFI3",
// "description": "User-definedfield3-supplier",
// "type": "StringType",
// "length": 3,
// "required": false
// },
// {
// "name": "CFI4",
// "description": "User-definedfield4-supplier",
// "type": "StringType",
// "length": 5,
// "required": false
// },
// {
// "name": "CFI5",
// "description": "User-definedfield5-supplier",
// "type": "StringType",
// "length": 1,
// "required": false
// },
// {
// "name": "CFI6",
// "description": "User-definedfield1-purchase/financial",
// "type": "StringType",
// "length": 10,
// "required": false
// },
// {
// "name": "CFI7",
// "description": "User-definedfield2-purchase/financial",
// "type": "StringType",
// "length": 17,
// "required": false
// },
// {
// "name": "CFI8",
// "description": "User-definedfield3-purchase/financial",
// "type": "StringType",
// "length": 3,
// "required": false
// },
// {
// "name": "CFI9",
// "description": "User-definedfield4-purchase/financial",
// "type": "StringType",
// "length": 5,
// "required": false
// },
// {
// "name": "CGRP",
// "description": "Consolidation group",
// "type": "StringType",
// "length": 10,
// "required": false
// },
// {
// "name": "COBI",
// "description": "Groupofcompanies",
// "type": "StringType",
// "length": 10,
// "required": false
// },
// {
// "name": "COR2",
// "description": "Organizationnumber2",
// "type": "StringType",
// "length": 11,
// "required": false
// },
];

type CommandEditParametersProps = {
namespace: string;
description: string;
};

export const CommandsListDetailPanel = ({ row }: any) => {
export const EditCommandSection = ({ row }: any) => {
const [selectedRowIds, setSelectedRowIds] = useState<GridSelectionModel>([]);
const [hideUnselectedRows, setHideUnselectedRows] = useState(false);

Expand All @@ -193,22 +108,14 @@ export const CommandsListDetailPanel = ({ row }: any) => {
};

return (
<Paper sx={{ p: 2, pl: 7.5 }}>
<Typography variant='h4' gutterBottom>{row.name}</Typography>
<Typography variant='body1' color='text.secondary'>{`Transaction: ${'CRS620MI > UpdSupplier'}`}</Typography>

<ContentWithSubtitle title={`Transaction: ${'CRS620MI > UpdSupplier'}`}>
<Form<CommandEditParametersProps>
initialValues={{
namespace: row.nameSpace,
description: row.description,
namespace: '',
description: '',
}}
onSubmit={() => { }}
>
<InlineWrapper sx={{ my: 4 }}>
<Typography>Namespace:</Typography>
<Input id='namespace' label='Namespace' sx={{ '& .MuiOutlinedInput-root': { width: 220 } }} />
</InlineWrapper>

<DataGridWrapper background='dark' sx={{ height: 300 }}>
<DataGridPro
{...dataGridDefaultProps}
Expand All @@ -230,16 +137,18 @@ export const CommandsListDetailPanel = ({ row }: any) => {
checked={hideUnselectedRows}
onChange={() => setHideUnselectedRows(!hideUnselectedRows)}
/>

<Button label='Save Changes' startWithIcon='AddCircle' disabled onClick={() => { }} />
</DataGridCustomToolbar>
)
}}
experimentalFeatures={{ newEditingApi: true }}
sx={styles}
/>
</DataGridWrapper>

<ContentDivider sx={{ mt: 3, mb: 2 }} />

<Button label='Save Changes' startWithIcon='AddCircle' variant='fullwidth' disabled onClick={() => { }} />
</Form>
</Paper>
</ContentWithSubtitle>
);
};
67 changes: 51 additions & 16 deletions Source/SelfService/Web/integrations/connection/connectionDetails/commands/command/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,27 +3,35 @@

import React, { useState } from 'react';

import { useNavigate } from 'react-router-dom';
import { useNavigate, useParams } from 'react-router-dom';

import { GridRowId } from '@mui/x-data-grid-pro';

import { Button, ContentContainer, ContentHeader } from '@dolittle/design-system';
import { Button, ContentContainer, ContentHeader, Form } from '@dolittle/design-system';

import { useConnectionIdFromRoute } from '../../../../routes.hooks';

import { CommandForm } from './CommandForm';
import { CommandDetailSection } from './CommandDetailSection';
import { CommandSearchSection, ProgramsListingEntry } from './CommandSearchSection';
import { CommandSection } from './commandSection';
import { EditCommandSection } from './commandsListDetailPanel';

export type ViewMode = 'new' | 'edit';

export const CommandView = () => {
const navigate = useNavigate();
const connectionId = useConnectionIdFromRoute();
const { commandName = '' } = useParams();

const [searchInputValue, setSearchInputValue] = useState('');
const [selectedProgramName, setSelectedProgramName] = useState('');
const [selectedTransactionName, setSelectedTransactionName] = useState<GridRowId[]>([]);

const mode: ViewMode = location.pathname.endsWith('new') ? 'new' : 'edit';
const title = mode === 'new' ? 'Create New Command' : `Edit Command - ${commandName}`;
//const showTable = !!table || mode === 'edit';

const handleCommandCancel = () => {
navigate('..');
};
Expand All @@ -32,27 +40,54 @@ export const CommandView = () => {
setSelectedProgramName(row.name);
};

const handleEditCommandSave = (values: any) => {
console.log(values);
};

return (
<ContentContainer>
<ContentHeader
title='Create New Command'
title={title}
buttonsSlot={<Button label='Cancel' startWithIcon='CancelRounded' color='subtle' onClick={handleCommandCancel} />}
sx={{ pb: 0 }}
/>

<CommandForm connectionId={connectionId} selectedProgramName={selectedProgramName} selectedTransactionName={selectedTransactionName[0] as string}>
<CommandDetailSection />

{!selectedProgramName
? <CommandSearchSection connectionId={connectionId} searchInputValue={searchInputValue} onSearchInputValueChange={setSearchInputValue} onRowClick={handleRowClick} />
: <CommandSection
selectedProgramName={selectedProgramName}
selectedTransactionName={selectedTransactionName}
onSelectedTransactionNameChanged={setSelectedTransactionName}
onBackToSearchResultsClicked={() => setSelectedProgramName('')}
/>
}
</CommandForm>
{mode === 'new'
? <CommandForm
connectionId={connectionId}
selectedProgramName={selectedProgramName}
selectedTransactionName={selectedTransactionName[0] as string}
>
<CommandDetailSection />

{selectedProgramName
? <CommandSection
selectedProgramName={selectedProgramName}
selectedTransactionName={selectedTransactionName}
onSelectedTransactionNameChanged={setSelectedTransactionName}
onBackToSearchResultsClicked={() => setSelectedProgramName('')}
/>
: <CommandSearchSection
connectionId={connectionId}
searchInputValue={searchInputValue}
onSearchInputValueChange={setSearchInputValue}
onRowClick={handleRowClick}
/>
}
</CommandForm>
: <Form
initialValues={{
commandName: commandName || '',
commandDescription: '',
namespace: '',
}}
onSubmit={handleEditCommandSave}
>
<CommandDetailSection />

<EditCommandSection />
</Form>
}
</ContentContainer>
);
};
33 changes: 10 additions & 23 deletions ...n/connectionDetails/commands/commandsList/commandsListView/commandsListDataGrid/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,50 +1,37 @@
// Copyright (c) Aigonix. All rights reserved.
// Licensed under the MIT license. See LICENSE file in the project root for full license information.

import React, { useCallback, useState } from 'react';
import React from 'react';

import { DataGridPro, DataGridProProps, GridRowId } from '@mui/x-data-grid-pro';
import { useNavigate } from 'react-router-dom';

import { DataGridPro } from '@mui/x-data-grid-pro';

import { dataGridDefaultProps, DataGridWrapper, DetailPanelExpandIcon, DetailPanelCollapseIcon } from '@dolittle/design-system';

import { CommandHeader } from '../../../../../../../apis/integrations/generated';

import { commandListDataGridColumns } from './CommandListDataGridColumns';
import { CommandsListDetailPanel } from './commandsListDetailPanel';

export type CommandsListDataGridProps = {
commandListRows: CommandHeader[];
};

export const CommandsListDataGrid = ({ commandListRows }: CommandsListDataGridProps) => {
const [detailPanelExpandedRowIds, setDetailPanelExpandedRowIds] = useState<GridRowId[]>([]);

const handleDetailPanelExpandedRowIdsChange = (newIds: GridRowId[]) => {
if (detailPanelExpandedRowIds) {
// Remove previously expanded row id so only one panel can be expanded at the same time.
newIds = newIds.slice(-1);
setDetailPanelExpandedRowIds(newIds);
} else {
setDetailPanelExpandedRowIds(newIds);
}
};
const navigate = useNavigate();

const getDetailPanelContent = useCallback<NonNullable<DataGridProProps['getDetailPanelContent']>>(({ row }) =>
<CommandsListDetailPanel row={row} />, []);

const getDetailPanelHeight = useCallback(() => 'auto', []);
const onTableRowClick = (row: CommandHeader): void => {
navigate(`edit/${row.name}`);
};

return (
<DataGridWrapper>
<DataGridPro
{...dataGridDefaultProps}
rows={commandListRows}
columns={commandListDataGridColumns}
getRowId={row => row.name}
getDetailPanelContent={getDetailPanelContent}
getDetailPanelHeight={getDetailPanelHeight}
detailPanelExpandedRowIds={detailPanelExpandedRowIds}
onDetailPanelExpandedRowIdsChange={handleDetailPanelExpandedRowIdsChange}
getRowId={row => row.name} // Change this to the correct row id
onRowClick={({ row }) => onTableRowClick(row as CommandHeader)}
components={{
DetailPanelExpandIcon,
DetailPanelCollapseIcon,
Expand Down
4 changes: 4 additions & 0 deletions Source/SelfService/Web/integrations/connection/routes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,10 @@ export const routes: RouteObject[] = [
path: 'new',
element: <CommandView />,
},
{
path: 'edit/:commandName',
element: <CommandView />,
},
],
},
{
Expand Down

0 comments on commit 932b8a1

Please sign in to comment.