[UPDT] HORILLA_THEME: Updated notes design in offboarding pipeline
This commit is contained in:
Horilla
241
horilla_theme/templates/offboarding/note/view_notes.html
Normal file
241
horilla_theme/templates/offboarding/note/view_notes.html
Normal file
@@ -0,0 +1,241 @@
|
||||
{% load tz static i18n basefilters offboarding_filter %}
|
||||
|
||||
<style>
|
||||
.enlarge-image-container {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 40%;
|
||||
left: 40%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 30%;
|
||||
height: 50%;
|
||||
z-index: 9999;
|
||||
}
|
||||
.diff-cell {
|
||||
background: rgba(255, 166, 0, 0.158);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function submitForm(elem) {
|
||||
$(elem).siblings(".add_more_submit").click();
|
||||
}
|
||||
|
||||
function enlargeDoc(src, $element) {
|
||||
var enlargeDocContainer = $element.closest('.commentItems').find(".enlargeImageContainer");
|
||||
enlargeDocContainer.empty();
|
||||
|
||||
var style = 'width:100%; height:100%; border:none; box-shadow: 0 10px 10px rgba(0,0,0,0.2), 0 6px 20px rgba(0,0,0,0.2); background:white;';
|
||||
var iframe = $('<iframe>', {
|
||||
src: src,
|
||||
style: style
|
||||
});
|
||||
|
||||
var filename = src.split('/').pop().replace(/_/g, ' ');
|
||||
var name = $('<span>').text(filename).css({
|
||||
display: 'block',
|
||||
textAlign: 'center',
|
||||
marginTop: '10px',
|
||||
fontWeight: 'bold'
|
||||
});
|
||||
|
||||
enlargeDocContainer.append(iframe).append(name).show();
|
||||
}
|
||||
|
||||
function hideEnlargeDoc() {
|
||||
var enlargeDocContainer = $('#enlargeDocContainer')
|
||||
enlargeDocContainer.empty()
|
||||
}
|
||||
|
||||
|
||||
$(document).on("click", function (event) {
|
||||
if (!$(event.target).closest("#enlargeDocContainer").length) {
|
||||
hideEnlargeDoc();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% if messages %}
|
||||
<script>
|
||||
reloadMessage();
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
<div class="bg-white rounded-md lg:mb-0" id="commentContainer">
|
||||
|
||||
<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="#activitySidebar"
|
||||
></ion-icon>
|
||||
</a>
|
||||
<span class="oh-activity-sidebar__title fw-bold">{{employee}}{% trans "'s Note" %}</span>
|
||||
</div>
|
||||
|
||||
{% if request.user.employee_get == shift_request.employee_id or perms.base.add_shiftrequestcomment or request.user|is_reportingmanager %}
|
||||
<form
|
||||
hx-target="#commentContainer"
|
||||
hx-post="{% url 'add-offboarding-note' %}?employee_id={{ employee.id }}"
|
||||
id="commentForm"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<input
|
||||
type="text"
|
||||
name="description"
|
||||
id="commentInput"
|
||||
class="oh-input w-full mt-2"
|
||||
placeholder="{% trans 'Add Comments' %}"
|
||||
hx-on:keyup="toggleCommentButton(this);"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
id="commentButton"
|
||||
class="oh-btn oh-btn--secondary mt-2"
|
||||
style="display: none"
|
||||
>
|
||||
<i class="fa-regular fa-square-plus"></i>
|
||||
{% trans "Add" %}
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
|
||||
<div class="overflow-hidden overflow-y-auto mt-4 pb-4 max-h-[75vh]">
|
||||
{% for comment in employee.offboardingnote_set.all %}
|
||||
<div
|
||||
class="border border-dark-50 p-3 rounded-md mb-2 relative commentItems"
|
||||
id="commentCard{{comment.id}}"
|
||||
>
|
||||
<div class="flex justify-between">
|
||||
<h3 class="font-semibold text-sm">{{ comment.description }}</h3>
|
||||
|
||||
{% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or perms.offboarding.change_offboardingemployee %}
|
||||
<form
|
||||
method="POST"
|
||||
hx-post="{% url 'offboarding-note-delete' comment.id %}"
|
||||
hx-confirm="{% trans 'Are you sure you want to delete this note?' %}"
|
||||
hx-target="#commentCard{{comment.id}}"
|
||||
hx-on-htmx-after-request="reloadMessage();"
|
||||
hx-swap="delete"
|
||||
class="inline-block"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<button
|
||||
type="submit"
|
||||
class="cursor-pointer bg-transparent border-0 p-0"
|
||||
title="{% trans 'Delete' %}"
|
||||
>
|
||||
<ion-icon
|
||||
name="trash-outline"
|
||||
style="color: #e54f38"
|
||||
></ion-icon>
|
||||
</button>
|
||||
</form>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2 mt-2 mb-2">
|
||||
{% for file in comment.attachments.all %}
|
||||
<a
|
||||
href="{{ file.attachment.url }}"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
id="noteFileItem{{file.id}}"
|
||||
>
|
||||
<span
|
||||
class="oh-file-icon oh-file-icon--pdf"
|
||||
id="commentFile{{file.id}}"
|
||||
onmouseover="enlargeDoc('{{ file.attachment.url }}',$(this))"
|
||||
onmouseout="hideEnlargeDoc()"
|
||||
style="width: 40px; height: 40px"
|
||||
>
|
||||
{% if request.user.employee_get|is_any_stage_manager or perms.offboarding.change_offboarding or perms.offboarding.change_offboardingemployee %}
|
||||
<img
|
||||
src="{% static 'images/ui/minus-icon.png' %}"
|
||||
style="display: block; width: 50%; height: 50%"
|
||||
hx-get="{% url 'delete-note-attachment' %}?ids={{ file.id }}&employee_id={{ employee.id }}"
|
||||
hx-target="#noteFileItem{{file.id}}"
|
||||
hx-swap="delete"
|
||||
onclick="event.stopPropagation();event.preventDefault()"
|
||||
/>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<form
|
||||
hx-post="{% url 'view-offboarding-note' employee.id %}?note_id={{ comment.id }}"
|
||||
class="add-files-form"
|
||||
hx-encoding="multipart/form-data"
|
||||
hx-swap="innerHTML"
|
||||
hx-target="#commentContainer"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<label
|
||||
for="addFile_{{comment.id}}"
|
||||
title="{% trans 'Add Files' %}"
|
||||
>
|
||||
<ion-icon
|
||||
name="add-outline"
|
||||
style="
|
||||
font-size: 12px;
|
||||
border: 1px solid #818791;
|
||||
border-radius: 5px;
|
||||
"
|
||||
class="text-gray-700"
|
||||
></ion-icon>
|
||||
</label>
|
||||
<input
|
||||
type="file"
|
||||
name="files"
|
||||
class="d-none"
|
||||
multiple
|
||||
accept=".jpg, .jpeg, .png, .pdf"
|
||||
id="addFile_{{comment.id}}"
|
||||
onchange="submitForm(this)"
|
||||
/>
|
||||
<input
|
||||
type="submit"
|
||||
class="d-none add_more_submit"
|
||||
value="save"
|
||||
/>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-[#565E6C] mt-1">
|
||||
{% trans "By" %}
|
||||
<span class="text-primary-600"> <b>{{ comment.note_by.get_full_name }}</b></span> {% trans "on" %} {{comment.stage_id}} {% trans "stage" %}
|
||||
<br />
|
||||
{% trans "on" %} <span class="dateformat_changer"> {{ comment.created_at.date }} </span> {% trans "at" %} <span class="timeformat_changer"> {{ comment.created_at|time:"h:i A" }} </sapn>
|
||||
</p>
|
||||
|
||||
<div style="width: 50%">
|
||||
<div class="enlargeImageContainer"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% empty %}
|
||||
<div class="oh-wrapper h-full" align="center">
|
||||
<div
|
||||
class="xl:col-span-4 md:col-span-6 col-span-12 bg-white p-6 rounded-md shadow-card h-[70%]"
|
||||
>
|
||||
<div class="flex flex-col items-center justify-center h-full">
|
||||
<img
|
||||
src="/static/horilla_theme/assets/img/no-records.svg"
|
||||
alt=""
|
||||
width="300"
|
||||
class="mb-4"
|
||||
/>
|
||||
<p class="text-[#666] mb-5">
|
||||
{% trans "No Comments have been added for this Shift request" %}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user