Merge pull request #5 from Simple2B/kostia/feature/book_view

Kostia/feature/book view
This commit is contained in:
Svyatoslav Artymovych 2023-04-26 13:07:17 +03:00 committed by GitHub
commit b2daadb267
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 608 additions and 88 deletions

View File

@ -18,6 +18,7 @@
"pytest", "pytest",
"sqlalchemy", "sqlalchemy",
"tailwindcss", "tailwindcss",
"viewonly",
"werkzeug", "werkzeug",
"wrongpassword", "wrongpassword",
"wsgi", "wsgi",

View File

@ -6,6 +6,7 @@ class Book(BaseModel):
__tablename__ = "books" __tablename__ = "books"
label = db.Column(db.String(1024), unique=False, nullable=False) label = db.Column(db.String(1024), unique=False, nullable=False)
about = db.Column(db.Text, unique=False, nullable=True)
# Foreign keys # Foreign keys
user_id = db.Column(db.ForeignKey("users.id")) user_id = db.Column(db.ForeignKey("users.id"))

File diff suppressed because one or more lines are too long

View File

@ -12,7 +12,8 @@
<!-- styles --> <!-- styles -->
<!-- prettier-ignore --> <!-- prettier-ignore -->
<!-- <link href="{{ url_for('static', filename='css/main.css') }}" rel="stylesheet"/> --> <script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript"></script>
<script> <script>
// On page load or when changing themes, best to add inline in `head` to avoid FOUC // On page load or when changing themes, best to add inline in `head` to avoid FOUC
if ( if (
@ -26,8 +27,6 @@
} }
</script> </script>
<!-- prettier-ignore -->
<script src="{{ url_for('static', filename='js/main.js') }}" type="text/javascript"></script>
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% block links %} {% block links %}
{% endblock %} {% endblock %}
@ -89,9 +88,6 @@
{% endblock %} {% endblock %}
<!-- scripts --> <!-- scripts -->
<!-- prettier-ignore -->
<script src="{{ url_for('static', filename='js/flowbite.min.js') }}" defer></script>
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% block scripts %} {% block scripts %}
{% endblock %} {% endblock %}

View File

@ -0,0 +1,84 @@
<!-- prettier-ignore -->
{% extends 'base.html' %}
{% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
<!-- prettier-ignore -->
<div class="flex p-2">
<div>
<h1 class="text-l font-extrabold dark:text-white ml-4"> {{ book.owner.username }} </h1>
<h1 class="text-2xl font-extrabold dark:text-white ml-4">{{ book.label }}</h1>
</div>
<div class="ml-auto">
{% include 'book/components/settings_btn.html' %}
</div>
</div>
<!-- prettier-ignore -->
<div class="mb-1 border-b border-gray-200 dark:border-gray-700">
<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>
</div>
<div id="myTabContent">
<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 -->
{% if book.versions %}
{% for collection in book.versions[-1].collections if not collection.is_root %}
<!-- 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 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 %}
<!-- prettier-ignore -->
{% endif %}
</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>
</div>
<!-- prettier-ignore -->
{% endblock %}
<!-- prettier-ignore -->
{% block scripts %}
{% endblock %}
</div>

View File

@ -0,0 +1,8 @@
<a
href="{{ url_for("book.settings", book_id=book.id) }}"
type="button"
class="text-white bg-[#24292F] hover:bg-[#24292F]/90 focus:ring-4 focus:outline-none focus:ring-[#24292F]/50 font-medium rounded-lg text-sm px-3 py-1.5 text-center inline-flex items-center dark:focus:ring-gray-500 dark:hover:bg-[#050708]/30 mr-2 mb-2 border-2 border-gray-200 dark:border-gray-700 cursor-pointer">
<!-- prettier-ignore -->
<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="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" /> <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
<span class="ml-1">Settings</span>
</a>

View File

@ -1,7 +1,47 @@
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% extends 'base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5"></div>
<div class="md:mr-64 relative overflow-x-auto shadow-md sm:rounded-lg mt-1">
<!-- prettier-ignore -->
<div class="p-5 flex border-b-2 border-gray-200 border-solid dark:border-gray-700 text-gray-900 dark:text-white dark:divide-gray-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8"> <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>
{% if all_books %}
<h1 class="text-2xl font-extrabold dark:text-white ml-4">Books</h1>
{% else %}
<h1 class="text-2xl font-extrabold dark:text-white ml-4">My books</h1>
{% endif %}
</div>
{% for book in books %}
<!-- prettier-ignore -->
<dl class="bg-white dark:bg-gray-900 max-w-full p-5 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">
<a class="flex flex-col pb-2" href="{{url_for('book.collection_view',book_id=book.id)}}">
<dt class="mb-2"> {{book.owner.username}}/{{book.label}} </dt>
<dd class="flex flex-col md:flex-row text-lg font-semibold text-gray-500 md:text-lg dark:text-gray-400">
{% if book.versions %}
<p> Last updated on {{book.versions[-1].updated_at.strftime('%B %d, %Y')}}</p>
{% endif %}
<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="M11.48 3.499a.562.562 0 011.04 0l2.125 5.111a.563.563 0 00.475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 00-.182.557l1.285 5.385a.562.562 0 01-.84.61l-4.725-2.885a.563.563 0 00-.586 0L6.982 20.54a.562.562 0 01-.84-.61l1.285-5.386a.562.562 0 00-.182-.557l-4.204-3.602a.563.563 0 01.321-.988l5.518-.442a.563.563 0 00.475-.345L11.48 3.5z" /></svg>
<p>{{ book.stars|length }}</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="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>
</dd>
</a>
</dl>
{% endfor %}
</div>
{% include 'user/add.html' %} {% include 'user/add.html' %}
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% endblock %} {% endblock %}

View File

@ -0,0 +1,73 @@
<!-- prettier-ignore -->
{% extends 'base.html' %}
{% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
<!-- prettier-ignore -->
<div class="flex p-2">
<div>
<h1 class="text-l font-extrabold dark:text-white ml-4">
{{ book.owner.username }}/{{ book.label }}
</h1>
<h1 class="text-2xl font-extrabold dark:text-white ml-4">
{{collection.label}}/{{sub_collection.label}}/{{section.label}}
</h1>
</div>
<div class="ml-auto">
{% include 'book/components/settings_btn.html' %}
</div>
</div>
<!-- prettier-ignore -->
<div class="mb-1 border-b border-gray-200 dark:border-gray-700">
<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="interpretation-tab" data-tabs-target="#interpretation" type="button" role="tab" aria-controls="interpretation" 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>Interpretations</span>
</button>
</li>
</ul>
</div>
<div id="myTabContent">
<!-- prettier-ignore -->
<div class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="interpretation" role="tabpanel" aria-labelledby="interpretation-tab">
<!-- prettier-ignore -->
<dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
<!-- prettier-ignore -->
{% for interpretation in section.interpretations %}
<a href="{{url_for('book.interpretation_view',book_id=book.id,collection_id=collection.id,sub_collection_id=sub_collection.id, section_id=section.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 mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
<div>
<h1>{{ section.label }}</h1>
<p>{{ interpretation.text }}</p>
</div>
<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>
</div>
<!-- prettier-ignore -->
{% endblock %}
<!-- prettier-ignore -->
{% block scripts %}
{% endblock %}
</div>

View File

@ -0,0 +1,87 @@
<!-- prettier-ignore -->
{% extends 'base.html' %}
{% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
<!-- prettier-ignore -->
<div class="flex p-2">
<div>
<h1 class="text-l font-extrabold dark:text-white ml-4"> {{ book.owner.username }}/{{ book.label }} </h1>
<h1 class="text-2xl font-extrabold dark:text-white ml-4">{{collection.label}}/{{sub_collection.label}}</h1>
</div>
<div class="ml-auto">
{% include 'book/components/settings_btn.html' %}
</div>
</div>
<!-- prettier-ignore -->
<div class="mb-1 border-b border-gray-200 dark:border-gray-700">
<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>
</div>
<div id="myTabContent">
<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 -->
{% for section in sub_collection.sections %}
<!-- prettier-ignore -->
<a href="{{url_for('book.interpretation_view',book_id=book.id,collection_id=collection.id,sub_collection_id=sub_collection.id, section_id=section.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">
<dt class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
<!-- prettier-ignore -->
<p>{{ section.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>
<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 of {{sub_collection.label}}
</p>
</div>
</div>
<!-- prettier-ignore -->
{% endblock %}
<!-- prettier-ignore -->
{% block scripts %}
{% endblock %}
</div>

View File

@ -0,0 +1,82 @@
<!-- prettier-ignore -->
{% extends 'base.html' %}
{% block content %}
<div class="relative overflow-x-auto shadow-md sm:rounded-lg mt-5 md:mr-64">
<!-- prettier-ignore -->
<div class="flex p-2">
<div>
<h1 class="text-l font-extrabold dark:text-white ml-4"> {{ book.owner.username }}/{{ book.label }} </h1>
<h1 class="text-2xl font-extrabold dark:text-white ml-4">{{collection.label}}</h1>
</div>
<div class="ml-auto">
{% include 'book/components/settings_btn.html' %}
</div>
</div>
<!-- prettier-ignore -->
<div class="mb-1 border-b border-gray-200 dark:border-gray-700">
<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>
</div>
<div id="myTabContent">
<div
class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
id="files"
role="tabpanel"
aria-labelledby="files-tab">
<!-- prettier-ignore -->
<dl class="w-md md:w-full text-gray-900 divide-y divide-gray-200 dark:text-white dark:divide-gray-700">
<!-- prettier-ignore -->
{% for sub_collection in collection.children %}
<!-- prettier-ignore -->
<a href="{{url_for('book.section_view',book_id=book.id,collection_id=collection.id,sub_collection_id=sub_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">
<dt
class="flex w-full mb-1 text-gray-500 md:text-lg dark:text-gray-400 flex-col">
<p>{{ sub_collection.label }}</p>
<div class="ml-auto">
<!-- prettier-ignore -->
<span class="mr-3" ><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> 55</span >
<!-- prettier-ignore -->
<span class="mr-3" ><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> 55</span >
</div>
</dt>
</div>
</dl>
</a>
{% endfor %}
</dl>
</div>
<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 of {{collection.label}}
</p>
</div>
</div>
<!-- prettier-ignore -->
{% endblock %}
<!-- prettier-ignore -->
{% block scripts %}
{% endblock %}
</div>

View File

@ -2,7 +2,7 @@
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% block content %} {% block content %}
<div class="jumbotron my-4"> <div class="jumbotron my-4 mr-64">
<div class="text-center"> <div class="text-center">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<h1>{{ '{} - {}'.format(error.code, error.name) }}</h1> <h1>{{ '{} - {}'.format(error.code, error.name) }}</h1>

View File

@ -1,7 +1,7 @@
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% extends 'base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<div class="mt-4 border-b border-gray-200 dark:border-gray-700"> <div class="mt-4 border-b border-gray-200 dark:border-gray-700 mr-64">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400"> <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
<li class="mr-2"> <li class="mr-2">

View File

@ -15,7 +15,7 @@
</li> </li>
<li> <li>
<a <a
href="{{ url_for('book.get_all') }}" href="{{ url_for('book.my_books') }}"
class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"> class="flex items-center p-2 text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<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="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg> <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="M16.5 3.75V16.5L12 14.25 7.5 16.5V3.75m9 0H18A2.25 2.25 0 0120.25 6v12A2.25 2.25 0 0118 20.25H6A2.25 2.25 0 013.75 18V6A2.25 2.25 0 016 3.75h1.5m9 0h-9" /> </svg>

View File

@ -1,8 +1,7 @@
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% extends 'base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<div class="mr-64 relative overflow-x-auto shadow-md sm:rounded-lg mt-5"> <div class="w-full relative overflow-x-auto shadow-md sm:rounded-lg mt-5 mr-64">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400"> <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead <thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400" class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
@ -36,11 +35,11 @@
</td> </td>
<td class="p-4 space-x-2 whitespace-nowrap"> <td class="p-4 space-x-2 whitespace-nowrap">
<button type="button" data-target="{{user.json}}" class="user-edit-button inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"> <button type="button" data-target="{{user.json}}" class="user-edit-button inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white rounded-lg bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg> <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
Edit user Edit user
</button> </button>
<button data-user-id={{ user.id }} type="button" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900 delete-user-btn"> <button data-user-id={{ user.id }} type="button" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-red-600 rounded-lg hover:bg-red-800 focus:ring-4 focus:ring-red-300 dark:focus:ring-red-900 delete-user-btn">
<svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg> <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
Delete user Delete user
</button> </button>
</td> </td>
@ -58,18 +57,14 @@
<!-- prettier-ignore --> <!-- prettier-ignore -->
<a href="{{ url_for('user.get_all') }}?page=1&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="{{ url_for('user.get_all') }}?page=1&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">First</span> <span class="sr-only">First</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" /> </svg>
<path fill-rule="evenodd" d="M15.79 14.77a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L11.832 10l3.938 3.71a.75.75 0 01.02 1.06zm-6 0a.75.75 0 01-1.06.02l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 111.04 1.08L5.832 10l3.938 3.71a.75.75 0 01.02 1.06z" clip-rule="evenodd" />
</svg>
</a> </a>
</li> </li>
<li> <li>
<!-- prettier-ignore --> <!-- prettier-ignore -->
<a href="{{ url_for('user.get_all') }}?page={{page.page-1 if page.page > 1 else 1}}&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="{{ url_for('user.get_all') }}?page={{page.page-1 if page.page > 1 else 1}}&q={{page.query}}" class="block px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<span class="sr-only">Previous</span> <span class="sr-only">Previous</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" /> </svg>
<path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
</svg>
</a> </a>
</li> </li>
@ -78,11 +73,11 @@
<li> <li>
<!-- prettier-ignore --> <!-- prettier-ignore -->
{% if p == page.page %} {% if p == page.page %}
<!-- prettier-ignore --> <!-- prettier-ignore -->
<a href="{{ url_for('user.get_all') }}?page={{p}}&q={{page.query}}" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{{p}}</a> <a href="{{ url_for('user.get_all') }}?page={{p}}&q={{page.query}}" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 border border-blue-300 bg-blue-50 hover:bg-blue-100 hover:text-blue-700 dark:border-gray-700 dark:bg-gray-700 dark:text-white">{{p}}</a>
{% else %} {% else %}
<!-- prettier-ignore --> <!-- prettier-ignore -->
<a href="{{ url_for('user.get_all') }}?page={{p}}&q={{page.query}}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{p}}</a> <a href="{{ url_for('user.get_all') }}?page={{p}}&q={{page.query}}" class="px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">{{p}}</a>
{% endif %} {% endif %}
</li> </li>
{% endfor %} {% endfor %}
@ -92,9 +87,7 @@
<a href="{{ url_for('user.get_all') }}?page={{page.page+1 if page.page < page.pages else page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="{{ url_for('user.get_all') }}?page={{page.page+1 if page.page < page.pages else page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<span class="sr-only">Next</span> <span class="sr-only">Next</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a> </a>
</li> </li>
<li> <li>
@ -102,10 +95,7 @@
<a href="{{ url_for('user.get_all') }}?page={{page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"> <a href="{{ url_for('user.get_all') }}?page={{page.pages}}&q={{page.query}}" class="block px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
<!-- prettier-ignore --> <!-- prettier-ignore -->
<span class="sr-only">Last</span> <span class="sr-only">Last</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5"> <path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> <path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" /> </svg>
<path fill-rule="evenodd" d="M10.21 14.77a.75.75 0 01.02-1.06L14.168 10 10.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M4.21 14.77a.75.75 0 01.02-1.06L8.168 10 4.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
</svg>
</a> </a>
</li> </li>
</ul> </ul>

View File

@ -1,29 +1,53 @@
from flask import Blueprint, render_template, flash, redirect, url_for from flask import (
Blueprint,
render_template,
flash,
redirect,
url_for,
request,
)
from flask_login import login_required, current_user from flask_login import login_required, current_user
from app.controllers import create_pagination
from app import models as m, db, forms as f from app import models as m, db, forms as f
from app.logger import log from app.logger import log
bp = Blueprint("book", __name__, url_prefix="/book") bp = Blueprint("book", __name__, url_prefix="/book")
@bp.route("/", methods=["GET"]) @bp.route("/all", methods=["GET"])
def get_all(): def get_all():
# q = request.args.get("q", type=str, default=None) q = request.args.get("q", type=str, default=None)
# books = m.Book.query.order_by(m.Book.id) books: m.Book = m.Book.query.order_by(m.Book.id)
# if q: if q:
# books = books.filter(m.Book.label.like(f"{q}")) books = books.filter(m.Book.label.like(f"{q}"))
# pagination = create_pagination(total=books.count()) pagination = create_pagination(total=books.count())
# return render_template(
# "books/index.html",
# books=books.paginate(page=pagination.page, per_page=pagination.per_page),
# page=pagination,
# search_query=q,
# )
return render_template( return render_template(
"book/index.html", "book/index.html",
books=books.paginate(page=pagination.page, per_page=pagination.per_page),
page=pagination,
search_query=q,
all_books=True,
)
@bp.route("/", methods=["GET"])
def my_books():
q = request.args.get("q", type=str, default=None)
books: m.Book = m.Book.query.order_by(m.Book.id)
books = books.filter_by(user_id=current_user.id)
if q:
books = books.filter(m.Book.label.like(f"{q}"))
pagination = create_pagination(total=books.count())
return render_template(
"book/index.html",
books=books.paginate(page=pagination.page, per_page=pagination.per_page),
page=pagination,
search_query=q,
) )
@ -32,22 +56,140 @@ def get_all():
def create(): def create():
form = f.CreateBookForm() form = f.CreateBookForm()
if form.validate_on_submit(): if form.validate_on_submit():
book = m.Book( book: m.Book = m.Book(label=form.label.data, user_id=current_user.id)
label=form.label.data,
)
log(log.INFO, "Form submitted. Book: [%s]", book) log(log.INFO, "Form submitted. Book: [%s]", book)
book.save() book.save()
m.BookVersion(semver="1.0.0", book_id=book.id).save() m.BookVersion(semver="1.0.0", book_id=book.id).save()
flash("Book added!", "success") flash("Book added!", "success")
return redirect(url_for("book.get_all")) return redirect(url_for("book.my_books"))
else: else:
log(log.ERROR, "Book create errors: [%s]", form.errors) log(log.ERROR, "Book create errors: [%s]", form.errors)
for field, errors in form.errors.items(): for field, errors in form.errors.items():
field_label = form._fields[field].label.text field_label = form._fields[field].label.text
for error in errors: for error in errors:
flash(error.replace("Field", field_label), "danger") flash(error.replace("Field", field_label), "danger")
return redirect(url_for("book.get_all")) return redirect(url_for("book.my_books"))
@bp.route("/<int:book_id>", methods=["GET"])
def collection_view(book_id: int):
book = db.session.get(m.Book, book_id)
if not book:
log(log.WARNING, "Book with id [%s] not found", book_id)
flash("Book not found", "danger")
return redirect(url_for("book.my_books"))
else:
return render_template("book/collection_view.html", book=book)
@bp.route("/<int:book_id>/<int:collection_id>", methods=["GET"])
def sub_collection_view(book_id: int, collection_id: int):
book: m.Book = db.session.get(m.Book, book_id)
if not book:
log(log.WARNING, "Book with id [%s] not found", book_id)
flash("Book not found", "danger")
return redirect(url_for("book.my_books"))
collection: m.Collection = db.session.get(m.Collection, collection_id)
if not collection:
log(log.WARNING, "Collection with id [%s] not found", collection_id)
flash("Collection not found", "danger")
return redirect(url_for("book.collection_view", book_id=book_id))
if collection.is_leaf:
return render_template(
"book/section_view.html",
book=book,
collection=collection,
sub_collection=collection,
)
else:
return render_template(
"book/sub_collection_view.html", book=book, collection=collection
)
@bp.route("/<int:book_id>/<int:collection_id>/<int:sub_collection_id>", methods=["GET"])
def section_view(book_id: int, collection_id: int, sub_collection_id: int):
book: m.Book = db.session.get(m.Book, book_id)
if not book:
log(log.WARNING, "Book with id [%s] not found", book_id)
flash("Book not found", "danger")
return redirect(url_for("book.my_books"))
collection: m.Collection = db.session.get(m.Collection, collection_id)
if not collection:
log(log.WARNING, "Collection with id [%s] not found", collection_id)
flash("Collection not found", "danger")
return redirect(url_for("book.collection_view", book_id=book_id))
sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
if not sub_collection:
log(log.WARNING, "Sub_collection with id [%s] not found", sub_collection_id)
flash("Sub_collection not found", "danger")
return redirect(
url_for(
"book.sub_collection_view", book_id=book_id, collection_id=collection_id
)
)
else:
return render_template(
"book/section_view.html",
book=book,
collection=collection,
sub_collection=sub_collection,
)
@bp.route(
"/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/<int:section_id>",
methods=["GET"],
)
def interpretation_view(
book_id: int, collection_id: int, sub_collection_id: int, section_id: int
):
book: m.Book = db.session.get(m.Book, book_id)
if not book:
log(log.WARNING, "Book with id [%s] not found", book_id)
flash("Book not found", "danger")
return redirect(url_for("book.my_books"))
collection: m.Collection = db.session.get(m.Collection, collection_id)
if not collection:
log(log.WARNING, "Collection with id [%s] not found", collection_id)
flash("Collection not found", "danger")
return redirect(url_for("book.collection_view", book_id=book_id))
sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
if not sub_collection:
log(log.WARNING, "Sub_collection with id [%s] not found", sub_collection_id)
flash("Sub_collection not found", "danger")
return redirect(
url_for(
"book.sub_collection_view", book_id=book_id, collection_id=collection_id
)
)
section: m.Section = db.session.get(m.Section, section_id)
if not section:
log(log.WARNING, "Section with id [%s] not found", section_id)
flash("Section not found", "danger")
return redirect(
url_for(
"book.section_view",
book_id=book_id,
collection_id=collection_id,
sub_collection_id=sub_collection_id,
)
)
else:
return render_template(
"book/interpretation_view.html",
book=book,
collection=collection,
sub_collection=sub_collection,
section=section,
)
@bp.route("/<int:book_id>/settings", methods=["GET"]) @bp.route("/<int:book_id>/settings", methods=["GET"])
@ -67,7 +209,7 @@ def add_contributor(book_id: int):
if not book or book.owner != current_user: if not book or book.owner != current_user:
log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book) log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book)
flash("You are not owner of this book!", "danger") flash("You are not owner of this book!", "danger")
return redirect(url_for("book.get_all")) return redirect(url_for("book.my_books"))
form = f.AddContributorForm() form = f.AddContributorForm()
@ -105,7 +247,7 @@ def delete_contributor(book_id: int):
if not book or book.owner != current_user: if not book or book.owner != current_user:
log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book) log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book)
flash("You are not owner of this book!", "danger") flash("You are not owner of this book!", "danger")
return redirect(url_for("book.get_all")) return redirect(url_for("book.my_books"))
form = f.DeleteContributorForm() form = f.DeleteContributorForm()
@ -145,7 +287,7 @@ def edit_contributor_role(book_id: int):
if not book or book.owner != current_user: if not book or book.owner != current_user:
log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book) log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book)
flash("You are not owner of this book!", "danger") flash("You are not owner of this book!", "danger")
return redirect(url_for("book.get_all")) return redirect(url_for("book.my_books"))
form = f.EditContributorRoleForm() form = f.EditContributorRoleForm()

View File

@ -1,5 +1,5 @@
from flask import Blueprint, render_template, request, flash, redirect, url_for, jsonify from flask import Blueprint, render_template, request, flash, redirect, url_for, jsonify
from flask_login import login_required from flask_login import login_required, current_user
from app.controllers import create_pagination from app.controllers import create_pagination
from sqlalchemy import not_ from sqlalchemy import not_
@ -102,6 +102,7 @@ def search():
if book_id: if book_id:
book_contributors = m.BookContributor.query.filter_by(book_id=book_id).all() book_contributors = m.BookContributor.query.filter_by(book_id=book_id).all()
user_ids = [contributor.user_id for contributor in book_contributors] user_ids = [contributor.user_id for contributor in book_contributors]
user_ids.append(current_user.id)
query_user = query_user.filter(not_(m.User.id.in_(user_ids))) query_user = query_user.filter(not_(m.User.id.in_(user_ids)))
query_user = query_user.limit(configuration.MAX_SEARCH_RESULTS) query_user = query_user.limit(configuration.MAX_SEARCH_RESULTS)

View File

@ -1,8 +1,8 @@
"""empty message """init
Revision ID: 02f6f2ebad1b Revision ID: e96f96cb7d02
Revises: Revises:
Create Date: 2023-04-21 17:26:06.003994 Create Date: 2023-04-26 11:40:49.008918
""" """
from alembic import op from alembic import op
@ -10,7 +10,7 @@ import sqlalchemy as sa
# revision identifiers, used by Alembic. # revision identifiers, used by Alembic.
revision = '02f6f2ebad1b' revision = 'e96f96cb7d02'
down_revision = None down_revision = None
branch_labels = None branch_labels = None
depends_on = None depends_on = None
@ -37,6 +37,7 @@ def upgrade():
) )
op.create_table('books', op.create_table('books',
sa.Column('label', sa.String(length=1024), nullable=False), sa.Column('label', sa.String(length=1024), nullable=False),
sa.Column('about', sa.Text(), nullable=True),
sa.Column('user_id', sa.Integer(), nullable=True), sa.Column('user_id', sa.Integer(), nullable=True),
sa.Column('id', sa.Integer(), nullable=False), sa.Column('id', sa.Integer(), nullable=False),
sa.Column('created_at', sa.DateTime(), nullable=True), sa.Column('created_at', sa.DateTime(), nullable=True),

View File

@ -1,8 +1,4 @@
import {Modal} from 'flowbite';
import type {ModalOptions, ModalInterface} from 'flowbite';
const searchAndShowResults = async ( const searchAndShowResults = async (
userSearchBtn: any,
userSearchbar: any, userSearchbar: any,
searchResultsTbody: any, searchResultsTbody: any,
trExample: any, trExample: any,
@ -10,15 +6,15 @@ const searchAndShowResults = async (
) => { ) => {
searchResultsTbody.innerHTML = ''; searchResultsTbody.innerHTML = '';
const bookId = userSearchbar.getAttribute("data-book-id") const bookId = userSearchbar.getAttribute('data-book-id');
const searchQuery = userSearchbar.value const searchQuery = userSearchbar.value;
if (!searchQuery.length) { if (!searchQuery.length) {
return; return;
} }
const urlParams = new URLSearchParams({ const urlParams = new URLSearchParams({
q: searchQuery, q: searchQuery,
book_id: bookId book_id: bookId,
}); });
const res = await fetch('/user/search?' + urlParams); const res = await fetch('/user/search?' + urlParams);
const json = await res.json(); const json = await res.json();
@ -29,16 +25,15 @@ const searchAndShowResults = async (
const selectUserBtn = clone.querySelector('.select-user-btn'); const selectUserBtn = clone.querySelector('.select-user-btn');
selectUserBtn.setAttribute('data-user-id', user.id); selectUserBtn.setAttribute('data-user-id', user.id);
selectUserBtn.addEventListener('click', (e: any) => { selectUserBtn.addEventListener('click', (e: any) => {
const allSelectBtns = document.querySelectorAll('.select-user-btn') const allSelectBtns = document.querySelectorAll('.select-user-btn');
allSelectBtns.forEach(btn => { allSelectBtns.forEach(btn => {
btn.innerHTML = "Select" btn.innerHTML = 'Select';
}); });
const userId = e.target.getAttribute('data-user-id');
userIdInput.value = userId;
const userId = e.target.getAttribute("data-user-id") selectUserBtn.innerHTML = 'Selected';
userIdInput.value = userId
selectUserBtn.innerHTML = "Selected"
}); });
const usernameTh = clone.querySelector('.username-th'); const usernameTh = clone.querySelector('.username-th');
@ -55,18 +50,21 @@ export function initContributors() {
const userSearchbar: HTMLInputElement = document.querySelector('#username'); const userSearchbar: HTMLInputElement = document.querySelector('#username');
const userIdInput: HTMLInputElement = document.querySelector('#user_id'); const userIdInput: HTMLInputElement = document.querySelector('#user_id');
if (!searchBtn && !userSearchbar && !userIdInput) {
return;
}
const searchResultsTbody = document.querySelector('#search-results-tbody'); const searchResultsTbody = document.querySelector('#search-results-tbody');
const trExample: HTMLTableRowElement = document.querySelector('#tr-example'); const trExample: HTMLTableRowElement = document.querySelector('#tr-example');
searchBtn.addEventListener('click', async e => { searchBtn.addEventListener('click', async e => {
e.preventDefault() e.preventDefault();
userIdInput.value = "" userIdInput.value = '';
await searchAndShowResults( await searchAndShowResults(
searchBtn, userSearchbar,
userSearchbar
searchResultsTbody, searchResultsTbody,
trExample, trExample,
userIdInput userIdInput,
); );
}); });
} }

View File

@ -2,7 +2,7 @@ import './styles.css';
import {initBooks} from './books'; import {initBooks} from './books';
import {initContributors} from './contributors'; import {initContributors} from './contributors';
document.addEventListener('DOMContentLoaded', event => { document.addEventListener('DOMContentLoaded', () => {
initBooks(); initBooks();
initContributors(); initContributors();
}); });

View File

@ -47,13 +47,26 @@ def test_delete_user(populate: FlaskClient):
def test_search_user(populate: FlaskClient, runner: FlaskCliRunner): def test_search_user(populate: FlaskClient, runner: FlaskCliRunner):
login(populate) _, current_user = login(populate)
MAX_SEARCH_RESULTS = populate.application.config["MAX_SEARCH_RESULTS"] MAX_SEARCH_RESULTS = populate.application.config["MAX_SEARCH_RESULTS"]
response = populate.get("/user/search") response = populate.get("/user/search")
assert response.status_code == 422 assert response.status_code == 422
assert response.json["message"] == "q parameter is required" assert response.json["message"] == "q parameter is required"
q = current_user.username
response = populate.get(f"/user/search?q={q}")
assert response.json
users = response.json.get("users")
assert users
assert len(users) <= MAX_SEARCH_RESULTS
for user in users:
assert q in user["username"]
assert user["username"] != current_user
q = "user" q = "user"
response = populate.get(f"/user/search?q={q}") response = populate.get(f"/user/search?q={q}")