open-law/app/templates/book/settings.html

238 lines
17 KiB
HTML

<!-- prettier-ignore -->
{% extends 'base.html' %}
{% block title %}Book Settings{% endblock %}
{% block content %}
{% include 'book/modals/access_level_modal.html' %}
{% include 'book/modals/add_contributor_modal.html' %}
{% include 'book/modals/delete_book_modal.html' %}
{% include 'book/modals/delete_contributor_modal.html' %}
{% include 'book/modals/edit_version_label_modal.html' %}
{% include 'book/modals/delete_version_modal.html' %}
{% include 'book/modals/add_version_modal.html' %}
<!-- Hide right_sidebar -->
<!-- prettier-ignore -->
{% block right_sidebar %} {% endblock %}
<div class="p-3 pl-4">
<div class="flex justify-between ml-4 mb-3">
<h1 class="text-2xl font-extrabold dark:text-white">{{book.label}}</h1>
</div>
<div class="mb-1">
<!-- prettier-ignore -->
<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">
<!-- prettier-ignore -->
<button class="flex items-center space-x-2 p-4 rounded-t-lg" id="settings-tab" data-tabs-target="#settings" type="button" role="tab" aria-controls="settings" {% if selected_tab == 'book_settings' %} aria-selected="true" {% endif %}>
<!-- 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="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>
<span>Book settings</span>
</button>
</li>
{% if book.user_id == current_user.id %}
<li class="mr-2" role="presentation">
<!-- prettier-ignore -->
<button class="flex items-center space-x-2 p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300" id="permissions-tab" data-tabs-target="#permissions" type="button" role="tab" aria-controls="permissions" {% if selected_tab == 'user_permissions' %} aria-selected="true" {% endif %}>
<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="M6 13.5V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 010 3m0-3a1.5 1.5 0 000 3m0 9.75V10.5" /> </svg>
<span>User permissions</span>
</button>
</li>
<li class="mr-2" role="presentation">
<!-- prettier-ignore -->
<button class="flex items-center space-x-2 p-4 rounded-t-lg hover:text-gray-600 dark:hover:text-gray-300" id="versions-tab" data-tabs-target="#versions" type="button" role="tab" aria-controls="versions" {% if selected_tab == 'versions' %} aria-selected="true" {% endif %}>
<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>
<span>Versions</span>
</button>
</li>
{% endif %}
</ul>
</div>
</div>
<div id="myTabContent">
<!-- prettier-ignore -->
<div class="hidden pl-4 rounded-lg bg-inherit" id="settings" role="tabpanel" aria-labelledby="settings-tab">
<form action="{{ url_for('book.edit', book_id=book.id) }}" method="post" class="prevent-submit-on-enter settings-form mb-0 flex flex-col space-y-2 w-1/2">
{{ form_hidden_tag() }}
<input value="{{book.id}}" type="text" name="book_id" id="book_id" class="hidden" placeholder="Book id" required>
<div>
<label for="label" maxlength="256" minlength="4" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Label</label>
<input value="{{book.label}}" type="text" name="label" id="label" class="book-label-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="My Book" required>
</div>
<div>
<label for="about" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Book about
</label>
<textarea type="text" name="about" id="about" class="book-about-input bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">{{book.about if not book.about==None}}</textarea>
</div>
<div class="multiple-input-block mb-6">
<label for="tags-input" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
Tags
</label>
<input type="text" name="tags" class="hidden tags-to-submit">
<input
type="text"
id="tags-input"
class="book-tags-input multiple-input mb-3 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
placeholder="e.g. Law (press 'Enter' or Comma to add tag. Click on tag to edit it)"
data-save-results-to="tags-to-submit"
>
<div class="multiple-input-items gap-1 flex flex-wrap">
{% for tag in book.tags %}
<div class="cursor-pointer multiple-input-word bg-sky-300 hover:bg-sky-400 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white rounded text-center py-1/2 px-2">{{tag.name}}</div>
{% endfor %}
</div>
</div>
<div class="flex justify-between">
<button type="submit" class="prevent-unsaved-changes-event mr-2 mb-2 text-center 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-4 py-2.5 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Submit</button>
{% if book.user_id == current_user.id %}
<button type="button" data-modal-target="delete_book_modal" data-modal-toggle="delete_book_modal" class="text-red-700 hover:text-white border border-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 mr-2 mb-2 dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">Delete Book</button>
{% endif %}
</div>
</form>
</div>
{% if book.user_id == current_user.id %}
<div class="hidden px-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="permissions" role="tabpanel" aria-labelledby="permissions-tab">
<div class="px-5">
<div class="mb-3 relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
Username
</th>
<th scope="col" class="px-6 py-3">
Address
</th>
<th scope="col" class="px-6 py-3">
Role
</th>
<th scope="col" class="px-6 py-3 text-center">
Access Level
</th>
<th scope="col" class="px-6 py-3">
</th>
</tr>
</thead>
<tbody>
{% for contributor in book.contributors %}
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<td class="px-6 max-w-[230]">
<div class="flex items-center">
{% if contributor.user.avatar_img %}
<img class="w-6 h-6 rounded-full" src="data:image/jpeg;base64,{{ contributor.user.avatar_img }}" alt="contributor avatar">
{% else %}
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" d="M17.982 18.725A7.488 7.488 0 0012 15.75a7.488 7.488 0 00-5.982 2.975m11.963 0a9 9 0 10-11.963 0m11.963 0A8.966 8.966 0 0112 21a8.966 8.966 0 01-5.982-2.275M15 9.75a3 3 0 11-6 0 3 3 0 016 0z" /> </svg>
{% endif %}
<span class="ml-2 truncate">{{ contributor.user.username }}</span>
</div>
</td>
<td class="px-6 truncate max-w-[280]">{{ contributor.user.wallet_id }}</td>
<td class="px-6">
<form action="{{ url_for('book.edit_contributor_role', book_id=book.id) }}" method="post" class="mb-0 flex">
{{ form_hidden_tag() }}
<input type="hidden" name="user_id" id="user_id" value="{{ contributor.user_id }}" />
<select id="role" name="role" data-user-id="{{ contributor.user.id }}" class="mr-2 contributor-role-select block w-1/2 py-1.5 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" >
{% for role in roles if role.value %}
<option
{% if contributor.role == role %} selected {% endif %}
value="{{ role.value }}">
{{ role.name.title() }}
</option>
{% endfor %}
</select>
<button type="submit" class="prevent-unsaved-changes-event text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-1 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">Save</button>
</form>
</td>
<td class="px-4 py-4 flex justify-center">
<button type="button" data-book-id="{{book.id}}" data-user-id="{{contributor.user.id}}" data-modal-target="access-level-modal" data-modal-toggle="access-level-modal" class="edit-permissions-btn text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-1 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
Edit
</button>
</td>
<td class="px-6 py-4">
<!-- prettier-ignore -->
{% if current_user.id != contributor.user_id %}
<button type="button" id="callDeleteContributorModal" data-user-id="{{contributor.user.id}}" data-modal-target="delete_contributor_modal" data-modal-toggle="delete_contributor_modal" class="text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-sm rounded-lg text-sm px-5 py-1.5 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800">
Delete
</button>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<button type="button" data-modal-target="add-contributor-modal" data-modal-toggle="add-contributor-modal" class="add-contributor-btn 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-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<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 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
New Contributor
</button>
</div>
</div>
<div class="hidden px-4 rounded-lg bg-gray-50 dark:bg-gray-800" id="versions" role="tabpanel" aria-labelledby="versions-tab">
<div class="px-5">
<div class="mb-3 relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
#
</th>
<th scope="col" class="px-6 py-3">
Name
</th>
<th scope="col" class="px-6 py-3">
Created At
</th>
<th scope="col" class="px-6 py-3">
Link
</th>
<th scope="col" class="px-6 py-3"> </th>
<th scope="col" class="px-6 py-3"> </th>
</tr>
</thead>
<tbody>
{% for version in book.actual_versions if not version.is_active %}
<tr class="bg-white border-b dark:bg-gray-900 dark:border-gray-700">
<td class="px-6 truncate max-w-[280]">{{ loop.index }}</td>
<td class="px-6 truncate max-w-[280]">
{{ version.semver }}
</td>
<td class="px-6"> {{ version.created_at.strftime('%B %d, %Y') }} </td>
<td class="px-6 truncate max-w-[280]">
<a
href="{{url_for('book.collection_view',book_id=book.id,version_index=loop.index)}}"
class="text-blue-500"
>
Read
</a>
</td>
<td class="px-4 py-4">
<button type="button" data-version-id="{{ version.id }}" data-version-semver="{{ version.semver }}" data-modal-target="edit-version-label-modal" data-modal-toggle="edit-version-label-modal" class="edit-version-label-btns text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-1 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700">
Edit
</button>
</td>
<td class="px-4 py-4">
<button type="button" data-version-id="{{ version.id }}" data-modal-target="delete_version_modal" data-modal-toggle="delete_version_modal" class="delete-version-btn text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-sm rounded-lg text-sm px-5 py-1.5 dark:bg-red-600 dark:hover:bg-red-700 focus:outline-none dark:focus:ring-red-800">
Delete
</button>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<button type="button" data-modal-target="add-version-modal" data-modal-toggle="add-version-modal" class="add-versions-btn 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-4 py-2.5 text-center inline-flex items-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
<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 mr-1"> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" /> </svg>
New Version
</button>
</div>
</div>
{% endif %}
</div>
{% endblock %}