new
emile
3 weeks ago
parent
6b0df34cdd
commit
ce99bc2774
Binary file not shown.
@ -0,0 +1,53 @@
|
||||
{% extends "main.html" %}
|
||||
{% load static %}
|
||||
{% block title %}My Projects{% endblock %}
|
||||
{% block content %}
|
||||
|
||||
<div class="w-full xxlg1:w-[75%] bg-white h-fit rounded-md shadow-md p-5">
|
||||
<div class="w-full flex flex-col gap-4 mt-5">
|
||||
<div>
|
||||
<p class="text-gray-500 text-xl">First Name: <span
|
||||
class="text-slate-800 text-xl font-semibold">{{ address.first_name }}</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-xl">Middle Name: <span
|
||||
class="text-slate-800 text-xl font-semibold">{{ address.middle_name }}</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-xl">Last Name: <span
|
||||
class="text-slate-800 text-xl font-semibold">{{ address.last_name }}</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-xl">Country: <span
|
||||
class="text-slate-800 text-xl font-semibold">{{ address.country.name }}</span></p>
|
||||
</div>
|
||||
|
||||
{% if address.contact_set.all %}
|
||||
<div>
|
||||
<p class="text-gray-500 text-xl mb-2">Contacts:</p>
|
||||
<ul class="list-disc pl-5">
|
||||
{% for contact in address.contact_set.all %}
|
||||
<li class="text-slate-800 text-lg">
|
||||
{{ contact.type }}: {{ contact.contact }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<a href="{% url 'editaddressbook' address.id %}">
|
||||
<button
|
||||
class="w-full text-base px-3 py-2 bg-fifthosiblue text-white outline-none border border-fifthosiblue rounded-md cursor-pointer hover:bg-white hover:text-fifthosiblue duration-300 mt-5">
|
||||
Edit Contact
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<button
|
||||
class="w-full text-base px-3 py-2 bg-red-500 text-white outline-none border border-red-500 rounded-md cursor-pointer hover:bg-white hover:text-red-500 duration-300 mt-3 deleteCustomerButton"
|
||||
data-modal-url="">
|
||||
Delete Contact
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% endblock content %}
|
||||
@ -0,0 +1,106 @@
|
||||
{% extends "main.html" %}
|
||||
{% load static %}
|
||||
{% block content %}
|
||||
|
||||
<div class="w-full px-5 s:px-9 mb-5">
|
||||
<div class="w-full h-full shadow-md rounded-md py-5 px-3 bg-white">
|
||||
<h1 class="text-3xl text-secondosiblue text-center font-semibold">
|
||||
Edit Contact
|
||||
</h1>
|
||||
|
||||
<form method="POST" action="{% url 'editaddressbook' address.id %}">
|
||||
{% csrf_token %}
|
||||
<div class="w-full flex flex-col gap-5 justify-center items-center mt-5">
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">First Name:</label>
|
||||
<input name="first_name" type="text" value="{{ address.first_name }}"
|
||||
class="w-full h-[50px] py-1 px-3 border border-gray-300 rounded-md mt-1" required>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Middle Name:</label>
|
||||
<input name="middle_name" type="text" value="{{ address.middle_name }}"
|
||||
class="w-full h-[50px] py-1 px-3 border border-gray-300 rounded-md mt-1">
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Last Name:</label>
|
||||
<input name="last_name" type="text" value="{{ address.last_name }}"
|
||||
class="w-full h-[50px] py-1 px-3 border border-gray-300 rounded-md mt-1" required>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Country:</label>
|
||||
<select name="country"
|
||||
class="w-full h-[50px] py-1 px-3 border border-gray-300 rounded-md mt-1">
|
||||
<option value="">Select Country</option>
|
||||
{% for country in countries %}
|
||||
<option value="{{ country.id }}"
|
||||
{% if address.country and country.id == address.country.id %}selected{% endif %}>
|
||||
{{ country.name }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Contacts -->
|
||||
<div class="w-full">
|
||||
<label class="text-gray-500">Contacts:</label>
|
||||
<div id="contact-fields" class="flex flex-col gap-3">
|
||||
{% for contact in address.contact_set.all %}
|
||||
<div class="flex gap-3 contact-block">
|
||||
<select name="contact_type[]" class="border border-gray-300 rounded-md px-2 py-1">
|
||||
{% for type, label in contact.TYPE_CHOICES %}
|
||||
<option value="{{ type }}"
|
||||
{% if contact.type == type %}selected{% endif %}>{{ label }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<input type="text" name="contact_value[]" value="{{ contact.contact }}"
|
||||
class="flex-1 border border-gray-300 rounded-md px-2 py-1" />
|
||||
<button type="button" class="remove-contact text-red-500">✕</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<button type="button" id="add-contact"
|
||||
class="mt-2 text-osiblue underline hover:text-blue-800">+ Add another contact</button>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-center items-center mt-4">
|
||||
<button type="submit"
|
||||
class="w-fit bg-osiblue border border-osiblue rounded-md text-white text-xl px-5 py-1 hover:bg-white hover:text-osiblue duration-300">Save</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('add-contact').addEventListener('click', function () {
|
||||
const container = document.getElementById('contact-fields');
|
||||
|
||||
const newBlock = document.createElement('div');
|
||||
newBlock.classList.add('flex', 'gap-3', 'contact-block', 'mt-2');
|
||||
newBlock.innerHTML = `
|
||||
<select name="contact_type[]" class="border border-gray-300 rounded-md px-2 py-1">
|
||||
<option value="Email">Email</option>
|
||||
<option value="Mobile">Mobile</option>
|
||||
<option value="Phone">Phone</option>
|
||||
<option value="Whatsapp">Whatsapp</option>
|
||||
</select>
|
||||
<input type="text" name="contact_value[]" placeholder="Enter contact"
|
||||
class="flex-1 border border-gray-300 rounded-md px-2 py-1" />
|
||||
<button type="button" class="remove-contact text-red-500">✕</button>
|
||||
`;
|
||||
container.appendChild(newBlock);
|
||||
});
|
||||
|
||||
document.addEventListener('click', function (e) {
|
||||
if (e.target.classList.contains('remove-contact')) {
|
||||
e.target.closest('.contact-block').remove();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{% endblock content %}
|
||||
Loading…
Reference in New Issue