Fix the Already Working ToDo List App in ReactJs (Use Node.js / npm) so that follows ALL of the following requirements

Requirements:

Selected List on Top - currently when the user selects a todo list it loads that todo list into the workspace, in addition your program should promote your list to the top of the list of lists. This way the most recently used lists are always on top. In addition, make sure as more and more lists are added that the user can scroll down to access them all.

Delete List Confirmation - should the user ask to delete a list your program should open up a modal (i.e. a dialog, which should simply be another div) and verify that the user really wants to delete the list.

List Editing - your application must provide the following functionality for editing an existing list:

List Item Data Editing - currently the fields for a list item are just plain text but instead should employ controls to allow for editing:

Task - should employ an editable text control.

Due Date - should employ an HTML date selection control, just like in the example.

Status - should employ a drop down list with two choices: complete and incomplete.

Undo/Redo - note that all edits of a todo list that can be done should be undoable and redoable. Note that you should employ the jsTPS library for doing so as it will manage the transaction stack. Note that you should reset the transaction stack whenever a new todo list is created or editing meaning as soon as editing on a new list is started. This means undo/redo should work for:

• Adding a new Item

• Changing the Task Text

• Changing the Due Date

• Changing the Status

• Move an Item up

• Move an Item down

• Delete an item

Foolproof Design - it is important that you don't tempt users with features that are not usable. So, controls that are not usable should be either absent or visibly (i.e. greyed out) and functionally disabled:

• Add List Button - if a list is in the process of being edited this button should be visibly and functionally disabled and only enabled if the edited list is first closed.

• Undo/Redo Buttons - if there are no transactions to Undo, this button should be visibly and functionally disabled, the same goes for the Redo button.

• List Controls - if a list is not loaded for editing the Add New Item, Trash List, and Close List buttons should be absent.

• Move Up/Down Buttons - for the top list item, the move up button should be visibly/functionally disabled. The same is true for the bottom list item's move down button

Layout and Style

• Highlight Current List - the list that is currently being edited should be at the top of the list. In addition, while being edited it should be highlighted in the same yellow as used in other parts of our UI. Note that should the list be closed it should no longer be highlighted.

• Fix the Font

  • Layout and Dimensions

    • Proper Separation of navbar from rest of app. Note in the example provided the navbar has a horizontal app between it and the rest of the UI

    • Proper Indentation/Margins for items table, including for dotted/solid borders so that lines are neatly aligned as in the provided example.

    • Proper Heights of list item rows in table

  • complete/incomplete - the status should use blue and yellow, as found in the example provided, for coloring the text in this field.

  • Mouse Over Highlighting - note that all buttons should properly employ mouse-over highlighting so that the user can always see what choice they are about to make. In addition, when the mouse is over an item in the todo list that item should be highlighted. Note that for both you should employ the contrasting color in the item hovering.

• List Name Change - by clicking on a todolist one can then enter a new list name in a text field, just like in our provided TodoTracker example app.

• Undo/Redo - Undo/Redo should also work using Control-Z and Control-Y.

Please make sure all of the requirements listed are met

jsTPS.js

export class jsTPS_Transaction { /** * This method is called by jTPS when a transaction is executed. */ doTransaction() { console.log("doTransaction - MISSING IMPLEMENTATION"); } /** * This method is called by jTPS when a transaction is undone. */ undoTransaction() { console.log("undoTransaction - MISSING IMPLEMENTATION"); } } /** * jsTPS * * This class serves as the Transaction Processing System. Note that it manages * a stack of jsTPS_Transaction objects, each of which know how to do or undo * state changes for the given application. Note that this TPS is not platform * specific as it is programmed in raw JavaScript. */ export default class jsTPS { constructor() { // THE TRANSACTION STACK this.transactions = []; // THE TOTAL NUMBER OF TRANSACTIONS ON THE STACK, // INCLUDING THOSE THAT MAY HAVE ALREADY BEEN UNDONE this.numTransactions = 0; // THE INDEX OF THE MOST RECENT TRANSACTION, NOTE THAT // THIS MAY BE IN THE MIDDLE OF THE TRANSACTION STACK // IF SOME TRANSACTIONS ON THE STACK HAVE BEEN UNDONE // AND STILL COULD BE REDONE. this.mostRecentTransaction = -1; // THESE STATE VARIABLES ARE TURNED ON AND OFF WHILE // TRANSACTIONS ARE DOING THEIR WORK SO AS TO HELP // MANAGE CONCURRENT UPDATES this.performingDo = false; this.performingUndo = false; } /** * isPerformingDo * * Accessor method for getting a boolean representing whether or not * a transaction is currently in the midst of a do/redo operation. */ isPerformingDo() { return this.performingDo; } /** * isPerformingUndo * * Accessor method for getting a boolean representing whether or not * a transaction is currently in the midst of an undo operation. */ isPerformingUndo() { return this.performingUndo; } /** * getSize * * Accessor method for getting the number of transactions on the stack. */ getSize() { return this.transactions.length; } /** * getRedoSize * * Method for getting the total number of transactions on the stack * that can possibly be redone. */ getRedoSize() { return this.getSize() - this.mostRecentTransaction - 1; } /** * getUndoSize * * Method for getting the total number of transactions on the stack * that can possible be undone. */ getUndoSize() { return this.mostRecentTransaction + 1; } /** * hasTransactionToRedo * * Method for getting a boolean representing whether or not * there are transactions on the stack that can be redone. */ hasTransactionToRedo() { return (this.mostRecentTransaction+1) < this.numTransactions; } /** * hasTransactionToUndo * * Method for getting a boolean representing whehter or not * there are transactions on the stack that can be undone. */ hasTransactionToUndo() { return this.mostRecentTransaction >= 0; } /** * addTransaction * * Method for adding a transaction to the TPS stack, note it * also then does the transaction. * * @param {jsTPS_Transaction} transaction Transaction to add to the stack and do. */ addTransaction(transaction) { // ARE WE BRANCHING? if ((this.mostRecentTransaction < 0) || (this.mostRecentTransaction < (this.transactions.length - 1))) { for (let i = this.transactions.length - 1; i > this.mostRecentTransaction; i--) { this.transactions.splice(i, 1); } this.numTransactions = this.mostRecentTransaction + 2; } else { this.numTransactions++; } // ADD THE TRANSACTION this.transactions[this.mostRecentTransaction+1] = transaction; // AND EXECUTE IT this.doTransaction(); } /** * doTransaction * * Does the current transaction on the stack and advances the transaction * counter. Note this function may be invoked as a result of either adding * a transaction (which also does it), or redoing a transaction. */ doTransaction() { if (this.hasTransactionToRedo()) { this.performingDo = true; let transaction = this.transactions[this.mostRecentTransaction+1]; transaction.doTransaction(); this.mostRecentTransaction++; this.performingDo = false; } } /** * This function gets the most recently executed transaction on the * TPS stack and undoes it, moving the TPS counter accordingly. */ undoTransaction() { if (this.hasTransactionToUndo()) { this.performingUndo = true; let transaction = this.transactions[this.mostRecentTransaction]; transaction.undoTransaction(); this.mostRecentTransaction--; this.performingUndo = false; } } /** * clearAllTransactions * * Removes all the transactions from the TPS, leaving it with none. */ clearAllTransactions() { // REMOVE ALL THE TRANSACTIONS this.transactions = new Array(); // MAKE SURE TO RESET THE LOCATION OF THE // TOP OF THE TPS STACK TOO this.mostRecentTransaction = -1; this.numTransactions = 0; } /** * toString * * Builds and returns a textual represention of the full TPS and its stack. */ toString() { let text = "--Number of Transactions: " + this.numTransactions + " "; text += "--Current Index on Stack: " + this.mostRecentTransaction + " "; text += "--Current Transaction Stack: "; for (let i = 0; i <= this.mostRecentTransaction; i++) { let jT = this.transactions[i]; text += "----" + jT.toString() + " "; } return text; } }