ihrm/pms/templates/okr/objective_detailed_view_activity.html

{% load i18n %} {% load pmsfilters %}

<style>
  #commentEditor .note-btn-group.send-group {
    margin-right: 0;
  }
</style>

{% if messages %}
  <div class="oh-wrapper">
    {% for message in messages %}
      <div class="oh-alert-container">
        <div class="oh-alert oh-alert--animated {{ message.tags }}">{{ message }}</div>
      </div>
    {% endfor %}
  </div>
{% endif %}
<div class="oh-activity-sidebar__header">
  <a style="cursor: pointer;" onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');"><ion-icon name="chevron-forward-outline" class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close" data-target="#leaveactivitySidebar"></ion-icon></a>
  <span class="oh-activity-sidebar__title">{% trans 'Activities' %}</span>
</div>
<form method="post" hx-target="#activityContainer" hx-post=" {% url 'objective-detailed-view-comment' objective.id %} " id="commentForm">
  {% csrf_token %}

  <div id="commentEditor">
    <textarea rows="2" cols="2" name="comment" id="editor"></textarea>
    <button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp" style="display: none;">{% trans 'Comment' %}</button>
  </div>

  <div class="oh-inner-sidebar-content__footer"></div>
</form>
<ul class="oh-activity-list">
  {% comment %} <li class="oh-activity-list__comment-item">
    <!-- comment section -->
    {% for comment in comments %}
      <div class="oh-activity-list__comment-title">
        <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
          <img src="https://ui-avatars.com/api/?name={{ comment.employee_id }}&background=random" class="oh-activity-list__image" alt="Simone de Beauvoir" />
        </div>
        <small class="oh-activity-list__description">
          <span><strong>{{ comment.employee_id }}</strong> {% trans 'added a comment' %}</span>
          <div class="oh-activity-list__comment-timestamp mt-1">
            <span class="dateformat_changer">{{ comment.created_at|date:'M. d, Y' }}</span>&nbsp,&nbsp
            <span class="timeformat_changer">{{ comment.created_at|date:'g:i a' }}</span>
          </div>
        </small>
      </div>
      <div class="oh-activity-list__comment-container">
        <p class="oh-activity-list__comment">{{ comment.comment }}</p>
      </div>
    {% endfor %}
    <!-- end of comment -->
  </li> {% endcomment %}
  <!-- history section -->
  {% for activity in activity_list %}
    {% comment %} {% for history in history_object.delta.changes %}
      {% endcomment %}
      {% if activity.type == 'Changes' %}
        <ul class="d-flex justify-content-between align-items-center pt-3 mb-3 border-top">
          <li class="oh-activity-list__item align-items-center mb-0">
            <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
              <img src="https://ui-avatars.com/api/?name={{ activity.updated_by }}&background=random" class="oh-activity-list__image" alt="Albert Camus" />
            </div>
            <small class="oh-activity-list__description">
              <strong>{{ activity.updated_by }}</strong>
              {% trans 'updated' %}
              <strong>{{ activity.changes.0.field|title|cut:'_' }}</strong> {% trans 'from' %}
              <strong>{{ activity.changes.0.old }}</strong> to <strong>{{ activity.changes.0.new }}</strong>
            </small>
          </li>
          <li>
            <small>
              <span class="dateformat_changer">{{ activity.pair.0.history_date|date:'M. d, Y' }}</span>&nbsp,&nbsp
              <span class="timeformat_changer">{{ activity.pair.0.history_date|date:'g:i a' }}</span>
            </small>
          </li>
        </ul>
      {% elif activity.type == 'key_result' %}
        {% for history in activity.key_result.delta.changes %}
          <ul class="d-flex justify-content-between align-items-center pt-3 mb-3 border-top">
            <li class="oh-activity-list__item align-items-center mb-0">
              <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
                <img src="https://ui-avatars.com/api/?name={{ activity.key_result.changed_user }}&background=random" class="oh-activity-list__image" alt="Albert Camus" />
              </div>
              <small class="oh-activity-list__description">
                <strong>{{ activity.key_result.changed_user }}</strong>
                {% trans 'updated' %}
                <strong>{{ history.field|replace|title }}</strong> {% trans 'field of ' %}
                <strong>{{ activity.key_result.k_r }}</strong> {% trans 'key result' %},{% trans 'from' %}
                <strong>{{ history.old }}</strong> {% trans 'to' %} <strong>{{ history.new }}</strong>
                {% comment %} <strong>{{ activity.changes.0.field|title|cut:'_' }}</strong> {% trans 'from' %}
                <strong>{{ activity.changes.0.old }}</strong> to <strong>{{ activity.changes.0.new }}</strong> {% endcomment %}
              </small>
            </li>
            <li>
              <small>
                <span class="dateformat_changer">{{ activity.date|date:'M. d, Y' }}</span>&nbsp,&nbsp
                <span class="timeformat_changer">{{ activity.date|date:'g:i a' }}</span>
              </small>
            </li>
          </ul>
        {% endfor %}
      {% elif activity.type == 'comment' %}
        <ul class="pt-3 border-top">
          <div class="oh-activity-list__comment-title d-flex justify-content-between align-items-center">
            <div class="oh-activity-list__item align-items-center mb-0">
              <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
                <img src="https://ui-avatars.com/api/?name={{ activity.comment.employee_id }}&background=random" class="oh-activity-list__image" alt="Albert Camus" />
              </div>
              <small class="oh-activity-list__description"><span><strong>{{ activity.comment.employee_id }}</strong> {% trans 'added a comment' %}</span></small>
            </div>
            <div>
              <small>
                <span class="dateformat_changer">{{ activity.comment.created_at|date:'M. d, Y' }}</span>&nbsp,&nbsp
                <span class="timeformat_changer">{{ activity.comment.created_at|date:'g:i a' }}</span>
              </small>
            </div>
          </div>
          <div class="oh-activity-list__comment-container">
            <p class="oh-activity-list__comment">{{ activity.comment.comment|safe }}</p>
          </div>
        </ul>
      {% else %}
        <ul class="d-flex justify-content-between align-items-center pt-3 mb-3 border-top">
          <li class="oh-activity-list__item align-items-center mb-0">
            <div class="oh-activity-list__photo oh-activity-list__photo--small me-2">
              <img src="https://ui-avatars.com/api/?name={{ activity.updated_by }}&background=random" class="oh-activity-list__image" alt="Albert Camus" />
            </div>
            <small class="oh-activity-list__description">
              <strong>{{ activity.updated_by }}</strong>
              {% trans 'Created Objective' %}
            </small>
          </li>
          <li>
            <small>
              <span class="dateformat_changer">{{ activity.pair.0.history_date|date:'M. d, Y' }}</span>&nbsp,&nbsp
              <span class="timeformat_changer">{{ activity.pair.0.history_date|date:'g:i a' }}</span>
            </small>
          </li>
        </ul>
      {% endif %}
      {% comment %}
    {% endfor %} {% endcomment %}
  {% endfor %}
</ul>

<script>
  // ✅ Send Button styled like toolbar icon
  var sendButton = function (context) {
    var ui = $.summernote.ui
    return ui
      .button({
        contents: 'Add comment <ion-icon name="paper-plane-outline"></ion-icon>',
        tooltip: 'Send Content',
        click: function () {
          const content = context.invoke('code')
          $("#commentEditor button[type=submit]").click()
        }
      })
      .render()
  }

  // ✅ Summernote Init
  $('#editor').summernote({
    height: 70, // compact height
    placeholder: 'Write something...',
    toolbar: [
      ['insert', ['picture', 'link', 'pdfUpload']],
      ['sendGroup', ['send']]
    ],
    buttons: {
      pdfUpload: pdfUploadButton,
      send: sendButton,
    }
  })

  console.log($("#commentEditor .note-btn-group.send-group").parent())

  // ✅ Align last group to right
  $(document).ready(function () {
      $('.note-toolbar .note-btn-group').last().addClass('send-group')
      $("#commentEditor .note-btn-group.send-group").parent().addClass("d-flex justify-content-between")
  })
</script>