Merge branch 'cmsSafe' of github.com:atelier-saulx/based-boilerplate …

…into cmsSafe

app/app.tsx

@@ -8,6 +8,7 @@ export const client = based(basedConfig)
 
 const App = () => {
   const { data: counter, loading } = useQuery('counter')
+
   return (
     <div
       style={{

cms/App.tsx

@@ -17,6 +17,8 @@ import { Profile } from './Settings/UserManagement/Profile'
 import { Dashboard } from './Components/Dashboard'
 import { DatabaseSettings } from './Settings/Database'
 import { GeneralSettings } from './Settings/General'
+import { Docs } from './Docs'
+import { useMousePos } from './Hooks/useMousePos'
 
 export const client = based(basedConfig)
 
@@ -28,16 +30,24 @@ export const App = () => {
   const { data, loading } = useQuery('db', {
     $id: authState.userId,
     profileImg: true,
+    name: true,
   })
-  if (!authState.userId) return <Login />
+
+  console.log(client, 'the client??')
+
+  // keep track of mouseposition
+  // TODO: to possibly track users mouses in the cms
+  ///  Probably really bad for performance
+  // const { x, y } = useMousePos()
+  // console.log(x, y, '🐀', data?.name, route.location)
 
   const { data: schema, loading: loadingSchema } = useQuery('db:schema')
 
   const [selectedLang, setSelectedLang] = useState(schema?.languages[0])
 
-  // console.log(schema, 'Schema')
-
-  return (
+  return !authState.userId ? (
+    <Login />
+  ) : (
     <styled.div
       style={{
         display: 'flex',
@@ -69,6 +79,8 @@ export const App = () => {
             <DatabaseSettings />
           ) : section === 'general-settings' ? (
             <GeneralSettings languages={schema?.languages} />
+          ) : section === 'docs' ? (
+            <Docs />
           ) : !section ? (
             <Dashboard />
           ) : (

cms/Components/CmsTable/RenderAs.tsx

@@ -11,9 +11,27 @@ import {
   Avatar,
 } from '@based/ui'
 
-export const RenderAs = ({ colName, input, cellFieldTypeOf, selectedLang }) => {
+type NumberFormat =
+  | 'short'
+  | 'human'
+  | 'ratio'
+  | 'bytes'
+  | 'euro'
+  | 'dollar'
+  | 'pound'
+  | `round-${number}`
+
+export const RenderAs = ({
+  colName,
+  input,
+  cellFieldTypeOf,
+  selectedLang,
+  displayAs,
+}) => {
   let cName = colName.toLowerCase()
 
+  // map displayAs to pretty number date and types
+
   if (cName === 'id') {
     return (
       <Badge light autoColor copy>
@@ -22,7 +40,19 @@ export const RenderAs = ({ colName, input, cellFieldTypeOf, selectedLang }) => {
     )
   } else if (cellFieldTypeOf === 'text') {
     return <Text>{input && input[selectedLang]}</Text>
-  } else if (cName === 'createdat' || cName === 'updatedat') {
+  } else if (cellFieldTypeOf === 'number' || cellFieldTypeOf === 'int') {
+    return (
+      <Text>
+        {displayAs
+          ? prettyNumber(input, `number-${displayAs as NumberFormat}`)
+          : input}
+      </Text>
+    )
+  } else if (
+    cName === 'createdat' ||
+    cName === 'updatedat' ||
+    cellFieldTypeOf === 'timestamp'
+  ) {
     return <Text light>{prettyDate(input, 'date-time-human')}</Text>
   } else if (cName === 'size') {
     return <Text>{prettyNumber(input, 'number-bytes')}</Text>

cms/Components/CmsTable/index.tsx

@@ -49,6 +49,7 @@ type CmsTableProps = {
   columnNamesInRightOrder?: string[]
   style?: CSSProperties | Style
   selectedLang?: string
+  updatedBy?: string
 }
 
 export const changedRows = {}
@@ -66,13 +67,15 @@ export const CmsTable: FC<CmsTableProps> = ({
   style,
   filter,
   selectedLang,
+  updatedBy,
 }) => {
   const [hiddenColumns, setFilteredColumns] = useState<string[]>([
     'ancestors',
     'descendants',
     'aliases',
     'parents',
     'children',
+    'updatedby',
   ])
   const [sortOptions, setSortOptions] = useState<SortOptions>({
     $field: 'updatedAt',
@@ -186,6 +189,7 @@ export const CmsTable: FC<CmsTableProps> = ({
   // Cell Component
   const Cell = ({ columnIndex, rowIndex, style }) => {
     let cellFieldTypeOf = schemaFields[hiddenColumnNames[columnIndex]]?.type
+    let displayAs = schemaFields[hiddenColumnNames[columnIndex]]?.meta?.display
 
     const [inputState, setInputState] = useState(
       Object.keys(changedRows)?.includes(parsedData[rowIndex]?.id)
@@ -284,9 +288,10 @@ export const CmsTable: FC<CmsTableProps> = ({
           <Input
             type="text"
             value={inputState && inputState[selectedLang as string]}
-            onChange={(v) => setInputState(v)}
+            onChange={(v) => setInputState({ [selectedLang as string]: v })}
           />
-        ) : cellFieldTypeOf === 'number' && enableInlineEditModus ? (
+        ) : (cellFieldTypeOf === 'number' && enableInlineEditModus) ||
+          (cellFieldTypeOf === 'int' && enableInlineEditModus) ? (
           <Input
             type="number"
             value={inputState}
@@ -297,6 +302,7 @@ export const CmsTable: FC<CmsTableProps> = ({
             input={parsedData[rowIndex][hiddenColumnNames[columnIndex]]}
             colName={hiddenColumnNames[columnIndex]}
             cellFieldTypeOf={cellFieldTypeOf}
+            displayAs={displayAs}
             selectedLang={selectedLang}
           />
         )}
@@ -376,7 +382,7 @@ export const CmsTable: FC<CmsTableProps> = ({
 
                   await client.call('db:set', {
                     // TODO check this language
-                    $language: 'en',
+                    $language: selectedLang,
                     type: parsedData[idx].type,
                     ...parsedData[idx],
                   })
@@ -613,6 +619,7 @@ export const CmsTable: FC<CmsTableProps> = ({
             size="xsmall"
             style={{ marginLeft: 8 }}
             onClick={() => {
+              console.log(addedFilters, customFilter)
               setCustomFilter('')
               setAddedFilters([])
             }}
@@ -633,19 +640,39 @@ export const CmsTable: FC<CmsTableProps> = ({
                 // console.log(shadowData, 'shadow data')
 
                 // save the rows that are changed,
-                Object.keys(changedRows).forEach(
-                  async (key) =>
+                Object.keys(changedRows).forEach(async (key) => {
+                  console.log({
+                    $id: key,
+                    //  $language: selectedLang,
+                    ...changedRows[key],
+                    updatedBy: updatedBy,
+                  })
+                  if (Object.keys(changedRows[key]).includes('updatedBy')) {
+                    console.log('SNURP??')
                     await client
                       .call('db:set', {
                         $id: key,
-                        $language: selectedLang,
+                        //  $language: selectedLang,
                         ...changedRows[key],
+                        updatedBy: updatedBy,
                       })
                       .catch((err) => {
                         console.error(err)
                         setErrorMessage(err.message)
                       })
-                )
+                  } else {
+                    await client
+                      .call('db:set', {
+                        $id: key,
+                        //  $language: selectedLang,
+                        ...changedRows[key],
+                      })
+                      .catch((err) => {
+                        console.error(err)
+                        setErrorMessage(err.message)
+                      })
+                  }
+                })
 
                 // clear the rowChanges
                 setEnableInlineEditModus(!enableInlineEditModus)

cms/Components/Dashboard/ConnectionsWidget.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useQuery } from '@based/react'
 import { styled } from 'inlines'
-import { Text, color, Row, IconUsers, IconTree } from '@based/ui'
+import { Text, color, Column, IconUsers, IconTree } from '@based/ui'
 
 export const ConnectionsWidget = () => {
   const { data: concurrentUsers } = useQuery('based:connections')
@@ -10,7 +10,7 @@ export const ConnectionsWidget = () => {
   console.log(uniqueUsers)
 
   return (
-    <Row style={{ marginBottom: 24, gap: 16 }}>
+    <Column style={{ marginBottom: 42, gap: 12 }}>
       <styled.div
         style={{
           padding: '12px 24px',
@@ -39,10 +39,12 @@ export const ConnectionsWidget = () => {
         }}
       >
         <IconUsers style={{ marginRight: 6 }} />
+
         <Text weight="medium">
+          {/* @ts-ignore */}
           Unique Users: {uniqueUsers?.uniqueUsers || ''}
         </Text>
       </styled.div>
-    </Row>
+    </Column>
   )
 }

cms/Components/Dashboard/ShowEnvWidget.tsx

@@ -7,13 +7,13 @@ export const ShowEnvWidget = () => {
   return (
     <styled.div
       style={{
-        padding: '12px 24px',
+        padding: '0px 12px',
         borderRadius: 8,
         border: `1px solid ${color('inputBorder', 'neutralNormal', 'default')}`,
-        marginBottom: 24,
+        width: 324,
       }}
     >
-      <Code language="json" value={JSON.stringify(Env)} />
+      <Code language="json" value={JSON.stringify(Env, null, 2)} />
     </styled.div>
   )
 }

cms/Components/Dashboard/index.tsx

@@ -1,22 +1,55 @@
 import React from 'react'
 import { styled } from 'inlines'
-import { StarterWidget } from './StarterWidget'
 import { ShowEnvWidget } from './ShowEnvWidget'
 import { ConnectionsWidget } from './ConnectionsWidget'
+import { Button, Row, Text, Column, color } from '@based/ui'
+import { IntroSteps } from '../../Docs/IntroSteps'
+import { useRoute } from 'kabouter'
 
 export const Dashboard = () => {
+  const route = useRoute('[section]')
+
   return (
     <styled.div
       style={{
         padding: '24px 48px',
         width: '100%',
-        maxWidth: 924,
+        // maxWidth: 924,
         marginTop: 16,
       }}
     >
-      <StarterWidget />
-      <ShowEnvWidget />
-      <ConnectionsWidget />
+      <IntroSteps />
+      <styled.div
+        style={{
+          marginBottom: 42,
+          marginTop: 64,
+          paddingLeft: 16,
+          borderLeft: `2px solid ${color(
+            'inputBorder',
+            'neutralNormal',
+            'default'
+          )}`,
+        }}
+      >
+        <Text size={14} weight="strong">
+          Documentation
+        </Text>
+        <Text light style={{ marginBottom: 12 }}>
+          Learn more about using the based-CMS.
+        </Text>
+        <Button
+          color="system"
+          size="small"
+          onClick={() => route.setQuery({ section: 'docs' })}
+        >
+          Read Documentation
+        </Button>
+      </styled.div>
+      <Column style={{ maxWidth: 324 }}>
+        <ConnectionsWidget />
+        <ShowEnvWidget />
+      </Column>
+      {/* <Docs /> */}
     </styled.div>
   )
 }

cms/Components/Sidebar/index.tsx

@@ -3,9 +3,9 @@ import {
   Menu,
   IconFolder,
   IconUsers,
-  IconBolt,
   IconTimeClock,
   IconSettings,
+  IconLayerThree,
 } from '@based/ui'
 import { useRoute } from 'kabouter'
 import { useQuery } from '@based/react'
@@ -54,7 +54,7 @@ export const SideBar = () => {
             // @ts-ignore
             value: 'schema-builder',
             label: 'Schema Builder',
-            icon: <IconBolt />,
+            icon: <IconLayerThree />,
           },
         },
         files: {

cms/Components/TopBar/index.tsx

@@ -13,7 +13,7 @@ import {
 import { Logo } from '../Sidebar/Logo'
 import { useRoute } from 'kabouter'
 import { styled } from '@based/ui'
-import { useAuthState } from '@based/react'
+import { useAuthState, useQuery } from '@based/react'
 import { languages as allLangs } from './languages'
 
 export const TopBar = ({
@@ -23,11 +23,15 @@ export const TopBar = ({
   selectedLang,
   setSelectedLang,
 }) => {
-  const authState = useAuthState()
   const route = useRoute('[section]')
-  const section = route.query.section
+
   const { theme, setTheme } = useTheme()
 
+  const { data: userData } = useQuery('db', {
+    $id: client.authState.userId,
+    name: true,
+  })
+
   const langOptions = languages?.map((lang) => ({
     value: lang,
     label: allLangs[lang],
@@ -60,7 +64,7 @@ export const TopBar = ({
         <Dropdown.Root>
           <Dropdown.Trigger>
             <Button size="xsmall">
-              <Avatar src={data?.profileImg}>{authState.userId}</Avatar>
+              <Avatar src={data?.profileImg}>{userData?.name}</Avatar>
             </Button>
           </Dropdown.Trigger>
           <Dropdown.Items>