mirror of https://github.com/logos-co/open-law.git
start of a big feature
This commit is contained in:
parent
2556838a77
commit
f28fba768d
|
@ -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)
|
||||
|
|
|
@ -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
143728
app/static/js/main.js
File diff suppressed because one or more lines are too long
|
@ -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>
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
|
@ -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 -->
|
||||
|
|
|
@ -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 -->
|
||||
|
||||
|
|
|
@ -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 -->
|
||||
|
||||
|
|
|
@ -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>
|
|
@ -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)
|
||||
|
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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
12
src/books.ts
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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,
|
||||
);
|
||||
}
|
||||
}
|
|
@ -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
18
src/main.ts
|
@ -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();
|
||||
|
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
|
@ -12,3 +12,6 @@
|
|||
.w-box{
|
||||
width: calc(100vw - 255px);
|
||||
}
|
||||
.mt-135{
|
||||
margin-top:135px;
|
||||
}
|
Loading…
Reference in New Issue