FieldAgentWrapper.vue 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162
  1. <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
  2. <script setup lang="ts">
  3. import { markRaw } from 'vue'
  4. import type { SelectValue } from '#shared/components/CommonSelect/types.ts'
  5. import { AutocompleteSearchAgentDocument } from '#shared/components/Form/fields/FieldAgent/graphql/queries/autocompleteSearch/agent.api.ts'
  6. import type { AutoCompleteAgentOption } from '#shared/components/Form/fields/FieldAgent/types'
  7. import type { FormFieldContext } from '#shared/components/Form/types/field.ts'
  8. import type { User } from '#shared/graphql/types.ts'
  9. import type { ObjectLike } from '#shared/types/utils.ts'
  10. import FieldAutoCompleteInput from '../FieldAutoComplete/FieldAutoCompleteInput.vue'
  11. import FieldAgentOptionIcon from './FieldAgentOptionIcon.vue'
  12. import type { AutoCompleteProps } from '../FieldAutoComplete/types.ts'
  13. interface Props {
  14. context: FormFieldContext<
  15. AutoCompleteProps & {
  16. options?: AutoCompleteAgentOption[]
  17. exceptUserInternalId?: number
  18. }
  19. >
  20. }
  21. const props = defineProps<Props>()
  22. const buildEntityOption = (entity: User) => {
  23. return {
  24. value: entity.internalId,
  25. label: entity.fullname || entity.phone || entity.login,
  26. heading: entity.organization?.name,
  27. user: entity,
  28. }
  29. }
  30. Object.assign(props.context, {
  31. optionIconComponent: markRaw(FieldAgentOptionIcon),
  32. initialOptionBuilder: (
  33. initialEntityObject: ObjectLike,
  34. value: SelectValue,
  35. context: Props['context'],
  36. ) => {
  37. if (!context.belongsToObjectField || !initialEntityObject) return null
  38. const belongsToObject = initialEntityObject[context.belongsToObjectField]
  39. if (!belongsToObject) return null
  40. return buildEntityOption(belongsToObject)
  41. },
  42. gqlQuery: AutocompleteSearchAgentDocument,
  43. additionalQueryParams: {
  44. exceptInternalId: props.context.exceptUserInternalId,
  45. },
  46. })
  47. </script>
  48. <template>
  49. <FieldAutoCompleteInput :context="context" v-bind="$attrs" />
  50. </template>