@ -8,125 +8,106 @@
Edit Project
< / h1 >
< form class = "w-full flex flex-col gap-3 justify-center items-center mt-5 " method = "POST"
action="{% url 'save_project' %}">
< form class = "w-full flex flex-col gap-3 justify-center items-center " method = "POST"
action="{% url 'editproject' project.project_id %}">
{% csrf_token %}
< input required name = "name" type = "text" placeholder = "Project Name"
value="Winabig"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
< select required name = "customer" id = ""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
< option value = "" disabled > Clients< / option >
< option value = "" selected > Nataly< / option >
{% for customer in customers %}
< option value = "{{customer.user.username}}" > {{customer.first_name}} {{customer.last_name}}< / option >
{% endfor %}
< / select >
< select required name = "manager" id = ""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
< option value = "" disabled > Project Manager< / option >
< option value = "" selected > Emile< / option >
{% for staff in staffs %}
< option value = "{{staff.user.username}}" > {{staff.first_name}} {{staff.last_name}}< / option >
{% endfor %}
< / select >
< select required name = "members" id = ""
class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
multiple>
< option value = "" disabled > Member(s)< / option >
< option value = "" selected > Salim< / option >
{% for staff in staffs %}
< option value = "{{staff.user.username}}" > {{staff.first_name}} {{staff.last_name}}< / option >
{% endfor %}
< / select >
< select required name = "status" id = ""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500">
< option value = "" disabled > Status< / option >
< option value = "Pending" > Pending< / option >
< option value = "Active" selected > Active< / option >
< option value = "Completed" > Completed< / option >
< option value = "Cancelled" > Cancelled< / option >
< / select >
< select required name = "members" id = ""
class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
multiple>
< option value = "" disabled > Project Type< / option >
< option value = "" selected > Development< / option >
{%for type in project_types %}
< option value = "{{type.id}}" > {{type.name}}< / option >
{% endfor %}
< / select >
< textarea required name = "details" type = "text" placeholder = "Project Details" rows = "5" cols = "5"
class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum magnam ea temporibus commodi aspernatur culpa totam similique voluptate veritatis? Odit, excepturi? Itaque suscipit libero iure corrupti consequatur soluta expedita quod?
< / textarea >
< div class = "w-full p-3 border border-gray-300 mt-4 rounded-md" >
< div class = "w-full mt-2" id = "addReqContainer" >
< input name = "requirements" type = "text" placeholder = "Requirement"
value="One"
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none">
< div class = "w-full flex flex-col gap-3 justify-center items-center mt-5" >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Name:< / label >
< input required name = "name" type = "text" placeholder = "Name"
value="{{project.name}}"
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md mt-2">
< / div >
<!-- THE CLONED CONTAINER -->
< div class = "mt-2 hidden" id = "addReqContainerTemplate" >
< div class = "w-full flex flex-col gap-2" >
< input name = "requirements" type = "text" placeholder = "Requirement"
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none">
< button
class="w-full h-[55px] rounded-md bg-gray-300 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2"
id="removeReqButton" type="button">
< i class = "fa fa-minus" > < / i >
< / button >
< / div >
< / div >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Client:< / label >
< select required name = "customer" id = ""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2">
< option value = "" disabled > Clients< / option >
{% for customer in customers %}
< option value = "{{customer.id}}" { % if customer . id = = current_client . id % } selected { % endif % } > {{customer.user.first_name}} {{customer.user.last_name}}< / option >
{% endfor %}
< / select >
< / div >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Project Manager:< / label >
< select required name = "manager" id = ""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2">
< option value = "" disabled > Project Manager< / option >
{% for staff in staffs %}
< option value = "{{staff.id}}" { % if staff . id = = current_manager . id % } selected { % endif % } > {{staff.user.first_name}} {{staff.user.last_name}}< / option >
{% endfor %}
< / select >
< / div >
< button
class="w-full h-[55px] rounded-md bg-gray-400 border-none outline-none shadow-md text-white text-xl cursor-pointer py-2 mt-2"
id="addReqButton" type="button">
< i class = "fa fa-plus" > < / i >
< / button >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Member(s):< / label >
< select required name = "members" id = ""
class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2"
multiple>
{% for staff in staffs %}
{% if staff in project.members.all %}
< option value = "{{staff.id}}" selected > {{staff.user.first_name}} {{staff.user.last_name}}< / option >
{% else %}
< option value = "{{staff.id}}" > {{staff.user.first_name}} {{staff.user.last_name}}< / option >
{% endif %}
{% endfor %}
< / select >
< / div >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Status:< / label >
< select required name = "status" id = ""
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2">
< option value = "" disabled > Select Status< / option >
< option value = "Pending" { % if project . status = = ' Pending ' % } selected { % endif % } > Pending< / option >
< option value = "Active" { % if project . status = = ' Active ' % } selected { % endif % } > Active< / option >
< option value = "Completed" { % if project . status = = ' Completed ' % } selected { % endif % } > Completed< / option >
< option value = "Cancelled" { % if project . status = = ' Cancelled ' % } selected { % endif % } > Cancelled< / option >
< / select >
< / div >
< script >
const addReqButton = document.getElementById("addReqButton");
const addReqContainerTemplate = document.getElementById("addReqContainerTemplate");
const addReqContainer = document.getElementById("addReqContainer");
addReqButton.addEventListener("click", function () {
// Clone the template and remove the "hidden" class
const newContainer = addReqContainerTemplate.cloneNode(true);
newContainer.classList.remove("hidden");
// Add an event listener to the new container's remove button
const removeReqButton = newContainer.querySelector("#removeReqButton");
removeReqButton.addEventListener("click", function () {
// Remove the clicked container when the remove button is clicked
newContainer.remove();
});
addReqContainer.appendChild(newContainer);
});
< / script >
< div class = "w-full" >
< label class = "text-gray-500" > Start Date:< / label >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Type(s):< / label >
< select required name = "types" id = ""
class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2"
multiple>
{%for type in types %}
{% if type in project.project_type.all %}
< option value = "{{type.id}}" selected > {{type.name}}< / option >
{%else%}
< option value = "{{type.id}}" > {{type.name}}< / option >
{% endif %}
{% endfor %}
< / select >
< / div >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Description:< / label >
< textarea required name = "details" type = "text" placeholder = "Project Details" rows = "5" cols = "5"
class="w-full py-3 px-3 border border-gray-300 outline-none rounded-md resize-none mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Illum magnam ea temporibus commodi aspernatur culpa totam similique voluptate veritatis? Odit, excepturi? Itaque suscipit libero iure corrupti consequatur soluta expedita quod?
< / textarea >
< / div >
< / div >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Start Date:< / label >
< input required name = "start_date" type = "date" id = "date" name = "date"
value="2023-09-22"
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1">
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-2 ">
< / div >
< div class = "w-full" >
< label class = "text-gray-500" > End Date:< / label >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > End Date:< / label >
< input required name = "end_date" type = "date" id = "date" name = "date"
value="2023-10-22"
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-1 ">
class="w-full p-3 border border-gray-300 rounded-md bg-transparent outline-none mt-2 ">
< / div >
< 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">Save< / button >