complete edit comment

This commit is contained in:
Kostiantyn Stoliarskyi 2023-05-09 17:32:07 +03:00
parent 0c54d73f17
commit caef3ed7fc
11 changed files with 256 additions and 18 deletions

View File

@ -12,6 +12,7 @@
},
"cSpell.words": [
"bookname",
"Btns",
"flowbite",
"jsonify",
"pydantic",

View File

@ -10,4 +10,4 @@ from .contributor import (
from .collection import CreateCollectionForm, EditCollectionForm
from .section import CreateSectionForm, EditSectionForm
from .interpretation import CreateInterpretationForm, EditInterpretationForm
from .comment import CreateCommentForm, DeleteCommentForm
from .comment import CreateCommentForm, DeleteCommentForm, EditCommentForm

View File

@ -17,3 +17,9 @@ class CreateCommentForm(BaseCommentForm):
class DeleteCommentForm(FlaskForm):
comment_id = StringField("Text")
submit = SubmitField("Delete")
class EditCommentForm(FlaskForm):
comment_id = StringField("Text")
text = StringField("Text", [DataRequired(), Length(3, 256)])
submit = SubmitField("Edit")

View File

@ -9,6 +9,7 @@ class Comment(BaseModel):
id = db.Column(db.Integer, primary_key=True)
text = db.Column(db.Text, unique=False, nullable=False)
marked = db.Column(db.Boolean, default=False)
edited = db.Column(db.Boolean, default=False)
included_with_interpretation = db.Column(db.Boolean, default=False)
# Foreign keys

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,32 @@
<!-- prettier-ignore-->
<div id="edit_comment_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.comment_edit', book_id=book.id, collection_id=collection.id, sub_collection_id=sub_collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
{% else %}
action="{{ url_for('book.comment_edit', book_id=book.id, collection_id=collection.id, section_id=section.id, interpretation_id=interpretation.id) }}"
{% endif %}
method="post" class="relative bg-white rounded-lg shadow dark:bg-gray-700">
{{ form_hidden_tag() }}
<!-- Modal header -->
<div class="flex flex-col justify-between p-4 border-b rounded-t dark:border-gray-600">
<div class="flex items-start justify-between w-full">
<h3 class="text-xl font-semibold text-gray-900 dark:text-white"> Edit Comment </h3>
<button id="modalAddCloseButton" data-modal-hide="edit_comment_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>
<input type="hidden" name="comment_id" id="edit_comment_id" value="" />
<div class="col-span-6 sm:col-span-3">
<label for="text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white" >Text</label >
<input type="text" name="text" id="edit_comment_text" value="" 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" required />
</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="ml-auto 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 w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Save changes</button>
</div>
</form>
</div>
</div>

View File

@ -3,6 +3,7 @@
{% include 'book/delete_interpretation_modal.html' %}
{% include 'book/delete_comment_modal.html' %}
{% include 'book/edit_comment_modal.html' %}
{% include 'book/edit_interpretation_modal.html' %}
@ -66,8 +67,18 @@
</div>
</div>
<div id="accordion-collapse" data-accordion="collapse" class="flex mt-auto align-center justify-between space-x-3">
<div>Commented by <span class="text-blue-500">{{comment.user.username}}</span> on {{comment.created_at.strftime('%B %d, %Y')}}</div>
<div>Commented by <span class="text-blue-500">{{comment.user.username}}</span> on {{comment.created_at.strftime('%B %d, %Y')}}{% if comment.edited %}<i> edited</i>{% endif %}</div>
<div class="flex ml-auto justify-between w-24">
<div class="relative">
<button id="edit_comment_btn" data-popover-target="popover-edit" data-edit-comment-id="{{comment.id}}" data-edit-comment-text="{{comment.text}}" type="button" data-modal-target="edit_comment_modal" data-modal-toggle="edit_comment_modal" class="space-x-0.5 flex items-center">
<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.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /> </svg>
</button>
<div data-popover id="popover-edit" role="tooltip" class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
<div class="px-3 py-2">
<p>Edit this comment</p>
</div>
<div data-popper-arrow></div>
</div></div>
<div class="relative">
<button id="delete_comment_btn" data-popover-target="popover-delete" data-comment-id="{{comment.id}}" type="button" data-modal-target="delete_comment_modal" data-modal-toggle="delete_comment_modal" class="space-x-0.5 flex items-center">
<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" /> </svg>

View File

@ -1415,3 +1415,99 @@ def comment_delete(
collection_id=collection_id,
)
)
@bp.route(
"/<int:book_id>/<int:collection_id>/<int:section_id>/<int:interpretation_id>/comment_edit",
methods=["POST"],
)
@bp.route(
(
"/<int:book_id>/<int:collection_id>/<int:sub_collection_id>/"
"<int:section_id>/<int:interpretation_id>/comment_edit"
),
methods=["POST"],
)
@login_required
def comment_edit(
book_id: int,
collection_id: int,
section_id: int,
interpretation_id: int,
sub_collection_id: int | None = None,
):
book: m.Book = db.session.get(m.Book, book_id)
if not book or book.owner != current_user or book.is_deleted:
log(log.INFO, "User: [%s] is not owner of book: [%s]", current_user, book)
flash("You are not owner of this book!", "danger")
return redirect(url_for("book.my_books"))
collection: m.Collection = db.session.get(m.Collection, collection_id)
if not collection or collection.is_deleted:
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 sub_collection_id:
sub_collection: m.Collection = db.session.get(m.Collection, sub_collection_id)
if not sub_collection or sub_collection.is_deleted:
log(
log.WARNING,
"Sub_collection with id [%s] not found",
sub_collection_id,
)
flash("SubCollection not found", "danger")
return redirect(
url_for(
"book.sub_collection_view",
book_id=book_id,
collection_id=collection_id,
)
)
redirect_url = url_for(
"book.qa_view",
book_id=book_id,
collection_id=collection_id,
sub_collection_id=sub_collection_id,
section_id=section_id,
interpretation_id=interpretation_id,
)
section: m.Section = db.session.get(m.Section, section_id)
if not section or section.is_deleted:
log(log.WARNING, "Section with id [%s] not found", section_id)
flash("Section not found", "danger")
return redirect(redirect_url)
interpretation: m.Interpretation = db.session.get(
m.Interpretation, interpretation_id
)
if not interpretation or interpretation.is_deleted:
log(log.WARNING, "Interpretation with id [%s] not found", interpretation_id)
flash("Interpretation not found", "danger")
return redirect(redirect_url)
form = f.EditCommentForm()
comment_id = form.comment_id.data
comment: m.Comment = db.session.get(m.Comment, comment_id)
if not comment or comment.is_deleted:
log(log.WARNING, "Comment with id [%s] not found", comment_id)
flash("Comment not found", "danger")
return redirect(redirect_url)
if form.validate_on_submit():
comment.text = form.text.data
comment.edited = True
log(log.INFO, "Delete comment [%s]", comment)
comment.save()
flash("Success!", "success")
return redirect(redirect_url)
return redirect(
url_for(
"book.sub_collection_view",
book_id=book_id,
collection_id=collection_id,
)
)

View File

@ -0,0 +1,32 @@
"""comment_edited
Revision ID: 1dfa1f2c208f
Revises: 2ec60080de3b
Create Date: 2023-05-09 17:22:23.028408
"""
from alembic import op
import sqlalchemy as sa
# revision identifiers, used by Alembic.
revision = '1dfa1f2c208f'
down_revision = '2ec60080de3b'
branch_labels = None
depends_on = None
def upgrade():
# ### commands auto generated by Alembic - please adjust! ###
with op.batch_alter_table('comments', schema=None) as batch_op:
batch_op.add_column(sa.Column('edited', sa.Boolean(), nullable=True))
# ### end Alembic commands ###
def downgrade():
# ### commands auto generated by Alembic - please adjust! ###
with op.batch_alter_table('comments', schema=None) as batch_op:
batch_op.drop_column('edited')
# ### end Alembic commands ###

View File

@ -1,14 +1,36 @@
export function initComments() {
// deleting comment
const deleteCommentBtn: HTMLButtonElement = document.querySelector(
'#delete_comment_btn',
);
const deleteCommentBtns: NodeListOf<HTMLButtonElement> =
document.querySelectorAll('#delete_comment_btn');
const deleteCommentInputOnModal: HTMLInputElement =
document.querySelector('#comment_id');
if (deleteCommentBtn && deleteCommentInputOnModal) {
deleteCommentBtn.addEventListener('click', () => {
const id = deleteCommentBtn.getAttribute('data-comment-id');
deleteCommentInputOnModal.value = id;
});
if (deleteCommentBtns && deleteCommentInputOnModal) {
deleteCommentBtns.forEach(btn =>
btn.addEventListener('click', () => {
const id = btn.getAttribute('data-comment-id');
deleteCommentInputOnModal.value = id;
}),
);
}
// edit comment
const editCommentBtns: NodeListOf<HTMLButtonElement> =
document.querySelectorAll('#edit_comment_btn');
const editCommentInputOnModal: HTMLInputElement =
document.querySelector('#edit_comment_id');
const editCommentTextInputOnModal: HTMLInputElement =
document.querySelector('#edit_comment_text');
if (
editCommentBtns &&
editCommentInputOnModal &&
editCommentTextInputOnModal
) {
editCommentBtns.forEach(btn =>
btn.addEventListener('click', () => {
const id = btn.getAttribute('data-edit-comment-id');
const text = btn.getAttribute('data-edit-comment-text');
editCommentInputOnModal.value = id;
editCommentTextInputOnModal.value = text;
}),
);
}
}

View File

@ -967,6 +967,26 @@ def test_crud_comment(client: FlaskClient, runner: FlaskCliRunner):
comment: m.Comment = m.Comment.query.filter_by(text=comment_text).first()
assert comment
new_text = "Some new text"
# edit
response: Response = client.post(
f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/{interpretation.id}/comment_edit",
data=dict(
section_id=section_in_subcollection.id,
text=new_text,
interpretation_id=interpretation.id,
comment_id=comment.id,
),
follow_redirects=True,
)
assert response
assert response.status_code == 200
assert b"Success" in response.data
assert str.encode(new_text) in response.data
assert str.encode(comment_text) not in response.data
# delete
response: Response = client.post(
f"/book/{book.id}/{collection.id}/{sub_collection.id}/{section_in_subcollection.id}/{interpretation.id}/comment_delete",