@gnar-engine/cli 1.0.3 → 1.0.4

package/bootstrap/services/portal/src/features/crudContact/CrudContactList.jsx

@@ -1,108 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import gnarEngine from '@gnar-engine/js-client';
-import CustomCheckbox from '../../ui/customCheckbox/CustomCheckbox';
-
-const CrudContactList = ({ setSelectedSingleItemId, setView, selectedContactIds, setSelectedContactIds, contacts, message}) => {
-
-    const allSelected = contacts.length > 0 && selectedContactIds.size === contacts.length;
-
-    const toggleContactSelection = (contactId) => {
-        setSelectedContactIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(contactId)) {
-                newSet.delete(contactId);
-            } else {
-                newSet.add(contactId);
-            }
-            return newSet;
-        });
-    };
-
-
-    const toggleSelectAll = () => {
-        if (allSelected) {
-            setSelectedContactIds(new Set());
-        } else {
-            setSelectedContactIds(new Set(contacts.map(contact => contact.id)));
-        }
-    };
-
-
-    const handleEditClick = (product) => {
-        setSelectedSingleItemId(product.id);
-        setView('single');
-    };
-
-    const columns = [
-        { columnLabel: 'ID', dataKey: 'id' },,
-        { columnLabel: 'First Name', dataKey: 'firstName' },
-        { columnLabel: 'Last Name', dataKey: 'lastName' },
-        { columnLabel: 'Email', dataKey: 'email' },
-        { columnLabel: 'Date Added', dataKey: 'createdAt' }
-    ];
-
-
-    return (
-        <div className="">
-            <div className='pagination-labels-cont'>
-                <div className='pagination-count'>
-                    Showing {contacts.length} of {contacts.length} contact{contacts.length !== 1 ? 's' : ''}
-                </div>
-                <div className="pagination-count">
-                        {selectedContactIds.size} of {contacts.length} user{contacts.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>
-                        ) : (
-                            contacts.length > 0 ? (
-                                contacts.map(contact => (
-                                    <tr key={contact.id} onClick={() => handleEditClick(contact)}>
-                                        <td>
-                                            <CustomCheckbox 
-                                                name={`checkbox-${contact.id}`}
-                                                checked={selectedContactIds.has(contact.id)}
-                                                setChecked={() => toggleContactSelection(contact.id)}
-                                            />
-                                        </td>
-                                        {columns.map(column => (
-                                            <td key={column.dataKey}>{contact[column.dataKey]}</td>
-                                        ))}
-                                    </tr>
-                                ))
-                            ) : (
-                                <tr>
-                                    <td colSpan={columns.length + 1}>No contacts found</td>
-                                </tr>
-                            )
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-    );
-
-};
-
-export default CrudContactList;

package/bootstrap/services/portal/src/features/crudContact/CrudContactSingle.jsx

@@ -1,243 +0,0 @@
-import { useEffect, useState } from "react";
-import gnarEngine from '@gnar-engine/js-client';
-import DatePicker from "react-datepicker";
-import SaveButton from "../../ui/saveButton/SaveButton";
-
-const CrudContactSingle = ({ loading, setLoading, contact, setView, refreshSelectedContact, setContact, fetchContacts, formatDate, setSelectedSingleItemId }) => {
-
-    const [formData, setFormData] = useState({
-        firstName: '',
-        lastName: '',
-        email: '',
-        phone: '',
-        dateOfBirth: '',
-        marketingOptIn: false,
-    });
-    const [validationErrors, setValidationErrors] = useState([]);
-
-
-    // Load contact details if editing
-    useEffect(() => {
-        if (contact) {
-            setFormData({
-                firstName: contact.firstName,
-                lastName: contact.lastName,
-                email: contact.email,
-                phone: contact.phone,
-                dateOfBirth: contact.dateOfBirth,
-                marketingOptIn: contact.marketingOptIn || false,
-            });
-        }
-    }, [contact]);
-
-    
-
-    const handleSubmit = async (e) => {
-        e.preventDefault();
-        setLoading('loading');
-        setValidationErrors([]);
-
-        try {
-
-            if (contact) {
-                const response = await gnarEngine.contacts.update(contact._id, formData);
-                console.log('response:', response);
-
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                    fetchContacts();
-                    refreshSelectedContact();
-                }, 3000);
-
-                refreshSelectedContact();
-            } else {
-                
-                const response = await gnarEngine.contacts.createContact({
-                    contacts : [formData]
-                });
-                console.log('response:', response);
-
-                if (response.error) {
-                    setValidationErrors(response.error);
-                } else {
-
-                    setLoading('success');
-                    setTimeout(() => {
-                        setLoading(null);
-                        fetchContacts();
-                        setView('list');
-                    }, 3000);
-
-                }
-            }
-        }
-        catch (error) {
-            console.error('Error updating contact:', error);
-            setValidationErrors(['Error updating contact']);
-            setTimeout(() => {
-                setLoading(null);
-            }, 3000);
-        }
-
-
-    }
-
-    // handle delete user
-    const handleDelete = async () => {
-        if (window.confirm('Are you sure you want to delete this contact?')) {
-            try {
-                setLoading('loading');
-
-                await gnarEngine.contacts.delete(contact._id);
-
-                setLoading('success');
-                setTimeout(() => {
-                    setLoading(null);
-                }, 3000);
-
-                refreshSelectedContact();  
-                setView('list');  
-
-            } catch (error) {
-
-                setLoading('error');
-                console.error('Error deleting contact:', error);
-            }
-        } else {
-            console.log('Deletion canceled');
-        }
-    };
-
-
-
-
-
-    return (
-
-        <div className="single-edit contact">
-            {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'>
-                    <h2>{contact ? 'Edit Contact' : 'Add New Contact'}</h2>
-                </div>
-                <div className='single-edit-header-right'>
-                    <div className="flex-row-buttons-cont">
-                        <button onClick={() => {
-                            setView('list');
-                            setContact(null);
-                            setSelectedSingleItemId(null);
-                            }} className="secondaryButton">
-                                Back
-                        </button>
-                        <button onClick={handleDelete} className="secondaryButton">Delete</button>
-                        <SaveButton
-                            save={handleSubmit}
-                            loading={loading}
-                            textCreate="Add Contact"
-                            textCreateLoading="Saving..."
-                            textCreateSuccess="Saved"
-                            textCreateError="Error"
-                            textUpdate="Save"
-                            textUpdateLoading="Updating..."
-                            textUpdateSuccess="Updated"
-                            textUpdateError="Error"
-                            isUpdating={!!contact} 
-                        />
-                    </div>
-                </div>
-            </div>
-            <div className="card">
-                <div className='card-header'>
-                    <h2>Contact Details</h2>
-                </div>
-                <div className='card-content'>
-                    <form onSubmit={handleSubmit}>
-                        <div className="form-group">
-                            <label htmlFor="firstName">First Name</label>
-                            <input 
-                                type="text" 
-                                id="firstName" 
-                                name="firstName" 
-                                value={formData.firstName} 
-                                onChange={(e) => setFormData({ ...formData, firstName: e.target.value })} 
-                            />
-                        </div>
-                        <div className="form-group">
-                            <label htmlFor="lastName">Last Name</label>
-                            <input 
-                                type="text" 
-                                id="lastName" 
-                                name="lastName" 
-                                value={formData.lastName} 
-                                onChange={(e) => setFormData({ ...formData, lastName: e.target.value })} 
-                            />
-                        </div>
-                        <div className="form-group">
-                            <label htmlFor="email">Email</label>
-                            <input 
-                                type="email" 
-                                id="email" 
-                                name="email" 
-                                value={formData.email} 
-                                onChange={(e) => setFormData({ ...formData, email: e.target.value })} 
-                            />
-                        </div>
-                        <div className="form-group">
-                            <label htmlFor="phone">Phone</label>
-                            <input 
-                                type="text" 
-                                id="phone" 
-                                name="phone" 
-                                value={formData.phone} 
-                                onChange={(e) => setFormData({ ...formData, phone: e.target.value })} 
-                            />
-                        </div>
-                        <div className="form-group">
-                            <label htmlFor="dateOfBirth">Date of Birth (DD/MM/YYYY)</label>
-                            <DatePicker
-                                selected={formData.dateOfBirth ? new Date(formData.dateOfBirth) : null}
-                                onChange={(date) => {
-                                    const formattedDate = date.toISOString().split('T')[0]; // Convert to YYYY-MM-DD format
-                                    setFormData({ ...formData, dateOfBirth: formattedDate });
-                                }}
-                                dateFormat="dd/MM/yyyy"
-                            />
-                        </div>
-                        {/* marketingOptIn */}
-                        <div className="form-group">
-                            <label htmlFor="marketingOptIn">
-                                <input 
-                                    type="checkbox" 
-                                    id="marketingOptIn" 
-                                    name="marketingOptIn" 
-                                    checked={formData.marketingOptIn} 
-                                    onChange={(e) => setFormData({ ...formData, marketingOptIn: e.target.checked })} 
-                                />
-                                Marketing Opt-In
-                            </label>
-
-                        </div>
-                    </form>
-                    <div>
-                        <p><strong>Date Added: </strong>{formatDate(contact?.createdAt)}</p>
-                    </div>
-                </div>
-
-
-
-            </div>
-        </div>
-
-    );
-
-};
-
-export default CrudContactSingle;

package/bootstrap/services/portal/src/features/crudOrder/CrudOrderList.jsx

@@ -1,109 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import gnarEngine from '@gnar-engine/js-client';
-import CustomCheckbox from '../../ui/customCheckbox/CustomCheckbox';
-
-const CrudOrderList = ({ setSelectedSingleItemId, setView, selectedOrderIds, setSelectedOrderIds, orders, message }) => {
-
-    const allSelected = orders.length > 0 && selectedOrderIds.size === orders.length;
-
-    const toggleContactSelection = (orderId) => {
-        setSelectedOrderIds(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(orderId)) {
-                newSet.delete(orderId);
-            } else {
-                newSet.add(orderId);
-            }
-            return newSet;
-        });
-    };
-
-
-    const toggleSelectAll = () => {
-        if (allSelected) {
-            setSelectedOrderIds(new Set());
-        } else {
-            setSelectedOrderIds(new Set(orders.map(order => order.id)));
-        }
-    };
-
-    const handleEditClick = (product) => {
-        setSelectedSingleItemId(product.id);
-        setView('single');
-    };
-
-    const columns = [
-        { columnLabel: 'Order', dataKey: 'id' },
-        { columnLabel: 'Type', dataKey: 'type' },
-        { columnLabel: 'First Name', dataKey: 'firstName' },
-        { columnLabel: 'Last Name', dataKey: 'lastName' },
-        { columnLabel: 'Status', dataKey: 'status' },
-        { columnLabel: 'Total', dataKey: 'total' },
-        { columnLabel: 'Date added', dataKey: 'createdAt' },
-    ];
-
-
-    return (
-        <div className="">
-            <div className='pagination-labels-cont'>
-                <div className='pagination-count'>
-                    Showing {orders.length} of {orders.length} order{orders.length !== 1 ? 's' : ''}
-                </div>
-                <div className="pagination-count">
-                        {selectedOrderIds.size} of {orders.length} order{orders.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>
-                        ) : (
-                            orders.length > 0 ? (
-                                orders.map(order => (
-                                    <tr key={order.id} onClick={() => handleEditClick(order)}>
-                                        <td>
-                                            <CustomCheckbox 
-                                                name={`checkbox-${order.id}`}
-                                                checked={selectedOrderIds.has(order.id)}
-                                                setChecked={() => toggleContactSelection(order.id)}
-                                            />
-                                        </td>
-                                        {columns.map(column => (
-                                            <td key={column.dataKey}>{order[column.dataKey]}</td>
-                                        ))}
-                                    </tr>
-                                ))
-                            ) : (
-                                <tr>
-                                    <td colSpan={columns.length + 1}>No orders found</td>
-                                </tr>
-                            )
-                        )}
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-    );
-
-};
-
-export default CrudOrderList;