Merge pull request #234 from nsidc/replace-plus-minus-buttons

Add macros for all major button types to standardize the buttons
nsidc · Dec 22, 2023 · f904d63 · f904d63
2 parents b3af897 + 6a12ac4
commit f904d63
Show file tree

Hide file tree

Showing 8 changed files with 84 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## NEXT_VERSION
 
+* Standardize all create/edit/delete buttons
 * Refer to "Surveys" as "Projects" in the user interface
     * This is a temporary change for user testing, see #228 for long-term
       decision-making

diff --git a/usaon_benefit_tool/templates/base.html b/usaon_benefit_tool/templates/base.html
@@ -1,5 +1,6 @@
-{% from 'macros/nav_buttons.j2' import nav_buttons, user_buttons %}
 {% from 'bootstrap5/utils.html' import render_messages %}
+{% from 'macros/nav_buttons.j2' import nav_buttons, user_buttons %}
+{% from 'macros/javascript_remove.j2' import add_javascript__remove %}
 
 <!doctype html>
 <head>
@@ -57,6 +58,7 @@
 
   {% block scripts %}
     {{ bootstrap.load_js() }}
+    {{ add_javascript__remove() }}
 
     <!-- init tooltips (https://getbootstrap.com/docs/5.0/components/tooltips/) -->
     <script type="text/javascript">

diff --git a/usaon_benefit_tool/templates/macros/buttons.j2 b/usaon_benefit_tool/templates/macros/buttons.j2
@@ -0,0 +1,39 @@
+{% from 'bootstrap5/utils.html' import render_icon %}
+
+{% macro delete_button(endpoint, text) -%}
+  {# CRITICAL: The "remove()" JS function must be available. #}
+  {% set text = text | default('Delete') %}
+
+  <a href="#"
+     class="btn btn-danger text-nowrap"
+     role="button"
+     onclick="remove('{{url_for(endpoint, **kwargs)}}')"
+  >
+    {{render_icon('trash3-fill')}} {{text}}
+  </a>
+{%- endmacro -%}
+
+
+{% macro create_button(endpoint, text) -%}
+  {% set text = text | default('New') %}
+
+  <a href="{{url_for(endpoint, **kwargs)}}"
+     class="btn btn-success text-nowrap"
+     role="button"
+  />
+    {{ render_icon("plus-circle-fill") }} {{text}}
+  </a>
+{%- endmacro -%}
+
+
+
+{% macro edit_button(endpoint, text) -%}
+  {% set text = text | default('Edit') %}
+
+  <a href="{{url_for(endpoint, **kwargs)}}"
+     class="btn btn-primary text-nowrap"
+     role="button"
+  />
+    {{ render_icon("pencil") }} {{text}}
+  </a>
+{%- endmacro -%}
diff --git a/usaon_benefit_tool/templates/survey/applications.html b/usaon_benefit_tool/templates/survey/applications.html
@@ -1,8 +1,8 @@
 {% extends 'survey/base.html' %}
 {% from 'bootstrap5/form.html' import render_form %}
 {% from 'bootstrap5/utils.html' import render_icon %}
+{% from 'macros/buttons.j2' import delete_button, create_button %}
 {% from 'macros/javascript_highcharts.j2' import display_sankey %}
-{% from 'macros/javascript_remove.j2' import add_javascript__remove %}
 
 {% block content %}
   {{super()}}
@@ -25,13 +25,12 @@ <h3>Applications</h3>
         {% for application in response.applications %}
           <tr>
             <td>{{application.short_name}}
-            <a href="#" onclick="remove('{{url_for(
+              {{delete_button(
                 'application.delete_response_application',
+                'Delete object',
                 survey_id=survey.id,
                 response_application_id=application.id,
-                        )}}'
-                        )">{{render_icon('file-minus-fill', color='danger')}}
-            </a>
+              )}}
             </td>
             <td>
               {% if not application.input_relationships %}
@@ -60,20 +59,20 @@ <h3>Applications</h3>
               </ul>
             </td>
             <td>
-              <a href="{{url_for(
+              {{create_button(
                 'data_product_application.view_response_data_product_application_relationships',
+                'New relationship',
                 survey_id=survey.id,
                 application_id=application.id,
-              )}}">{{render_icon('plus-circle-fill')}}
-              </a>
+              )}}
               {% for input_relationship in application.input_relationships %}
                 <li>
-                <a href="#" onclick="remove('{{url_for(
+                  {{delete_button(
                     'data_product_application.delete_response_data_product_application_relationships',
+                    'Delete relationship',
                     survey_id=survey.id,
                     response_data_product_application_id=input_relationship.id,
-                            )}}'
-                            )">{{render_icon('file-minus-fill', color='danger')}}
+                  )}}
                 </a>
                 </li>
               {% endfor %}
@@ -95,6 +94,4 @@ <h3>Add application</h3>
     </form>
   {% endif %}
 
-  {{ add_javascript__remove() }}
-
 {% endblock %}
diff --git a/usaon_benefit_tool/templates/survey/data_products.html b/usaon_benefit_tool/templates/survey/data_products.html
@@ -1,8 +1,8 @@
 {% extends 'survey/base.html' %}
 {% from 'bootstrap5/form.html' import render_form %}
 {% from 'bootstrap5/utils.html' import render_icon %}
+{% from 'macros/buttons.j2' import delete_button, create_button %}
 {% from 'macros/javascript_highcharts.j2' import display_sankey %}
-{% from 'macros/javascript_remove.j2' import add_javascript__remove %}
 
 {% block content %}
   {{super()}}
@@ -25,13 +25,12 @@ <h3>Data products</h3>
         {% for data_product in response.data_products %}
           <tr>
             <td>{{data_product.short_name}}
-            <a href="#" onclick="remove('{{url_for(
+              {{delete_button(
                 'data_product.delete_response_data_product',
+                'Delete object',
                 survey_id=survey.id,
                 response_data_product_id=data_product.id,
-                        )}}'
-                        )">{{render_icon('file-minus-fill', color='danger')}}
-            </a>
+              )}}
             </td>
             <td>
               {% if not data_product.input_relationships %}
@@ -59,23 +58,20 @@ <h3>Data products</h3>
               </ul>
             </td>
             <td>
-              <a href="{{url_for(
-                       'observing_system_data_product.view_response_observing_system_data_product_relationships',
-                       survey_id=survey.id,
-                       data_product_id=data_product.id,
-                       )}}">
-                {{render_icon('plus-circle-fill')}}
-              </a>
+              {{create_button(
+                 'observing_system_data_product.view_response_observing_system_data_product_relationships',
+                'New relationship',
+                 survey_id=survey.id,
+                 data_product_id=data_product.id,
+              )}}
               {% for input_relationship in data_product.input_relationships %}
                 <li>
-                <a href="#" onclick="remove('{{url_for(
+                  {{delete_button(
                     'observing_system_data_product.delete_response_observing_system_data_product_relationship',
+                    'Delete relationship',
                     survey_id=survey.id,
                     response_observing_system_data_product_id=input_relationship.id,
-                            )}}'
-                            )">{{render_icon('file-minus-fill', color='danger')}}
-
-                </a>
+                  )}}
                 </li>
               {% endfor %}
             </td>
@@ -94,6 +90,5 @@ <h3>Add data product</h3>
       {{render_form(form, button_map={'submit_button': 'primary'}) }}
     </form>
   {% endif %}
-  {{ add_javascript__remove() }}
 
 {% endblock %}
diff --git a/usaon_benefit_tool/templates/survey/observing_systems.html b/usaon_benefit_tool/templates/survey/observing_systems.html
@@ -1,7 +1,7 @@
 {% extends 'survey/base.html' %}
 {% from 'bootstrap5/form.html' import render_form %}
 {% from 'bootstrap5/utils.html' import render_icon %}
-{% from 'macros/javascript_remove.j2' import add_javascript__remove %}
+{% from 'macros/buttons.j2' import delete_button %}
 
 
 {% block content %}
@@ -17,13 +17,12 @@ <h3>Observing systems</h3>
     {% for observing_system in response.observing_systems %}
       <tr>
         <td>{{observing_system.short_name}}
-        <a href="#" onclick="remove('{{url_for(
+          {{delete_button(
             'obs.delete_response_observing_system',
+            'Delete object',
             survey_id=survey.id,
             response_observing_system_id=observing_system.id,
-                    )}}'
-                    )">{{render_icon('file-minus-fill', color='danger')}}
-        </a>
+          )}}
         </td>
       </tr>
     {% endfor %}
@@ -37,5 +36,4 @@ <h3>Add observing system</h3>
 
     </form>
   {% endif %}
-  {{ add_javascript__remove() }}
 {% endblock %}
diff --git a/usaon_benefit_tool/templates/survey/sbas.html b/usaon_benefit_tool/templates/survey/sbas.html
@@ -1,7 +1,7 @@
 {% extends 'survey/base.html' %}
 {% from 'bootstrap5/form.html' import render_form %}
 {% from 'bootstrap5/utils.html' import render_icon %}
-{% from 'macros/javascript_remove.j2' import add_javascript__remove %}
+{% from 'macros/buttons.j2' import delete_button, create_button %}
 {% from 'macros/javascript_highcharts.j2' import display_sankey %}
 
 
@@ -24,13 +24,12 @@ <h3>Societal benefit areas</h3>
         {% for societal_benefit_area in response.societal_benefit_areas %}
           <tr>
             <td>{{societal_benefit_area.societal_benefit_area_id}}
-            <a href="#" onclick="remove('{{url_for(
+              {{delete_button(
                 'sba.delete_response_sba',
+                'Delete object',
                 survey_id=survey.id,
                 response_societal_benefit_area_id=societal_benefit_area.id,
-                        )}}'
-                        )">{{render_icon('file-minus-fill', color='danger')}}
-            </a>
+              )}}
             </td>
             <td>
               {% if not societal_benefit_area.input_relationships %}
@@ -52,21 +51,20 @@ <h3>Societal benefit areas</h3>
               </ul>
             </td>
             <td>
-              <a href="{{url_for(
+              {{create_button(
                 'application_societal_benefit_area.view_response_application_societal_benefit_area_relationships',
+                'New relationship',
                 survey_id=survey.id,
                 societal_benefit_area_id=societal_benefit_area.id,
-              )}}">
-                {{render_icon('plus-circle-fill')}}
-              </a>
+              )}}
               {% for input_relationship in societal_benefit_area.input_relationships %}
                 <li>
-                <a href="#" onclick="remove('{{url_for(
+                  {{delete_button(
                     'application_societal_benefit_area.delete_response_application_societal_benefit_area_relationship',
+                    'Delete relationship',
                     survey_id=survey.id,
-                    response_application_societal_benefit_area_id=input_relationship.id)}}'
-                    )">{{render_icon('file-minus-fill', color='danger')}}
-                </a>
+                    response_application_societal_benefit_area_id=input_relationship.id,
+                  )}}
                 </li>
               {% endfor %}
             </td>
@@ -86,5 +84,4 @@ <h3>Assign societal benefit area</h3>
     {{ display_sankey(sankey_series) }}
   </div>
 
-  {{ add_javascript__remove() }}
 {% endblock %}
diff --git a/usaon_benefit_tool/templates/surveys.html b/usaon_benefit_tool/templates/surveys.html
@@ -1,18 +1,14 @@
 {% extends 'base.html' %}
 {% from 'bootstrap5/utils.html' import render_icon %}
 {% from 'macros/badges/private.j2' import private_badge %}
+{% from 'macros/buttons.j2' import create_button, edit_button %}
 
 
 {% block content %}
   <h2>{% block title %}Projects{% endblock %}</h1>
 
   {% if current_user.role_id=='admin' %}
-    <a href="{{url_for('survey.new_survey')}}"
-       class="btn btn-success"
-       role="button"
-    />
-      {{ render_icon("plus-circle-fill") }} New survey
-    </a>
+    {{ create_button('survey.new_survey') }}
   {% endif %}
 
   <br />
@@ -60,12 +56,7 @@ <h2>{% block title %}Projects{% endblock %}</h1>
         <td>{{survey.status.id}}</td>
         <td>{{private_badge(survey.private)}}</td>
         <td>
-          <a href="{{url_for('survey.view_survey', survey_id=survey.id)}}"
-             class="btn btn-primary text-nowrap"
-             role="button"
-          />
-            {{render_icon('pencil')}} Edit
-          </a>
+          {{ edit_button('survey.view_survey', survey_id=survey.id) }}
         </td>
       </tr>
     {% endfor %}