namirasoft-account-react 1.4.428 → 1.4.430

package/src/layouts/NSASectionEditTabPage.tsx

@@ -1,251 +1,251 @@
-import { CategoryRow, EntityCategoryInputRow, EntityFieldInputRow, EntityTagInputRow, FieldRow } from "namirasoft-field";
-import { IBaseComponentProps, NSBoxBooleans, NSBoxDynamic, NSColumn, NSRepeaterNSTag, NSRow, NSTabPage, NSTabPageTab } from "namirasoft-site-react";
-import { Component, createRef, ReactNode } from "react";
-import { CTFRow } from "../CTFRow";
-import { IEntityInfo } from "../IEntityInfo";
-import { NSARouterMakerProps } from "../NSARouterMakerProps";
-import { CFTUtil } from "./CFTUtil";
-import Styles from "./NSASectionEditTabPage.module.css";
-import { NSASectionViewTabMore } from "./NSASectionViewTabMore";
-
-export interface NSASectionEditTabPageUIProps 
-{
-	edit_tab_page?: IBaseComponentProps;
-	tab_main?: IBaseComponentProps;
-	extra_tabs?: NSTabPageTab[];
-}
-export interface NSASectionEditTabPageEditorProps<RowType extends { id: string }, RowTypeInput = RowType>
-{
-	getInputRow: (row: RowType | null) => RowTypeInput | Promise<RowTypeInput>;
-	setRow: (row: RowType) => void;
-}
-export interface NSASectionEditTabPageCustomProps<RowType extends { id: string }, RowTypeInput = RowType> 
-{
-	ui?: NSASectionEditTabPageUIProps;
-	editor: NSASectionEditTabPageEditorProps<RowType, RowTypeInput>;
-	onRowLoaded?: (item: RowType) => void;
-	children: ReactNode;
-}
-export interface NSASectionEditTabPageProps<RowType extends { id: string }, RowTypeInput = RowType>
-	extends NSARouterMakerProps, NSASectionEditTabPageCustomProps<RowType, RowTypeInput>
-{
-	entity: IEntityInfo<RowType & { id: string }, RowTypeInput>;
-	ctf: {
-		enabled: boolean;
-		fields: FieldRow[] | null;
-		categories: CategoryRow[] | null;
-	}
-	model: {
-		id: string | null;
-		row: RowType | null;
-	};
-	deleteFieldCache: () => void;
-}
-
-interface NSASectionEditTabPageState<RowType> 
-{
-	row: RowType | null;
-}
-
-export class NSASectionEditTabPage<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionEditTabPageProps<RowType, RowTypeInput>, NSASectionEditTabPageState<RowType>>
-{
-	private Fields_Refs: { [id: string]: React.RefObject<NSBoxDynamic> } = {};
-	private Categories_Refs: { [group: string]: React.RefObject<NSBoxBooleans> } = {};
-	private Tags_Refs = createRef<NSRepeaterNSTag>();
-
-	constructor(props: NSASectionEditTabPageProps<RowType, RowTypeInput>)
-	{
-		super(props);
-
-		this.state = { row: props.model.row };
-
-		if (props.ctf.enabled)
-		{
-			props.ctf.fields?.forEach(field => this.Fields_Refs[field.id] = createRef<NSBoxDynamic>());
-			props.ctf.categories?.forEach(category =>
-			{
-				if (!this.Categories_Refs[category.group])
-					this.Categories_Refs[category.group] = createRef<NSBoxBooleans>()
-			});
-		}
-
-		this.reload = this.reload.bind(this);
-		this.getRow = this.getRow.bind(this);
-		this.setRow = this.setRow.bind(this);
-		this.getInputRow = this.getInputRow.bind(this);
-		this.getFields = this.getFields.bind(this);
-		this.setFields = this.setFields.bind(this);
-	}
-	reload()
-	{
-		this.setState(prev => ({ ...prev, row: null }));
-		if (this.props.model.id)
-			if (this.props.entity.server.get)
-				this.props.entity.server.get(this.props.model.id).then(row =>
-				{
-					this.setRow(row);
-				}).catch(() => { });
-	}
-	getRow()
-	{
-		return this.state.row;
-	}
-	setRow(row: RowType)
-	{
-		this.setState(prev => { return { ...prev, row } }, () =>
-		{
-			this.props.onRowLoaded?.(row);
-			this.props.editor.setRow(row);
-			if (this.props.ctf.enabled)
-				this.setFields(CFTUtil.get(this.props.entity.name, row));
-		});
-	}
-	async getInputRow(): Promise<RowTypeInput>
-	{
-		let row = await this.props.editor.getInputRow(this.state.row);
-		if (this.props.ctf.enabled)
-			CFTUtil.set(this.props.entity.name, row, this.getFields());
-		return row;
-	}
-	private getFields(): CTFRow
-	{
-		let fields: EntityFieldInputRow[] = [];
-		let categories: EntityCategoryInputRow[] = [];
-		let tags: EntityTagInputRow[] = [];
-
-		if (this.props.ctf.fields)
-			for (let field of this.props.ctf.fields)
-			{
-				let ref = this.Fields_Refs[field.id];
-				if (ref.current)
-					fields.push({ field_id: field.id, value: ref.current.getValue() });
-			}
-		for (let group in this.Categories_Refs)
-		{
-			let ref = this.Categories_Refs[group];
-			if (ref.current)
-				categories.push(...ref.current?.getValues().map(x => { return { category_id: x } }));
-		}
-		if (this.Tags_Refs.current)
-			tags = this.Tags_Refs.current.getValue().map(x => { return { name: x.name, value: x.value } });
-
-		return { categories, fields, tags };
-	}
-	private setFields(ctf: CTFRow)
-	{
-		for (let field of ctf.fields)
-		{
-			let ref = this.Fields_Refs[field.field_id];
-			if (ref?.current)
-				ref.current.setValue(field.value);
-		}
-		for (let key of Object.keys(this.Categories_Refs))
-		{
-			let ref = this.Categories_Refs[key];
-			if (ref.current)
-				ref.current.setValues(ctf.categories.map(x => x.category_id));
-		}
-		if (this.Tags_Refs.current)
-			this.Tags_Refs.current.setValue(ctf.tags.map(x => { return { name: x.name, value: x.value ?? "" } }));
-	}
-	override componentDidMount()
-	{
-		if (this.props.model.id)
-			if (!this.props.model.row || this.props.model.row.id !== this.props.model.id)
-			{
-				this.reload();
-				return;
-			}
-		if (this.props.model.row)
-			this.setRow(this.props.model.row);
-	}
-	override render()
-	{
-		let groups_fields = Array.from(new Set(this.props.ctf.fields?.map(x => x.group) ?? []));
-		let groups_categories = Array.from(new Set(this.props.ctf.categories?.map(x => x.group) ?? []));
-
-		let tabs: NSTabPageTab[] = [{
-			title: "General",
-			clicked: true,
-			getContent: () => <NSColumn
-				{...this.props.ui?.tab_main}
-			>
-				{this.props.children}
-			</NSColumn>
-		}];
-		this.props.ui?.extra_tabs?.forEach(tab => tabs.push(tab));
-		if (this.props.ctf.enabled)
-		{
-			groups_fields.forEach(group =>
-			{
-				tabs.push({
-					title: group,
-					clicked: true,
-					getContent: () => <NSColumn
-						classList={[`${Styles.nsa_section_edit_tab_page}`]}
-					>
-						<NSRow>
-							{
-								this.props.ctf.fields?.filter(x => x.group === group).map((field, index) =>
-									<NSBoxDynamic
-										key={`NSASectionViewTabPage_NSBoxDynamic_${index}`}
-										ref={this.Fields_Refs[field.id]}
-										name={field.id}
-										title={field.name}
-										variable={field.type}
-									/>
-								)
-							}
-						</NSRow>
-					</NSColumn>
-				});
-			});
-			groups_categories.forEach(group =>
-			{
-				let items = this.props.ctf.categories?.filter(x => x.group === group).map(category => { return { value: category.id, text: category.name } }) ?? [];
-				tabs.push({
-					title: group,
-					clicked: true,
-					getContent: () => <NSColumn
-						classList={[`${Styles.nsa_section_edit_tab_page}`]}
-					>
-						<NSRow>
-							<NSBoxBooleans
-								ref={this.Categories_Refs[group]}
-								box_all={{ hideHeader: true }}
-								items={items}
-							></NSBoxBooleans>
-						</NSRow>
-					</NSColumn>
-				});
-			});
-			tabs.push({
-				title: "Tags",
-				clicked: true,
-				getContent: () => <NSColumn
-					classList={[`${Styles.nsa_section_edit_tab_page}`]}
-				>
-					<NSRepeaterNSTag
-						ref={this.Tags_Refs}
-						name="Tags"
-						title="Tags"
-						required={false}
-					/>
-				</NSColumn>
-			});
-			tabs.push({
-				title: "More",
-				clicked: true,
-				getContent: () => <NSASectionViewTabMore
-					deleteFieldCache={this.props.deleteFieldCache}
-				/>
-			});
-		}
-		return (
-			<NSTabPage
-				{...this.props.ui?.edit_tab_page}
-				tabs={tabs}
-			/>
-		);
-	}
+import { CategoryRow, EntityCategoryInputRow, EntityFieldInputRow, EntityTagInputRow, FieldRow } from "namirasoft-field";
+import { IBaseComponentProps, NSBoxBooleans, NSBoxDynamic, NSColumn, NSRepeaterNSTag, NSRow, NSTabPage, NSTabPageTab } from "namirasoft-site-react";
+import { Component, createRef, ReactNode } from "react";
+import { CTFRow } from "../CTFRow";
+import { IEntityInfo } from "../IEntityInfo";
+import { NSARouterMakerProps } from "../NSARouterMakerProps";
+import { CFTUtil } from "./CFTUtil";
+import Styles from "./NSASectionEditTabPage.module.css";
+import { NSASectionViewTabMore } from "./NSASectionViewTabMore";
+
+export interface NSASectionEditTabPageUIProps 
+{
+	edit_tab_page?: IBaseComponentProps;
+	tab_main?: IBaseComponentProps;
+	extra_tabs?: NSTabPageTab[];
+}
+export interface NSASectionEditTabPageEditorProps<RowType extends { id: string }, RowTypeInput = RowType>
+{
+	getInputRow: (row: RowType | null) => RowTypeInput | Promise<RowTypeInput>;
+	setRow: (row: RowType) => void;
+}
+export interface NSASectionEditTabPageCustomProps<RowType extends { id: string }, RowTypeInput = RowType> 
+{
+	ui?: NSASectionEditTabPageUIProps;
+	editor: NSASectionEditTabPageEditorProps<RowType, RowTypeInput>;
+	onRowLoaded?: (item: RowType) => void;
+	children: ReactNode;
+}
+export interface NSASectionEditTabPageProps<RowType extends { id: string }, RowTypeInput = RowType>
+	extends NSARouterMakerProps, NSASectionEditTabPageCustomProps<RowType, RowTypeInput>
+{
+	entity: IEntityInfo<RowType & { id: string }, RowTypeInput>;
+	ctf: {
+		enabled: boolean;
+		fields: FieldRow[] | null;
+		categories: CategoryRow[] | null;
+	}
+	model: {
+		id: string | null;
+		row: RowType | null;
+	};
+	deleteFieldCache: () => void;
+}
+
+interface NSASectionEditTabPageState<RowType> 
+{
+	row: RowType | null;
+}
+
+export class NSASectionEditTabPage<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionEditTabPageProps<RowType, RowTypeInput>, NSASectionEditTabPageState<RowType>>
+{
+	private Fields_Refs: { [id: string]: React.RefObject<NSBoxDynamic> } = {};
+	private Categories_Refs: { [group: string]: React.RefObject<NSBoxBooleans> } = {};
+	private Tags_Refs = createRef<NSRepeaterNSTag>();
+
+	constructor(props: NSASectionEditTabPageProps<RowType, RowTypeInput>)
+	{
+		super(props);
+
+		this.state = { row: props.model.row };
+
+		if (props.ctf.enabled)
+		{
+			props.ctf.fields?.forEach(field => this.Fields_Refs[field.id] = createRef<NSBoxDynamic>());
+			props.ctf.categories?.forEach(category =>
+			{
+				if (!this.Categories_Refs[category.group])
+					this.Categories_Refs[category.group] = createRef<NSBoxBooleans>()
+			});
+		}
+
+		this.reload = this.reload.bind(this);
+		this.getRow = this.getRow.bind(this);
+		this.setRow = this.setRow.bind(this);
+		this.getInputRow = this.getInputRow.bind(this);
+		this.getFields = this.getFields.bind(this);
+		this.setFields = this.setFields.bind(this);
+	}
+	reload()
+	{
+		this.setState(prev => ({ ...prev, row: null }));
+		if (this.props.model.id)
+			if (this.props.entity.server.get)
+				this.props.entity.server.get(this.props.model.id).then(row =>
+				{
+					this.setRow(row);
+				}).catch(() => { });
+	}
+	getRow()
+	{
+		return this.state.row;
+	}
+	setRow(row: RowType)
+	{
+		this.setState(prev => { return { ...prev, row } }, () =>
+		{
+			this.props.onRowLoaded?.(row);
+			this.props.editor.setRow(row);
+			if (this.props.ctf.enabled)
+				this.setFields(CFTUtil.get(this.props.entity.name, row));
+		});
+	}
+	async getInputRow(): Promise<RowTypeInput>
+	{
+		let row = await this.props.editor.getInputRow(this.state.row);
+		if (this.props.ctf.enabled)
+			CFTUtil.set(this.props.entity.name, row, this.getFields());
+		return row;
+	}
+	private getFields(): CTFRow
+	{
+		let fields: EntityFieldInputRow[] = [];
+		let categories: EntityCategoryInputRow[] = [];
+		let tags: EntityTagInputRow[] = [];
+
+		if (this.props.ctf.fields)
+			for (let field of this.props.ctf.fields)
+			{
+				let ref = this.Fields_Refs[field.id];
+				if (ref.current)
+					fields.push({ field_id: field.id, value: ref.current.getValue() });
+			}
+		for (let group in this.Categories_Refs)
+		{
+			let ref = this.Categories_Refs[group];
+			if (ref.current)
+				categories.push(...ref.current?.getValues().map(x => { return { category_id: x } }));
+		}
+		if (this.Tags_Refs.current)
+			tags = this.Tags_Refs.current.getValue().map(x => { return { name: x.name, value: x.value } });
+
+		return { categories, fields, tags };
+	}
+	private setFields(ctf: CTFRow)
+	{
+		for (let field of ctf.fields)
+		{
+			let ref = this.Fields_Refs[field.field_id];
+			if (ref?.current)
+				ref.current.setValue(field.value);
+		}
+		for (let key of Object.keys(this.Categories_Refs))
+		{
+			let ref = this.Categories_Refs[key];
+			if (ref.current)
+				ref.current.setValues(ctf.categories.map(x => x.category_id));
+		}
+		if (this.Tags_Refs.current)
+			this.Tags_Refs.current.setValue(ctf.tags.map(x => { return { name: x.name, value: x.value ?? "" } }));
+	}
+	override componentDidMount()
+	{
+		if (this.props.model.id)
+			if (!this.props.model.row || this.props.model.row.id !== this.props.model.id)
+			{
+				this.reload();
+				return;
+			}
+		if (this.props.model.row)
+			this.setRow(this.props.model.row);
+	}
+	override render()
+	{
+		let groups_fields = Array.from(new Set(this.props.ctf.fields?.map(x => x.group) ?? []));
+		let groups_categories = Array.from(new Set(this.props.ctf.categories?.map(x => x.group) ?? []));
+
+		let tabs: NSTabPageTab[] = [{
+			title: "General",
+			clicked: true,
+			getContent: () => <NSColumn
+				{...this.props.ui?.tab_main}
+			>
+				{this.props.children}
+			</NSColumn>
+		}];
+		this.props.ui?.extra_tabs?.forEach(tab => tabs.push(tab));
+		if (this.props.ctf.enabled)
+		{
+			groups_fields.forEach(group =>
+			{
+				tabs.push({
+					title: group,
+					clicked: true,
+					getContent: () => <NSColumn
+						classList={[`${Styles.nsa_section_edit_tab_page}`]}
+					>
+						<NSRow>
+							{
+								this.props.ctf.fields?.filter(x => x.group === group).map((field, index) =>
+									<NSBoxDynamic
+										key={`NSASectionViewTabPage_NSBoxDynamic_${index}`}
+										ref={this.Fields_Refs[field.id]}
+										name={field.id}
+										title={field.name}
+										variable={field.type}
+									/>
+								)
+							}
+						</NSRow>
+					</NSColumn>
+				});
+			});
+			groups_categories.forEach(group =>
+			{
+				let items = this.props.ctf.categories?.filter(x => x.group === group).map(category => { return { value: category.id, text: category.name } }) ?? [];
+				tabs.push({
+					title: group,
+					clicked: true,
+					getContent: () => <NSColumn
+						classList={[`${Styles.nsa_section_edit_tab_page}`]}
+					>
+						<NSRow>
+							<NSBoxBooleans
+								ref={this.Categories_Refs[group]}
+								box_all={{ hideHeader: true }}
+								items={items}
+							></NSBoxBooleans>
+						</NSRow>
+					</NSColumn>
+				});
+			});
+			tabs.push({
+				title: "Tags",
+				clicked: true,
+				getContent: () => <NSColumn
+					classList={[`${Styles.nsa_section_edit_tab_page}`]}
+				>
+					<NSRepeaterNSTag
+						ref={this.Tags_Refs}
+						name="Tags"
+						title="Tags"
+						required={false}
+					/>
+				</NSColumn>
+			});
+			tabs.push({
+				title: "More",
+				clicked: true,
+				getContent: () => <NSASectionViewTabMore
+					deleteFieldCache={this.props.deleteFieldCache}
+				/>
+			});
+		}
+		return (
+			<NSTabPage
+				{...this.props.ui?.edit_tab_page}
+				tabs={tabs}
+			/>
+		);
+	}
 }

package/src/layouts/NSASectionList.module.css

@@ -1,32 +1,32 @@
-.nsa_section_list_btn {
-    width: 48px;
-    border: 1px solid #a0a0a0;
-}
-
-.nsa_section_list_btn img {
-    width: 24px;
-    height: 24px;
-}
-
-.nsa_section_list_actions {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 8px;
-    flex-shrink: 0;
-}
-
-@media screen and (min-width: 992px) {
-    .nsa_table {
-        display: flex;
-        flex-direction: column;
-    }
-
-    .nsa_table table {
-        flex: 1 1 auto;
-        min-height: 0;
-        max-height: none;
-    }
+.nsa_section_list_btn {
+    width: 48px;
+    border: 1px solid #a0a0a0;
+}
+
+.nsa_section_list_btn img {
+    width: 24px;
+    height: 24px;
+}
+
+.nsa_section_list_actions {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    flex-shrink: 0;
+}
+
+@media screen and (min-width: 992px) {
+    .nsa_table {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .nsa_table table {
+        flex: 1 1 auto;
+        min-height: 0;
+        max-height: none;
+    }
 }