todo: test

SenseNet · May 21, 2024 · 4abbeec · 4abbeec
1 parent 248cbfe
commit 4abbeec
Show file tree

Hide file tree

Showing 9 changed files with 7,742 additions and 9,253 deletions.
diff --git a/apps/sensenet/src/components/view-controls/browse-view.tsx b/apps/sensenet/src/components/view-controls/browse-view.tsx
@@ -57,7 +57,7 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
       repository={repository}
       handleCancel={() => navigateToAction({ history, routeMatch })}
       controlMapper={controlMapper}
-      localization={{ close: localization.forms.close }}
+      localization={{ close: localization.forms.close, advancedFields: localization.forms.advancedFields }}
       locale={LocalizationObject[personalSettings.language].locale}
       classes={{
         ...classes,

diff --git a/apps/sensenet/src/components/view-controls/edit-view.tsx b/apps/sensenet/src/components/view-controls/edit-view.tsx
@@ -108,7 +108,11 @@ export const EditView: React.FC<EditViewProps> = (props) => {
       showTitle={true}
       uploadFolderpath="/Root/Content/demoavatars"
       controlMapper={controlMapper}
-      localization={{ submit: localization.forms.submit, cancel: localization.forms.cancel }}
+      localization={{
+        submit: localization.forms.submit,
+        cancel: localization.forms.cancel,
+        advancedFields: localization.forms.advancedFields,
+      }}
       hideDescription
       locale={LocalizationObject[personalSettings.language].locale}
       classes={{

diff --git a/apps/sensenet/src/localization/default.ts b/apps/sensenet/src/localization/default.ts
@@ -534,6 +534,7 @@ const values = {
     addReference: 'Add reference',
     ok: 'Ok',
     cancel: 'Cancel',
+    advancedFields: 'Advanced fields',
     close: 'Close',
     upload: 'Upload',
     submit: 'Submit',

diff --git a/apps/sensenet/src/localization/hungarian.ts b/apps/sensenet/src/localization/hungarian.ts
@@ -207,6 +207,7 @@ const values: Localization = {
     removeAvatar: 'Avatar törlése',
     changeReference: 'Referencia módosítása',
     addReference: 'Referencia hozzáadása',
+    advancedFields: 'Haladó mezők',
     ok: 'Ok',
     cancel: 'Vissza',
     upload: 'Feltöltés',

diff --git a/packages/sn-controls-react/package.json b/packages/sn-controls-react/package.json
@@ -74,6 +74,7 @@
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
     "@material-ui/core": "~4.11.4",
+    "@material-ui/icons": "^4.11.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^22.0.1",
     "@rollup/plugin-node-resolve": "^13.3.0",

diff --git a/packages/sn-controls-react/src/viewcontrols/browse-view.tsx b/packages/sn-controls-react/src/viewcontrols/browse-view.tsx
@@ -1,10 +1,11 @@
 /**
  * @module ViewControls
  */
-import { Button, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Box, Button, createStyles, Grid, IconButton, makeStyles, Theme, Typography } from '@material-ui/core'
+import { KeyboardArrowDown, KeyboardArrowUp } from '@material-ui/icons'
 import { Repository } from '@sensenet/client-core'
-import { ControlMapper } from '@sensenet/control-mapper'
-import { GenericContent } from '@sensenet/default-content-types'
+import { ActionName, ControlMapper } from '@sensenet/control-mapper'
+import { FieldSetting, FieldVisibility, GenericContent } from '@sensenet/default-content-types'
 import { useRepository } from '@sensenet/hooks-react'
 import type { Locale } from 'date-fns'
 import React, { createElement, ReactElement, useEffect, useState } from 'react'
@@ -23,14 +24,15 @@ export interface BrowseViewProps {
   controlMapper?: ControlMapper<any, any>
   handleCancel?: () => void
   localization?: {
+    advancedFields?: string
     close?: string
   }
   fieldLocalization?: FieldLocalization
   classes?: BrowseViewClassKey
   locale?: Locale
 }
 
-const useStyles = makeStyles(() => {
+const useStyles = makeStyles((theme: Theme) => {
   return createStyles({
     grid: {},
     fieldWrapper: {},
@@ -40,6 +42,24 @@ const useStyles = makeStyles(() => {
       textAlign: 'right',
     },
     cancel: {},
+    advancedFieldContainer: {
+      padding: '15px',
+      fontSize: '18px',
+      width: '100%',
+    },
+    advancedFieldBox: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      width: '88%',
+      margin: '0 auto',
+    },
+    divider: {
+      width: '88%',
+      height: '1px',
+      margin: '16px auto',
+      backgroundColor: theme.palette.primary.main,
+    },
   })
 })
 
@@ -52,6 +72,8 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
   const controlMapper = props.controlMapper || reactControlMapper(props.repository)
   const [schema, setSchema] = useState(controlMapper.getFullSchemaForContentType(props.content.Type, 'browse'))
   const classes = useStyles(props)
+  const [advancedFields, setAdvancedFields] = useState<string[]>([])
+  const [showAdvancedFields, setShowAdvancedFields] = useState<boolean>(false)
   const repository = useRepository()
 
   useEffect(() => {
@@ -61,6 +83,48 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
     return () => schemaObservable.dispose()
   }, [repository.schemas, props.content.Type, controlMapper])
 
+  useEffect(() => {
+    if (schema) {
+      const filteredFields = schema.fieldMappings
+        .filter((s) => s.fieldSettings.VisibleBrowse === FieldVisibility.Advanced)
+        .map((s) => s.fieldSettings.Name)
+
+      setAdvancedFields(filteredFields)
+    }
+  }, [schema])
+
+  const renderField = (field: { fieldSettings: FieldSetting; actionName: ActionName; controlType: any }) => {
+    const isFullWidth = isFullWidthField(field, props.content, repository)
+
+    return (
+      <Grid
+        item={true}
+        xs={12}
+        sm={12}
+        md={12}
+        lg={12}
+        xl={12}
+        key={field.fieldSettings.Name}
+        className={classes.fieldWrapper}>
+        <div className={isFullWidth ? classes.fieldFullWidth : classes.field}>
+          {createElement(
+            controlMapper.getControlForContentField(props.content.Type, field.fieldSettings.Name, 'browse'),
+            {
+              actionName: 'browse',
+              settings: field.fieldSettings,
+              content: props.content,
+              fieldValue: (props.content as any)[field.fieldSettings.Name],
+              renderIcon: props.renderIcon,
+              repository: props.repository,
+              localization: props.fieldLocalization,
+              locale: props.locale,
+            },
+          )}
+        </div>
+      </Grid>
+    )
+  }
+
   return (
     <>
       {props.renderTitle ? (
@@ -72,38 +136,28 @@ export const BrowseView: React.FC<BrowseViewProps> = (props) => {
       )}
       <Grid container={true} spacing={2} className={classes.grid}>
         {schema.fieldMappings
+          .filter((i) => !advancedFields.includes(i.fieldSettings.Name))
           .sort((item1, item2) => (item2.fieldSettings.FieldIndex || 0) - (item1.fieldSettings.FieldIndex || 0))
-          .map((field) => {
-            const isFullWidth = isFullWidthField(field, props.content, repository)
+          .map((field) => renderField(field))}
 
-            return (
-              <Grid
-                item={true}
-                xs={12}
-                sm={12}
-                md={12}
-                lg={12}
-                xl={12}
-                key={field.fieldSettings.Name}
-                className={classes.fieldWrapper}>
-                <div className={isFullWidth ? classes.fieldFullWidth : classes.field}>
-                  {createElement(
-                    controlMapper.getControlForContentField(props.content.Type, field.fieldSettings.Name, 'browse'),
-                    {
-                      actionName: 'browse',
-                      settings: field.fieldSettings,
-                      content: props.content,
-                      fieldValue: (props.content as any)[field.fieldSettings.Name],
-                      renderIcon: props.renderIcon,
-                      repository: props.repository,
-                      localization: props.fieldLocalization,
-                      locale: props.locale,
-                    },
-                  )}
-                </div>
-              </Grid>
-            )
-          })}
+        {advancedFields.length > 0 && (
+          <>
+            <Box className={classes.divider} />
+            <Box className={classes.advancedFieldContainer}>
+              <Box className={classes.advancedFieldBox}>
+                <span>{props.localization?.advancedFields ?? 'Advanced fields'}</span>
+                <IconButton onClick={() => setShowAdvancedFields(!showAdvancedFields)}>
+                  {showAdvancedFields ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
+                </IconButton>
+              </Box>
+            </Box>
+            {showAdvancedFields &&
+              schema.fieldMappings
+                .filter((i) => advancedFields.includes(i.fieldSettings.Name))
+                .sort((item1, item2) => (item2.fieldSettings.FieldIndex || 0) - (item1.fieldSettings.FieldIndex || 0))
+                .map((field) => renderField(field))}
+          </>
+        )}
       </Grid>
 
       <div className={classes.actionButtonWrapper}>