TagsDraft

<script setup lang="ts">
type TagsExampleData = { billing: string[]; general: string[] }

// Values set here to simulate the billing categories
const BILLING_TAGS = ['C', 'T', 'F']

const tags = ref<TagsExampleData>({
  billing: [],
  general: [],
})

const fetchAlphabet = async (query: string) => {
  await new Promise((resolve) =>
    setTimeout(resolve, Math.floor(Math.random() * 2000) + 1000),
  )

  const alphabet = Array.from({ length: 26 }, (_, i) =>
    String.fromCharCode(65 + i),
  )

  if (query) {
    return alphabet
      .filter((type) => type.toLowerCase().includes(query.toLowerCase()))
      .map((letter) => ({
        label: letter,
        value: letter,
      }))
  }

  return alphabet.map((letter) => ({
    label: letter,
    value: letter,
  }))
}

const asyncTagsInfiniteOptions = async (query: string) => {
  return await fetchAlphabet(query)
}

/**
 * This is a custom function to separate tags for current demo purpose
 * A real-world implementation should rely on tag's schema to choose
 * between billing and general tags.
 *
 * @param options - the chosen tags
 */
function update(options: string[]) {
  const billing: TagsExampleData['billing'] = []
  const general: TagsExampleData['general'] = []

  options.forEach((opt) => {
    if (BILLING_TAGS.includes(opt)) {
      billing.push(opt)
    } else {
      general.push(opt)
    }
  })

  return { billing, general }
}
</script>

<template>
  <ClientSectionTags
    :form-options="asyncTagsInfiniteOptions"
    :billing-tags="tags.billing"
    :general-tags="tags.general"
    @client-tags:change="tags = update($event)"
  />
</template>

<script setup lang="ts">
type TagsExampleData = { billing: string[]; general: string[] }

// Values set here to simulate the billing categories
const BILLING_TAGS = ['C', 'W', 'K', 'S']

const tags = ref<TagsExampleData>({
  billing: ['C'],
  general: ['O'],
})

const fetchAlphabet = async (query: string) => {
  await new Promise((resolve) =>
    setTimeout(resolve, Math.floor(Math.random() * 2000) + 1000),
  )

  const alphabet = Array.from({ length: 26 }, (_, i) =>
    String.fromCharCode(65 + i),
  )

  if (query) {
    return alphabet
      .filter((type) => type.toLowerCase().includes(query.toLowerCase()))
      .map((letter) => ({
        label: letter,
        value: letter,
      }))
  }

  return alphabet.map((letter) => ({
    label: letter,
    value: letter,
  }))
}

const asyncTagsInfiniteOptions = async (query: string) => {
  return await fetchAlphabet(query)
}

/**
 * This is a custom function to separate tags for current demo purpose
 * A real-world implementation should rely on tag's schema to choose
 * between billing and general tags.
 *
 * @param options - the chosen tags
 */
function update(options: string[]) {
  const billing: TagsExampleData['billing'] = []
  const general: TagsExampleData['general'] = []

  options.forEach((opt) => {
    if (BILLING_TAGS.includes(opt)) {
      billing.push(opt)
    } else {
      general.push(opt)
    }
  })

  return { billing, general }
}
</script>

<template>
  <ClientSectionTags
    :form-options="asyncTagsInfiniteOptions"
    :billing-tags="tags.billing"
    :general-tags="tags.general"
    @client-tags:change="tags = update($event)"
  />
</template>