logos-co
/
open-law
mirror of https://github.com/logos-co/open-law.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

start of a big feature

This commit is contained in:
Kostiantyn Stoliarskyi 2023-05-17 15:32:52 +03:00
parent 2556838a77
commit f28fba768d
24 changed files with 144754 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/forms/section.py
View File

@ -13,11 +13,16 @@ class BaseSectionForm(FlaskForm):
class CreateSectionForm(BaseSectionForm):
collection_id = StringField("Collection ID", [DataRequired()])
sub_collection_id = StringField("Sub collection ID")
submit = SubmitField("Create")
def validate_collection_id(self, field):
collection_id = field.data
collection: m.Collection = db.session.get(m.Collection, collection_id)
if self.sub_collection_id.data and self.sub_collection_id.data != "_":
collection: m.Collection = db.session.get(
m.Collection, self.sub_collection_id.data
)
if not collection or collection.sub_collections:
log(log.WARNING, "Collection [%s] it not leaf", collection)

101
app/static/css/styles.css
View File

@ -1241,6 +1241,10 @@ input:checked + .toggle-bg {
margin-bottom: 0.375rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@ -1321,18 +1325,10 @@ input:checked + .toggle-bg {
margin-top: 5rem;
}
.mt-24 {
margin-top: 6rem;
}
.mt-3 {
margin-top: 0.75rem;
}
.mt-36 {
margin-top: 9rem;
}
.mt-40 {
margin-top: 10rem;
}
@ -1381,10 +1377,22 @@ input:checked + .toggle-bg {
display: grid;
}
.contents {
display: contents;
}
.hidden {
display: none;
}
.h-0 {
height: 0px;
}
.h-10 {
height: 2.5rem;
}
.h-11 {
height: 2.75rem;
}
@ -1446,18 +1454,22 @@ input:checked + .toggle-bg {
height: 100vh;
}
.h-10 {
height: 2.5rem;
}
.max-h-full {
max-height: 100%;
}
.w-0 {
width: 0px;
}
.w-1\/2 {
width: 50%;
}
.w-10 {
width: 2.5rem;
}
.w-11 {
width: 2.75rem;
}
@ -1474,6 +1486,10 @@ input:checked + .toggle-bg {
width: 66.666667%;
}
.w-2\/6 {
width: 33.333333%;
}
.w-24 {
width: 6rem;
}
@ -1486,6 +1502,10 @@ input:checked + .toggle-bg {
width: 1rem;
}
.w-4\/5 {
width: 80%;
}
.w-40 {
width: 10rem;
}
@ -1526,14 +1546,6 @@ input:checked + .toggle-bg {
width: 100vw;
}
.w-4\/5 {
width: 80%;
}
.w-10 {
width: 2.5rem;
}
.max-w-2xl {
max-width: 42rem;
}
@ -1796,6 +1808,11 @@ input:checked + .toggle-bg {
border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}
.divide-gray-800 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-divide-opacity));
}
.self-center {
align-self: center;
}
@ -1880,6 +1897,11 @@ input:checked + .toggle-bg {
border-top-right-radius: 0.5rem;
}
.rounded-t-xl {
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.border {
border-width: 1px;
}
@ -1896,6 +1918,10 @@ input:checked + .toggle-bg {
border-bottom-width: 1px;
}
.border-b-0 {
border-bottom-width: 0px;
}
.border-b-2 {
border-bottom-width: 2px;
}
@ -1916,6 +1942,10 @@ input:checked + .toggle-bg {
border-style: solid;
}
.border-none {
border-style: none;
}
.border-blue-300 {
--tw-border-opacity: 1;
border-color: rgb(164 202 254 / var(--tw-border-opacity));
@ -1951,6 +1981,11 @@ input:checked + .toggle-bg {
border-color: rgb(75 85 99 / var(--tw-border-opacity));
}
.border-gray-800 {
--tw-border-opacity: 1;
border-color: rgb(31 41 55 / var(--tw-border-opacity));
}
.border-red-700 {
--tw-border-opacity: 1;
border-color: rgb(200 30 30 / var(--tw-border-opacity));
@ -2015,6 +2050,10 @@ input:checked + .toggle-bg {
background-color: rgb(222 247 236 / var(--tw-bg-opacity));
}
.bg-inherit {
background-color: inherit;
}
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgb(253 232 232 / var(--tw-bg-opacity));
@ -2091,10 +2130,6 @@ input:checked + .toggle-bg {
stroke: #F05252;
}
.stroke-yellow-600 {
stroke: #9F580A;
}
.p-0 {
padding: 0px;
}
@ -2485,6 +2520,10 @@ input:checked + .toggle-bg {
width: calc(100vw - 255px);
}
.mt-135{
margin-top:135px;
}
.hover\:border-gray-300:hover {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
@ -2696,6 +2735,11 @@ input:checked + .toggle-bg {
display: none;
}
:is(.dark .dark\:divide-gray-100) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(243 244 246 / var(--tw-divide-opacity));
}
:is(.dark .dark\:divide-gray-600) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(75 85 99 / var(--tw-divide-opacity));
@ -2706,6 +2750,10 @@ input:checked + .toggle-bg {
border-color: rgb(55 65 81 / var(--tw-divide-opacity));
}
:is(.dark .dark\:border-none) {
border-style: none;
}
:is(.dark .dark\:border-blue-500) {
--tw-border-opacity: 1;
border-color: rgb(63 131 248 / var(--tw-border-opacity));
@ -2958,6 +3006,11 @@ input:checked + .toggle-bg {
--tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
}
:is(.dark .dark\:focus\:ring-gray-800:focus) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(31 41 55 / var(--tw-ring-opacity));
}
:is(.dark .dark\:focus\:ring-red-800:focus) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(155 28 28 / var(--tw-ring-opacity));

143728
app/static/js/main.js
View File

File diff suppressed because one or more lines are too long

2
app/templates/base.html
View File

@ -81,7 +81,7 @@
<!-- prettier-ignore -->
<script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript" defer></script>
<div class="p-0 mt-36 h-auto">
<div class="p-0 mt-135 h-auto">
<!-- Main Content -->
{% block content %}{% endblock %}
</div>

8
app/templates/book/add_collection_modal.html
View File

@ -4,16 +4,12 @@
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
{% if collection %}
action="{{ url_for('book.collection_create', book_id=book.id, collection_id=collection.id) }}"
{% else %}
action="{{ url_for('book.collection_create', book_id=book.id) }}"
{% endif %}
action="{{ url_for('book.collection_create', book_id=book.id) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add {% if collection %}Sub {% endif %}Collection </h3>
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add Collection </h3>
<button id="modalAddCloseButton" data-modal-hide="add-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->

12
app/templates/book/add_section_modal.html
View File

@ -4,19 +4,17 @@
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
{% if sub_collection %}
action="{{ url_for('book.section_create', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id) }}"
{% else %}
action="{{ url_for('book.section_create', book_id=book.id, collection_id=collection.id) }}"
{% endif %}
id="add_section_modal_form"
action="{{ url_for('book.section_create', book_id=book.id, collection_id=0, sub_collection_id=0) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="collection_id" value="{{sub_collection.id if sub_collection else collection.id}}" />
<input type="hidden" name="collection_id" id="add_section_modal_collection_id" value="" />
<input type="hidden" name="sub_collection_id" id="add_section_modal_sub_collection_id" value="" />
<input type="hidden" name="about" id="new-section-input" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add Section </h3>
<button id="modalAddCloseButton" data-modal-hide="add-section-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
<button id="modalSectionCloseButton" data-modal-hide="add-section-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">

40
app/templates/book/add_sub_collection_modal.html Normal file
View File

@ -0,0 +1,40 @@
<!-- Add collection modal -->
<!-- prettier-ignore-->
<div id="add-sub-collection-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
id="add_sub_collection_modal_form"
action="{{ url_for('book.collection_create', book_id=book.id, collection_id=None) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="add_sub_collection_modal_collection_id" value="" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Add Sub Collection </h3>
<button id="modalSubCollectionCloseButton" data-modal-hide="add-sub-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<div class="grid gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="label" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Label</label >
<input type="text" name="label" id="label" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Collection label" required />
</div>
</div>
</div>
<div class="p-6 pt-0 space-y-6">
<div class="grid gap-6">
<div class="col-span-6 sm:col-span-3">
<label for="about-collection" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >About</label >
<textarea name="about" id="about-collection" rows="4" class="shadow-sm bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-600 focus:border-blue-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="About collection..."></textarea>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button name="submit" type="submit" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Create</button>
</div>
</form>
</div>
</div>

268
app/templates/book/collection_view.html
View File

@ -1,81 +1,223 @@
<!-- prettier-ignore -->
{% extends 'base.html' %}
{% block right_sidebar %}
{% endblock %}
{% if book.owner.id == current_user.id %}
<!-- show create collection btn on rightside bar -->
{% set show_create_collection = True %}
<!-- prettier-ignore -->
{% if current_user.is_authenticated %}
{% include 'book/add_collection_modal.html' %}
{% 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' %}
{% endif %}
{% block right_sidebar %}
{% include 'book/right_sidebar.html' %}
{% endblock %}
{% block content %}
<div class="overflow-x-auto shadow-md sm:rounded-lg md:mr-64">
<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>
<!-- prettier-ignore -->
<div class="fixed z-40 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
<!-- prettier-ignore -->
<h1 class="font-extrabold text-lg dark:text-white ml-4"> {{book.label}} </h1>
<!-- prettier-ignore -->
<div class="mb-1">
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center" id="myTab" data-tabs-toggle="#myTabContent" role="tablist">
<li class="mr-2" role="presentation">
<button class="flex items-center space-x-2 p-4 border-b-2 rounded-t-lg" id="files-tab" data-tabs-target="#files" type="button" role="tab" aria-controls="files" aria-selected="false">
<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="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9zm3.75 11.625a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" /> </svg>
<span>Files</span>
</button>
</li>
<li class="mr-2" role="presentation">
<button class="flex items-center space-x-2 p-4 border-b-2 border-transparent rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300" id="about-tab" data-tabs-target="#about" type="button" role="tab" aria-controls="about" aria-selected="false">
<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="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" /> </svg>
<span>About</span>
</button>
</li>
</ul>
{% 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>
</div>
<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>
</div>
<div id="myTabContent" class="overflow-y-auto mt-24">
<!-- prettier-ignore -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="files" role="tabpanel" aria-labelledby="files-tab">
<dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
<!-- 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>
<!-- prettier-ignore -->
{% for collection in book.versions[-1].children_collections if not collection.is_root and not collection.is_deleted %}
<!-- prettier-ignore -->
<a href="{{url_for('book.sub_collection_view',book_id=book.id,collection_id=collection.id)}}" >
<dl class="bg-white dark:bg-gray-900 max-w-full p-3 text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700 m-3 border-2 border-gray-200 border-solid rounded-lg dark:border-gray-700">
<div class="flex flex-col pb-3 p-3 w-full">
<!-- prettier-ignore -->
<dt class="flex w-full truncate mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
<p>{{ collection.label }}</p>
<div class="flex ml-auto align-center justify-center space-x-3">
<span class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" /></svg>
<p>55</p>
</span>
<span class="space-x-0.5 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" stroke-width="1" stroke="currentColor" class="w-4 h-4 inline-flex mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
<p>55</p>
</span>
</div>
</dt>
</div>
</dl>
</a >
{% endfor %}
</dl>
</div>
<!-- prettier-ignore -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="about" role="tabpanel" aria-labelledby="about-tab">
<p class="text-sm text-gray-500 dark:text-gray-400"> This is about {{book.label}} </p>
<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 %}
</div>
</div>
{% endfor %}
</div>
<!-- prettier-ignore -->
{% endblock %}
<!-- prettier-ignore -->

10
app/templates/book/delete_collection_modal.html
View File

@ -4,17 +4,15 @@
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
{% if sub_collection %}
action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id) }}"
{% else %}
action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=collection.id) }}"
{% endif %}
id="delete_collection_modal_form"
action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=0) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="delete_collection_modal_collection_id" value="" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Delete Collection </h3>
<button id="modalAddCloseButton" data-modal-hide="delete-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
<button id="modalDeleteCollectionCloseButton" data-modal-hide="delete-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->

15
app/templates/book/delete_section_modal.html
View File

@ -1,19 +1,20 @@
<!-- prettier-ignore-->
<div id="delete-collection-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div id="delete-section-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
{% if sub_collection %}
action="{{ url_for('book.section_delete', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id) }}"
{% else %}
action="{{ url_for('book.section_delete', book_id=book.id, collection_id=collection.id, section_id=section.id) }}"
{% endif %}
id="delete_section_modal_form"
action="{{ url_for('book.section_delete', book_id=book.id, collection_id=0, sub_collection_id=0, section_id=0) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="delete_section_modal_collection_id" value="" />
<input type="hidden" name="sub_collection_id" id="delete_section_modal_sub_collection_id" value="" />
<input type="hidden" name="section_id" id="delete_section_modal_section_id" value="" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Delete Section </h3>
<button id="modalAddCloseButton" data-modal-hide="delete-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
<button id="modalDeleteSectionCloseButton" data-modal-hide="delete-section-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->

27
app/templates/book/delete_sub_collection_modal.html Normal file
View File

@ -0,0 +1,27 @@
<!-- Edit Collection modal -->
<!-- prettier-ignore-->
<div id="delete-sub-collection-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full">
<div class="relative w-full max-w-2xl max-h-full">
<!-- Modal content -->
<form
id="delete_sub_collection_modal_form"
action="{{ url_for('book.collection_delete', book_id=book.id, collection_id=0, sub_collection_id=0) }}"
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<input type="hidden" name="collection_id" id="delete_sub_collection_modal_collection_id" value="" />
<input type="hidden" name="sub_collection_id" id="delete_sub_collection_modal_sub_collection_id" value="" />
<!-- Modal header -->
<div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Delete Collection </h3>
<button id="modalDeleteSubCollectionCloseButton" data-modal-hide="delete-sub-collection-modal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"> <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path> </svg> </button>
</div>
<!-- Modal body -->
<!-- Modal footer -->
<div class="flex items-center p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
<button name="submit" type="submit" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-800">Confirm Deletion</button>
</div>
</form>
</div>
</div>

56
app/views/book.py
View File

@ -451,14 +451,13 @@ def collection_create(book_id: int, collection_id: int | None = None):
flash("You can't create subcollection for this collection", "danger")
return redirect(
url_for(
"book.sub_collection_view",
"book.collection_view",
book_id=book_id,
collection_id=collection_id,
)
)
redirect_url = url_for(
"book.sub_collection_view", book_id=book_id, collection_id=collection_id
"book.collection_view", book_id=book_id,
)
form = f.CreateCollectionForm()
@ -639,14 +638,6 @@ def section_create(
sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
redirect_url = url_for("book.collection_view", book_id=book_id)
if collection_id:
redirect_url = url_for(
"book.section_view",
book_id=book_id,
collection_id=collection_id,
sub_collection_id=sub_collection_id,
)
form = f.CreateSectionForm()
if form.validate_on_submit():
@ -1205,3 +1196,46 @@ def comment_edit(
collection_id=collection_id,
)
)
@bp.route(
"/<int:book_id>/<int:collection_id>/<int:section_id>/edit_section_label",
methods=["POST"],
)
@bp.route(
"/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/<int:section_id>/edit_section_label",
methods=["POST"],
)
@register_book_verify_route(bp.name)
@login_required
def section_edit_label(
book_id: int,
section_id: int,
collection_id: int,
sub_collection_id: int | None = None,
):
redirect_url = url_for(
"book.collection_view",
book_id=book_id,
)
section: m.Section = db.session.get(m.Section, section_id)
form = f.EditSectionForm()
if form.validate_on_submit():
label = form.label.data
if label:
section.label = label
log(log.INFO, "Edit section [%s]", section.id)
section.save()
flash("Success!", "success")
return redirect(redirect_url)
else:
log(log.ERROR, "Section edit errors: [%s]", form.errors)
for field, errors in form.errors.items():
field_label = form._fields[field].label.text
for error in errors:
flash(error.replace("Field", field_label), "danger")
return redirect(redirect_url)

69
src/addSection.ts Normal file
View File

@ -0,0 +1,69 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function addSection() {
const addSectionModal: HTMLElement =
document.querySelector('#add-section-modal');
const addSectionModalBtns = document.querySelectorAll('#callAddSectionModal');
const collectionIdInAddSectionModal: HTMLInputElement =
document.querySelector('#add_section_modal_collection_id');
const subCollectionIdInAddSectionModal: HTMLInputElement =
document.querySelector('#add_section_modal_sub_collection_id');
const addSectionForm: HTMLFormElement = document.querySelector(
'#add_section_modal_form',
);
if (
addSectionModal &&
addSectionModalBtns &&
collectionIdInAddSectionModal &&
subCollectionIdInAddSectionModal &&
addSectionForm
) {
const defaultActionPath = addSectionForm.getAttribute('action');
const addModalCloseBtn = document.querySelector('#modalSectionCloseButton');
if (addModalCloseBtn) {
addModalCloseBtn.addEventListener('click', () => {
sectionModal.hide();
});
}
addSectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
const subCollectionId = btn.getAttribute('data-sub-collection-id');
collectionIdInAddSectionModal.value = collectionId;
subCollectionIdInAddSectionModal.value = subCollectionId;
let newActionPath: string = '';
if (subCollectionId === '_') {
newActionPath = defaultActionPath.replace(
'0/0/create_section',
`${collectionId}/create_section`,
);
} else {
newActionPath = defaultActionPath.replace(
'0/0/create_section',
`${collectionId}/${subCollectionId}/create_section`,
);
}
addSectionForm.setAttribute('action', `${newActionPath}`);
sectionModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
addSectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const sectionModal: ModalInterface = new Modal(
addSectionModal,
modalOptions,
);
}
}

61
src/addSubCollection.ts Normal file
View File

@ -0,0 +1,61 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function addSubCollection() {
const addSubCollectionModal: HTMLElement = document.querySelector(
'#add-sub-collection-modal',
);
const addSubCollectionModalBtns = document.querySelectorAll(
'#callAddSubCollectionModal',
);
const collectionIdInAddSubCollectionModal: HTMLInputElement =
document.querySelector('#add_sub_collection_modal_collection_id');
const addSubCollectionForm: HTMLFormElement = document.querySelector(
'#add_sub_collection_modal_form',
);
if (
addSubCollectionModal &&
addSubCollectionModalBtns &&
collectionIdInAddSubCollectionModal &&
addSubCollectionForm
) {
const defaultActionPath = addSubCollectionForm.getAttribute('action');
const addModalCloseBtn = document.querySelector(
'#modalSubCollectionCloseButton',
);
if (addModalCloseBtn) {
addModalCloseBtn.addEventListener('click', () => {
subCollectionModal.hide();
});
}
addSubCollectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
collectionIdInAddSubCollectionModal.value = collectionId;
const newActionPath = defaultActionPath.replace(
'create_collection',
`${collectionId}/create_sub_collection`,
);
addSubCollectionForm.setAttribute('action', `${newActionPath}`);
subCollectionModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
addSubCollectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const subCollectionModal: ModalInterface = new Modal(
addSubCollectionModal,
modalOptions,
);
}
}

12
src/books.ts
View File

@ -8,15 +8,9 @@ const $addUserModalElement: HTMLElement =
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
console.log('modal is hidden');
},
onShow: () => {
console.log('user id: ');
},
onToggle: () => {
console.log('modal has been toggled');
},
onHide: () => {},
onShow: () => {},
onToggle: () => {},
};
const addModal: ModalInterface = new Modal($addUserModalElement, modalOptions);

64
src/deleteCollection.ts Normal file
View File

@ -0,0 +1,64 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function deleteCollection() {
const deleteCollectionModal: HTMLElement = document.querySelector(
'#delete-collection-modal',
);
const deleteCollectionModalBtns = document.querySelectorAll(
'#callDeleteCollectionModal',
);
const collectionIdInDeleteCollectionModal: HTMLInputElement =
document.querySelector('#delete_collection_modal_collection_id');
const deleteCollectionForm: HTMLFormElement = document.querySelector(
'#delete_collection_modal_form',
);
if (
deleteCollectionModal &&
deleteCollectionModalBtns &&
collectionIdInDeleteCollectionModal &&
deleteCollectionForm
) {
const defaultActionPath = deleteCollectionForm.getAttribute('action');
const deleteModalCloseBtn = document.querySelector(
'#modalDeleteCollectionCloseButton',
);
if (deleteModalCloseBtn) {
deleteModalCloseBtn.addEventListener('click', () => {
collectionDeleteModal.hide();
});
}
deleteCollectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
collectionIdInDeleteCollectionModal.value = collectionId;
let newActionPath: string = '';
newActionPath = defaultActionPath.replace(
'0/delete',
`${collectionId}/delete`,
);
deleteCollectionForm.setAttribute('action', `${newActionPath}`);
collectionDeleteModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
deleteCollectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const collectionDeleteModal: ModalInterface = new Modal(
deleteCollectionModal,
modalOptions,
);
}
}

80
src/deleteSection.ts Normal file
View File

@ -0,0 +1,80 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function deleteSection() {
const deleteSectionModal: HTMLElement = document.querySelector(
'#delete-section-modal',
);
const deleteSectionModalBtns = document.querySelectorAll(
'#callDeleteSectionModal',
);
const collectionIdInDeleteSectionModal: HTMLInputElement =
document.querySelector('#delete_section_modal_collection_id');
const subCollectionIdInDeleteSectionModal: HTMLInputElement =
document.querySelector('#delete_section_modal_sub_collection_id');
const sectionIdInDeleteSectionModal: HTMLInputElement =
document.querySelector('#delete_section_modal_section_id');
const deleteSectionForm: HTMLFormElement = document.querySelector(
'#delete_section_modal_form',
);
if (
deleteSectionModal &&
deleteSectionModalBtns &&
collectionIdInDeleteSectionModal &&
subCollectionIdInDeleteSectionModal &&
sectionIdInDeleteSectionModal &&
deleteSectionForm
) {
const defaultActionPath = deleteSectionForm.getAttribute('action');
const deleteModalCloseBtn = document.querySelector(
'#modalDeleteSectionCloseButton',
);
if (deleteModalCloseBtn) {
deleteModalCloseBtn.addEventListener('click', () => {
sectionDeleteModal.hide();
});
}
deleteSectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
const subCollectionId = btn.getAttribute('data-sub-collection-id');
const sectionId = btn.getAttribute('data-section-id');
collectionIdInDeleteSectionModal.value = collectionId;
subCollectionIdInDeleteSectionModal.value = subCollectionId;
sectionIdInDeleteSectionModal.value = sectionId;
let newActionPath: string = '';
if (subCollectionId === '_') {
newActionPath = defaultActionPath.replace(
'0/0/0/delete_section',
`${collectionId}/${sectionId}/delete_section`,
);
} else {
newActionPath = defaultActionPath.replace(
'0/0/0/delete_section',
`${collectionId}/${subCollectionId}/${sectionId}/delete_section`,
);
}
deleteSectionForm.setAttribute('action', `${newActionPath}`);
sectionDeleteModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
deleteSectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const sectionDeleteModal: ModalInterface = new Modal(
deleteSectionModal,
modalOptions,
);
}
}

68
src/deleteSubCollection.ts Normal file
View File

@ -0,0 +1,68 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
export function deleteSubCollection() {
const deleteSubCollectionModal: HTMLElement = document.querySelector(
'#delete-sub-collection-modal',
);
const deleteSubCollectionModalBtns = document.querySelectorAll(
'#callDeleteSubCollectionModal',
);
const collectionIdInDeleteSubCollectionModal: HTMLInputElement =
document.querySelector('#delete_sub_collection_modal_collection_id');
const subCollectionIdInDeleteSubCollectionModal: HTMLInputElement =
document.querySelector('#delete_sub_collection_modal_sub_collection_id');
const deleteSubCollectionForm: HTMLFormElement = document.querySelector(
'#delete_sub_collection_modal_form',
);
if (
deleteSubCollectionModal &&
deleteSubCollectionModalBtns &&
collectionIdInDeleteSubCollectionModal &&
subCollectionIdInDeleteSubCollectionModal &&
deleteSubCollectionForm
) {
const defaultActionPath = deleteSubCollectionForm.getAttribute('action');
const deleteModalCloseBtn = document.querySelector(
'#modalDeleteSubCollectionCloseButton',
);
if (deleteModalCloseBtn) {
deleteModalCloseBtn.addEventListener('click', () => {
subCollectionDeleteModal.hide();
});
}
deleteSubCollectionModalBtns.forEach(btn =>
btn.addEventListener('click', () => {
const collectionId = btn.getAttribute('data-collection-id');
const subCollectionId = btn.getAttribute('data-sub-collection-id');
collectionIdInDeleteSubCollectionModal.value = collectionId;
let newActionPath: string = '';
newActionPath = defaultActionPath.replace(
'0/0/delete',
`${collectionId}/${subCollectionId}/delete`,
);
deleteSubCollectionForm.setAttribute('action', `${newActionPath}`);
subCollectionDeleteModal.show();
}),
);
const modalOptions: ModalOptions = {
placement: 'bottom-right',
closable: true,
onHide: () => {
deleteSubCollectionForm.setAttribute('action', '');
},
onShow: () => {},
onToggle: () => {},
};
const subCollectionDeleteModal: ModalInterface = new Modal(
deleteSubCollectionModal,
modalOptions,
);
}
}

18
src/main.ts
View File

@ -8,6 +8,15 @@ import {initVote} from './vote';
import {initTheme} from './theme';
import {initApprove} from './approve';
import {initStar} from './star';
import {rightClick} from './rightClick';
import {addSubCollection} from './addSubCollection';
import {addSection} from './addSection';
import {deleteSection} from './deleteSection';
import {renameSection} from './renameSection';
import {deleteCollection} from './deleteCollection';
import {deleteSubCollection} from './deleteSubCollection';
import {renameCollection} from './renameCollection';
import {renameSubCollection} from './renameSubCollection';
initBooks();
initContributors();
@ -19,3 +28,12 @@ initVote();
initTheme();
initApprove();
initStar();
rightClick();
addSubCollection();
addSection();
deleteSection();
renameSection();
deleteCollection();
renameCollection();
deleteSubCollection();
renameSubCollection();

47
src/renameCollection.ts Normal file
View File

@ -0,0 +1,47 @@
export function renameCollection() {
const renameCollectionBtns = document.querySelectorAll(
'[id^="rename-collection-button-"]',
);
const collectionRenameForms: NodeListOf<HTMLFormElement> =
document.querySelectorAll('[id^="rename-collection-label-form-"]');
if (renameCollectionBtns.length > 0 && collectionRenameForms.length > 0) {
renameCollectionBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
const inputsForRename: NodeListOf<HTMLInputElement> =
document.querySelectorAll(`[id^="edit-collection-label-"]`);
inputsForRename[index].removeAttribute('readonly');
const oldName = inputsForRename[index].value;
inputsForRename[index].value = '';
inputsForRename[index].focus();
inputsForRename[index].addEventListener('blur', () => {
inputsForRename[index].value = oldName;
});
collectionRenameForms[index].addEventListener('submit', async e => {
e.preventDefault();
const bookId =
collectionRenameForms[index].getAttribute('data-book-id');
const collectionId =
collectionRenameForms[index].getAttribute('data-collection-id');
const newLabel = inputsForRename[index].value;
inputsForRename[index].readOnly = true;
let url = `/book/${bookId}/${collectionId}/edit`;
const response = await fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
label: newLabel,
}),
});
if (response.status == 200) {
location.reload();
} else return;
});
});
});
}
}

57
src/renameSection.ts Normal file
View File

@ -0,0 +1,57 @@
export function renameSection() {
const renameSectionBtns = document.querySelectorAll(
'[id^="rename-section-button-"]',
);
const sectionRenameForms: NodeListOf<HTMLFormElement> =
document.querySelectorAll('[id^="rename-section-label-form-"]');
if (renameSectionBtns.length > 0 && sectionRenameForms.length > 0) {
renameSectionBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
const inputsForRename: NodeListOf<HTMLInputElement> =
document.querySelectorAll(`[id^="edit-section-label-"]`);
const oldName = inputsForRename[index].value;
inputsForRename[index].removeAttribute('readonly');
inputsForRename[index].value = '';
inputsForRename[index].focus();
inputsForRename[index].addEventListener('blur', () => {
inputsForRename[index].value = oldName;
});
sectionRenameForms[index].addEventListener('submit', async e => {
e.preventDefault();
const bookId = sectionRenameForms[index].getAttribute('data-book-id');
const collectionId =
sectionRenameForms[index].getAttribute('data-collection-id');
const subCollectionId = sectionRenameForms[index].getAttribute(
'data-sub-collection-id',
);
const sectionId =
sectionRenameForms[index].getAttribute('data-section-id');
const newLabel = inputsForRename[index].value;
inputsForRename[index].readOnly = true;
let url = '';
if (subCollectionId === '_') {
url = `/book/${bookId}/${collectionId}/${sectionId}/edit_section_label`;
} else {
url = `/book/${bookId}/${collectionId}/${subCollectionId}/${sectionId}/edit_section_label`;
}
const response = await fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
label: newLabel,
section_id: sectionId,
}),
});
if (response.status == 200) {
location.reload();
} else return;
});
});
});
}
}

53
src/renameSubCollection.ts Normal file
View File

@ -0,0 +1,53 @@
export function renameSubCollection() {
const renameSubCollectionBtns = document.querySelectorAll(
'[id^="rename-sub-collection-button-"]',
);
const subCollectionRenameForms: NodeListOf<HTMLFormElement> =
document.querySelectorAll('[id^="rename-sub-collection-label-form-"]');
if (
renameSubCollectionBtns.length > 0 &&
subCollectionRenameForms.length > 0
) {
renameSubCollectionBtns.forEach((btn, index) => {
btn.addEventListener('click', () => {
const inputsForRename: NodeListOf<HTMLInputElement> =
document.querySelectorAll(`[id^="edit-sub-collection-label-"]`);
const oldName = inputsForRename[index].value;
inputsForRename[index].removeAttribute('readonly');
inputsForRename[index].value = '';
inputsForRename[index].focus();
inputsForRename[index].addEventListener('blur', () => {
inputsForRename[index].value = oldName;
});
subCollectionRenameForms[index].addEventListener('submit', async e => {
e.preventDefault();
const bookId =
subCollectionRenameForms[index].getAttribute('data-book-id');
const collectionId =
subCollectionRenameForms[index].getAttribute('data-collection-id');
const subCollectionId = subCollectionRenameForms[index].getAttribute(
'data-sub-collection-id',
);
const newLabel = inputsForRename[index].value;
inputsForRename[index].readOnly = true;
let url = `/book/${bookId}/${collectionId}/${subCollectionId}/edit`;
const response = await fetch(url, {
method: 'POST',
credentials: 'include',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
label: newLabel,
}),
});
if (response.status == 200) {
location.reload();
} else return;
});
});
});
}
}

86
src/rightClick.ts Normal file
View File

@ -0,0 +1,86 @@
import {Dropdown} from 'flowbite';
import type {DropdownOptions} from 'flowbite';
// Triggers and elements for collections
const contextCollectionMenuTriggers: NodeListOf<HTMLElement> =
document.querySelectorAll('[id^="dropdownCollectionContextButton"]');
const collectionContextMenu: NodeListOf<HTMLElement> =
document.querySelectorAll('[data^="collection-context-menu-"]');
// Triggers and elements for sub_collections
const subCollectionContextMenu: NodeListOf<HTMLElement> =
document.querySelectorAll('[data^="sub-collection-context-menu-"]');
const contextSubCollectionMenuTriggers: NodeListOf<HTMLElement> =
document.querySelectorAll('[id^="dropdownSubCollectionContextButton"]');
// Triggers and elements for sub_collections
const sectionContextMenu: NodeListOf<HTMLElement> = document.querySelectorAll(
'[data^="section-context-menu-"]',
);
const contextSectionMenuTriggers: NodeListOf<HTMLElement> =
document.querySelectorAll('[id^="dropdownSectionContextButton"]');
const options: DropdownOptions = {
offsetSkidding: 410,
offsetDistance: 0,
onHide: () => {},
onShow: () => {},
onToggle: () => {},
};
let collectionDropDownArray: Dropdown[] = [];
let subCollectionDropDownArray: Dropdown[] = [];
let sectionDropDownArray: Dropdown[] = [];
// Creating for each dropDownMenu in DOM a Dropdown from FlowBite
collectionContextMenu.forEach((menu, index) => {
collectionDropDownArray.push(
new Dropdown(menu, contextCollectionMenuTriggers[index], options),
);
});
subCollectionContextMenu.forEach((menu, index) => {
subCollectionDropDownArray.push(
new Dropdown(menu, contextSubCollectionMenuTriggers[index], options),
);
});
sectionContextMenu.forEach((menu, index) => {
sectionDropDownArray.push(
new Dropdown(menu, contextSectionMenuTriggers[index], options),
);
});
export function rightClick() {
const collectionElements: NodeListOf<HTMLHeadingElement> =
document.querySelectorAll('[id^="accordion-collapse-heading-"]');
const subCollectionElements: NodeListOf<HTMLHeadingElement> =
document.querySelectorAll('[id^="accordion-nested-collapse-heading-"]');
const sectionElement: NodeListOf<HTMLHeadingElement> =
document.querySelectorAll('[id^="section-heading-"]');
collectionElements.forEach((item, index) => {
item.addEventListener('contextmenu', (event: any) => {
event.preventDefault();
if (event.currentTarget.id.startsWith('accordion-collapse-heading-')) {
collectionDropDownArray[index].show();
}
});
});
subCollectionElements.forEach((item, index) => {
item.addEventListener('contextmenu', (event: any) => {
event.preventDefault();
if (
event.currentTarget.id.startsWith('accordion-nested-collapse-heading-')
) {
subCollectionDropDownArray[index].show();
}
});
});
sectionElement.forEach((item, index) => {
item.addEventListener('contextmenu', (event: any) => {
event.preventDefault();
if (event.currentTarget.id.startsWith('section-heading-')) {
sectionDropDownArray[index].show();
}
});
});
}

3
src/styles.css
View File

@ -11,4 +11,7 @@
}
.w-box{
width: calc(100vw - 255px);
}
.mt-135{
margin-top:135px;
}