1461 document types

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

@@ -32,6 +32,7 @@ export const tagNames = {
   DOCUMENT: 'DOCUMENT',
   DOCUMENT_DETAIL: 'DOCUMENT_DETAIL',
   DOCUMENT_TREE: 'DOCUMENT_TREE',
+  DOCUMENT_TYPES: 'DOCUMENT_TYPES',
   WORKFLOW: 'WORKFLOW',
   VERSIONS: 'VERSION',
   PROPERTIES: 'PROPERTIES',
@@ -74,6 +75,7 @@ export const providingTags = {
   DATA_OBJECT_GRID_ID: (id: number) => [tagNames.DATA_OBJECT, { type: tagNames.DATA_OBJECT_GRID, id }],
   DOCUMENT_DETAIL: () => [tagNames.DOCUMENT, tagNames.DOCUMENT_DETAIL],
   DOCUMENT_DETAIL_ID: (id: number) => [tagNames.DOCUMENT, { type: tagNames.DOCUMENT_DETAIL, id }],
+  DOCUMENT_TYPES: () => [tagNames.DOCUMENT_TYPES],
   DOCUMENT_TREE: () => [tagNames.DOCUMENT, tagNames.DOCUMENT_TREE],
   DOCUMENT_TREE_ID: (id: number) => [tagNames.DOCUMENT, { type: tagNames.DOCUMENT_TREE, id }],
   ELEMENT_DEPENDENCIES: (elementType: ElementType, id: number) => [getElementDetailTag(elementType, id), getElementSpecificTag(tagNames.DEPENDENCIES, elementType, id)],
@@ -116,6 +118,7 @@ export const invalidatingTags = {
   DOCUMENT: () => [tagNames.DOCUMENT],
   DOCUMENT_DETAIL: () => [tagNames.DOCUMENT_DETAIL],
   DOCUMENT_DETAIL_ID: (id: number) => [{ type: tagNames.DOCUMENT_DETAIL, id }, elementUnspecificDataTag],
+  DOCUMENT_TYPES: () => [tagNames.DOCUMENT_TYPES],
   DOCUMENT_TREE: () => [tagNames.DOCUMENT_TREE],
   DOCUMENT_TREE_ID: (id: number) => [{ type: tagNames.DOCUMENT_TREE, id }],
   ELEMENT_DEPENDENCIES: (elementType: ElementType, id: number) => [getElementSpecificTag(tagNames.DEPENDENCIES, elementType, id)],

assets/js/src/core/bootstrap.ts

@@ -27,6 +27,7 @@ import '@Pimcore/modules/user'
 import '@Pimcore/modules/tags'
 import '@Pimcore/modules/predefined-properties'
 import '@Pimcore/modules/notes-and-events'
+import '@Pimcore/modules/document-types'
 import '@Pimcore/modules/open-element'
 import '@Pimcore/modules/wysiwyg'
 import 'flexlayout-react/style/light.css'

assets/js/src/core/modules/auth/enums/user-permission.ts

@@ -11,6 +11,7 @@
 export enum UserPermission {
   NotesAndEvents = 'notes_events',
   Documents = 'documents',
+  DocumentTypes = 'document_types',
   Objects = 'objects',
   Assets = 'assets',
   TagsConfiguration = 'tags_configuration',

assets/js/src/core/modules/document-types/document-types-container.tsx

@@ -0,0 +1,130 @@
+/**
+ * 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, useState } from 'react'
+import { t } from 'i18next'
+import trackError, { ApiError } from '../app/error-handler'
+import { useAppDispatch } from '@sdk/app'
+import { useDocumentDocTypeListQuery } from '../document/document-api-slice-enhanced'
+import { DocumentTypeRow, useDocumentType } from './hooks/use-document-type'
+import { useDocumentConfig } from './hooks/use-document-config'
+import { ContentLayout } from '@Pimcore/components/content-layout/content-layout'
+import { Toolbar } from '@Pimcore/components/toolbar/toolbar'
+import { Flex } from '@Pimcore/components/flex/flex'
+import { Title } from '@Pimcore/components/title/title'
+import { Content } from '@Pimcore/components/content/content'
+import { Box, IconButton, IconTextButton } from '@sdk/components'
+import { invalidatingTags } from '@Pimcore/app/api/pimcore/tags'
+import { uuid } from '@sdk/utils'
+import { isUndefined } from 'lodash'
+import { Table } from './table/table'
+import { api } from '@sdk/api/documents'
+
+
+export const DocumentTypesContainer = (): React.JSX.Element => {
+  const dispatch = useAppDispatch()
+  const { createNewDocumentType, createLoading } = useDocumentType()
+  const config = useDocumentConfig()
+
+  const { data, isLoading: documentTypesLoading, isFetching: documentTypesFetching, isError, error } = useDocumentDocTypeListQuery({})
+
+  const [documentTypeRows, setDocumentTypeRows] = useState<DocumentTypeRow[]>([])
+
+  const documentTypes = data?.items ?? [];
+
+const sortedRows = [...documentTypeRows].sort((a, b) => {
+  const dateA = a.creationDate ?? 0
+  const dateB = b.creationDate ?? 0
+  return dateB - dateA
+})  
+  useEffect(() => {
+    if (!isUndefined(documentTypes)) {
+      setDocumentTypeRows(
+        documentTypes.map(item => ({ ...item, rowId: uuid() }))
+      )
+    }
+  }, [documentTypes])
+
+  const onCreateDocumentType = async (): Promise<void> => {
+    const { success, data } = await createNewDocumentType()
+    if (success && data !== undefined) {
+      setDocumentTypeRows(prev =>
+        [
+          { ...data, rowId: uuid() },
+          ...prev
+        ]
+      )
+    }
+  }
+
+  useEffect(() => {
+    if (isError) {
+      trackError(new ApiError(error))
+    }
+  }, [isError])
+
+  return (
+    <ContentLayout
+      renderToolbar={
+        <Toolbar theme="secondary">
+          <IconButton
+            disabled={ documentTypesFetching }
+            icon={ { value: 'refresh' } }
+            onClick={ () => 
+              dispatch(
+              api.util.invalidateTags(
+                invalidatingTags.DOCUMENT_TYPES()
+              )
+            )
+            }></IconButton>
+        </Toolbar>}
+      renderTopBar={
+        <Toolbar
+          justify='space-between'
+          margin={ {
+            x: 'mini',
+            y: 'none'
+          } }
+          theme='secondary'
+        >
+          <Flex gap={ 'small' }>
+            <Title>{t('widget.document-types')}</Title>
+            <IconTextButton
+              disabled={ documentTypesLoading ?? createLoading }
+              icon={ { value: 'new' } }
+              loading={ createLoading }
+              onClick={ onCreateDocumentType }
+            >{t('document-types.new')}</IconTextButton>
+          </Flex>
+        </Toolbar>
+        }>
+          <Content
+        loading={ documentTypesLoading || documentTypesFetching }
+        margin={ {
+          x: 'extra-small',
+          y: 'none'
+        } }
+        none={ isUndefined(documentTypes) ?? documentTypes.length === 0 }
+      >
+        <Box
+          margin={ {
+            x: 'extra-small',
+            y: 'none'
+          } }
+        >
+          <Table
+            documentTypeRows={ sortedRows }
+            setDocumentTypeRows={ setDocumentTypeRows }
+            config={config}
+          />        </Box>
+      </Content>
+    </ContentLayout>
+  )
+}

assets/js/src/core/modules/document-types/hooks/use-document-config.tsx

@@ -0,0 +1,54 @@
+/**
+ * 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 { DocType, DocTypeType, DocumentController, DocumentTemplate,} from '@Pimcore/modules/document/document-api-slice.gen'
+import { useDocumentAvailableControllersListQuery,useDocumentDocTypeTypeListQuery, useDocumentAvailableTemplatesListQuery} from '@Pimcore/modules/document/document-api-slice-enhanced'
+import trackError, { ApiError } from '../../app/error-handler'
+import { isUndefined } from 'lodash'
+import { useEffect } from 'react'
+
+
+export type DocumentTypeRow = DocType & { rowId: string }
+
+interface UseDocumentConfigReturn {
+controllers: DocumentController[]
+templates: DocumentTemplate[]
+docTypes: DocTypeType[]
+}
+
+export const useDocumentConfig = (): UseDocumentConfigReturn => {
+  const {data: controllers, isError: isControllerError, error: controllerError } = useDocumentAvailableControllersListQuery()
+  const {data: templates, isError: isTemplatesError, error: templatesError } = useDocumentAvailableTemplatesListQuery()
+  const {data: docTypes, isError: isDocTypesError, error: docTypeError} = useDocumentDocTypeTypeListQuery()
+
+  useEffect(() => {
+    if (isControllerError) {
+      trackError(new ApiError(controllerError))
+    }
+  }, [isControllerError])
+
+  useEffect(() => {
+    if (isTemplatesError) {
+      trackError(new ApiError(templatesError))
+    }
+  }, [isTemplatesError])
+
+  useEffect(() => {
+    if (isDocTypesError) {
+      trackError(new ApiError(docTypeError))
+    }
+  }, [isDocTypesError])
+
+  return {
+    controllers: !isUndefined(controllers) ? controllers?.items : [],
+    templates: !isUndefined(templates) ? templates?.items : [],
+    docTypes:!isUndefined(docTypes) ? docTypes?.items : [],
+  }
+}

assets/js/src/core/modules/document-types/hooks/use-document-type.tsx

@@ -0,0 +1,101 @@
+/**
+ * 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 trackError, { GeneralError, ApiError } from '@Pimcore/modules/app/error-handler'
+import { DocType, DocTypeUpdate, DocumentDocTypeAddApiArg, useDocumentDocTypeAddMutation, useDocumentDocTypeDeleteMutation, useDocumentDocTypeUpdateByIdMutation } from '@Pimcore/modules/document/document-api-slice.gen'
+import { isUndefined } from 'lodash'
+
+
+export type DocumentTypeRow = DocType & { rowId: string }
+
+interface UseDocumentTypeReturn {
+  createNewDocumentType: () => Promise<{ success: boolean, data?: DocType }>
+  createLoading: boolean
+  deleteDocumentTypeById: (id: string) => Promise<{ success: boolean }>
+  deleteLoading: boolean
+  updateDocumentTypeById: (id: string, row: DocumentTypeRow) => Promise<{ success: boolean }>
+  updateLoading: boolean
+}
+
+export const useDocumentType = (): UseDocumentTypeReturn => {
+  const [createDocumentType, { isLoading: createLoading }] = useDocumentDocTypeAddMutation()
+  const [deleteDocumentType, { isLoading: deleteLoading }] = useDocumentDocTypeDeleteMutation()
+  const [updateDocumentType, { isLoading: updateLoading }] = useDocumentDocTypeUpdateByIdMutation()
+
+  const dummyDocumentType: DocumentDocTypeAddApiArg = {
+  docTypeAddParameters: {
+    name: "New Document Type",
+    type: "page"}
+}
+  const createNewDocumentType = async (): Promise<{ success: boolean, data?: DocType }> => {
+    try {
+      const result = await createDocumentType(dummyDocumentType)
+
+      if (!isUndefined(result.error)) {
+        trackError(new ApiError(result.error))
+      }
+
+      if ('data' in result) {
+        return { success: true, data: result.data }
+      }
+    } catch {
+      trackError(new GeneralError('Was not able to create DocumentType'))
+    }
+    return { success: false }
+  }
+
+  const deleteDocumentTypeById = async (id: string): Promise<{ success: boolean }> => {
+    try {
+      const result = await deleteDocumentType({ id })
+
+      if (!isUndefined(result.error)) {
+        trackError(new ApiError(result.error))
+      }
+
+      return { success: 'data' in result }
+    } catch {
+      trackError(new GeneralError('Was not able to delete DocumentType'))
+      return { success: false }
+    }
+  }
+
+  const toApiDocumentType = (row: DocumentTypeRow): DocTypeUpdate => ({
+    name: row.name ?? '',
+    type: row.type ?? '',
+    group: row.group ?? '',
+    controller: row.controller ?? '',
+    template: row.template ?? '',
+    priority: row.priority ?? 0 ,
+    staticGeneratorEnabled: row.staticGeneratorEnabled ?? false
+  })
+
+  const updateDocumentTypeById = async (id: string, row: DocumentTypeRow): Promise<{ success: boolean }> => {
+    try {
+      const result = await updateDocumentType({ id, docTypeUpdateParameters: toApiDocumentType(row) })
+
+        if (!isUndefined(result.error)) {
+        trackError(new ApiError(result.error))
+      }
+      return { success: 'data' in result }
+    } catch {
+      trackError(new GeneralError('Was not able to update DocumentType'))
+      return { success: false }
+    }
+  }
+
+  return {
+    createNewDocumentType,
+    createLoading,
+    deleteDocumentTypeById,
+    deleteLoading,
+    updateDocumentTypeById,
+    updateLoading
+  }
+}

assets/js/src/core/modules/document-types/index.ts

@@ -0,0 +1,51 @@
+/**
+ * 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 WidgetRegistry } from '@Pimcore/modules/widget-manager/services/widget-registry'
+import { container } from '@Pimcore/app/depency-injection'
+import { serviceIds } from '@Pimcore/app/config/services/service-ids'
+import { moduleSystem } from '@Pimcore/app/module-system/module-system'
+import { type MainNavRegistry } from '../app/base-layout/main-nav/services/main-nav-registry'
+import { NavPermission } from '../perspectives/enums/nav-permission'
+import { UserPermission } from '../auth/enums/user-permission'
+import { DocumentTypesContainer } from './document-types-container'
+
+moduleSystem.registerModule({
+  onInit: () => {
+    const mainNavRegistryService = container.get<MainNavRegistry>(serviceIds.mainNavRegistry)
+
+    mainNavRegistryService.registerMainNavItem({
+      path: 'Settings/Document Types',
+      label: 'navigation.document-types',
+      className: 'item-style-modifier',
+      permission: UserPermission.DocumentTypes,
+      perspectivePermission: NavPermission.DocumentTypes,
+      widgetConfig: {
+        name: 'Document Types',
+        id: 'document-types',
+        component: 'document-types',
+        config: {
+          translationKey: 'widget.document-types',
+          icon: {
+            type: 'name',
+            value: 'document-types'
+          }
+        }
+      }
+    })
+
+    const widgetRegistryService = container.get<WidgetRegistry>(serviceIds.widgetManager)
+
+    widgetRegistryService.registerWidget({
+      name: 'document-types',
+      component: DocumentTypesContainer
+    })
+  }
+})