[Translations] Add filters (#3839)

* added the search & filter tab

* Automatic frontend build

---------

Co-authored-by: ValeriaMaltseva <11871778+ValeriaMaltseva@users.noreply.github.com>

Author: ValeriaMaltseva

assets/js/src/core/modules/translations/filters/filters.tsx

@@ -0,0 +1,143 @@
+/**
+ * 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, { type FC } from 'react'
+import {
+  type AnyFilterDescriptor,
+  type FilterControlProps,
+  type FilterHostAdapter,
+  createFiltersStore,
+  defineFilter
+} from '@Pimcore/components/filters'
+import { SearchInput } from '@Pimcore/components/search-input/search-input'
+import { useDynamicTypeResolver } from '@Pimcore/modules/element/dynamic-types/resolver/hooks/use-dynamic-type-resolver'
+import { DynamicTypeFieldFilterAbstract } from '@Pimcore/modules/element/dynamic-types/definitions/field-filters/dynamic-type-field-filter-abstract'
+import { type FieldFilter } from '@Pimcore/modules/element/listing/decorators/general-filters/context-layer/provider/field-filters/field-filters-provider'
+import { useTranslationFilterColumns } from '@Pimcore/modules/translations/filters/hooks/use-translation-filter-columns'
+import {
+  type TranslationColumnFilter,
+  type TranslationFilterContext,
+  type TranslationFilterContribution,
+  type TranslationFilterQuery
+} from '@Pimcore/modules/translations/filters/types'
+
+export const {
+  FiltersStoreProvider: TranslationsAppliedFiltersProvider,
+  useFiltersStore: useTranslationsAppliedFilters
+} = createFiltersStore()
+
+export const {
+  FiltersStoreProvider: TranslationsDraftFiltersProvider,
+  useFiltersStore: useTranslationsDraftFilters
+} = createFiltersStore()
+
+export const useTranslationsFilterContext = (): TranslationFilterContext => {
+  const { getType } = useDynamicTypeResolver()
+  const columns = useTranslationFilterColumns()
+
+  return { columns, getType }
+}
+
+const prepareFieldFilters = (filters: FieldFilter[], context: TranslationFilterContext): TranslationColumnFilter[] => {
+  const { columns, getType } = context
+  const preparedFilters: TranslationColumnFilter[] = []
+
+  filters.forEach((filter) => {
+    const column = columns.find((col) => col.key === filter.key)
+
+    if (column === undefined) {
+      return
+    }
+
+    let type = getType({ target: 'FIELD_FILTER', dynamicTypeIds: [column.type, column.frontendType] })
+
+    if (type === null) {
+      return
+    }
+
+    if (!(type instanceof DynamicTypeFieldFilterAbstract)) {
+      if ('dynamicTypeFieldFilterType' in type) {
+        type = type.dynamicTypeFieldFilterType as DynamicTypeFieldFilterAbstract
+      } else {
+        return
+      }
+    }
+
+    const dynamicTypeFieldFilter = type as DynamicTypeFieldFilterAbstract
+
+    if (!dynamicTypeFieldFilter.shouldApply(filter)) {
+      return
+    }
+
+    preparedFilters.push({ key: column.key, type: column.type, filterValue: String(filter.filterValue) })
+  })
+
+  return preparedFilters
+}
+
+const SearchTermControl: FC<FilterControlProps<string>> = ({ value, onChange }) => (
+  <SearchInput
+    className='w-full'
+    data-testid='translations-search-input'
+    maxWidth={ '100%' }
+    onChange={ (event) => { onChange(event.target.value) } }
+    placeholder='Search'
+    value={ value }
+  />
+)
+
+const searchTermDescriptor = defineFilter<string, TranslationFilterContribution, TranslationFilterContext>({
+  key: 'searchTerm',
+  defaultValue: '',
+  section: 'search',
+  order: 0,
+  isEnabled: () => true,
+  Control: SearchTermControl,
+  toQuery: (value) => value !== '' ? { kind: 'columnFilters', filters: [{ type: 'search', filterValue: value }] } : undefined
+})
+
+const fieldFiltersDescriptor = defineFilter<FieldFilter[], TranslationFilterContribution, TranslationFilterContext>({
+  key: 'fieldFilters',
+  defaultValue: [],
+  section: 'fields',
+  order: 10,
+  isEnabled: () => true,
+  toQuery: (value, context) => {
+    if (value.length === 0) {
+      return undefined
+    }
+
+    return { kind: 'columnFilters', filters: prepareFieldFilters(value, context) }
+  }
+})
+
+export const translationsFilterDescriptors: ReadonlyArray<AnyFilterDescriptor<TranslationFilterContribution, TranslationFilterContext>> = [
+  searchTermDescriptor,
+  fieldFiltersDescriptor
+]
+
+export const translationsFilterAdapter: FilterHostAdapter<TranslationFilterContribution, TranslationFilterContext, TranslationFilterQuery> = {
+  descriptors: translationsFilterDescriptors,
+  useBuildContext: useTranslationsFilterContext,
+  composeIntoQuery: (contributions, baseQuery) => {
+    const next: TranslationFilterQuery = { ...baseQuery }
+    const columnFilters: TranslationColumnFilter[] = []
+
+    for (const contribution of contributions) {
+      columnFilters.push(...contribution.filters)
+    }
+
+    if (columnFilters.length > 0) {
+      next.columnFilters = columnFilters
+    }
+
+    return next
+  }
+}

assets/js/src/core/modules/translations/filters/hooks/use-translation-filter-columns.ts

@@ -0,0 +1,39 @@
+/**
+ * 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 { useMemo } from 'react'
+import { useTranslationGetDomainsQuery } from '@Pimcore/modules/app/translations/translations-api-slice-enhanced'
+import { useTranslationDomain } from '@Pimcore/modules/translations/hooks/translation-domain-provider'
+import { useWebsiteTranslationLanguages, useAdminTranslationLanguages } from '@Pimcore/modules/translations/hooks/use-translation-languages'
+import { type TranslationFilterColumn } from '@Pimcore/modules/translations/filters/types'
+
+export const LANGUAGE_COLUMN_FILTER_TYPE = 'translationLike'
+
+export const useTranslationFilterColumns = (): TranslationFilterColumn[] => {
+  const { domain } = useTranslationDomain()
+  const { data: domainsData } = useTranslationGetDomainsQuery()
+
+  const isFrontendDomain = (domainsData ?? []).find((d) => d.domain === domain)?.isFrontendDomain ?? false
+
+  const websiteLanguages = useWebsiteTranslationLanguages()
+  const adminLanguages = useAdminTranslationLanguages()
+  const { languages } = isFrontendDomain ? websiteLanguages : adminLanguages
+
+  const viewableLanguages = languages.filter((language) => language.canView)
+  const signature = viewableLanguages.map((language) => `${language.locale}:${language.displayName}`).join('|')
+
+  return useMemo(() => viewableLanguages.map((language) => ({
+    key: language.locale,
+    label: language.displayName,
+    type: LANGUAGE_COLUMN_FILTER_TYPE,
+    frontendType: 'string'
+  })),
+  [signature])
+}

assets/js/src/core/modules/translations/filters/hooks/use-translations-field-filter-editor.ts

@@ -0,0 +1,131 @@
+/**
+ * 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 { useEffect, useMemo, useState } from 'react'
+import { useDynamicTypeResolver } from '@Pimcore/modules/element/dynamic-types/resolver/hooks/use-dynamic-type-resolver'
+import { DynamicTypeFieldFilterAbstract } from '@Pimcore/modules/element/dynamic-types/definitions/field-filters/dynamic-type-field-filter-abstract'
+import { type FieldFilter } from '@Pimcore/modules/element/listing/decorators/general-filters/context-layer/provider/field-filters/field-filters-provider'
+import { type FieldFiltersProps } from '@Pimcore/components/field-filters/field-filters'
+import { type ColumnPickerGroup } from '@Pimcore/components/column-picker/column-picker.types'
+import { useTranslationsDraftFilters } from '@Pimcore/modules/translations/filters/filters'
+import { useTranslationFilterColumns } from '@Pimcore/modules/translations/filters/hooks/use-translation-filter-columns'
+import { type TranslationFilterColumn } from '@Pimcore/modules/translations/filters/types'
+
+export interface UseTranslationsFieldFilterEditorReturn {
+  filters: FieldFiltersProps['data']
+  onFilterChange: NonNullable<FieldFiltersProps['onChange']>
+  columnGroups: Array<ColumnPickerGroup<TranslationFilterColumn>>
+  handleColumnClick: (column: TranslationFilterColumn) => void
+}
+
+export const useTranslationsFieldFilterEditor = (): UseTranslationsFieldFilterEditorReturn => {
+  const { getType } = useDynamicTypeResolver()
+  const { values, setValue } = useTranslationsDraftFilters()
+  const columns = useTranslationFilterColumns()
+
+  const fieldFilters = (values.fieldFilters ?? []) as FieldFilter[]
+
+  const initialFilters: FieldFiltersProps['data'] = useMemo(() => {
+    const _initialFilters: FieldFiltersProps['data'] = []
+
+    for (const filter of fieldFilters) {
+      const column = columns.find((col) => col.key === filter.key)
+
+      if (column === undefined) {
+        continue
+      }
+
+      _initialFilters.push({
+        id: filter.key,
+        translationKey: filter.meta?.translationKey ?? column.label,
+        data: filter.filterValue,
+        type: filter.type,
+        frontendType: column.frontendType,
+        config: filter.meta ?? {}
+      })
+    }
+
+    return _initialFilters
+  }, [fieldFilters, columns])
+
+  const [filters, setFilters] = useState<FieldFiltersProps['data']>(initialFilters)
+
+  useEffect(() => {
+    setFilters(initialFilters)
+  }, [initialFilters])
+
+  const onFilterChange: UseTranslationsFieldFilterEditorReturn['onFilterChange'] = (data) => {
+    setFilters(data)
+    setValue('fieldFilters', data.map((filter) => ({
+      key: filter.id,
+      filterValue: filter.data,
+      type: filter.type,
+      locale: filter.locale,
+      meta: {
+        translationKey: filter.translationKey,
+        ...filter.config ?? {}
+      }
+    })))
+  }
+
+  const handleColumnClick = (column: TranslationFilterColumn): void => {
+    setFilters((prevFilters) => [
+      ...prevFilters,
+      {
+        data: undefined,
+        id: column.key,
+        translationKey: column.label,
+        type: column.type,
+        frontendType: column.frontendType,
+        config: {}
+      }
+    ])
+  }
+
+  const availableColumns = useMemo(() => columns.filter((column) => {
+    if (filters.some((filter) => filter.id === column.key)) {
+      return false
+    }
+
+    let dynamicType = getType({ target: 'FIELD_FILTER', dynamicTypeIds: [column.type, column.frontendType] })
+
+    if (dynamicType === null) {
+      return false
+    }
+
+    if (!(dynamicType instanceof DynamicTypeFieldFilterAbstract)) {
+      if ('dynamicTypeFieldFilterType' in dynamicType) {
+        dynamicType = dynamicType.dynamicTypeFieldFilterType as DynamicTypeFieldFilterAbstract
+      } else {
+        return false
+      }
+    }
+
+    return (dynamicType as DynamicTypeFieldFilterAbstract).isFilterAvailable(column.frontendType)
+  }), [filters, columns, getType])
+
+  const columnGroups = useMemo<Array<ColumnPickerGroup<TranslationFilterColumn>>>(() => {
+    if (availableColumns.length === 0) {
+      return []
+    }
+
+    return [{
+      key: 'translation-columns',
+      label: '',
+      items: availableColumns.map((column) => ({
+        key: column.key,
+        label: column.label,
+        meta: column
+      }))
+    }]
+  }, [availableColumns])
+
+  return { filters, onFilterChange, columnGroups, handleColumnClick }
+}

assets/js/src/core/modules/translations/filters/types.ts

@@ -0,0 +1,36 @@
+/**
+ * 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 type { UseDynamicTypeResolverReturnType } from '@Pimcore/modules/element/dynamic-types/resolver/hooks/use-dynamic-type-resolver'
+
+export interface TranslationColumnFilter {
+  key?: string
+  type: string
+  filterValue: string
+}
+
+export interface TranslationFilterColumn {
+  key: string
+  label: string
+  type: string
+  frontendType: string
+}
+
+export type TranslationFilterContribution =
+    | { kind: 'columnFilters', filters: TranslationColumnFilter[] }
+
+export interface TranslationFilterContext {
+  columns: TranslationFilterColumn[]
+  getType: UseDynamicTypeResolverReturnType['getType']
+}
+
+export interface TranslationFilterQuery {
+  columnFilters?: TranslationColumnFilter[]
+}