Tags loading

assets/js/src/core/app/api/pimcore/tags.ts

@@ -34,7 +34,9 @@ export const tagNames = {
   PROPERTIES: 'PROPERTIES',
   SCHEDULES: 'SCHEDULES',
   DEPENDENCIES: 'DEPENDENCIES',
-  NOTES_AND_EVENTS: 'NOTES_AND_EVENTS'
+  NOTES_AND_EVENTS: 'NOTES_AND_EVENTS',
+  TAGS: 'TAGS',
+  ELEMENT_TAGS: 'ELEMENT_TAGS'
 }
 
 export const providingTags = {
@@ -69,7 +71,10 @@ export const providingTags = {
   ELEMENT_WORKFLOW: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), tagNames.WORKFLOW],
   VERSIONS_DETAIL: (id: number) => [{ type: tagNames.VERSIONS, id }, tagNames.VERSIONS],
   ELEMENT_NOTES_AND_EVENTS: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), tagNames.NOTES_AND_EVENTS],
-  NOTES_AND_EVENTS_ID: (id: number) => [tagNames.NOTES_AND_EVENTS, { type: tagNames.NOTES_AND_EVENTS, id }]
+  NOTES_AND_EVENTS_ID: (id: number) => [tagNames.NOTES_AND_EVENTS, { type: tagNames.NOTES_AND_EVENTS, id }],
+  ELEMENT_TAGS: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), tagNames.ELEMENT_TAGS],
+  ELEMENT_TAGS_ID: (id: number) => [tagNames.ELEMENT_TAGS, { type: tagNames.ELEMENT_TAGS, id }],
+  TAGS_ID: (id: number) => [tagNames.TAGS, { type: tagNames.TAGS, id }]
 }
 
 export const invalidatingTags = {
@@ -94,7 +99,10 @@ export const invalidatingTags = {
   ELEMENT_WORKFLOW: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id)],
   NOTES_AND_EVENTS_ID: (id: number) => [{ type: tagNames.NOTES_AND_EVENTS, id }],
   VERSIONS_DETAIL: (id: number) => [{ type: tagNames.VERSIONS, id }],
-  ELEMENT_NOTES_AND_EVENTS: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), tagNames.NOTES_AND_EVENTS]
+  ELEMENT_NOTES_AND_EVENTS: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), tagNames.NOTES_AND_EVENTS],
+  ELEMENT_TAGS: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), tagNames.ELEMENT_TAGS],
+  ELEMENT_TAGS_ID: (id: number) => [tagNames.ELEMENT_TAGS, { type: tagNames.ELEMENT_TAGS, id }],
+  TAGS_ID: (id: number) => [tagNames.TAGS, { type: tagNames.TAGS, id }]
 }
 
 const getElementDetailTag = (elementType: ElementType, id: number): Tag => {

assets/js/src/core/modules/asset/editor/types/folder/tab-manager/tabs/list/sidebar/tag-filters/tags-tree-filters-container.tsx

@@ -11,21 +11,21 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import { useTagGetCollectionQuery } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice.gen'
 import React, { type Key } from 'react'
 import { Content } from '@Pimcore/components/content/content'
 import { Flex } from '@Pimcore/components/flex/flex'
 import { TreeElement } from '@Pimcore/components/tree-element/tree-element'
 import {
-  useCreateTreeStructure
-} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/components/tags-tree/hooks/use-create-tree-structure'
-
+  createTreeStructure
+} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/components/tags-tree/create-tree-structure'
+import {
+  useTagGetCollectionQuery
+} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice-enhanced'
 export const TagsTreeFiltersContainer = ({ addOrUpdateFieldFilter, checkedKeys, setCheckedKeys }: { addOrUpdateFieldFilter: (value: any) => void, checkedKeys: any, setCheckedKeys: any }): React.JSX.Element => {
   const { data: tags, isLoading: tagsLoading } = useTagGetCollectionQuery({
     page: 1,
     pageSize: 9999
   })
-  const { createTreeStructure } = useCreateTreeStructure()
 
   if (tagsLoading) {
     return <Content loading />
@@ -35,7 +35,7 @@ export const TagsTreeFiltersContainer = ({ addOrUpdateFieldFilter, checkedKeys,
     return <div>Failed to load tags</div>
   }
 
-  const treeData = createTreeStructure({ tags: tags.items })
+  const treeData = createTreeStructure({ tags: tags.items, loadingNodes: new Set<string>() })
 
   const handleCheck = (currentCheckedKeys: { checked: Key[], halfChecked: Key[] }): void => {
     const checkedKeysList = currentCheckedKeys.checked

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/tags/components/tags-tree/create-tree-structure.tsx

@@ -0,0 +1,67 @@
+/**
+* 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 {
+  type TagGetCollectionApiResponse
+} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice.gen'
+import type { TreeDataNode } from 'antd'
+import { Icon } from '@Pimcore/components/icon/icon'
+import { LoadingOutlined } from '@ant-design/icons'
+import React from 'react'
+
+export const createTreeStructure = ({ tags, loadingNodes }: { tags: NonNullable<TagGetCollectionApiResponse['items']>, loadingNodes: Set<string> }): TreeDataNode[] => {
+  const getTitle = (tagText: string | undefined, isLoading: boolean): React.ReactNode => {
+    if (tagText === undefined || tagText === null || tagText.trim() === '') {
+      return isLoading
+        ? (
+          <span>
+            <LoadingOutlined style={ { marginLeft: 8 } } />
+          </span>
+          )
+        : null
+    }
+
+    return (
+      <React.Fragment>
+        <span>{tagText}</span>
+        {isLoading && (
+        <LoadingOutlined style={ { marginLeft: 8 } } />
+        )}
+      </React.Fragment>
+    )
+  }
+
+  function treeWalker (tags: NonNullable<TagGetCollectionApiResponse['items']>): TreeDataNode[] {
+    return tags.map((tag) => {
+      const isLoading = loadingNodes.has(tag.id!.toString())
+      return {
+        key: tag.id!.toString(),
+        title: getTitle(tag.text, isLoading),
+        icon: Icon({
+          value: 'tag-02'
+        }),
+        disableCheckbox: isLoading,
+        children: tag.hasChildren === true ? treeWalker(tag.children!) : []
+      }
+    })
+  }
+
+  return [{
+    key: 'root',
+    title: 'All Tags',
+    icon: Icon({
+      value: 'folder'
+    }),
+    children: tags.length > 0 ? treeWalker(tags) : []
+  }]
+}

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/tags/components/tags-tree/tags-tree.tsx

@@ -11,16 +11,11 @@
 *  @license    https://github.com/pimcore/studio-ui-bundle/blob/1.x/LICENSE.md POCL and PCL
 */
 
-import React, { type Key } from 'react'
+import React, { type Key, useState } from 'react'
 import {
   type Tag,
-  type TagAssignToElementApiArg,
-  useTagAssignToElementMutation,
-  useTagUnassignFromElementMutation
+  type TagAssignToElementApiArg
 } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice.gen'
-import {
-  useCreateTreeStructure
-} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/components/tags-tree/hooks/use-create-tree-structure'
 import {
   useOptimisticUpdate
 } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/hooks/use-optimistic-update'
@@ -29,6 +24,15 @@ import { Flex } from '@Pimcore/components/flex/flex'
 import { TreeElement } from '@Pimcore/components/tree-element/tree-element'
 import { SearchInput } from '@Pimcore/components/search-input/search-input'
 import { type TreeProps } from 'antd'
+import {
+  createTreeStructure
+} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/components/tags-tree/create-tree-structure'
+import { t } from 'i18next'
+import { useMessage } from '@Pimcore/components/message/useMessage'
+import {
+  useTagAssignToElementMutation,
+  useTagUnassignFromElementMutation
+} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice-enhanced'
 
 export interface TagsTreeProps {
   elementId: number
@@ -40,13 +44,22 @@ export interface TagsTreeProps {
   setDefaultCheckedTags: (tags: React.Key[]) => void
 }
 
-export const TagsTree = ({ elementId, elementType, tags, setFilter, isLoading, defaultCheckedTags, setDefaultCheckedTags }: TagsTreeProps): React.JSX.Element => {
-  const { createTreeStructure } = useCreateTreeStructure()
-  const treeData = createTreeStructure({ tags })
+export const TagsTree = ({
+  elementId,
+  elementType,
+  tags,
+  setFilter,
+  isLoading,
+  defaultCheckedTags,
+  setDefaultCheckedTags
+}: TagsTreeProps): React.JSX.Element => {
   const { updateTagsForElementByTypeAndId } = useOptimisticUpdate()
+  const messageApi = useMessage()
   const flatTags = flattenArray(tags)
   const [assignTag] = useTagAssignToElementMutation()
+  const [loadingNodes, setLoadingNodes] = useState<Set<string>>(new Set())
   const [unassignTag] = useTagUnassignFromElementMutation()
+  const treeData = createTreeStructure({ tags, loadingNodes })
 
   const applyTagsToElement = async (checkedTags: Key[]): Promise<void> => {
     updateTagsForElementByTypeAndId({
@@ -95,8 +108,12 @@ export const TagsTree = ({ elementId, elementType, tags, setFilter, isLoading, d
     }
   }
 
-  const handleCheck: TreeProps['onCheck'] = async (checkedKeys: { checked: Key[], halfChecked: Key[] }, info): Promise<void> => {
+  const handleCheck: TreeProps['onCheck'] = async (checkedKeys: {
+    checked: Key[]
+    halfChecked: Key[]
+  }, info): Promise<void> => {
     const tagId = Number(info.node.key)
+    setLoadingNodes((prev) => new Set(prev).add(String(tagId)))
 
     void applyTagsToElement(checkedKeys.checked)
 
@@ -105,7 +122,24 @@ export const TagsTree = ({ elementId, elementType, tags, setFilter, isLoading, d
         ? await assignTagToElement(tagId)
         : await removeTagFromElement(tagId)
     } catch (e) {
-      void applyTagsToElement(checkedKeys.checked.filter((key) => key !== tagId))
+      console.log('----> here', (checkedKeys.checked))
+      const errorMessage = info.checked
+        ? t('failed-to-assign-tag-to-element')
+        : t('failed-to-un-assign-tag-to-element')
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      messageApi.error({
+        content: errorMessage,
+        type: 'error',
+        duration: 5
+      })
+
+      void applyTagsToElement(checkedKeys.checked.filter((key) => key !== String(tagId)))
+    } finally {
+      setLoadingNodes((prev) => {
+        const newSet = new Set(prev)
+        newSet.delete(String(tagId))
+        return newSet
+      })
     }
   }
 

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/tags/hooks/use-optimistic-update.ts

@@ -57,7 +57,6 @@ export const useOptimisticUpdate = (): UseOptimisticUpdateReturn => {
       )
     )
   }
-
   return {
     updateTagsForElementByTypeAndId
   }

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/tags/hooks/use-shortcut-actions.ts

@@ -12,13 +12,15 @@
 */
 
 import {
-  type TagBatchOperationToElementsByTypeAndIdApiArg,
-  useTagBatchOperationToElementsByTypeAndIdMutation
+  type TagBatchOperationToElementsByTypeAndIdApiArg
 } from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice.gen'
 import { useElementContext } from '@Pimcore/modules/element/hooks/use-element-context'
 import { useJobs } from '@Pimcore/modules/execution-engine/hooks/useJobs'
 import { createJob } from '@Pimcore/modules/execution-engine/jobs/tag-assign/factory'
 import { defaultTopics, topics } from '@Pimcore/modules/execution-engine/topics'
+import {
+  useTagBatchOperationToElementsByTypeAndIdMutation
+} from '@Pimcore/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice-enhanced'
 
 interface UseShortcutActionsReturn {
   removeAndApplyTagsToChildren: () => Promise<void>

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/tags/tags-api-slice-enhanced.ts

@@ -0,0 +1,63 @@
+/**
+* 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 { invalidatingTags, providingTags, type Tag, tagNames } from '@Pimcore/app/api/pimcore/tags'
+import { api as baseApi } from './tags-api-slice.gen'
+
+export const api = baseApi.enhanceEndpoints({
+  addTagTypes: [tagNames.TAGS, tagNames.ASSET_DETAIL, tagNames.DATA_OBJECT_DETAIL],
+  endpoints: {
+    tagGetCollection: {
+      providesTags: (result, error, args) => {
+        const tags: Tag[] = []
+        // all possible tags that can be applied
+        if (result?.items !== undefined && result.items !== null) {
+          result.items.forEach((assignedTag) => {
+            if (assignedTag.id !== undefined) {
+              tags.push(...providingTags.TAGS_ID(assignedTag.id))
+            }
+          })
+        }
+
+        return tags
+      }
+    },
+    tagAssignToElement: {
+      invalidatesTags: (result, error, args) => invalidatingTags.ELEMENT_TAGS_ID(args.id)
+    },
+    tagUnassignFromElement: {
+      invalidatesTags: (result, error, args) => invalidatingTags.ELEMENT_TAGS_ID(args.id)
+    },
+    tagBatchOperationToElementsByTypeAndId: {
+      // when tags from folder are applied to children assets or data objects
+      invalidatesTags: (result, error, args) => invalidatingTags.ELEMENT_TAGS(args.elementType, args.id)
+    },
+    tagGetCollectionForElementByTypeAndId: {
+      providesTags: (result, error, args) => {
+        const tags: Tag[] = []
+        // all tags that are applied to an element
+        const items = Array.isArray(result?.items) ? result.items : []
+        items.forEach((assignedTag) => {
+          if (assignedTag.id !== undefined) {
+            tags.push(...providingTags.ELEMENT_TAGS(args.elementType, assignedTag.id))
+          }
+        })
+
+        return tags
+      }
+    }
+  }
+})
+
+export type * from './tags-api-slice.gen'
+export const { useTagGetCollectionQuery, useTagAssignToElementMutation, useTagUnassignFromElementMutation, useTagGetCollectionForElementByTypeAndIdQuery, useTagBatchOperationToElementsByTypeAndIdMutation } = api