added modal overlay, not connected to backend yet
This commit is contained in:
parent
01cd0edb7c
commit
fc8b005b8a
@ -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>
|
||||||
|
@ -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">
|
||||||
|
Loading…
Reference in New Issue
Block a user