[new #56] remove items / milestones

src/assets/Modal.css

@@ -53,25 +53,33 @@ input {
   padding: 5px 10px;
 }
 
-.modal-submit {
+.modal-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 25px;
+  margin-top: 10px;
+}
+
+.modal-submit, .modal-delete {
   padding: 10px;
   background-color: #fff;
   border: 1px solid #333;
   color: #333;
   font-family: "Roboto", sans-serif;
   font-size: 1rem;
   transition-duration: .5s;
-  margin-top: 10px;
   cursor: pointer;
   -webkit-touch-callout: none; /* iOS Safari */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Old versions of Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
   user-select: none;
+  display: flex;
+  gap: 5px;
 }
 
-.modal-submit:hover {
+.modal-submit:hover, .modal-delete:hover {
   background-color: #333;
   color: #fff;
 }

src/components/EditItemModal.jsx

@@ -43,7 +43,6 @@ const EditItemModal = (props) => {
   let groupId = props.currentGroupId
 
 
-
   const milestoneDateDefaultValue = {
     year: milestone?.date.year(),
     month: milestone?.date.month() + 1,
@@ -59,6 +58,11 @@ const EditItemModal = (props) => {
     groupId = currentNode.value
   }
 
+  const onDelete = () => {
+    props.onDelete(item, milestone, type, props.type)
+  }
+
+
   return (
     <Modal
       title={props.title}
@@ -77,6 +81,7 @@ const EditItemModal = (props) => {
           milestoneColor,
         }, props.mode, type)
       }}
+      onDelete={props.mode === 'edit' ? onDelete : null}
     >
 
       {props.mode === 'add' &&

src/components/Modal.jsx

@@ -1,12 +1,16 @@
 import React from "react"
-import {FaPlus} from 'react-icons/fa'
+import {FaPlus, FaCheck, FaTrash} from 'react-icons/fa'
 import './../assets/Modal.css'
 
 export default class Modal extends React.Component {
   onSubmit = () => {
     this.props.onSubmit()
   }
 
+  onDelete = () => {
+    this.props.onDelete()
+  }
+
   render() {
     return (
       <div className="modal">
@@ -16,9 +20,16 @@ export default class Modal extends React.Component {
         </div>
         <div className="modal-body">
           {this.props.children}
-          <button className="modal-submit" onClick={this.onSubmit}>
-            Submit
-          </button>
+          <div className="modal-buttons">
+            <button className="modal-submit" onClick={this.onSubmit}>
+              <FaCheck/> Submit
+            </button>
+            {this.props.onDelete && (
+              <button className="modal-delete" onClick={this.onDelete}>
+                <FaTrash/> Delete
+              </button>
+            )}
+          </div>
         </div>
       </div>
     )