658 viewtabs add placement order to tab render by order

api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/api",
-  "version": "11.4.0",
+  "version": "11.5.1",
   "description": "",
   "main": "index.js",
   "scripts": {

dashboard/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "11.4.0",
+  "version": "11.5.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

dashboard/src/components/view/view-component/preview/tabs.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, ColorInput, Overlay, Select, Stack, Sx, Tabs, TextInput } from '@mantine/core';
+import { Box, Button, ColorInput, NumberInput, Overlay, Select, Stack, Sx, Tabs, TextInput } from '@mantine/core';
 import { useModals } from '@mantine/modals';
 import { IconArrowsLeftRight, IconTrash } from '@tabler/icons-react';
 import { observer } from 'mobx-react-lite';
@@ -77,7 +77,7 @@ export const PreviewViewTabs = observer(({ view }: { view: ViewRenderModelInstan
       styles={getStyles(config)}
     >
       <Tabs.List grow={config.grow}>
-        {config.tabs.map((t) => (
+        {config.tabsInOrder.map((t) => (
           <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)}>
             {t.name ?? t.id}
           </Tabs.Tab>
@@ -86,16 +86,30 @@ export const PreviewViewTabs = observer(({ view }: { view: ViewRenderModelInstan
           <Plus size={18} color="#228be6" />
         </Tabs.Tab>
       </Tabs.List>
-      {config.tabs.map((t, i) => {
+      {config.tabsInOrder.map((t, i) => {
         const tabView = model.views.findByID(t.view_id);
         return (
           <Tabs.Panel key={t.id} value={t.id} sx={{ position: 'relative' }}>
             <Box sx={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, zIndex: 200 }}>
               <Overlay opacity={0.8} color="#FFF" blur={10} zIndex={100} />
 
               <Stack mx="auto" mt={100} sx={{ width: '300px', position: 'relative', zIndex: 200 }}>
-                <TextInput label="Tab Name" value={t.name} onChange={(e) => t.setName(e.currentTarget.value)} />
+                <TextInput
+                  label="Tab Name"
+                  required
+                  value={t.name}
+                  onChange={(e) => t.setName(e.currentTarget.value)}
+                />
                 <Select label="View" value={t.view_id} onChange={t.setViewID} data={options} />
+                <NumberInput
+                  label="Placement Order"
+                  required
+                  value={t.order}
+                  onChange={(v) => t.setOrder(v ? v : 0)}
+                  min={0}
+                  max={1000}
+                  step={1}
+                />
                 <ColorInput
                   label="Color"
                   value={t.color}

dashboard/src/components/view/view-component/render/tabs.tsx

@@ -35,13 +35,13 @@ export const RenderViewTabs = observer(({ view }: { view: ViewRenderModelInstanc
       keepMounted={false}
     >
       <Tabs.List grow={config.grow}>
-        {config.tabs.map((t) => (
+        {config.tabsInOrder.map((t) => (
           <Tabs.Tab key={t.id} value={t.id} sx={getTabSX(t)} disabled={!t.view_id}>
             {t.name ?? t.id}
           </Tabs.Tab>
         ))}
       </Tabs.List>
-      {config.tabs.map((t) => {
+      {config.tabsInOrder.map((t) => {
         const tabView = model.views.findByID(t.view_id);
         if (!tabView) {
           return null;

dashboard/src/interactions/interactions-viewer/data/nodes.ts

@@ -73,7 +73,7 @@ function makeViewNodes(views: ViewsRenderModelInstance) {
     let _tab_view_ids: string[] = [];
     if (v.type === EViewComponentType.Tabs) {
       const config = v.config as ViewTabsConfigInstance;
-      _tab_view_ids = config.tabs.map((t) => t.view_id);
+      _tab_view_ids = config.tabsInOrder.map((t) => t.view_id);
     }
     return {
       id: v.id,

dashboard/src/model/meta-model/dashboard/content/view/widgets/tabs.ts

@@ -2,21 +2,24 @@ import { TabsOrientation, TabsVariant } from '@mantine/core';
 import { randomId } from '@mantine/hooks';
 import { cast, Instance, SnapshotIn, types } from 'mobx-state-tree';
 import { EViewComponentType } from '../types';
+import _ from 'lodash';
 
 const TabModel = types
   .model('ViewTabsTabModel', {
     id: types.identifier,
     name: types.string,
     view_id: types.string,
     color: types.optional(types.string, ''),
+    order: types.optional(types.number, 0),
   })
   .views((self) => ({
     get json() {
-      const { id, name, view_id, color } = self;
+      const { id, name, view_id, color, order } = self;
       return {
         id,
         name,
         color,
+        order,
         view_id,
       };
     },
@@ -31,6 +34,9 @@ const TabModel = types
     setColor(v: string) {
       self.color = v;
     },
+    setOrder(v: number) {
+      self.order = v;
+    },
   }));
 
 export type TabModelInstance = Instance<typeof TabModel>;
@@ -58,6 +64,9 @@ export const ViewTabsConfig = types
         orientation,
       };
     },
+    get tabsInOrder() {
+      return _.sortBy(self.tabs, 'order');
+    },
   }))
   .actions((self) => ({
     setVariant(v: TabsVariant) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/root",
-  "version": "11.4.0",
+  "version": "11.5.1",
   "private": true,
   "workspaces": [
     "api",

settings-form/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/settings-form",
-  "version": "11.4.0",
+  "version": "11.5.1",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",

website/package.json

@@ -2,7 +2,7 @@
   "name": "@devtable/website",
   "private": true,
   "license": "Apache-2.0",
-  "version": "11.4.0",
+  "version": "11.5.1",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview"