@gnar-engine/cli 1.0.0 → 1.0.1

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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,243 @@
+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

@@ -0,0 +1,109 @@
+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;