[UPDT] LEAVE: Add HTMX attributes for leave requests and leave allocation request comment section

This commit is contained in:
Horilla
2024-11-18 13:51:08 +05:30
parent df060fe579
commit c7e8907127
5 changed files with 150 additions and 294 deletions

View File

@@ -1,124 +1,89 @@
{% load i18n static %}
<style>
#enlargeImageContainer {
position: absolute;
left: -300px;
top: 100px;
height: 200px;
width: 200px;
}
{% load basefilters %}
#enlargeImageContainer {
position: absolute;
left: -300px;
top: 100px;
height: 200px;
width: 200px;
}
</style>
{% if messages %}
<div class="oh-alert-container">
{% for message in messages %}
<div class="oh-alert oh-alert--animated {{message.tags}}">{{ message }}</div>
{% endfor %}
</div>
<script>
setTimeout(() => {
$(".oh-modal__close").click();
}, 1000);
</script>
{% endif %}
<div class="oh-activity-sidebar__header">
<a style="cursor: pointer;" onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
<ion-icon name="chevron-forward-outline"
class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
data-target="#allocationactivitySidebar">
</ion-icon>
</a>
<span class="oh-activity-sidebar__title"> {% trans "Comments" %} </span>
</div>
<div class="oh-activity-sidebar__header">
<a
style="cursor: pointer;"
onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
<ion-icon
name="chevron-forward-outline"
class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
data-target="#allocationactivitySidebar"
></ion-icon>
</a>
<span class="oh-activity-sidebar__title"> {% trans "Comments" %} </span>
<form method="post" hx-target="#commentContainerList" hx-select=".oh-activity-sidebar__qa-list"
hx-on-htmx-after-request="reloadMessage(this);$('#commentInput').val('');$('#commentButton').hide();"
hx-post="{% url 'allocation-request-add-comment' request_id %}?{{pd}}" id="commentForm">
{% csrf_token %}
<div>
<input type="text" name="comment" id="commentInput" class="oh-input w-100" placeholder="Comment here"
hx-on:keyup="toggleCommentButton(this);">
<button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
style="display: none;">
{% trans "Comment" %}
</button>
</div>
<form method="post"
hx-target="#commentContainer"
hx-post="{% url 'allocation-request-add-comment' request_id %}?{{pd}}" id="commentForm">
{% csrf_token %}
<div>
<input type="text" name="comment" id="commentInput" class="oh-input w-100" placeholder="Comment here">
<button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp" style="display: none;">
{% trans "Comment" %}
</button>
</div>
<div class="oh-inner-sidebar-content__footer"></div>
</form>
<div class="oh-inner-sidebar-content__footer"></div>
</form>
{% if comments %}
<ol class="oh-activity-sidebar__qa-list" role="list">
<ol class="oh-activity-sidebar__qa-list" role="list" id="commentContainerList">
{% for comment in comments %}
<li class="oh-activity-sidebar__qa-item">
<li class="oh-activity-sidebar__qa-item" id="leaveAlloCommentItem{{comment.id}}">
<span class="oh-activity-sidebar__q">{{ comment.comment }}
<span class="float-end" title="Delete" hx-get="{% url 'allocation-request-delete-comment' comment.id %}" data-target="#allocationactivitySidebar" hx-swap="innerHTML" hx-target="#commentContainer">
<ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
</span>
{% if request.user.employee_get == comment.employee_id or perms.leave.delete_leaveallocationrequestcomment or request.user|is_reportingmanager %}
<span class="float-end" hx-get="{% url 'allocation-request-delete-comment' comment.id %}"
hx-swap="outerHTML" hx-target="#leaveAlloCommentItem{{comment.id}}" hx-on:click="setTimeout(() => {reloadMessage(this);},100);">
<ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
</span>
{% endif %}
</span>
<div class="d-flex mt-2 mb-2">
{% for file in comment.files.all %}
<a
href="{{ file.file.url }}"
rel="noopener noreferrer"
target="_blank"
><span
class="oh-file-icon oh-file-icon--pdf"
onmouseover="enlargeImage('{{ file.file.url }}',$(this))"
style="width: 40px; height: 40px"
><img
src="{% static 'images/ui/minus-icon.png' %}"
style="display: block; width: 50%; height: 50%"
hx-get="{% url 'delete-allocation-comment-file' %}?ids={{ file.id }}&leave_id={{ request_id }}"
hx-target="#commentContainer"
onclick="event.stopPropagation();event.preventDefault()" /></span
></a>
<a href="{{ file.file.url }}" rel="noopener noreferrer" target="_blank" id="leaveAlloCommentFile{{file.id}}">
<span class="oh-file-icon oh-file-icon--pdf" onmouseover="enlargeImage('{{ file.file.url }}',$(this))" style="width: 40px; height: 40px">
{% if request.user.employee_get == comment.employee_id or perms.leave.delete_leaverequestfile or request.user|is_reportingmanager %}
<img src="{% static 'images/ui/minus-icon.png' %}" style="display: block; width: 50%; height: 50%"
hx-get="{% url 'delete-allocation-comment-file' %}?ids={{ file.id }}&leave_id={{ request_id }}&comment_id={{comment.id}}"
hx-target="#leaveAlloCommentFile{{file.id}}"
hx-on:click="setTimeout(() => {reloadMessage(this);},100);" hx-swap="outerHTML"
onclick="event.stopPropagation();event.preventDefault()" />
{% endif %}
</span>
</a>
{% endfor %}
<form
hx-post="{% url 'allocation-request-view-comment' comment.request_id.id %}?comment_id={{ comment.id }}"
class="add-files-form"
hx-encoding="multipart/form-data"
data-target="#allocationactivitySidebar" hx-swap="innerHTML" hx-target="#commentContainer"
>
{% csrf_token %}
<label for="addFile_{{comment.id}}" title="Add Files"
><ion-icon
name="add-outline"
style="font-size: 24px"
role="img"
class="md hydrated"
aria-label="add outline"
></ion-icon
></label>
<input
type="file"
name="files"
class="d-none"
multiple="true"
accept=".jpg, .jpeg, .png, .pdf"
id="addFile_{{comment.id}}"
onchange="submitForm(this)"
/>
<input
type="submit"
class="d-none add_more_submit"
value="save"
/>
</form>
{% if request.user.employee_get == comment.employee_id or perms.leave.delete_leaverequestfile or request.user|is_reportingmanager %}
<form
hx-post="{% url 'allocation-request-view-comment' comment.request_id.id %}?comment_id={{ comment.id }}"
class="add-files-form" hx-encoding="multipart/form-data" data-target="#allocationactivitySidebar"
hx-swap="innerHTML" hx-target="#commentContainer">
{% csrf_token %}
<label for="addFile_{{comment.id}}" title="Add Files"><ion-icon name="add-outline"
style="font-size: 24px" role="img" class="md hydrated"
aria-label="add outline"></ion-icon></label>
<input type="file" name="files" class="d-none" multiple="true" accept=".jpg, .jpeg, .png, .pdf"
id="addFile_{{comment.id}}" onchange="submitForm(this)" />
<input type="submit" class="d-none add_more_submit" value="save" />
</form>
{% endif %}
</div>
<span class="oh-activity-sidebar__a">
{% trans 'by' %}
<img
src="{{ note.note_by.get_avatar }}"
style="width: 1.5em; border-radius: 100%"
/>
<img src="{{ note.note_by.get_avatar }}" style="width: 1.5em; border-radius: 100%" />
{{ comment.employee_id.get_full_name }} @ {{comment.request_id.employee_id.get_full_name }}
{% trans "'s leave allocation request" %}
</span>
@@ -126,52 +91,18 @@
<div id="enlargeImageContainer" class="enlargeImageContainer"></div>
</div>
</li>
{% endfor %}
</ol>
{% else %}
<div class="oh-timeoff-modal__profile-content">
<div class="oh-404">
<div class="">
<span class="oh-timeoff-title fw-bold" style="display: block"
>{% trans "There are no comments to show." %}</span
>
<img
style="display: block; width: 100px; margin: 20px auto"
src="{% static "/images/ui/comment.png" %}"
class=""
/>
<ol class="oh-activity-sidebar__qa-list" role="list" id="commentContainerList">
<div class="oh-timeoff-modal__profile-content">
<div class="oh-404">
<div class="">
<span class="oh-timeoff-title fw-bold" style="display: block">{% trans "There are no comments to show." %}</span>
<img style="display: block; width: 100px; margin: 20px auto" src="{% static '/images/ui/comment.png' %}"
class="" />
</div>
</div>
</div>
</div>
</ol>
{% endif %}
<!-- start of comment modal -->
<div
class="oh-modal"
id="shiftcommentModal"
role="dialog"
aria-labelledby="emptagModal"
aria-hidden="true"
>
<div class="oh-modal__dialog" id="shiftRequestCommentForm">
</div>
</div>
<!-- end of comment modal -->
<script>
// Get references to the input field and comment button
const commentInput = document.getElementById('commentInput');
const commentButton = document.getElementById('commentButton');
// Add event listener to the input field
commentInput.addEventListener('input', function() {
// Show the comment button if the input field is not empty, hide it otherwise
if (commentInput.value.trim() !== '') {
commentButton.style.display = 'inline';
} else {
commentButton.style.display = 'none';
}
});
</script>

View File

@@ -1,123 +1,85 @@
{% load i18n static %}
{% load basefilters %}
<style>
#enlargeImageContainer {
position: absolute;
left: -300px;
top: 100px;
height: 200px;
width: 200px;
}
#enlargeImageContainer {
position: absolute;
left: -300px;
top: 100px;
height: 200px;
width: 200px;
}
</style>
{% if messages %}
<div class="oh-alert-container">
{% for message in messages %}
<div class="oh-alert oh-alert--animated {{message.tags}}">{{ message }}</div>
{% endfor %}
</div>
<script>
setTimeout(() => {
$(".oh-modal__close").click();
}, 1000);
</script>
{% endif %}
<div class="oh-activity-sidebar__header">
<a style="cursor: pointer;" onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');">
<ion-icon name="chevron-forward-outline"
class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
data-target="#leaveactivitySidebar"></ion-icon>
</a>
<span class="oh-activity-sidebar__title"> {% trans "Comments" %} </span>
</div>
<div class="oh-activity-sidebar__header">
<a
style="cursor: pointer;"
onclick="$('.oh-activity-sidebar--show').removeClass('oh-activity-sidebar--show');" >
<ion-icon
name="chevron-forward-outline"
class="oh-activity-sidebar__header-icon me-2 oh-activity-sidebar__close"
data-target="#leaveactivitySidebar"
></ion-icon>
</a>
<span class="oh-activity-sidebar__title"> {% trans "Comments" %} </span>
<form hx-target="#commentContainerList" hx-select=".oh-activity-sidebar__qa-list"
hx-on-htmx-after-request="reloadMessage(this);$('#commentInput').val('');$('#commentButton').hide();"
hx-post="{% url 'leave-request-add-comment' request_id %}?{{pd}}" id="commentForm">
{% csrf_token %}
<div>
<input type="text" name="comment" id="commentInput" hx-on:keyup="toggleCommentButton(this);"
class="oh-input w-100" placeholder="Comment here">
<button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp"
style="display: none;">
{% trans "Comment" %}
</button>
</div>
<form method="post"
hx-target="#commentContainer"
hx-post="{% url 'leave-request-add-comment' request_id %}?{{pd}}" id="commentForm">
{% csrf_token %}
<div>
<input type="text" name="comment" id="commentInput" class="oh-input w-100" placeholder="Comment here">
<button type="submit" id="commentButton" class="oh-btn oh-btn--secondary mt-2 mr-0 oh-btn--w-100-resp" style="display: none;">
{% trans "Comment" %}
</button>
</div>
<div class="oh-inner-sidebar-content__footer"></div>
</form>
<div class="oh-inner-sidebar-content__footer"></div>
</form>
{% if comments %}
<ol class="oh-activity-sidebar__qa-list" role="list">
<ol class="oh-activity-sidebar__qa-list" role="list" id="commentContainerList">
{% for comment in comments %}
<li class="oh-activity-sidebar__qa-item">
<li class="oh-activity-sidebar__qa-item" id="leaveReqCommentItem{{comment.id}}">
<span class="oh-activity-sidebar__q">{{ comment.comment }}
<span class="float-end" title="Delete" hx-get="{% url 'leave-request-delete-comment' comment.id %}" data-target="#leaveactivitySidebar" hx-swap="innerHTML" hx-target="#commentContainer">
<ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated" aria-label="close outline"></ion-icon>
</span>
{% if request.user.employee_get == comment.employee_id or perms.leave.delete_leaverequestcomment or request.user|is_reportingmanager %}
<span class="float-end" hx-get="{% url 'leave-request-delete-comment' comment.id %}" hx-swap="outerHTML"
hx-target="#leaveReqCommentItem{{comment.id}}"
hx-on:click="setTimeout(() => {reloadMessage(this);},100);">
<ion-icon name="close-outline" style="font-size: 24px" role="img" class="md hydrated"
aria-label="close outline"></ion-icon>
</span>
{% endif %}
</span>
<div class="d-flex mt-2 mb-2">
{% for file in comment.files.all %}
<a
href="{{ file.file.url }}"
rel="noopener noreferrer"
target="_blank"
><span
class="oh-file-icon oh-file-icon--pdf"
onmouseover="enlargeImage('{{ file.file.url }}',$(this))"
style="width: 40px; height: 40px"
><img
src="{% static 'images/ui/minus-icon.png' %}"
style="display: block; width: 50%; height: 50%"
hx-get="{% url 'delete-leave-comment-file' %}?ids={{ file.id }}&leave_id={{ request_id }}"
hx-target="#commentContainer"
onclick="event.stopPropagation();event.preventDefault()" /></span
></a>
<a href="{{ file.file.url }}" rel="noopener noreferrer" target="_blank" id="leaveReqCommentFile{{file.id}}">
<span class="oh-file-icon oh-file-icon--pdf" onmouseover="enlargeImage('{{ file.file.url }}',$(this))" style="width: 40px; height: 40px">
{% if request.user.employee_get == comment.employee_id or perms.leave.delete_leaverequestfile or request.user|is_reportingmanager %}
<img src="{% static 'images/ui/minus-icon.png' %}" style="display: block; width: 50%; height: 50%"
hx-get="{% url 'delete-leave-comment-file' %}?ids={{ file.id }}&leave_id={{ request_id }}&comment_id={{comment.id}}"
hx-on:click="setTimeout(() => {reloadMessage(this);},100);" hx-swap="outerHTML"
onclick="event.stopPropagation();event.preventDefault()" hx-target="#leaveReqCommentFile{{file.id}}"/>
{% endif %}
</span>
</a>
{% endfor %}
<form
hx-post="{% url 'leave-request-view-comment' comment.request_id.id %}?comment_id={{ comment.id }}"
class="add-files-form"
hx-encoding="multipart/form-data"
data-target="#leaveactivitySidebar" hx-swap="innerHTML" hx-target="#commentContainer"
>
{% csrf_token %}
<label for="addFile_{{comment.id}}" title="Add Files"
><ion-icon
name="add-outline"
style="font-size: 24px"
role="img"
class="md hydrated"
aria-label="add outline"
></ion-icon
></label>
<input
type="file"
name="files"
class="d-none"
multiple="true"
accept=".jpg, .jpeg, .png, .pdf"
id="addFile_{{comment.id}}"
onchange="submitForm(this)"
/>
<input
type="submit"
class="d-none add_more_submit"
value="save"
/>
</form>
{% if request.user.employee_get == comment.employee_id or perms.base.add_leaverequestfile or request.user|is_reportingmanager %}
<form hx-post="{% url 'leave-request-view-comment' comment.request_id.id %}?comment_id={{ comment.id }}"
class="add-files-form" hx-encoding="multipart/form-data" data-target="#leaveactivitySidebar"
hx-swap="innerHTML" hx-target="#commentContainer">
{% csrf_token %}
<label for="addFile_{{comment.id}}" title="Add Files"><ion-icon name="add-outline"
style="font-size: 24px" role="img" class="md hydrated"
aria-label="add outline"></ion-icon></label>
<input type="file" name="files" class="d-none" multiple="true" accept=".jpg, .jpeg, .png, .pdf"
id="addFile_{{comment.id}}" onchange="submitForm(this)" />
<input type="submit" class="d-none add_more_submit" value="save" />
</form>
{% endif %}
</div>
<span class="oh-activity-sidebar__a">
{% trans 'by' %}
<img
src="{{ note.note_by.get_avatar }}"
style="width: 1.5em; border-radius: 100%"
/>
<img src="{{ note.note_by.get_avatar }}" style="width: 1.5em; border-radius: 100%" />
{{ comment.employee_id.get_full_name }} @ {{comment.request_id.employee_id.get_full_name }}
{% trans "'s leave request" %}
</span>
@@ -125,52 +87,17 @@
<div id="enlargeImageContainer" class="enlargeImageContainer"></div>
</div>
</li>
{% endfor %}
</ol>
{% else %}
<div class="oh-timeoff-modal__profile-content">
<div class="oh-404">
<div class="">
<span class="oh-timeoff-title fw-bold" style="display: block"
>{% trans "There are no comments to show." %}</span
>
<img
style="display: block; width: 100px; margin: 20px auto"
src="{% static "/images/ui/comment.png" %}"
class=""
/>
<ol class="oh-activity-sidebar__qa-list" role="list" id="commentContainerList">
<div class="oh-timeoff-modal__profile-content">
<div class="oh-404">
<div class="">
<span class="oh-timeoff-title fw-bold" style="display: block">{% trans "There are no comments to show." %}</span>
<img style="display: block; width: 100px; margin: 20px auto" src="{% static '/images/ui/comment.png' %}" class="" />
</div>
</div>
</div>
</div>
</ol>
{% endif %}
<!-- start of comment modal -->
<div
class="oh-modal"
id="shiftcommentModal"
role="dialog"
aria-labelledby="emptagModal"
aria-hidden="true"
>
<div class="oh-modal__dialog" id="shiftRequestCommentForm">
</div>
</div>
<!-- end of comment modal -->
<script>
// Get references to the input field and comment button
const commentInput = document.getElementById('commentInput');
const commentButton = document.getElementById('commentButton');
// Add event listener to the input field
commentInput.addEventListener('input', function() {
// Show the comment button if the input field is not empty, hide it otherwise
if (commentInput.value.trim() !== '') {
commentButton.style.display = 'inline';
} else {
commentButton.style.display = 'none';
}
});
</script>

View File

@@ -292,7 +292,7 @@ urlpatterns = [
),
path(
"delete-leave-comment-file/",
views.delete_comment_file,
views.delete_leave_comment_file,
name="delete-leave-comment-file",
),
path(

View File

@@ -2015,7 +2015,7 @@ def user_leave_request(request, id):
redirect=f"/leave/request-view?id={leave_request.id}",
)
mail_thread = LeaveMailSendThread(
request, leave_request, type="request"
request, leave_request, type="request"
)
mail_thread.start()
messages.success(request, _("Leave request created successfully.."))

View File

@@ -3308,8 +3308,7 @@
"hours": "00:00",
"start_date": "2024-09-21",
"attachment": "",
"employee_id": [7, 4],
"company_id": []
"employee_id": [7, 4]
}
},
{
@@ -3327,8 +3326,7 @@
"hours": "00:00",
"start_date": "2024-09-21",
"attachment": "",
"employee_id": [23, 29],
"company_id": []
"employee_id": [23, 29]
}
}
]