Skip to content

Commit

Permalink
Rewrite VueJS to use script module type (#497)
Browse files Browse the repository at this point in the history 
* Rewrite VueJS to use script module type

* Use window property for global variables
  • Loading branch information
@KiOui
KiOui authored Sep 7, 2023
1 parent 926ba6a commit 1af9673
Show file tree
Hide file tree
Showing 11 changed files with 188 additions and 163 deletions.
70 changes: 36 additions & 34 deletions website/orders/templates/orders/order_admin_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@
<transition-group name="orders-scanned-list" tag="ul" class="item-orders">
<li v-for="(order, index) in orders_scanned" :key="`order_scanned_${order.id}`" class="pt-2 pb-2 item-list">
<div class="information-row">
<p class="item-counter"><% index + 1 %>.</p>
<p class="item-name"><% order.product.name %> (€<% (Math.round(order.order_price * 100) /
100).toFixed(2) %>)</p>
<p class="item-counter">${ index + 1 }$.</p>
<p class="item-name">${ order.product.name }$ (€${ (Math.round(order.order_price * 100) /
100).toFixed(2) }$)</p>
<i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} item-icon`"></i>
<div class="flex-divider"></div>
<i class="item-username fa-solid fa-desktop"></i>
Expand All @@ -64,7 +64,7 @@
{% include 'orders/order_admin_order.html' %}
</li>
</transition-group>
<div v-else id="outer" class="container d-flex align-items-center justify-content-center text-center"
<div v-if="orders_finished.length === 0" id="outer" class="container d-flex align-items-center justify-content-center text-center"
style="height:200px;">
<div id="inner">
No finished orders yet...
Expand All @@ -76,28 +76,28 @@
<h3>Orders to make</h3>
<template v-if="Object.keys(orders_to_make_grouped).length > 0">
<p v-for="(product_dict, product_name) in orders_to_make_grouped" class="mb-2" style="font-size: 1em;">
<% product_dict.product.name %> <i :class="`fa-solid fa-${product_dict.product.icon}`"></i>
&times; <% product_dict.amount %></p>
${ product_dict.product.name }$ <i :class="`fa-solid fa-${product_dict.product.icon}`"></i>
&times; ${ product_dict.amount }$</p>
</template>
<template v-else>
<p class="mb-2" style="font-size: 1em;">No open products.</p>
</template>
<hr>
<h3 class="mt-3">Orders ready</h3>
<template v-if="Object.keys(orders_ready_grouped).length > 0">
<p v-for="(product_dict, product_name) in orders_ready_grouped" class="mb-2" style="font-size: 1em;"><%
product_dict.product.name %> <i :class="`fa-solid fa-${product_dict.product.icon}`"></i> &times;
<% product_dict.amount %></p>
<p v-for="(product_dict, product_name) in orders_ready_grouped" class="mb-2" style="font-size: 1em;">${
product_dict.product.name }$ <i :class="`fa-solid fa-${product_dict.product.icon}`"></i> &times;
${ product_dict.amount }$</p>
</template>
<template v-else>
<p class="mb-2" style="font-size: 1em;">No ready products.</p>
</template>
<hr>
<h3 class="mt-3">Orders total</h3>
<template v-if="Object.keys(orders_grouped).length > 0">
<p v-for="(product_dict, product_name) in orders_grouped" class="mb-2" style="font-size: 1em;"><%
product_dict.product.name %> <i :class="`fa-solid fa-${product_dict.product.icon}`"></i> &times;
<% product_dict.amount %></p>
<p v-for="(product_dict, product_name) in orders_grouped" class="mb-2" style="font-size: 1em;">${
product_dict.product.name }$ <i :class="`fa-solid fa-${product_dict.product.icon}`"></i> &times;
${ product_dict.amount }$</p>
</template>
<template v-else>
<p class="mb-2" style="font-size: 1em;">No products.</p>
Expand Down Expand Up @@ -128,16 +128,18 @@ <h3 class="mt-3">Orders total</h3>
}
</style>

<script>
let orders_vue_{{ shift.id }} = new Vue({
el: '#item-orders-{{ shift.id }}',
delimiters: ['<%', '%>'],
data: {
orders: [],
shift: {},
products: [],
user: null,
addingOrder: false,
<script type="module">
import { createApp } from 'vue';
window.orders_vue_{{ shift.id }} = createApp({
delimiters: ['${', '}$'],
data() {
return {
orders: [],
shift: {},
products: [],
user: null,
addingOrder: false,
}
},
created() {
fetch('{% url "v1:me" %}')
Expand Down Expand Up @@ -174,27 +176,27 @@ <h3 class="mt-3">Orders total</h3>
}
},
computed: {
user_orders: function() {
user_orders() {
let userCopy = this.user;
return this.orders.filter(function(order) {
return userCopy === null || (order.user !== null && order.user.id === userCopy.id);
});
},
user_orders_with_shift_restrictions: function() {
user_orders_with_shift_restrictions() {
let userCopy = this.user;
return this.orders.filter(function(order) {
return userCopy === null || (order.user !== null && order.user.id === userCopy.id && !order.product.ignore_shift_restrictions);
});
},
orders_with_shift_restrictions: function() {
orders_with_shift_restrictions() {
return this.orders.filter(function(order) {
return !order.product.ignore_shift_restrictions;
});
},
orders_to_make: function() {
orders_to_make() {
return this.orders.filter(order => !order.ready);
},
orders_to_make_grouped: function () {
orders_to_make_grouped() {
let orders_to_make = {};
this.orders_to_make.forEach(order => {
if (order.product.name in orders_to_make) {
Expand All @@ -205,10 +207,10 @@ <h3 class="mt-3">Orders total</h3>
});
return orders_to_make;
},
orders_ready: function() {
orders_ready() {
return this.orders.filter(order => order.ready);
},
orders_ready_grouped: function () {
orders_ready_grouped() {
let orders_ready = {};
this.orders_ready.forEach(order => {
if (order.product.name in orders_ready) {
Expand All @@ -219,7 +221,7 @@ <h3 class="mt-3">Orders total</h3>
});
return orders_ready;
},
orders_grouped: function () {
orders_grouped() {
let orders_total = {};
this.orders.forEach(order => {
if (order.product.name in orders_total) {
Expand All @@ -230,13 +232,13 @@ <h3 class="mt-3">Orders total</h3>
});
return orders_total;
},
orders_finished: function() {
orders_finished() {
return this.orders.filter(order => order.ready && order.paid && order.type !== 1);
},
orders_to_process: function() {
orders_to_process() {
return this.orders.filter(order => !order.ready || !order.paid && order.type !== 1);
},
orders_scanned: function() {
orders_scanned() {
return this.orders.filter(order => order.type === 1);
}
},
Expand Down Expand Up @@ -373,7 +375,7 @@ <h3 class="mt-3">Orders total</h3>
}
}
}
});
}).mount('#item-orders-{{ shift.id }}');

function process_refreshed_order_data(data) {
orders_vue_{{ shift.id }}.orders = data;
Expand Down
8 changes: 4 additions & 4 deletions website/orders/templates/orders/order_admin_order.html
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<ul class="row w-100">
<div class="col-auto d-inline-flex">
<p class="item-counter"><% index + 1 %>.</p>
<p class="item-name"><% order.product.name %> (€<% (Math.round(order.order_price * 100) /
100).toFixed(2) %>)</p>
<p class="item-counter">${ index + 1 }$.</p>
<p class="item-name">${ order.product.name }$ (€${ (Math.round(order.order_price * 100) /
100).toFixed(2) }$)</p>
<i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} item-icon`"></i>
</div>
<div class="col d-inline-flex" style="min-width: 0">
<div class="ms-auto"></div>
<p v-if="order.user !== null" class="text-truncate" style="min-width: 0">
<i v-if="order.user !== null && {{ user.id }} === order.user.id"
class="fa-solid fa-user fa-xs"></i>
<% order.user.first_name %> <% order.user.last_name %>
${ order.user.first_name }$ ${ order.user.last_name }$
</p>
<p><a target="_blank" :href="`{% url 'admin:orders_order_changelist' %}${order.id}/change/`"><i class="fa-solid fa-pen-to-square fa-xs text-white"></i></a></p>
</div>
Expand Down
42 changes: 22 additions & 20 deletions website/orders/templates/orders/order_list.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@
<div v-if="!shift.finalized && shift.can_order && shift.is_active">
<h5>Place your order:</h5>
<div class="row row-cols-2 row-cols-md-4 justify-content-center align-items-stretch">
<div class="col mb-3 d-flex justify-content-center align-items-stretch" v-for="product in products">
<div v-for="product in products" class="col mb-3 d-flex justify-content-center align-items-stretch">
<div class="flex-grow-1">
<button class="btn btn-lg btn-ml m-auto cursor-pointer btn-on d-flex flex-column align-items-center" style="border-radius: 0; max-width: unset;"
:class="{ disabled: addingOrder || orders.length >= shift.max_orders_total || user_orders_with_shift_restrictions.length >= shift.max_orders_per_user && !product.ignore_shift_restrictions || product.max_allowed_per_shift !== null && user_orders_with_product_id(product.id).length >= product.max_allowed_per_shift }"
v-on:click="add_order(product)"
>
<span :class="{ invisible: addingOrder }"><i v-if="product.icon !== null" :class="`fa-solid fa-${product.icon} me-2`"></i></span>
<span :class="{ invisible: addingOrder }">Order <% product.name %></span>
<span class="small" :class="{ invisible: addingOrder }"><% format_price(product.current_price) %></span>
<span :class="{ invisible: addingOrder }">Order ${ product.name }$</span>
<span class="small" :class="{ invisible: addingOrder }">${ format_price(product.current_price) }$</span>
</button>
<div class="card-footer rounded-bottom text-center"
v-if="orders.length >= shift.max_orders_total || user_orders_with_shift_restrictions.length >= shift.max_orders_per_user && !product.ignore_shift_restrictions || product.max_allowed_per_shift !== null && user_orders_with_product_id(product.id).length >= product.max_allowed_per_shift"
Expand Down Expand Up @@ -47,8 +47,8 @@ <h5>Place your order:</h5>
<transition-group name="orderlist" tag="ul" class="item-orders">
<li v-for="(order, index) of orders" :key="`orderlist_order_${order.id}`" class="pt-2 pb-2 item-list" :class="{ 'user-order-background': (order.user !== null && {{ user.id }} === order.user.id)}">
<div class="information-row">
<p class="item-counter"><% index + 1 %>.</p>
<p class="item-name"><% order.product.name %> (<% format_price(order.order_price) %>)</p>
<p class="item-counter">${ index + 1 }$.</p>
<p class="item-name">${ order.product.name }$ (${ format_price(order.order_price) }$)</p>
<i v-if="order.product.icon !== null" :class="`fa-solid fa-${order.product.icon} item-icon`"></i>
<div>
<span v-if="!order.paid && order.user !== null && {{ user.id }} === order.user.id" class="badge rounded-pill bg-danger" style="max-height: fit-content;">Not paid</span>
Expand All @@ -58,7 +58,7 @@ <h5>Place your order:</h5>
<i v-if="order.user !== null && {{ user.id }} === order.user.id && order.deprioritize === false"
class="fa-solid fa-arrow-down-short-wide" style="font-size: 1.5em; cursor: pointer;" v-on:click="order_to_bottom_of_list(order)"></i>
<p v-if="order.type === 0" class="item-username">
<template v-if="order.user !== null"><% order.user.first_name %></template>
<template v-if="order.user !== null">${ order.user.first_name }$</template>
</p>
<i v-else class="item-username fa-solid fa-desktop"></i>
</div>
Expand Down Expand Up @@ -95,16 +95,18 @@ <h5>Place your order:</h5>
}
</style>

<script>
let orders_vue_{{ shift.id }} = new Vue({
el: '#item-orders-{{ shift.id }}',
delimiters: ['<%', '%>'],
data: {
orders: [],
shift: {},
products: [],
user: null,
addingOrder: false,
<script type="module">
import { createApp } from 'vue';
let orders_vue_{{ shift.id }} = createApp({
delimiters: ['${', '}$'],
data() {
return {
orders: [],
shift: {},
products: [],
user: null,
addingOrder: false,
}
},
watch: {
shift: {
Expand All @@ -127,19 +129,19 @@ <h5>Place your order:</h5>
add_refresh_url("{% url "v1:shift_retrieveupdate" pk=shift.id %}", process_shift_data);
},
computed: {
user_orders: function() {
user_orders() {
let userCopy = this.user;
return this.orders.filter(function(order) {
return userCopy === null || (order.user !== null && order.user.id === userCopy.id);
});
},
user_orders_with_shift_restrictions: function() {
user_orders_with_shift_restrictions() {
let userCopy = this.user;
return this.orders.filter(function(order) {
return userCopy === null || (order.user !== null && order.user.id === userCopy.id && !order.product.ignore_shift_restrictions);
});
},
orders_with_shift_restrictions: function() {
orders_with_shift_restrictions() {
return this.orders.filter(function(order) {
return !order.product.ignore_shift_restrictions;
});
Expand Down Expand Up @@ -238,7 +240,7 @@ <h5>Place your order:</h5>
}
},
}
});
}).mount('#item-orders-{{ shift.id }}');

function process_refreshed_order_data(data) {
data = data.filter(order => order.type === 0);
Expand Down
18 changes: 10 additions & 8 deletions website/orders/templates/orders/shift_admin_footer.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,15 @@
</footer>
</div>

<script>
let admin_footer_vue_{{ shift.id }} = new Vue({
el: '#admin-footer-wrapper-{{ shift.id }}',
delimiters: ['<%', '%>'],
data: {
orders: [],
shift: {},
<script type="module">
import { createApp } from 'vue';
window.admin_footer_vue_{{ shift.id }} = createApp({
delimiters: ['${', '}$'],
data() {
return {
orders: [],
shift: {},
}
},
created() {
fetch('{% url "v1:orders_listcreate" shift=shift %}')
Expand Down Expand Up @@ -242,7 +244,7 @@
}
}
}
});
}).mount('#admin-footer-wrapper-{{ shift.id }}');

function process_refresh_order_footer_data(data) {
admin_footer_vue_{{ shift.id }}.orders = data;
Expand Down
26 changes: 15 additions & 11 deletions website/orders/templates/orders/shift_admin_scanner.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
<template v-if="search_input !== ''">
<div v-if="search_results.length > 0" class="py-3" id="search-results">
<div v-for="product in search_results" class="search-item pb-2">
<p class="search-item-name"><% product.name %></p>
<p class="search-item-price"><% format_price(product.current_price) %></p>
<p class="search-item-name">${ product.name }$</p>
<p class="search-item-price">${ format_price(product.current_price) }$</p>
<input type="button" class="btn btn-success" v-on:click="add_order(product)" value="Add"/>
</div>
</div>
Expand Down Expand Up @@ -48,14 +48,18 @@

<script>
const POPUP_MODAL_ID = "scanner-popup";
let scanner_vue = new Vue({
el: '#scanner-wrapper-{{ shift.id }}',
delimiters: ['<%', '%>'],
data: {
shift: {},
search_results: [],
search_input: "",
typing_timer: null,
</script>
<script type="module">
import { createApp } from 'vue';
window.scanner_vue = createApp({
delimiters: ['${', '}$'],
data() {
return {
shift: {},
search_results: [],
search_input: "",
typing_timer: null,
}
},
watch: {
search_input: {
Expand Down Expand Up @@ -157,7 +161,7 @@
}).catch(error => show_error_from_api(error));
}
}
});
}).mount('#scanner-wrapper-{{ shift.id }}');

function process_refresh_scanner_data(data) {
scanner_vue.shift = data;
Expand Down
Loading

0 comments on commit 1af9673

Please sign in to comment.