[User management] Add workspace settings

assets/js/src/core/modules/user/management/detail/tabs/workspaces/components/special-settings.tsx

@@ -0,0 +1,128 @@
+/**
+ * This source file is available under the terms of the
+ * Pimcore Open Core License (POCL)
+ * Full copyright and license information is available in
+ * LICENSE.md which is distributed with this source code.
+ *
+ *  @copyright  Copyright (c) Pimcore GmbH (https://www.pimcore.com)
+ *  @license    Pimcore Open Core License (POCL)
+ */
+
+import React, { useEffect } from 'react'
+import { Accordion } from '@Pimcore/components/accordion/accordion'
+import { useTranslation } from 'react-i18next'
+import { Flex } from '@Pimcore/components/flex/flex'
+import {
+  useClassAllLayoutCollectionQuery
+} from '@Pimcore/modules/class-definition/class-definition-slice.gen'
+import { Select } from '@Pimcore/components/select/select'
+import { Form } from 'antd'
+import { useSettings } from '@Pimcore/modules/app/settings/hooks/use-settings'
+import { useLanguageLookup } from '@Pimcore/modules/translations/hooks/use-language-lookup'
+
+interface ISpecialSettings {
+  localizedView: string[]
+  localizedEdit: string[]
+  layouts: string[]
+  onValuesChange: (changedValues: any) => void
+}
+
+const SpecialSettings = ({ localizedView, localizedEdit, layouts, onValuesChange }: ISpecialSettings): React.JSX.Element => {
+  const { t } = useTranslation()
+  const { data } = useClassAllLayoutCollectionQuery()
+  const { validLanguages } = useSettings()
+  const { getDisplayName } = useLanguageLookup()
+
+  const [form] = Form.useForm()
+
+  useEffect(() => {
+    form.setFieldsValue({
+      localizedView,
+      localizedEdit,
+      layouts
+    })
+  }, [])
+
+  return (
+    <Form
+      form={ form }
+      layout="vertical"
+      onValuesChange={ onValuesChange }
+    >
+      <Flex
+        gap={ 'small' }
+        vertical
+      >
+        <Accordion
+          activeKey={ 'localizedFields' }
+          bordered
+          items={ [
+            {
+              key: 'localizedFields',
+              title: <>{ t('user-management.workspaces.localized-fields') }</>,
+              children: <>
+                <Form.Item
+                  label={ t('user-management.workspaces.localized-fields.view') }
+                  name="localizedView"
+                >
+                  <Select
+                    mode="multiple"
+                    options={ validLanguages.map((lang: string) => ({
+                      value: lang,
+                      label: getDisplayName(lang)
+                    })) }
+                    placeholder={ t('user-management.workspaces.localized-fields.view') }
+                  ></Select>
+                </Form.Item>
+
+                <Form.Item
+                  label={ t('user-management.workspaces.localized-fields.edit') }
+                  name="localizedEdit"
+                >
+                  <Select
+                    mode="multiple"
+                    options={ validLanguages.map((lang: string) => ({
+                      value: lang,
+                      label: getDisplayName(lang)
+                    })) }
+                    placeholder={ t('user-management.workspaces.localized-fields.edit') }
+                  ></Select>
+                </Form.Item>
+              </>
+            }
+          ]
+                    }
+          size={ 'small' }
+        />
+
+        <Accordion
+          activeKey={ 'customLayouts' }
+          bordered
+          items={ [
+            {
+              key: 'customLayouts',
+              title: <>{ t('user-management.workspaces.custom-layouts') }</>,
+              children: <Form.Item
+                label={ t('user-management.workspaces.custom-layouts.select') }
+                name="layouts"
+                        >
+                <Select
+                  mode="multiple"
+                  options={ data?.items.map((layout) => ({
+                    value: layout.id,
+                    label: layout.name
+                  })) }
+                  placeholder={ t('user-management.workspaces.custom-layouts.select') }
+                ></Select>
+              </Form.Item>
+            }
+          ]
+                    }
+          size={ 'small' }
+        />
+      </Flex>
+    </Form>
+  )
+}
+
+export { SpecialSettings }

assets/js/src/core/modules/user/management/detail/tabs/workspaces/components/table/table.tsx

@@ -24,19 +24,21 @@ interface ITableProps {
   type?: string
   showDuplicatePropertyModal: () => void
   onUpdateData: (data: UserWorkspace[]) => void
+  onShowSpecialSettings?: (id: number) => void
 }
 
 export const Table = ({
   showDuplicatePropertyModal,
   data,
   type,
   isLoading,
-  onUpdateData
+  onUpdateData, onShowSpecialSettings
 }: ITableProps): React.JSX.Element => {
   const { t } = useTranslation()
   const [gridData, setGridData] = React.useState<UserWorkspace[]>(data)
 
   const isAsset = type === WorkspaceType.ASSET
+  const isObject = type === WorkspaceType.OBJECT
 
   useEffect(() => {
     setGridData(data)
@@ -178,9 +180,24 @@ export const Table = ({
         }
       }
     }),
+    ...isObject
+      ? [columnHelper.accessor('specialSettings', {
+          header: '',
+          size: 40,
+          cell: (context) => {
+            return (
+              <IconButton
+                icon={ { value: 'settings' } }
+                onClick={ () => onShowSpecialSettings?.((context.row.original as UserWorkspace).cid) }
+                type="link"
+              />
+            )
+          }
+        })]
+      : [],
     columnHelper.accessor('actions', {
-      header: t('user-management.workspaces.columns.delete'),
-      size: 60,
+      header: '',
+      size: 40,
       cell: (context) => {
         return (
           <Flex

assets/js/src/core/modules/user/management/detail/tabs/workspaces/workspaces-container.tsx

@@ -13,14 +13,15 @@ import { Accordion } from '@Pimcore/components/accordion/accordion'
 import { useTranslation } from 'react-i18next'
 import { Table } from '@Pimcore/modules/user/management/detail/tabs/workspaces/components/table/table'
 import { IconTextButton } from '@Pimcore/components/icon-text-button/icon-text-button'
-import type { UserWorkspace } from '@Pimcore/modules/auth/user/user-api-slice.gen'
+import type { UserWorkspace, UserDocumentWorkspace } from '@Pimcore/modules/auth/user/user-api-slice.gen'
 import { useUserManagementDraft } from '@Pimcore/modules/user/hooks/use-user-management-draft'
 import { useUserManagementContext } from '@Pimcore/modules/user/hooks/use-user-management-context'
 import { Flex } from '@Pimcore/components/flex/flex'
 import { useModal } from '@Pimcore/components/modal/useModal'
 import { ModalFooter } from '@Pimcore/components/modal/footer/modal-footer'
 import { Button } from '@Pimcore/components/button/button'
 import { createTabContentTestId } from '@Pimcore/utils/test-id-generator'
+import { SpecialSettings } from '@Pimcore/modules/user/management/detail/tabs/workspaces/components/special-settings'
 
 export enum WorkspaceType {
   DOCUMENT = 'document',
@@ -35,7 +36,9 @@ const WorkspacesContainer = ({ ...props }): React.JSX.Element => {
 
   const [assetWorkspaces, setAssetWorkspaces] = useState<UserWorkspace[]>(user?.assetWorkspaces ?? [])
   const [documentWorkspaces, setDocumentWorkspaces] = useState<UserWorkspace[]>(user?.documentWorkspaces ?? [])
-  const [objectWorkspaces, setObjectWorkspaces] = useState<UserWorkspace[]>(user?.dataObjectWorkspaces ?? [])
+  const [objectWorkspaces, setObjectWorkspaces] = useState<UserDocumentWorkspace[]>(user?.dataObjectWorkspaces ?? [])
+
+  const [specialModalContext, setSpecialModalContext] = useState<number | null>(null)
 
   const {
     showModal: showDuplicatePropertyModal,
@@ -45,6 +48,8 @@ const WorkspacesContainer = ({ ...props }): React.JSX.Element => {
     type: 'error'
   })
 
+  const { renderModal: SpecialSettingsModal, showModal: showSpecialSettingsModal, handleCancel, handleOk } = useModal({ type: 'default' })
+
   if (user === undefined) {
     return <></>
   }
@@ -133,6 +138,12 @@ const WorkspacesContainer = ({ ...props }): React.JSX.Element => {
     }
   ]
 
+  let currentSpecialModalData: object = {}
+
+  const getSpecialModalValues = (type: string): string[] => {
+    return user?.dataObjectWorkspaces.find(ws => ws.cid === specialModalContext)?.[type] ?? []
+  }
+
   const objectsAccordion = [
     {
       key: 'objects',
@@ -166,6 +177,10 @@ const WorkspacesContainer = ({ ...props }): React.JSX.Element => {
         <Table
           data={ objectWorkspaces }
           isLoading={ isLoading }
+          onShowSpecialSettings={ (id) => {
+            setSpecialModalContext(id)
+            showSpecialSettingsModal()
+          } }
           onUpdateData={ (data) => { changeUserInState({ dataObjectWorkspaces: data }) } }
           showDuplicatePropertyModal={ () => {
             showDuplicatePropertyModal()
@@ -224,6 +239,43 @@ const WorkspacesContainer = ({ ...props }): React.JSX.Element => {
       >
         {t('properties.property-already-exist.error')}
       </DuplicatePropertyModal>
+
+      <SpecialSettingsModal
+        footer={
+          <ModalFooter>
+            <Button
+              onClick={ handleCancel }
+              type={ 'default' }
+            >
+              {t('button.cancel')}
+            </Button>
+            <Button
+              onClick={ () => {
+                changeUserInState({
+                  dataObjectWorkspaces: user.dataObjectWorkspaces.map(ws => ws.cid === specialModalContext ? { ...ws, ...currentSpecialModalData } : ws)
+                })
+
+                handleOk()
+              } }
+              type={ 'primary' }
+            >
+              {t('button.apply')}
+            </Button>
+          </ModalFooter>
+            }
+        size={ 'L' }
+        title={ t('user-management.workspaces.additional-settings') }
+      >
+        <SpecialSettings
+          layouts={ getSpecialModalValues('layouts') }
+          localizedEdit={ getSpecialModalValues('localizedEdit') }
+          localizedView={ getSpecialModalValues('localizedView') }
+          onValuesChange={ (changedValues) => {
+            const mergedData = { ...currentSpecialModalData, ...changedValues }
+            currentSpecialModalData = mergedData
+          } }
+        />
+      </SpecialSettingsModal>
     </Flex>
   )
 }