cityssm/corporate-records-manager

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

<h1 class="title is-1">Records Dashboard</h1>

<div class="columns">
  <div class="column">
    <% if (!user.canViewAll) { %>
      <div class="message is-info">
        <p class="message-body">
          Note that you can only see records that have been marked as related to you.
        </p>
      </div>
    <% } %>
    <div class="box">
      <form id="form--search">
        <input id="search--limit" name="limit" type="hidden" value="50" />
        <input id="search--offset" name="offset" type="hidden" value="0" />
        <div class="columns">
          <div class="column is-narrow">
            <div class="control is-expanded has-icons-left">
              <div class="select is-fullwidth">
                <select id="search--recordTypeKey" name="recordTypeKey" aria-label="Record Type">
                  <option value="">(All Record Types)</option>
                  <% for (const recordType of recordTypes) { %>
                    <option value="<%= recordType.recordTypeKey %>">
                      <%= recordType.recordType %>
                    </option>
                  <% } %>
                </select>
              </div>
              <span class="icon is-small is-left">
                <i class="fas fa-filter" aria-hidden="true"></i>
              </span>
            </div>
          </div>
          <div class="column">
            <div class="control has-icons-left">
              <input class="input" id="search--searchString" name="searchString" type="text" placeholder="Search Records" />
              <span class="icon is-small is-left">
                <i class="fas fa-search" aria-hidden="true"></i>
              </span>
            </div>
            <p class="help">Searches record number, title, description, party, and location fields.</p>
          </div>
        </div>
        <fieldset class="mb-4 is-hidden" id="fieldset--searchMoreFilters" disabled>
          <div class="columns">
            <div class="column">
              <div class="field">
                <label class="label" for="search--recordNumber">Record Number</label>
                <div class="control has-icons-left">
                  <input class="input" id="search--recordNumber" name="recordNumber" type="text" maxlength="30" />
                  <span class="icon is-small is-left">
                    <i class="fas fa-filter" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
            </div>
            <div class="column">
              <div class="field">
                <label class="label" for="search--recordTag">Tag</label>
                <div class="control has-icons-left">
                  <input class="input" id="search--recordTag" name="recordTag" type="text" list="search--recordTag-datalist" />
                  <span class="icon is-small is-left">
                    <i class="fas fa-filter" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
              <datalist id="search--recordTag-datalist"></datalist>
            </div>
            <div class="column">
              <div class="field">
                <label class="label" for="search--statusTypeKey">Current Status</label>
                <div class="control is-expanded has-icons-left">
                  <div class="select is-fullwidth">
                    <select id="search--statusTypeKey" name="statusTypeKey">
                      <option value="">(All Statuses)</option>
                    </select>
                  </div>
                  <span class="icon is-small is-left">
                    <i class="fas fa-filter" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="columns">
            <div class="column">
              <div class="field">
                <label class="label" for="search--recordDateString-gte">Record Date On or After</label>
                <div class="control has-icons-left">
                  <input class="input" id="search--recordDateString-gte" name="recordDateString-gte" type="date" max="<%= dateTimeFns.dateToString(new Date()) %>" />
                  <span class="icon is-small is-left">
                    <i class="fas fa-greater-than-equal" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
            </div>
            <div class="column">
              <div class="field">
                <label class="label" for="search--recordDateString-lte">Record Date On or Before</label>
                <div class="control has-icons-left">
                  <input class="input" id="search--recordDateString-lte" name="recordDateString-lte" type="date" max="<%= dateTimeFns.dateToString(new Date()) %>" />
                  <span class="icon is-small is-left">
                    <i class="fas fa-less-than-equal" aria-hidden="true"></i>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
        <button class="button is-small is-fullwidth" id="button--searchMoreFiltersToggle" type="button">
          <span class="icon"><i class="fas fa-expand-alt" data-fa-transform="rotate-135" aria-hidden="true"></i></span>
          <span>Toggle More Filters</span>
        </button>
      </form>
    </div>
    <div class="mt-4" id="container--search"></div>
  </div>
  <% if (user.canViewAll && user.canUpdate) { %>
    <div class="column is-one-third">
      <div class="panel is-success">
        <h2 class="panel-heading">Create a New Record</h2>
        <% for (const recordType of recordTypes) { %>
          <%
            if (!recordType.isActive) {
              continue;
            }
          %>
          <a class="panel-block" href="<%= urlPrefix %>/new/<%= recordType.recordTypeKey %>">
            <span class="panel-icon">
              <i class="fas fa-plus" aria-hidden="true"></i>
            </span>
            <%= recordType.recordType %>
          </a>
        <% } %>
      </div>
    </div>
  <% } %>
</div>

<%- include('_footerA'); -%>
<script src="<%= urlPrefix %>/javascripts/dashboard.min.js"></script>
<%- include('_footerB'); -%>