path: root/server/templates/server/doc_list.html

{% extends 'registration/base_custom.html' %}

{% block title %}Admin - Documenti{% endblock %}

{% block nav %}
  <nav class="nav-extended">
    <div class="nav-wrapper red lighten-1">
      <a style="margin-left: 10px;" href="{% url 'index' %}" class="breadcrumb">Home</a>
      <a href="{% url 'server'%}" class="breadcrumb hide-on-med-and-down">Admin</a>
      <a href="{% url 'doclist' %}" class="breadcrumb hide-on-med-and-down">Documenti</a>
      <ul class="right">
          {% if user.is_staff %}
            <li><a href="{% url 'server' %}">Pannello Admin</a></li>
          {% endif %}
          {% if user.is_authenticated %}
            <li><a href="{% url 'personal' %}">{{ user.username }}</a></li>
          {% endif %}
          {% if user.username != "" %}
            <li>
            <a href="{% url 'logout' %}"><i class="material-icons">exit_to_app</i></a>
            </li>
          {% else %}
            <li><a href="{% url 'signup' %}">Registrazione</a></li>
            <li><a href="{% url 'login' %}">Login</a></li>
          {% endif %}
      </ul>
    </div>
    <div class="nav-wrapper red lighten-1">
      <ul>
        <li>
          <input id="select-all" type="checkbox" class="filled-in"/>
          <label for="select-all">
            <a class="tooltipped" data-position="top" data-tooltip="(De)Seleziona tutti" onclick=""><i class="material-icons">select_all</i>
          </label>
          </a>
        </li>
        <li><a class="tooltipped" data-position="top" data-tooltip="Archivia selezionati" onclick="send('archive')"><i class="material-icons">archive</i></a></li>
        <li><a class="tooltipped" data-position="top" data-tooltip="Dearchivia selezionati" Onclick="send('unarchive')"><i class="material-icons">unarchive</i></a></li>
        <li><a class="tooltipped" data-position="top" data-tooltip="Approva selezionati" Onclick="send('approve')"><i class="material-icons left">check</i>DEBUG</a></li>
        <li><a class="tooltipped" data-position="top" data-tooltip="Elimina selezionati" Onclick="send('delete')"><i class="material-icons left">delete</i>DEBUG</a></li>
      </ul>
      <ul class="right">
        <li><a class="tooltipped" data-position="top" data-tooltip="Pulisci filtri" Onclick="send('clear')"><i class="material-icons">clear</i></a></li>
        <li><a href="#modal1" data-target="modal1" class="modal-trigger tooltipped" data-position="top" data-tooltip="Filtri"><i class="material-icons">filter_list</i></a></li>
      </ul>
    </div>
  </nav>
{% endblock %}

{% block content %}
<form id="selection" action="{% url 'doclist' %}" method="post">
{% csrf_token %}
<div id="modal1" class="modal">
  <div class="modal-content">
    <h5>Filtri</h5>
    <div class="row">
      <div class="input-field col s3">
        <label>
          <input name="filter_hidden" type="checkbox" class="filled-in" {{hidden_check}}/>
          <span><i class="material-icons left">archive</i>Archiviati</span>
        </label>
      </div>
      <div class="input-field col s3">
        <label>
          <input name="filter_wait" type="checkbox" class="filled-in" {{wait_check}}/>
          <span><i class="material-icons left">timelapse</i>In Attesa</span>
        </label>
      </div>
      <div class="input-field col s3">
        <label>
          <input name="filter_selfsign" type="checkbox" class="filled-in" {{selfsign_check}}/>
          <span><i class="material-icons left">assignment_turned_in</i>No firma</span>
        </label>
      </div>
      <div class="input-field col s3">
        <label>
          <input name="filter_ok" type="checkbox" class="filled-in" {{ok_check}}/>
          <span><i class="material-icons left">check</i>Approvati</span>
        </label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s6">
        <label for="newer">Pi&ugrave; recenti di</label>
        <input value="{{newer}}" name="newer" id="newer" type="text" class="datepicker">
      </div>
      <div class="input-field col s6">
        <label for="older">Pi&ugrave; vecchi di</label>
        <input value="{{older}}" name="older" id="older" type="text" class="datepicker">
      </div>
    </div>
    <div class = "row">
      <div class="col s12">
        <div id="chips_type" class="chips chips-placeholder chips-autocomplete"></div>
      </div>
    </div>
    <div class ="row col s12">
      <div class="col s12">
        <div id="chips_owner" class="chips chips-placeholder chips-autocomplete "></div>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <a href="#!" onclick="send('filter')" class="modal-close waves-effect waves-green btn-flat">Applica</a>
  </div>
</div>
<input type="hidden" name="action" id="action">
<input type="hidden" name="owner" id="owner">
<input type="hidden" name="type" id="type">
<ul class="collapsible">
    {% for doc in docs %}
        <li>
        <div class="collapsible-header">
            <label>
              <input name={{doc.0.id}} type="checkbox" class="filled-in"/>
              <span></span>
            </label>
            {% if doc.0.status == "wait" %}
                <i class="material-icons">timelapse</i>
            {% elif doc.0.status == "ok" %}
                <i class="material-icons">check</i>
            {% elif doc.0.status == "archive" %}
                <i class="material-icons">archive</i>
            {% elif doc.0.status == "autosign" %}
              <i class="material-icons">assignment_turned_in</i>
            {% endif %}
            {{doc.0.document_type.name}}
            <span class="badge" data-badge-caption="">{{doc.0.user.first_name}} {{doc.0.user.last_name}}</span>
        </div>
        <div class="collapsible-body"><span>
          <ul class="collapsible">
            <li>
              <div class="collapsible-header">
                <i class="material-icons">confirmation_number</i>DEBUG {{doc.0.code}}
              </div>
            </li>
            <li>
              <div class="collapsible-header">
                <i class="material-icons">send</i>{{doc.0.compilation_date}}
              </div>
            </li>
          {% if doc.0.document_type.personal_data %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">person</i>Dati personali
              </div>
              <div class="collapsible-body"><span>
                <table class="striped">
                <tbody>
                {% for field in doc.2 %}
                  <tr>
                  <td>{{field}}</td>
                  </tr>
                {% endfor %}
                </tbody>
                </table>
              </span></div>
            </li>
          {% endif %}
          {% if doc.0.document_type.medical_data %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">healing</i>Dati medici
              </div>
              <div class="collapsible-body"><span>
                <table class="striped">
                <tbody>
                {% for field in doc.3 %}
                  <tr>
                  <td>{{field}}</td>
                  </tr>
                {% endfor %}
                </tbody>
                </table>
              </span></div>
            </li>
          {% endif %}
          {% if doc.0.document_type.custom_data %}
            <li>
              <div class="collapsible-header">
                <i class="material-icons">add_circle_outline</i>Dati aggiuntivi
              </div>
              <div class="collapsible-body"><span>
                <table class="striped">
                <tbody>
                {% for key in doc.1 %}
                  <tr>
                  <td>{{key.key}}</td>
                  <td>{{key.value}}</td>
                  </tr>
                {% endfor %}
                </tbody>
                </table>
              </span></div>
            </li>
          {% endif %}
          </ul>
        </span></div>
        </li>
    {% endfor %}
</ul>
</form>
{% endblock %}

{%block script%}
$(document).ready(function(){
    $('.collapsible').collapsible();
    $('.tooltipped').tooltip();
    $('.modal').modal();
    {% if error %}
      M.toast({html: '{{ error_text}}', classes: 'orange'})
    {% endif %}
});
$('.chips').chips();
$('#chips_type').chips({
  placeholder: 'Tipo',
  secondaryPlaceholder: '+Altro tipo',
  autocompleteOptions: {
    data: {
      {% for t in types %}
        '{{t.name}}': null,
      {% endfor %}
    },
    limit: Infinity,
    minLength: 0
  },
  data: [
    {% for d in chips_type %}
      {tag: '{{d}}'},
    {% endfor %}
  ]
});
$('#chips_owner').chips({
  placeholder: 'Utente',
  secondaryPlaceholder: '+Altro utente',
  autocompleteOptions: {
    data: {
      {% for user in users %}
        '{{user.username}} ({{user.first_name}} {{user.last_name}})': null,
      {% endfor %}
    },
    limit: Infinity,
    minLength: 0
  },
  data: [
    {% for d in chips_owner %}
      {tag: '{{d}}'},
    {% endfor %}
  ]
});

function send(id) {
  var form = document.getElementById('selection')
  var action = document.getElementById('action')
  var owner = document.getElementById('owner')
  var type = document.getElementById('type')
  var chips_owner = M.Chips.getInstance(document.getElementById('chips_owner'));
  var chips_type = M.Chips.getInstance(document.getElementById('chips_type'));
  var type_array = []
  var owner_array = []

  for (i=0; i < chips_owner.chipsData.length; i++) {
    owner_array.push(chips_owner.chipsData[i].tag)
  }

  for (i=0; i < chips_type.chipsData.length; i++) {
    type_array.push(chips_type.chipsData[i].tag)
  }

  action.setAttribute('value', id);
  owner.setAttribute('value', owner_array.join("^|"))
  type.setAttribute('value', type_array.join("^|"))
  form.submit()
}
$('#select-all').click(function(event) {   
    if(this.checked) {
        // Iterate each checkbox
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});
var options = {
  showClearBtn: true,
  container: document.getElementById('main'),
  yearRange:100,
  format:'dd mmmm yyyy',
  i18n: {
    months: [ 'gennaio', 'febbraio', 'marzo', 'aprile', 'maggio', 'giugno', 'luglio', 'agosto', 'settembre', 'ottobre', 'novembre', 'dicembre' ],
    monthsShort: [ 'gen', 'feb', 'mar', 'apr', 'mag', 'giu', 'lug', 'ago', 'set', 'ott', 'nov', 'dic' ],
    weekdays: [ 'domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato' ],
    weekdaysShort: [ 'dom', 'lun', 'mar', 'mer', 'gio', 'ven', 'sab' ],
    weekdaysAbbrev: [ 'D', 'L', 'M', 'M', 'G', 'V', 'S' ],
    today: 'Oggi',
    clear: 'Cancella',
    close: 'Chiudi',
    cancel: 'Annulla',
    firstDay: 1,
    format: 'dddd d mmmm yyyy',
    formatSubmit: 'yyyy/mm/dd',
    labelMonthNext: 'Mese successivo',
    labelMonthPrev: 'Mese precedente',
    labelMonthSelect: 'Seleziona un mese',
    labelYearSelect: 'Seleziona un anno'
        }}
  document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.datepicker');
  var instances = M.Datepicker.init(elems, options);
  });
{% endblock %}