fix del contact from group and image for ticket

templates/tickets/staff_create.html

@@ -1,11 +1,13 @@
 {% extends 'base.html' %}{% load static %}
 {% block title %}{{ page_title }}{% endblock %}
 {% block content %}
+<link rel="stylesheet" href="{% static 'css/ticket-composer.css' %}?v={{ static_asset_version }}">
+<link rel="stylesheet" href="{% static 'css/ticket-composer-v2.css' %}?v={{ static_asset_version }}">
 <div class="staff-create-page">
-  <header class="create-page-head"><div><a class="create-back" href="{% url 'staff_tickets:list' %}">→ بازگشت به میز کار</a><p class="eyebrow">ایجاد پرونده از طرف واحد فروش</p><h1>ثبت تیکت برای مشتری</h1><p>ابتدا مشتری را شناسایی کنید، سپس موضوع و پیام کامل را ثبت کنید. مشتری یک لینک امن برای مشاهده دریافت می‌کند.</p></div><a class="customer-directory-link" href="{% url 'staff_tickets:customers' %}"><span>♙</span><div><b>برنامه مشتریان</b><small>جست‌وجو و مشاهده سوابق</small></div></a></header>
+  <header class="create-page-head"><div><a class="create-back" href="{% url 'staff_tickets:list' %}">→ بازگشت به میز کار</a><p class="eyebrow">ایجاد پرونده از طرف {{ staff_unit.name|default:'واحد سازمانی' }}</p><h1>ثبت تیکت برای مشتری</h1><p>ابتدا مشتری را شناسایی کنید، سپس موضوع و پیام کامل را ثبت کنید. مشتری یک لینک امن برای مشاهده دریافت می‌کند.</p></div><a class="customer-directory-link" href="{% url 'staff_tickets:customers' %}"><span>♙</span><div><b>برنامه مشتریان</b><small>جست‌وجو و مشاهده سوابق</small></div></a></header>
   <ol class="create-progress" aria-label="مراحل ثبت تیکت"><li class="active"><span>۱</span><div><b>انتخاب مشتری</b><small>جست‌وجو یا ثبت شماره جدید</small></div></li><li><span>۲</span><div><b>تعریف درخواست</b><small>دسته‌بندی و موضوع</small></div></li><li><span>۳</span><div><b>پیام و ارسال</b><small>شرح کامل و پیوست‌ها</small></div></li></ol>
   <section class="customer-ticket-create" data-customer-picker data-search-url="{% url 'staff_tickets:customer_search' %}" data-location-picker data-locations-url="{% static 'data/iran-locations.json' %}">
-    <form method="post" enctype="multipart/form-data" data-disable-on-submit class="assisted-ticket-form">{% csrf_token %}{{ form.customer_id }}
+    <form method="post" enctype="multipart/form-data" data-disable-on-submit data-ticket-composer class="assisted-ticket-form">{% csrf_token %}{{ form.customer_id }}
       {% if form.non_field_errors %}<div class="create-form-errors" role="alert">{{ form.non_field_errors }}</div>{% endif %}
       <div class="create-form-main">
         <section class="create-section customer-section"><header class="create-section-head"><span class="section-number">۱</span><div><h2>مشتری این تیکت کیست؟</h2><p>در بانک مشتریان جست‌وجو کنید یا شماره موبایل را مستقیماً وارد کنید.</p></div></header>
@@ -14,11 +16,11 @@
           <div class="field-grid customer-fields"><label class="field-control"><span>{{ form.customer_mobile.label }} <em>*</em></span>{{ form.customer_mobile }}{{ form.customer_mobile.errors }}<small>شماره به شکل 09xxxxxxxxx</small></label><label class="field-control"><span>{{ form.stakeholder_type.label }}</span>{{ form.stakeholder_type }}{{ form.stakeholder_type.errors }}</label><label class="field-control" data-new-customer-field><span>{{ form.first_name.label }} <em>*</em></span>{{ form.first_name }}{{ form.first_name.errors }}</label><label class="field-control" data-new-customer-field><span>{{ form.last_name.label }} <em>*</em></span>{{ form.last_name }}{{ form.last_name.errors }}</label><label class="field-control"><span>{{ form.organization_name.label }}</span>{{ form.organization_name }}{{ form.organization_name.errors }}</label><label class="field-control"><span>{{ form.groups.label }}</span>{{ form.groups }}{{ form.groups.errors }}<small>{{ form.groups.help_text }}</small></label><label class="field-control"><span>{{ form.province.label }} <i>اختیاری</i></span>{{ form.province }}{{ form.province.errors }}</label><label class="field-control"><span>{{ form.city.label }} <i>اختیاری</i></span>{{ form.city }}{{ form.city.errors }}</label></div><datalist id="ticket-province-options" data-province-options></datalist><datalist id="ticket-city-options" data-city-options></datalist><p class="location-hint" data-location-hint>استان و شهر اختیاری هستند.</p>
         </section>
         <section class="create-section"><header class="create-section-head"><span class="section-number">۲</span><div><h2>مالکیت و موضوع درخواست</h2><p>واحد ایجادکننده به‌صورت امن از عضویت اصلی شما تعیین می‌شود.</p></div></header>{{ form.unit }}{{ form.unit.errors }}<div class="field-grid"><div class="field-control"><span>{{ form.unit.label }}</span><strong data-staff-unit data-unit-id="{{ staff_unit.pk|default:'' }}">{{ staff_unit.name|default:'واحد فعالی برای کاربر تعریف نشده' }}</strong><small>این مقدار قابل تغییر نیست.</small></div><label class="field-control"><span>{{ form.category.label }} <em>*</em></span>{{ form.category }}{{ form.category.errors }}</label><label class="field-control"><span>{{ form.subject.label }} <em>*</em></span>{{ form.subject }}{{ form.subject.errors }}<small>نمونه: پیگیری پیش‌فاکتور لوله پنج‌لایه</small></label></div></section>
-        <section class="create-section message-section"><header class="create-section-head"><span class="section-number">۳</span><div><h2>پیام کامل کارشناس</h2><p>موضوع، اقدام انجام‌شده و انتظار از مشتری را یک‌جا و کامل توضیح دهید.</p></div></header><label class="field-control message-field"><span>{{ form.body.label }} <em>*</em></span>{{ form.body }}{{ form.body.errors }}<small>این متن نخستین پیام رسمی پرونده است و برای مشتری نمایش داده می‌شود.</small></label><label class="attachment-field"><span class="attachment-icon">＋</span><div><b>{{ form.files.label }}</b><small>تصویر، صوت یا سند مرتبط را انتخاب کنید؛ پیوست اختیاری است.</small></div>{{ form.files }}{{ form.files.errors }}</label></section>
+        <section class="create-section message-section"><header class="create-section-head"><span class="section-number">۳</span><div><h2>پیام کامل کارشناس</h2><p>موضوع، اقدام انجام‌شده و انتظار از مشتری را یک‌جا و کامل توضیح دهید.</p></div></header><label class="field-control message-field"><span>{{ form.body.label }} <em>*</em></span>{{ form.body }}{{ form.body.errors }}<small>این متن نخستین پیام رسمی پرونده است و برای مشتری نمایش داده می‌شود.</small></label><div class="upload-zone media-picker staff-attachment-picker"><div class="attachment-picker-copy"><span class="attachment-icon">＋</span><div><b>{{ form.files.label }}</b><small>چند عکس، فایل یا سند را انتخاب کنید؛ پیش از ثبت می‌توانید هر مورد را جداگانه حذف کنید.</small></div></div><div class="media-picker-actions"><label class="media-picker-button gallery-button" for="staff-ticket-gallery-input">▣ انتخاب عکس از گالری</label><label class="media-picker-button" for="staff-ticket-file-input">＋ انتخاب فایل</label></div><input id="staff-ticket-gallery-input" type="file" accept="image/*" multiple data-gallery-input><input id="staff-ticket-file-input" type="file" multiple data-document-input><span class="canonical-files">{{ form.files }}</span>{{ form.files.errors }}<small class="compression-note" data-compression-status>تصاویر بزرگ پیش از ارسال، روی دستگاه شما بهینه و کم‌حجم می‌شوند.</small><div class="file-preview" data-file-preview aria-live="polite"></div></div></section>
       </div>
       <aside class="create-summary"><div class="summary-sticky"><header><span>خلاصه پرونده</span><small>پیش از ارسال بررسی کنید</small></header><dl><div><dt>مشتری</dt><dd data-summary-customer>هنوز انتخاب نشده</dd></div><div><dt>موضوع</dt><dd data-summary-subject>هنوز وارد نشده</dd></div><div><dt>دسته‌بندی</dt><dd data-summary-category>انتخاب نشده</dd></div></dl><div class="secure-delivery"><span>⌁</span><p><b>ارسال امن به مشتری</b><small>پس از ثبت، لینک ورود امن از طریق پیامک در صف ارسال قرار می‌گیرد.</small></p></div><button type="submit" class="create-submit"><span>ثبت تیکت و ارسال لینک امن</span><small>این اقدام یک پرونده جدید ایجاد می‌کند</small></button><a href="{% url 'staff_tickets:list' %}" class="create-cancel">انصراف و بازگشت</a></div></aside>
     </form>
   </section>
 </div>
-<script defer src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/staff-customer-picker.js' %}?v={{ static_asset_version }}"></script>
+<script defer src="{% static 'vendor/compressor.min.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/staff-customer-picker.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/attachment-uploader.js' %}?v={{ static_asset_version }}"></script>
 {% endblock %}

templates/tickets/staff_entity_form.html

@@ -6,7 +6,7 @@
   {% if form.non_field_errors %}<div class="create-form-errors" role="alert">{{ form.non_field_errors }}</div>{% endif %}
   <section class="editor-section"><header><span>۱</span><div><h2>هویت و راه ارتباطی</h2><p>اطلاعات پایه مخاطب برای شناسایی و ارسال پیامک</p></div></header><div class="editor-grid"><label><span>{{ form.mobile.label }} <em>*</em></span>{{ form.mobile }}{{ form.mobile.errors }}<small>شماره معتبر به شکل 09xxxxxxxxx</small></label><label><span>{{ form.stakeholder_type.label }} <em>*</em></span>{{ form.stakeholder_type }}{{ form.stakeholder_type.errors }}</label><label><span>{{ form.first_name.label }} <em>*</em></span>{{ form.first_name }}{{ form.first_name.errors }}</label><label><span>{{ form.last_name.label }}</span>{{ form.last_name }}{{ form.last_name.errors }}</label><label class="editor-wide"><span>{{ form.organization_name.label }}</span>{{ form.organization_name }}{{ form.organization_name.errors }}</label></div></section>
   <section class="editor-section"><header><span>۲</span><div><h2>موقعیت جغرافیایی</h2><p>استان و شهر را از پایگاه مکان‌های ایران انتخاب کنید</p></div></header><div class="editor-grid"><label><span>{{ form.province.label }}</span>{{ form.province }}{{ form.province.errors }}</label><label><span>{{ form.city.label }}</span>{{ form.city }}{{ form.city.errors }}</label></div><p class="location-status" data-location-hint>برای نمایش شهرها، ابتدا استان را انتخاب کنید.</p></section>
-  <section class="editor-section"><header><span>۳</span><div><h2>گروه‌بندی و دسترسی</h2><p>حداقل یک گروه انتخاب کنید؛ عضویت همزمان در چند گروه پشتیبانی می‌شود</p></div></header><label class="group-selector"><span>{{ form.groups.label }} <em>*</em></span>{{ form.groups }}{{ form.groups.errors }}<small>{{ form.groups.help_text }}</small></label></section>
+  <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 }} <em>*</em></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></div>{% endblock %}
-{% block extra_scripts %}<script defer src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script>{% 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>{% endblock %}