namirasoft-site-react 1.4.402 → 1.4.403

package/src/components/NSProductSearch.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import React from "react";
+import { IBaseComponentProps } from "../props/IBaseComponentProps";
+import { DomainRow, LinkFullRow, NamirasoftAPILinkServer } from "namirasoft-api-link";
+import { EnvService } from "namirasoft-core";
+import { NSLoading } from "./NSLoading";
+import { NSSection } from "./NSSection";
+import { NSColumn } from "./NSColumn";
+import { NSRow } from "./NSRow";
+import { NSTitle } from "./NSTitle";
+import { NSLine } from "./NSLine";
+import { NSSpace, NSSpaceSizeType } from "./NSSpace";
+import Styles from "./NSProductSearch.module.css";
+
+export interface NSProductSearchProps extends IBaseComponentProps
+{
+	search: string;
+}
+
+export interface NSProductSearchState
+{
+	domains: DomainRow[] | null;
+	links: LinkFullRow[] | null;
+}
+
+export class NSProductSearch extends React.Component<NSProductSearchProps, NSProductSearchState>
+{
+	constructor(props: NSProductSearchProps)
+	{
+		super(props);
+		this.state = {
+			domains: null,
+			links: null
+		};
+	}
+	reload(search: string)
+	{
+		this.setState({ domains: null, links: null });
+		let REACT_APP_BASE_URL_API_LINK = new EnvService("REACT_APP_BASE_URL_API_LINK").getString();
+		let server = new NamirasoftAPILinkServer(REACT_APP_BASE_URL_API_LINK, console.error);
+		server.domain.Search(search, 10).then(res =>
+		{
+			this.setState({ domains: res.rows });
+		}).catch(() => { });
+		server.link.Search(search, 10).then(res =>
+		{
+			this.setState({ links: res.rows });
+		}).catch(() => { });
+	}
+	override componentDidMount()
+	{
+		this.reload(this.props.search);
+	}
+	override render()
+	{
+		let domains;
+		let links;
+		if (this.state.domains)
+			domains = <>
+				<NSTitle
+					title="Domains"
+					style={{ margin: "0px" }}
+				/>
+				<NSSpace
+					size={NSSpaceSizeType.MICRO}
+				/>
+				<NSLine />
+				<NSSpace
+					size={NSSpaceSizeType.MINI}
+				/>
+				<div className={Styles.ns_product_search_item_domain_parent}>
+					{
+						this.state.domains.map(domain =>
+						(
+							<a href={domain.url} className={Styles.ns_product_search_item_domain}>
+								<div>
+									<img
+										src={domain.logo ?? ""}
+										alt={domain.name}
+										width={24}
+										height={24}
+										style={{ marginRight: "8px" }}
+									/>
+									{domain.name}
+								</div>
+							</a>
+						))
+					}
+				</div>
+			</>;
+		else
+			domains = <NSLoading
+				small
+			/>;
+
+		if (this.state.links)
+			links = <>
+
+				<NSTitle
+					title="Links"
+					style={{ margin: "0px" }}
+				/>
+				<NSSpace
+					size={NSSpaceSizeType.MICRO}
+				/>
+				<NSLine />
+				<NSSpace
+					size={NSSpaceSizeType.MINI}
+				/>
+				<div className={Styles.ns_product_search_item_link_parent}>
+					{
+						this.state.links.map(link =>
+						(
+							<a href={link.url} className={Styles.ns_product_search_item_link}>
+								<div>
+									<img
+										src={link.logo ?? ""}
+										alt={link.name}
+										width={48}
+										height={48}
+										style={{ marginRight: "8px" }}
+									/>
+									{link.name}
+									<p>
+										{link.description}
+									</p>
+								</div>
+							</a>
+						))
+					}
+				</div>
+			</>;
+		else
+			links = <NSLoading
+				small
+			/>
+
+		return <>
+			<NSSection>
+				<NSRow>
+					<NSColumn
+						classList={[Styles.ns_product_search_column_domain]}
+					>
+						{domains}
+					</NSColumn>
+					<NSColumn
+						classList={[Styles.ns_product_search_column_link]}
+					>
+						{links}
+					</NSColumn>
+				</NSRow>
+			</NSSection >
+		</>;
+	}
+}

package/src/components/NSRange.module.css

@@ -1,67 +1,67 @@
-.ns_range_parent {
-	width: 100%;
-	max-width: 1150px;
-}
-
-.ns_range_time_item {
-	z-index: 99;
-	text-align: center;
-	max-width: 48px;
-	display: inline-block;
-	height: 60px;
-	position: relative;
-	border-width: 1px;
-	border-color: #DCDCDC;
-	border-style: groove;
-}
-
-.ns_range_time_box_full {
-	background-color: #fff;
-	border-radius: 5px;
-	position: relative;
-	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
-	overflow-x: scroll;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar {
-	height: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-track {
-	background-color: #c0c0c0;
-	border-radius: 6px;
-}
-
-.ns_range_time_box_full::-webkit-scrollbar-thumb {
-	background: #141B5C;
-	border-radius: 6px;
-}
-
-.ns_range_time_line {
-	position: absolute;
-	height: 100%;
-}
-
-.ns_time_line_title {
-	color: #141B5C;
-	margin-bottom: 16px;
-}
-
-.ns_range_time_item span {
-	color: #141B5C;
-	width: 100%;
-	display: inline-block;
-	background-color: #DCDCDC;
-	border-bottom: 1px solid #DCDCDC;
-	font-weight: 500;
-}
-
-@media screen and (min-width: 992px) {
-	.ns_range_time_box_full {
-		overflow: hidden;
-	}
-
-	.ns_range_time_item {
-		width: 4.166666%;
-	}
+.ns_range_parent {
+	width: 100%;
+	max-width: 1150px;
+}
+
+.ns_range_time_item {
+	z-index: 99;
+	text-align: center;
+	max-width: 48px;
+	display: inline-block;
+	height: 60px;
+	position: relative;
+	border-width: 1px;
+	border-color: #DCDCDC;
+	border-style: groove;
+}
+
+.ns_range_time_box_full {
+	background-color: #fff;
+	border-radius: 5px;
+	position: relative;
+	box-shadow: 0 3px 6px 0 rgb(0 0 0 / 7%);
+	overflow-x: scroll;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar {
+	height: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-track {
+	background-color: #c0c0c0;
+	border-radius: 6px;
+}
+
+.ns_range_time_box_full::-webkit-scrollbar-thumb {
+	background: #141B5C;
+	border-radius: 6px;
+}
+
+.ns_range_time_line {
+	position: absolute;
+	height: 100%;
+}
+
+.ns_time_line_title {
+	color: #141B5C;
+	margin-bottom: 16px;
+}
+
+.ns_range_time_item span {
+	color: #141B5C;
+	width: 100%;
+	display: inline-block;
+	background-color: #DCDCDC;
+	border-bottom: 1px solid #DCDCDC;
+	font-weight: 500;
+}
+
+@media screen and (min-width: 992px) {
+	.ns_range_time_box_full {
+		overflow: hidden;
+	}
+
+	.ns_range_time_item {
+		width: 4.166666%;
+	}
 }

package/src/components/NSRange.tsx

@@ -1,84 +1,84 @@
-// todo move to its own probject: this is Timify
-
-import { useEffect, useState } from 'react';
-import Styles from './NSRange.module.css';
-import { IBaseComponentProps } from '../props/IBaseComponentProps';
-import { Color } from "../Color";
-
-export interface NSRangeRow
-{
-	start_time: Date;
-	end_time: Date;
-	percentage: number;
-}
-
-export interface NSPaginationProps extends IBaseComponentProps
-{
-	data: NSRangeRow[];
-	title?: string;
-}
-
-export function NSRange(props: NSPaginationProps)
-{
-	const [Widths, setWidths] = useState<string[]>([]);
-	const [positions, setPositions] = useState<string[]>([]);
-
-	useEffect(() =>
-	{
-		const widths = props.data?.map((data) =>
-		{
-			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
-			return convertToPercentage(minutes);
-		});
-		const positions = props.data?.map((data) =>
-		{
-			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
-			return convertToPercentage(minutes);
-		});
-		setWidths(widths);
-		setPositions(positions);
-	}, [props.data]);
-
-	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
-	{
-		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
-		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
-		return difference_in_minutes;
-	};
-
-	const convertToPercentage = (minute: number): string =>
-	{
-		const width = ((minute * 100) / 1440).toString();
-		return `${width}%`;
-	};
-
-	return (
-		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ") ?? ""}`} style={props.style}>
-			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
-			<div className="col-12 px-0">
-				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
-					<div>
-						{
-							props.data?.map((data, index) =>
-								<span
-									key={`NSRange_span_key_${index}`}
-									className={Styles.ns_range_time_line}
-									style={{
-										background: Color.getColor(data?.percentage),
-										width: Widths[index] || '0%',
-										left: positions[index] || '%0'
-									}}>
-								</span>
-							)
-						}
-					</div>
-					{[...Array(24).keys()].map(hour => (
-						<div key={hour} className={Styles.ns_range_time_item}>
-							<span>{hour.toString().padStart(2, '0')}:00</span>
-						</div>
-					))}
-				</div>
-			</div>
-		</div>
-	);
+// todo move to its own probject: this is Timify
+
+import { useEffect, useState } from 'react';
+import Styles from './NSRange.module.css';
+import { IBaseComponentProps } from '../props/IBaseComponentProps';
+import { Color } from "../Color";
+
+export interface NSRangeRow
+{
+	start_time: Date;
+	end_time: Date;
+	percentage: number;
+}
+
+export interface NSPaginationProps extends IBaseComponentProps
+{
+	data: NSRangeRow[];
+	title?: string;
+}
+
+export function NSRange(props: NSPaginationProps)
+{
+	const [Widths, setWidths] = useState<string[]>([]);
+	const [positions, setPositions] = useState<string[]>([]);
+
+	useEffect(() =>
+	{
+		const widths = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(data.start_time, data.end_time);
+			return convertToPercentage(minutes);
+		});
+		const positions = props.data?.map((data) =>
+		{
+			const minutes = calculateMinutesBetween(new Date('2023-08-14T00:00:00'), data.start_time);
+			return convertToPercentage(minutes);
+		});
+		setWidths(widths);
+		setPositions(positions);
+	}, [props.data]);
+
+	const calculateMinutesBetween = (start_time: Date, end_time: Date): number =>
+	{
+		const difference_in_milliseconds = Math.abs(start_time.getTime() - end_time.getTime());
+		const difference_in_minutes = Math.floor(difference_in_milliseconds / 1000 / 60);
+		return difference_in_minutes;
+	};
+
+	const convertToPercentage = (minute: number): string =>
+	{
+		const width = ((minute * 100) / 1440).toString();
+		return `${width}%`;
+	};
+
+	return (
+		<div className={`${Styles.ns_range_parent} ${props.classList?.join(" ") ?? ""}`} style={props.style}>
+			<h5 className={Styles.ns_time_line_title}>{props.title}</h5>
+			<div className="col-12 px-0">
+				<div className={` ${Styles.ns_range_time_box_full} d-flex justify-content-start`}>
+					<div>
+						{
+							props.data?.map((data, index) =>
+								<span
+									key={`NSRange_span_key_${index}`}
+									className={Styles.ns_range_time_line}
+									style={{
+										background: Color.getColor(data?.percentage),
+										width: Widths[index] || '0%',
+										left: positions[index] || '%0'
+									}}>
+								</span>
+							)
+						}
+					</div>
+					{[...Array(24).keys()].map(hour => (
+						<div key={hour} className={Styles.ns_range_time_item}>
+							<span>{hour.toString().padStart(2, '0')}:00</span>
+						</div>
+					))}
+				</div>
+			</div>
+		</div>
+	);
 }