[UPDT] EMPLOYEE: Template for send email feature
This commit is contained in:
Horilla
37
employee/templates/dashboard/not_in_yet.html
Normal file
37
employee/templates/dashboard/not_in_yet.html
Normal file
@@ -0,0 +1,37 @@
|
||||
{% load i18n %}
|
||||
{{ not_in_yet }}
|
||||
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
|
||||
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider mb-0">
|
||||
<span class="oh-card-dashboard__title">{% trans 'Not In Yet' %}</span>
|
||||
</div>
|
||||
<div class="oh-card-dashboard__body">
|
||||
<div class="oh-sticky-table" style="max-height:320px;">
|
||||
<div class="oh-sticky-table__table oh-table--sortable">
|
||||
<div class="oh-sticky-table__tbody">
|
||||
{% for emp in employees %}
|
||||
<div class="oh-sticky-table__tr" draggable="true">
|
||||
<div class="oh-sticky-table__sd">
|
||||
<div class="oh-profile oh-profile--md">
|
||||
<div class="oh-profile__avatar mr-1">
|
||||
<img src="{{ emp.get_avatar }}" class="oh-profile__image" />
|
||||
</div>
|
||||
<span class="oh-profile__name oh-text--dark">
|
||||
{{ emp.get_full_name }}
|
||||
<span class="oh-recuritment_tag" style="font-size: .5rem;">{{ emp.get_leave_status }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
hx-get='{% url "send-mail-employee" emp.id %}'
|
||||
class="oh-sticky-table__td" title="{% trans 'Send Mail' %}"
|
||||
hx-target="#mail-content" data-toggle="oh-modal-toggle"
|
||||
data-target="#sendMailModal" align="center" style="width: 50px;">
|
||||
<ion-icon name="mail-outline"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
48
employee/templates/dashboard/not_out_yet.html
Normal file
48
employee/templates/dashboard/not_out_yet.html
Normal file
@@ -0,0 +1,48 @@
|
||||
{% load i18n %}
|
||||
{{ not_in_yet }}
|
||||
<div class="oh-card-dashboard oh-card-dashboard--no-scale oh-card-dashboard--transparent">
|
||||
<div class="oh-card-dashboard__header oh-card-dashboard__header--divider mb-0">
|
||||
<span class="oh-card-dashboard__title">{% trans 'Not Out Yet' %}</span>
|
||||
</div>
|
||||
<div class="oh-card-dashboard__body">
|
||||
<div class="oh-sticky-table" style="max-height:320px;">
|
||||
<div class="oh-sticky-table__table oh-table--sortable">
|
||||
<div class="oh-sticky-table__tbody">
|
||||
{% for emp in employees %}
|
||||
<div class="oh-sticky-table__tr" draggable="true">
|
||||
<div class="oh-sticky-table__sd">
|
||||
<div class="oh-profile oh-profile--md">
|
||||
<div class="oh-profile__avatar mr-1">
|
||||
<img src="{{ emp.get_avatar }}" class="oh-profile__image" />
|
||||
</div>
|
||||
<span class="oh-profile__name oh-text--dark">
|
||||
{{ emp.get_full_name }}
|
||||
<span class="oh-recuritment_tag" style="font-size: .5rem;">At work {{ emp.get_forecasted_at_work.forecasted_at_work }}</span>
|
||||
<span class="oh-recuritment_tag" style="font-size: .5rem;">Pending {{ emp.get_forecasted_at_work.forecasted_pending_hours }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
hx-get='{% url "send-mail-employee" emp.id %}'
|
||||
class="oh-sticky-table__td" title="{% trans 'Send Mail' %}"
|
||||
hx-target="#mail-content" data-toggle="oh-modal-toggle"
|
||||
data-target="#sendMailModal" align="center" style="width: 50px;">
|
||||
<ion-icon name="mail-outline"></ion-icon>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="oh-modal" id="sendMailModal" role="dialog" aria-labelledby="sendMailModal" aria-hidden="true">
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<span class="oh-modal__dialog-title" id="sendMailModalLabel"><h5>{% trans 'Send Mail' %}</h5></span>
|
||||
<button class="oh-modal__close" aria-label="Close"><ion-icon name="close-outline"></ion-icon></button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body" id="mail-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
119
employee/templates/employee/send_mail.html
Normal file
119
employee/templates/employee/send_mail.html
Normal file
@@ -0,0 +1,119 @@
|
||||
{% load i18n %}
|
||||
<div id="ack-message-{{employee.id}}">
|
||||
</div>
|
||||
<form hx-post='{% url "send-mail-to-employee" %} ' class="oh-general__tab-target oh-profile-section"
|
||||
id='ack-form-{{employee.id}}' hx-target="#ack-message-{{employee.id}}" hx-encoding="multipart/form-data">
|
||||
<input type="hidden" value="{{employee.id}}" name="id">
|
||||
<div class="modal-body">
|
||||
<div class="oh-timeoff-modal__profile-content">
|
||||
<div class="oh-profile mb-2">
|
||||
<div class="oh-profile__avatar">
|
||||
<img src="{{employee.get_avatar}}"
|
||||
class="oh-profile__image me-2">
|
||||
</div>
|
||||
<div class="oh-timeoff-modal__profile-info">
|
||||
<span class="oh-timeoff-modal__user fw-bold">{{employee.get_full_name}}</span>
|
||||
<span class="oh-timeoff-modal__user m-0" style="font-size: 18px; color: #4d4a4a">
|
||||
{{employee.get_job_position}} /
|
||||
{{employee.get_department}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group mt-2">
|
||||
<label for="subject">
|
||||
<h6>{% trans "Subject" %}</h6>
|
||||
</label>
|
||||
<input required type="text" placeholder="Important Reminder" name='subject' class="oh-input w-100" id="subject"
|
||||
placeholder="Subject">
|
||||
</div>
|
||||
<div class="form-group mt-2">
|
||||
<label for="template">
|
||||
<h6>{% trans "Template" %}</h6>
|
||||
</label>
|
||||
<select name="template" class="w-100 oh-select" id="template">
|
||||
<option value="">----</option>
|
||||
{% for template in templates %}
|
||||
<option value="{{template.id}}">{{template.title}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mt-2">
|
||||
<label for="body">
|
||||
<h6>{% trans "Message Body" %}</h6>
|
||||
</label>
|
||||
<textarea hidden data-summernote name="body" required class="oh-input w-100" id="body" cols="30"
|
||||
rows="2"></textarea>
|
||||
</div>
|
||||
<div class="form-group mt-2">
|
||||
<label for="template_attachments">
|
||||
<h6>{% trans "Template as Attachment" %}</h6>
|
||||
</label>
|
||||
<select name="template_attachments" class="w-100 oh-select" id="template_attachments" multiple>
|
||||
{% for template in templates %}
|
||||
<option value="{{template.id}}">{{template.title}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group mt-2">
|
||||
<label for="other_attachments">
|
||||
<h6>{% trans "Other Attachments" %}</h6>
|
||||
</label>
|
||||
<input type="file" name="other_attachments" id="other_attachments" multiple style="display: block;">
|
||||
</div>
|
||||
<div class="modal-footer d-flex flex-row-reverse mt-3">
|
||||
<input type="submit" class="oh-btn oh-btn--secondary submit-send" data-message-id="ack-message-{{employee.id}}"
|
||||
name="submit" id="submit" onclick="sendMail()" value="{% trans 'Send Mail' %}">
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
button = document.querySelector('.submit-send')
|
||||
button.onclick = function (event) {
|
||||
var element = event.target;
|
||||
var valid = true
|
||||
if (!$("#subject").val().length) {
|
||||
valid=false
|
||||
$(`#messages`).html($(`
|
||||
<div class="oh-alert oh-alert--animated oh-alert--danger" role="alert">
|
||||
The message subject is required
|
||||
</div>
|
||||
`));
|
||||
}
|
||||
else if (!$("#body").val().length) {
|
||||
valid=false
|
||||
$(`#messages`).html($(`
|
||||
<div class="oh-alert oh-alert--animated oh-alert--danger" role="alert">
|
||||
The message body is required
|
||||
</div>
|
||||
`));
|
||||
}
|
||||
if (valid) {
|
||||
|
||||
$(`#messages`).html($(`
|
||||
<div class="oh-alert oh-alert--animated oh-alert--info" role="alert">
|
||||
Processing...
|
||||
</div>
|
||||
`));
|
||||
}
|
||||
};
|
||||
$(document).ready(function () {
|
||||
$("#template").change(function (e) {
|
||||
var id = $(this).val();
|
||||
if (id.length) {
|
||||
$.ajax({
|
||||
type: "get",
|
||||
url: `/employee/get-template/${id}/`,
|
||||
data: { "instance_id": "{{employee.id}}" },
|
||||
dataType: "Json",
|
||||
success: function (response) {
|
||||
$('#ack-form-{{employee.id}} [name="body"]').html(response.body).change()
|
||||
$('#ack-form-{{employee.id}} [class="note-editable"]').html(response.body)
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user