Feature/JS-6398: Add types as widgets

src/scss/list/object.scss

@@ -38,9 +38,6 @@
 			.cellContent {
 				.more { vertical-align: top; }
 				.empty { display: block; }
-			}
-
-			.cellContent {
 				.flex { gap: 0px 6px; }
 			}
 

src/scss/page/main/type.scss

@@ -44,6 +44,12 @@
 				.icon.arrow.right { right: -32px; }
 			}
 		}
+
+		.section.set {
+			.block.blockDataview {
+				.dataviewHead { display: none; }
+			}
+		}
 	}
 }
 

src/ts/component/block/dataview.tsx

@@ -385,6 +385,7 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
 
 		if (!sources.length && !isCollection) {
 			console.log('[BlockDataview.loadData] No sources');
+			console.trace();
 			return;
 		};
 
@@ -455,8 +456,8 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
 	};
 
 	getObjectId (): string {
-		const { rootId, block, isInline } = this.props;
-		return isInline ? block.getTargetObjectId() : rootId;
+		const { rootId, block } = this.props;
+		return block.getTargetObjectId() || rootId;
 	};
 
 	getKeys (id: string): string[] {
@@ -557,10 +558,10 @@ const BlockDataview = observer(class BlockDataview extends React.Component<Props
 	};
 
 	getTarget () {
-		const { rootId, block, isInline } = this.props;
-		const { targetObjectId } = block.content;
+		const { rootId } = this.props;
+		const targeId = this.getObjectId();
 
-		return S.Detail.get(rootId, isInline ? targetObjectId : rootId, [ 'setOf' ]);
+		return S.Detail.get(rootId, targeId, [ 'setOf' ]);
 	};
 
 	getTypeId (): string {

src/ts/component/block/dataview/controls.tsx

@@ -566,14 +566,13 @@ const Controls = observer(class Controls extends React.Component<Props> {
 			node.removeClass('small');
 		};
 
-		const width = sideLeft.outerWidth() + sideRight.outerWidth();
+		const width = sideLeft.outerWidth() + sideRight.outerWidth() + 16;
 		const offset = isPopup ? container.offset().left : 0;
 
-		if (left + width - offset - sw + 50 >= cw) {
-			add = true;
-		};
-		if (isInline && (width >= nw)) {
-			add = true;
+		if (isInline) {
+			add = width > nw;
+		} else {
+			add = left + width - offset - sw + 50 >= cw;
 		};
 
 		if (add) {

src/ts/component/block/dataview/view/grid.tsx

@@ -464,7 +464,7 @@ const ViewGrid = observer(class ViewGrid extends React.Component<I.ViewComponent
 		if (isInline) {
 			if (parent) {
 				if (parent.isPage() || parent.isLayoutDiv()) {
-					const wrapper = $('#editorWrapper');
+					const wrapper = $('.blocks');
 					const ww = wrapper.width();
 					const vw = Math.max(ww, width) + (width > ww ? PADDING : 0);
 					const margin = (cw - ww) / 2;

src/ts/component/menu/block/add.tsx

@@ -266,7 +266,7 @@ const MenuBlockAdd = observer(class MenuBlockAdd extends React.Component<I.Menu>
 		const isTemplate = U.Object.isTemplate(object.type);
 		const objectKeys = S.Detail.getKeys(rootId, rootId);
 		const objectRelations = objectKeys.map(it => S.Record.getRelationByKey(it)).filter(it => it);
-		const typeIds = S.Detail.getTypeRelationIds(isTemplate ? object.targetObjectType : object.type);
+		const typeIds = U.Object.getTypeRelationIds(isTemplate ? object.targetObjectType : object.type);
 		const typeRelations = typeIds.map(it => S.Record.getRelationById(it)).filter(it => it);
 
 		let ret = typeRelations;

src/ts/component/menu/dataview/relation/list.tsx

@@ -4,8 +4,8 @@ import { observer } from 'mobx-react';
 import arrayMove from 'array-move';
 import { AutoSizer, CellMeasurer, InfiniteLoader, List as VList, CellMeasurerCache } from 'react-virtualized';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { I, C, S, J, U, Relation, keyboard, Dataview, translate, analytics } from 'Lib';
 import { Icon, IconObject, Switch } from 'Component';
-import { I, C, S, J, keyboard, Dataview, translate, analytics } from 'Lib';
 
 const HEIGHT = 28;
 const LIMIT = 20;
@@ -231,6 +231,8 @@ const MenuRelationList = observer(class MenuRelationList extends React.Component
 		const { rootId, blockId, getView, onAdd } = data;
 		const view = getView();
 		const relations = Dataview.viewGetRelations(rootId, blockId, view);
+		const object = S.Detail.get(rootId, rootId);
+		const isType = U.Object.isTypeLayout(object.layout);
 
 		S.Menu.open('relationSuggest', { 
 			element: `#${getId()} #item-add`,
@@ -246,15 +248,25 @@ const MenuRelationList = observer(class MenuRelationList extends React.Component
 				ref: 'dataview',
 				skipKeys: relations.map(it => it.relationKey),
 				addCommand: (rootId: string, blockId: string, relation: any, onChange: (message: any) => void) => {
-					Dataview.relationAdd(rootId, blockId, relation.relationKey, relations.length, getView(), (message: any) => {
+					const cb = (message: any) => {
 						if (onAdd) {
 							onAdd();
 						};
 
 						if (onChange) {
 							onChange(message);
 						};
-					});
+					};
+
+					if (isType) {
+						const value = U.Common.arrayUnique(Relation.getArrayValue(object.recommendedRelations).concat(relation.id));
+
+						C.ObjectListSetDetails([ object.id ], [ { key: 'recommendedRelations', value } ], () => {
+							S.Record.viewUpdate(rootId, blockId, view);
+						});
+					} else {
+						Dataview.relationAdd(rootId, blockId, relation.relationKey, relations.length, getView(), cb);
+					};
 				},
 			}
 		});

src/ts/component/page/main/type.tsx

@@ -1,8 +1,8 @@
 import React, { forwardRef, useState, useEffect, useRef } from 'react';
 import $ from 'jquery';
 import { observer } from 'mobx-react';
-import { Icon, Header, Footer, Loader, ListObjectPreview, ListObject, Deleted, HeadSimple } from 'Component';
-import { I, C, S, U, J, focus, Action, analytics, Relation, translate, sidebar, keyboard } from 'Lib';
+import { Icon, Header, Footer, Loader, ListObjectPreview, Deleted, HeadSimple, Block } from 'Component';
+import { I, C, S, U, J, focus, Action, analytics, Relation, translate, keyboard, sidebar } from 'Lib';
 
 const PageMainType = observer(forwardRef<{}, I.PageComponent>((props, ref) => {
 
@@ -247,9 +247,10 @@ const PageMainType = observer(forwardRef<{}, I.PageComponent>((props, ref) => {
 		});
 	};
 
-	const recommended = Relation.getArrayValue(type.recommendedRelations).map(id => S.Record.getRelationById(id)).filter(it => it).map(it => it.relationKey);
+	const children = S.Block.getChildren(rootId, rootId, it => it.isDataview());
 	const allowedObject = isAllowedObject();
 	const isAllowedTemplate = type?.isInstalled && isAllowedObject() && canShowTemplates;
+	const allowedBlock = type.isInstalled && S.Block.checkFlags(rootId, rootId, [ I.RestrictionObject.Block ]);
 	const templates = S.Record.getRecordIds(subIdTemplate, '');
 	const totalObject = S.Record.getMeta(subIdObject, '').total;
 	const totalTemplate = templates.length;
@@ -359,16 +360,18 @@ const PageMainType = observer(forwardRef<{}, I.PageComponent>((props, ref) => {
 								</div>
 							</div>
 							<div className="content">
-								<ListObject
-									{...props}
-									sources={[ rootId ]}
-									spaceId={type.spaceId}
-									subId={subIdObject}
-									rootId={rootId}
-									columns={columns}
-									relationKeys={recommended}
-									route={analytics.route.screenType}
-								/>
+								{children.map((block: I.Block, i: number) => (
+									<Block
+										{...props}
+										key={block.id}
+										rootId={rootId}
+										iconSize={20}
+										block={block}
+										className="noPlus"
+										isSelectionDisabled={true}
+										readonly={allowedBlock}
+									/>
+								))}
 							</div>
 						</div>
 					) : ''}

src/ts/component/sidebar/page/type.tsx

@@ -209,7 +209,7 @@ const SidebarPageType = observer(class SidebarPageType extends React.Component<I
 	};
 
 	getConflicts () {
-		const relationIds = S.Detail.getTypeRelationIds(this.object.id);
+		const relationIds = U.Object.getTypeRelationIds(this.object.id);
 		return this.conflictIds.slice(0).filter(it => !relationIds.includes(it));
 	};
 

src/ts/component/sidebar/page/widget.tsx

@@ -270,7 +270,7 @@ const SidebarPageWidget = observer(class SidebarPageWidget extends React.Compone
 			data: {
 				route: analytics.route.addWidget,
 				filters: [
-					{ relationKey: 'resolvedLayout', condition: I.FilterCondition.NotIn, value: U.Object.getSystemLayouts() },
+					{ relationKey: 'resolvedLayout', condition: I.FilterCondition.NotIn, value: U.Object.getSystemLayouts().filter(it => !U.Object.isTypeLayout(it)) },
 					{ relationKey: 'type.uniqueKey', condition: I.FilterCondition.NotEqual, value: J.Constant.typeKey.template },
 				],
 				canAdd: true,

src/ts/component/sidebar/section/type/conflict.tsx

@@ -2,7 +2,7 @@ import React, { forwardRef, useState, useRef, useEffect, useImperativeHandle } f
 import $ from 'jquery';
 import { observer } from 'mobx-react';
 import { Title, Icon, ObjectName, IconObject } from 'Component';
-import { I, C, S, Relation, translate, keyboard } from 'Lib';
+import { I, C, S, U, Relation, translate, keyboard } from 'Lib';
 
 const SidebarSectionTypeConflict = observer(forwardRef<{}, I.SidebarSectionComponent>((props, ref) => {
 
@@ -30,10 +30,10 @@ const SidebarSectionTypeConflict = observer(forwardRef<{}, I.SidebarSectionCompo
 	};
 
 	const getItems = () => {
-		const relations = Relation.getArrayValue(object.recommendedRelations).concat(Relation.getArrayValue(object.recommendedFeaturedRelations));
+		const typeIds = U.Object.getTypeRelationIds(object.type);
 
 		return conflictIds
-			.filter(it => !relations.includes(it))
+			.filter(it => !typeIds.includes(it))
 			.map(id => S.Record.getRelationById(id));
 	};
 

src/ts/component/sidebar/section/type/relation.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState, useImperativeHandle } from 'react';
 import { observer } from 'mobx-react';
 import { Title, Label, Icon, ObjectName, IconObject } from 'Component';
-import { I, S, Relation, translate, keyboard } from 'Lib';
+import { I, S, U, Relation, translate, keyboard } from 'Lib';
 import { DndContext, closestCenter, useSensors, useSensor, PointerSensor, KeyboardSensor, DragOverlay } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy, sortableKeyboardCoordinates, arrayMove, useSortable } from '@dnd-kit/sortable';
 import { restrictToVerticalAxis, restrictToFirstScrollableAncestor } from '@dnd-kit/modifiers';
@@ -68,7 +68,7 @@ const SidebarSectionTypeRelation = observer(forwardRef<I.SidebarSectionRef, I.Si
 
 	const onAdd = (e: any, id: string) => {
 		const list = lists.find(it => it.id == id);
-		const keys = lists.reduce((acc, it) => acc.concat(it.data.map(it => it.relationKey)), []);
+		const keys = U.Object.getTypeRelationKeys(object.id);
 		const ids = list.data.map(it => it.id);
 
 		S.Menu.open('relationSuggest', { 

src/ts/lib/dataview.ts

@@ -4,15 +4,24 @@ import { I, M, C, S, U, J, Relation, translate } from 'Lib';
 class Dataview {
 
 	viewGetRelations (rootId: string, blockId: string, view: I.View): I.ViewRelation[] {
-		const { config } = S.Common;
-
 		if (!view) {
 			return [];
 		};
 
+		const { config } = S.Common;
 		const order: any = {};
+		const object = S.Detail.get(rootId, rootId, []);
+		const isType = U.Object.isTypeLayout(object.layout);
+
+		let relations = [];
+		if (isType) {
+			const typeIds = U.Object.getTypeRelationIds(object.type);
+			relations = J.Relation.default.map(it => S.Record.getRelationByKey(it)).concat(typeIds.map(it => S.Record.getRelationById(it)));
+		} else {
+			relations = S.Record.getDataviewRelations(rootId, blockId);
+		};
+		relations = U.Common.objectCopy(relations).filter(it => it);
 
-		let relations = U.Common.objectCopy(S.Record.getDataviewRelations(rootId, blockId)).filter(it => it);
 		let o = 0;
 
 		if (!config.debug.hiddenObject) {

src/ts/lib/util/common.ts

@@ -1084,7 +1084,7 @@ class UtilCommon {
 			return text;
 		};
 
-		match.forEach((m: any) => {
+		Array.from(match).forEach((m: any) => {
 			const m0 = String(m[0] || '');
 			const m1 = String(m[1] || '');
 			const m2 = String(m[2] || '');

src/ts/lib/util/menu.ts

@@ -416,14 +416,15 @@ class UtilMenu {
 		if (id) {
 			if (!isSystem) {
 				const isSet = U.Object.isInSetLayouts(layout);
+				const isType = U.Object.isTypeLayout(layout);
 				const setLayouts = U.Object.getSetLayouts();
 				const treeSkipLayouts = setLayouts.concat(U.Object.getFileAndSystemLayouts()).concat([ I.ObjectLayout.Participant, I.ObjectLayout.Date ]);
 
 				// Sets can only become Link and List layouts, non-sets can't become List
 				if (treeSkipLayouts.includes(layout)) {
 					options = options.filter(it => it != I.WidgetLayout.Tree);
 				};
-				if (!isSet) {
+				if (!isSet && !isType) {
 					options = options.filter(it => ![ I.WidgetLayout.List, I.WidgetLayout.Compact ].includes(it));
 				} else {
 					options = options.filter(it => it != I.WidgetLayout.Tree);
@@ -863,8 +864,8 @@ class UtilMenu {
 	getFixedWidgets () {
 		return [
 			{ id: J.Constant.widgetId.favorite, name: translate('widgetFavorite'), iconEmoji: '⭐' },
-			{ id: J.Constant.widgetId.set, name: translate('widgetSet'), iconEmoji: '🔍' },
-			{ id: J.Constant.widgetId.collection, name: translate('widgetCollection'), iconEmoji: '🗂️' },
+			//{ id: J.Constant.widgetId.set, name: translate('widgetSet'), iconEmoji: '🔍' },
+			//{ id: J.Constant.widgetId.collection, name: translate('widgetCollection'), iconEmoji: '🗂️' },
 			{ id: J.Constant.widgetId.recentEdit, name: translate('widgetRecent'), iconEmoji: '📝' },
 			{ id: J.Constant.widgetId.recentOpen, name: translate('widgetRecentOpen'), iconEmoji: '📅', caption: translate('menuWidgetRecentOpenCaption') },
 		].filter(it => it);

src/ts/lib/util/object.ts

@@ -586,6 +586,25 @@ class UtilObject {
 		C.BlockListSetFields(id, [ { blockId: id, fields } ]);
 	};
 
+	getTypeRelationIds (id: string) {
+		const type = S.Record.getTypeById(id);
+		if (!type) {
+			return [];
+		};
+
+		return Relation.getArrayValue(type.recommendedRelations).
+			concat(Relation.getArrayValue(type.recommendedFeaturedRelations)).
+			concat(Relation.getArrayValue(type.recommendedHiddenRelations)).
+			concat(Relation.getArrayValue(type.recommendedFileRelations));
+	};
+
+	getTypeRelationKeys (id: string) {
+		return this.getTypeRelationIds(id).
+			map(it => S.Record.getRelationById(it)).
+			filter(it => it && it.relationKey).
+			map(it => it.relationKey);
+	};
+
 };
 
-export default new UtilObject();
+export default new UtilObject();

src/ts/store/detail.ts

@@ -368,18 +368,6 @@ class DetailStore {
 		return object;
 	};
 
-	public getTypeRelationIds (id: string): string[] {
-		const type = S.Record.getTypeById(id);
-		if (!type) {
-			return [];
-		};
-
-		return [].
-			concat(type.recommendedRelations).
-			concat(type.recommendedFeaturedRelations).
-			concat(type.recommendedHiddenRelations);
-	};
-
 };
 
 export const Detail: DetailStore = new DetailStore();

src/ts/store/record.ts

@@ -337,11 +337,7 @@ class RecordStore {
 
 	getConflictRelations (rootId: string, blockId: string, typeId: string): any[] {
 		const objectKeys = S.Detail.getKeys(rootId, blockId);
-		const typeKeys = S.Detail.getTypeRelationIds(typeId).
-			map(it => S.Record.getRelationById(it)).
-			filter(it => it && it.relationKey).
-			map(it => it.relationKey);
-
+		const typeKeys = U.Object.getTypeRelationKeys(typeId);
 
 		let conflictKeys = [];