medic · jonathanbataire · Jun 4, 2024 · Jun 4, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/src/css/custom-bootstrap.css b/src/css/custom-bootstrap.css
@@ -1,14 +1,11 @@
 /*!
  * Generated using the Bootstrap Customizer (https://getbootstrap.com/docs/3.4/customize/)
- */
-/*!
+ */ /*!
  * Bootstrap v3.4.1 (https://getbootstrap.com/)
  * Copyright 2011-2019 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
-
-.badge {
+ */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+ .badge {
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
@@ -54,7 +51,6 @@ a.badge:focus {
 .nav-pills > li > a > .badge {
   margin-left: 3px;
 }
-
 .tooltip {
   position: absolute;
   z-index: 1070;
@@ -168,4 +164,22 @@ a.badge:focus {
   height: 0;
   border-color: transparent;
   border-style: solid;
-}
+}
+.breadcrumb {
+  padding: 8px 15px;
+  margin-bottom: 20px;
+  list-style: none;
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+.breadcrumb > li {
+  display: inline-block;
+}
+.breadcrumb > li + li:before {
+  padding: 0 5px;
+  color: inherit;
+  content: ">";
+}
+.breadcrumb > .active {
+  color: #777777;
+}
diff --git a/src/liquid/app/form_switch.html b/src/liquid/app/form_switch.html
@@ -2,19 +2,15 @@
   {% capture header_caption %}
     {% if op == "bulk" %} Bulk Load from CSV
     {% elsif op == "replace"%} Replace Existing
-    {% elsif op == "move"%} Move 
+    {% elsif op == "move"%} Move
     {% elsif op == "edit" %} Edit
     {% else %} New
     {% endif %}
   {% endcapture %}
-
-  <section class="hero is-small">
-    <div class="hero-body">
-      <p class="title">
-        {{header_caption}} {{contactType.contact_friendly | default: contactType.friendly }}
-      </p>
-    </div>
-  </section>
+
+  <h3 class="form-title">
+    {{header_caption}} {{contactType.contact_friendly | default: contactType.friendly }}
+  </h3>
 
   {% if op == "bulk" %}
     {% include "place/bulk_create_form.html" %}

diff --git a/src/liquid/app/fragment_edit.html b/src/liquid/app/fragment_edit.html
@@ -1,3 +1,3 @@
-<div id="place_form_parent" class="tile is-6 is-child pt-3">
+<div id="place_form_parent">
     {% include "place/create_form.html" %}
 </div>
diff --git a/src/liquid/app/view.html b/src/liquid/app/view.html
@@ -5,12 +5,13 @@
   <title>CHT User Management Tool</title>
   <script src="/public/scripts/htmx.min.js"></script>
   <script src="/public/scripts/sse.js"></script>
-  <script src="/public/scripts/bulma-calendar.min.js"></script>
   <script src="/public/scripts/jquery-3.7.1.slim.min.js"></script>
   <script src="/public/scripts/bootstrap.min.js"></script>
+  <script src="/public/scripts/datepicker.min.js"></script>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="/public/css/custom-bootstrap.min.css" />
   <link rel="stylesheet" href="/public/css/styles.css" />
+  <link rel="stylesheet" href="/public/css/datepicker.min.css" />
 </head>
 
 <body>
@@ -31,4 +32,13 @@
   </div>
 </body>
 
-</html>
+</html>
+
+<script>
+  function clearErrorMsg(elementID) {
+    const errMsg = document.getElementById(elementID);
+    if (errMsg){
+      errMsg.style.display = 'none';
+    }
+  }
+</script>
diff --git a/src/liquid/components/actions.html b/src/liquid/components/actions.html
@@ -23,7 +23,7 @@
   <div class="bottom" id="action_buttons_{{include.contactType.name}}">
     {% if directiveModel.validationErrorCount > 0 or directiveModel.totalCount == 0 %}
     <div data-toggle="tooltip" title="Fix invalid users">
-      <button class="clear-btn disabled" hx-post="/app/apply-changes?type={{ include.contactType.name }}" hx-swap="none"
+      <button class="clear-btn" hx-post="/app/apply-changes?type={{ include.contactType.name }}" hx-swap="none"
         disabled>
         <img src="/public/icons/upload-users.svg"> Upload All
       </button>

diff --git a/src/liquid/components/contact_type_dob.html b/src/liquid/components/contact_type_dob.html
@@ -1,14 +1,10 @@
-<div class="control">
-  <input 
-    name="{{ include.prop_name }}" 
-    {% if include.isInYears %} type="text" {%else%} type="date" {%endif%}
-    class="input"
+<div>
+  <input
+    {% if include.isInYears %} type="number" min="0" max="120" {%else%} type="date-picker" readonly {%endif%}
+    name="{{ include.prop_name }}"
     {% if data[include.prop_name] %} value="{{ data[include.prop_name] }}" {% endif %} 
   />
-</div>
-
-<div class="field">
-  <div class="control">
+  <div class="check-box">
     <input 
       type="checkbox" 
       name="option_dob_unknown" 
@@ -18,4 +14,20 @@
     />
     <label>Date of birth unknown</label>
   </div>
-</div>
+</div>
+
+<script>
+  /* vanillajs-datepicker */
+  var datePickerInput = document.querySelector('input[type="date-picker"]');
+  if (datePickerInput){
+    var datePicker = new Datepicker(datePickerInput, {
+      autohide: true,
+      clearButton: true,
+      enableOnReadonly: true,
+      format: 'yyyy-mm-dd',
+      maxDate: new Date(),
+      minDate: '1920',
+      showOnFocus: true
+    });
+  }
+</script>
diff --git a/src/liquid/components/contact_type_property.html b/src/liquid/components/contact_type_property.html
@@ -1,9 +1,9 @@
 {% if include.prop.type != 'generated' %}
   {% capture prop_name %}{{ include.prefix }}{{include.prop.property_name}}{% endcapture %}
 
-  <div id="div_{{ include.prefix }}{{include.prop.property_name}}" class="field">
-    <label class="label">
-      {% if data['option_dob_unknown'] %}
+  <div id="div_{{ include.prefix }}{{include.prop.property_name}}">
+    <label>
+      {% if data['option_dob_unknown'] and include.prop.property_name == 'date_of_birth' %}
         Age in Years
       {%else%}
         {{include.prop.friendly_name}}
@@ -20,7 +20,7 @@
           data=data
       %}
     {% else %}
-      <div class="control">
+      <div>
         {% if include.prop.type == 'select_one' or include.prop.type == 'select_multiple' %}
           {%
             include "components/contact_type_select.html"
@@ -32,7 +32,6 @@
           <input
             name="{{ prop_name }}"
             type="{% if include.prop.type == 'dob' %}date{% else %}text{% endif %}"
-            class="input"
             {% if false and include.prop.type == 'regex' %} pattern="{{ include.prop.parameter }}" {% endif %}
             {% if data[prop_name] %} value="{{ data[prop_name] }}" {% endif %}
           />

diff --git a/src/liquid/components/filter_tag.html b/src/liquid/components/filter_tag.html
@@ -5,8 +5,7 @@
 
 {%elsif include.count == 0 %}
 <button class="badge tag 
-  {% if not directiveModel.filter %} {{ include.class }} {%endif %}
-   disabled" disabled>
+  {% if not directiveModel.filter %} {{ include.class }} {%endif %}" disabled>
   {{ include.count }} {{ include.filterName }}
 </button>
 {% else %}

diff --git a/src/liquid/components/move_result.html b/src/liquid/components/move_result.html
@@ -1,34 +1,32 @@
-<nav class="breadcrumb has-succeeds-separator" aria-label="breadcrumbs">
-  <ul>
-    <li><span class="tag is-warning" style="margin: 0 10px;">Current</span></li>
-    {% for lineage in fromLineage %}
-    {% if lineage %}
-      <li><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">{{ lineage.name }}</a></li>
-    {% endif %}
-    {% endfor %}
-  </ul>
-  <ul>
-    <li><span class="tag is-success" style="margin: 0 10px;">After</span></li>
-    {% for lineage in toLineage %}
-    {% if lineage %}
-      <li><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">{{ lineage.name }}</a></li>
-    {% endif %}
-    {% endfor %}
-    <li><span style="margin: 0 10px;">{{ fromLineage.last.name }}</span></li>
-  </ul>
-</nav>
+<div class="directive">
+  <a href="/" class="close-btn"><img src="/public/icons/delete-all.svg" alt="close"></a>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="tag badge warning-bg">Current</li>
+      {% for lineage in fromLineage %}
+        {% if lineage %}
+        <li class="breadcrumb-item"><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">
+          {{ lineage.name }}</a></li>
+        {% endif %}
+      {% endfor %}
+    </ol>
+    <ol class="breadcrumb">
+      <li class="tag badge success-bg">After</li>
+      {% for lineage in toLineage %}
+        {% if lineage %}
+          <li class="breadcrumb-item"><a href="https://{{ session.authInfo.domain }}/#/contacts/{{ lineage.id}}">
+            {{ lineage.name }}
+          </a></li>
+        {% endif %}
+      {% endfor %}
+      <li class="breadcrumb-item" active>{{ fromLineage.last.name }}</li>
+    </ol>
+  </nav>
 
-<section class="hero {% if isError %}is-danger{% else %}is-info{% endif %}">
-  <div class="hero-body">
-    <div>
-      <button
-        class="button is-right"
-        style="float: right;"
-        onclick="navigator.clipboard.writeText(`{{ command }}`);"
-      >
-        <span class="material-symbols-outlined">content_copy</span>
-      </button>
-      {{ command }}
-    </div>
-  </div>
-</section>
+  <pre class="{% if isError %}error-bg{% endif %}">
+    <button class="clear-btn" onclick="navigator.clipboard.writeText(`{{ command }}`);">
+      <span>copy content</span>
+    </button>
+    {{ command }}
+  </pre>
+</div>
diff --git a/src/liquid/components/search_input.html b/src/liquid/components/search_input.html
@@ -1,15 +1,14 @@
 {% capture property_name %}{{ include.prefix | default: 'place_' }}{{ include.hierarchy.property_name }}{% endcapture %}
-<div class="field">
+<div>
   <label class="label">
     {{ include.hierarchy.friendly_name }}
     {% if include.hierarchy.required %}*{% endif %}
   </label>
-  <div class="control">
+  <div>
     <input
       id="{{ property_name }}"
       name="{{ property_name }}"
       type="search"
-      class="input"
       hx-post="/search?place_id={{place.id}}&type={{ include.type }}&op={{op}}&level={{ include.hierarchy.level }}&prefix={{ include.prefix }}"
       hx-vals=""
       placeholder="start typing to see suggestions"
@@ -19,6 +18,6 @@
       {% if include.data[property_name] %}value="{{ include.data[property_name] }}" {% endif %}
       hx-encoding="application/x-www-form-urlencoded"
     />
-    <div id="search_results_{{ property_name }}" class="control"></div>
+    <div id="search_results_{{ property_name }}"></div>
   </div>
 </div>
diff --git a/src/liquid/components/search_results.html b/src/liquid/components/search_results.html
@@ -1,19 +1,12 @@
-<div class="dropdown is-active">
-  <div class="dropdown-menu" id="dropdown-menu" role="menu">
-    <div class="dropdown-content">
-      {% for searchResult in searchResults %}
-        <a
-          class="dropdown-item"
-          hx-post="/search/select?place_id={{place.id}}&result_name={{searchResult.name}}&level={{level}}&op={{op}}&prefix={{ prefix }}"
-          hx-target="#place_form_parent"
-          hx-encoding="application/x-www-form-urlencoded"
-        >
-          {% if searchResult.type == 'local' %}
-            <span class="material-symbols-outlined">cloud_off</span>
-          {% endif %}
-          {{searchResult.name}}
-        </a>
-      {% endfor %}
-    </div>
-  </div>
+<div class="autocomplete-dropdown" id="dropdown-menu" role="menu">
+  {% for searchResult in searchResults %}
+  <a class="dropdown-item"
+    hx-post="/search/select?place_id={{place.id}}&result_name={{searchResult.name}}&level={{level}}&op={{op}}&prefix={{ prefix }}"
+    hx-target="#place_form_parent" hx-encoding="application/x-www-form-urlencoded">
+    {% if searchResult.type == 'local' %}
+    <span>cloud_off</span>
+    {% endif %}
+    {{searchResult.name}}
+  </a>
+  {% endfor %}
 </div>