Changeset 591278c for interfejs/store-owner.html

Timestamp:

02/22/26 17:24:14 (7 months ago)

Author:

Klimentina Efremova <klimentina08642@…>

Branches:

finki-main, main

Children:

4dff800

Parents:

69f2a41

Message:

Fixed Product and Category adding

File:

• interfejs/store-owner.html (modified) (20 diffs)

interfejs/store-owner.html

@@ -151 +151 @@
                     </select>
                 </div>
+
                 <div id="custom-date-range" style="display: none;">
                     <div class="form-row">
@@ -163 +164 @@
                     </div>
                 </div>
+
                 <div class="form-group">
                     <label for="report-type">Report Type</label>
@@ -172 +174 @@
                     </select>
                 </div>
+
                 <button id="generate-store-report" class="btn-primary">Generate Report</button>
+
                 <div id="report-results" style="margin-top: 2rem;"></div>
             </div>
@@ -214 +218 @@
                             <input type="number" id="product-production-time" min="1" required>
                         </div>
-                        <div class="form-group">
+                        <div class="form-group category-group">
                             <label for="product-category">Category *</label>
-                            <select id="product-category" required>
-                                <option value="">Select Category</option>
-                            </select>
+                            <div class="category-input-group">
+                                <select id="product-category" required>
+                                    <option value="">Select Category</option>
+                                </select>
+                                <button type="button" id="add-category-btn" class="btn-small btn-secondary">➕ New Category</button>
+                            </div>
                         </div>
                     </div>
@@ -286 +293 @@
 </main>
 
+<!-- Edit Product Modal -->
 <div id="edit-product-modal" class="modal" style="display: none;">
     <div class="modal-content modal-large">
@@ -325 +333 @@
                     <input type="number" id="edit-product-production-time" min="1">
                 </div>
-                <div class="form-group">
+                <div class="form-group category-group">
                     <label for="edit-product-category">Category</label>
-                    <select id="edit-product-category">
-                        <option value="">Select Category</option>
-                    </select>
+                    <div class="category-input-group">
+                        <select id="edit-product-category">
+                            <option value="">Select Category</option>
+                        </select>
+                        <button type="button" id="edit-add-category-btn" class="btn-small btn-secondary">➕ New Category</button>
+                    </div>
                 </div>
             </div>
@@ -348 +359 @@
 </div>
 
+<!-- Edit Employee Modal -->
 <div id="edit-employee-modal" class="modal" style="display: none;">
     <div class="modal-content">
@@ -381 +393 @@
 
             <button type="submit" class="btn-primary">Update Employee</button>
+        </form>
+    </div>
+</div>
+
+<!-- Add Category Modal -->
+<div id="add-category-modal" class="modal" style="display: none;">
+    <div class="modal-content">
+        <span class="close">&times;</span>
+        <h2>Create New Category</h2>
+        <form id="add-category-form" class="form">
+            <div class="form-group">
+                <label for="category-name">Category Name *</label>
+                <input type="text" id="category-name" required>
+            </div>
+
+            <div class="form-group">
+                <label for="category-description">Description</label>
+                <textarea id="category-description" rows="3" placeholder="Optional description"></textarea>
+            </div>
+
+            <div class="form-group">
+                <label for="category-parent">Parent Category (optional)</label>
+                <select id="category-parent">
+                    <option value="">None (Top Level Category)</option>
+                </select>
+            </div>
+
+            <button type="submit" class="btn-primary">Create Category</button>
+            <button type="button" id="cancel-category-btn" class="btn-secondary">Cancel</button>
         </form>
     </div>
@@ -408 +449 @@
     document.addEventListener('DOMContentLoaded', async () => {
         const user = await loadUserData();
+
         if (!user || user.userType !== 'store_owner') {
             window.location.href = 'index.html';
@@ -464 +506 @@
         // Generate report
         document.getElementById('generate-store-report').addEventListener('click', generateStoreReport);
+
+        // Add Category button functionality
+        document.getElementById('add-category-btn').addEventListener('click', () => {
+            openCategoryModal();
+        });
+
+        document.getElementById('edit-add-category-btn').addEventListener('click', () => {
+            openCategoryModal('edit');
+        });
+
+        // Category form submission
+        document.getElementById('add-category-form').addEventListener('submit', createCategory);
+
+        // Cancel button
+        document.getElementById('cancel-category-btn').addEventListener('click', () => {
+            document.getElementById('add-category-modal').style.display = 'none';
+        });
     });
 
@@ -499 +558 @@
             const response = await fetch(`/api/store-products?storeId=${storeId}`);
             const data = await response.json();
-
             const tbody = document.getElementById('products-list');
+
             if (data.success && data.products.length > 0) {
                 tbody.innerHTML = data.products.map(product => `
@@ -528 +587 @@
             const response = await fetch(`/api/store-orders?storeId=${storeId}`);
             const data = await response.json();
-
             const tbody = document.getElementById('orders-list');
+
             if (data.success && data.orders.length > 0) {
                 tbody.innerHTML = data.orders.map(order => {
@@ -560 +619 @@
             const response = await fetch(`/api/store-employees?storeId=${storeId}`);
             const data = await response.json();
-
             const tbody = document.getElementById('employees-list');
+
             if (data.success && data.employees.length > 0) {
                 tbody.innerHTML = data.employees.map(emp => `
@@ -592 +651 @@
             if (data.success) {
                 const options = data.categories.map(cat =>
+                    `<option value="${cat.category_id}">${cat.name}${cat.parent_name ? ` (subcategory of ${cat.parent_name})` : ''}</option>`
+                ).join('');
+
+                document.getElementById('product-category').innerHTML = '<option value="">Select Category</option>' + options;
+                document.getElementById('edit-product-category').innerHTML = '<option value="">Select Category</option>' + options;
+
+                // Also load for category parent dropdown
+                const parentOptions = data.categories.map(cat =>
                     `<option value="${cat.category_id}">${cat.name}</option>`
                 ).join('');
-
-                document.getElementById('product-category').innerHTML = '<option value="">Select Category</option>' + options;
-                document.getElementById('edit-product-category').innerHTML = '<option value="">Select Category</option>' + options;
+                document.getElementById('category-parent').innerHTML = '<option value="">None (Top Level Category)</option>' + parentOptions;
             }
         } catch (error) {
             console.error('Error loading categories:', error);
+        }
+    }
+
+    function openCategoryModal(source = 'add') {
+        // Store which form triggered this
+        document.getElementById('add-category-modal').dataset.source = source;
+        document.getElementById('add-category-modal').style.display = 'block';
+        document.getElementById('add-category-form').reset();
+    }
+
+    async function createCategory(e) {
+        e.preventDefault();
+
+        const categoryName = document.getElementById('category-name').value.trim();
+        const categoryDescription = document.getElementById('category-description').value.trim();
+        const parentId = document.getElementById('category-parent').value;
+
+        if (!categoryName) {
+            alert('Please enter a category name');
+            return;
+        }
+
+        const categoryData = {
+            name: categoryName,
+            description: categoryDescription,
+            parentId: parentId || null
+        };
+
+        try {
+            const response = await fetch('/api/create-category', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(categoryData)
+            });
+
+            const data = await response.json();
+
+            if (data.success) {
+                alert(`Category "${categoryName}" created successfully!`);
+                document.getElementById('add-category-modal').style.display = 'none';
+
+                // Reload categories in all dropdowns
+                await loadCategories();
+
+                // Auto-select the new category if it came from add product form
+                const source = document.getElementById('add-category-modal').dataset.source;
+                if (source === 'edit') {
+                    document.getElementById('edit-product-category').value = data.category.id;
+                } else {
+                    document.getElementById('product-category').value = data.category.id;
+                }
+            } else {
+                alert(data.message || 'Failed to create category');
+            }
+        } catch (error) {
+            console.error('Error creating category:', error);
+            alert('An error occurred while creating the category');
         }
     }
@@ -607 +729 @@
 
         const storeId = document.getElementById('store-select').value;
+
         if (!storeId) {
             alert('Please select a store first');
@@ -679 +802 @@
 
         const storeId = document.getElementById('store-select').value;
+
         if (!storeId) {
             alert('Please select a store first');
@@ -686 +810 @@
         const password = document.getElementById('employee-password').value;
         const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
+
         if (!passwordRegex.test(password)) {
             alert('Password must have at least 8 characters, including uppercase, lowercase, number and special character');
@@ -762 +887 @@
 
         const storeId = document.getElementById('store-select').value;
+
         const formData = {
             code: document.getElementById('edit-product-code').value,
@@ -860 +986 @@
 
         const storeId = document.getElementById('store-select').value;
+
         const formData = {
             employeeId: document.getElementById('edit-employee-id').value,
@@ -897 +1024 @@
 
         let startDate, endDate;
+
         if (period === 'custom') {
             startDate = document.getElementById('report-start').value;
             endDate = document.getElementById('report-end').value;
+
             if (!startDate || !endDate) {
                 alert('Please select start and end dates');