@ -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">
< 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 >
< 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">
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 >
< option value = "" selected > Nataly< / option >
{% for customer in customers %}
< option value = "{{customer. user.username}}"> {{customer.first_name}} {{custom er.last_name}}< / option >
< option value = "{{customer. id}}" { % if customer . id = = current_client . id % } selected { % endif % } > {{customer.user.first_name}} {{customer.us er.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">
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 >
< option value = "" selected > Emile< / option >
{% for staff in staffs %}
< option value = "{{staff. user.username}}"> {{staff.first_name}} {{staff .last_name}}< / option >
< option value = "{{staff. id}}" { % if staff . id = = current_manager . id % } selected { % endif % } > {{staff.user.first_name}} {{staff.user .last_name}}< / option >
{% endfor %}
< / select >
< / div >
< 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"
class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500 mt-2 "
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 >
{% 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">
< 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 >
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 >
< 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"
< 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>
< option value = "" disabled > Project Type< / option >
< option value = "" selected > Development< / option >
{%for type in project_types %}
{%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">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?
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 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 >
<!-- 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 >
< 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 >
< 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" > 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 >