2023-04-24 14:59:50 +00:00
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
{% extends 'base.html' %}
|
2023-05-17 12:32:52 +00:00
|
|
|
{% block right_sidebar %}
|
|
|
|
|
{% endblock %}
|
2023-04-26 13:42:42 +00:00
|
|
|
|
2023-05-17 12:32:52 +00:00
|
|
|
{% if current_user.is_authenticated %}
|
2023-04-26 13:42:42 +00:00
|
|
|
{% include 'book/add_collection_modal.html' %}
|
2023-05-17 12:32:52 +00:00
|
|
|
{% include 'book/delete_collection_modal.html' %}
|
|
|
|
|
{% include 'book/add_sub_collection_modal.html' %}
|
|
|
|
|
{% include 'book/delete_sub_collection_modal.html' %}
|
|
|
|
|
{% include 'book/add_section_modal.html' %}
|
|
|
|
|
{% include 'book/delete_section_modal.html' %}
|
2023-04-28 09:22:13 +00:00
|
|
|
{% endif %}
|
2023-04-26 13:42:42 +00:00
|
|
|
|
|
|
|
|
|
2023-04-24 14:59:50 +00:00
|
|
|
{% block content %}
|
2023-05-17 12:32:52 +00:00
|
|
|
|
|
|
|
|
<div
|
|
|
|
|
id="accordion-collapse"
|
|
|
|
|
data-accordion="open"
|
|
|
|
|
class="p-3 w-2/6 border-t border-r border-gray-200 dark:border-gray-700 h-screen">
|
|
|
|
|
<div class="flex justify-between">
|
|
|
|
|
<h1 class="text-l font-extrabold dark:text-white ml-4 mb-3">
|
|
|
|
|
Table of contents
|
|
|
|
|
</h1>
|
|
|
|
|
<div class="flex text-white">
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
<svg id="dropdownDefaultButton" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 cursor-pointer"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
|
|
|
|
|
<!-- Dropdown menu -->
|
|
|
|
|
<div id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" data-modal-target="add-collection-modal" data-modal-toggle="add-collection-modal" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Collection</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Subcollection</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
<a href="{{ url_for("book.settings", book_id=book.id) }}" type="button" class="ml-2" >
|
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-04-24 14:59:50 +00:00
|
|
|
<!-- prettier-ignore -->
|
2023-05-17 12:32:52 +00:00
|
|
|
{% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
|
|
|
|
|
<div>
|
|
|
|
|
<div class="flex items-center justify-start w-full p-5 font-medium text-left text-gray-500 border border-gray-200 rounded-t-xl focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400">
|
|
|
|
|
<button type="button" data-accordion-target="#accordion-collapse-body-{{loop.index}}" aria-expanded="true" aria-controls="accordion-collapse-body-{{loop.index}}">
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
<svg data-accordion-icon class="w-6 h-6 rotate-180 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
|
|
|
|
|
</button>
|
|
|
|
|
<a id="accordion-collapse-heading-{{loop.index}}" class=" text-black dark:text-white ">
|
|
|
|
|
<form id="rename-collection-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" method="post" class="mb-0">
|
|
|
|
|
{{ form_hidden_tag() }}
|
|
|
|
|
<input class=" bg-inherit border-none " value="{{collection.label}}" type="text" name="label" id="edit-collection-label-{{loop.index}}" placeholder="Collection label" required readonly/>
|
|
|
|
|
<button name="submit" type="submit"></button>
|
|
|
|
|
</form>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<svg id="dropdownCollectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
|
2023-05-08 08:24:26 +00:00
|
|
|
</div>
|
2023-05-17 12:32:52 +00:00
|
|
|
<div data="collection-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" data-modal-target="add-collection-modal" data-modal-toggle="add-collection-modal" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Collection</button>
|
|
|
|
|
</li>
|
|
|
|
|
{% if not collection.is_leaf %}
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="callAddSubCollectionModal" data-modal-target="add-sub-collection-modal" data-modal-toggle="add-sub-collection-modal" data-collection-id="{{collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Subcollection</button>
|
|
|
|
|
</li>
|
|
|
|
|
{% endif %}
|
|
|
|
|
{% if collection.children|length ==0 or collection.children|length ==0 and collection.is_leaf %}
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="_" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
{% endif %}
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="rename-collection-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Collection</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="callDeleteCollectionModal" data-modal-target="delete-collection-modal" data-modal-toggle="delete-collection-modal" data-collection-id="{{collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Collection</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Collection and contents</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Collection</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
2023-05-08 08:24:26 +00:00
|
|
|
</div>
|
2023-05-17 12:32:52 +00:00
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
<div id="accordion-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-collapse-heading-{{loop.index}}">
|
|
|
|
|
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
|
|
|
|
|
{% if not collection.is_leaf %}
|
|
|
|
|
<!-- if collection has sub_collection make for loop for it -->
|
|
|
|
|
<!-- Nested accordion -->
|
|
|
|
|
{% for sub_collection in collection.children if not sub_collection.is_deleted%}
|
|
|
|
|
<div id="accordion-nested-collapse" data-accordion="open">
|
|
|
|
|
<div class="flex items-center justify-start w-full p-5 rounded-t-xl font-medium text-left text-gray-500 border border-b-0 border-gray-200 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800 dark:border-gray-700 dark:text-gray-400">
|
|
|
|
|
<button
|
|
|
|
|
type="button"
|
|
|
|
|
data-accordion-target="#accordion-nested-collapse-body-{{loop.index}}"
|
|
|
|
|
aria-expanded="true"
|
|
|
|
|
aria-controls="accordion-nested-collapse-body-{{loop.index}}">
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
<svg data-accordion-icon class="w-6 h-6 shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg>
|
|
|
|
|
</button>
|
|
|
|
|
<a id="accordion-nested-collapse-heading-{{loop.index}}" class=" text-black dark:text-white ">
|
|
|
|
|
<form id="rename-sub-collection-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" method="post" class="mb-0">
|
|
|
|
|
{{ form_hidden_tag() }}
|
|
|
|
|
<input class=" bg-inherit border-none " value="{{sub_collection.label}}" type="text" name="label" id="edit-sub-collection-label-{{loop.index}}" placeholder="Sub collection label" required readonly/>
|
|
|
|
|
<button name="submit" type="submit"></button>
|
|
|
|
|
</form>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<svg id="dropdownSubCollectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
|
|
|
|
|
<div data="sub-collection-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="callAddSectionModal" data-modal-target="add-section-modal" data-modal-toggle="add-section-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">New Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="rename-sub-collection-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Sub Collection</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="callDeleteSubCollectionModal" data-modal-target="delete-sub-collection-modal" data-modal-toggle="delete-sub-collection-modal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Sub Collection</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Sub Collection and contents</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Sub Collection</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2023-04-26 09:35:43 +00:00
|
|
|
<!-- prettier-ignore -->
|
2023-05-17 12:32:52 +00:00
|
|
|
<div id="accordion-nested-collapse-body-{{loop.index}}" class="hidden" aria-labelledby="accordion-nested-collapse-heading-{{loop.index}}">
|
|
|
|
|
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
|
|
|
|
|
<!-- here comes for loop for all section in this sub_collection-->
|
|
|
|
|
{% for section in sub_collection.active_sections %}
|
|
|
|
|
<div class="mb-10">
|
|
|
|
|
<a id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
|
|
|
|
|
<form id="rename-section-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" data-section-id="{{section.id}}" method="post">
|
|
|
|
|
{{ form_hidden_tag() }}
|
|
|
|
|
<input class=" bg-inherit border-none " value="{{section.label}}" type="text" name="label" id="edit-section-label-{{loop.index}}" placeholder="Section label" required readonly/>
|
|
|
|
|
<button name="submit" type="submit"></button>
|
|
|
|
|
</form>
|
|
|
|
|
</a>
|
|
|
|
|
<svg id="dropdownSectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
|
|
|
|
|
<div data="section-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="rename-section-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" data-modal-target="delete-section-modal" data-modal-toggle="delete-section-modal" id="callDeleteSectionModal" data-collection-id="{{collection.id}}" data-sub-collection-id="{{sub_collection.id}}" data-section-id="{{section.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
<!-- End: Nested accordion -->
|
|
|
|
|
{% else %}
|
|
|
|
|
<!-- if collection doesn't have sub_collection -->
|
|
|
|
|
<div class="p-5 border border-b-0 border-gray-200 dark:border-gray-700">
|
|
|
|
|
<!-- here comes for loop for all section in this collection-->
|
|
|
|
|
{% for section in collection.active_sections %}
|
|
|
|
|
<a id="section-heading-{{loop.index}}" class="text-gray-500 dark:text-gray-400">
|
|
|
|
|
<form id="rename-section-label-form-{{loop.index}}" data-book-id='{{book.id}}' data-collection-id="{{collection.id}}" data-sub-collection-id="_" data-section-id="{{section.id}}" method="post">
|
|
|
|
|
{{ form_hidden_tag() }}
|
|
|
|
|
<input class=" bg-inherit border-none " value="{{section.label}}" type="text" name="label" id="edit-section-label-{{loop.index}}" placeholder="Section label" required readonly/>
|
|
|
|
|
<button name="submit" type="submit"></button>
|
|
|
|
|
</form>
|
|
|
|
|
</a>
|
|
|
|
|
<svg id="dropdownSectionContextButton{{loop.index}}" data-dropdown-toggle="dropdown" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 0 0" stroke-width="1.5" stroke="none" class="w-0 h-0"></svg>
|
|
|
|
|
<div data="section-context-menu-{{loop.index}}" id="dropdown" class="z-10 hidden bg-white divide-y divide-gray-800 border border-gray-800 dark:border-none dark:divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700">
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" id="rename-section-button-{{loop.index}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Rename Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" data-modal-target="delete-collection-modal" data-modal-toggle="delete-collection-modal" id="callDeleteSectionModal" data-collection-id="{{collection.id}}" data-sub-collection-id="_" data-section-id="{{section.id}}" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Delete Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
<ul class="py-2 text-sm text-gray-700 dark:text-gray-200">
|
|
|
|
|
<li>
|
|
|
|
|
<button type="button" class="w-full block px-4 py-2 hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white">Export Section</button>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
{% endfor %}
|
|
|
|
|
</div>
|
|
|
|
|
{% endif %}
|
2023-04-25 11:29:40 +00:00
|
|
|
</div>
|
2023-04-24 14:59:50 +00:00
|
|
|
</div>
|
2023-05-17 12:32:52 +00:00
|
|
|
{% endfor %}
|
2023-04-25 11:29:40 +00:00
|
|
|
</div>
|
2023-05-17 12:32:52 +00:00
|
|
|
|
2023-04-26 13:42:42 +00:00
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
{% endblock %}
|
|
|
|
|
<!-- prettier-ignore -->
|
|
|
|
|
{% block scripts %}
|
|
|
|
|
{% endblock %}
|
