Skip to content

Commit

Permalink
Fix
Browse files Browse the repository at this point in the history
  • Loading branch information
@semkedaniil
semkedaniil committed Jun 14, 2024
1 parent 4ca9bce commit 69d498d
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 113 deletions.
18 changes: 9 additions & 9 deletions db-viewer-ui/src/Components/DateTimeRangePicker/DateTimePickerWithTimeZone.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { formatDate, fromLocalToUtc, Time } from "@skbkontur/edi-ui";
import { Select } from "@skbkontur/react-ui";
import React from "react";
import React, { useState, useEffect } from "react";

import { DatePicker } from "./DatePicker";
import { jsStyles } from "./DateTimePicker.styles";
Expand All @@ -15,19 +15,19 @@ interface DateTimePickerWithTimeZone {
timeZoneEditable?: boolean;
}

export function DateTimePickerWithTimeZone({
export const DateTimePickerWithTimeZone = ({
error,
defaultTime,
value,
onChange,
disabled,
timeZoneEditable,
}: DateTimePickerWithTimeZone): React.ReactElement {
const [time, setTime] = React.useState<Nullable<string>>(null);
const [offset, setOffset] = React.useState<Nullable<string>>(null);
const [date, setDate] = React.useState<Nullable<Date>>(null);
React.useEffect(() => loadState(value), [value]);
React.useEffect(() => handleDateTimeChange(date, time, offset), [date, time, offset]);
}: DateTimePickerWithTimeZone): React.ReactElement => {
const [time, setTime] = useState<Nullable<string>>(null);
const [offset, setOffset] = useState<Nullable<string>>(null);
const [date, setDate] = useState<Nullable<Date>>(null);
useEffect(() => loadState(value), [value]);
useEffect(() => handleDateTimeChange(date, time, offset), [date, time, offset]);

const handleDateTimeChange = (
newDate: Nullable<Date>,
Expand Down Expand Up @@ -102,4 +102,4 @@ export function DateTimePickerWithTimeZone({
</span>
</span>
);
}
};
128 changes: 63 additions & 65 deletions db-viewer-ui/src/Components/ObjectViewer/ObjectRenderer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { ToolPencilLineIcon16Regular } from "@skbkontur/icons/ToolPencilLineIcon
import { Fill, Fit, RowStack } from "@skbkontur/react-stack-layout";
import { Link } from "@skbkontur/react-ui";
import get from "lodash/get";
import React from "react";
import React, { useState } from "react";

import { PropertyMetaInformation } from "../../Domain/Api/DataTypes/PropertyMetaInformation";
import { ICustomRenderer } from "../../Domain/Objects/CustomRenderer";
Expand All @@ -25,79 +25,77 @@ interface ObjectRendererProps {
customRenderer: ICustomRenderer;
}

interface ObjectRendererState {
editableMode: boolean;
value: any;
}

export class ObjectRenderer extends React.Component<ObjectRendererProps, ObjectRendererState> {
public state: ObjectRendererState = {
editableMode: false,
value: undefined,
};

public render(): React.ReactElement {
const { path, target, property, objectType, customRenderer } = this.props;
const value = this.state.editableMode ? this.state.value : getByPath(target, path);
const { editableMode } = this.state;
const canEdit = this.canEditProperty();
return (
<RowStack gap={2} baseline block data-tid="FieldRow">
<Fit data-tid="FieldValue">
{editableMode
? renderForEdit(value, property, objectType, this.handleChange, customRenderer)
: renderForDetails(target, path, property, objectType, customRenderer)}
</Fit>
<Fill />
{canEdit && !editableMode && (
<Fit>
<Link icon={<ToolPencilLineIcon16Regular />} onClick={this.handleClick} data-tid="Edit" />
</Fit>
)}
{canEdit && editableMode && (
<Fit>
<Link icon={<CheckAIcon16Regular />} onClick={this.handleSaveChanges} data-tid="Save">
Сохранить
</Link>
</Fit>
)}
{canEdit && editableMode && (
<Fit>
<Link
icon={<ArrowDUturnLeftDownIcon16Regular />}
onClick={this.handleCancelChanges}
data-tid="Cancel">
Отменить
</Link>
</Fit>
)}
</RowStack>
);
}
export const ObjectRenderer = ({
target,
objectType,
customRenderer,
path,
property,
allowEdit,
onChange,
}: ObjectRendererProps): React.ReactElement => {
const [editableMode, setEditableMode] = useState(false);
const [value, setValue] = useState(undefined);

private readonly handleClick = () => {
this.setState({
editableMode: true,
value: getByPath(this.props.target, this.props.path),
});
const handleClick = () => {
setEditableMode(true);
setValue(getByPath(target, path));
};

private readonly handleChange = (value: any) => {
this.setState({ value: value });
const handleChange = (value: any) => {
setValue(value);
};

private readonly handleSaveChanges = () => {
this.props.onChange(this.state.value, this.props.path);
this.setState({ editableMode: false, value: undefined });
const handleSaveChanges = () => {
onChange(value, path);
setEditableMode(false);
setValue(undefined);
};

private readonly handleCancelChanges = () => {
this.setState({ editableMode: false, value: undefined });
const handleCancelChanges = () => {
setEditableMode(false);
setValue(undefined);
};

private readonly canEditProperty = () => {
const { property, allowEdit } = this.props;
const canEditProperty = () => {
const type = property.type.typeName;
return type != null && !type.includes("[]") && !property.isIdentity && property.isEditable && allowEdit;
};
}

const canEdit = canEditProperty();
return (
<RowStack gap={2} baseline block data-tid="FieldRow">
<Fit data-tid="FieldValue">
{editableMode
? renderForEdit(
editableMode ? value : getByPath(target, path),
property,
objectType,
handleChange,
customRenderer
)
: renderForDetails(target, path, property, objectType, customRenderer)}
</Fit>
<Fill />
{canEdit && !editableMode && (
<Fit>
<Link icon={<ToolPencilLineIcon16Regular />} onClick={handleClick} data-tid="Edit" />
</Fit>
)}
{canEdit && editableMode && (
<Fit>
<Link icon={<CheckAIcon16Regular />} onClick={handleSaveChanges} data-tid="Save">
Сохранить
</Link>
</Fit>
)}
{canEdit && editableMode && (
<Fit>
<Link icon={<ArrowDUturnLeftDownIcon16Regular />} onClick={handleCancelChanges} data-tid="Cancel">
Отменить
</Link>
</Fit>
)}
</RowStack>
);
};
76 changes: 37 additions & 39 deletions db-viewer-ui/src/DbViewerApplication.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,42 +23,40 @@ export const DbViewerApplication = ({
identifierKeywords,
useErrorHandlingContainer,
withGoBackUrl,
}: DbViewerApplicationProps): React.ReactElement => {
return (
<Routes>
<Route
path="/"
element={
<ObjectTypesContainer
withGoBackUrl={withGoBackUrl}
useErrorHandlingContainer={useErrorHandlingContainer}
identifierKeywords={identifierKeywords}
dbViewerApi={dbViewerApi}
/>
}
/>
<Route
path=":objectId"
element={
<ObjectTableContainer
isSuperUser={isSuperUser}
dbViewerApi={dbViewerApi}
customRenderer={customRenderer}
useErrorHandlingContainer={useErrorHandlingContainer}
/>
}
/>
<Route
path=":objectId/details"
element={
<ObjectDetailsContainer
isSuperUser={isSuperUser}
dbViewerApi={dbViewerApi}
customRenderer={customRenderer}
useErrorHandlingContainer={useErrorHandlingContainer}
/>
}
/>
</Routes>
);
};
}: DbViewerApplicationProps): React.ReactElement => (
<Routes>
<Route
path="/"
element={
<ObjectTypesContainer
withGoBackUrl={withGoBackUrl}
useErrorHandlingContainer={useErrorHandlingContainer}
identifierKeywords={identifierKeywords}
dbViewerApi={dbViewerApi}
/>
}
/>
<Route
path=":objectId"
element={
<ObjectTableContainer
isSuperUser={isSuperUser}
dbViewerApi={dbViewerApi}
customRenderer={customRenderer}
useErrorHandlingContainer={useErrorHandlingContainer}
/>
}
/>
<Route
path=":objectId/details"
element={
<ObjectDetailsContainer
isSuperUser={isSuperUser}
dbViewerApi={dbViewerApi}
customRenderer={customRenderer}
useErrorHandlingContainer={useErrorHandlingContainer}
/>
}
/>
</Routes>
);

0 comments on commit 69d498d

Please sign in to comment.