sunrise-cms/views/burialSite-search.ejs

<%- include('_header'); -%>

<div class="columns is-mobile">
  <div class="column is-2-desktop is-narrow-touch is-hidden-print">
    <%- include('_menu-cemeteries'); -%>
  </div>
  <div class="column">
    <nav class="breadcrumb">
      <ul>
        <li><a href="<%= urlPrefix %>/dashboard">Home</a></li>
        <li class="is-active">
          <a href="#" aria-current="page">
            <span class="icon is-small"><i class="fas fa-vector-square" aria-hidden="true"></i></span>
            <span>Burial Sites</span>
          </a>
        </li>
      </ul>
    </nav>

    <form id="form--searchFilters">
      <div class="columns is-vcentered is-mobile">
        <div class="column">
          <h1 class="title is-1">
            Find a Burial Site
          </h1>
        </div>
        <div class="column has-text-right is-narrow">
          <div class="field has-addons">
            <div class="control">
              <label class="button is-small is-static" for="searchFilter--limit">Results</label>
            </div>
            <div class="control">
              <div class="select is-small is-fullwidth">
                <select id="searchFilter--limit" name="limit" aria-label="Results per page">
                  <option value="50">50</option>
                  <option value="100" selected>100</option>
                  <option value="250">250</option>
                  <option value="500">500</option>
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      <% if (user.userProperties.canUpdate) { %>
        <div class="fixed-container is-fixed-bottom-right mx-4 my-4 has-text-right is-hidden-print">
          <a class="button is-circle is-primary has-tooltip-left"
            data-tooltip="Create a New Burial Site"
            href="<%= urlPrefix %>/burialSites/new"
            accesskey="n">
            <i class="fas fa-plus" aria-hidden="true"></i>
            <span class="sr-only">Create a New Burial Site</span>
          </a>
        </div>
      <% } %>

      <div class="box">
        <input id="searchFilter--offset" name="offset" type="hidden" value="0" />
        <div class="columns">
          <div class="column">
            <label class="label" for="searchFilter--burialSiteName">Burial Site Name</label>
            <div class="field has-addons">
              <div class="control has-icons-left">
                <div class="select">
                  <select id="selectFilter--burialSiteNameSearchType" name="burialSiteNameSearchType" aria-label="Burial Site Filter Type">
                    <option value="">contains</option>
                    <option value="startsWith">starts with</option>
                    <option value="endsWith">ends with</option>
                  </select>
                </div>
                <span class="icon is-small is-left">
                  <i class="fas fa-search" aria-hidden="true"></i>
                </span>
              </div>
              <div class="control is-expanded">
                <input class="input" id="searchFilter--burialSiteName" name="burialSiteName" />
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="searchFilter--burialSiteTypeId">Burial Site Type</label>
              <div class="control has-icons-left">
                <div class="select is-fullwidth">
                <select id="searchFilter--burialSiteTypeId" name="burialSiteTypeId">
                  <option value="">(All Burial Site Types)</option>
                  <% for (const burialSiteType of burialSiteTypes) { %>
                    <option value="<%= burialSiteType.burialSiteTypeId %>" <%= (burialSiteType.burialSiteTypeId.toString() === burialSiteTypeId) ? " selected" : "" %>>
                      <%= burialSiteType.burialSiteType || "(No Name)" %>
                    </option>
                  <% } %>
              </select>
                </div>
                <span class="icon is-small is-left">
                  <i class="fas fa-search" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="columns">
          <div class="column">
            <div class="field">
              <label class="label" for="searchFilter--cemeteryId">Cemetery</label>
              <div class="control has-icons-left">
                <div class="select is-fullwidth">
                  <select id="searchFilter--cemeteryId" name="cemeteryId">
                    <option value="">(All Cemeteries)</option>
                    <% for (const cemetery of cemeteries) { %>
                    <option value="<%= cemetery.cemeteryId %>" <%= (cemetery.cemeteryId.toString() === cemeteryId) ? " selected" : "" %>>
                      <%= cemetery.cemeteryName || "(No Name)" %>
                    </option>
                    <% } %>
                  </select>
                </div>
                <span class="icon is-small is-left">
                  <i class="fas fa-search" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="field">
              <label class="label" for="searchFilter--burialSiteStatusId">Status</label>
              <div class="control has-icons-left">
                <div class="select is-fullwidth">
                  <select id="searchFilter--burialSiteStatusId" name="burialSiteStatusId">
                    <option value="">(All Statuses)</option>
                    <% for (const burialSiteStatus of burialSiteStatuses) { %>
                    <option value="<%= burialSiteStatus.burialSiteStatusId %>" <%= (burialSiteStatus.burialSiteStatusId.toString() === burialSiteStatusId) ? " selected" : "" %>>
                      <%= burialSiteStatus.burialSiteStatus %>
                    </option>
                    <% } %>
                  </select>
                </div>
                <span class="icon is-small is-left">
                  <i class="fas fa-search" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </form>

    <div class="mt-5" id="container--searchResults"></div>
  </div>
</div>

<%- include('_footerA'); -%>

<script src="<%= urlPrefix %>/javascripts/burialSite.search.js"></script>

<%- include('_footerB'); -%>