zammad/app/frontend/apps/desktop/components/Form/fields/FieldCustomer/FieldCustomerWrapper.vue

<!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
<script setup lang="ts">
import { markRaw } from 'vue'

import type { SelectValue } from '#shared/components/CommonSelect/types.ts'
import type { AutoCompleteOption } from '#shared/components/Form/fields/FieldAutocomplete/types.ts'
import { AutocompleteSearchGenericDocument } from '#shared/components/Form/fields/FieldCustomer/graphql/queries/autocompleteSearch/generic.api.ts'
import type { AutoCompleteCustomerOption } from '#shared/components/Form/fields/FieldCustomer/types.ts'
import type { FormFieldContext } from '#shared/components/Form/types/field.ts'
import type { User } from '#shared/graphql/types.ts'
import type { ObjectLike } from '#shared/types/utils.ts'

import FieldAutoCompleteInput from '../FieldAutoComplete/FieldAutoCompleteInput.vue'
import { useAddUnknownValueAction } from '../FieldAutoComplete/useAddUnknownValueAction.ts'

import FieldCustomerOptionIcon from './FieldCustomerOptionIcon.vue'

import type { AutoCompleteProps } from '../FieldAutoComplete/types.ts'

interface Props {
  context: FormFieldContext<
    AutoCompleteProps & {
      options?: AutoCompleteCustomerOption[]
    }
  >
}

const props = defineProps<Props>()

const buildEntityOption = (entity: User) => {
  return {
    value: entity.internalId,
    label: entity.fullname || entity.phone || entity.login,
    heading: entity.organization?.name,
    user: entity,
  }
}

const { actions, onSearchInteractionUpdate } = useAddUnknownValueAction()

Object.assign(props.context, {
  optionIconComponent: markRaw(FieldCustomerOptionIcon),
  initialOptionBuilder: (
    initialEntityObject: ObjectLike,
    value: SelectValue,
    context: Props['context'],
  ) => {
    if (!context.belongsToObjectField || !initialEntityObject) return null

    const belongsToObject = initialEntityObject[context.belongsToObjectField]

    if (!belongsToObject) return null

    return buildEntityOption(belongsToObject)
  },
  gqlQuery: AutocompleteSearchGenericDocument,
  additionalQueryParams: {
    onlyIn: ['User', 'Organization'],
  },
  autocompleteOptionsPreprocessor: (
    autocompleteOptions: (AutoCompleteCustomerOption & AutoCompleteOption)[],
  ) =>
    autocompleteOptions.map((autocompleteOption) => {
      if (
        !autocompleteOption.object ||
        autocompleteOption.object.__typename !== 'Organization'
      )
        return autocompleteOption

      autocompleteOption.disabled = true

      const heading = autocompleteOption.object.name

      autocompleteOption.children =
        autocompleteOption.object.members?.edges.map(
          (member) =>
            ({
              value: member.node.internalId,
              label:
                member.node.fullname ?? member.node.phone ?? member.node.login,
              heading,
              object: {
                ...member.node,
                __typename: 'User',
              },
            }) as AutoCompleteOption,
        ) || []

      return autocompleteOption
    }),
  actions,
  emptyInitialLabelText: __(
    'Start typing to search or enter an email address…',
  ),
})
</script>

<template>
  <FieldAutoCompleteInput
    :context="context"
    v-bind="$attrs"
    @search-interaction-update="onSearchInteractionUpdate"
  />
</template>