Changes from SPA to MPA

resources/js/components/Settings/SettingsInput.js

@@ -9,12 +9,21 @@ export default class SettingsInput extends Component {
         this.state = {
             type: this.props.type,
             name: this.props.name,
+            displayName: (this.props.name) ? this.formatName(this.props.name) : '',
             value: (this.props.value) ? this.props.value : '',
             classes: this.props.classes,
             id: this.props.id,
             label: (this.props.label) ? this.props.label : false,
             readonly: true,
             description: (this.props.description) ? this.props.description : false,
+            options: this.props.options ? this.props.options : [],
+            hideDescription: this.props.hideDescription ? true : false,
+            min: this.props.min ? this.props.min : null,
+            max: this.props.max ? this.props.max : null,
+            url: this.props.url,
+            inline: this.props.inline ? 'd-inline-block' : 'd-block',
+            btnType: this.props.btnType,
+            earlyReturn: this.props.earlyReturn ? true : false,
         }
     }
 
@@ -24,15 +33,21 @@ export default class SettingsInput extends Component {
         });
     }
 
+    formatName(name) {
+        name = name.split('_').join(' ');
+
+        return name.charAt(0).toUpperCase() + name.slice(1);
+    }
+
     handleInput = (evt) => {
         var val = evt.target.value;
 
         if(this.state.type === 'checkbox') {
-            val = e.target.checked;
+            val = evt.target.checked;
         }
 
-        this.props.handleInput(
-            this.state.name.split(' ').join('_'),
+        this.props.handler(
+            this.state.name,
             val
         );
 
@@ -49,42 +64,120 @@ export default class SettingsInput extends Component {
         return false;
     }
 
-    generateInput = () => {
-        var disabled = (this.state.readonly) ? true : false;
-
+    generateNumberInput(disabled) {
         return <Form.Control
-                    name={this.state.name}
-                    type={this.state.type}
-                    defaultValue={this.state.value}
-                    disabled={disabled}
-                    onInput={this.handleInput} />
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            min={this.state.min}
+            max={this.state.max}
+            onInput={this.handleInput} />
     }
 
-    render() {
-        var input = this.generateInput();
-        var id = this.state.id;
-        var readonly = this.state.readonly;
-        var label = this.state.label;
-        var description = this.state.description;
+    generateSelectInput(disabled) {
+        return (
+            <Form.Control
+                as="select"
+                name={this.state.name}
+                type={this.state.type}
+                defaultValue={this.state.value}
+                disabled={disabled}
+                onInput={this.handleInput}
+            >
+                {this.state.options.map((option,i) => {
+                    return <option key={i} value={option.value}>{option.name}</option>
+                })}
+            </Form.Control>
+        );
+    }
+
+    generateCheckboxInput(disabled) {
+        return <Form.Control
+            custom
+            className="ml-2"
+            name={this.state.name}
+            type={this.state.type}
+            defaultChecked={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput} />
+    }
+
+    generateTextInput(disabled) {
+        return <Form.Control
+            name={this.state.name}
+            type={this.state.type}
+            defaultValue={this.state.value}
+            disabled={disabled}
+            onInput={this.handleInput} />
+    }
+
+    generateButtonGetInput() {
+        var url = this.state.url;
 
         return (
-            <Form.Group controlId={id}>
-                {label &&
-                    <Form.Label dangerouslySetInnerHTML={{ __html: label }} />
+            <button
+                type="button"
+                className={"btn btn-" + this.state.btnType + ' ' + this.state.inline + ' ' + this.state.classes}
+                onClick={() => {
+                    window.axios.get(url)
+                }}
+            >{this.state.displayName}</button>
+        );
+    }
+
+    generateInput = () => {
+        var disabled = (this.state.readonly) ? true : false;
+        var input = null;
+
+        if(this.state.type === 'number') {
+            input = this.generateNumberInput(disabled);
+        }
+
+        if(this.state.type === 'select') {
+            input = this.generateSelectInput(disabled);
+        }
+
+        if(this.state.type === 'checkbox') {
+            input = this.generateCheckboxInput(disabled);
+        }
+
+        if(this.state.type === 'text') {
+            input = this.generateTextInput(disabled);
+        }
+
+        if(this.state.type === 'btn-get') {
+            input = this.generateButtonGetInput();
+        }
+
+        if(this.state.earlyReturn) {
+            return input;
+        }
+
+        return (
+            <Form.Group controlId={this.state.id}>
+                {this.state.label &&
+                    <Form.Label style={{fontSize: '1.25rem'}}>{this.formatName(this.state.name)}</Form.Label>
                 }
 
                 {input}
 
-                {description &&
-                    <p dangerouslySetInnerHTML={{ __html: description }}></p>
+                {this.state.description && !this.state.hideDescription &&
+                    <p className="mt-1 text-muted" dangerouslySetInnerHTML={{ __html: this.state.description }}></p>
                 }
 
-                {readonly &&
+                {this.state.readonly &&
                     <Form.Text className="text-muted">This setting is defined as an env variable and is not editable.</Form.Text>
                 }
             </Form.Group>
         );
     }
+
+    render() {
+        var input = this.generateInput();
+
+        return input;
+    }
 }
 
 if (document.getElementById('SettingsInput')) {