@ -8,125 +8,106 @@
Edit Project
Edit Project
< / h1 >
< / h1 >
< form class = "w-full flex flex-col gap-3 justify-center items-center mt-5 " method = "POST"
< form class = "w-full flex flex-col gap-3 justify-center items-center " method = "POST"
action="{% url 'save_project' %}">
action="{% url 'editproject' project.project_id %}">
{% csrf_token %}
{% csrf_token %}
< input required name = "name" type = "text" placeholder = "Project Name"
< div class = "w-full flex flex-col gap-3 justify-center items-center mt-5" >
value="Winabig"
< div class = "w-full mt-4" >
class="w-full h-[50px] py-1 px-3 border border-gray-300 outline-none rounded-md">
< 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 = ""
< 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 = "" disabled > Clients< / option >
< option value = "" selected > Nataly< / option >
{% for customer in customers %}
{% 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 %}
{% endfor %}
< / select >
< / select >
< / div >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Project Manager:< / label >
< select required name = "manager" id = ""
< 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 = "" disabled > Project Manager< / option >
< option value = "" selected > Emile< / option >
{% for staff in staffs %}
{% 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 %}
{% endfor %}
< / select >
< / select >
< / div >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Member(s):< / label >
< select required name = "members" id = ""
< 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>
multiple>
< option value = "" disabled > Member(s)< / option >
< option value = "" selected > Salim< / option >
{% for staff in staffs %}
{% 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 %}
{% endfor %}
< / select >
< / select >
< / div >
< div class = "w-full mt-4" >
< label class = "text-gray-500 text-xl" > Status:< / label >
< select required name = "status" id = ""
< 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">
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 > Status< / option >
< option value = "" disabled > Select Status< / option >
< option value = "Pending" > Pending< / option >
< option value = "Pending" { % if project . status = = ' Pending ' % } selected { % endif % } > Pending< / option >
< option value = "Active" selected > Active< / option >
< option value = "Active" { % if project . status = = ' Active ' % } selected { % endif % } > Active< / option >
< option value = "Completed" > Completed< / option >
< option value = "Completed" { % if project . status = = ' Completed ' % } selected { % endif % } > Completed< / option >
< option value = "Cancelled" > Cancelled< / option >
< option value = "Cancelled" { % if project . status = = ' Cancelled ' % } selected { % endif % } > Cancelled< / option >
< / select >
< / select >
< / div >
< select required name = "members" id = ""
< div class = "w-full mt-4" >
class="w-full h-[100px] py-1 px-3 border border-gray-300 outline-none rounded-md text-gray-500"
< 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>
multiple>
< option value = "" disabled > Project Type< / option >
{%for type in types %}
< option value = "" selected > Development< / option >
{% if type in project.project_type.all %}
{%for type in project_types %}
< option value = "{{type.id}}" selected > {{type.name}}< / option >
{%else%}
< option value = "{{type.id}}" > {{type.name}}< / option >
< option value = "{{type.id}}" > {{type.name}}< / option >
{% endif %}
{% endfor %}
{% endfor %}
< / select >
< / 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"
< 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 >
< / 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 >
< / 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 >
< / div >
< script >
< div class = "w-full mt-4" >
const addReqButton = document.getElementById("addReqButton");
< label class = "text-gray-500 text-xl" > Start Date:< / label >
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 >
< input required name = "start_date" type = "date" id = "date" name = "date"
< input required name = "start_date" type = "date" id = "date" name = "date"
value="2023-09-22"
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 >
< 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"
< input required name = "end_date" type = "date" id = "date" name = "date"
value="2023-10-22"
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 >
< div class = "w-full flex justify-center items-center mt-3" >
< div class = "w-full flex justify-center items-center mt-3" >
< button type = "submit"
< 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 >
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 >