disable and hide csv import button when request in flight

package.json

@@ -4,6 +4,7 @@
   "main": "dist/index.js",
   "dependencies": {
     "@fastify/autoload": "^5.8.0",
+    "@fastify/compress": "^7.0.3",
     "@fastify/cookie": "^9.2.0",
     "@fastify/env": "^4.2.0",
     "@fastify/formbody": "^7.4.0",
@@ -34,8 +35,8 @@
   "devDependencies": {
     "@medic/eslint-config": "^1.1.0",
     "@types/chai": "^4.3.11",
-    "@types/commander": "^2.12.2",
     "@types/chai-as-promised": "^7.1.8",
+    "@types/commander": "^2.12.2",
     "@types/mocha": "^10.0.6",
     "@types/rewire": "^2.5.30",
     "@types/sinon": "^17.0.2",

src/liquid/place/bulk_create_form.html

@@ -4,8 +4,9 @@
     hx-encoding='multipart/form-data' 
     autocomplete="off"
     hx-post="/place?op=bulk&type={{contactType.name}}"
-    hx-target="this" 
-    hx-swap="outerHTML"
+    hx-disabled-elt="button#place_create_submit"
+    hx-target="div#place_bulk_create_controls" 
+    hx-swap="innerHTML"
   >
       <input name="place_type" value="{{contactType.name}}" hidden />
 
@@ -31,7 +32,7 @@
           </span>
         </label>
       </div><br/>
-      <div class="field is-grouped is-grouped-centered">
+      <div class="field is-grouped is-grouped-centered" id="place_bulk_create_controls">
         <div class="control">
             <button id="place_create_submit" class="button is-link">Add</button>
         </div>
@@ -110,6 +111,10 @@
             fileName.textContent = fileInput.files[0].name;
           }
         }
+        const form = document.querySelector("form#form_place_create");
+        form.addEventListener("GotoList", function(e) {
+          window.location.replace("/");
+        });
       </script>
   </form>
 </section>

src/liquid/place/directive.html

@@ -1,7 +1,7 @@
 <div class="columns is-3 is-variable is-multiline" 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">
+      <div class="hero-body" id="hero_directive_model">
         {% if directiveModel.inProgressCount > 0 %}
           {% include "place/directive_3_in_progress.html" %}
         {% elsif directiveModel.stagedCount > 0 %}

src/liquid/place/directive_2_prompt_upload.html

@@ -8,7 +8,7 @@
 
 <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">
+    <a class="button is-primary" data-target="progress-modal" hx-target="div#hero_directive_model" hx-swap="innerHTML" hx-post="/app/apply-changes">
       <span class="material-symbols-outlined">group_add</span> Upload
     </a>
   </div>

src/routes/add-place.ts

@@ -74,10 +74,8 @@ export default async function addPlace(fastify: FastifyInstance) {
           },
         });
       }
-
-      // back to places list
-      resp.header('HX-Redirect', `/`);
-      return;
+      resp.header('HX-Trigger-After-Swap', `GotoList`);
+      return `<div class="control"><progress class="progress is-small is-primary" max="100"></progress></div><span><i>processing</i></span>`;
     }
 
     throw new Error('unknown op');

src/routes/app.ts

@@ -65,12 +65,14 @@ export default async function sessionCache(fastify: FastifyInstance) {
   });
 
   // initiates place creation via the job manager
-  fastify.post('/app/apply-changes', async (req) => {
+  fastify.post('/app/apply-changes', async (req, resp) => {
     const uploadManager: UploadManager = fastify.uploadManager;
     const sessionCache: SessionCache = req.sessionCache;
 
     const chtApi = new ChtApi(req.chtSession);
     uploadManager.doUpload(sessionCache.getPlaces(), chtApi);
+
+    return resp.view('src/liquid/place/directive_3_in_progress.html');
   });
 
   fastify.post('/app/set-filter/:filter', async (req, resp) => {

src/server.ts

@@ -4,6 +4,7 @@ import cookie from '@fastify/cookie';
 import formbody from '@fastify/formbody';
 import multipart from '@fastify/multipart';
 import fastifyStatic from '@fastify/static';
+import fastifyCompress from '@fastify/compress';
 import view from '@fastify/view';
 import { Liquid } from 'liquidjs';
 import { FastifySSEPlugin } from 'fastify-sse-v2';
@@ -18,9 +19,10 @@ const build = (opts: FastifyServerOptions): FastifyInstance => {
   fastify.register(multipart);
   fastify.register(FastifySSEPlugin);
   fastify.register(cookie);
+  fastify.register(fastifyCompress);
   fastify.register(view, {
     engine: {
-      liquid: new Liquid({ extname: '.html', root: 'src/liquid', jekyllInclude: true, dynamicPartials: true }),
+      liquid: new Liquid({ extname: '.html', root: 'src/liquid', cache: true, jekyllInclude: true, dynamicPartials: true }),
     },
   });
   fastify.register(autoload, {