Add UI directive, progress bar, and status counts (#56)

#64

.eslintrc

@@ -9,7 +9,8 @@
   },
   "ignorePatterns": [
     "**/node_modules/**",
-    "**/dist/**"
+    "**/dist/**",
+    "**/static/**"
   ],
   "plugins": ["promise", "node"],
   "rules": {

.vscode/launch.json

@@ -7,7 +7,7 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "Launch",
+      "name": "Launch Program",
       "skipFiles": [
         "<node_internals>/**"
       ],

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cht-user-management",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "main": "dist/index.js",
   "dependencies": {
     "@fastify/autoload": "^5.8.0",

src/lib/retry-logic.ts

@@ -41,7 +41,7 @@ export async function createUserWithRetries(userPayload: UserPayload, chtApi: Ch
     try {
       await chtApi.createUser(userPayload);
       return userPayload;
-    } catch (err: any) {
+    } catch (err: any) {      
       if (axiosRetryConfig.retryCondition(err)) {
         continue;
       }

src/public/app/fragment_home.html

@@ -1,8 +1,13 @@
 <div class="tile is-child" hx-ext="sse" sse-connect="/events/connection">
-  <div id="places_parent" class="tile is-child" hx-get="/events/places_list" hx-target="#place_tables"
-    hx-swap="innerHTML" hx-trigger="sse:places_state_change">
-    <div id="place_tables">
-        {% include "place/list.html" %}
-    </div>
+  <div
+    id="places_parent"
+    class="tile is-child"
+    hx-get="/events/places/all" 
+    hx-target="this"
+    hx-swap="none" 
+    hx-trigger="sse:place_state_change"
+  >
+    {% include "place/directive.html" %}
+    {% include "place/list.html" %}  
   </div>
 </div>

src/public/app/nav.html

@@ -66,18 +66,12 @@
       <div class="navbar-item has-dropdown is-hoverable">
         <a class="navbar-link is-arrowless">
           <span class="material-symbols-outlined">cloud</span>
-          Connected to <i>{{ session.authInfo.friendly}} as {{ session.username }}</i>
+          Connected to <i>{{ session.authInfo.friendly }} as {{ session.username }}</i>
         </a>
 
         <div class="navbar-dropdown is-right">
-          <a class="navbar-item" hx-post="/app/apply-changes" hx-swap="none">
-            <span class="material-symbols-outlined">group_add</span> Upload
-          </a>
-
-          <a class="navbar-item" href="/files/credentials">
-            <span class="material-symbols-outlined">save_as</span> Save Credentials
-          </a>
-
+          {% include "components/button_upload.html" className="navbar-item" %}
+          {% include "components/button_save_credentials.html" className="navbar-item" %}    
           <a class="navbar-item" href="/logout">
             <span class="material-symbols-outlined">logout</span> Logout
           </a>

src/public/components/button_save_credentials.html

@@ -0,0 +1,3 @@
+<a class="{{ include.className | default: "button is-primary" }}" href="/files/credentials" download="{{ session.authInfo.domain }}.users.csv">
+  <span class="material-symbols-outlined">save_as</span> Save Credentials
+</a>

src/public/components/button_upload.html

@@ -0,0 +1,3 @@
+<a class="{{ include.className | default: "button is-primary" }}" hx-post="/app/apply-changes" hx-swap="none">
+  <span class="material-symbols-outlined">group_add</span> Upload
+</a>

src/public/components/search_input.html

@@ -17,7 +17,6 @@
       hx-target="#search_results_{{ property_name }}" hx-swap="innerHTML"
       {% if include.required %} required {% endif %}
       {% if include.data[property_name] %}value="{{ include.data[property_name] }}" {% endif %}
-      {% if oob %} hx-swap-oob="true" {%endif%}
       hx-encoding="application/x-www-form-urlencoded"
     />
     <div id="search_results_{{ property_name }}" class="control"></div>

src/public/place/directive.html

@@ -0,0 +1,31 @@
+<div class="columns is-3 is-variable" id="directive" hx-swap-oob="true">
+  <div class="column has-background-light is-9">
+    <section class="hero is-small is-light">
+      <div class="hero-body">
+        {% if progress.inProgressCount > 0 %}
+          {% include "place/directive_3_in_progress.html" %}
+        {% elsif progress.stagedCount > 0 %}
+          {% include "place/directive_2_prompt_upload.html" %}
+        {% elsif progress.successCount > 0 %}
+          {% include "place/directive_4_prompt_save.html" %}
+        {% else %}
+          {% include "place/directive_1_get_started.html" %}
+        {% endif %}
+      </div>
+    </section>
+  </div>
+
+  <div class="column is-3 has-background-light">
+    <section class="hero is-small is-light">
+      <div class="hero-body">  
+        <p class="title is-5">Summary</p>
+        <ul>
+          <li><span class="tag">{{ progress.stagedCount }} staged</span></li>
+          <li><span class="tag is-warning">{{ progress.validationErrorCount }} validation errors</span> </li>
+          <li><span class="tag is-success">{{ progress.completeCount }} uploaded</span> </li>
+          <li><span class="tag is-danger">{{ progress.failureCount }} failures</span> </li>
+        </ul>
+      </div>
+    </div>
+  </section>    
+</div>

src/public/place/directive_1_get_started.html

@@ -0,0 +1,22 @@
+<p class="title is-5">
+  Getting Started...
+</p>
+<p>
+  To get started, add some users which you want to create on the <i>{{ session.authInfo.friendly }}</i> instance.
+</p>
+
+{% for contactType in contactTypes %}
+<div class="navbar-menu">
+  <div class="navbar-item has-dropdown is-hoverable">
+    <a class="navbar-link is-arrowless button" href="/add-place?type={{ contactType.name }}&op=new">
+      <span class="material-symbols-outlined">add</span> Add {{contactType.friendly}}
+    </a>
+    <div class="navbar-dropdown">
+      <a class="navbar-item" href="/add-place?type={{ contactType.name }}&op=new">Create New</a>
+      <a class="navbar-item" href="/add-place?type={{ contactType.name }}&op=replace">Replace Existing</a>
+      <a class="navbar-item" href="/add-place?type={{ contactType.name }}&op=bulk">Upload from CSV</a>
+      <a class="navbar-item" href="/move/{{ contactType.name }}">Move</a>
+    </div>
+  </div>
+</div>
+{% endfor %}

src/public/place/directive_2_prompt_upload.html

@@ -0,0 +1,15 @@
+<p class="title is-5">
+  Upload When Ready
+</p>
+<p>
+  You now have some <i>staged users</i> below which are ready for upload. 
+  When everything looks right, upload them to <i>{{ session.authInfo.friendly }}</i>.
+</p>
+
+<div class="columns is-centered">
+  <div class="column is-4 has-text-centered">
+    <a class="button is-primary" data-target="progress-modal" hx-post="/app/apply-changes" hx-swap="none">
+      <span class="material-symbols-outlined">group_add</span> Upload
+    </a>
+  </div>
+</div>

src/public/place/directive_3_in_progress.html

@@ -0,0 +1,5 @@
+<p class="title is-5">
+  Upload In Progress...
+</p>
+
+<progress class="progress is-medium is-dark" value="{{ progress.completeCount }}" max="{{ progress.totalCount }}">{{ progress.percent }}</progress>

src/public/place/directive_4_prompt_save.html

@@ -0,0 +1,13 @@
+<p class="title is-5">
+  Download Resulting User Credentials
+</p>
+
+<p>
+  Usernames and passwords are now available for download. Click the button below to download the credentials as a file.
+</p>
+
+<div class="columns is-centered">
+  <div class="column is-4 has-text-centered">
+    {% include "components/button_save_credentials.html" %}
+  </div>
+</div>