From fc8b005b8ac9d6e084827cce46d8f7935bdacef5 Mon Sep 17 00:00:00 2001 From: Giulio De Pasquale Date: Sun, 20 Dec 2020 13:22:13 +0000 Subject: [PATCH] added modal overlay, not connected to backend yet --- websrc/components/Overlays.tsx | 30 +++++++++++++++++++++--------- websrc/components/Tables.tsx | 29 +++++++++++++++++++++++++++-- 2 files changed, 48 insertions(+), 11 deletions(-) diff --git a/websrc/components/Overlays.tsx b/websrc/components/Overlays.tsx index e9cfb78..5e6597c 100644 --- a/websrc/components/Overlays.tsx +++ b/websrc/components/Overlays.tsx @@ -1,12 +1,21 @@ -import React from "react"; -import {Component} from "react"; +import React, {Component} from "react"; -export class Modal extends Component { +export type ModalProps = { + show: boolean, + positionId: number, + toggleConfirmation: any +} + +export class ClosePositionModal extends Component { constructor(props) { super(props); } render() { + if (!this.props.show) { + return null + } + return (
@@ -43,12 +52,11 @@ export class Modal extends Component {

- Are you sure you want to deactivate your account? All of your data will be - permanently removed. This action cannot be undone. + Are you sure you want to close the position? This action cannot be undone.

@@ -56,11 +64,15 @@ export class Modal extends Component {
diff --git a/websrc/components/Tables.tsx b/websrc/components/Tables.tsx index 09786b4..b1324fb 100644 --- a/websrc/components/Tables.tsx +++ b/websrc/components/Tables.tsx @@ -1,9 +1,27 @@ import React, {Component} from "react" import {PositionProp} from "../types"; +import {ClosePositionModal} from "./Overlays"; -export class PositionsTable extends Component<{ positions: Array }> { +type PositionsTableState = { + showConfirmation: boolean, + positionToClose: number +} + +export class PositionsTable extends Component<{ positions: Array }, PositionsTableState> { constructor(props) { super(props); + this.toggleConfirmation = this.toggleConfirmation.bind(this) + } + + state = { + showConfirmation: false, + positionToClose: 0, + } + + toggleConfirmation() { + this.setState((state) => ({ + showConfirmation: !state.showConfirmation + })) } stateColor(state: string): string { @@ -73,7 +91,13 @@ export class PositionsTable extends Component<{ positions: Array }
+ className="p-4 flex justify-center bg-red-200 rounded-lg shadow-xs cursor-pointer hover:bg-red-500 hover:text-red-100" + onClick={() => { + this.setState({ + showConfirmation: true, + positionToClose: position.id + }) + }}> Close
@@ -86,6 +110,7 @@ export class PositionsTable extends Component<{ positions: Array } render() { return (
+