timetracking/httpdocs/templates/service/index.html.twig

{# templates/service/index.html.twig #}
{% extends 'base.html.twig' %}

{% block title %}{{ 'app.service.page_title'|trans }}{% endblock %}

{% block body %}
  <script>
    window.CRUD = { apiBase: '/api/services' };
  </script>

  <div class="crud-page">

    <div class="crud-page__header">
      <h1 class="crud-page__title">{{ 'app.service.page_title'|trans }}</h1>
      <button class="btn btn-primary" id="btn-new">{{ 'app.service.btn_new'|trans }}</button>
    </div>

    <div class="crud-create" id="crud-create">
      <div class="entry-form__grid">

        <label class="entry-form__label">{{ 'app.crud.label_name'|trans }}</label>
        <div class="entry-form__field">
          <input type="text" id="create-name" class="input" placeholder="{{ 'app.service.placeholder_name'|trans }}" />
        </div>

        <label class="entry-form__label">{{ 'app.service.label_billable'|trans }}</label>
        <div class="entry-form__field">
          <label class="crud-checkbox-label">
            <input type="checkbox" id="create-billable" checked />
            <span>{{ 'app.service.billable_checkbox'|trans }}</span>
          </label>
        </div>

        <label class="entry-form__label">{{ 'app.crud.label_note'|trans }}</label>
        <div class="entry-form__field">
          <textarea id="create-note" class="textarea" rows="2"></textarea>
        </div>

        <div class="entry-form__actions">
          <button type="button" class="btn btn-primary" id="btn-create-save">{{ 'app.entry.btn_create'|trans }}</button>
          <button type="button" class="btn btn-secondary" id="btn-create-cancel">{{ 'app.entry.btn_cancel'|trans }}</button>
        </div>

      </div>
    </div>

    <div class="crud-tabs">
      <button class="crud-tab crud-tab--active" data-tab="active">{{ 'app.crud.tab_active'|trans }}</button>
      <button class="crud-tab" data-tab="archived">{{ 'app.crud.tab_archived'|trans }}</button>
    </div>

    <div class="crud-list" id="crud-list">

      {% set currentGroup = null %}
      {% for service in services %}

      {% set group = service.billable ? 'app.service.billable'|trans : 'app.service.not_billable'|trans %}
      {% if group != currentGroup %}
      {% if currentGroup is not null %}</div>{% endif %}
    <div class="crud-list__group">
      <div class="crud-list__group-label">{{ group }}</div>
      {% set currentGroup = group %}
      {% endif %}

      <div class="crud-row{% if service.isArchived() %} crud-row--archived{% endif %}"
           id="service-{{ service.id }}"
           data-id="{{ service.id }}"
           data-archived="{{ service.isArchived() ? '1' : '0' }}"
           data-name="{{ service.name|e('html_attr') }}"
           data-billable="{{ service.billable ? '1' : '0' }}"
           data-note="{{ service.note|default('')|e('html_attr') }}">

        <div class="crud-row__display">
          <div class="crud-row__info">
            <span class="crud-row__name">{{ service.name }}</span>
          </div>
          <div class="crud-row__actions">
            {% if service.isArchived() %}
              <button class="crud-row__btn crud-row__btn--restore" data-action="unarchive" title="{{ 'app.crud.btn_restore'|trans }}">
                <svg viewBox="0 0 16 16" fill="none"><path d="M2 8a6 6 0 1 1 1.5 3.5" stroke="currentColor" stroke-width="1.3" stroke-linecap="round"/><path d="M2 13V9h4" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </button>
            {% else %}
              <button class="crud-row__btn crud-row__btn--edit" data-action="edit" title="{{ 'app.entry.btn_edit'|trans }}">
                <svg viewBox="0 0 16 16" fill="none"><path d="M11 2l3 3L5 14H2v-3L11 2z" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </button>
              <button class="crud-row__btn crud-row__btn--delete" data-action="delete" title="{{ 'app.entry.btn_delete'|trans }}">
                <svg viewBox="0 0 16 16" fill="none"><path d="M3 4h10M6 4V2h4v2M5 4l.5 9h5l.5-9" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/></svg>
              </button>
            {% endif %}
          </div>
        </div>

        {% if not service.isArchived() %}
          <div class="crud-row__edit" hidden>
            <div class="entry-form__grid entry-form__grid--inline">

              <label class="entry-form__label">{{ 'app.crud.label_name'|trans }}</label>
              <div class="entry-form__field">
                <input type="text" class="input edit-name" value="{{ service.name }}" />
              </div>

              <label class="entry-form__label">{{ 'app.service.label_billable'|trans }}</label>
              <div class="entry-form__field">
                <label class="crud-checkbox-label">
                  <input type="checkbox" class="edit-billable" {{ service.billable ? 'checked' : '' }} />
                  <span>{{ 'app.service.billable_checkbox'|trans }}</span>
                </label>
              </div>

              <label class="entry-form__label">{{ 'app.crud.label_note'|trans }}</label>
              <div class="entry-form__field">
                <textarea class="textarea edit-note" rows="2">{{ service.note|default('') }}</textarea>
              </div>

              <div class="entry-form__actions">
                <button type="button" class="btn btn-primary" data-action="save">{{ 'app.entry.btn_save'|trans }}</button>
                <button type="button" class="btn btn-secondary" data-action="cancel">{{ 'app.entry.btn_cancel'|trans }}</button>
              </div>

            </div>
          </div>
        {% endif %}

      </div>

      {% else %}
        <div class="empty-state">
          <p class="empty-state__title">{{ 'app.service.empty'|trans }}</p>
        </div>
      {% endfor %}
      {% if currentGroup is not null %}</div>{% endif %}

  </div>
  </div>

{% endblock %}

{% block javascripts %}
  {{ parent() }}
  {{ encore_entry_script_tags('crud') }}
{% endblock %}