namirasoft-site-react 1.3.139 → 1.3.141

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/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/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>
 	);

package/src/components/NSModal.tsx

@@ -6,6 +6,7 @@ export interface INSModalProps extends IBaseComponentProps
 	title?: string;
 	description?: string;
 	show: boolean;
+	column?: string;
 	children?: React.ReactNode;
 	onClose: () => void;
 }
@@ -32,6 +33,12 @@ export function NSModal(props: INSModalProps)
 						classList={[Styles.ns_close_modal]}
 					/>
 					<div className={Styles.ns_modal_content}>
+						{props.column && (
+							<>
+								<NSTitle title={props.column} />
+								<NSSpace size={NSSpaceSizeType.NORMAL} />
+							</>
+						)}
 						{props.title && (
 							<>
 								<NSTitle title={props.title} />

package/src/components/NSTable.tsx

@@ -34,6 +34,7 @@ export interface NSTableState<RowType>
 	model: {
 		show: boolean;
 		description?: string;
+		columnName?: string;
 	}
 }
 
@@ -59,9 +60,9 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
 	{
 		return this.search?.current?.getValue() ?? "";
 	}
-	showModal(description: string)
+	showModal(description: string, columnName: string)
 	{
-		this.setState({ model: { show: true, description } });
+		this.setState({ model: { show: true, description, columnName } });
 	}
 	hideModal()
 	{
@@ -71,7 +72,6 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
 	{
 		this.setState({ currentPage: page });
 		this.props.getRows(page);
-
 	}
 	override render()
 	{
@@ -109,7 +109,7 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
 					overided = res;
 			}
 			if (!overided)
-				this.showModal(getCell(row, column, rowIndex, columnIndex));
+				this.showModal(getCell(row, column, rowIndex, columnIndex), column);
 		};
 		return (
 			<div id={this.props.id}
@@ -156,6 +156,7 @@ export class NSTable<RowType> extends Component<INSTableProps<RowType>, NSTableS
 					description={this.state.model.description}
 					onClose={() => { this.hideModal(); }}
 					title={this.state.title}
+					column={this.state.model.columnName}  
 				/>
 			</div >
 		)