Skip to content
This repository has been archived by the owner on Apr 23, 2024. It is now read-only.

Commit

Permalink
feat: Add category & product edit forms (not functional)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JordanViknar
JordanViknar committed Apr 14, 2024
1 parent d9ea56f commit 669747b
Show file tree
Hide file tree
Showing 3 changed files with 174 additions and 4 deletions.
45 changes: 45 additions & 0 deletions public/css/admin_products.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,64 @@ img.category_button_image {

/* Product list */

div#product_list {
flex: 1 0 auto;
display: flex;
flex-direction: column;

width: 35%;
}

table#product_table {
border-collapse: collapse;
}

table#product_table th {
background-color: rgba(0, 0, 0, 0.5);
}

tr.product_row {
background-color: rgba(0, 0, 0, 0.2);
}

tr.product_row td {
padding: 1vw;

vertical-align: middle;
justify-content: center;
text-align: center
}

tr.product_row img {
max-height: 4vw;
max-width: 4vw;
}

/* Details zone */

div#details_zone {
flex: 1 1 auto;
}

div#details_zone * {
min-height: 100%;

display: flex;
flex-direction: column;
}

div#details_zone div#placeholder {
background-color: rgba(65, 12, 0, 0.311);
}
div#details_zone div#placeholder h2 {
margin: auto;
min-width: fit-content;
}

div#details_zone div#product_details {
background-color: rgba(0, 38, 65, 0.311);
}

div#details_zone div#category_details {
background-color: rgba(0, 65, 30, 0.311);
}
4 changes: 4 additions & 0 deletions public/css/application.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,10 @@ img {
max-height: 100%;
}

textarea {
font: inherit;
}

/* Navigation bar */

nav#navbar {
Expand Down
129 changes: 125 additions & 4 deletions resources/views/admin_products.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,83 @@
</tbody>
</table>
</div>
<div id="details">

<div id="details_zone">
<div id="placeholder">
<h2>Veuillez sélectionner une catégorie ou un produit.</h2>
</div>

<div id="product_details" class="hidden">
<form action="/admin/product/update" method="post" >
@csrf
<!-- Nom -->
<div class="product_details_field">
<label for="name">Nom :</label>
<input type="text" id="product_name" name="name" required/>
</div>

<!-- Icône -->
<div class="product_details_field">
<label for="icon_data">Icône :</label>
<input type="text" id="product_icon" name="icon_data" required/>
</div>

<!-- Description -->
<div class="product_details_field">
<label for="description">Description :</label>
<textarea name="description" id="product_description" maxlength="1000" required></textarea>
</div>

<!-- Amount -->
<div class="product_details_field">
<label for="amount">Quantité :</label>
<input type="number" id="product_amount" name="amount" min=0 required/>
</div>

<!-- Price -->
<div class="product_details_field">
<label for="price">Prix :</label>
<input type="number" id="product_price" name="price" step=0.01 min=0 required/>
</div>

<!-- Submit -->
<div class="product_details_field">
<input type="submit" value="Enregistrer"/>
</div>
</form>
</div>

<div id="category_details" class="hidden">
<form action="/admin/category/update" method="post" >
@csrf

<input type="hidden" id="category_id" name="id"/>

<!-- Name -->
<div class="product_details_field">
<label for="name">Nom :</label>
<input type="text" id="category_name" name="name" required/>
</div>

<!-- Icon -->
<div class="product_details_field">
<label for="icon_data">Icône :</label>
<input type="text" id="category_icon" name="icon_data" required/>
</div>

<!-- Submit -->
<div class="product_details_field">
<input type="submit" value="Enregistrer"/>
</div>
</form>
</div>
</div>
</div>

<script type="text/javascript">
let product_table_list_container = document.getElementById('product_table_list_container');
const product_table_list_container = document.getElementById('product_table_list_container');
// Workaround to pass the product object to the onclick in loaded products
let current_product_list = [];
function loadCategoryProducts(category) {
fetch("/admin/product/get", {
Expand All @@ -48,8 +118,9 @@ function loadCategoryProducts(category) {
})
.then(response => response.json())
.then(products => {
// Empty the table
// Empty the table and list
product_table_list_container.innerHTML = "";
current_product_list = [];
products.forEach(product => {
const product_name = product.name.charAt(0).toUpperCase() + product.name.slice(1)
Expand All @@ -62,8 +133,58 @@ function loadCategoryProducts(category) {
<td>${product.unit_price}€</td>
</tr>
`;
current_product_list[product.id] = product;
});
// Show the category details
showCategory(category);
});
}
const placeholder = document.getElementById('placeholder');
const category_details = document.getElementById('category_details');
const product_details = document.getElementById('product_details');
// Fields
const product_id = document.getElementById('product_id');
const product_name = document.getElementById('product_name');
const product_icon = document.getElementById('product_icon');
const product_description = document.getElementById('product_description');
const product_amount = document.getElementById('product_amount');
const product_price = document.getElementById('product_price');
function showProduct(product_id) {
const product = current_product_list[product_id];
// Swap views
placeholder.classList.add('hidden');
category_details.classList.add('hidden');
product_details.classList.remove('hidden');
// Set values
product_name.value = product.name;
product_icon.value = product.icon;
product_description.value = product.description;
product_amount.value = product.amount;
product_price.value = product.unit_price;
}
// Fields
const category_id = document.getElementById('category_id');
const category_name = document.getElementById('category_name');
const category_icon = document.getElementById('category_icon');
function showCategory(category) {
// Swap views
placeholder.classList.add('hidden');
product_details.classList.add('hidden');
category_details.classList.remove('hidden');
// Set values
category_name.value = category.name;
category_icon.value = category.icon;
category_id.value = category.id;
}
</script>
</div>

0 comments on commit 669747b

Please sign in to comment.