rustico/core
2
0
Fork 0
Code Issues 9 Pull Requests Projects Releases Wiki Activity

added modal overlay, not connected to backend yet

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
websrc/components/Overlays.tsx
View File

@ -1,12 +1,21 @@
import React from "react";
import {Component} from "react";
import React, {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) {
super(props);
}
render() {
if (!this.props.show) {
return null
}
return (
<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">
@ -43,12 +52,11 @@ export class Modal extends Component<any, any> {
</div>
<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">
Deactivate account
Close position
</h3>
<div className="mt-2">
<p className="text-sm text-gray-500">
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.
</p>
</div>
</div>
@ -56,11 +64,15 @@ export class Modal extends Component<any, any> {
</div>
<div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<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">
Deactivate
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"
onClick={event => {
console.log("Closing " + this.props.positionId)
}}>
Close
</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
</button>
</div>

29
websrc/components/Tables.tsx
View File

@ -1,9 +1,27 @@
import React, {Component} from "react"
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) {
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<PositionProp> }
<td className="px-6 py-1 whitespace-nowrap text-right text-sm font-medium">
<div className="p-2 md:w-40">
<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>
</div>
</div>
@ -86,6 +110,7 @@ export class PositionsTable extends Component<{ positions: Array<PositionProp> }
render() {
return (
<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="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">