ACORE/templates/partials/documents-browser.html

{% load i18n %}
{% if message %}
<div style="margin-bottom:0.75rem; padding:0.5rem 0.75rem; border-radius:0.5rem; font-size:0.8125rem;
            {% if message_type == 'success' %}color:#137333; background:rgba(19,115,51,0.1); border:1px solid rgba(19,115,51,0.25);
            {% else %}color:#d63333; background:rgba(214,51,51,0.1); border:1px solid rgba(214,51,51,0.25);{% endif %}">
    {{ message }}
</div>
{% endif %}

{% if crumbs %}
<div style="display:flex; align-items:center; gap:0.375rem; flex-wrap:wrap; margin-bottom:0.75rem; font-size:0.8125rem;">
    <a href="#" hx-get="/documents/browse/?section={{ section.key }}" hx-target="#documents-browser" hx-swap="innerHTML"
       style="color:var(--color-primary); text-decoration:none; font-weight:500;">{{ section.label }}</a>
    {% for c in crumbs %}
    <span style="color:var(--color-muted-foreground);">/</span>
    {% if forloop.last %}
    <span style="color:var(--color-foreground);">{{ c.name }}</span>
    {% else %}
    <a href="#" hx-get="/documents/browse/?section={{ section.key }}&path={{ c.path|urlencode }}"
       hx-target="#documents-browser" hx-swap="innerHTML"
       style="color:var(--color-primary); text-decoration:none;">{{ c.name }}</a>
    {% endif %}
    {% endfor %}
</div>
{% endif %}

{% if error == 'not_configured' %}
<div style="padding:0.5rem 0; font-size:0.8125rem; color:var(--color-muted-foreground);">
    {% trans "Файловое хранилище пока не настроено." %}
</div>
{% elif error %}
<div style="padding:0.5rem 0; font-size:0.8125rem; color:#d63333;">
    {% trans "Не удалось получить список документов." %}
</div>
{% else %}
    {% if files %}
    <div style="border:1px solid var(--color-border); border-radius:0.5rem; overflow:hidden; margin-bottom:0.75rem;">
        <table style="width:100%; border-collapse:collapse; font-size:0.8125rem;">
            <tbody>
            {% for f in files %}
            <tr style="border-bottom:1px solid var(--color-border);" class="tr-hover">
                <td style="padding:0.45rem 0.75rem;">
                    {% if f.is_dir %}
                    <a href="#" hx-get="/documents/browse/?section={{ section.key }}&path={{ f.path|urlencode }}"
                       hx-target="#documents-browser" hx-swap="innerHTML"
                       style="color:var(--color-foreground); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:0.5rem;">
                        <span class="nc-file-ico nc-file-ico-folder" aria-hidden="true"></span>{{ f.name }}
                    </a>
                    {% else %}
                    <span style="display:inline-flex; align-items:center; gap:0.5rem; flex-wrap:wrap;">
                        <span class="nc-file-ico nc-file-ico-file" aria-hidden="true"></span>
                        {% if f.is_office and onlyoffice_ready %}
                        <a href="/documents/edit/?section={{ section.key }}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                           style="color:var(--color-primary); text-decoration:none; font-weight:500;">{{ f.name }}</a>
                        <a href="/documents/download/?section={{ section.key }}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                           style="color:var(--color-muted-foreground); font-size:0.75rem; text-decoration:none;">{% trans "скачать" %}</a>
                        {% else %}
                        <a href="/documents/download/?section={{ section.key }}&path={{ sub|urlencode }}&name={{ f.name|urlencode }}"
                           style="color:var(--color-primary); text-decoration:none;">{{ f.name }}</a>
                        {% endif %}
                    </span>
                    {% endif %}
                </td>
                <td style="padding:0.45rem 0.75rem; text-align:right; color:var(--color-muted-foreground); white-space:nowrap;">
                    {% if f.size is not None %}{{ f.size|filesizeformat }}{% endif %}
                </td>
                {% if section.writable %}
                <td style="padding:0.45rem 0.75rem; text-align:right; white-space:nowrap; width:1%;">
                    <form method="post" action="/documents/rename/"
                          hx-post="/documents/rename/" hx-target="#documents-browser" hx-swap="innerHTML"
                          hx-prompt="{% trans 'Новое имя' %}" style="display:inline;">
                        {% csrf_token %}
                        <input type="hidden" name="section" value="{{ section.key }}">
                        <input type="hidden" name="path" value="{{ sub }}">
                        <input type="hidden" name="name" value="{{ f.name }}">
                        <button type="submit" class="nc-file-act">{% trans "Переименовать" %}</button>
                    </form>
                    <form method="post" action="/documents/delete/"
                          hx-post="/documents/delete/" hx-target="#documents-browser" hx-swap="innerHTML"
                          hx-confirm="{% if f.is_dir %}{% trans 'Удалить папку и всё содержимое?' %}{% else %}{% trans 'Удалить файл?' %}{% endif %}"
                          style="display:inline; margin-left:0.375rem;">
                        {% csrf_token %}
                        <input type="hidden" name="section" value="{{ section.key }}">
                        <input type="hidden" name="path" value="{{ sub }}">
                        <input type="hidden" name="name" value="{{ f.name }}">
                        <button type="submit" class="nc-file-act nc-file-act-danger">{% trans "Удалить" %}</button>
                    </form>
                </td>
                {% endif %}
            </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    {% elif not files %}
    <div style="padding:0.35rem 0 0.65rem; font-size:0.8125rem; color:var(--color-muted-foreground);">
        {% trans "В этой папке пока нет файлов." %}
    </div>
    {% endif %}

    {% if section.writable %}
    <div class="nc-file-toolbar">
        <form method="post" action="/documents/upload/"
              hx-post="/documents/upload/" hx-target="#documents-browser" hx-swap="innerHTML"
              hx-encoding="multipart/form-data" enctype="multipart/form-data"
              class="nc-drop">
            {% csrf_token %}
            <input type="hidden" name="section" value="{{ section.key }}">
            <input type="hidden" name="path" value="{{ sub }}">
            <label class="nc-drop-label">
                <input type="file" name="file" required class="nc-drop-input">
                <span class="nc-drop-text">
                    <strong class="nc-drop-title">{% trans "Загрузить файл" %}</strong>
                    <span class="nc-drop-name">{% trans "или перетащите сюда" %}</span>
                </span>
            </label>
            <button type="submit" class="btn btn-primary" style="font-size:0.8125rem; white-space:nowrap;">{% trans "Загрузить" %}</button>
        </form>
        <form method="post" action="/documents/create/"
              hx-post="/documents/create/" hx-target="#documents-browser" hx-swap="innerHTML"
              class="nc-mkdir">
            {% csrf_token %}
            <input type="hidden" name="section" value="{{ section.key }}">
            <input type="hidden" name="path" value="{{ sub }}">
            <input type="text" name="name" class="input" maxlength="120"
                   placeholder="{% trans 'Имя' %}" style="width:11rem; max-width:40vw; font-size:0.8125rem;">
            <select name="type" class="input" style="width:auto; font-size:0.8125rem;">
                <option value="folder">{% trans "Папка" %}</option>
                <option value="docx">{% trans "Word" %}</option>
                <option value="xlsx">{% trans "Excel" %}</option>
            </select>
            <button type="submit" class="btn btn-secondary" style="font-size:0.8125rem; white-space:nowrap;">{% trans "Создать" %}</button>
        </form>
    </div>
    {% endif %}
{% endif %}