namirasoft-site-react 1.3.40 → 1.3.42

package/src/components/NSInputSearch.tsx

@@ -5,48 +5,41 @@ import Styles from "./NSInputSearch.module.css";
 import IconInputSearch from '../assets/images/icon-input-search.svg';
 
 export interface NSInputSearchProps
-{}
+{ 
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
 
 export interface NSInputSearchState
 {
     value: string;
 }
 
-export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSearchState> {
+export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSearchState>
+{
     constructor(props: NSInputSearchProps)
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
-        this.keyDownEvent = this.keyDownEvent.bind(this);
-    }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
-    {
-        this.setState({ value: e.target.value });
-    }
-    setDefaultValue(value: string): void
-    {
-        this.setState({ value });
+		this.setValue = this.setValue.bind(this);
+		this.onChanged = this.onChanged.bind(this);
     }
     getValue(): string
     {
         return this.state.value;
     }
-    onChanged(e: React.ChangeEvent<HTMLInputElement>): void
+    setValue(value: string): void
     {
-        this.setValue(e);
+        this.setState({ value });
     }
-    keyDownEvent(event: React.KeyboardEvent<HTMLDivElement>)
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        if (event.code === "Enter")
-        {
-            //todo
-            console.log("function")
-        }
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -61,8 +54,7 @@ export class NSInputSearch extends React.Component<NSInputSearchProps, NSInputSe
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
-                    onKeyDown={this.keyDownEvent}
+                    onChange={this.onChanged}
                     type="text"
                     className={Styles.ns_input}
                     placeholder="Search"

package/src/components/NSInputTime.tsx

@@ -7,6 +7,8 @@ import IconInputTime from '../assets/images/icon-input-time.svg';
 export interface NSInputTimeProps
 {
     title: string;
+    defaultValue?: string;
+    onChanged?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export interface NSInputTimeState
@@ -19,23 +21,25 @@ export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeSt
     {
         super(props);
         this.state = {
-            value: "",
+            value: props.defaultValue ?? "",
         };
-        this.setValue = this.setValue.bind(this);
         this.getValue = this.getValue.bind(this);
-        this.setDefaultValue = this.setDefaultValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+        this.onChanged = this.onChanged.bind(this);
     }
-    setValue(e: React.ChangeEvent<HTMLInputElement>): void
+    getValue(): string
     {
-        this.setState({ value: e.target.value });
+        return this.state.value;
     }
-    setDefaultValue(value: string): void
+    setValue(value: string): void
     {
         this.setState({ value });
     }
-    getValue(): string
+    private onChanged(e: React.ChangeEvent<HTMLInputElement>): void
     {
-        return this.state.value;
+        this.setValue(e.target.value);
+        if (this.props.onChanged)
+            this.props.onChanged(e);
     }
     override render()
     {
@@ -51,7 +55,7 @@ export class NSInputTime extends React.Component<NSInputTimeProps, NSInputTimeSt
                 />
                 <input
                     value={this.state.value}
-                    onChange={this.setValue}
+                    onChange={this.onChanged}
                     type="time"
                     className={Styles.ns_input}
                     placeholder="21:44:06"

package/src/components/NSTable.module.css

@@ -1,25 +1,20 @@
-.ns_project_list_container {}
-
 .ns_table {
     display: flex;
     flex-direction: column;
-    padding: 0;
     color: rgba(20, 27, 92, 1);
-
 }
 
 .ns_table thead {
     clip: rect(0 0 0 0);
     position: fixed;
-
 }
 
 .ns_table tr {
     border-radius: 8px;
     padding: 16px;
-    margin: 10px;
     display: block;
     background-color: rgba(20, 27, 92, 0.3);
+    margin: 16px 0;
 }
 
 .ns_table td {
@@ -35,13 +30,42 @@
     float: left;
     font-weight: bold;
     text-transform: uppercase;
+}
+
+/* Button Group  */
+.ns_button_group {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+/* Modal */
+.ns_modal {
+    position: fixed;
+    height: fit-content;
+    top: 25%;
+    left: 0;
+    border-radius: 8px;
+    padding: 24px;
+    margin: 0 16px;
+    background-color: rgba(188, 194, 244, 1);
+    z-index: 10;
+    color: rgba(20, 27, 92, 1);
+}
 
+.ns_modal a {
+    float: right;
 }
 
-@media screen and (min-width: 600px) {
+.modal img {
+    width: 32px;
+    height: 32px;
+    right: 0;
+}
+
+@media screen and (min-width: 768px) {
     .ns_table {
         color: #000000;
-
     }
 
     .ns_table thead {
@@ -53,7 +77,6 @@
 
     .ns_table tbody {
         background-color: rgba(20, 27, 92, 0.3);
-
     }
 
     .ns_table tr {
@@ -89,6 +112,14 @@
         text-transform: uppercase;
     }
 
+    /* Button Group  */
+    .ns_button_group {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
     @media screen and (min-width: 990px) {
         .ns_table {
             padding: 0 48px;
@@ -101,5 +132,15 @@
         .ns_table tr {
             font-size: 24px;
         }
+
+        /* Search Input  */
+        .ns_search_input {
+            padding: 0 40px;
+        }
+
+        /* Button Group  */
+        .ns_button_group {
+            padding: 0 48px;
+        }
     }
 }

package/src/components/NSTable.tsx

@@ -1,5 +1,9 @@
 "use client";
 
+import NSButtonGroup from './NSButtonGroup';
+import { NSInputSearch } from './NSInputSearch';
+import { NSPagination } from './NSPagination';
+import { NSSpace, NSSpaceSizeType } from './NSSpace';
 import Styles from './NSTable.module.css';
 import { Component } from 'react';
 
@@ -16,6 +20,7 @@ export interface NSTableState<RowType>
 {
     columns: { [key: string]: string };
     rows: RowType[];
+    modalState: boolean
 }
 
 export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableState<RowType>>
@@ -23,7 +28,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
     constructor(props: NSTableProps<RowType>)
     {
         super(props);
-        this.state = { columns: props.columns, rows: props.rows };
+        this.state = { columns: props.columns, rows: props.rows, modalState: false };
     }
     setColumns(columns: { [key: string]: string })
     {
@@ -37,8 +42,12 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
     {
         let column_keys = Object.keys(this.state.columns);
         return (
-            <div className={Styles.ns_project_list_container}>
-                <table className={Styles.ns_table}>
+            <div className={`container ${Styles.ns_project_list_container}`}>
+                <section className={Styles.ns_search_input}>
+                    <NSInputSearch />
+                </section>
+                <NSSpace size={NSSpaceSizeType.SMALL} />
+                <table className={Styles.ns_table} >
                     <thead className={Styles.ns_thead}>
                         <tr>
                             {column_keys.map(column_key => <th key={column_key} scope="col">{this.state.columns[column_key]}</th>)}
@@ -47,7 +56,7 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                     <tbody className={Styles.ns_tbody}>
                         {
                             this.state.rows.map((row, rowIndex) =>
-                                <tr key={this.props.getRowKey(row, rowIndex)}>
+                                <tr key={this.props.getRowKey(row, rowIndex)} onClick={() => this.setState({ modalState: !this.state.modalState })}>
                                     {
                                         column_keys.map((column, columnIndex) => (
                                             <td {...this.props.getColumnAttributes(column, columnIndex)} data-label={this.state.columns[column]}>
@@ -59,10 +68,20 @@ export class NSTable<RowType> extends Component<NSTableProps<RowType>, NSTableSt
                         }
                     </tbody >
                 </table>
-                <div className={Styles.ns_button_group_desktop}>
-                    <button onClick={() => window.print()} className={Styles.ns_export_button}><img src="/assets/images/export-vector.png" alt="Export Table Data" width={13} height={16} />Export</button>
-                    <button onClick={() => window.location.reload()} className={Styles.ns_refresh_button}><img src="/assets/images/refresh-vector.png" alt="Refresh Table Contnet" width={15} height={16} />Refresh</button>
-                </div>
+                <NSSpace size={NSSpaceSizeType.MICRO} />
+                <section className={Styles.ns_button_group}>
+                    <NSPagination size={50} page={5} />
+                    <NSSpace size={NSSpaceSizeType.SMALL} />
+                    <NSButtonGroup />
+                </section>
+                <NSSpace size={NSSpaceSizeType.SMALL} />
+                <section onClick={() => this.setState({ modalState: !this.state.modalState })} className={Styles.ns_modal} style={{ display: this.state.modalState ? "block" : "none" }}>
+                    <a><img src='/assets/images/close-vector.png' /></a>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur vitae diam non enim vestibulum interdum. Duis condimentum augue id magna semper rutrum. Nullam sit amet magna in magna gravida vehicula. Vestibulum erat nulla, ullamcorper nec, rutrum non, nonummy ac, erat. In laoreet, magna id viverra tincidunt, sem odio bibendum justo, vel imperdiet sapien wisi sed libero. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Morbi imperdiet, mauris ac auctor dictum, nisl ligula egestas nulla, et sollicitudin sem purus in lacus. Mauris dictum facilisis augue. Phasellus faucibus molestie nisl. Aliquam ante. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor suscipit diam nulla vel leo.
+                        In convallis. Phasellus rhoncus..
+                    </p>
+                </section>
             </div >
         )
     }

package/src/main.ts

@@ -1,6 +1,7 @@
 export * from "./components/NSButtonBlue";
 export * from "./components/NSButtonBlueVector";
 export * from "./components/NSButtonGreen";
+export * from "./components/NSButtonGroup";
 export * from "./components/NSButtonRed";
 export * from "./components/NSCard";
 export * from "./components/NSEntityCardBackground";