Files
ACORE/templates/partials/pharmacy-edit-modal.html
T

110 lines
11 KiB
HTML

{% load i18n %}
{% firstof pharmacy_modal_tab 'main' as modal_tab %}
<div id="pharmacy-edit-modal" role="dialog" aria-modal="true" aria-labelledby="pharmacy-edit-modal-title"
style="display:flex; position:fixed; inset:0; z-index:80; background:rgba(0,0,0,0.4); align-items:flex-start; justify-content:center; padding:1.5rem 1rem; overflow-y:auto;"
onclick="if(event.target===this) pharmacyModalClose()">
<div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); box-shadow:0 20px 60px rgb(0 0 0/0.2); width:100%; max-width:46rem; margin:auto;">
{% if can_edit and pharmacy_edit_form %}
<form hx-post="/pharmacies/{{ pharmacy.pk }}/edit/" hx-target="#main-content" hx-indicator="#loader, find .btn-label-loading" hx-disabled-elt="find button[type=submit]">
{% csrf_token %}
<input type="hidden" name="source" value="list">
<div style="padding:1rem 1.25rem; border-bottom:1px solid var(--color-border); display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem;">
<div>
<div id="pharmacy-edit-modal-title" style="font-size:1rem; font-weight:600; color:var(--color-foreground);">{% trans "Аптека" %} №{{ pharmacy.pharmacy_number }}</div>
<p style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{{ pharmacy.organization.name }}{% if pharmacy.address %} · {{ pharmacy.address }}{% endif %}</p>
</div>
<button type="button" class="btn btn-ghost btn-icon" onclick="pharmacyModalClose()" aria-label="{% trans 'Закрыть' %}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div style="padding:0.75rem 1.25rem 0;">
<div style="display:flex; gap:0.25rem; background:var(--color-muted); border-radius:var(--radius); padding:0.25rem; width:fit-content; flex-wrap:wrap;">
<button type="button" class="ph-edit-tab-btn{% if modal_tab == 'main' %} ph-edit-tab-active{% endif %}" data-tab="main" onclick="pharmacyModalTab('main')"
style="padding:0.375rem 0.9rem; font-size:0.8125rem; font-weight:500; border:none; border-radius:calc(var(--radius) - 2px); cursor:pointer;">{% trans "Основное" %}</button>
<button type="button" class="ph-edit-tab-btn{% if modal_tab == 'address' %} ph-edit-tab-active{% endif %}" data-tab="address" onclick="pharmacyModalTab('address')"
style="padding:0.375rem 0.9rem; font-size:0.8125rem; font-weight:500; border:none; border-radius:calc(var(--radius) - 2px); cursor:pointer;">{% trans "Адрес" %}</button>
<button type="button" class="ph-edit-tab-btn{% if modal_tab == 'people' %} ph-edit-tab-active{% endif %}" data-tab="people" onclick="pharmacyModalTab('people')"
style="padding:0.375rem 0.9rem; font-size:0.8125rem; font-weight:500; border:none; border-radius:calc(var(--radius) - 2px); cursor:pointer;">{% trans "Лицензия" %}</button>
</div>
</div>
{% if pharmacy_form_error %}
<div style="margin:0.75rem 1.25rem 0; padding:0.5rem 0.75rem; border-radius:0.5rem; background:hsl(0 70% 96%); border:1px solid hsl(0 70% 85%); color:hsl(0 55% 35%); font-size:0.8125rem;">
{{ pharmacy_form_error }}
</div>
{% endif %}
<div class="ph-edit-panel" data-tab="main" style="padding:1.25rem;{% if modal_tab != 'main' %} display:none;{% endif %}">
{% include "partials/pharmacy-edit-fields.html" with f=pharmacy_edit_form pharmacy_edit_tab='main' %}
</div>
<div class="ph-edit-panel" data-tab="address" style="padding:1.25rem;{% if modal_tab != 'address' %} display:none;{% endif %}">
{% include "partials/pharmacy-edit-fields.html" with f=pharmacy_edit_form pharmacy_edit_tab='address' %}
</div>
<div class="ph-edit-panel" data-tab="people" style="padding:1.25rem;{% if modal_tab != 'people' %} display:none;{% endif %}">
{% include "partials/pharmacy-edit-fields.html" with f=pharmacy_edit_form pharmacy_edit_tab='people' %}
</div>
<div style="padding:0.875rem 1.25rem; border-top:1px solid var(--color-border); display:flex; justify-content:space-between; gap:0.5rem; flex-wrap:wrap;">
<a href="/pharmacies/{{ pharmacy.pk }}/" hx-get="/pharmacies/{{ pharmacy.pk }}/" hx-target="#main-content" hx-push-url="/pharmacies/{{ pharmacy.pk }}/" hx-indicator="#loader"
style="font-size:0.8125rem; color:var(--color-primary); text-decoration:none; align-self:center;">{% trans "Открыть карточку" %}</a>
<div style="display:flex; gap:0.5rem;">
<button type="button" class="btn btn-secondary" style="border:1px solid var(--color-border);" onclick="pharmacyModalClose()">{% trans "Отмена" %}</button>
<button type="submit" class="btn btn-primary">
{% trans "Сохранить" %}
<span class="btn-label-loading htmx-indicator">{% trans "Сохранение…" %}</span>
</button>
</div>
</div>
</form>
{% else %}
<div style="padding:1rem 1.25rem; border-bottom:1px solid var(--color-border); display:flex; align-items:flex-start; justify-content:space-between; gap:0.75rem;">
<div>
<div id="pharmacy-edit-modal-title" style="font-size:1rem; font-weight:600; color:var(--color-foreground);">{% trans "Аптека" %} №{{ pharmacy.pharmacy_number }}</div>
<p style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.25rem;">{{ pharmacy.organization.name }}</p>
</div>
<button type="button" class="btn btn-ghost btn-icon" onclick="pharmacyModalClose()" aria-label="{% trans 'Закрыть' %}">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
</button>
</div>
<div style="padding:0.75rem 1.25rem 0;">
<div style="display:flex; gap:0.25rem; background:var(--color-muted); border-radius:var(--radius); padding:0.25rem; width:fit-content; flex-wrap:wrap;">
<button type="button" class="ph-edit-tab-btn ph-edit-tab-active" data-tab="main" onclick="pharmacyModalTab('main')"
style="padding:0.375rem 0.9rem; font-size:0.8125rem; font-weight:500; border:none; border-radius:calc(var(--radius) - 2px); cursor:pointer;">{% trans "Основное" %}</button>
<button type="button" class="ph-edit-tab-btn" data-tab="address" onclick="pharmacyModalTab('address')"
style="padding:0.375rem 0.9rem; font-size:0.8125rem; font-weight:500; border:none; border-radius:calc(var(--radius) - 2px); cursor:pointer;">{% trans "Адрес" %}</button>
<button type="button" class="ph-edit-tab-btn" data-tab="people" onclick="pharmacyModalTab('people')"
style="padding:0.375rem 0.9rem; font-size:0.8125rem; font-weight:500; border:none; border-radius:calc(var(--radius) - 2px); cursor:pointer;">{% trans "Лицензия" %}</button>
</div>
</div>
<div class="ph-edit-panel" data-tab="main" data-display="grid" style="padding:1.25rem; display:grid; grid-template-columns:1fr 1fr; gap:0.75rem 1.25rem; font-size:0.8125rem;">
<div><span style="color:var(--color-muted-foreground);">{% trans "Организация" %}</span><br>{{ pharmacy.organization.name|default:"—" }}</div>
<div><span style="color:var(--color-muted-foreground);">{% trans "Статус" %}</span><br>{{ pharmacy.get_status_display }}</div>
<div><span style="color:var(--color-muted-foreground);">{% trans "Телефон" %}</span><br>{{ pharmacy.phone|default:"—" }}</div>
<div><span style="color:var(--color-muted-foreground);">{% trans "Режим работы" %}</span><br>{{ pharmacy.working_hours|default:"—" }}</div>
</div>
<div class="ph-edit-panel" data-tab="address" style="padding:1.25rem; display:none;">
<div style="display:grid; grid-template-columns:1fr 1fr; gap:0.75rem 1.25rem; font-size:0.8125rem; margin-bottom:0.75rem;">
<div><span style="color:var(--color-muted-foreground);">{% trans "Адрес" %}</span><br>{{ pharmacy.address|default:"—" }}</div>
<div><span style="color:var(--color-muted-foreground);">{% trans "Регион" %}</span><br>{{ pharmacy.location_region.name|default:"—" }}</div>
</div>
{% if pharmacy.has_coordinates %}
<div id="pharmacy-picker-map" data-readonly="1" data-lat="{{ pharmacy.latitude }}" data-lng="{{ pharmacy.longitude }}"
style="height:240px; width:100%; border-radius:0.5rem; border:1px solid var(--color-border); overflow:hidden;"></div>
<div style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.5rem;">{{ pharmacy.latitude|floatformat:5 }}, {{ pharmacy.longitude|floatformat:5 }}</div>
{% else %}
<div style="font-size:0.8125rem; color:var(--color-warning);">{% trans "Координаты не указаны" %}</div>
{% endif %}
</div>
<div class="ph-edit-panel" data-tab="people" data-display="grid" style="padding:1.25rem; display:none; grid-template-columns:1fr 1fr; gap:0.75rem 1.25rem; font-size:0.8125rem;">
<div><span style="color:var(--color-muted-foreground);">{% trans "Лицензия" %}</span><br>{{ pharmacy.license_number|default:"—" }}</div>
<div><span style="color:var(--color-muted-foreground);">{% trans "Заведующий" %}</span><br>{% if pharmacy.head_pharmacist %}{{ pharmacy.head_pharmacist.last_name }} {{ pharmacy.head_pharmacist.first_name }}{% else %}—{% endif %}</div>
</div>
<div style="padding:0.875rem 1.25rem; border-top:1px solid var(--color-border); display:flex; justify-content:space-between; gap:0.5rem;">
<a href="/pharmacies/{{ pharmacy.pk }}/" hx-get="/pharmacies/{{ pharmacy.pk }}/" hx-target="#main-content" hx-push-url="/pharmacies/{{ pharmacy.pk }}/" hx-indicator="#loader"
style="font-size:0.8125rem; color:var(--color-primary); text-decoration:none; align-self:center;">{% trans "Открыть карточку" %}</a>
<button type="button" class="btn btn-secondary" style="border:1px solid var(--color-border);" onclick="pharmacyModalClose()">{% trans "Закрыть" %}</button>
</div>
{% endif %}
</div>
</div>
<script>
if (typeof pharmacyModalReady === 'function') pharmacyModalReady({tab: '{{ modal_tab|escapejs }}'});
</script>