Skip to content

Commit

Permalink
updated page that used the select component
Browse files Browse the repository at this point in the history
  • Loading branch information
@ValeriaMaltseva
ValeriaMaltseva committed Oct 9, 2024
1 parent 30b67d1 commit 8e33ca5
Show file tree
Hide file tree
Showing 7 changed files with 1,420 additions and 1,429 deletions.
4 changes: 2 additions & 2 deletions assets/js/src/core/components/select/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ interface SelectProps extends AntdSelectProps {
customIcon?: string
}

export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, customArrowIcon, mode, status, ...antdSelectProps }, ref): React.JSX.Element => {
export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, customArrowIcon, mode, status, className, ...antdSelectProps }, ref): React.JSX.Element => {
const selectRef = useRef<RefSelectProps>(null)

const [isActive, setIsActive] = useState(false)
Expand All @@ -42,7 +42,7 @@ export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, cus
[styles.selectContainerWarning]: isStatusWarning,
[styles.selectContainerError]: isStatusError
})
const selectClassNames = cn(styles.select, {
const selectClassNames = cn(className, styles.select, {
[styles.selectWithCustomIcon]: withCustomIcon
})
const customIconClassNames = cn(styles.customIcon, 'custom-select-icon', {
Expand Down
23 changes: 3 additions & 20 deletions .../asset/editor/shared-tab-manager/tabs/custom-metadata/custom-metadata-container.styles.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,27 +13,10 @@

import { createStyles } from 'antd-style'

export const useStyle = createStyles(({ token, css }) => {
export const useStyle = createStyles(({ css }) => {
return {
tab: css`
`,
toolbar: css`
// @todo: remove after replacement with centralized select component
.ant-select {
.ant-select-selector {
min-width: 100px;
border: 1px solid ${token.Button.defaultBorderColor};
.ant-select-selection-placeholder {
color: ${token.Button.defaultColor} !important;
}
}
.ant-select-arrow {
color: ${token.Button.defaultColor} !important;
}
}
customMetadataSelect: css`
min-width: 100px;
`
}
})
254 changes: 131 additions & 123 deletions ...odules/asset/editor/shared-tab-manager/tabs/custom-metadata/custom-metadata-container.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,8 @@
import React, { useContext, useRef, useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { type InputRef } from 'antd'
import Input from 'antd/es/input/Input'
import { Button } from '@Pimcore/components/button/button'
import { Select } from '@Pimcore/components/select/select'
import Input from 'antd/es/input/Input'
import {
CustomMetadataTable
} from '@Pimcore/modules/asset/editor/shared-tab-manager/tabs/custom-metadata/components/table/table'
Expand All @@ -36,16 +35,15 @@ import { Header } from '@Pimcore/components/header/header'
import { Content } from '@Pimcore/components/content/content'
import { type CustomMetadata } from '@Pimcore/modules/asset/draft/hooks/use-custom-metadata'
import { Space } from '@Pimcore/components/space/space'
import { Select } from '@Pimcore/components/select/select'
import { useStyle } from './custom-metadata-container.styles'

export const CustomMetadataTabContainer = (): React.JSX.Element => {
const { id } = useContext(AssetContext)
const [editMode, setEditMode] = useState<boolean>(false)

const { t } = useTranslation()

const [editmode, setEditMode] = useState<boolean>(false)
const { styles } = useStyle()
const settings = useSettings()
const { id } = useContext(AssetContext)
const { addCustomMetadata, customMetadata } = useAssetDraft(id)
const {
showModal: showDuplicateEntryModal,
Expand All @@ -60,7 +58,6 @@ export const CustomMetadataTabContainer = (): React.JSX.Element => {

const nameInputValue = useRef<string>('')
const nameInputRef = useRef<InputRef>(null)

const typeSelectValue = useRef<string>('input')
const languageSelectValue = useRef<string>('')

Expand All @@ -69,17 +66,23 @@ export const CustomMetadataTabContainer = (): React.JSX.Element => {
return { value: type, label: t('data-type.' + type) }
})

const onNameInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
function onNameInputChange (event: React.ChangeEvent<HTMLInputElement>): void {
nameInputValue.current = event.target.value
}

const onTypeSelectChange = (value: string): void => { typeSelectValue.current = value }
function onTypeSelectChange (value: string): void {
typeSelectValue.current = value
}

const onLanguageSelectChange = (value: string): void => { languageSelectValue.current = value }
function onLanguageSelectChange (value: string): void {
languageSelectValue.current = value
}

const onLanguageSelectClear = (): void => { languageSelectValue.current = '' }
function onLanguageSelectClear (): void {
languageSelectValue.current = ''
}

const onAddPropertyClick = (): void => {
function onAddPropertyClick (): void {
const isValidNameInput = nameInputValue.current !== undefined && nameInputValue.current.length > 0
const isValidTypeSelectValue = typeSelectValue.current !== undefined

Expand All @@ -105,123 +108,128 @@ export const CustomMetadataTabContainer = (): React.JSX.Element => {
addCustomMetadata(newCustomMetadata)
}

const resetFormValues = (): void => {
typeSelectValue.current = 'input'
nameInputValue.current = ''
languageSelectValue.current = ''
}

useEffect(() => {
editMode ? nameInputRef.current?.focus() : resetFormValues()
}, [editMode])
if (editmode) {
nameInputRef.current?.focus()
} else {
typeSelectValue.current = 'input'
nameInputValue.current = ''
languageSelectValue.current = ''
}
}, [editmode])

return (
<>
<Content
className={ styles.tab }
padded
<Content padded>
<Header
title={ t('asset.asset-editor-tabs.custom-metadata.text') }
>
<Header title={ t('asset.asset-editor-tabs.custom-metadata.text') }>
<div className={ ['pimcore-custom-metadata-toolbar', styles.toolbar].join(' ') }>
<Space size='extra-small'>
{editMode && (
<>
<Space size="extra-small">
<Button
onClick={ () => { setEditMode(false) } }
type={ 'link' }
>
{t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.cancel')}
</Button>

<Input
onChange={ onNameInputChange }
placeholder={ t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.name') }
ref={ nameInputRef }
/>

<Select
defaultValue={ typeSelectValue.current }
onSelect={ onTypeSelectChange }
options={ typeSelectOptions }
placeholder={ t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.type') }
/>

<Select
allowClear
onClear={ onLanguageSelectClear }
onSelect={ onLanguageSelectChange }
options={ settings.requiredLanguages.map((value: string) => {
return { value, label: value }
}) }
placeholder={ t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.language') }
/>

<IconTextButton
icon={ 'PlusCircleOutlined' }
onClick={ () => {
onAddPropertyClick()
} }
>
{t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.add')}
</IconTextButton>
</Space>
</>
)}

{!editMode && (
<ButtonGroup items={ [<Button
key={ t('asset.asset-editor-tabs.custom-metadata.add-predefined-definition') }
<div className='pimcore-custom-metadata-toolbar'>
<Space
size='extra-small'
>
{editmode && (
<>
<Space
size="extra-small"
>
<Button
onClick={ () => {
console.log('clicked')
setEditMode(false)
} }
>
{t('asset.asset-editor-tabs.custom-metadata.add-predefined-definition')}
</Button>,
<IconTextButton
icon={ 'PlusCircleOutlined' }
key={ t('asset.asset-editor-tabs.custom-metadata.add-custom-definition.add') }
onClick={ () => {
setEditMode(true)
} }
>
{t('asset.asset-editor-tabs.custom-metadata.add-custom-definition.add')}
</IconTextButton>] }
type={ 'link' }
>
{t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.cancel')}
</Button>

<Input
onChange={ onNameInputChange }
placeholder={ t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.name') }
ref={ nameInputRef }
/>
)}
</Space>
</div>
</Header>

<CustomMetadataTable
showDuplicateEntryModal={ showDuplicateEntryModal }
showMandatoryModal={ showMandatoryModal }
/>
</Content>

<MandatoryModal
footer={ <ModalFooter>
<Button
onClick={ closeMandatoryModal }
type='primary'
>{t('button.ok')}</Button>
</ModalFooter> }
title={ t('asset.asset-editor-tabs.custom-metadata.add-entry-mandatory-fields-missing.title') }
>
{t('asset.asset-editor-tabs.custom-metadata.add-entry-mandatory-fields-missing.error')}
</MandatoryModal>

<DuplicateEntryModal
footer={ <ModalFooter>
<Button
onClick={ closeDuplicateEntryModal }
type='primary'
>{t('button.ok')}</Button>
</ModalFooter> }
title={ t('asset.asset-editor-tabs.custom-metadata.custom-metadata-already-exist.title') }
>
{t('asset.asset-editor-tabs.custom-metadata.custom-metadata-already-exist.error')}
</DuplicateEntryModal>
</>

<Select
className={ styles.customMetadataSelect }
defaultValue={ typeSelectValue.current }
onSelect={ onTypeSelectChange }
options={ typeSelectOptions }
placeholder={ t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.type') }
/>

<Select
allowClear
className={ styles.customMetadataSelect }
onClear={ onLanguageSelectClear }
onSelect={ onLanguageSelectChange }
options={ settings.requiredLanguages.map((value: string) => {
return { value, label: value }
}) }
placeholder={ t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.language') }
/>

<IconTextButton
icon={ 'PlusCircleOutlined' }
onClick={ () => {
onAddPropertyClick()
} }
>
{t('asset.asset-editor-tabs.custom-metadata.add-custom-metadata.add')}
</IconTextButton>
</Space>

<DuplicateEntryModal
footer={ <ModalFooter>
<Button
onClick={ closeDuplicateEntryModal }
type='primary'
>{t('button.ok')}</Button>
</ModalFooter> }
title={ t('asset.asset-editor-tabs.custom-metadata.custom-metadata-already-exist.title') }
>
{t('asset.asset-editor-tabs.custom-metadata.custom-metadata-already-exist.error')}
</DuplicateEntryModal>

<MandatoryModal
footer={ <ModalFooter>
<Button
onClick={ closeMandatoryModal }
type='primary'
>{t('button.ok')}</Button>
</ModalFooter> }
title={ t('asset.asset-editor-tabs.custom-metadata.add-entry-mandatory-fields-missing.title') }
>
{t('asset.asset-editor-tabs.custom-metadata.add-entry-mandatory-fields-missing.error')}
</MandatoryModal>
</>
)}

{!editmode && (
<ButtonGroup items={ [<Button
key={ t('asset.asset-editor-tabs.custom-metadata.add-predefined-definition') }
onClick={ () => {
console.log('clicked')
} }
>
{t('asset.asset-editor-tabs.custom-metadata.add-predefined-definition')}
</Button>,
<IconTextButton
icon={ 'PlusCircleOutlined' }
key={ t('asset.asset-editor-tabs.custom-metadata.add-custom-definition.add') }
onClick={ () => {
setEditMode(true)
} }
>
{t('asset.asset-editor-tabs.custom-metadata.add-custom-definition.add')}
</IconTextButton>] }
/>
)}
</Space>
</div>
</Header>

<CustomMetadataTable
showDuplicateEntryModal={ showDuplicateEntryModal }
showMandatoryModal={ showMandatoryModal }
/>
</Content>
)
}
14 changes: 14 additions & 0 deletions public/build/b635e820-daf9-4d13-867c-7dbeb89657fb/entrypoints.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"entrypoints": {
"main": {
"css": [
"http://localhost:3030/build/b635e820-daf9-4d13-867c-7dbeb89657fb/vendors-node_modules_ant-design_icons_es_icons_CaretDownOutlined_js-node_modules_ant-design_i-ab460d.css",
"http://localhost:3030/build/b635e820-daf9-4d13-867c-7dbeb89657fb/main.css"
],
"js": [
"http://localhost:3030/build/b635e820-daf9-4d13-867c-7dbeb89657fb/vendors-node_modules_ant-design_icons_es_icons_CaretDownOutlined_js-node_modules_ant-design_i-ab460d.js",
"http://localhost:3030/build/b635e820-daf9-4d13-867c-7dbeb89657fb/main.js"
]
}
}
}
Loading

0 comments on commit 8e33ca5

Please sign in to comment.