@ouroboros/mouth-mui 1.0.0

package/src/components/pages/Templates/Template/Variables.js

@@ -0,0 +1,91 @@
+/**
+ * Communications Templates Variables
+ *
+ * Variables 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 { omap } from '@ouroboros/tools';
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useRef } from 'react';
+// Material UI
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
+// Create hash node
+const oNameNode = new Node({
+    __type__: 'string',
+    __regex__: '^[a-z_]+$'
+});
+/**
+ * Variables
+ *
+ * Handles template locale management
+ *
+ * @name Variables
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Variables(props) {
+    // Refs
+    const refName = useRef(null);
+    const refValue = useRef(null);
+    // Called when a new variable is added
+    function add() {
+        // Clone the current value
+        const oValue = clone(props.value);
+        // If we have references to the inputs
+        if (refName.current && refValue.current) {
+            // Add the new item to it
+            oValue[refName.current.value] = refValue.current.value;
+            // Reset the name and value
+            refName.current.reset();
+            refValue.current.value = '';
+        }
+        // Let the parent know
+        props.onChange(oValue);
+    }
+    // Called when an existing variables needs to be removed
+    function remove(name) {
+        // Clone the current value
+        const oValue = clone(props.value);
+        // Delete the given key if it exists
+        if (name in oValue) {
+            delete oValue[name];
+        }
+        // Let the parent know
+        props.onChange(oValue);
+    }
+    // Render
+    return (React.createElement(Box, null,
+        React.createElement(Grid, { container: true, spacing: 1 },
+            omap(props.value, (v, k) => React.createElement(React.Fragment, null,
+                React.createElement(Grid, { item: true, xs: 5 }, k),
+                React.createElement(Grid, { item: true, xs: 5 }, v),
+                React.createElement(Grid, { item: true, xs: 2 },
+                    React.createElement(Tooltip, { title: "More" },
+                        React.createElement(IconButton, { className: "icon", onClick: ev => remove(k) },
+                            React.createElement("i", { className: "fa-solid fa-trash-alt" })))))),
+            React.createElement(Grid, { item: true, xs: 5, className: "field" },
+                React.createElement(DefineNode, { label: "placeholder", name: "name", node: oNameNode, placeholder: "Name", ref: refName, type: "create", variant: "outlined" })),
+            React.createElement(Grid, { item: true, xs: 5, className: "field" },
+                React.createElement(TextField, { inputRef: refValue, placeholder: "testing value" })),
+            React.createElement(Grid, { item: true, xs: 2 },
+                React.createElement(Tooltip, { title: "More" },
+                    React.createElement(IconButton, { className: "icon", onClick: add },
+                        React.createElement("i", { className: "fa-solid fa-plus" })))))));
+}
+// Valid props
+Variables.propTypes = {
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.objectOf(PropTypes.string).isRequired
+};

package/src/components/pages/Templates/Template/Variables.tsx

@@ -0,0 +1,138 @@
+/**
+ * Communications Templates Variables
+ *
+ * Variables 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 { omap } from '@ouroboros/tools';
+
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useRef } from 'react';
+
+// Material UI
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import TextField from '@mui/material/TextField';
+import Tooltip from '@mui/material/Tooltip';
+
+// Create hash node
+const oNameNode = new Node({
+	__type__: 'string',
+	__regex__: '^[a-z_]+$'
+})
+
+// Types
+export type VariablesProps = {
+	onChange: (variables: Record<string, string>) => void,
+	value: Record<string, string>
+}
+
+/**
+ * Variables
+ *
+ * Handles template locale management
+ *
+ * @name Variables
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Variables(props: VariablesProps) {
+
+	// Refs
+	const refName = useRef<DefineNode>(null);
+	const refValue = useRef<HTMLInputElement>(null);
+
+	// Called when a new variable is added
+	function add() {
+
+		// Clone the current value
+		const oValue: Record<string, string> = clone(props.value);
+
+		// If we have references to the inputs
+		if(refName.current && refValue.current) {
+
+			// Add the new item to it
+			oValue[refName.current.value] = refValue.current.value;
+
+			// Reset the name and value
+			refName.current.reset();
+			refValue.current.value = '';
+		}
+
+		// Let the parent know
+		props.onChange(oValue);
+	}
+
+	// Called when an existing variables needs to be removed
+	function remove(name: string) {
+
+		// Clone the current value
+		const oValue = clone(props.value);
+
+		// Delete the given key if it exists
+		if(name in oValue) {
+			delete oValue[name];
+		}
+
+		// Let the parent know
+		props.onChange(oValue);
+	}
+
+	// Render
+	return (
+		<Box>
+			<Grid container spacing={1}>
+				{omap(props.value, (v,k) =>
+					<React.Fragment>
+						<Grid item xs={5}>{k}</Grid>
+						<Grid item xs={5}>{v}</Grid>
+						<Grid item xs={2}>
+							<Tooltip title="More">
+								<IconButton className="icon" onClick={ev => remove(k)}>
+									<i className="fa-solid fa-trash-alt" />
+								</IconButton>
+							</Tooltip>
+						</Grid>
+					</React.Fragment>
+				)}
+				<Grid item xs={5} className="field">
+					<DefineNode
+						label="placeholder"
+						name="name"
+						node={oNameNode}
+						placeholder="Name"
+						ref={refName}
+						type="create"
+						variant="outlined"
+					/>
+				</Grid>
+				<Grid item xs={5} className="field">
+					<TextField inputRef={refValue} placeholder="testing value" />
+				</Grid>
+				<Grid item xs={2}>
+					<Tooltip title="More">
+						<IconButton className="icon" onClick={add}>
+							<i className="fa-solid fa-plus" />
+						</IconButton>
+					</Tooltip>
+				</Grid>
+			</Grid>
+		</Box>
+	);
+}
+
+// Valid props
+Variables.propTypes = {
+	onChange: PropTypes.func.isRequired,
+	value: PropTypes.objectOf(PropTypes.string).isRequired
+}

package/src/components/pages/Templates/Template/index.d.ts

@@ -0,0 +1,90 @@
+/**
+ * Communications Templates Template
+ *
+ * Template 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 { rightsStruct } from '@ouroboros/brain-mui';
+export type contentStruct = {
+    _id?: string;
+    _created?: number;
+    _updated?: number;
+    template: string;
+    locale: string;
+    content?: string;
+    subject?: string;
+    text?: string;
+    type: typeOption;
+    html?: string;
+};
+export type templateStruct = {
+    _id?: string;
+    _created?: number;
+    _updated?: number;
+    name: string;
+    variables: Record<string, string>;
+};
+export type typeOption = 'email' | 'sms';
+export type TemplateProps = {
+    locales: Record<string, string>;
+    mobile: boolean;
+    onChange: (template: templateStruct) => void;
+    onError: (error: responseErrorStruct) => void;
+    onContent: (type: string) => void;
+    rights: {
+        template: rightsStruct;
+        content: rightsStruct;
+    };
+    value: templateStruct;
+};
+/**
+ * Template
+ *
+ * Handles a single template
+ *
+ * @name Template
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+declare function Template(props: TemplateProps): JSX.Element;
+declare namespace Template {
+    var propTypes: {
+        locales: PropTypes.Validator<{
+            [x: string]: string | null | undefined;
+        }>;
+        mobile: PropTypes.Validator<boolean>;
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        onError: PropTypes.Validator<(...args: any[]) => any>;
+        onContent: PropTypes.Validator<(...args: any[]) => any>;
+        rights: PropTypes.Requireable<Required<PropTypes.InferProps<{
+            template: PropTypes.Validator<Required<PropTypes.InferProps<{
+                create: PropTypes.Requireable<boolean>;
+                delete: PropTypes.Requireable<boolean>;
+                read: PropTypes.Requireable<boolean>;
+                update: PropTypes.Requireable<boolean>;
+            }>>>;
+            content: PropTypes.Validator<Required<PropTypes.InferProps<{
+                create: PropTypes.Requireable<boolean>;
+                delete: PropTypes.Requireable<boolean>;
+                read: PropTypes.Requireable<boolean>;
+                update: PropTypes.Requireable<boolean>;
+            }>>>;
+        }>>>;
+        value: PropTypes.Validator<Required<PropTypes.InferProps<{
+            _id: PropTypes.Validator<string>;
+            _created: PropTypes.Requireable<number>;
+            _updated: PropTypes.Requireable<number>;
+            name: PropTypes.Validator<string>;
+            variables: PropTypes.Validator<{
+                [x: string]: string | null | undefined;
+            }>;
+        }>>>;
+    };
+}
+export default Template;

package/src/components/pages/Templates/Template/index.js

@@ -0,0 +1,207 @@
+/**
+ * Communications Templates Template
+ *
+ * Template 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';
+import { afindi, omap, ucfirst } from '@ouroboros/tools';
+// NPM modules
+import PropTypes from 'prop-types';
+import React, { useRef, useState } from 'react';
+// Material UI
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Paper from '@mui/material/Paper';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Tooltip from '@mui/material/Tooltip';
+import Typography from '@mui/material/Typography';
+// Local components
+import ContentCreate from './Content/Create';
+import ContentUpdate from './Content/Update';
+import ContentView from './Content/View';
+import Variables from './Variables';
+// Format Node
+const oNameNode = new Node(TemplateDef.name);
+/**
+ * Template
+ *
+ * Handles a single template
+ *
+ * @name Template
+ * @access public
+ * @param Object props Properties passed to the component
+ * @returns React.Component
+ */
+export default function Template(props) {
+    // State
+    const [contents, contentsSet] = useState(false);
+    const [tab, tabSet] = useState(0);
+    const [edit, editSet] = useState(false);
+    const [view, viewSet] = useState(false);
+    // Refs
+    const refName = useRef(null);
+    // Called when the update record changes
+    function change(field, value) {
+        // Set the new record
+        editSet(o => {
+            const oRecord = clone(o);
+            oRecord[field] = value;
+            return oRecord;
+        });
+    }
+    // Called when a single conent record is created
+    function contentCreated(content) {
+        // Notify the parent
+        props.onContent('create');
+        // Clone the current contents
+        const lContents = clone(contents);
+        // Add the new record to the end of the array
+        lContents.push(content);
+        // Set the new contents
+        contentsSet(lContents);
+    }
+    // Called when a single content record is updated
+    function contentUpdated(content) {
+        // Notify the parent
+        props.onContent('update');
+        // Find the index of the record
+        const i = afindi(contents, '_id', content._id);
+        // If we got an index
+        if (i > -1) {
+            // Clone the current contents, merge the current record with the
+            //	new one, and set the new contents
+            const lContents = clone(contents);
+            lContents[i] = { ...lContents[i], ...content };
+            contentsSet(lContents);
+        }
+    }
+    // Called to delete the template
+    function remove() {
+        throw new Error('Remove template not implemented');
+    }
+    // Called to update the template
+    function update() {
+        // Create the data in the system
+        mouth.update('template', edit).then((data) => {
+            // Hide the form
+            editSet(false);
+            // Let the parent know
+            props.onChange(edit);
+        }, (error) => {
+            if (error.code === errors.body.DB_DUPLICATE) {
+                refName.current?.error('Duplicate');
+            }
+            else {
+                return false;
+            }
+        });
+    }
+    // View toggle
+    function viewToggle() {
+        if (view) {
+            viewSet(false);
+        }
+        else {
+            if (contents === false) {
+                mouth.read('template/contents', {
+                    template: props.value._id
+                }).then(contentsSet);
+            }
+            viewSet(true);
+        }
+    }
+    // Render
+    return (React.createElement(Paper, { className: "template padding" },
+        React.createElement(Box, { className: "flexColumns" },
+            React.createElement(Box, { className: "flexGrow link", onClick: viewToggle },
+                React.createElement("h2", null,
+                    ucfirst(props.value.name.replace(/_/g, ' ')),
+                    "\u00A0\u00A0",
+                    React.createElement("i", { className: 'fa-solid fa-angle-' + (view ? 'up' : 'down') }))),
+            React.createElement(Box, { className: "flexStatic" },
+                props.rights.template.update &&
+                    React.createElement(Tooltip, { title: "Edit the Template" },
+                        React.createElement(IconButton, { className: "icon", onClick: ev => editSet(edit ? false : clone(props.value)) },
+                            React.createElement("i", { className: 'fa-solid fa-edit ' + (edit ? 'open' : 'closed') }))),
+                props.rights.template.delete &&
+                    React.createElement(Tooltip, { title: "Delete the Template" },
+                        React.createElement(IconButton, { className: "icon", onClick: remove },
+                            React.createElement("i", { className: "fa-solid fa-trash-alt" }))))),
+        edit &&
+            React.createElement(React.Fragment, null,
+                React.createElement("hr", null),
+                React.createElement("h3", null, "Update 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: update, ref: refName, type: "update", value: edit.name })),
+                    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: edit.variables || {} })),
+                    React.createElement(Grid, { item: true, xs: 12, className: "actions" },
+                        React.createElement(Button, { variant: "contained", color: "secondary", onClick: () => editSet(false) }, "Cancel"),
+                        React.createElement(Button, { variant: "contained", color: "primary", onClick: update }, "Save")))),
+        !edit && view &&
+            React.createElement(React.Fragment, null,
+                React.createElement("hr", null),
+                React.createElement(Grid, { container: true, spacing: 1 },
+                    React.createElement(Grid, { item: true, xs: 12, md: 9, xl: 10 },
+                        React.createElement(Tabs, { onChange: (ev, val) => tabSet(val), scrollButtons: "auto", variant: "scrollable", value: tab },
+                            contents && contents.map(o => React.createElement(Tab, { key: o._id, label: props.locales[o.locale] + ' ' + o.type })),
+                            props.rights.content.create &&
+                                React.createElement(Tab, { label: React.createElement("i", { className: "fa-solid fa-plus" }) })),
+                        React.createElement(Box, { className: "padding" },
+                            React.createElement("br", null),
+                            (contents && tab < contents.length &&
+                                (props.rights.content.update ?
+                                    React.createElement(ContentUpdate, { key: contents[tab]._id, mobile: props.mobile, onError: props.onError, onUpdated: contentUpdated, value: contents[tab] })
+                                    :
+                                        React.createElement(ContentView, { key: contents[tab]._id, mobile: props.mobile, onError: props.onError, value: contents[tab] }))) ||
+                                ((props.rights.content.create && contents && tab === contents.length) &&
+                                    React.createElement(ContentCreate, { locales: props.locales, mobile: props.mobile, onCreated: contentCreated, onError: props.onError, template: props.value._id })))),
+                    React.createElement(Grid, { item: true, xs: 12, md: 3, xl: 2 },
+                        React.createElement("h4", null, "Available Variables"),
+                        props.value && omap(props.value.variables, (v, k) => React.createElement(Typography, { key: k }, '{' + k + '}')))))));
+}
+// Valid props
+Template.propTypes = {
+    locales: PropTypes.objectOf(PropTypes.string).isRequired,
+    mobile: PropTypes.bool.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onError: PropTypes.func.isRequired,
+    onContent: PropTypes.func.isRequired,
+    rights: PropTypes.exact({
+        template: PropTypes.exact({
+            create: PropTypes.bool,
+            delete: PropTypes.bool,
+            read: PropTypes.bool,
+            update: PropTypes.bool
+        }).isRequired,
+        content: PropTypes.exact({
+            create: PropTypes.bool,
+            delete: PropTypes.bool,
+            read: PropTypes.bool,
+            update: PropTypes.bool
+        }).isRequired
+    }),
+    value: PropTypes.exact({
+        _id: PropTypes.string.isRequired,
+        _created: PropTypes.number,
+        _updated: PropTypes.number,
+        name: PropTypes.string.isRequired,
+        variables: PropTypes.objectOf(PropTypes.string).isRequired
+    }).isRequired
+};