@gnar-engine/cli 1.0.3 → 1.0.4

package/bootstrap/services/portal/src/features/crudProducts/CrudProductSingle.jsx

@@ -1,388 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import CustomSelect from '../../ui/customSelect/CustomSelect';
-import CustomMultiSelect from '../../ui/customMultiSelect/CustomMultiSelect';
-import gnarEngine from '@gnar-engine/js-client';
-import SaveButton from '../../ui/saveButton/SaveButton';
-import Repeater from '../../ui/repeater/Repeater';
-import arrow from '../../assets/arrow.svg';
-import { productStatuses, taxClasses, productCategories } from '../../data/data';
-import Skus from '../skus/Skus';
-import TaxonomyFormRow from '../taxonomyFormRow/TaxonomyFormRow';
-
-
-
-const CrudProductSingle = ({product, setProduct, setView, loading, setLoading, refreshSelectedProduct, fetchProducts, setSelectedSingleItemId, formatDate}) => {
-
-    const [formData, setFormData] = useState({
-        name: '',
-        description: '',
-        categories: [],
-        status: '',
-        skus: [{}]
-    });
-    const [validationErrors, setValidationErrors] = useState([]);
-    const [selectedAction, setSelectedAction] = useState(null);
-    const [productStatus, setProductStatus] = useState(null);
-    const [productTaxClass, setProductTaxClass] = useState(null);
-    const [prices, setPrices] = useState([]);
-    const [inventories, setInventories] = useState([]);
-    const [attributes, setAttributes] = useState([]);
-    const [selectedCategories, setSelectedCategories] = useState([]);
-
-    // prepare form data for editing existing product
-    useEffect(() => {
-        console.log('product:', product);
-        
-        if (product && product._id) {
-            setFormData({
-                name: product.name || '',
-                description: product.description || '',
-                skus: product.skus?.length ? product.skus : [],
-            });
-
-            // Set product status
-            const existingStatus = productStatuses.find(status => status.id === product.status);
-            setProductStatus(existingStatus || null);
-
-            // iterate through each skus and set taxClass
-            product.skus.forEach(sku => {
-                const existingTaxClass = taxClasses.find(taxClass => taxClass.id === sku.taxClass);
-                setProductTaxClass(existingTaxClass || null);
-            });
-
-            // Set product categories
-            const newSelectedCategories = []; 
-
-            if (Array.isArray(product.categories) && product.categories.length > 0) {
-                product.categories.forEach(category => {
-                    const selectedCategory = productCategories.find(cat => cat.id === category);
-                    if (selectedCategory) {
-                        newSelectedCategories.push(selectedCategory);
-                    }
-                });
-            }
-
-            setSelectedCategories(newSelectedCategories);
-
-            // iterate through each skus and then iterate through each prices
-            const newPrices = [];
-            product.skus.forEach(sku => {
-                if (Array.isArray(sku.prices) && sku.prices.length > 0) {
-                    sku.prices.forEach(price => {
-                        newPrices.push(price);
-                    });
-                }
-            });
-
-            setPrices(newPrices);
-
-            // Ensure inventories are set correctly
-            setInventories(product.inventories || []);
-
-            // Ensure attributes are set correctly
-            setAttributes(product.attributes || []);
-    
-        } else {
-            // Default values for new products
-            setProduct(null);
-            // setFormData({ 
-            //     name: '',
-            //     description: '',
-            //     categories: [],
-            //     status: '',
-            //     skus: []
-            // });
-            // setProductStatus(null);
-            // setProductTaxClass(null);
-            // setPrices([]);
-            // setInventories([]);
-            // setAttributes([]);
-        }
-    
-        setLoading(null);
-    }, [product]);
-    
-    const handleCategoryChange = (selectedCategory) => {
-        console.log('Newly selected category:', selectedCategory);
-
-        let newCategories = [...selectedCategories];
-
-        // remove from current category state if it's already in the list
-        if (newCategories.find(category => category.id === selectedCategory.id)) {
-            newCategories = newCategories.filter(category => category.id !== selectedCategory.id);
-        }
-        // otherwise add to the list
-        else {
-            newCategories.push(selectedCategory);
-        }
-
-        // Update the state
-        setSelectedCategories(newCategories);
-
-        // Update formData with category IDs
-        setFormData(prevData => ({
-            ...prevData,
-            categories: newCategories.map(category => category.id)
-        }));
-    };
-
-    const handleStatusChange = (selectedStatus) => {
-        setProductStatus(selectedStatus);
-        setFormData(prevData => ({
-            ...prevData,
-            status: selectedStatus ? selectedStatus.id : ''
-        }));
-    };
-    
-
-    // handle form data changes
-    const handleChange = (e) => {
-        setValidationErrors([]);
-        const { name, value } = e.target;
-    
-        setFormData(prevData => ({
-            ...prevData,
-            [name]: value
-        }));
-    };
-
-
-    // handle delete user
-    const handleDelete = async () => {
-        if (window.confirm('Are you sure you want to delete this product?')) {
-            try {
-                setLoading('loading');
-
-                await gnarEngine.products.delete(product._id);
-
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                }, 3000);
-
-                refreshSelectedProduct();  
-                setView('list');  
-
-            } catch (error) {
-
-                setLoading('error');
-                console.error('Error deleting product:', error);
-            }
-        } else {
-            console.log('Deletion canceled');
-        }
-    };
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setValidationErrors([]);
-        setLoading('loading');
-    
-        try {
-            if (product) {
-                // Editing an existing product
-                await gnarEngine.products.update(product._id, { 
-                    ...product, 
-                    ...(formData || {})
-                });
-                               
-    
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                    refreshSelectedProduct();
-                }, 3000);
-            } else {
-                // Creating a new product
-                const newProduct = await gnarEngine.products.createProducts([{...formData}]);
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                    setProduct(newProduct);
-                }, 3000);
-            }
-        } catch (error) {
-            const errors = [];
-    
-            if (error.response?.data?.errors) {
-                Object.keys(error.response.data.errors).forEach((key) => {
-                    errors.push(error.response.data.errors[key]);
-                });
-            } else if (error.response?.data?.message) {
-                errors.push(error.response.data.message);
-            }
-    
-            setValidationErrors(errors);
-            console.error('Error saving product:', error);
-            setLoading('error');
-            setTimeout(() => {
-                setLoading(null);
-            }, 3000);
-        }
-    };
-    
-
-
-    const routeKey = 'products';
-    const handleMenuBtnClick = () => setView({ isBackToList: true });
-
-    // add event listener to sidebar buttons to change view
-    useEffect(() => {
-        const sidebarButtons = document.querySelectorAll('.sidebar a[href^="/portal/' + routeKey + '"]');
-        sidebarButtons.forEach(button => {
-            // if it doesn't already have an event listener
-            if (!button.hasEventListener) {
-                button.addEventListener('click', handleMenuBtnClick);
-            }
-        })
-
-        // Cleanup to prevent memory leaks and double bindings
-        return () => {
-            sidebarButtons.forEach(button => {
-                button.removeEventListener('click', handleMenuBtnClick);
-            });
-        };
-    }, []);
-
-    return (
-        <div className="single-edit product">
-            {validationErrors.length > 0 &&
-                <div className="error-messages">
-                    {validationErrors.map((error, index) => {
-                        return <p key={index}>{error}</p>
-                    })}
-                </div>
-            }
-            <div className='single-edit-header'>
-                <div className='single-edit-header-left'>
-                    {product && product._id &&
-                        <p><strong>Parent Product:&nbsp;</strong>#{product._id}</p>                    
-                    }
-                    <p>Date Added: {formatDate(product?.createdAt)}</p>
-                    <form onSubmit={handleSubmit}>
-                        <div>
-                            <input
-                                type="text"
-                                name="name"
-                                placeholder='Product Name'
-                                value={formData.name}
-                                onChange={handleChange}
-                                required
-                            />
-                            <CustomSelect 
-                                name="status"
-                                placeholder="Status"
-                                options={productStatuses}
-                                labelKey="status"
-                                setSelectedOption={handleStatusChange}
-                                selectedOption={productStatus}
-                            />
-                        </div>
-                    </form>
-                </div>
-                <div className='single-edit-header-right'>
-                    <div className="flex-row-buttons-cont">
-                        <button onClick={() => {
-                            setView('list');
-                            setProduct(null);
-                            setSelectedSingleItemId(null);
-                            }} className="secondaryButton">
-                                Back
-                        </button>
-                        <button onClick={handleDelete} className="secondaryButton">Delete</button>
-                        <SaveButton
-                            save={handleSubmit}
-                            loading={loading}
-                            textCreate="Add Product"
-                            textCreateLoading="Saving..."
-                            textCreateSuccess="Saved"
-                            textCreateError="Error"
-                            textUpdate="Save"
-                            textUpdateLoading="Updating..."
-                            textUpdateSuccess="Updated"
-                            textUpdateError="Error"
-                            isUpdating={!!product} 
-                        />
-                    </div>
-                </div>
-
-            </div>
-            
-            <div className='card'>
-                <div className='card-header'>
-                    <h2>Description and Category</h2>
-                </div>
-                <div className='card-content'>
-                    <form onSubmit={handleSubmit}>
-                        <div className='form-group'>
-                            <label>Description</label>
-                            <textarea
-                                name="description"
-                                value={formData.description}
-                                onChange={handleChange}
-                                required
-                            />
-                        </div>
-                        <div className='form-group categories'>
-                            <label>Categories</label>
-                            <CustomMultiSelect
-                                name="categories"
-                                placeholder="Select categories"
-                                options={productCategories}
-                                labelKey="category"
-                                setSelectedOption={selected => {
-                                    handleCategoryChange(selected); 
-                                }}
-                                selectedOptions={selectedCategories}
-                            />
-                        </div>
-                    </form>
-                </div>
-            </div>
-
-            <h2>Grouping</h2>
-            <div className='card'>
-                <div className='card-header'>
-                    <h2>Taxonomy</h2>
-                    <h2>Terms</h2>
-                    <div></div>
-                </div>
-                <div className='card-content'>
-                    <Repeater
-                        items={[product]}
-                        setItems={setProduct}
-                        defaultItem= {{}}
-                        buttonText= "Add grouping"
-                        renderRow= {(item, index, updateItem, remove) => (
-                            <TaxonomyFormRow
-                                key={index}
-                                item={item}
-                                onChange={(field, value) => updateItem({ ...item, [field]: value })}
-                                remove={remove}
-                            />
-                        )}
-                    />
-                </div>
-            </div>
-
-            <h2>SKUs</h2>
-            <Repeater
-                items={product?.skus ?? [{}]}
-                setItems={(newSkus) => setProduct({ ...product, skus: newSkus })}
-                defaultItem={{ sku: "", prices: [{}], taxClass: "" }} 
-                buttonText="Add SKU"
-                renderRow={(item, index, updateItem, remove) => (
-                    <Skus
-                        key={index}
-                        item={item}
-                        onChange={(field, value) => updateItem({ ...item, [field]: value })}
-                        remove={remove}
-                    />
-                )}
-            />
-
-        </div>
-    );
-};
-
-export default CrudProductSingle;

package/bootstrap/services/portal/src/features/crudRaffles/CrudRafflesList.jsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import CustomCheckbox from '../../ui/customCheckbox/CustomCheckbox';
-
-const CrudRafflesList = ({ setSelectedSingleItemId, setView, selectedRaffleIds, setSelectedRaffleIds, raffles, message }) => {
-
-    const allSelected = raffles.length > 0 && selectedRaffleIds.size === raffles.length;
-
-    const toggleContactSelection = (raffleId) => {
-        setSelectedRaffleIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(raffleId)) {
-                newSet.delete(raffleId);
-            } else {
-                newSet.add(raffleId);
-            }
-            return newSet;
-        });
-    };
-
-
-    const toggleSelectAll = () => {
-        if (allSelected) {
-            setSelectedRaffleIds(new Set());
-        } else {
-            setSelectedRaffleIds(new Set(raffles.map(raffle => raffle.id)));
-        }
-    };
-
-    const handleEditClick = (raffle) => {
-        setSelectedSingleItemId(raffle.id);
-        setView('single');
-    };
-
-    const columns = [
-        { columnLabel: 'Raffle', dataKey: 'id' },
-        { columnLabel: 'Name', dataKey: 'name' },
-        { columnLabel: 'Date added', dataKey: 'created_at' },
-    ];
-
-
-    return (
-        <div className="">
-            <div className='pagination-labels-cont'>
-                <div className='pagination-count'>
-                    Showing {raffles.length} of {raffles.length} raffle{raffles.length !== 1 ? 's' : ''}
-                </div>
-                <div className="pagination-count">
-                        {selectedRaffleIds.size} of {raffles.length} raffle{raffles.length !== 1 ? 's' : ''} selected
-                </div>
-            </div>
-            <div className='crud-list'>
-                <table className='custom-table'>
-                    <thead>
-                        <tr>
-                            <th className="checkbox">
-                                <CustomCheckbox
-                                    name="selectAll"
-                                    checked={allSelected}
-                                    setChecked={toggleSelectAll}
-                                />
-                            </th>
-                            {columns.map(column => (
-                                <th key={column.columnLabel}>{column.columnLabel}</th>
-                            ))}
-                        </tr>
-                    </thead>
-
-                    <tbody>
-                        {message ? (
-                            <tr>
-                                <td colSpan={columns.length + 1}>{message}</td>
-                            </tr>
-                        ) : (
-                            raffles.length > 0 ? (
-                                raffles.map(raffle => (
-                                    <tr key={raffle.id} onClick={() => handleEditClick(raffle)}>
-                                        <td>
-                                            <CustomCheckbox 
-                                                name={`checkbox-${raffle.id}`}
-                                                checked={selectedRaffleIds.has(raffle.id)}
-                                                setChecked={() => toggleContactSelection(raffle.id)}
-                                            />
-                                        </td>
-                                        {columns.map(column => (
-                                            <td key={column.dataKey}>{raffle[column.dataKey]}</td>
-                                        ))}
-                                    </tr>
-                                ))
-                            ) : (
-                                <tr>
-                                    <td colSpan={columns.length + 1}>No raffles found</td>
-                                </tr>
-                            )
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-    );
-
-};
-
-export default CrudRafflesList;