Orders management rework
This commit is contained in:
parent
cd6d224940
commit
84cd60e52c
10 changed files with 190 additions and 151 deletions
|
|
@ -71,7 +71,8 @@
|
|||
"firstDate": "First date",
|
||||
"lastDate": "Last date",
|
||||
"paid": "Paid",
|
||||
"given": "Given"
|
||||
"given": "Given",
|
||||
"chooseUser": "Choose an user"
|
||||
},
|
||||
"payment": {
|
||||
"successful": "Payment successful !",
|
||||
|
|
|
|||
|
|
@ -71,7 +71,8 @@
|
|||
"firstDate": "Première date",
|
||||
"lastDate": "Dernière date",
|
||||
"paid": "Payé",
|
||||
"given": "Donné"
|
||||
"given": "Donné",
|
||||
"chooseUser": "Choisissez un utilisateur"
|
||||
},
|
||||
"payment": {
|
||||
"successful": "Paiement réussi !",
|
||||
|
|
|
|||
|
|
@ -1,40 +1,59 @@
|
|||
const orderAction = document.getElementById("order-action");
|
||||
const rmButton = document.getElementById("remove-order");
|
||||
const orders = document.getElementById("orders");
|
||||
const sandwich = document.getElementById("sandwich");
|
||||
const day = document.getElementById("day");
|
||||
const locals = {
|
||||
order: document.querySelector("#order1>h2").innerHTML.replace(" 1", ""),
|
||||
sandwich: document.querySelector("label[for='sandwich1']").innerHTML,
|
||||
day: document.querySelector("label[for='day1']").innerHTML
|
||||
sandwich: document.querySelector("#oderCreator label").innerHTML,
|
||||
day: document.querySelector("label[for=day]").innerText,
|
||||
give: document.querySelector("p label span").innerText
|
||||
};
|
||||
|
||||
function lastOrderId() {
|
||||
let list = document.querySelectorAll("div.order h2");
|
||||
return parseInt(list[list.length-1].innerText.replace(locals.order+" ", ""));
|
||||
if (orders.lastChild)
|
||||
return parseInt(orders.lastChild.id.replace("order", ""));
|
||||
return 0;
|
||||
}
|
||||
|
||||
document.getElementById("add-order").addEventListener("click", () => {
|
||||
document.getElementById("addOrder").addEventListener("click", () => {
|
||||
if (!sandwich.value || !day.value)
|
||||
return;
|
||||
|
||||
let id = lastOrderId() + 1;
|
||||
orderAction.insertAdjacentHTML("beforebegin", `<div id="order${id}" class="order">
|
||||
<h2>${locals.order} ${id}</h2>
|
||||
<div class="field">
|
||||
|
||||
orders.insertAdjacentHTML("beforeend", `<div id="order${id}" class="row">
|
||||
<div class="input-field col s6">
|
||||
<input id="sandwich${id}" type="text" name="sandwiches[${id}]" value="${sandwich.value}" readonly required>
|
||||
<label for="sandwich${id}">${locals.sandwich}</label>
|
||||
<span class="list_arrow"><input id="sandwich${id}" type="list" list="sandwich-list" name="sandwiches[${id}]" autocomplete="off" required></span>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="day${id}">${locals.day}</label>
|
||||
<input id="day${id}" type="date" name="dates[${id}]" required>
|
||||
<div class="input-field col s6">
|
||||
<input id="date${id}" type="date" name="dates[${id}]" value="${day.value}" readonly required>
|
||||
<label for="date${id}">${locals.day}</label>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="give${id}">${locals.day}</label>
|
||||
<input id="give${id}" type="checkbox" name="give[${id}]">
|
||||
<div class="input-field col s12 center">
|
||||
<p>
|
||||
<label>
|
||||
<input type="checkbox" name="give[${id}]">
|
||||
<span>${locals.give}</span>
|
||||
</label>
|
||||
</p>
|
||||
</div>
|
||||
<a class="btn-floating btn-large waves-effect waves-light red"><i class="material-icons">remove</i></a>
|
||||
</div>`);
|
||||
document.getElementById("order"+lastOrderId()).scrollIntoView({behavior: "smooth"});
|
||||
rmButton.classList.remove("hide");
|
||||
|
||||
sandwich.selectedIndex = 0;
|
||||
day.value = "";
|
||||
|
||||
let order = document.getElementById("order"+id);
|
||||
order.querySelector("a").addEventListener("click", () => {
|
||||
order.remove();
|
||||
if (lastOrderId() === 0) {
|
||||
sandwich.required = true;
|
||||
day.required = true;
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById("order"+id).scrollIntoView({behavior: "smooth"});
|
||||
});
|
||||
|
||||
rmButton.addEventListener("click", () => {
|
||||
let id = lastOrderId();
|
||||
document.getElementById("order"+id).remove();
|
||||
if (id === 2)
|
||||
rmButton.classList.add("hide");
|
||||
document.querySelector("form").addEventListener("submit", () => {
|
||||
return lastOrderId();
|
||||
});
|
||||
|
|
|
|||
3
public/javascripts/admin/orders/edit.js
Normal file
3
public/javascripts/admin/orders/edit.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
for (let e of document.getElementById("orders").children) {
|
||||
e.querySelector("a").addEventListener("click", () => e.remove());
|
||||
}
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
document.querySelectorAll(".order form")
|
||||
.forEach(e => e.addEventListener("submit", ev => {
|
||||
document.querySelectorAll(".delete").forEach(e => e.addEventListener("click", ev => {
|
||||
if (!confirm("Do you really want to remove this ?"))
|
||||
ev.preventDefault();
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -18,8 +18,6 @@ document.getElementById("addOrder").addEventListener("click", () => {
|
|||
|
||||
let id = lastOrderId() + 1;
|
||||
|
||||
//ToDo submit button check
|
||||
|
||||
orders.insertAdjacentHTML("beforeend", `<div id="order${id}" class="row">
|
||||
<div class="input-field col s6">
|
||||
<input id="sandwich${id}" type="text" name="sandwiches[${id}]" value="${sandwich.value}" readonly required>
|
||||
|
|
|
|||
|
|
@ -1,56 +1,59 @@
|
|||
extends ../../layout
|
||||
|
||||
block content
|
||||
div.card
|
||||
span#dummy.hide=__("admin.given")
|
||||
div.container
|
||||
h1=__("admin.ordersManagement")
|
||||
form#order(method="POST")
|
||||
div.field
|
||||
label(for="department")=__("department") + ":"
|
||||
+list("department", "department-list", "department", "", "off", true)
|
||||
datalist#department-list
|
||||
div.row
|
||||
form#order.col.s12(method="POST")
|
||||
div.row
|
||||
div.input-field.col.s12
|
||||
select(name="department" required)
|
||||
option(value="" disabled selected hidden)=__("chooseDepartment")
|
||||
each department in departments
|
||||
option(value=department.name)
|
||||
option(value=department.name)=department.name
|
||||
label=__("department") + ":"
|
||||
|
||||
div.field
|
||||
label(for="firstname")=__("firstName") + ":"
|
||||
input#firstname(type="text" name="firstName" required)
|
||||
div.field
|
||||
label(for="lastname")=__("lastName") + ":"
|
||||
input#lastname(type="text" name="lastName" required)
|
||||
|
||||
div.field
|
||||
label(for="username")=__("username")
|
||||
+list("username", "usernames", "username", "", "off")
|
||||
|
||||
div#order1.order
|
||||
h2=__("order") + " 1"
|
||||
div.field
|
||||
label(for="sandwich1")=__("sandwich") + ":"
|
||||
+list("sandwich1", "sandwich-list", "sandwiches[1]", "", "off", true)
|
||||
div.field
|
||||
label(for="day1")=__("index.day") + ":"
|
||||
input#day1(type="date" name="dates[1]" required)
|
||||
div.field
|
||||
label(for="given1")=__("admin.given")
|
||||
input#given1(type="checkbox" name="give[1]")
|
||||
|
||||
div#order-action
|
||||
a#add-order +
|
||||
a#remove-order.hide -
|
||||
|
||||
div.field
|
||||
label(for="paid")=__("admin.paid")
|
||||
input#paid(type="checkbox" name="paid")
|
||||
|
||||
div.field
|
||||
input#send(type="submit" value=__("admin.add"))
|
||||
|
||||
datalist#sandwich-list
|
||||
each sandwich in sandwiches
|
||||
option(value=sandwich.name)
|
||||
datalist#usernames
|
||||
div.row
|
||||
div.input-field.col.s12
|
||||
select(name="username")
|
||||
option(value="" disabled selected hidden)=__("admin.chooseUser")
|
||||
each user in users
|
||||
option(value=user.username)
|
||||
option(value=user.username)=user.username
|
||||
label=__("username") + ":"
|
||||
|
||||
div.row
|
||||
div.input-field.col.s6
|
||||
input#firstname(type="text" name="firstName" required)
|
||||
label(for="firstname")=__("firstName") + ":"
|
||||
div.input-field.col.s6
|
||||
input#lastname(type="text" name="lastName" required)
|
||||
label(for="lastname")=__("lastName") + ":"
|
||||
|
||||
div#oderCreator.row
|
||||
h5=__("order")
|
||||
div.input-field.col.s6
|
||||
select#sandwich
|
||||
option(value="" disabled selected hidden)=__("index.chooseSandwich")
|
||||
each sandwich in sandwiches
|
||||
option(value=sandwich.name)=sandwich.name
|
||||
label=__("sandwich") + ":"
|
||||
div.input-field.col.s6
|
||||
input#day(type="date")
|
||||
label(for="day")=__("index.day") + ":"
|
||||
a#addOrder.btn-floating.btn-large.waves-effect.waves-light.blue: i.material-icons add
|
||||
|
||||
div#orders
|
||||
|
||||
div.row.center
|
||||
div.input-field.col.s12
|
||||
p
|
||||
label(for="paid")
|
||||
input#paid(type="checkbox" name="paid")
|
||||
span=__("admin.paid")
|
||||
|
||||
div.row.center
|
||||
div.input-field.col.s12
|
||||
+submit(__("admin.add"))
|
||||
|
||||
script(src="/javascripts/admin/orders/add.js")
|
||||
|
|
|
|||
|
|
@ -1,14 +1,17 @@
|
|||
extends ../../layout
|
||||
|
||||
block content
|
||||
div.card#ordersManagement
|
||||
div.container
|
||||
h1=__("admin.ordersDate")
|
||||
div.row
|
||||
form(action="/admin/orders/date" method="POST")
|
||||
div.field
|
||||
div.row
|
||||
div.input-field.col.s6
|
||||
label(for="firstDate")=__("admin.firstDate")
|
||||
input#firstDate(type="date" name="firstDate" value=date? date.firstDate: "" required)
|
||||
div.field
|
||||
div.input-field.col.s6
|
||||
label(for="lastDate")=__("admin.lastDate")
|
||||
input#lastDate(type="date" name="lastDate" value=date? date.lastDate: "" required)
|
||||
div.field
|
||||
input(type="submit" value=__("save"))
|
||||
div.row
|
||||
div.input-field.col.s12
|
||||
+submit(__("save"))
|
||||
|
|
|
|||
|
|
@ -1,63 +1,75 @@
|
|||
extends ../../layout
|
||||
|
||||
block content
|
||||
div.card
|
||||
div.container
|
||||
h1=__("admin.ordersManagement")
|
||||
form#order(method="POST")
|
||||
div.row
|
||||
form#order.col.s12(method="POST")
|
||||
input(type="hidden" name="id" value=order.id)
|
||||
div.field
|
||||
label(for="department")=__("department") + ":"
|
||||
+list("department", "department-list", "department", order.Department.name, "off", true)
|
||||
datalist#department-list
|
||||
div.row
|
||||
div.input-field.col.s12
|
||||
select(name="department" required)
|
||||
each department in departments
|
||||
option(value=department.name)
|
||||
option(value=department.name selected=order.Department.name === department.name)=department.name
|
||||
label=__("department") + ":"
|
||||
|
||||
div.field
|
||||
label(for="firstname")=__("firstName") + ":"
|
||||
div.row
|
||||
div.input-field.col.s12
|
||||
select(name="username")
|
||||
each user in users
|
||||
option(value=user.username selected=order.User && order.User.username === user.username)=user.username
|
||||
label=__("username") + ":"
|
||||
|
||||
div.row
|
||||
div.input-field.col.s6
|
||||
input#firstname(type="text" name="firstName" value=order.firstName required)
|
||||
div.field
|
||||
label(for="lastname")=__("lastName") + ":"
|
||||
label(for="firstname")=__("firstName") + ":"
|
||||
div.input-field.col.s6
|
||||
input#lastname(type="text" name="lastName" value=order.lastName required)
|
||||
label(for="lastname")=__("lastName") + ":"
|
||||
|
||||
div.field
|
||||
label(for="username")=__("username")
|
||||
+list("username", "usernames", "username", order.User ? order.User.username : "", "off")
|
||||
div#oderCreator.row
|
||||
h5=__("order")
|
||||
div.input-field.col.s6
|
||||
select#sandwich
|
||||
option(value="" disabled selected hidden)=__("index.chooseSandwich")
|
||||
each sandwich in sandwiches
|
||||
option(value=sandwich.name)=sandwich.name
|
||||
label=__("sandwich") + ":"
|
||||
div.input-field.col.s6
|
||||
input#day(type="date")
|
||||
label(for="day")=__("index.day") + ":"
|
||||
a#addOrder.btn-floating.btn-large.waves-effect.waves-light.blue: i.material-icons add
|
||||
|
||||
div#orders
|
||||
- i = 0;
|
||||
each sandwich in order.Sandwiches
|
||||
- i++;
|
||||
div.order(id="order"+i)
|
||||
h2=__("order") + " " + i
|
||||
div.field
|
||||
label(for="sandwich"+i)=__("sandwich") + ":"
|
||||
+list("#sandwich"+i, "sandwich-list", "sandwiches["+i+"]", sandwich.name, "off", true)
|
||||
div.field
|
||||
label(for="day"+i)=__("index.day") + ":"
|
||||
input(id="#day"+i type="date" name="dates["+i+"]" value=sandwich.SandwichOrder.date required)
|
||||
div.field
|
||||
label(for="given"+i)=__("admin.given")
|
||||
input(id="given"+i type="checkbox" name="give["+i+"]" checked=sandwich.SandwichOrder.give)
|
||||
div.row(id="order"+i)
|
||||
div.input-field.col.s6
|
||||
input(id="sandwich"+i type="text" name="sandwiches[#{i}]" value=sandwich.name readonly required)
|
||||
label(for="sandwich"+i)=__("sandwich")
|
||||
div.input-field.col.s6
|
||||
input(id="date"+i type="date" name="dates[#{i}]" value=sandwich.SandwichOrder.date readonly required)
|
||||
label(for="date"+i)=__("index.day")
|
||||
div.input-field.col.s12.center
|
||||
p
|
||||
label
|
||||
input(type="checkbox" name="give[#{i}]" checked=sandwich.SandwichOrder.give)
|
||||
span=__("admin.given")
|
||||
a.btn-floating.btn-large.waves-effect.waves-light.red
|
||||
i.material-icons remove
|
||||
|
||||
div#order-action
|
||||
a#add-order +
|
||||
if i > 1
|
||||
a#remove-order -
|
||||
else
|
||||
a#remove-order.hide -
|
||||
|
||||
div.field
|
||||
label(for="paid")=__("admin.paid")
|
||||
div.row.center
|
||||
div.input-field.col.s12
|
||||
p
|
||||
label(for="paid")
|
||||
input#paid(type="checkbox" name="paid" checked=order.paid)
|
||||
span=__("admin.paid")
|
||||
|
||||
div.field
|
||||
input#send(type="submit" value=__("save"))
|
||||
|
||||
datalist#sandwich-list
|
||||
each sandwich in sandwiches
|
||||
option(value=sandwich.name)
|
||||
datalist#usernames
|
||||
each user in users
|
||||
option(value=user.username)
|
||||
|
||||
div.row.center
|
||||
div.input-field.col.s12
|
||||
+submit(__("save"))
|
||||
|
||||
script(src="/javascripts/admin/orders/add.js")
|
||||
script(src="/javascripts/admin/orders/edit.js")
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
extends ../../layout
|
||||
|
||||
block content
|
||||
div.card#ordersManagement
|
||||
div.container
|
||||
h1=__("admin.ordersManagement")
|
||||
a.add(href="/admin/orders/add")
|
||||
button=__("admin.add")
|
||||
div
|
||||
ul.collection
|
||||
each order in orders
|
||||
div.order
|
||||
div.title
|
||||
h2=order.id
|
||||
h3 #{order.firstName} #{order.lastName} - #{order.price}€
|
||||
li.collection-item
|
||||
div #{order.id} | #{order.firstName} #{order.lastName} - #{order.price}€
|
||||
div.secondary-content
|
||||
a(href="/admin/orders/edit?id=" + order.id)
|
||||
i.material-icons edit
|
||||
a.delete(href="/admin/orders/delete?id=" + order.id)
|
||||
i.material-icons remove
|
||||
each sandwich in order.Sandwiches
|
||||
div.sandwich
|
||||
p #{sandwich.name} - #{sandwich.SandwichOrder.date}
|
||||
div.buttons
|
||||
a.edit(href="/admin/orders/edit?id=" + order.id)
|
||||
button=__("admin.edit")
|
||||
a.remove(href="/admin/orders/delete?id=" + order.id)
|
||||
button=__("admin.remove")
|
||||
|
||||
|
||||
div.fixed-action-btn
|
||||
a.btn-floating.btn-large.blue(href="/admin/orders/add")
|
||||
i.large.material-icons add
|
||||
|
||||
script(src="/javascripts/admin/orders/index.js")
|
||||
|
|
|
|||
Reference in a new issue