Skip to content

Commit

Permalink
disable and hide csv import button when request in flight (#142)
Browse files Browse the repository at this point in the history
  • Loading branch information
freddieptf authored May 13, 2024
1 parent 4661814 commit becba25
Show file tree
Hide file tree
Showing 20 changed files with 702 additions and 422 deletions.
371 changes: 328 additions & 43 deletions package-lock.json

Large diffs are not rendered by default.

9 changes: 6 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
{
"name": "cht-user-management",
"version": "1.3.16",
"version": "1.3.17",
"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",
Expand All @@ -19,8 +20,9 @@
"axios-retry": "^4.0.0",
"csv": "^6.3.5",
"dotenv": "^16.3.1",
"fastify": "^4.23.2",
"fastify": "^4.27.0",
"fastify-sse-v2": "^3.1.2",
"html-minifier": "^4.0.0",
"jsonwebtoken": "^9.0.2",
"jszip": "^3.10.1",
"libphonenumber-js": "^1.10.48",
Expand All @@ -34,8 +36,9 @@
"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/html-minifier": "^4.0.5",
"@types/mocha": "^10.0.6",
"@types/rewire": "^2.5.30",
"@types/sinon": "^17.0.2",
Expand Down
11 changes: 2 additions & 9 deletions src/liquid/app/fragment_home.html
Original file line number Diff line number Diff line change
@@ -1,13 +1,6 @@
<div class="tile is-child" hx-ext="sse" sse-connect="/events/connection">
<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"
>
<div id="places_parent" class="tile is-child">
{% include "place/directive.html" %}
{% include "place/list.html" %}
{% include "place/list_lazy.html" %}
</div>
</div>
2 changes: 1 addition & 1 deletion src/liquid/components/button_upload.html
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
<a class="{{ include.className | default: "button is-primary" }}" hx-post="/app/apply-changes" hx-swap="none">
<a class="{{ include.className | default: "button is-primary" }}" hx-post="/app/apply-changes" hx-target="div#hero_directive_model" hx-swap="innerHTML">
<span class="material-symbols-outlined">group_add</span> Upload
</a>
88 changes: 88 additions & 0 deletions src/liquid/components/place_item.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
<tr id="{{place.id}}" hx-sse="swap:update-{{place.id}}" hx-target="this" hx-swap="outerHTML">
{% for hierarchy in contactType.hierarchy %}
{% capture propertyName %}hierarchy_{{ hierarchy.property_name }}{% endcapture %}
{%
include "components/list_cell.html"
propertyName=propertyName
property=hierarchy
values=place.hierarchyProperties
linkTo=place.resolvedHierarchy[hierarchy.level]
%}
{% endfor %}

{% for property in contactType.place_properties %}
{% if property.type != 'generated' %}
{% capture propertyName %}place_{{ property.property_name }}{% endcapture %}
{%
include "components/list_cell.html"
propertyName=propertyName
property=property
values=place.properties
%}
{% endif %}
{% endfor %}

{% for contact_property in contactType.contact_properties %}
{% if contact_property.type != 'generated' %}
{% capture propertyName %}contact_{{ contact_property.property_name }}{% endcapture %}
{%
include "components/list_cell.html"
propertyName=propertyName
property=contact_property
values=place.contact.properties
%}
{% endif %}
{% endfor %}

{% if contactType.user_role.size > 1 %}
{% capture propertyName %}user_{{ contactType.userRoleProperty.property_name }}{% endcapture %}
{%
include "components/list_cell.html"
propertyName=propertyName
property=contactType.userRoleProperty
values=place.userRoleProperties
%}
{% endif %}

<td>
{% capture tag_text %}{% if place.validationErrors == empty %}{{ place.state }}{% else %}invalid{% endif %}{%
endcapture %}
{% capture tag_class %}
{% if place.state == 'failure' %}is-danger
{% elsif place.state == 'success' %}is-success
{% elsif place.validationErrors != empty %}is-warning
{% endif %}
{% if place.uploadError %}has-tooltip-arrow has-tooltipl-multiline{% endif %}
{% endcapture %}
<span class="tag is-info {{ tag_class }}" {% if place.uploadError
%}data-tooltip="{{ place.uploadError | escape }}" {% endif %}>
{{ tag_text }}
</span>
</td>

<td>
{% if place.creationDetails.password %}
{% capture explanation %}Username: {{ place.creationDetails.username }} Password: {{ place.creationDetails.password }}{% endcapture %}
<span class="has-tooltip-arrow has-tooltipl-multiline material-symbols-outlined"
data-tooltip="{{ explanation | escape }}"
onclick="navigator.clipboard.writeText(`{{ explanation | escape }}`);">
key
</span>
{% else %}
<a href="/place/edit/{{place.id}}" data-tooltip="Edit">
<span class="material-symbols-outlined">edit</span>
</a>
<a hx-post="/place/refresh/{{place.id}}" data-tooltip="Refresh" hx-target="this" hx-swap="none">
<span class="material-symbols-outlined">refresh</span>
</a>
{% if place.validationErrors == empty %}
<a hx-post="/place/upload/{{place.id}}" hx-target="this" hx-swap="none" data-tooltip="Upload">
<span class="material-symbols-outlined">upload</span>
</a>
{%endif%}
{%endif%}

<a class="material-symbols-outlined" data-tooltip="Forget" hx-post="/place/remove/{{place.id}}"
hx-swap="none">delete</a>
</td>
</tr>
22 changes: 22 additions & 0 deletions src/liquid/components/table_header.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<thead>
<tr>
{% for hierarchy in contactType.hierarchy %}
<th id="hierarchy_{{ hierarchy.property_name }}">{{ hierarchy.friendly_name }}</th>
{% endfor %}
{% for property in contactType.place_properties %}
{% if property.type != 'generated' %}
<th id="place_{{property.property_name}}">{{property.friendly_name}}</th>
{% endif %}
{% endfor %}
{% for contact_property in contactType.contact_properties %}
{% if contact_property.type != 'generated' %}
<th id="contact_{{contact_property.property_name}}">{{contact_property.friendly_name}}</th>
{% endif %}
{% endfor %}
{% if contactType.user_role.size > 1 %}
<th id="{{userRoleProperty.property_name}}">{{ contactType.userRoleProperty.friendly_name }}</th>
{% endif %}
<th></th>
<th></th>
</tr>
</thead>
7 changes: 6 additions & 1 deletion src/liquid/place/bulk_create_form.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@
hx-encoding='multipart/form-data'
autocomplete="off"
hx-post="/place?op=bulk&type={{contactType.name}}"
hx-disabled-elt="button#place_create_submit, a#cancel"
hx-indicator="#place_create_submit_progress"
hx-target="this"
hx-swap="outerHTML"
hx-swap="outerHTML"
>
<input name="place_type" value="{{contactType.name}}" hidden />

Expand Down Expand Up @@ -39,6 +41,9 @@
<a href="/" id="cancel" class="button">Cancel</a>
</div>
</div>
<div>
<progress id="place_create_submit_progress" class="progress is-small is-primary htmx-indicator" max="100"></progress>
</div>

<div class="tile box">
<table class="table is-fullwidth is-striped is-hoverable">
Expand Down
5 changes: 3 additions & 2 deletions src/liquid/place/directive.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<div class="columns is-3 is-variable is-multiline" id="directive" hx-swap-oob="true">
<div class="columns is-3 is-variable is-multiline" id="directive" hx-sse="swap:directive"
hx-target="this" hx-swap="outerHTML">
<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 %}
Expand Down
2 changes: 1 addition & 1 deletion src/liquid/place/directive_2_prompt_upload.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
118 changes: 3 additions & 115 deletions src/liquid/place/list.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div id="place_list" hx-swap-oob="true">
<div id="place_list">
{% for contactType in contactTypes %}
<div id="{{contactType.name}}" class="mb-6">
<h2 class="title is-4">{{contactType.friendly}}</h2>
Expand All @@ -7,122 +7,10 @@ <h2 class="title is-4">{{contactType.friendly}}</h2>
id="table_places"
class="table is-fullwidth is-striped is-hoverable"
>
<thead>
<tr>
{% for hierarchy in contactType.hierarchy %}
<th id="hierarchy_{{ hierarchy.property_name }}">{{ hierarchy.friendly_name }}</th>
{% endfor %}
{% for property in contactType.place_properties %}
{% if property.type != 'generated' %}
<th id="place_{{property.property_name}}">{{property.friendly_name}}</th>
{% endif %}
{% endfor %}
{% for contact_property in contactType.contact_properties %}
{% if contact_property.type != 'generated' %}
<th id="contact_{{contact_property.property_name}}">{{contact_property.friendly_name}}</th>
{% endif %}
{% endfor %}
{% if contactType.user_role.size > 1 %}
<th id="{{userRoleProperty.property_name}}">{{ contactType.userRoleProperty.friendly_name }}</th>
{% endif %}
<th></th>
<th></th>
</tr>
</thead>
{% include "components/table_header.html" contactType=contactType %}
<tbody>
{% for place in contactType.places %}
<tr>
{% for hierarchy in contactType.hierarchy %}
{% capture propertyName %}hierarchy_{{ hierarchy.property_name }}{% endcapture %}
{%
include "components/list_cell.html"
propertyName=propertyName
property=hierarchy
values=place.hierarchyProperties
linkTo=place.resolvedHierarchy[hierarchy.level]
%}
{% endfor %}

{% for property in contactType.place_properties %}
{% if property.type != 'generated' %}
{% capture propertyName %}place_{{ property.property_name }}{% endcapture %}

{%
include "components/list_cell.html"
propertyName=propertyName
property=property
values=place.properties
%}
{% endif %}
{% endfor %}

{% for contact_property in contactType.contact_properties %}
{% if contact_property.type != 'generated' %}
{% capture propertyName %}contact_{{ contact_property.property_name }}{% endcapture %}
{%
include "components/list_cell.html"
propertyName=propertyName
property=contact_property
values=place.contact.properties
%}
{% endif %}
{% endfor %}

{% if contactType.user_role.size > 1 %}
{% capture propertyName %}user_{{ contactType.userRoleProperty.property_name }}{% endcapture %}
{%
include "components/list_cell.html"
propertyName=propertyName
property=contactType.userRoleProperty
values=place.userRoleProperties
%}
{% endif %}

<td>
{% capture tag_text %}{% if place.validationErrors == empty %}{{ place.state }}{% else %}invalid{% endif %}{% endcapture %}
{% capture tag_class %}
{% if place.state == 'failure' %}is-danger
{% elsif place.state == 'success' %}is-success
{% elsif place.validationErrors != empty %}is-warning
{% endif %}
{% if place.uploadError %}has-tooltip-arrow has-tooltipl-multiline{% endif %}
{% endcapture %}
<span
class="tag is-info {{ tag_class }}"
{% if place.uploadError %}data-tooltip="{{ place.uploadError | escape }}"{% endif %}
>
{{ tag_text }}
</span>
</td>

<td>
{% if place.creationDetails.password %}
{% capture explanation %}Username: {{ place.creationDetails.username }}
Password: {{ place.creationDetails.password }}{% endcapture %}
<span
class="has-tooltip-arrow has-tooltipl-multiline material-symbols-outlined"
data-tooltip="{{ explanation | escape }}"
onclick="navigator.clipboard.writeText(`{{ explanation | escape }}`);"
>
key
</span>
{% else %}
<a href="/place/edit/{{place.id}}" data-tooltip="Edit">
<span class="material-symbols-outlined">edit</span>
</a>
<a hx-post="/place/refresh/{{place.id}}" data-tooltip="Refresh">
<span class="material-symbols-outlined">refresh</span>
</a>
{% if place.validationErrors == empty %}
<a hx-post="/place/upload/{{place.id}}" hx-target="this" hx-swap="none" data-tooltip="Upload">
<span class="material-symbols-outlined">upload</span>
</a>
{%endif%}
{%endif%}

<a class="material-symbols-outlined" data-tooltip="Forget" hx-post="/place/remove/{{place.id}}">delete</a>
</td>
</tr>
{% include "components/place_item.html" %}
{% endfor%}
</tbody>
</table>
Expand Down
2 changes: 0 additions & 2 deletions src/liquid/place/list_event.html

This file was deleted.

15 changes: 15 additions & 0 deletions src/liquid/place/list_lazy.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div id="place_list" hx-trigger="load" hx-get="/app/list" hx-target="this" hx-swap="outerHTML">
{% for contactType in contactTypes %}
<div id="{{contactType.name}}" class="mb-6">
<h2 class="title is-4">{{contactType.friendly}}</h2>
<div>
<table id="table_places" class="table is-fullwidth is-striped is-hoverable">
{% include "components/table_header.html" contactType=contactType %}
</table>
<div class="container p-6 is-flex is-justify-content-center is-align-content-center">
<img src="/public/spinner.gif" alt="Loading data" />
</div>
</div>
{% endfor %}
</div>
</div>
2 changes: 1 addition & 1 deletion src/public/htmx.min.js

Large diffs are not rendered by default.

Binary file added src/public/spinner.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit becba25

Please sign in to comment.