timetracking/httpdocs/templates/timetracking/_entry_row.html.twig

{# templates/timetracking/_entry_row.html.twig #}
<div class="entry-row{% if entry.invoiced %} entry-row--invoiced{% endif %}"
     id="entry-{{ entry.id }}"
     data-id="{{ entry.id }}"
     data-duration="{{ entry.duration }}"
     data-project-id="{{ entry.project.id }}"
     data-service-id="{{ entry.service ? entry.service.id : '' }}"
     data-label="{{ entry.label|default('')|e('html_attr') }}"
     data-note="{{ entry.note|default('')|e('html_attr') }}"
     data-invoiced="{{ entry.invoiced ? 'true' : 'false' }}">

  <div class="entry-row__display">
    <div class="entry-row__info">
      <div class="entry-row__title">
        {{ entry.project.client.name }} / {{ entry.project.name }}
        {% if entry.service %} / {{ entry.service.name }}{% endif %}
      </div>
      {% if entry.label %}
        <span class="entry-row__label">{{ entry.label }}</span>
      {% endif %}
      {% if entry.note %}
        <div class="entry-row__note">{{ entry.note }}</div>
      {% endif %}
    </div>
    <div class="entry-row__actions">
      <span class="entry-row__badge">{{ entry.durationFormatted }}</span>
      {% if entry.invoiced %}
        <span class="entry-row__lock-indicator" title="{{ 'app.entry.invoiced_title'|trans }}">
          {% include '_atoms/icon-lock.html.twig' %}
        </span>
      {% else %}
        <button class="entry-row__btn entry-row__btn--stopwatch"
                title="{{ 'app.stopwatch.resume'|trans }}"
                data-action="timer-toggle">
          {% include '_atoms/icon-stopwatch.html.twig' %}
        </button>
        <button class="entry-row__btn entry-row__btn--edit"
                title="{{ 'app.entry.btn_edit'|trans }}"
                data-action="edit">
          {% include '_atoms/icon-edit.html.twig' %}
        </button>
        <button class="entry-row__btn entry-row__btn--delete"
                title="{{ 'app.entry.btn_delete'|trans }}"
                data-action="delete">
          {% include '_atoms/icon-delete.html.twig' %}
        </button>
      {% endif %}
    </div>
  </div>

  {% if not entry.invoiced %}
    <div class="entry-row__edit" hidden>
      <div class="entry-form__grid entry-form__grid--inline">

        <label class="entry-form__label">{{ 'app.entry.label_duration'|trans }}</label>
        <div class="entry-form__field">
          <input type="text"
                 class="input input--sm edit-duration"
                 value="{{ entry.durationFormatted }}"
                 autocomplete="off" />
          {% include '_atoms/duration-help.html.twig' %}
        </div>

        <label class="entry-form__label">{{ 'app.entry.label_project_service'|trans }}</label>
        <div class="entry-form__field entry-form__field--selects">
          <select class="select edit-project">
            {# Wird per JS befüllt #}
          </select>
          <select class="select edit-service">
            {# Wird per JS befüllt #}
          </select>
        </div>

        <label class="entry-form__label">{{ 'app.entry.label_label'|trans }}</label>
        <div class="entry-form__field entry-form__field--label">
          <div class="label-chips edit-label-chips"></div>
          <div class="label-input-wrap">
            <input type="text" class="input input--sm edit-label"
                   value="{{ entry.label|default('') }}"
                   placeholder="{{ 'app.entry.placeholder_label'|trans }}" autocomplete="off" />
            <div class="label-autocomplete edit-label-autocomplete" hidden></div>
          </div>
        </div>

        <label class="entry-form__label">{{ 'app.entry.label_note'|trans }}</label>
        <div class="entry-form__field">
          <textarea class="textarea edit-note" rows="3">{{ entry.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>