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

Commit

Permalink
refactor: admin_products.js refactoring
Browse files Browse the repository at this point in the history
  • Loading branch information
@JordanViknar
JordanViknar committed Apr 15, 2024
1 parent 372a1e8 commit 74a9d3d
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 66 deletions.
117 changes: 56 additions & 61 deletions public/js/admin_products.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,28 @@ const csrf_token = document.querySelector('meta[name="csrf-token"]').getAttribut

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 = [];
const placeholder = document.getElementById('placeholder');
const category_details = document.getElementById('category_details');
const product_details = document.getElementById('product_details');

const product_form = document.getElementById('product_form');
const category_form = document.getElementById('category_form');

// 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');
const delete_product_div = document.getElementById('delete_product_div');

const category_id = document.getElementById('category_id');
const category_name = document.getElementById('category_name');
const category_icon = document.getElementById('category_icon');

const delete_category_div = document.getElementById('delete_category_div');
const add_product_button = document.getElementById('add_product_button');

function loadCategoryProducts(category) {
fetch("/admin/product/get", {
Expand All @@ -18,58 +38,43 @@ function loadCategoryProducts(category) {
"category": category.id
})
})
.then(response => response.json())
.then(products => {
// 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)
product_table_list_container.innerHTML += `
<tr onclick="showProduct(${product.id})" class="product_row">
<td>${product.id}</td>
<td><img src="/product/${product.icon}" alt="icon" class="product_icon"/></td>
<td>${product_name}</td>
<td>${product.amount}</td>
<td>${product.unit_price}€</td>
</tr>
`;

current_product_list[product.id] = product;
});

// Show the category details
showCategory(category);
.then(response => response.json())
.then(products => {
// Empty the table and list
product_table_list_container.innerHTML = "";

products.forEach(product => {
const product_name = product.name.charAt(0).toUpperCase() + product.name.slice(1);
const tr = document.createElement('tr');
tr.classList.add('product_row');
tr.onclick = () => showProduct(product); // Set onclick handler

tr.innerHTML = `
<td>${product.id}</td>
<td><img src="/product/${product.icon}" alt="icon" class="product_icon"/></td>
<td>${product_name}</td>
<td>${product.amount}</td>
<td>${product.unit_price}€</td>
`;

product_table_list_container.appendChild(tr);
});
}

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');

const delete_product_div = document.getElementById('delete_product_div');

const product_form = document.getElementById('product_form');
// Show the category details
showCategory(category);
});
}

function showProduct(product_id) {
product_form.action = `/admin/product/update`
function showProduct(product) {
product_form.action = `/admin/product/update`;

// Swap views
placeholder.classList.add('hidden');
category_details.classList.add('hidden');
product_details.classList.remove('hidden');

const product = current_product_list[product_id];
// Set values
product_id.value = product.id;
product_name.value = product.name;
// product_icon.value = product.icon;
product_description.value = product.description;
Expand All @@ -78,8 +83,8 @@ function showProduct(product_id) {

// Delete button
delete_product_div.innerHTML = `
<button onclick="deleteProduct(${product_id})">Supprimer</button>
`;
<button onclick="deleteProduct(${product.id})">Supprimer</button>
`;
}

function showAddProduct() {
Expand Down Expand Up @@ -114,19 +119,9 @@ function deleteProduct(product_id) {
"id": product_id
})
})
.then(response => location.reload()); // Reload the page
.then(response => location.reload()); // Reload the page
}

// Fields
const category_id = document.getElementById('category_id');
const category_name = document.getElementById('category_name');
const category_icon = document.getElementById('category_icon');

const delete_category_div = document.getElementById('delete_category_div');

const category_form = document.getElementById('category_form');
const add_product_button = document.getElementById('add_product_button');

function showCategory(category) {
category_form.action = "/admin/category/update";
add_product_button.classList.remove('hidden');
Expand All @@ -137,14 +132,14 @@ function showCategory(category) {
category_details.classList.remove('hidden');

// Set values
category_id.value = category.id;
category_name.value = category.name;
// category_icon.value = category.icon;
category_id.value = category.id;

// Delete button
delete_category_div.innerHTML = `
<button onclick="deleteCategory(${category.id})">Supprimer</button>
`;
<button onclick="deleteCategory(${category.id})">Supprimer</button>
`;
}

function deleteCategory(category_id) {
Expand Down Expand Up @@ -178,4 +173,4 @@ function showAddCategory() {

// Delete button
delete_category_div.innerHTML = "";
}
}
6 changes: 3 additions & 3 deletions public/js/admin_users.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// Seach system
document.querySelector('.search_input').addEventListener('input', function() {
var searchValue = this.value.toLowerCase();
var rows = document.querySelectorAll('#user_table tbody tr');
let searchValue = this.value.toLowerCase();
let rows = document.querySelectorAll('#user_table tbody tr');
rows.forEach(function(row) {
var userName = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
let userName = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
if (userName.indexOf(searchValue) > -1) {
row.style.display = '';
} else {
Expand Down
4 changes: 2 additions & 2 deletions resources/views/admin_products.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</div>

<div id="product_details" class="hidden">
<form id="product_form" action="/admin/product/update" method="post" >
<form id="product_form" method="post" >
@csrf

<input type="hidden" id="product_id" name="id"/>
Expand Down Expand Up @@ -78,7 +78,7 @@
</div>

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

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

0 comments on commit 74a9d3d

Please sign in to comment.