added modal overlay, not connected to backend yet

This commit is contained in:
Giulio De Pasquale 2020-12-20 13:22:13 +00:00
parent 01cd0edb7c
commit fc8b005b8a
2 changed files with 48 additions and 11 deletions

View File

@ -1,12 +1,21 @@
import React from "react"; import React, {Component} from "react";
import {Component} from "react";
export class Modal extends Component<any, any> { export type ModalProps = {
show: boolean,
positionId: number,
toggleConfirmation: any
}
export class ClosePositionModal extends Component<ModalProps, any> {
constructor(props) { constructor(props) {
super(props); super(props);
} }
render() { render() {
if (!this.props.show) {
return null
}
return ( return (
<div className="fixed z-10 inset-0 overflow-y-auto"> <div className="fixed z-10 inset-0 overflow-y-auto">
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
@ -43,12 +52,11 @@ export class Modal extends Component<any, any> {
</div> </div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"> <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline"> <h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-headline">
Deactivate account Close position
</h3> </h3>
<div className="mt-2"> <div className="mt-2">
<p className="text-sm text-gray-500"> <p className="text-sm text-gray-500">
Are you sure you want to deactivate your account? All of your data will be Are you sure you want to close the position? This action cannot be undone.
permanently removed. This action cannot be undone.
</p> </p>
</div> </div>
</div> </div>
@ -56,11 +64,15 @@ export class Modal extends Component<any, any> {
</div> </div>
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" <button type="button"
className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"> className="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm"
Deactivate onClick={event => {
console.log("Closing " + this.props.positionId)
}}>
Close
</button> </button>
<button type="button" <button type="button"
className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> className="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => this.props.toggleConfirmation()}>
Cancel Cancel
</button> </button>
</div> </div>

View File

@ -1,9 +1,27 @@
import React, {Component} from "react" import React, {Component} from "react"
import {PositionProp} from "../types"; import {PositionProp} from "../types";
import {ClosePositionModal} from "./Overlays";
export class PositionsTable extends Component<{ positions: Array<PositionProp> }> { type PositionsTableState = {
showConfirmation: boolean,
positionToClose: number
}
export class PositionsTable extends Component<{ positions: Array<PositionProp> }, PositionsTableState> {
constructor(props) { constructor(props) {
super(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 { stateColor(state: string): string {
@ -73,7 +91,13 @@ export class PositionsTable extends Component<{ positions: Array<PositionProp> }
<td className="px-6 py-1 whitespace-nowrap text-right text-sm font-medium"> <td className="px-6 py-1 whitespace-nowrap text-right text-sm font-medium">
<div className="p-2 md:w-40"> <div className="p-2 md:w-40">
<div <div
className="p-4 flex justify-center bg-red-200 rounded-lg shadow-xs cursor-pointer hover:bg-red-500 hover:text-red-100"> 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
})
}}>
<span className="ml-2">Close</span> <span className="ml-2">Close</span>
</div> </div>
</div> </div>
@ -86,6 +110,7 @@ export class PositionsTable extends Component<{ positions: Array<PositionProp> }
render() { render() {
return ( return (
<div className="flex flex-col"> <div className="flex flex-col">
<ClosePositionModal positionId={this.state.positionToClose} toggleConfirmation={this.toggleConfirmation} show={this.state.showConfirmation}/>
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8"> <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg"> <div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">