fix ui ux contact log

templates/tickets/staff_entity_form.html

@@ -9,5 +9,47 @@
   <section class="editor-section"><header><span>۳</span><div><h2>گروه‌بندی</h2><p>عضویت مخاطب در گروه‌های قابل مدیریت را اضافه یا حذف کنید</p></div></header><fieldset class="group-selector" data-contact-group-selector><legend>{{ form.groups.label }}</legend><div class="group-selector-tools"><label><span class="sr-only">جست‌وجوی گروه</span><input type="search" placeholder="جست‌وجوی نام گروه یا واحد…" autocomplete="off" data-group-search></label><span class="group-selection-count" data-group-selection-count aria-live="polite">۰ گروه انتخاب شده</span><button type="button" data-clear-groups>پاک‌کردن انتخاب‌ها</button></div><div class="group-choice-list">{{ form.groups }}</div>{{ form.groups.errors }}<small>{{ form.groups.help_text }}</small><p class="group-empty" data-group-empty hidden>گروهی با این عبارت پیدا نشد.</p></fieldset></section>
   <footer class="editor-actions"><button type="submit">ذخیره مخاطب</button><a href="{% url 'staff_tickets:contacts' %}">انصراف</a><span>اطلاعات ورود یا رمز عبور برای مخاطب ساخته نمی‌شود.</span></footer>
 </form>
-{% if call_customer %}<section class="operations-panel" aria-label="سابقه ویرایش مخاطب"><h2>سابقه ویرایش</h2>{% for entry in contact_edit_logs %}<article><p><strong>{{ entry.actor_name }}</strong> · {{ entry.created_at|date:"Y/m/d H:i" }}</p><ul>{% for change in entry.changes %}<li>{{ change.field }}: «{{ change.before|default:"خالی" }}» ← «{{ change.after|default:"خالی" }}»</li>{% endfor %}</ul></article>{% empty %}<p>هنوز ویرایشی در این بخش ثبت نشده است.</p>{% endfor %}</section>{% endif %}</div>{% endblock %}
+{% if call_customer %}
+<section class="operations-panel contact-history" aria-labelledby="contact-history-title">
+  <header class="contact-history__heading">
+    <span class="contact-history__heading-icon" aria-hidden="true">↺</span>
+    <div>
+      <h2 id="contact-history-title">سابقه ویرایش</h2>
+      <p>تغییرات ثبت‌شده این مخاطب، از جدیدترین به قدیمی‌ترین</p>
+    </div>
+    <span class="contact-history__total">{{ contact_edit_logs|length }} رویداد اخیر</span>
+  </header>
+  <ol class="contact-history__timeline">
+    {% for entry in contact_edit_logs %}
+    <li class="contact-history__event">
+      <details class="contact-history__details" {% if forloop.first %}open{% endif %}>
+        <summary class="contact-history__summary">
+          <span class="contact-history__avatar" aria-hidden="true">{{ entry.actor_name|slice:":1" }}</span>
+          <span class="contact-history__identity">
+            <strong>{{ entry.actor_name }}</strong>
+            <time datetime="{{ entry.created_at|date:'c' }}">{{ entry.created_at|date:"Y/m/d H:i" }}</time>
+          </span>
+          <span class="contact-history__count">{{ entry.changes|length }} تغییر</span>
+          <span class="contact-history__chevron" aria-hidden="true"></span>
+        </summary>
+        <ul class="contact-history__changes">
+          {% for change in entry.changes %}
+          <li class="contact-history__change">
+            <strong class="contact-history__field">{{ change.field }}</strong>
+            <div class="contact-history__values">
+              <div class="contact-history__value contact-history__value--before"><span>قبل</span><b dir="auto">{{ change.before|default:"خالی" }}</b></div>
+              <span class="contact-history__arrow" aria-hidden="true">←</span>
+              <div class="contact-history__value contact-history__value--after"><span>بعد</span><b dir="auto">{{ change.after|default:"خالی" }}</b></div>
+            </div>
+          </li>
+          {% endfor %}
+        </ul>
+      </details>
+    </li>
+    {% empty %}
+    <li class="contact-history__empty"><span aria-hidden="true">↺</span><strong>هنوز ویرایشی ثبت نشده است</strong><p>پس از تغییر اطلاعات مخاطب، جزئیات آن در اینجا نمایش داده می‌شود.</p></li>
+    {% endfor %}
+  </ol>
+</section>
+{% endif %}</div>{% endblock %}
 {% block extra_scripts %}<script defer src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/contact-group-selector.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/voip-call.js' %}?v={{ static_asset_version }}"></script>{% endblock %}