-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Asset] Finish asset grid config save process (#891)
* hide the save filters logic * changed the value of date from static to dynamic * changed the value of username from static to dynamic * added the role api and get lists of data * refactored the typing * styled the switcher and fixed the icon name around the project * styled the renderUserView * created the UsersRolesDropdown component * updated the UsersRolesDropdown * updated the UsersRolesDropDown component * added the logic into the dropdown component * updated logic for showing selected values * updated styles * refactored code * updated the UsersRolesDropdown component * updated logic * added the comment to resolve it after the backend improvement has been done * added translations * added translations * updated translations * fixed style * updated logic in the EditView component * filtered the option list by user ID * fixed the test code * updated the API * fixed the isLoading state * fixed select * deleted the test code * deleted test code * Automatic frontend build --------- Co-authored-by: ValeriaMaltseva <[email protected]>
- Loading branch information
1 parent
d25473c
commit 658eacc
Showing
39 changed files
with
2,548 additions
and
123 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
assets/js/src/core/components/users-roles-dropdown/users-roles-dropdown.styles.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /** | ||
| * Pimcore | ||
| * | ||
| * This source file is available under two different licenses: | ||
| * - Pimcore Open Core License (POCL) | ||
| * - Pimcore Commercial License (PCL) | ||
| * Full copyright and license information is available in | ||
| * LICENSE.md which is distributed with this source code. | ||
| * | ||
| * @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org) | ||
| * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL | ||
| */ | ||
|
|
||
| import { createStyles } from 'antd-style' | ||
|
|
||
| export const useStyles = createStyles(({ token, css }) => { | ||
| return { | ||
| dropdown: css` | ||
| position: absolute; | ||
| top: 35px; | ||
| width: 360px; | ||
| background-color: ${token.colorBgContainer}; | ||
| box-shadow: ${token.boxShadowSecondary}; | ||
| z-index: 1; | ||
| `, | ||
|
|
||
| tabs: css` | ||
| .ant-tabs-nav-list { | ||
| justify-content: space-around; | ||
| width: 100%; | ||
| } | ||
| .ant-tabs-ink-bar { | ||
| width: 50% !important; | ||
| } | ||
| .ant-tabs-content-holder { | ||
| padding: ${token.paddingXS}px; | ||
| } | ||
| `, | ||
|
|
||
| btnGroupWrapper: css` | ||
| display: flex; | ||
| justify-content: flex-end; | ||
| padding: 7px ${token.paddingXS}px; | ||
| ` | ||
| } | ||
| }) |
170 changes: 170 additions & 0 deletions
170
assets/js/src/core/components/users-roles-dropdown/users-roles-dropdown.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| /** | ||
| * Pimcore | ||
| * | ||
| * This source file is available under two different licenses: | ||
| * - Pimcore Open Core License (POCL) | ||
| * - Pimcore Commercial License (PCL) | ||
| * Full copyright and license information is available in | ||
| * LICENSE.md which is distributed with this source code. | ||
| * | ||
| * @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org) | ||
| * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL | ||
| */ | ||
|
|
||
| import React, { useState, type ReactNode } from 'react' | ||
| import { useTranslation } from 'react-i18next' | ||
| import { isEmpty } from 'lodash' | ||
| import { useListGridConfig } from '@Pimcore/modules/asset/editor/types/folder/tab-manager/tabs/list/hooks/use-list' | ||
| import { type ITabsProps, Tabs } from '@Pimcore/components/tabs/tabs' | ||
| import { Select } from '@Pimcore/components/select/select' | ||
| import { Text } from '@Pimcore/components/text/text' | ||
| import { Flex } from '@Pimcore/components/flex/flex' | ||
| import { Icon } from '@Pimcore/components/icon/icon' | ||
| import { ButtonGroup } from '@Pimcore/components/button-group/button-group' | ||
| import { Button } from '@Pimcore/components/button/button' | ||
| import { useUser } from '@Pimcore/modules/auth/hooks/use-user' | ||
| import type { RoleGetCollectionApiResponse } from '@Pimcore/modules/user/role/role-api-slice.gen' | ||
| import type { UserGetCollectionApiResponse } from '@Pimcore/modules/auth/user/user-api-slice.gen' | ||
| import { useStyles } from './users-roles-dropdown.styles' | ||
|
|
||
| interface IUsersRolesDropdownProps { | ||
| roleList?: RoleGetCollectionApiResponse | ||
| userList?: UserGetCollectionApiResponse | ||
| handleClose: () => void | ||
| } | ||
|
|
||
| interface IRenderSelectProps { | ||
| options?: Array<{ value: string, label: ReactNode }> | ||
| placeholder: string | ||
| handleOnChange: any | ||
| selectedOptions: number[] | ||
| } | ||
|
|
||
| export const UsersRolesDropdown = ({ userList, roleList, handleClose }: IUsersRolesDropdownProps): React.JSX.Element => { | ||
| const { gridConfig, setGridConfig } = useListGridConfig() | ||
| const userData = useUser() | ||
|
|
||
| const initialSharedUsers = gridConfig?.sharedUsers as number[] | ||
| const initialSharedRoles = gridConfig?.sharedRoles as number[] | ||
|
|
||
| const [sharedUsersList, setSharedUsersList] = useState<number[]>(initialSharedUsers ?? []) | ||
| const [sharedRolesList, setSharedRolesList] = useState<number[]>(initialSharedRoles ?? []) | ||
|
|
||
| const { t } = useTranslation() | ||
| const { styles } = useStyles() | ||
|
|
||
| const handleChangeSharedUsers = (usersIdList: number[]): void => { | ||
| setSharedUsersList(usersIdList) | ||
| } | ||
|
|
||
| const handleChangeSharedRoles = (rolesIdList: number[]): void => { | ||
| setSharedRolesList(rolesIdList) | ||
| } | ||
|
|
||
| const handleApplyChanges = (): void => { | ||
| if (!isEmpty(gridConfig)) { | ||
| setGridConfig({ | ||
| ...gridConfig, | ||
| shareGlobal: false, | ||
| sharedUsers: sharedUsersList, | ||
| sharedRoles: sharedRolesList | ||
| }) | ||
|
|
||
| handleClose() | ||
| } | ||
| } | ||
|
|
||
| const renderLabel = ({ labelName, iconName }: { labelName?: string, iconName: string }): React.JSX.Element => ( | ||
| <Flex | ||
| align="center" | ||
| gap="mini" | ||
| > | ||
| <Icon value={ iconName } /> | ||
| <Text>{labelName}</Text> | ||
| </Flex> | ||
| ) | ||
|
|
||
| const renderSelect = ({ options, selectedOptions, placeholder, handleOnChange }: IRenderSelectProps): React.JSX.Element => ( | ||
| <Select | ||
| mode="multiple" | ||
| onChange={ handleOnChange } | ||
| optionFilterProp="value" | ||
| options={ options } | ||
| placeholder={ t(placeholder) } | ||
| showSearch | ||
| value={ selectedOptions } | ||
| /> | ||
| ) | ||
|
|
||
| const renderUsers = (): React.JSX.Element => { | ||
| const options = userList?.items | ||
| ?.filter(item => userData?.id !== item.id) | ||
| ?.map((item, index) => ({ | ||
| value: `${index}-${item?.username}`, | ||
| label: renderLabel({ labelName: item?.username, iconName: 'user' }) | ||
| })) | ||
|
|
||
| return renderSelect({ | ||
| options, | ||
| selectedOptions: sharedUsersList, | ||
| placeholder: 'user-management.user.search', | ||
| handleOnChange: handleChangeSharedUsers | ||
| }) | ||
| } | ||
|
|
||
| const renderRoles = (): React.JSX.Element => { | ||
| const options = roleList?.items?.map((item, index) => ({ | ||
| value: `${index}-${item?.name}`, | ||
| label: renderLabel({ labelName: item?.name, iconName: 'shield' }) | ||
| })) | ||
|
|
||
| return renderSelect({ | ||
| options, | ||
| selectedOptions: sharedRolesList, | ||
| placeholder: 'user-management.role.search', | ||
| handleOnChange: handleChangeSharedRoles | ||
| }) | ||
| } | ||
|
|
||
| const tabItems: ITabsProps['items'] = [ | ||
| { | ||
| key: 'users', | ||
| label: t('user-management.key-bindings.users'), | ||
| children: renderUsers() | ||
| }, | ||
| { | ||
| key: 'roles', | ||
| label: t('user-management.key-bindings.roles'), | ||
| children: renderRoles() | ||
| } | ||
| ] | ||
|
|
||
| return ( | ||
| <div className={ styles.dropdown }> | ||
| <Tabs | ||
| centered | ||
| className={ styles.tabs } | ||
| items={ tabItems } | ||
| /> | ||
| <div className={ styles.btnGroupWrapper }> | ||
| <ButtonGroup | ||
| items={ [ | ||
| <Button | ||
| key="cancel" | ||
| onClick={ handleClose } | ||
| > | ||
| {t('button.cancel-edits')} | ||
| </Button>, | ||
| <Button | ||
| key="apply" | ||
| onClick={ handleApplyChanges } | ||
| type="primary" | ||
| > | ||
| {t('button.apply')} | ||
| </Button> | ||
| ] } | ||
| /> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
48 changes: 48 additions & 0 deletions
48
...t/editor/types/folder/tab-manager/tabs/list/sidebar/grid-config/forms/save-form.styles.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /** | ||
| * Pimcore | ||
| * | ||
| * This source file is available under two different licenses: | ||
| * - Pimcore Open Core License (POCL) | ||
| * - Pimcore Commercial License (PCL) | ||
| * Full copyright and license information is available in | ||
| * LICENSE.md which is distributed with this source code. | ||
| * | ||
| * @copyright Copyright (c) Pimcore GmbH (http://www.pimcore.org) | ||
| * @license https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL | ||
| */ | ||
|
|
||
| import { createStyles } from 'antd-style' | ||
|
|
||
| export const useStyles = createStyles(({ css, token }) => { | ||
| return { | ||
| label: css` | ||
| color: ${token.colorTextLabel}; | ||
| `, | ||
|
|
||
| icon: css` | ||
| color: ${token.colorTextLabel}; | ||
| `, | ||
|
|
||
| updateButton: css` | ||
| color: ${token.Button.defaultColor}; | ||
| .pimcore-icon { | ||
| color: ${token.Button.defaultColor}; | ||
| } | ||
| &:hover { | ||
| cursor: pointer; | ||
| } | ||
| `, | ||
|
|
||
| updateButtonText: css` | ||
| color: ${token.Button.defaultColor}; | ||
| `, | ||
|
|
||
| tag: css` | ||
| .ant-tag { | ||
| background-color: ${token.Colors.Neutral.Fill.colorFillTertiary}; | ||
| } | ||
| ` | ||
| } | ||
| }) |
Oops, something went wrong.