feat(component): Enable TextField to display naked field

ref: #1 nofusscomputing/centurion_erp#248 nofusscomputing/centurion_erp#307 nofusscomputing/centurion_erp#319

src/components/form/Textfield.jsx

@@ -1,19 +1,44 @@
+import React from "react";
 
 const TextField = ({
-    label,
-    helptext=null,
-    required=false,
-    error_text=null,
-    value=null
+    error_text = null,
+    fieldset = true,
+    helptext = null,
+    id = null,
+    label = null,
+    onchange = null,
+    required = false,
+    value = null
 }) => {
 
-    return (
-        <fieldset>
-            <label className="name">{label}</label>
-            <input className="common-field" required={required} type="text" placeholder={helptext} value={value == null ? '' : value} />
-            <span className="error-text">{error_text}</span>
-        </fieldset>
-     );
+    let field = (
+        <input
+            className="common-field"
+            id={id}
+            onChange={e => {
+                onchange(e.target.value)
+            } }
+            placeholder={helptext}
+            required={required}
+            type="text"
+            value={value == null ? '' : value}
+        />
+    )
+
+    if( fieldset == true ) {
+        return (
+            <fieldset>
+                <label className="name">{label}</label>
+                {field}
+                <span className="error-text">{error_text}</span>
+            </fieldset>
+
+        );
+
+    } else {
+
+        return ( field )
+    }
 
 }
 

src/index.css

@@ -1038,6 +1038,35 @@ section .content td {
   border-bottom: 1px solid var(--border-colour);
 }
 
+p.table-pagination {
+  /* background-color: chartreuse; */
+  display: inline-block;
+  padding: 0px
+}
+
+p.table-pagination span {
+  /* background-color: chocolate; */
+  display: inline-block;
+  margin: 0px 10px;
+}
+
+p.table-pagination span.table-pagination-text {
+  /* background-color: chocolate; */
+}
+
+p.table-pagination span.table-pagination-text input {
+  /* background-color: chocolate; */
+  width: 40px;
+  text-align: center;
+  margin: 0px 5px;
+}
+
+
+p.table-pagination span.table-pagination-button {
+  /* background-color: chocolate; */
+  cursor: pointer;
+}
+
 .content form {
   display: flexbox;
 }
@@ -1069,19 +1098,25 @@ section .content td {
   padding: 5px 0px;
 }
 
-.content form fieldset .common-field {
+.common-field {
   background-color: var(--background-colour-form-field);
   color: var(--text-colour);
   font-size: inherit;
   line-height: 30px;
-  min-width: 400px;
 }
 
-.content form fieldset input {
+
+input.common-field {
   border: none;
   border-bottom: 1px solid var(--border-colour-form-field);
 }
 
+
+.content form fieldset .common-field {
+  min-width: 400px;
+}
+
+
 .content form fieldset textarea {
   border-color: var(--border-colour-form-field);
 }