namirasoft-account-react 1.5.2 → 1.5.4

package/src/components/NSFBoxField.tsx

@@ -0,0 +1,38 @@
+import { FieldRow, SlotRow } from "namirasoft-field";
+import { NSBoxDynamic } from "namirasoft-site-react";
+import { Component, createRef } from "react";
+import { NSFBoxSlot } from "./NSFBoxSlot";
+
+export interface NSFBoxFieldProps
+{
+    slot: SlotRow;
+    field: FieldRow;
+}
+
+interface NSFBoxFieldState
+{
+}
+
+export class NSFBoxField extends Component<NSFBoxFieldProps, NSFBoxFieldState>
+{
+    NSBoxDynamic_Ref = createRef<NSBoxDynamic>();
+
+    constructor(props: NSFBoxFieldProps)
+    {
+        super(props);
+
+        this.state = {};
+    }
+    override render()
+    {
+        return <NSBoxDynamic
+            key={`NSFBoxField_NSBoxDynamic_${this.props.field.id}`}
+            ref={this.NSBoxDynamic_Ref}
+            name={this.props.slot.id}
+            title={this.props.slot.name}
+            variable={this.props.field.type}
+            info={{ text: this.props.slot.description ?? this.props.field.description ?? "" }}
+            style={{ width: NSFBoxSlot.getSize(this.props.slot.size) }}
+        />;
+    }
+}

package/src/components/NSFBoxSlot.tsx

@@ -0,0 +1,72 @@
+import { CategoryScopeRow, FieldRow, SlotEntityType, SlotRow, SlotSize } from "namirasoft-field";
+import { NSBox } from "namirasoft-site-react";
+import { Component, createRef } from "react";
+import { NSARouterMakerProps } from "../NSARouterMakerProps";
+import { NSFBoxCategoryScope } from "./NSFBoxCategoryScope";
+import { NSFBoxField } from "./NSFBoxField";
+
+export interface NSFBoxSlotProps extends NSARouterMakerProps
+{
+    slot: SlotRow;
+    getField: () => FieldRow;
+    getCategoryScope: () => CategoryScopeRow;
+}
+
+interface NSFBoxSlotState
+{
+}
+
+export class NSFBoxSlot extends Component<NSFBoxSlotProps, NSFBoxSlotState>
+{
+    static getSize(size: SlotSize)
+    {
+        if (size === SlotSize.Small)
+            return NSBox.width.one;
+        if (size === SlotSize.Medium)
+            return NSBox.width.double;
+        if (size === SlotSize.Big)
+            return NSBox.width.triple;
+        return "";
+    }
+    NSFBoxCategoryScope_Ref = createRef<NSFBoxCategoryScope>();
+    NSFBoxField_Ref = createRef<NSFBoxField>();
+    constructor(props: NSFBoxSlotProps)
+    {
+        super(props);
+
+        this.state = {};
+
+        this.getValue = this.getValue.bind(this);
+        this.setValue = this.setValue.bind(this);
+    }
+    getValue(checkError?: boolean)
+    {
+        if (this.props.slot.entity_type === SlotEntityType.CategoryScope)
+            return this.NSFBoxCategoryScope_Ref.current?.NSBoxEntity_Ref.current?.getValue(checkError);
+        if (this.props.slot.entity_type === SlotEntityType.Field)
+            return this.NSFBoxField_Ref.current?.NSBoxDynamic_Ref.current?.getValue(checkError);
+        return null;
+    }
+    setValue(value: any | null, callback: () => void)
+    {
+        if (this.props.slot.entity_type === SlotEntityType.CategoryScope)
+            return this.NSFBoxCategoryScope_Ref.current?.NSBoxEntity_Ref.current?.setValue(value, callback);
+        if (this.props.slot.entity_type === SlotEntityType.Field)
+            return this.NSFBoxField_Ref.current?.NSBoxDynamic_Ref.current?.setValue(value, callback);
+        return null;
+    }
+    override render()
+    {
+        if (this.props.slot.entity_type === SlotEntityType.CategoryScope)
+            return <NSFBoxCategoryScope
+                {...this.props}
+                category_scope={this.props.getCategoryScope()}
+            />;
+        if (this.props.slot.entity_type === SlotEntityType.Field)
+            return <NSFBoxField
+                {...this.props}
+                field={this.props.getField()}
+            />;
+        return <></>;
+    }
+}

package/src/components/NSFBoxWrapper.tsx

@@ -0,0 +1,70 @@
+import { SlotPositionSide, SlotRow } from "namirasoft-field";
+import { Children, cloneElement, Component, isValidElement, ReactNode } from "react";
+
+export interface NSFBoxWrapperProps
+{
+    slots: SlotRow[];
+    renderSlot: (slot: SlotRow) => ReactNode;
+    children?: ReactNode;
+}
+
+interface NSFBoxWrapperState
+{
+}
+
+export class NSFBoxWrapper extends Component<NSFBoxWrapperProps, NSFBoxWrapperState>
+{
+    constructor(props: NSFBoxWrapperProps)
+    {
+        super(props);
+
+        this.state = {};
+
+        this.inject = this.inject.bind(this);
+    }
+    private inject(nodes: ReactNode, used: Set<string>): ReactNode
+    {
+        return Children.map(nodes, node =>
+        {
+            if (!isValidElement(node))
+                return node;
+
+            let title = (node.props as any)?.title;
+
+            let before: ReactNode[] = [];
+            let after: ReactNode[] = [];
+            if (typeof title === "string")
+                for (let slot of this.props.slots)
+                {
+                    if (used.has(slot.id))
+                        continue;
+                    if (slot.position_target === title)
+                    {
+                        used.add(slot.id);
+                        if (slot.position_side === SlotPositionSide.Before)
+                            before.push(this.props.renderSlot(slot));
+                        else
+                            after.push(this.props.renderSlot(slot));
+                    }
+                }
+
+            let children = (node.props as any)?.children;
+            let element = children !== undefined
+                ? cloneElement(node, undefined, this.inject(children, used))
+                : node;
+
+            return <>{before}{element}{after}</>;
+        });
+    }
+    override render()
+    {
+        let used = new Set<string>();
+        let content = this.inject(this.props.children, used);
+        let leftovers = this.props.slots.filter(slot => !used.has(slot.id));
+
+        return <>
+            {content}
+            {leftovers.map(slot => this.props.renderSlot(slot))}
+        </>;
+    }
+}

package/src/layouts/NSALayout.tsx

@@ -1,7 +1,7 @@
 import { NamirasoftAccountClient } from 'namirasoft-account-client';
 import { ProductFullRow } from 'namirasoft-api-product';
-import { CacheService, CookieService, EnvService, FilterItem, FilterItemOperator, IStorageLocal, NamingConvention } from 'namirasoft-core';
-import { CategoryRow, FieldRow, NamirasoftFieldMetaDatabase, NamirasoftFieldServer } from 'namirasoft-field';
+import { CacheService, EnvService, IStorageLocal, NamingConvention } from 'namirasoft-core';
+import { EntityResolveResponseRow } from 'namirasoft-field';
 import { NamirasoftMessageServer } from 'namirasoft-message';
 import { NamirasoftMap } from 'namirasoft-site-map';
 import { IBackgroundProps, IBaseComponentProps, IHeaderIconProps, IHeaderRightProps, NSBarActionProps, NSBarAlertProps, NSBarTitleProps, NSDialogDelete, NSLayout, NSLoading, ProductCacheService } from 'namirasoft-site-react';
@@ -15,6 +15,7 @@ import { NSAProductListDialog } from '../components/NSAProductListDialog';
 import { NSATaskBar } from '../components/NSATaskBar';
 import { NSAUserDialog } from '../components/NSAUserDialog';
 import { NSAWorkspaceListDialog } from '../components/NSAWorkspaceListDialog';
+import { FieldCacheService } from '../FieldCacheService';
 import { IEntityInfo } from '../IEntityInfo';
 import { NSACacheService } from '../NSACacheService';
 import { NSARouterMakerProps } from '../NSARouterMakerProps';
@@ -110,8 +111,7 @@ interface NSALayoutState
     showUserDialog: boolean;
     showMasterMenu: boolean;
     ctf_enabled: boolean;
-    ctf_categories: CategoryRow[] | null;
-    ctf_fields: FieldRow[] | null;
+    ctf_rows: EntityResolveResponseRow | null;
 }
 
 export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> extends Component<NSALayoutProps<RowType, RowTypeInput>, NSALayoutState>
@@ -121,10 +121,7 @@ export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> e
     private hasCFT: boolean;
     private isLoggedIn: boolean;
     private cache_product: CacheService<ProductFullRow>;
-    private cache_fields: CacheService<{
-        ctf_categories: CategoryRow[] | null;
-        ctf_fields: FieldRow[] | null;
-    }>;
+    private cache_field: CacheService<EntityResolveResponseRow>;
     private cache_message: CacheService<number>;
     private cache_master_menu: CacheService<{ open: boolean }>;
     NSASectionList_Ref = createRef<NSASectionList<RowType, RowTypeInput>>();
@@ -154,52 +151,8 @@ export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> e
         this.cache_product = ProductCacheService.get(this.props.product_id, console.error);
 
         // Cache Fields
-        // todo this must be owner_id, otherwise switching between owners does not work correctly
-        let user_id = this.props.account.token_manager.getUserData(x => x.id, "");
-        let key_field = `ns-fields-${user_id}-${props.pages?.entity?.product_id ?? "*"}-${props.pages?.entity?.name ?? "*"}`;
-        this.cache_fields = new CacheService<{
-            ctf_categories: CategoryRow[] | null;
-            ctf_fields: FieldRow[] | null;
-        }>(key_field, new IStorageLocal(), 24 * 60, async () =>
-        {
-            let service = new CookieService(document.cookie, "ns-field-version");
-            return (this.props.account?.token_manager?.getUserData(x => x.id, "") ?? "") + "" + service.getString();
-        }, async () =>
-        {
-            let REACT_APP_BASE_URL_FIELD = new EnvService("REACT_APP_BASE_URL_FIELD", true).getString();
-            let server = new NamirasoftFieldServer(REACT_APP_BASE_URL_FIELD, props.account.token_manager, props.notifier.onError);
-            let ans: {
-                ctf_categories: CategoryRow[] | null;
-                ctf_fields: FieldRow[] | null;
-            } = { ctf_categories: null, ctf_fields: null };
-            if (this.props.pages)
-            {
-                let meta = new NamirasoftFieldMetaDatabase();
-                try
-                {
-                    let filters: FilterItem[] = [];
-                    filters.push(new FilterItem(meta.tables.category, meta.tables.category.columns.product_id, false, FilterItemOperator.all.equals, this.props.pages.entity.product_id));
-                    filters.push(new FilterItem(meta.tables.category, meta.tables.category.columns.entity, false, FilterItemOperator.all.equals, this.props.pages.entity.name));
-                    let res = await server.category.List(filters, null, null, [], null);
-                    ans.ctf_categories = res.rows;
-                } catch (error)
-                {
-                    ans.ctf_categories = [];
-                }
-                try
-                {
-                    let filters: FilterItem[] = [];
-                    filters.push(new FilterItem(meta.tables.field, meta.tables.field.columns.product_id, false, FilterItemOperator.all.equals, this.props.pages.entity.product_id));
-                    filters.push(new FilterItem(meta.tables.field, meta.tables.field.columns.entity, false, FilterItemOperator.all.equals, this.props.pages.entity.name));
-                    let res = await server.field.List(filters, null, null, [], null);
-                    ans.ctf_fields = res.rows;
-                } catch (error)
-                {
-                    ans.ctf_fields = [];
-                }
-            }
-            return ans;
-        });
+        this.cache_field = FieldCacheService.get(this.props.account.token_manager, this.props.pages?.entity.product_id, this.props.pages?.entity.name, props.notifier.onError)
+
         // Cache Message
         this.cache_message = new CacheService<number>("ns-messsage-count", new IStorageLocal(), 15, async () => "1.0.0", async () =>
         {
@@ -228,8 +181,7 @@ export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> e
             showUserDialog: false,
             showMasterMenu: false,
             ctf_enabled: this.hasCFT,
-            ctf_fields: null,
-            ctf_categories: null,
+            ctf_rows: null
         };
     }
     public reloadMessageCount(force: boolean) 
@@ -299,9 +251,9 @@ export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> e
         if (this.hasCFT)
             if (this.props.pages?.entity)
             {
-                this.cache_fields.get().then(res =>
+                this.cache_field.get().then(res =>
                 {
-                    this.setState(prev => { return { ...prev, ctf_categories: res.ctf_categories ?? [], ctf_fields: res.ctf_fields ?? [] } });
+                    this.setState(prev => { return { ...prev, ctf_rows: res } });
                 });
             }
 
@@ -575,10 +527,9 @@ export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> e
                 }}
                 ctf={{
                     enabled: this.state.ctf_enabled,
-                    categories: this.state.ctf_categories,
-                    fields: this.state.ctf_fields
+                    rows: this.state.ctf_rows
                 }}
-                deleteFieldCache={() => { this.cache_fields.del(); }}
+                deleteFieldCache={() => { this.cache_field.del(); }}
             >
                 {this.props.children}
             </NSASectionList>
@@ -597,10 +548,9 @@ export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> e
                     entity={this.props.pages.entity}
                     ctf={{
                         enabled: this.state.ctf_enabled,
-                        categories: this.state.ctf_categories,
-                        fields: this.state.ctf_fields
+                        rows: this.state.ctf_rows
                     }}
-                    deleteFieldCache={() => { this.cache_fields.del(); }}
+                    deleteFieldCache={() => { this.cache_field.del(); }}
                     onRowLoaded={(row) =>
                     {
                         this.setState(prev => ({ ...prev }), () =>
@@ -627,10 +577,9 @@ export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> e
                 entity={this.props.pages.entity}
                 ctf={{
                     enabled: this.state.ctf_enabled,
-                    categories: this.state.ctf_categories,
-                    fields: this.state.ctf_fields
+                    rows: this.state.ctf_rows
                 }}
-                deleteFieldCache={() => { this.cache_fields.del(); }}
+                deleteFieldCache={() => { this.cache_field.del(); }}
                 onRowLoaded={(row) =>
                 {
                     this.setState(prev => ({ ...prev }), () =>
@@ -767,7 +716,7 @@ export class NSALayout<RowType extends { id: string }, RowTypeInput = RowType> e
                             <></>
                         </NSDialogDelete>}
                     {
-                        (!this.state.ctf_enabled || (this.state.ctf_fields && this.state.ctf_categories))
+                        (!this.state.ctf_enabled || (this.state.ctf_rows))
                             ?
                             content
                             :

package/src/layouts/NSASectionEdit.tsx

@@ -1,13 +1,12 @@
-import { IBaseComponentProps, NSID, NSLoading } from "namirasoft-site-react";
-import { NSSection, NSPanel, NSButtonBlue, NSLine, NSSpace, NSSpaceSizeType } from 'namirasoft-site-react';
-import { NSARouterMakerProps } from "../NSARouterMakerProps";
+import { IStorageLocal, NamingConvention } from "namirasoft-core";
+import { EntityResolveResponseRow } from "namirasoft-field";
+import { IBaseComponentProps, NSButtonBlue, NSID, NSLine, NSLoading, NSPanel, NSSection, NSSpace, NSSpaceSizeType } from "namirasoft-site-react";
 import { Component, createRef, FormHTMLAttributes, ReactNode } from "react";
+import { NSANavigationGuard } from "../components/NSANavigationGuard";
 import { IEntityInfo } from "../IEntityInfo";
-import { IStorageLocal, NamingConvention } from "namirasoft-core";
-import { NSASectionViewTabPage, NSASectionViewTabPageUIProps } from "./NSASectionViewTabPage";
+import { NSARouterMakerProps } from "../NSARouterMakerProps";
 import { NSASectionEditTabPage, NSASectionEditTabPageEditorProps, NSASectionEditTabPageUIProps } from "./NSASectionEditTabPage";
-import { CategoryRow, FieldRow } from "namirasoft-field";
-import { NSANavigationGuard } from "../components/NSANavigationGuard";
+import { NSASectionViewTabPage, NSASectionViewTabPageUIProps } from "./NSASectionViewTabPage";
 
 export interface NSASectionEditCustomProps<RowType extends { id: string }, RowTypeInput = RowType> extends NSARouterMakerProps, IBaseComponentProps
 {
@@ -37,8 +36,7 @@ export interface NSASectionEditProps<RowType extends { id: string }, RowTypeInpu
     entity: IEntityInfo<RowType, RowTypeInput>,
     ctf: {
         enabled: boolean;
-        fields: FieldRow[] | null;
-        categories: CategoryRow[] | null;
+        rows: EntityResolveResponseRow | null;
     };
     deleteFieldCache: () => void;
     children: ReactNode;
@@ -221,7 +219,8 @@ export class NSASectionEdit<RowType extends { id: string }, RowTypeInput = RowTy
                                     {...this.props.ui.form}
                                     onInput={this.markDirty}
                                     onChange={this.markDirty}
-                                    onSubmit={(e) => {
+                                    onSubmit={(e) =>
+                                    {
                                         e.preventDefault()
                                     }}
                                 >

package/src/layouts/NSASectionEditTabPage.tsx

@@ -1,6 +1,8 @@
-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 { 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 { NSARouterMakerProps } from "../NSARouterMakerProps";
@@ -32,8 +34,7 @@ export interface NSASectionEditTabPageProps<RowType extends { id: string }, RowT
 	entity: IEntityInfo<RowType & { id: string }, RowTypeInput>;
 	ctf: {
 		enabled: boolean;
-		fields: FieldRow[] | null;
-		categories: CategoryRow[] | null;
+		rows: EntityResolveResponseRow | null;
 	}
 	model: {
 		id: string | null;
@@ -49,8 +50,7 @@ interface NSASectionEditTabPageState<RowType>
 
 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 Slots_Refs: { [id: string]: RefObject<NSFBoxSlot> } = {};
 	private Tags_Refs = createRef<NSRepeaterNSTag>();
 
 	constructor(props: NSASectionEditTabPageProps<RowType, RowTypeInput>)
@@ -60,14 +60,11 @@ export class NSASectionEditTabPage<RowType extends { id: string }, RowTypeInput
 		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 =>
+			props.ctf.rows?.slots?.forEach(slot =>
 			{
-				if (!this.Categories_Refs[category.group])
-					this.Categories_Refs[category.group] = createRef<NSBoxBooleans>()
+				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);
@@ -113,19 +110,24 @@ export class NSASectionEditTabPage<RowType extends { id: string }, RowTypeInput
 		let categories: EntityCategoryInputRow[] = [];
 		let tags: EntityTagInputRow[] = [];
 
-		if (this.props.ctf.fields)
-			for (let field of this.props.ctf.fields)
+		let rows = this.props.ctf.rows;
+		if (rows)
+			for (let slot of rows.slots)
 			{
-				let ref = this.Fields_Refs[field.id];
-				if (ref.current)
-					fields.push({ field_id: field.id, value: ref.current.getValue() });
+				let ref = this.Slots_Refs[slot.id];
+				if (!ref?.current)
+					continue;
+				let value = ref.current.getValue();
+				if (slot.entity_type === SlotEntityType.Field)
+					fields.push({ field_id: slot.entity_id, value });
+				else if (slot.entity_type === SlotEntityType.CategoryScope)
+				{
+					if (Array.isArray(value))
+						value.forEach(id => categories.push({ category_id: id }));
+					else if (value != null)
+						categories.push({ category_id: value });
+				}
 			}
-		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 } });
 
@@ -133,18 +135,27 @@ export class NSASectionEditTabPage<RowType extends { id: string }, RowTypeInput
 	}
 	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));
-		}
+		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.field_id === slot.entity_id);
+					if (field)
+						ref.current.setValue(field.value, () => { });
+				}
+				else if (slot.entity_type === SlotEntityType.CategoryScope)
+				{
+					let ids = ctf.categories
+						.map(x => x.category_id)
+						.filter(id => rows.categories.find(category => category.id === id)?.category_scope_id === slot.entity_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 ?? "" } }));
 	}
@@ -161,60 +172,56 @@ export class NSASectionEditTabPage<RowType extends { id: string }, RowTypeInput
 	}
 	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) ?? []));
+		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: "General",
+			title: TAB_GENERAL,
 			clicked: true,
 			getContent: () => <NSColumn
 				{...this.props.ui?.tab_main}
 			>
-				{this.props.children}
+				<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)
 		{
-			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 tab_names = Array.from(new Set(slots.map(x => x.tab))).filter(tab => tab !== TAB_GENERAL);
+			tab_names.forEach(tab =>
 			{
-				let items = this.props.ctf.categories?.filter(x => x.group === group).map(category => { return { value: category.id, text: category.name } }) ?? [];
 				tabs.push({
-					title: group,
+					title: tab,
 					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>
+							<NSFBoxWrapper
+								slots={slots.filter(x => x.tab === tab)}
+								renderSlot={renderSlot}
+							/>
 						</NSRow>
 					</NSColumn>
 				});

package/src/layouts/NSASectionList.tsx

@@ -1,4 +1,4 @@
-import { CategoryRow, FieldRow } from "namirasoft-field";
+import { EntityResolveResponseRow } from "namirasoft-field";
 import { IBaseComponentProps, NSBoxCombo, NSRow, NSSpace, NSSpaceSizeType, NSSplitter } from "namirasoft-site-react";
 import { Component, ReactNode, createRef } from "react";
 import { IEntityInfo } from "../IEntityInfo";
@@ -23,8 +23,7 @@ export interface NSASectionListProps<RowType extends { id: string }, RowTypeInpu
 	entity: IEntityInfo<RowType, RowTypeInput>;
 	ctf: {
 		enabled: boolean;
-		fields: FieldRow[] | null;
-		categories: CategoryRow[] | null;
+		rows: EntityResolveResponseRow | null;
 	};
 	deleteFieldCache: () => void;
 	children?: ReactNode;

package/src/layouts/NSASectionView.tsx

@@ -1,4 +1,4 @@
-import { CategoryRow, FieldRow } from "namirasoft-field";
+import { EntityResolveResponseRow } from "namirasoft-field";
 import { IBaseComponentProps, NSLoading } from "namirasoft-site-react";
 import { Component, createRef, ReactNode } from "react";
 import { IEntityInfo } from "../IEntityInfo";
@@ -21,8 +21,7 @@ export interface NSASectionViewProps<RowType extends { id: string }, RowTypeInpu
 	entity: IEntityInfo<RowType, RowTypeInput>;
 	ctf: {
 		enabled: boolean;
-		fields: FieldRow[] | null;
-		categories: CategoryRow[] | null;
+		rows: EntityResolveResponseRow | null;
 	};
 	model: {
 		id: string | null;