[UPDT] EMPLOYEE: Replace update-profile pic hx-target
This commit is contained in:
Horilla
@@ -1,298 +1,215 @@
|
||||
{% load i18n %}
|
||||
<div>
|
||||
<div
|
||||
class="oh-general__tab-target oh-profile-section mb-4"
|
||||
id="personal"
|
||||
data-select2-id="select2-data-personal"
|
||||
>
|
||||
<div
|
||||
class="oh-profile-section__card"
|
||||
data-select2-id="select2-data-48-0df8"
|
||||
>
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-12 col-sm-12 col-md-12 col-lg-6 d-flex align-items-center"
|
||||
>
|
||||
<div
|
||||
class="oh-profile-section__edit-photo me-4 mb-3"
|
||||
data-toggle="oh-modal-toggle"
|
||||
data-target="#uploadPhotoModal"
|
||||
>
|
||||
<img
|
||||
src="{{form.instance.get_avatar}}"
|
||||
class="oh-profile-section__avatar preview"
|
||||
alt="Username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="oh-general__tab-target oh-profile-section mb-4" id="personal" data-select2-id="select2-data-personal">
|
||||
<div class="oh-profile-section__card" data-select2-id="select2-data-48-0df8">
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
{% csrf_token %}
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6 d-flex align-items-center">
|
||||
<div class="oh-profile-section__edit-photo me-4 mb-3" data-toggle="oh-modal-toggle"
|
||||
data-target="#uploadPhotoModal">
|
||||
<img src="{{form.instance.get_avatar}}" class="oh-profile-section__avatar preview" alt="Username" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{form.employee_profile.errors}}
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="firstname">{% trans "First Name" %}</label>
|
||||
{{form.employee_first_name}} {{form.employee_first_name.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="lastname">{% trans "Last Name" %}</label>
|
||||
{{form.employee_last_name}} {{form.employee_last_name.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="email">{% trans "Email" %}</label>
|
||||
{{form.email}} {{form.email.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="phone">{% trans "Phone" %}</label>
|
||||
{{form.phone}} {{form.phone.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" data-select2-id="select2-data-46-nz80">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6" style="position: relative">
|
||||
<label class="oh-label" for="dob">{% trans "Date of Birth" %}</label>
|
||||
{{form.dob}} {{form.dob.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6" data-select2-id="select2-data-45-37n6">
|
||||
<label class="oh-label" for="gender">{% trans "Gender" %}</label>
|
||||
{{form.gender}} {{form.gender.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="{{form.qualification.id_for_label}}">
|
||||
{% trans "Qualification" %}
|
||||
</label>
|
||||
{{form.qualification}}
|
||||
{{form.qualification.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="{{form.experience.id_for_label}}">
|
||||
{% trans "Experience" %}
|
||||
</label>
|
||||
{{form.experience}} {{form.experience.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<label class="oh-label" for="address">{% trans "Address" %}</label>
|
||||
{{form.address}} {{form.address.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="country">{% trans "Country" %}</label>
|
||||
<select class="oh-select-2 oh-select w-100" name="country" id="id_country">
|
||||
<option value="{{form.instance.country}}" selected>
|
||||
{{form.instance.country}}
|
||||
</option>
|
||||
</select>
|
||||
<span class="dropdown-wrapper" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="state">{% trans "State" %}</label>
|
||||
<select name="state" class="oh-select oh-select-2" id="id_state">
|
||||
<option value="{{form.instance.state}}" selected>
|
||||
{{form.instance.state}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="state">{% trans "City" %}</label>
|
||||
{{form.city}} {{form.city.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="state">{% trans "Zip Code" %}</label>
|
||||
{{form.zip}} {{form.zip.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="state">{% trans "Emergency Contact" %}</label>
|
||||
{{form.emergency_contact}} {{form.emergency_contact.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="emergencyContactName">{% trans "Contact Name" %}</label>
|
||||
{{form.emergency_contact_name}}
|
||||
{{form.emergency_contact_name.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="emergencyContactRelation">
|
||||
{% trans "Emergency Contact Relation" %}
|
||||
</label>
|
||||
{{form.emergency_contact_relation}}
|
||||
{{form.emergency_contact_relation.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="marital_status">{% trans "Maritial Status" %}</label>
|
||||
{{form.marital_status}} {{form.marital_status.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="children">{% trans "Children" %}</label>
|
||||
{{form.children}} {{form.children.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label me-2" for="isActive">{% trans "Is Active" %}?</label>
|
||||
<div class="oh-switch">
|
||||
{{form.is_active}} {{form.is_active.errors}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-5 mb-3">
|
||||
<div class="w-100 d-flex align-items-center justify-content-end">
|
||||
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--w-100-resp">
|
||||
{% trans "Save" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{form.employee_profile.errors}}
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="firstname"
|
||||
>{% trans "First Name" %}</label
|
||||
>
|
||||
{{form.employee_first_name}} {{form.employee_first_name.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="lastname"
|
||||
>{% trans "Last Name" %}</label
|
||||
>
|
||||
{{form.employee_last_name}} {{form.employee_last_name.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="email">{% trans "Email" %}</label>
|
||||
{{form.email}} {{form.email.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="phone">{% trans "Phone" %}</label>
|
||||
{{form.phone}} {{form.phone.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" data-select2-id="select2-data-46-nz80">
|
||||
<div
|
||||
class="col-12 col-sm-12 col-md-12 col-lg-6"
|
||||
style="position: relative"
|
||||
>
|
||||
<label class="oh-label" for="dob"
|
||||
>{% trans "Date of Birth" %}</label
|
||||
>
|
||||
{{form.dob}} {{form.dob.errors}}
|
||||
</div>
|
||||
<div
|
||||
class="col-12 col-sm-12 col-md-12 col-lg-6"
|
||||
data-select2-id="select2-data-45-37n6"
|
||||
>
|
||||
<label class="oh-label" for="gender">{% trans "Gender" %}</label>
|
||||
{{form.gender}} {{form.gender.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="{{form.qualification.id_for_label}}"
|
||||
>{% trans "Qualification" %}</label
|
||||
>
|
||||
{{form.qualification}}
|
||||
{{form.qualification.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="{{form.experience.id_for_label}}"
|
||||
>{% trans "Experience" %}</label
|
||||
>
|
||||
{{form.experience}} {{form.experience.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-12">
|
||||
<label class="oh-label" for="address">{% trans "Address" %}</label>
|
||||
{{form.address}} {{form.address.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="country">{% trans "Country" %}</label>
|
||||
<select
|
||||
class="oh-select-2 oh-select w-100"
|
||||
name="country"
|
||||
id="id_country"
|
||||
>
|
||||
<option value="{{form.instance.country}}" selected>
|
||||
{{form.instance.country}}
|
||||
</option>
|
||||
</select>
|
||||
<span class="dropdown-wrapper" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="state"
|
||||
>{% trans "State" %}</label
|
||||
>
|
||||
<select name="state" class="oh-select oh-select-2" id="id_state">
|
||||
<option value="{{form.instance.state}}" selected>
|
||||
{{form.instance.state}}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="state"
|
||||
>{% trans "City" %}</label
|
||||
>
|
||||
{{form.city}} {{form.city.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="state"
|
||||
>{% trans "Zip Code" %}</label
|
||||
>
|
||||
{{form.zip}} {{form.zip.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="state"
|
||||
>{% trans "Emergency Contact" %}</label
|
||||
>
|
||||
{{form.emergency_contact}} {{form.emergency_contact.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="emergencyContactName"
|
||||
>{% trans "Contact Name" %}</label
|
||||
>
|
||||
{{form.emergency_contact_name}}
|
||||
{{form.emergency_contact_name.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="emergencyContactRelation"
|
||||
>{% trans "Emergency Contact Relation" %}</label
|
||||
>
|
||||
{{form.emergency_contact_relation}}
|
||||
{{form.emergency_contact_relation.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="marital_status"
|
||||
>{% trans "Maritial Status" %}</label
|
||||
>
|
||||
{{form.marital_status}} {{form.marital_status.errors}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label d-block" for="children"
|
||||
>{% trans "Children" %}</label
|
||||
>
|
||||
{{form.children}} {{form.children.errors}}
|
||||
</div>
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label me-2" for="isActive"
|
||||
>{% trans "Is Active" %}?</label
|
||||
>
|
||||
<div class="oh-switch">
|
||||
{{form.is_active}} {{form.is_active.errors}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="mt-5 mb-3">
|
||||
<div class="w-100 d-flex align-items-center justify-content-end">
|
||||
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--w-100-resp">
|
||||
{% trans "Save" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="uploadPhotoModal"
|
||||
role="dialog"
|
||||
aria-labelledby="uploadPhotoModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<span class="oh-modal__dialog-title" id="uploadPhotoModalLabel"
|
||||
>{% trans "Upload Photo" %}</span
|
||||
>
|
||||
<button class="oh-modal__close" aria-label="Close" id="closeModalBtn">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body">
|
||||
<div class="oh-profile-section__image-container">
|
||||
<form
|
||||
hx-post="{% url 'update-own-profile-image' %}"
|
||||
hx-target="#uploadPhotoModal"
|
||||
hx-encoding="multipart/form-data"
|
||||
method="post"
|
||||
id="file-form"
|
||||
onsubmit="return submitForm(event)"
|
||||
>
|
||||
{% csrf_token %}
|
||||
<div class="oh-profile-section__modal-avatar">
|
||||
<img
|
||||
src="{{form.instance.get_avatar}}"
|
||||
class="oh-profile-section__modal-image preview"
|
||||
alt="Username"
|
||||
/>
|
||||
<div class="oh-modal" id="uploadPhotoModal" role="dialog" aria-labelledby="uploadPhotoModal" aria-hidden="true">
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<span class="oh-modal__dialog-title" id="uploadPhotoModalLabel">{% trans "Upload Photo" %}</span>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
name="employee_profile"
|
||||
id="id_employee_profile"
|
||||
class="oh-input oh-input--file oh-input--file-sm mt-4"
|
||||
/>
|
||||
<div
|
||||
class="d-flex justify-content-between w-100 align-items-center mt-4"
|
||||
>
|
||||
<button
|
||||
class="oh-btn oh-btn--light-danger mr-1"
|
||||
hx-target="#personalMessage"
|
||||
hx-delete="{% url 'remove-own-profile-image' %}"
|
||||
>
|
||||
<ion-icon class="me-1" name="trash-outline"></ion-icon>
|
||||
{% trans "Delete Image" %}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
>
|
||||
{% trans "Update Image" %}
|
||||
</button>
|
||||
<div class="oh-modal__dialog-body" id="uploadPhotoModalBody">
|
||||
<div class="oh-profile-section__image-container">
|
||||
<form hx-post="{% url 'update-own-profile-image' %}" hx-target="#uploadPhotoModalBody"
|
||||
hx-encoding="multipart/form-data" id="file-form">
|
||||
{% csrf_token %}
|
||||
<div class="oh-profile-section__modal-avatar">
|
||||
<img src="{{form.instance.get_avatar}}" class="oh-profile-section__modal-image preview"
|
||||
alt="Username" />
|
||||
</div>
|
||||
<input type="file" name="employee_profile" id="id_employee_profile"
|
||||
class="oh-input oh-input--file oh-input--file-sm mt-4"/>
|
||||
<div class="d-flex justify-content-between w-100 align-items-center mt-4">
|
||||
<button class="oh-btn oh-btn--light-danger mr-1" hx-target="#personalMessage"
|
||||
hx-delete="{% url 'remove-own-profile-image' %}">
|
||||
<ion-icon class="me-1" name="trash-outline"></ion-icon>
|
||||
{% trans "Delete Image" %}
|
||||
</button>
|
||||
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
|
||||
{% trans "Update Image" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div id="personalMessage"></div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#id_employee_profile").change(function (e) {
|
||||
const file = this.files[0];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.addEventListener("load", function () {
|
||||
const imageUrl = reader.result;
|
||||
$(".preview").attr("src", imageUrl);
|
||||
});
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
$("#file-form").submit(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var formData = new FormData($(this)[0]);
|
||||
|
||||
$.ajax({
|
||||
url: '{% url "update-own-profile-image" %}',
|
||||
type: "POST",
|
||||
data: formData,
|
||||
async: false,
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function (response) {
|
||||
$("#personalMessage").html(response);
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
// console.log(xhr.responseText);
|
||||
},
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
<div id="personalMessage"></div>
|
||||
<script>
|
||||
function submitForm(event) {
|
||||
event.preventDefault();
|
||||
$("#closeModalBtn").click();
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#id_employee_profile").change(function (e) {
|
||||
const file = this.files[0];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.addEventListener("load", function () {
|
||||
const imageUrl = reader.result;
|
||||
$(".preview").attr("src", imageUrl);
|
||||
});
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
$("#file-form").submit(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
var formData = new FormData($(this)[0]);
|
||||
|
||||
$.ajax({
|
||||
url: '{% url "update-own-profile-image" %}',
|
||||
type: "POST",
|
||||
data: formData,
|
||||
async: false,
|
||||
cache: false,
|
||||
contentType: false,
|
||||
processData: false,
|
||||
success: function (response) {
|
||||
$("#personalMessage").html(response);
|
||||
},
|
||||
error: function (xhr, status, error) {
|
||||
// console.log(xhr.responseText);
|
||||
},
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,136 +1,85 @@
|
||||
{% load static %} {% load i18n %}
|
||||
<div class="oh-wrapper" data-select2-id="select2-data-40-yu7x">
|
||||
<div
|
||||
class="oh-general__tab-target oh-profile-section mb-4"
|
||||
id="personal"
|
||||
data-select2-id="select2-data-personal"
|
||||
>
|
||||
<div
|
||||
class="oh-profile-section__card"
|
||||
data-select2-id="select2-data-48-0df8"
|
||||
>
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
<div id="personalMessage"></div>
|
||||
<input type="hidden" name="form" value="personal">
|
||||
{% csrf_token %}
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-12 col-sm-12 col-md-12 col-lg-6 d-flex align-items-center"
|
||||
>
|
||||
<div
|
||||
class="oh-profile-section__edit-photo me-4 mb-3"
|
||||
data-toggle="oh-modal-toggle"
|
||||
data-target="#uploadPhotoModal"
|
||||
>
|
||||
<img
|
||||
src="{{form.instance.get_avatar}}"
|
||||
class="oh-profile-section__avatar preview"
|
||||
alt="Username"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{{form.employee_profile.errors}}
|
||||
<div class="oh-general__tab-target oh-profile-section mb-4" id="personal" data-select2-id="select2-data-personal">
|
||||
<div class="oh-profile-section__card" data-select2-id="select2-data-48-0df8">
|
||||
<form action="" method="post" enctype="multipart/form-data">
|
||||
<div id="personalMessage"></div>
|
||||
<input type="hidden" name="form" value="personal">
|
||||
{% csrf_token %}
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6 d-flex align-items-center">
|
||||
<div class="oh-profile-section__edit-photo me-4 mb-3" data-toggle="oh-modal-toggle"
|
||||
data-target="#uploadPhotoModal">
|
||||
<img src="{{form.instance.get_avatar}}" class="oh-profile-section__avatar preview"
|
||||
alt="Username" />
|
||||
</div>
|
||||
</div>
|
||||
{{form.employee_profile.errors}}
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="{{form.badge_id.id_for_label}}">{% trans "Badge Id" %}</label>
|
||||
{{form.badge_id}} {{form.badge_id.errors}}
|
||||
</div>
|
||||
</div>
|
||||
{{form.as_p}}
|
||||
<hr class="mt-5 mb-3">
|
||||
<div class="w-100 d-flex align-items-center justify-content-end">
|
||||
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--w-100-resp">
|
||||
{% trans "Save" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-12 col-md-12 col-lg-6">
|
||||
<label class="oh-label" for="{{form.badge_id.id_for_label}}"
|
||||
>{% trans "Badge Id" %}</label
|
||||
>
|
||||
{{form.badge_id}} {{form.badge_id.errors}}
|
||||
</div>
|
||||
</div>
|
||||
{{form.as_p}}
|
||||
<hr class="mt-5 mb-3">
|
||||
<div class="w-100 d-flex align-items-center justify-content-end">
|
||||
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--w-100-resp">
|
||||
{% trans "Save" %}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="oh-modal"
|
||||
id="uploadPhotoModal"
|
||||
role="dialog"
|
||||
aria-labelledby="uploadPhotoModal"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<span class="oh-modal__dialog-title" id="uploadPhotoModalLabel"
|
||||
>{% trans "Upload Photo" %}</span
|
||||
>
|
||||
<button class="oh-modal__close" aria-label="Close" id="closeModalBtn">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<div class="oh-modal__dialog-body">
|
||||
<div class="oh-profile-section__image-container">
|
||||
<form
|
||||
hx-post="{% url 'update-profile-image' form.instance.id %}"
|
||||
hx-target="#uploadPhotoModal"
|
||||
hx-encoding="multipart/form-data"
|
||||
method="post"
|
||||
id="file-form"
|
||||
onsubmit="return submitForm(event)"
|
||||
>
|
||||
<div class="oh-profile-section__modal-avatar ">
|
||||
<img
|
||||
src="{{form.instance.get_avatar}}"
|
||||
class="oh-profile-section__modal-image preview"
|
||||
alt="Username"
|
||||
/>
|
||||
<div class="oh-modal" id="uploadPhotoModal" role="dialog" aria-labelledby="uploadPhotoModal" aria-hidden="true">
|
||||
<div class="oh-modal__dialog">
|
||||
<div class="oh-modal__dialog-header">
|
||||
<span class="oh-modal__dialog-title" id="uploadPhotoModalLabel">{% trans "Upload Photo" %}</span>
|
||||
<button class="oh-modal__close" aria-label="Close">
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
name="employee_profile"
|
||||
id="id_employee_profile"
|
||||
class="oh-input oh-input--file oh-input--file-sm mt-4"
|
||||
/>
|
||||
{% csrf_token %}
|
||||
<div
|
||||
class="d-flex justify-content-between w-100 align-items-center mt-4"
|
||||
>
|
||||
<button
|
||||
class="oh-btn oh-btn--light-danger mr-1"
|
||||
hx-delete="{% url 'remove-profile-image' form.instance.id %}"
|
||||
hx-target="#personalMessage"
|
||||
>
|
||||
<ion-icon class="me-1" name="trash-outline"></ion-icon>
|
||||
{% trans "Delete Image" %}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="oh-btn oh-btn--secondary oh-btn--shadow"
|
||||
>
|
||||
{% trans "Update Image" %}
|
||||
</button>
|
||||
<div class="oh-modal__dialog-body" id="uploadPhotoModalBody">
|
||||
<div class="oh-profile-section__image-container">
|
||||
<form hx-post="{% url 'update-profile-image' form.instance.id %}" hx-target="#uploadPhotoModalBody"
|
||||
hx-encoding="multipart/form-data" id="file-form">
|
||||
<div class="oh-profile-section__modal-avatar ">
|
||||
<img src="{{form.instance.get_avatar}}" class="oh-profile-section__modal-image preview"
|
||||
alt="Username" />
|
||||
</div>
|
||||
<input type="file" name="employee_profile" id="id_employee_profile"
|
||||
class="oh-input oh-input--file oh-input--file-sm mt-4" />
|
||||
{% csrf_token %}
|
||||
<div class="d-flex justify-content-between w-100 align-items-center mt-4">
|
||||
<button class="oh-btn oh-btn--light-danger mr-1"
|
||||
hx-delete="{% url 'remove-profile-image' form.instance.id %}"
|
||||
hx-target="#personalMessage">
|
||||
<ion-icon class="me-1" name="trash-outline"></ion-icon>
|
||||
{% trans "Delete Image" %}
|
||||
</button>
|
||||
<button type="submit" class="oh-btn oh-btn--secondary oh-btn--shadow">
|
||||
{% trans "Update Image" %}
|
||||
</button>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#id_employee_profile").change(function (e) {
|
||||
const file = this.files[0];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.addEventListener("load", function () {
|
||||
const imageUrl = reader.result;
|
||||
$(".preview").attr("src", imageUrl);
|
||||
});
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$("#id_employee_profile").change(function (e) {
|
||||
const file = this.files[0];
|
||||
const reader = new FileReader();
|
||||
|
||||
reader.addEventListener("load", function () {
|
||||
const imageUrl = reader.result;
|
||||
$(".preview").attr("src", imageUrl);
|
||||
});
|
||||
|
||||
reader.readAsDataURL(file);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function submitForm(event) {
|
||||
event.preventDefault();
|
||||
$("#closeModalBtn").click();
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user