Feature: Complete specification of First DB App

Complete specification of First DB App

Resolves: N/a
See also: N/a

Projects/First-DB-App.md

@@ -25,7 +25,10 @@ personal identifying information (PII) in a browser based database.
 
 - The following Javascript class is provided with the functionality to allow
 your app to initially populate and clear the database from the browser so you
-can test the query logic you'll be adding.
+can test the query logic you'll be adding. You'll be required to hook up 
+buttons on the web page you build to the `clearDB` and `loadDB` functions, and
+to write your own `queryDB` handler to connect to the `Query DB` button. You'll
+also need to add a `queryAllRows` function to the Customer class.
 ```
 class Customer {
   constructor(dbName) {
@@ -43,7 +46,6 @@ class Customer {
   removeAllRows = () => {
     const request = indexedDB.open(this.dbName, 1);
 
-    // Handle any errors
     request.onerror = (event) => {
       console.log('removeAllRows - Database error: ', event.target.error.code,
         " - ", event.target.error.message);
@@ -78,7 +80,6 @@ class Customer {
   initialLoad = (customerData) => {
     const request = indexedDB.open(this.dbName, 1);
 
-    // Handle any errors
     request.onerror = (event) => {
       console.log('initialLoad - Database error: ', event.target.error.code,
         " - ", event.target.error.message);
@@ -137,11 +138,53 @@ const loadDB = () => {
 
 ## User Stories
 
--   [ ] User can ... first user story
+-   [ ] User can see a web page containing a control panel containing three
+buttons - 'Load DB', 'Query DB', and 'Clear DB'.
+-   [ ] User can see a notification panel where status messages will be posted.
+-   [ ] User can see a scrollable log panel where execution details describing 
+the apps operation and interface with the Customer instance will be posted. 
+-   [ ] User can see a running history of notification panel messages in the log
+panel.
+-   [ ] User can see a scrollable query results area where retrieved customer
+data will be displayed.
+-   [ ] User can click the 'Load DB' button to populate the database with data.
+The 'Load DB' button in your UI should be hooked to the `loadDB` event handler
+that's provided. 
+-   [ ] User can see a message displayed in the notification panel when the 
+data load operation starts and ends.
+-   [ ] User can click the 'Query DB' button to list all customers in the query 
+results area. The 'Query DB' button in your UI should be hooked to a `queryDB`
+event handler you will add to the program.
+-   [ ] User can see a message in the notification panel when the query starts
+and ends.
+-   [ ] User can see a message in the query results area if there are no rows
+to display.
+-   [ ] User can click on the 'Clear DB' button to remove all rows from the 
+database. The 'Clear DB' button in your UI should be hooked to the `clearDB` 
+event handler that's provided.
+-   [ ] User can see a message in the notification panel when the clear
+operation starts and ends.
 
 ## Bonus features
 
--   [ ] User can ... first bonus feature
+-   [ ] User can see buttons enabled and disabled according to the following
+table.
+    | State               | Load DB  | Query DB | Clear DB |
+    |---------------------|----------|----------|----------|
+    | Initial App display | enabled  | enabled  | disabled |
+    | Load DB clicked     | disabled | enabled  | enabled  |
+    | Query DB clicked    | disabled | enabled  | enabled  |
+    | Clear DB clicked    | enabled  | enabled  | disabled |
+-   [ ] User can see additional Customer data fields added to those included
+in the code provided. Developer should add date of last order and total sales
+for the year.
+-   [ ] Developer should conduct a retrospection on this project:
+    - What use cases can you see for using IndexedDB in your frontend apps?
+    - What advantages and disadvantages can you see over using a file or 
+    local storage?
+    - In general, what criteria might you use to determine if IndexedDB is right
+    for your app. (Hint: 100% yes or no is not a valid answer).
+
 
 ## Useful links and resources