Displayed the new added business in the select tag.

main
nataly 2 years ago
parent 1f1ade0173
commit 57bccb4cf7

Binary file not shown.

@ -621,11 +621,12 @@ def save_business(request):
return render(request, 'add-business.html')
@login_required
def save_business_modal(request):
if request.method == 'POST':
name = request.POST.get('name')
email= request.POST.get('email')
email = request.POST.get('email')
financial_number = request.POST.get('financial_number')
phone_number = request.POST.get('phone_number')
vat = request.POST.get('vat')
@ -635,20 +636,28 @@ def save_business_modal(request):
logo = request.POST.get('logo')
business = Business(
name = name,
email = email,
financial_number = financial_number,
vat = vat,
commercial_registration = commercial_registration,
website = website,
business_type = business_type,
logo = logo,
phone_number = phone_number,
name=name,
email=email,
financial_number=financial_number,
vat=vat,
commercial_registration=commercial_registration,
website=website,
business_type=business_type,
logo=logo,
phone_number=phone_number,
)
business.save()
return render(request, 'addbusiness-modal.html')
# Fetch the updated options for the <select> element
businesses = Business.objects.all()
updated_options = [{'id': business.id, 'name': business.name} for business in businesses]
# Return the updated options as JSON response
return JsonResponse(updated_options, safe=False)
return render(request, 'addbusiness-modal.html')
def save_customer(request):
if request.method == 'POST':

@ -58,14 +58,14 @@
<div class="w-full flex justify-end items-center px-3 py-2">
<button type="button"
class="w-fit py-1 px-3 bg-white rounded-md outline-none text-blue-500 border border-blue-500 text-xl cursor-pointer hover:bg-blue-500 hover:text-white addBusinessButton"
data-modal-url="{% url 'addbusinesscustomer' %}">
class="w-fit py-1 px-3 bg-white rounded-md outline-none text-blue-500 border border-blue-500 text-xl cursor-pointer hover:bg-blue-500 hover:text-white"
id="addBusinessButton">
Add Business
</button>
</div>
<div class="w-full mt-2">
<select name="business"
<select name="business" id="businessSelect"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
<option value="" selected disabled>Business Name</option>
{% for business in businesses %}
@ -76,6 +76,7 @@
</div>
<!-- MAKE THE "ADDBUSINESSCONTAINER" VISIBLE WHEN CHOOSING THE CUSTOMER TYPE AS BUSINESS -->
<script>
const businessTypeSelect = document.getElementById('businessTypeSelect');
const addBusinessContainer = document.getElementById('addBusinessContainer');
@ -101,9 +102,177 @@
</div>
</div>
</form>
<!-- THE "ADD BUSINESS" FORM THAT APPEARS WHEN CLICKING ON THE ADD BUSINESS BUTTON -->
<div class="w-full p-3 rounded-md border border-gray-300 mt-5 hidden" id="addBusinessFormContainer">
<h1 class="text-3xl text-slate-800 text-center font-semibold">Add Business</h1>
<form method="POST" action="{% url 'save_business_modal' %}" id="addBusinessFormModal">
{% csrf_token %}
<input name="name" type="text" placeholder="Name"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md mt-4">
<div class="flex items-center justify-between">
<input name="logo" required name="cv" type="file" id="actual-btn" accept="image/*" hidden
multiple />
<span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload
Business
Logo</span>
<label for="actual-btn"
class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
class="fa fa-upload"></i></label>
</div>
</div>
<!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
<script>
const fileInput = document.getElementById('actual-btn');
const fileNameSpan = document.getElementById('file-name');
fileInput.addEventListener('change', (event) => {
const selectedFiles = event.target.files;
if (selectedFiles.length > 0) {
const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
fileNameSpan.textContent = fileNames;
} else {
fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
}
});
</script>
<input name="email" type="email" placeholder="Email"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<input name="financial_number" type="number" placeholder="Financial Number"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<div class="w-full flex justify-start items-center gap-2 mt-4">
<input name="vat" type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)" required>
<label class="text-slate-800">Vat</label>
</div>
<script>
function updateVatValue(checked) {
const vatInput = document.querySelector('input[name="vat"]');
vatInput.value = checked ? 'True' : 'False';
}
</script>
<input name="commercial_registration" type="commercial_registration"
placeholder="Commercial registration"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<input name="phone_number" type="number" placeholder="Mobile Number"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<input name="website" type="text" placeholder="Website"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4">
<select name="business_type" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-4">
<option value="" selected disabled>Business Type</option>
<option value="ASSOCIATIONS">Associations</option>
<option value="HEALTHCARE">Healthcare</option>
<option value="LUXURY">Luxury</option>
<option value="MANUFACTURING">Manufacturing</option>
<option value="NON-PROFIT">Non-Profit</option>
<option value="Education">Education</option>
<option value="ENTERTAINMENT">Entertainment</option>
<option value="LOGISTICS">Logistics</option>
<option value="RETAIL">Retail</option>
<option value="AUTOMOTIVE">Automotive</option>
</select>
<div class="w-full flex justify-center items-center mt-3">
<button type="submit"
class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500"
id="addBusinessFormButton">Add
Business</button>
</div>
</form>
</div>
<!-- TO MAKE THE "ADDBUSINESSFORMCONTAINER" VISIBLE WHEN CLICKING ON THE ADD BUSINESS BUTTON -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const addButton = document.getElementById('addBusinessButton');
const formContainer = document.getElementById('addBusinessFormContainer');
const formButton = document.getElementById('addBusinessFormButton');
addButton.addEventListener('click', function () {
formContainer.classList.toggle('hidden');
if (!formContainer.classList.contains('hidden')) {
formContainer.scrollIntoView({ behavior: 'smooth' });
}
});
formButton.addEventListener('click', function () {
formContainer.classList.add('hidden');
});
});
</script>
<!-- TO FETCH AND DISPLAY THE NEW ADDED BUSINESS IN THE BUSINESS SELECT TAG -->
<script>
document.getElementById('addBusinessFormModal').addEventListener('submit', function (event) {
event.preventDefault(); // Prevent the form from actually submitting
const form = this;
const formData = new FormData(this);
fetch("{% url 'save_business_modal' %}", {
method: "POST",
body: formData,
})
.then(response => response.json())
.then(data => {
// console.log('Received JSON data:', data); // Check if data is received
form.reset();
const fileNameSpan = document.getElementById('file-name');
fileNameSpan.textContent = 'Upload Business Logo';
refreshSelectOptions(data);
})
.catch(error => {
console.error('Error fetching updated options:', error);
});
});
function refreshSelectOptions(updatedOptions) {
const selectElement = document.getElementById('businessSelect');
selectElement.innerHTML = '';
// Add a default option
const defaultOption = document.createElement('option');
defaultOption.value = '';
defaultOption.textContent = 'Business Name';
defaultOption.disabled = true;
selectElement.appendChild(defaultOption);
// Add the new options in reverse order
for (let i = updatedOptions.length - 1; i >= 0; i--) {
const business = updatedOptions[i];
const option = document.createElement('option');
option.value = business.id;
option.textContent = business.name;
selectElement.appendChild(option);
}
}
</script>
</div>
</div>
</div>
<!-- POPUP MODAL -->
<div class="w-full h-full bg-black bg-opacity-40 z-20 fixed justify-center items-center hidden" id="popUpModal">
<div class="w-[95%] md:w-fit h-fit bg-white rounded-md p-9 relative">

@ -1,111 +0,0 @@
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Osina</title>
<link rel="stylesheet" type="text/css" href='{% static "dist/output.css" %}'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
</head>
<body>
<div id="hiddenContent">
<h1 class="text-slate-800 text-2xl font-semibold text-center">Add Business</h1>
<form method="POST" action="{% url 'save_business_modal' %}" id="addBusinessFormModal">
{% csrf_token %}
<input name="name" type="text" placeholder="Name"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<div class="inbox-box border border-gray-300 py-1 px-3 w-full rounded-md mt-4">
<div class="flex items-center justify-between">
<input name="logo" required name="cv" type="file" id="actual-btn" accept="image/*" hidden
multiple />
<span id="file-name" class="text-gray-500 text-base focus:outline-none outline-none">Upload Business
Logo</span>
<label for="actual-btn"
class="bg-transparent text-gray-500 border border-white px-4 py-2 h-14 cursor-pointer flex items-center"><i
class="fa fa-upload"></i></label>
</div>
</div>
<!-- WHEN THE USER CHOOSE A FILE THE NAME OF THE FILE WILL APPEAR IN THE SPAN -->
<script>
const fileInput = document.getElementById('actual-btn');
const fileNameSpan = document.getElementById('file-name');
fileInput.addEventListener('change', (event) => {
const selectedFiles = event.target.files;
if (selectedFiles.length > 0) {
const fileNames = Array.from(selectedFiles).map(file => file.name).join(', ');
fileNameSpan.textContent = fileNames;
} else {
fileNameSpan.textContent = 'Upload Documents (PDF, docx)';
}
});
</script>
<input name="email" type="email" placeholder="Email"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<input name="financial_number" type="number" placeholder="Financial Number"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<div class="w-full flex justify-start items-center gap-2 mt-4">
<input name="vat" type="checkbox" id="vatCheckbox" onchange="updateVatValue(this.checked)" required>
<label class="text-slate-800">Vat</label>
</div>
<script>
function updateVatValue(checked) {
const vatInput = document.querySelector('input[name="vat"]');
vatInput.value = checked ? 'True' : 'False';
}
</script>
<input name="commercial_registration" type="commercial_registration" placeholder="Commercial registration"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<input name="phone_number" type="number" placeholder="Mobile Number"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4" required>
<input name="website" type="text" placeholder="Website"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-4">
<select name="business_type" id=""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-4">
<option value="" selected disabled>Business Type</option>
<option value="ASSOCIATIONS">Associations</option>
<option value="HEALTHCARE">Healthcare</option>
<option value="LUXURY">Luxury</option>
<option value="MANUFACTURING">Manufacturing</option>
<option value="NON-PROFIT">Non-Profit</option>
<option value="Education">Education</option>
<option value="ENTERTAINMENT">Entertainment</option>
<option value="LOGISTICS">Logistics</option>
<option value="RETAIL">Retail</option>
<option value="AUTOMOTIVE">Automotive</option>
</select>
<div class="w-full flex justify-center items-center mt-3">
<button type="submit"
class="w-fit py-1 px-3 bg-blue-500 rounded-md outline-none text-white border border-blue-500 text-xl cursor-pointer hover:bg-white hover:text-blue-500">Add
Business</button>
</div>
</form>
</div>
</body>
</html>

@ -188,7 +188,11 @@
</div>
</div>
</div>
</div>
<div class="w-full">
<a href="{% url 'addbusiness' %}">
<button class="w-full border-b border-gray-300 text-gray-500 py-3 bg-gray-100">ADD BUSINESS</button>
</a>
</div>
</div>
</div>

Loading…
Cancel
Save