IT_asset_management/app/templates/assignments/form.html

{% extends 'base.html' %}
{% block title %}Assign Asset – IT Asset Management{% endblock %}
{% block breadcrumb %}
  <li class="breadcrumb-item"><a href="{{ url_for('dashboard.index') }}">Home</a></li>
  <li class="breadcrumb-item"><a href="{{ url_for('assignments.index') }}">Assignments</a></li>
  <li class="breadcrumb-item active">New Assignment</li>
{% endblock %}

{% block content %}
<div class="page-header mb-4">
  <h1><i class="bi bi-arrow-left-right me-2"></i>Assign Asset to User</h1>
</div>

<div class="card border-0 shadow-sm" style="max-width:600px;">
  <div class="card-body">
    <form method="POST" action="{{ url_for('assignments.create') }}">
      <div class="mb-3">
        <label class="form-label">User <span class="text-danger">*</span></label>
        <input type="hidden" name="user_id" id="userId" value="{{ preselect_user_id or '' }}">
        <input type="text" id="userSearch" class="form-control"
               placeholder="Search by name or Windows ID…"
               value="" autocomplete="off">
        <div id="userDropdown" class="list-group position-absolute shadow" style="z-index:1000;display:none;min-width:350px;"></div>
        <div id="userDisplay" class="form-text text-success fw-semibold"></div>
      </div>

      <div class="mb-3">
        <label class="form-label">Asset <span class="text-danger">*</span></label>
        <input type="hidden" name="asset_id" id="assetId" value="{{ preselect_asset_id or '' }}">
        <input type="text" id="assetSearch" class="form-control"
               placeholder="Search by serial number or service tag…"
               value="" autocomplete="off">
        <div id="assetDropdown" class="list-group position-absolute shadow" style="z-index:1000;display:none;min-width:350px;"></div>
        <div id="assetDisplay" class="form-text text-success fw-semibold"></div>
      </div>

      <div class="mb-3">
        <label class="form-label">Assigned Date</label>
        <input type="date" name="assigned_date" class="form-control" id="assignedDate">
      </div>

      <div class="mb-4">
        <label class="form-label">Notes</label>
        <textarea name="notes" class="form-control" rows="2"></textarea>
      </div>

      <div class="d-flex gap-2">
        <button type="submit" class="btn btn-primary">
          <i class="bi bi-check-lg me-1"></i>Create Assignment
        </button>
        <a href="{{ url_for('assignments.index') }}" class="btn btn-outline-secondary">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
  // Set today's date as default
  document.getElementById('assignedDate').value = new Date().toISOString().slice(0,10);

  // ── Generic live-search helper ───────────────────────────────────
  function liveSearch(inputId, dropdownId, hiddenId, displayId, endpoint, labelField) {
    const input = document.getElementById(inputId);
    const dropdown = document.getElementById(dropdownId);
    const hidden = document.getElementById(hiddenId);
    const display = document.getElementById(displayId);
    let timer;

    input.addEventListener('input', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        const q = input.value.trim();
        if (q.length < 2) { dropdown.style.display = 'none'; return; }
        fetch(`${endpoint}?q=${encodeURIComponent(q)}`)
          .then(r => r.json())
          .then(items => {
            dropdown.innerHTML = '';
            if (!items.length) { dropdown.style.display = 'none'; return; }
            items.forEach(item => {
              const a = document.createElement('a');
              a.className = 'list-group-item list-group-item-action py-2';
              a.textContent = item.text || item[labelField];
              // colour disabled assets
              if (item.status && item.status !== 'available') {
                a.className += ' text-muted';
                a.textContent += ` [${item.status}]`;
              }
              a.addEventListener('click', () => {
                hidden.value = item.id;
                input.value = item.text || item[labelField];
                display.textContent = '✓ Selected: ' + (item.windows_id || item.serial_number || '');
                dropdown.style.display = 'none';
              });
              dropdown.appendChild(a);
            });
            dropdown.style.display = 'block';
          });
      }, 250);
    });

    document.addEventListener('click', e => {
      if (!input.contains(e.target)) dropdown.style.display = 'none';
    });
  }

  liveSearch('userSearch',  'userDropdown',  'userId',  'userDisplay',
             '{{ url_for("users.search") }}',  'text');
  liveSearch('assetSearch', 'assetDropdown', 'assetId', 'assetDisplay',
             '{{ url_for("assets.search") }}', 'text');

  // Pre-fill labels if IDs were passed via URL
  {% if preselect_user_id %}
  fetch('{{ url_for("users.search") }}?q={{ preselect_user_id }}')
    .then(r => r.json()).then(items => {
      if (items.length) {
        document.getElementById('userSearch').value = items[0].text;
        document.getElementById('userDisplay').textContent = '✓ Pre-selected';
      }
    });
  {% endif %}
  {% if preselect_asset_id %}
  fetch('{{ url_for("assets.search") }}?q={{ preselect_asset_id }}')
    .then(r => r.json()).then(items => {
      if (items.length) {
        document.getElementById('assetSearch').value = items[0].text;
        document.getElementById('assetDisplay').textContent = '✓ Pre-selected';
      }
    });
  {% endif %}
</script>
{% endblock %}