namirasoft-site-react 1.3.140 → 1.3.142

package/src/components/NSFilterBoxDialog.tsx

@@ -8,7 +8,8 @@ import { NSButtonRed } from './NSButtonRed';
 
 interface INSFilterBoxDialogProps extends IBaseComponentProps
 {
-	title: string
+	title: string;
+	onCloseDialog: () => void;
 }
 
 interface INSFilterBoxDialogState
@@ -22,7 +23,8 @@ export class NSFilterBoxDialog extends Component<INSFilterBoxDialogProps, INSFil
 	{
 		return (
 			<div className={Styles.ns_dialog_holder}>
-				<button className={Styles.ns_dialog_close}>
+				<button className={Styles.ns_dialog_close}
+					onClick={this.props.onCloseDialog}>
 					<img src="https://static.namirasoft.com/image/concept/close/blue.svg" alt="close-dialog" width={24} height={24} />
 				</button>
 				<h3 className={Styles.ns_dialog_title}>
@@ -64,7 +66,7 @@ export class NSFilterBoxDialog extends Component<INSFilterBoxDialogProps, INSFil
 
 					<NSButtonBlue
 						title='Cancel'
-						onClick={() => { }}
+						onClick={this.props.onCloseDialog}
 					/>
 				</div>
 			</div>

package/src/components/NSFilterItem.module.css

@@ -0,0 +1,24 @@
+.ns_selected_holder { 
+	position: relative;
+}
+.ns_selected_item_parent {
+	padding: 6px;
+	border: solid 1px #0377FF;
+	border-radius: 8px;
+	background-color: #fff;
+	color: #141B5C;
+	cursor: pointer;
+}
+
+.ns_selected_close_icon {
+	outline: none;
+	border: none;
+	background: none;
+	padding-top: 4px;
+	border-left: solid 1px #0377FF;
+}
+
+.ns_dialog_parent { 
+position: absolute;
+
+}

package/src/components/NSFilterItem.tsx

@@ -0,0 +1,72 @@
+import { Component } from 'react';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import Styles from './NSFilterItem.module.css'
+import { NSFilterBoxDialog } from './NSFilterBoxDialog';
+import { FilterItem } from 'namirasoft-core';
+
+interface INSFilterItemProps extends IBaseComponentProps
+{
+	item: FilterItem
+	removeSelected: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, text: string) => void
+}
+
+interface INSFilterItemState
+{
+	showDialog: boolean
+}
+
+export class NSFilterItem extends Component<INSFilterItemProps, INSFilterItemState>
+{
+	constructor(props: INSFilterItemProps)
+	{
+		super(props);
+		this.state = {
+			showDialog: false
+		}
+		this.onClsoeDialog = this.onClsoeDialog.bind(this);
+		this.onShowDialog = this.onShowDialog.bind(this);
+	}
+
+	onShowDialog()
+	{
+		this.setState({
+			showDialog: true
+		})
+	}
+
+	onClsoeDialog()
+	{
+		this.setState({
+			showDialog: false
+		})
+	}
+
+	override render()
+	{
+		return (
+			<div className={Styles.ns_selected_holder}>
+				<div className={Styles.ns_selected_item_parent}
+					onClick={this.onShowDialog}
+				>
+					<span>{ this.props.item.column} </span>
+					<button
+						className={Styles.ns_selected_close_icon}
+						onClick={(e) => this.props.removeSelected(e, this.props.item.column)}
+					>
+						<img src="https://static.namirasoft.com/image/concept/close/blue.svg" alt="close" width={24} height={24} />
+					</button>
+				</div>
+
+				{this.state.showDialog &&
+					<div className={Styles.ns_dialog_parent}>
+						<NSFilterBoxDialog
+							onCloseDialog={this.onClsoeDialog}
+							title='Edit Filter'
+
+						/>
+					</div>
+				}
+			</div>
+		);
+	}
+}

package/src/components/NSFooter.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import Styles from "./NSFooter.module.css";
-import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
+import { NamirasoftAPILinkServer, FilterLinkFullRow } from 'namirasoft-api-link';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 
 export interface INSFooterProps extends IBaseComponentProps
@@ -14,8 +14,8 @@ export interface INSFooterProps extends IBaseComponentProps
 
 export interface NSFooterState
 {
-    filters: FilterLinkRow[];
-    selected: FilterLinkRow | null;
+    filters: FilterLinkFullRow[];
+    selected: FilterLinkFullRow | null;
 }
 
 export class NSFooter extends React.Component<INSFooterProps, NSFooterState>
@@ -34,9 +34,9 @@ export class NSFooter extends React.Component<INSFooterProps, NSFooterState>
     override componentDidMount(): void
     {
         let server = new NamirasoftAPILinkServer(console.error);
-        server.filter.GetFilters(this.props.scope, this.props.name).then(filters =>
+        server.filter.ListFilterLinks(this.props.scope, this.props.name, [], null, null).then(filters =>
         {
-            this.setState({ filters });
+            this.setState({ filters: filters.rows });
         });
     }
     private hasChild(id: number): boolean
@@ -79,9 +79,9 @@ export class NSFooter extends React.Component<INSFooterProps, NSFooterState>
                         </div>
                     </div>
                     <div className={`${Styles.ns_footer_copyright}`}>
-                        <span> ©Copyright 2010 -  {new Date().getFullYear()}  </span>{" "} 
-                        <a href="https://namirasoft.com/" target="_blank" rel="noopener noreferrer"> Namira Software Corporation</a>. {" "} 
-						<span > All rights reserved. </span>
+                        <span> ©Copyright 2010 -  {new Date().getFullYear()}  </span>{" "}
+                        <a href="https://namirasoft.com/" target="_blank" rel="noopener noreferrer"> Namira Software Corporation</a>. {" "}
+                        <span > All rights reserved. </span>
                     </div>
                 </div>
             </footer >
@@ -89,14 +89,16 @@ export class NSFooter extends React.Component<INSFooterProps, NSFooterState>
     }
     private render_menu(level: number, parent_id: number | null)
     {
-        let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
+        let fs: FilterLinkFullRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
         return (
             <>
-                {(fs?.map(f => this.render_menuItem(level, f)))}
+                {
+                    (fs?.map(f => this.render_menuItem(level, f)))
+                }
             </>
         );
     }
-    private render_menuItem(level: number, filter: FilterLinkRow)
+    private render_menuItem(level: number, filter: FilterLinkFullRow)
     {
         if (this.hasChild(filter.id))
         {

package/src/components/NSGroupedList.module.css

@@ -0,0 +1,71 @@
+.ns_group_list_parent {
+	width: 100%;
+	max-width: 560px;
+	border-radius: 8px;
+	border: solid 1px #B2BBD9;
+	background-color: #fff;
+	padding-bottom: 16px;
+	height: 250px;
+	overflow: auto;
+}
+
+.ns_group_list_parent::-webkit-scrollbar {
+	width: 1rem;
+}
+
+.ns_group_list_parent::-webkit-scrollbar-track {
+	box-shadow: inset 0 0 6px #E8EBF6;
+}
+
+.ns_group_list_parent::-webkit-scrollbar-thumb {
+	background-color: #A1A4B0;
+	border-radius: 8px;
+}
+
+.ns_group_list {
+	list-style-type: none;
+	color: #141B5C;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	justify-content: flex-start;
+	font-size: 16px;
+	font-weight: 700;
+	width: 100%;
+}
+
+.ns_group_category {
+	display: inline-block;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	padding-left: 8px;
+	border-bottom: solid 1px currentColor;
+	width: 100%;
+}
+
+.ns_group_list li {
+	width: 100%;
+}
+
+.ns_group_item {
+	cursor: pointer;
+	padding: 6px 0 6px 24px;
+	font-size: 16px;
+	font-weight: 300;
+	color: #141B5C;
+	border-bottom: solid 1px currentColor;
+	width: 100%;
+	display: inline-block;
+	transition: all 0.1s;
+}
+
+.ns_group_item:hover {
+	background-color: #B2BBD9;
+	font-weight: 700;
+}
+
+.ns_block {
+	display: block;
+}

package/src/components/NSGroupedList.tsx

@@ -0,0 +1,59 @@
+"use client"
+import { Component } from 'react';
+import { IBaseComponentProps } from '../main';
+import Styles from "./NSGroupedList.module.css"
+
+interface INSGroupedListProps extends IBaseComponentProps
+{
+	groups: {
+		name: string;
+		text: string;
+		sign?: string;
+		operator_name?: string;
+		items: {
+			name: string;
+			text: string;
+		}[];
+	}[];
+	onClick: (group: string, item: string) => void;
+}
+
+interface INSGroupedListState
+{
+
+}
+
+class NSGroupedList extends Component<INSGroupedListProps, INSGroupedListState>
+{
+	override render()
+	{
+		return (
+			<div className={Styles.ns_group_list_parent}>
+				{this.props.groups.map((group, index) =>
+					<ul key={index} className={Styles.ns_group_list}>
+						<span className={Styles.ns_group_category}> {group.name} </span>
+						{
+							group.items.map((item, index) =>
+								<li key={index} onClick={() => this.props.onClick(group.name, item.name)}>
+									<div className={Styles.ns_group_item}>
+										<span>
+											{item.name} {" "}
+											{group.sign && <span>  {group.sign} </span>}
+										</span>
+										{
+											group.operator_name &&
+											<span className={Styles.ns_block}>  {group.operator_name} </span>
+										}
+									</div>
+								</li>
+							)
+						}
+					</ul>
+				)}
+			</div>
+
+		);
+	}
+}
+
+export default NSGroupedList;

package/src/components/NSHeader.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import Styles from "./NSHeader.module.css";
 import NavDropdown from 'react-bootstrap/NavDropdown';
-import { NamirasoftAPILinkServer, FilterLinkRow } from 'namirasoft-api-link';
+import { NamirasoftAPILinkServer, FilterLinkFullRow } from 'namirasoft-api-link';
 import { IBaseComponentProps } from "../props/IBaseComponentProps";
 import Logout from '../assets/images/icon-logout.png';
 export interface INSHeaderProps extends IBaseComponentProps
@@ -19,8 +19,8 @@ export interface INSHeaderProps extends IBaseComponentProps
 
 export interface NSHeaderState
 {
-    filters: FilterLinkRow[];
-    selected: FilterLinkRow | null;
+    filters: FilterLinkFullRow[];
+    selected: FilterLinkFullRow | null;
     showNavbar: boolean;
 }
 
@@ -43,12 +43,12 @@ export class NSHeader extends React.Component<INSHeaderProps, NSHeaderState>
     override componentDidMount(): void
     {
         let server = new NamirasoftAPILinkServer(console.error);
-        server.filter.GetFilters(this.props.scope, this.props.name).then(filters =>
+        server.filter.ListFilterLinks(this.props.scope, this.props.name, [], null, null).then(filters =>
         {
-            this.setState({ filters });
+            this.setState({ filters: filters.rows });
         });
     }
-    private onMenuItemToggled(checked: boolean, selected: FilterLinkRow)
+    private onMenuItemToggled(checked: boolean, selected: FilterLinkFullRow)
     {
         if (checked)
             this.setState({ selected });
@@ -139,14 +139,14 @@ export class NSHeader extends React.Component<INSHeaderProps, NSHeaderState>
     }
     private render_menu(level: number, parent_id: number | null)
     {
-        let fs: FilterLinkRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
+        let fs: FilterLinkFullRow[] = this.state.filters?.filter(f => f.parent_id === parent_id);
         return (
             <div className={`me-auto nav ${Styles.ns_navbar_items_container}`} >
                 {(fs?.map(f => this.render_menuItem(level, f)))}
             </div>
         );
     }
-    private render_menuItem(level: number, filter: FilterLinkRow)
+    private render_menuItem(level: number, filter: FilterLinkFullRow)
     {
         if (this.hasChild(filter.id))
         {

package/src/components/NSLayoutAction.tsx

@@ -48,27 +48,7 @@ export function NSLayoutAction(props: INSLayoutActionProps)
 					/>
 				</div>
 
-				{/* Mobile  */}
-				<div className={`d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
-					<h1 className={Styles.title}>{props.title}</h1>
-					{
-						props.description && lines &&
-						<>
-							<p className={Styles.description}>
-								{
-									lines.map((line, index) =>
-									{
-										return <>
-											{line.trim()}
-											{index != lines.length - 1 && <br />}
-										</>
-									})
-								}
-							</p>
-							<NSSpace size={NSSpaceSizeType.MINI} />
-						</>
-					}
-				</div>
+
 
 				<div className={Styles.ns_actions_hodler}>
 					{filtered_actions.map((action) =>
@@ -82,6 +62,28 @@ export function NSLayoutAction(props: INSLayoutActionProps)
 
 			</div>
 			<NSSpace size={NSSpaceSizeType.SMALL} />
+			{/* Mobile  */}
+			<div className={`container d-block d-lg-none ${Styles.ns_mobile_action_bar_title}`}>
+				<h1 className={Styles.title}>{props.title}</h1>
+				{
+					props.description && lines &&
+					<>
+						<p className={Styles.description}>
+							{
+								lines.map((line, index) =>
+								{
+									return <>
+										{line.trim()}
+										{index != lines.length - 1 && <br />}
+									</>
+								})
+							}
+						</p>
+						<NSSpace size={NSSpaceSizeType.MINI} />
+					</>
+				}
+			</div>
+			<NSSpace size={NSSpaceSizeType.SMALL} />
 			{props.children}
 		</NSLayout>
 	);