commit 163398f68444d278eb83543ba9798a6441c8af9f
parent 316f43a0f8db27620ba53bf5993f569a969742b5
Author: Adrián Oliva <[email protected]>
Date: Wed, 17 May 2023 18:38:28 -0600
Modal interface for new To Do.
Hardest one yet. I don't know how I did it, but I used the
`bootstrap-datepicker` plugin for selecting the Due Date.
(https://github.com/uxsolutions/bootstrap-datepicker)
Diffstat:
3 files changed, 153 insertions(+), 0 deletions(-)
diff --git a/index.html b/index.html
@@ -5,6 +5,31 @@
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
+
+ <!--Font Awesome (added because you use icons in your prepend/append)-->
+ <script src="https://kit.fontawesome.com/090a180a9a.js" crossorigin="anonymous"></script>
+
+ <!-- Include jQuery -->
+ <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
+
+ <!-- Include Date Range Picker -->
+ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/js/bootstrap-datepicker.min.js"></script>
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.10.0/css/bootstrap-datepicker3.css"/>
+
+ <script>
+ $(document).ready(function(){
+ var date_input=$('input[name="new-todo-due-date"]');
+ var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
+ date_input.datepicker({
+ format: 'mm/dd/yyyy',
+ container: container,
+ todayHighlight: true,
+ autoclose: true,
+ maxViewMode: 3,
+ todayBtn: "linked"
+ })
+ })
+ </script>
</head>
<body>
<div id="root"></div>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,12 +1,14 @@
import React from "react";
import { Counter } from "./features/counter/Counter";
import { Search } from "./ToDo-UI/Search";
+import { NewToDo } from "./ToDo-UI/NewToDo";
import { ToDoList } from "./ToDo-UI/ToDoList";
function App() {
return (
<div>
<Search />
+ <NewToDo />
<ToDoList />
<Counter />
</div>
diff --git a/src/ToDo-UI/NewToDo.jsx b/src/ToDo-UI/NewToDo.jsx
@@ -0,0 +1,126 @@
+import React from "react";
+
+export function NewToDo() {
+ return (
+ <>
+ <div className="container mt-3 mb-3">
+ <button
+ type="button"
+ className="btn btn-outline-dark"
+ data-bs-toggle="modal"
+ data-bs-target="#NewToDo"
+ >
+ + New To Do
+ </button>
+ </div>
+
+ <div
+ className="modal fade"
+ id="NewToDo"
+ tabIndex="-1"
+ role="dialog"
+ aria-labelledby="New To Do Window"
+ aria-hidden="true"
+ >
+ <div
+ className="modal-dialog modal-dialog-centered"
+ role="document"
+ >
+ <div className="modal-content">
+ <div className="modal-header">
+ <h5
+ className="modal-title"
+ id="exampleModalLongTitle"
+ >
+ Add a new to do
+ </h5>
+ <button
+ type="button"
+ className="close"
+ data-bs-dismiss="modal"
+ aria-label="Close"
+ >
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div className="modal-body">
+ <form>
+ <div className="form-floating mb-3">
+ <input
+ className="form-control"
+ id="new-todo-id"
+ value="4"
+ disabled
+ />
+ <label htmlFor="floatingInput">ID</label>
+ </div>
+ <div className="form-floating mb-3">
+ <input
+ className="form-control"
+ placeholder="Text"
+ id="new-todo-text"
+ />
+ <label htmlFor="floatingInput">Text</label>
+ </div>
+ <div className="input-group mb-3">
+ <span className="input-group-text">
+ <i className="fa-regular fa-calendar"></i>
+ </span>
+ <div className="form-floating">
+ <input
+ className="form-control"
+ id="new-todo-due-date"
+ name="new-todo-due-date"
+ placeholder="Due date"
+ />
+ <label htmlFor="floatingInput">
+ Due Date
+ </label>
+ </div>
+ </div>
+ <div class="form-check mb-3">
+ <input
+ class="form-check-input"
+ type="checkbox"
+ value=""
+ id="flexCheckDefault"
+ />
+ <label
+ class="form-check-label"
+ for="flexCheckDefault"
+ >
+ Done
+ </label>
+ </div>
+ <div class="form-floating mb-3">
+ <select
+ class="form-select"
+ id="floatingSelect"
+ aria-label="Floating label select example"
+ >
+ <option selected>Low</option>
+ <option value="1">Medium</option>
+ <option value="2">High</option>
+ </select>
+ <label for="floatingSelect">Priority</label>
+ </div>
+ </form>
+ </div>
+ <div className="modal-footer">
+ <button
+ type="button"
+ className="btn btn-secondary"
+ data-bs-dismiss="modal"
+ >
+ Cancel
+ </button>
+ <button type="button" className="btn btn-primary">
+ Add
+ </button>
+ </div>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
