namirasoft-site-react 1.3.39 → 1.3.42

package/src/components/NSTable.module.css

@@ -1,113 +1,146 @@
-.ns_thead th {
-    background-color: rgba(20, 27, 92, 1);
-    font-size: 16px;
-    font-weight: 300;
-    padding: 16px;
-    color: white;
-    font-size: 16px;
-}
-
-.ns_tbody td {
-    background-color: rgb(173, 178, 206);
+.ns_table {
+    display: flex;
+    flex-direction: column;
     color: rgba(20, 27, 92, 1);
-    padding: 8px 16px;
-    font-size: 10px;
-    font-size: 16px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+}
 
+.ns_table thead {
+    clip: rect(0 0 0 0);
+    position: fixed;
 }
 
-.ns_table {
-    width: 100%;
+.ns_table tr {
+    border-radius: 8px;
+    padding: 16px;
+    display: block;
+    background-color: rgba(20, 27, 92, 0.3);
+    margin: 16px 0;
 }
 
-.ns_project_list_container {
-    text-align: left;
-    border-top-left-radius: 8px;
-    border-top-right-radius: 8px;
+.ns_table td {
+
+    display: block;
+    padding: 8px 0;
+    font-size: .8em;
+    text-align: right;
 }
 
-.ns_button_group_desktop {
-    display: flex;
-    flex-direction: row;
-    justify-content: end;
-    gap: 48px;
-    padding: 24px 0;
+.ns_table td::before {
+    content: attr(data-label);
+    float: left;
+    font-weight: bold;
+    text-transform: uppercase;
 }
 
-.ns_button_group_desktop button {
+/* Button Group  */
+.ns_button_group {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    justify-content: center;
-    font-size: 16px;
+}
+
+/* Modal */
+.ns_modal {
+    position: fixed;
+    height: fit-content;
+    top: 25%;
+    left: 0;
     border-radius: 8px;
-    width: 128px;
-    height: 48px;
-    gap: 10px;
-    text-decoration: none;
-    color: black;
-    background-color: transparent;
+    padding: 24px;
+    margin: 0 16px;
+    background-color: rgba(188, 194, 244, 1);
+    z-index: 10;
+    color: rgba(20, 27, 92, 1);
 }
 
-.ns_export_button {
-    border: 1px solid rgba(255, 148, 50, 1);
+.ns_modal a {
+    float: right;
 }
 
-.ns_refresh_button {
-    border: 1px solid rgba(3, 119, 255, 1);
+.modal img {
+    width: 32px;
+    height: 32px;
+    right: 0;
 }
 
-@media only screen and (max-width:600px) {
-    .ns_project_list_container {
-        overflow: auto;
+@media screen and (min-width: 768px) {
+    .ns_table {
+        color: #000000;
     }
-}
 
-/* table-satus */
-.ns_inqueue_status {
-    color: white;
-    background-color: rgba(255, 148, 50, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table thead {
+        position: static;
+        background-color: rgba(20, 27, 92, 1);
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+    }
 
-.ns_reserving_status {
-    color: white;
-    background-color: rgba(255, 79, 79, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table tbody {
+        background-color: rgba(20, 27, 92, 0.3);
+    }
 
-.ns_done-status {
-    color: white;
-    background-color: rgba(6, 209, 130, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
-}
+    .ns_table tr {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
+        padding: 12px 16px;
+        margin: 0;
+        border-radius: 0;
+        border-bottom: 1px solid rgba(20, 27, 92, 0.3);
+        background-color: transparent;
+    }
 
-.ns_inprogress_status {
-    color: white;
-    background-color: rgba(230, 208, 19, 1);
-    font-size: 12px;
-    width: 96px;
-    height: 24px;
-    border-radius: 24px;
-    border: none;
-    text-align: center;
-    padding-top: 2px;
+    .ns_table td {
+        text-align: left;
+        display: flex;
+        align-items: start;
+        padding: 0;
+        margin: 0;
+    }
+
+    .ns_table th {
+        font-size: 16px;
+        font-weight: 300;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+    }
+
+    .ns_table td::before {
+        content: attr(none);
+        float: left;
+        font-weight: bold;
+        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;
+        }
+
+        .ns_table thead {
+            font-size: 24px;
+        }
+
+        .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,10 +56,10 @@ 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)}>
+                                            <td {...this.props.getColumnAttributes(column, columnIndex)} data-label={this.state.columns[column]}>
                                                 {this.props.getCell(row, column, rowIndex, columnIndex)}
                                             </td>
                                         ))
@@ -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";