@ouroboros/mouth-mui 1.0.0

package/LICENSE

@@ -0,0 +1,8 @@
+Ouroboros Coding Inc. License
+
+Copyright (c) 2023 Ouroboros Coding Inc.
+
+Permission is hereby granted, with limits, to any person using this software
+within a project created by Ouroboros Coding Inc. Any attempt to modify this
+code, or use it outside projects created by Ouroboros Coding Inc, will result
+in legal action taken against the party using the code.

package/README.md

@@ -0,0 +1,15 @@
+# @ouroboros/mouth-mui
+
+[![npm version](https://img.shields.io/npm/v/@ouroboros/mouth-mui.svg)](https://www.npmjs.com/package/@ouroboros/mouth-mui)
+
+Shared Material-UI Components for interacting with the mouth service created by
+Ouroboros Coding Inc.
+
+This code comes without documentation as it's not meant to be used by anyone
+outside of Ouroboros Coding Inc. Please see LICENSE for further information.
+
+## Installation
+npm
+```bash
+npm install @ouroboros/mouth-mui
+```

package/package.json

@@ -0,0 +1,55 @@
+{
+	"name": "@ouroboros/mouth-mui",
+	"version": "1.0.0",
+	"description": "Components for use with the Mouth service",
+	"main": "src/index.js",
+	"types": "src/index.d.ts",
+	"scripts": {
+		"build": "tslint -p tsconfig.json && tsc",
+		"clean": "cd src; find . -type f -name \"*.js\" -delete; find . -type f -name \"*.d.ts\" -delete",
+		"for_local": "npm install; tslint -p tsconfig.json && tsc; rm -Rf node_modules",
+		"test": "echo \"Error: no test specified.\" && exit 1"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ouroboroscoding/mouth-mui.git"
+	},
+	"keywords": [
+		"@ouroboros/mouth",
+		"material-ui",
+		"mui",
+		"react"
+	],
+	"author": "Chris Nasr <chris@ouroboroscoding.com>",
+	"license": "CUSTOM",
+	"bugs": {
+		"url": "https://github.com/ouroboroscoding/mouth-mui/issues"
+	},
+	"devDependencies": {
+		"@types/node": "^18.14.0",
+		"@types/react": "^18.0.28",
+		"@types/uuid": "^9.0.0",
+		"tslint": "^6.1.3",
+		"tslint-config-prettier": "^1.18.0",
+		"typescript": "^4.8.3"
+	},
+	"dependencies": {
+		"@ouroboros/clone": "^1.0.1",
+		"@ouroboros/define": "^1.0.2",
+		"@ouroboros/define-mui": "^1.0.3",
+		"@ouroboros/react-radiobuttons-mui": "^1.0.0",
+		"@ouroboros/subscribe": "^1.2.0",
+		"@ouroboros/tools": "^0.4.1",
+		"prop-types": "^15.8.1"
+	},
+	"peerDependencies": {
+		"@emotion/react": "^11.8.2",
+		"@emotion/styled": "^11.8.1",
+		"@mui/material": "^5.5.1",
+		"@ouroboros/body": "^1.0.0",
+		"@ouroboros/brain-mui": "^1.0.0",
+		"@ouroboros/mouth": "^1.0.0",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
+	}
+}

package/src/components/pages/Locales.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Communications Locales
+ *
+ * Locales page
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-19
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { responseErrorStruct } from '@ouroboros/body';
+export type LocalesProps = {
+    mobile: boolean;
+    onError: (error: responseErrorStruct) => void;
+    onSuccess: (type: string) => void;
+};
+/**
+ * Locales
+ *
+ * Handles template locale management
+ *
+ * @name Locales
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+declare function Locales(props: LocalesProps): JSX.Element;
+declare namespace Locales {
+    var propTypes: {
+        mobile: PropTypes.Validator<boolean>;
+        onError: PropTypes.Validator<(...args: any[]) => any>;
+        onSuccess: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export default Locales;

package/src/components/pages/Locales.js

@@ -0,0 +1,188 @@
+/**
+ * Communications Locales
+ *
+ * Locales page
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-19
+ */
+// Ouroboros modules
+import { Myself } from '@ouroboros/brain-mui';
+import clone from '@ouroboros/clone';
+import { Tree } from '@ouroboros/define';
+import { Form, Results } from '@ouroboros/define-mui';
+import mouth, { errors } from '@ouroboros/mouth';
+import LocaleDef from '@ouroboros/mouth/definitions/locale.json';
+import { afindi, merge } from '@ouroboros/tools';
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+// Material UI
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Tooltip from '@mui/material/Tooltip';
+// Local modules
+import locales from '../../locales';
+// Generate the user Tree
+const LocaleTree = new Tree(LocaleDef);
+/**
+ * Locales
+ *
+ * Handles template locale management
+ *
+ * @name Locales
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Locales(props) {
+    // State
+    const [create, createSet] = useState(false);
+    const [records, recordsSet] = useState([]);
+    // Hooks
+    const rights = Myself.useRights('mouth_locale');
+    // User / archived change effect
+    useEffect(() => {
+        // If we have read rights
+        if (rights.read) {
+            mouth.read('locale').then(recordsSet);
+        }
+        else {
+            recordsSet([]);
+        }
+        // If we don't have create rights
+        if (!rights.create) {
+            createSet(false);
+        }
+    }, [rights]);
+    // Called when a create form is submitted
+    function createSubmit(locale) {
+        // Create a new Promise and return it
+        return new Promise((resolve, reject) => {
+            // Create the new locale
+            mouth.create('locale').then((data) => {
+                // If we were successful
+                if (data) {
+                    // Notify the parent
+                    props.onSuccess('create');
+                    // Close the create form
+                    createSet(false);
+                    // Clone the records, add the new one to the start, and set the new
+                    //	records
+                    const lRecords = clone(records);
+                    lRecords.unshift(locale);
+                    recordsSet(lRecords);
+                    // Send the clone to the locales
+                    locales.set(lRecords);
+                }
+                // Resolve with the form
+                resolve(data ? true : false);
+            }, (error) => {
+                if (error.code === errors.body.DB_NO_RECORD) {
+                    reject([['_id', 'Already in use']]);
+                }
+                else if (error.code === errors.body.DATA_FIELDS) {
+                    reject(error.msg);
+                }
+                else {
+                    if (props.onError) {
+                        props.onError(error);
+                    }
+                    else {
+                        throw new Error(JSON.stringify(error));
+                    }
+                }
+            });
+        });
+    }
+    // Called when the delete button on a locale was clicked
+    function deleteClick(key) {
+        // Delete the existing locale
+        mouth.delete('locale', { _id: key }).then((data) => {
+            // If it was successful
+            if (data) {
+                // Notify the parent
+                props.onSuccess('delete');
+                // Look for the record
+                const i = afindi(records, '_id', key);
+                // If it exists
+                if (i > -1) {
+                    // Clone the records, delete the index, and set the new records
+                    const lRecords = clone(records);
+                    lRecords.splice(i, 1);
+                    recordsSet(lRecords);
+                    // Send the clone to the locales
+                    locales.set(lRecords);
+                }
+            }
+        }, (error) => {
+            if (props.onError) {
+                props.onError(error);
+            }
+            else {
+                throw new Error(JSON.stringify(error));
+            }
+        });
+    }
+    // Called when an update form is submitted
+    function updateSubmit(locale, key) {
+        // Add the ID to the locale
+        locale._id = key;
+        // Create a new Promise and return it
+        return new Promise((resolve, reject) => {
+            // Update the locale on the server
+            mouth.update('locale', locale).then((data) => {
+                // If we were successful
+                if (data) {
+                    // Notify the parent
+                    props.onSuccess('update');
+                    // Look for the record
+                    const i = afindi(records, '_id', key);
+                    // If it exists
+                    if (i > -1) {
+                        // Clone the records, update the index, and set the new records
+                        const lRecords = clone(records);
+                        merge(lRecords[i], locale);
+                        recordsSet(lRecords);
+                        // Send the clone to the locales
+                        locales.set(lRecords);
+                    }
+                }
+                // Resolve with the Form
+                resolve(data);
+            }, (error) => {
+                if (error.code === errors.body.DATA_FIELDS) {
+                    reject(error.msg);
+                }
+                else {
+                    if (props.onError) {
+                        props.onError(error);
+                    }
+                    else {
+                        throw new Error(JSON.stringify(error));
+                    }
+                }
+            });
+        });
+    }
+    // Render
+    return (React.createElement(Box, { id: "mouth_locales", className: "flexGrow padding" },
+        React.createElement(Box, { className: "flexColumns" },
+            React.createElement("h1", { className: "flexGrow" }, "Locales"),
+            rights.create &&
+                React.createElement(Box, { className: "flexStatic" },
+                    React.createElement(Tooltip, { title: "Create new Locale", className: "page_action", onClick: () => createSet(b => !b) },
+                        React.createElement(IconButton, null,
+                            React.createElement("i", { className: 'fa-solid fa-plus' + (create ? ' open' : '') }))))),
+        create &&
+            React.createElement(Paper, { className: "padding" },
+                React.createElement(Form, { onCancel: () => createSet(false), onSubmit: createSubmit, tree: LocaleTree, type: "create" })),
+        React.createElement(Results, { data: records, orderBy: "name", onDelete: rights.delete ? deleteClick : false, onUpdate: rights.update ? updateSubmit : false, tree: LocaleTree })));
+}
+// Valid props
+Locales.propTypes = {
+    mobile: PropTypes.bool.isRequired,
+    onError: PropTypes.func.isRequired,
+    onSuccess: PropTypes.func.isRequired
+};

package/src/components/pages/Locales.tsx

@@ -0,0 +1,254 @@
+/**
+ * Communications Locales
+ *
+ * Locales page
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-19
+ */
+
+// Ouroboros modules
+import { Myself } from '@ouroboros/brain-mui';
+import clone from '@ouroboros/clone';
+import { Tree } from '@ouroboros/define'
+import { Form, Results } from '@ouroboros/define-mui';
+import mouth, { errors } from '@ouroboros/mouth';
+import LocaleDef from '@ouroboros/mouth/definitions/locale.json';
+import { afindi, merge } from '@ouroboros/tools';
+
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+
+// Material UI
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Tooltip from '@mui/material/Tooltip';
+
+// Local modules
+import locales from '../../locales';
+
+// Generate the user Tree
+const LocaleTree = new Tree(LocaleDef);
+
+// Types
+import { responseErrorStruct } from '@ouroboros/body';
+export type LocalesProps = {
+	mobile: boolean,
+	onError: (error: responseErrorStruct) => void,
+	onSuccess: (type: string) => void
+}
+
+/**
+ * Locales
+ *
+ * Handles template locale management
+ *
+ * @name Locales
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Locales(props: LocalesProps) {
+
+	// State
+	const [create, createSet] = useState<boolean>(false);
+	const [records, recordsSet] = useState<any[]>([]);
+
+	// Hooks
+	const rights = Myself.useRights('mouth_locale');
+
+	// User / archived change effect
+	useEffect(() => {
+
+		// If we have read rights
+		if(rights.read) {
+			mouth.read('locale').then(recordsSet);
+		} else {
+			recordsSet([]);
+		}
+
+		// If we don't have create rights
+		if(!rights.create) {
+			createSet(false);
+		}
+
+	}, [rights]);
+
+	// Called when a create form is submitted
+	function createSubmit(locale: any): Promise<boolean> {
+
+		// Create a new Promise and return it
+		return new Promise((resolve, reject) => {
+
+			// Create the new locale
+			mouth.create('locale').then((data: string) => {
+
+				// If we were successful
+				if(data) {
+
+					// Notify the parent
+					props.onSuccess('create');
+
+					// Close the create form
+					createSet(false);
+
+					// Clone the records, add the new one to the start, and set the new
+					//	records
+					const lRecords = clone(records);
+					lRecords.unshift(locale);
+					recordsSet(lRecords);
+
+					// Send the clone to the locales
+					locales.set(lRecords);
+				}
+
+				// Resolve with the form
+				resolve(data ? true : false);
+
+			}, (error: responseErrorStruct) => {
+				if(error.code === errors.body.DB_NO_RECORD) {
+					reject([['_id', 'Already in use']]);
+				} else if(error.code === errors.body.DATA_FIELDS) {
+					reject(error.msg);
+				} else {
+					if(props.onError) {
+						props.onError(error);
+					} else {
+						throw new Error(JSON.stringify(error));
+					}
+				}
+			});
+		});
+	}
+
+	// Called when the delete button on a locale was clicked
+	function deleteClick(key: string) {
+
+		// Delete the existing locale
+		mouth.delete('locale', { _id: key }).then((data: boolean) => {
+
+			// If it was successful
+			if(data) {
+
+				// Notify the parent
+				props.onSuccess('delete');
+
+				// Look for the record
+				const i = afindi(records, '_id', key);
+
+				// If it exists
+				if(i > -1) {
+
+					// Clone the records, delete the index, and set the new records
+					const lRecords = clone(records);
+					lRecords.splice(i, 1);
+					recordsSet(lRecords);
+
+					// Send the clone to the locales
+					locales.set(lRecords);
+				}
+			}
+		}, (error: responseErrorStruct) => {
+			if(props.onError) {
+				props.onError(error);
+			} else {
+				throw new Error(JSON.stringify(error));
+			}
+		});
+	}
+
+	// Called when an update form is submitted
+	function updateSubmit(locale: any, key: string): Promise<boolean> {
+
+		// Add the ID to the locale
+		locale._id = key;
+
+		// Create a new Promise and return it
+		return new Promise((resolve, reject) => {
+
+			// Update the locale on the server
+			mouth.update('locale', locale).then((data: boolean) => {
+
+				// If we were successful
+				if(data) {
+
+					// Notify the parent
+					props.onSuccess('update');
+
+					// Look for the record
+					const i = afindi(records, '_id', key);
+
+					// If it exists
+					if(i > -1) {
+
+						// Clone the records, update the index, and set the new records
+						const lRecords = clone(records);
+						merge(lRecords[i], locale);
+						recordsSet(lRecords);
+
+						// Send the clone to the locales
+						locales.set(lRecords);
+					}
+				}
+
+				// Resolve with the Form
+				resolve(data);
+
+			}, (error: responseErrorStruct) => {
+				if(error.code === errors.body.DATA_FIELDS) {
+					reject(error.msg);
+				} else {
+					if(props.onError) {
+						props.onError(error);
+					} else {
+						throw new Error(JSON.stringify(error));
+					}
+				}
+			});
+		});
+	}
+
+	// Render
+	return (
+		<Box id="mouth_locales" className="flexGrow padding">
+			<Box className="flexColumns">
+				<h1 className="flexGrow">Locales</h1>
+				{rights.create &&
+					<Box className="flexStatic">
+						<Tooltip title="Create new Locale" className="page_action" onClick={() => createSet(b => !b)}>
+							<IconButton>
+								<i className={'fa-solid fa-plus' + (create ? ' open' : '')} />
+							</IconButton>
+						</Tooltip>
+					</Box>
+				}
+			</Box>
+			{create &&
+				<Paper className="padding">
+					<Form
+						onCancel={() => createSet(false)}
+						onSubmit={createSubmit}
+						tree={LocaleTree}
+						type="create"
+					/>
+				</Paper>
+			}
+			<Results
+				data={records}
+				orderBy="name"
+				onDelete={rights.delete ? deleteClick : false}
+				onUpdate={rights.update ? updateSubmit : false}
+				tree={LocaleTree}
+			/>
+		</Box>
+	);
+}
+
+// Valid props
+Locales.propTypes = {
+	mobile: PropTypes.bool.isRequired,
+	onError: PropTypes.func.isRequired,
+	onSuccess: PropTypes.func.isRequired
+}

package/src/components/pages/Templates/Create.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Templates Create
+ *
+ * Create component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-20
+ */
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { responseErrorStruct } from '@ouroboros/body';
+import { templateStruct } from './Template';
+export interface CreateProps {
+    onCancel?: () => void;
+    onCreated: (template: templateStruct) => void;
+    onError: (error: responseErrorStruct) => void;
+}
+/**
+ * Create
+ *
+ * Form for creating a new template
+ *
+ * @name Create
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+declare function Create(props: CreateProps): JSX.Element;
+declare namespace Create {
+    var propTypes: {
+        onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        onCreated: PropTypes.Validator<(...args: any[]) => any>;
+        onError: PropTypes.Validator<(...args: any[]) => any>;
+    };
+}
+export default Create;

package/src/components/pages/Templates/Create.js

@@ -0,0 +1,98 @@
+/**
+ * Templates Create
+ *
+ * Create component
+ *
+ * @author Chris Nasr <chris@ouroboroscoding.com>
+ * @created 2023-01-20
+ */
+// Ouroboros modules
+import clone from '@ouroboros/clone';
+import { Node } from '@ouroboros/define';
+import { DefineNode } from '@ouroboros/define-mui';
+import mouth, { errors } from '@ouroboros/mouth';
+import TemplateDef from '@ouroboros/mouth/definitions/template.json';
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
+// Material UI
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+// Locale components
+import Variables from './Template/Variables';
+// Format Node
+const oNameNode = new Node(TemplateDef.name);
+/**
+ * Create
+ *
+ * Form for creating a new template
+ *
+ * @name Create
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Create(props) {
+    // State
+    const [record, recordSet] = useState({
+        name: '',
+        variables: {}
+    });
+    // Refs
+    const refName = useRef(null);
+    // Called when record changes
+    function change(field, value) {
+        // Set the new record
+        recordSet(o => {
+            const oRecord = clone(o);
+            oRecord[field] = value;
+            return oRecord;
+        });
+    }
+    // Called to create the template
+    function create() {
+        // Create the data in the system
+        mouth.create('template', record).then(data => {
+            // Add the ID to the record
+            record._id = data;
+            // Let the parent know
+            props.onCreated(clone(record));
+        }, error => {
+            if (error.code === errors.body.DB_DUPLICATE) {
+                refName.current?.error('Duplicate');
+            }
+            else {
+                if (props.onError) {
+                    props.onError(error);
+                }
+                else {
+                    throw new Error(JSON.stringify(error));
+                }
+            }
+        });
+    }
+    // Render
+    return (React.createElement(Paper, { className: "padding" },
+        React.createElement("h2", null, "Create new Template"),
+        React.createElement(Grid, { container: true, spacing: 2 },
+            React.createElement(Grid, { item: true, lg: 6, md: 12, className: "field" },
+                React.createElement(Typography, null,
+                    React.createElement("strong", null, "Name")),
+                React.createElement(DefineNode, { label: "none", name: "name", node: oNameNode, onChange: value => change('name', value), onEnterPressed: create, ref: refName, type: "create", value: record.name || null })),
+            React.createElement(Grid, { item: true, lg: 6, md: 12 },
+                React.createElement(Typography, null,
+                    React.createElement("strong", null, "Variables")),
+                React.createElement(Variables, { onChange: value => change('variables', value), value: record.variables || {} })),
+            React.createElement(Grid, { item: true, xs: 12, className: "actions" },
+                props.onCancel &&
+                    React.createElement(Button, { variant: "contained", color: "secondary", onClick: props.onCancel }, "Cancel"),
+                React.createElement(Button, { variant: "contained", color: "primary", onClick: create }, "Create Template")))));
+}
+// Valid props
+Create.propTypes = {
+    onCancel: PropTypes.func,
+    onCreated: PropTypes.func.isRequired,
+    onError: PropTypes.func.isRequired,
+};