namirasoft-account-react 1.5.37 → 1.5.39

package/src/layouts/NSASectionEditTabPage.tsx

@@ -1,257 +1,257 @@
-import { EntityCategoryInputRow, EntityFieldInputRow, EntityResolveResponseRow, EntityTagInputRow, SlotEntityType, SlotRow } from "namirasoft-field";
-import { IBaseComponentProps, NSColumn, NSRepeaterNSTag, NSRow, NSTabPage, NSTabPageTab } from "namirasoft-site-react";
-import { Component, createRef, ReactNode, RefObject } from "react";
-import { NSFBoxSlot } from "../components/NSFBoxSlot";
-import { NSFBoxWrapper } from "../components/NSFBoxWrapper";
-import { CTFRow } from "../CTFRow";
-import { IEntityInfo } from "../IEntityInfo";
-import { NSARouterMakerResult } from "../NSARouterMakerResult";
-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 NSARouterMakerResult, NSASectionEditTabPageCustomProps<RowType, RowTypeInput>
-{
-	entity: IEntityInfo<RowType & { id: string }, RowTypeInput>;
-	ctf: {
-		enabled: boolean;
-		rows: EntityResolveResponseRow | null;
-	}
-	model: {
-		id: string | null;
-		row: RowType | null;
-	};
-}
-
-interface NSASectionEditTabPageState<RowType> 
-{
-	row: RowType | null;
-}
-
-export class NSASectionEditTabPage<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionEditTabPageProps<RowType, RowTypeInput>, NSASectionEditTabPageState<RowType>>
-{
-	private Slots_Refs: { [id: string]: RefObject<NSFBoxSlot> } = {};
-	private Tags_Refs = createRef<NSRepeaterNSTag>();
-
-	constructor(props: NSASectionEditTabPageProps<RowType, RowTypeInput>)
-	{
-		super(props);
-
-		this.state = { row: props.model.row };
-
-		if (props.ctf.enabled)
-			props.ctf.rows?.slots?.forEach(slot =>
-			{
-				if (!this.Slots_Refs[slot.id])
-					this.Slots_Refs[slot.id] = createRef<NSFBoxSlot>();
-			});
-
-		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[] = [];
-
-		let rows = this.props.ctf.rows;
-		if (rows)
-			for (let slot of rows.slots)
-			{
-				let ref = this.Slots_Refs[slot.id];
-				if (!ref?.current)
-					continue;
-				let value = ref.current.getValue();
-				if (slot.entity_type === SlotEntityType.Field)
-					fields.push({ slot_id: slot.id, field_id: slot.entity_id, value });
-				else if (slot.entity_type === SlotEntityType.CategoryScope)
-				{
-					if (Array.isArray(value))
-						value.forEach(id => categories.push({ slot_id: slot.id, category_id: id }));
-					else if (value != null)
-						categories.push({ slot_id: slot.id, category_id: value });
-				}
-			}
-		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)
-	{
-		let rows = this.props.ctf.rows;
-		if (rows)
-			for (let slot of rows.slots)
-			{
-				let ref = this.Slots_Refs[slot.id];
-				if (!ref?.current)
-					continue;
-				if (slot.entity_type === SlotEntityType.Field)
-				{
-					let field = ctf.fields.find(x => x.slot_id === slot.id);
-					if (field)
-						ref.current.setValue(field.value, () => { });
-				}
-				else if (slot.entity_type === SlotEntityType.CategoryScope)
-				{
-					let ids = ctf.categories
-						.filter(x => x.slot_id === slot.id)
-						.map(x => x.category_id);
-					ref.current.setValue(slot.multiple ? ids : (ids[0] ?? null), () => { });
-				}
-			}
-		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()
-	{
-		const TAB_GENERAL = "General";
-
-		let rows = this.props.ctf.enabled ? this.props.ctf.rows : null;
-		let slots = rows?.slots ?? [];
-
-		let renderSlot = (slot: SlotRow) =>
-		{
-			if (!this.Slots_Refs[slot.id])
-				this.Slots_Refs[slot.id] = createRef<NSFBoxSlot>();
-			return <NSFBoxSlot
-				key={`NSASectionEditTabPage_NSFBoxSlot_${slot.id}`}
-				{...this.props}
-				ref={this.Slots_Refs[slot.id]}
-				slot={slot}
-				getField={() => rows!.fields.find(x => x.id === slot.entity_id)!}
-				getCategoryScope={() => rows!.category_scopes.find(x => x.id === slot.entity_id)!}
-			/>;
-		};
-
-		let tabs: NSTabPageTab[] = [{
-			title: TAB_GENERAL,
-			clicked: true,
-			getContent: () => <NSColumn
-				{...this.props.ui?.tab_main}
-			>
-				<NSFBoxWrapper
-					slots={slots.filter(x => x.tab === TAB_GENERAL)}
-					renderSlot={renderSlot}
-				>
-					{this.props.children}
-				</NSFBoxWrapper>
-			</NSColumn>
-		}];
-		this.props.ui?.extra_tabs?.forEach(tab => tabs.push(tab));
-		if (this.props.ctf.enabled)
-		{
-			let tab_names = Array.from(new Set(slots.map(x => x.tab))).filter(tab => tab !== TAB_GENERAL);
-			tab_names.forEach(tab =>
-			{
-				tabs.push({
-					title: tab,
-					clicked: true,
-					getContent: () => <NSColumn
-						classList={[`${Styles.nsa_section_edit_tab_page}`]}
-					>
-						<NSRow>
-							<NSFBoxWrapper
-								slots={slots.filter(x => x.tab === tab)}
-								renderSlot={renderSlot}
-							/>
-						</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
-					{...this.props}
-				/>
-			});
-		}
-		return (
-			<NSTabPage
-				{...this.props.ui?.edit_tab_page}
-				tabs={tabs}
-			/>
-		);
-	}
+import { EntityCategoryInputRow, EntityFieldInputRow, EntityResolveResponseRow, EntityTagInputRow, SlotEntityType, SlotRow } from "namirasoft-field";
+import { IBaseComponentProps, NSColumn, NSRepeaterNSTag, NSRow, NSTabPage, NSTabPageTab } from "namirasoft-site-react";
+import { Component, createRef, ReactNode, RefObject } from "react";
+import { NSFBoxSlot } from "../components/NSFBoxSlot";
+import { NSFBoxWrapper } from "../components/NSFBoxWrapper";
+import { CTFRow } from "../CTFRow";
+import { IEntityInfo } from "../IEntityInfo";
+import { NSARouterMakerResult } from "../NSARouterMakerResult";
+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 NSARouterMakerResult, NSASectionEditTabPageCustomProps<RowType, RowTypeInput>
+{
+	entity: IEntityInfo<RowType & { id: string }, RowTypeInput>;
+	ctf: {
+		enabled: boolean;
+		rows: EntityResolveResponseRow | null;
+	}
+	model: {
+		id: string | null;
+		row: RowType | null;
+	};
+}
+
+interface NSASectionEditTabPageState<RowType> 
+{
+	row: RowType | null;
+}
+
+export class NSASectionEditTabPage<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSASectionEditTabPageProps<RowType, RowTypeInput>, NSASectionEditTabPageState<RowType>>
+{
+	private Slots_Refs: { [id: string]: RefObject<NSFBoxSlot> } = {};
+	private Tags_Refs = createRef<NSRepeaterNSTag>();
+
+	constructor(props: NSASectionEditTabPageProps<RowType, RowTypeInput>)
+	{
+		super(props);
+
+		this.state = { row: props.model.row };
+
+		if (props.ctf.enabled)
+			props.ctf.rows?.slots?.forEach(slot =>
+			{
+				if (!this.Slots_Refs[slot.id])
+					this.Slots_Refs[slot.id] = createRef<NSFBoxSlot>();
+			});
+
+		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[] = [];
+
+		let rows = this.props.ctf.rows;
+		if (rows)
+			for (let slot of rows.slots)
+			{
+				let ref = this.Slots_Refs[slot.id];
+				if (!ref?.current)
+					continue;
+				let value = ref.current.getValue();
+				if (slot.entity_type === SlotEntityType.Field)
+					fields.push({ slot_id: slot.id, field_id: slot.entity_id, value });
+				else if (slot.entity_type === SlotEntityType.CategoryScope)
+				{
+					if (Array.isArray(value))
+						value.forEach(id => categories.push({ slot_id: slot.id, category_id: id }));
+					else if (value != null)
+						categories.push({ slot_id: slot.id, category_id: value });
+				}
+			}
+		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)
+	{
+		let rows = this.props.ctf.rows;
+		if (rows)
+			for (let slot of rows.slots)
+			{
+				let ref = this.Slots_Refs[slot.id];
+				if (!ref?.current)
+					continue;
+				if (slot.entity_type === SlotEntityType.Field)
+				{
+					let field = ctf.fields.find(x => x.slot_id === slot.id);
+					if (field)
+						ref.current.setValue(field.value, () => { });
+				}
+				else if (slot.entity_type === SlotEntityType.CategoryScope)
+				{
+					let ids = ctf.categories
+						.filter(x => x.slot_id === slot.id)
+						.map(x => x.category_id);
+					ref.current.setValue(slot.multiple ? ids : (ids[0] ?? null), () => { });
+				}
+			}
+		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()
+	{
+		const TAB_GENERAL = "General";
+
+		let rows = this.props.ctf.enabled ? this.props.ctf.rows : null;
+		let slots = rows?.slots ?? [];
+
+		let renderSlot = (slot: SlotRow) =>
+		{
+			if (!this.Slots_Refs[slot.id])
+				this.Slots_Refs[slot.id] = createRef<NSFBoxSlot>();
+			return <NSFBoxSlot
+				key={`NSASectionEditTabPage_NSFBoxSlot_${slot.id}`}
+				{...this.props}
+				ref={this.Slots_Refs[slot.id]}
+				slot={slot}
+				getField={() => rows!.fields.find(x => x.id === slot.entity_id)!}
+				getCategoryScope={() => rows!.category_scopes.find(x => x.id === slot.entity_id)!}
+			/>;
+		};
+
+		let tabs: NSTabPageTab[] = [{
+			title: TAB_GENERAL,
+			clicked: true,
+			getContent: () => <NSColumn
+				{...this.props.ui?.tab_main}
+			>
+				<NSFBoxWrapper
+					slots={slots.filter(x => x.tab === TAB_GENERAL)}
+					renderSlot={renderSlot}
+				>
+					{this.props.children}
+				</NSFBoxWrapper>
+			</NSColumn>
+		}];
+		this.props.ui?.extra_tabs?.forEach(tab => tabs.push(tab));
+		if (this.props.ctf.enabled)
+		{
+			let tab_names = Array.from(new Set(slots.map(x => x.tab))).filter(tab => tab !== TAB_GENERAL);
+			tab_names.forEach(tab =>
+			{
+				tabs.push({
+					title: tab,
+					clicked: true,
+					getContent: () => <NSColumn
+						classList={[`${Styles.nsa_section_edit_tab_page}`]}
+					>
+						<NSRow>
+							<NSFBoxWrapper
+								slots={slots.filter(x => x.tab === tab)}
+								renderSlot={renderSlot}
+							/>
+						</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
+					{...this.props}
+				/>
+			});
+		}
+		return (
+			<NSTabPage
+				{...this.props.ui?.edit_tab_page}
+				tabs={tabs}
+			/>
+		);
+	}
 }

package/src/layouts/NSASectionList.module.css

@@ -1,25 +1,25 @@
-.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 {
-        height: 100%;   
-    }
+.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 {
+        height: 100%;   
+    }
 }