Skip to content

Commit 5c47d24

Browse files
jackdomleo7jackdomleo7
committed
feat(api config): Allow comma-separated page types and collection keys in input
1 parent b9061ab commit 5c47d24

3 files changed

Lines changed: 177 additions & 10 deletions

File tree

‎src/components/ApiConfiguration.spec.ts‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -465,6 +465,156 @@ describe('ApiConfiguration.vue', () => {
465465
})
466466
})
467467

468+
describe('Comma-Separated Values', () => {
469+
describe('Page Types', () => {
470+
it('adds multiple page types when separated by commas', async () => {
471+
const wrapper = mount(ApiConfiguration)
472+
getVm(wrapper).store.pageTypes = []
473+
getVm(wrapper).pageTypeInput = 'landing_page,product_page,about_page'
474+
await wrapper.vm.$nextTick()
475+
const form = wrapper.findAll('form')[0]!
476+
await form.trigger('submit')
477+
expect(getVm(wrapper).store.pageTypes).toContain('landing_page')
478+
expect(getVm(wrapper).store.pageTypes).toContain('product_page')
479+
expect(getVm(wrapper).store.pageTypes).toContain('about_page')
480+
expect(getVm(wrapper).store.pageTypes.length).toBe(3)
481+
})
482+
483+
it('trims whitespace from each comma-separated page type', async () => {
484+
const wrapper = mount(ApiConfiguration)
485+
getVm(wrapper).store.pageTypes = []
486+
getVm(wrapper).pageTypeInput = ' landing_page , product_page , about_page '
487+
await wrapper.vm.$nextTick()
488+
const form = wrapper.findAll('form')[0]!
489+
await form.trigger('submit')
490+
expect(getVm(wrapper).store.pageTypes).toEqual([
491+
'landing_page',
492+
'product_page',
493+
'about_page',
494+
])
495+
})
496+
497+
it('filters out empty values in comma-separated page types', async () => {
498+
const wrapper = mount(ApiConfiguration)
499+
getVm(wrapper).store.pageTypes = []
500+
getVm(wrapper).pageTypeInput = 'landing_page,,product_page, ,about_page'
501+
await wrapper.vm.$nextTick()
502+
const form = wrapper.findAll('form')[0]!
503+
await form.trigger('submit')
504+
expect(getVm(wrapper).store.pageTypes).toEqual([
505+
'landing_page',
506+
'product_page',
507+
'about_page',
508+
])
509+
expect(getVm(wrapper).store.pageTypes.length).toBe(3)
510+
})
511+
512+
it('does not add duplicate page types in comma-separated input', async () => {
513+
const wrapper = mount(ApiConfiguration)
514+
getVm(wrapper).store.pageTypes = ['landing_page']
515+
getVm(wrapper).pageTypeInput = 'landing_page,product_page,landing_page'
516+
await wrapper.vm.$nextTick()
517+
const form = wrapper.findAll('form')[0]!
518+
await form.trigger('submit')
519+
expect(getVm(wrapper).store.pageTypes).toEqual(['landing_page', 'product_page'])
520+
expect(getVm(wrapper).store.pageTypes.length).toBe(2)
521+
})
522+
523+
it('handles mixed duplicates and new values in comma-separated input', async () => {
524+
const wrapper = mount(ApiConfiguration)
525+
getVm(wrapper).store.pageTypes = ['landing_page', 'contact_page']
526+
getVm(wrapper).pageTypeInput = 'landing_page,product_page,about_page,contact_page'
527+
await wrapper.vm.$nextTick()
528+
const form = wrapper.findAll('form')[0]!
529+
await form.trigger('submit')
530+
expect(getVm(wrapper).store.pageTypes).toContain('landing_page')
531+
expect(getVm(wrapper).store.pageTypes).toContain('contact_page')
532+
expect(getVm(wrapper).store.pageTypes).toContain('product_page')
533+
expect(getVm(wrapper).store.pageTypes).toContain('about_page')
534+
expect(getVm(wrapper).store.pageTypes.length).toBe(4)
535+
})
536+
537+
it('clears input after adding comma-separated page types', async () => {
538+
const wrapper = mount(ApiConfiguration)
539+
getVm(wrapper).pageTypeInput = 'landing_page,product_page,about_page'
540+
await wrapper.vm.$nextTick()
541+
const form = wrapper.findAll('form')[0]!
542+
await form.trigger('submit')
543+
expect(getVm(wrapper).pageTypeInput).toBe('')
544+
})
545+
})
546+
547+
describe('Collection Keys', () => {
548+
it('adds multiple collection keys when separated by commas', async () => {
549+
const wrapper = mount(ApiConfiguration)
550+
getVm(wrapper).store.collectionKeys = []
551+
getVm(wrapper).collectionKeyInput = 'recipes,articles,products'
552+
await wrapper.vm.$nextTick()
553+
const forms = wrapper.findAll('form')
554+
await forms[1]!.trigger('submit')
555+
expect(getVm(wrapper).store.collectionKeys).toContain('recipes')
556+
expect(getVm(wrapper).store.collectionKeys).toContain('articles')
557+
expect(getVm(wrapper).store.collectionKeys).toContain('products')
558+
expect(getVm(wrapper).store.collectionKeys.length).toBe(3)
559+
})
560+
561+
it('trims whitespace from each comma-separated collection key', async () => {
562+
const wrapper = mount(ApiConfiguration)
563+
getVm(wrapper).store.collectionKeys = []
564+
getVm(wrapper).collectionKeyInput = ' recipes , articles , products '
565+
await wrapper.vm.$nextTick()
566+
const forms = wrapper.findAll('form')
567+
await forms[1]!.trigger('submit')
568+
expect(getVm(wrapper).store.collectionKeys).toEqual(['recipes', 'articles', 'products'])
569+
})
570+
571+
it('filters out empty values in comma-separated collection keys', async () => {
572+
const wrapper = mount(ApiConfiguration)
573+
getVm(wrapper).store.collectionKeys = []
574+
getVm(wrapper).collectionKeyInput = 'recipes,,articles, ,products'
575+
await wrapper.vm.$nextTick()
576+
const forms = wrapper.findAll('form')
577+
await forms[1]!.trigger('submit')
578+
expect(getVm(wrapper).store.collectionKeys).toEqual(['recipes', 'articles', 'products'])
579+
expect(getVm(wrapper).store.collectionKeys.length).toBe(3)
580+
})
581+
582+
it('does not add duplicate collection keys in comma-separated input', async () => {
583+
const wrapper = mount(ApiConfiguration)
584+
getVm(wrapper).store.collectionKeys = ['recipes']
585+
getVm(wrapper).collectionKeyInput = 'recipes,articles,recipes'
586+
await wrapper.vm.$nextTick()
587+
const forms = wrapper.findAll('form')
588+
await forms[1]!.trigger('submit')
589+
expect(getVm(wrapper).store.collectionKeys).toEqual(['recipes', 'articles'])
590+
expect(getVm(wrapper).store.collectionKeys.length).toBe(2)
591+
})
592+
593+
it('handles mixed duplicates and new values in comma-separated input', async () => {
594+
const wrapper = mount(ApiConfiguration)
595+
getVm(wrapper).store.collectionKeys = ['recipes', 'news']
596+
getVm(wrapper).collectionKeyInput = 'recipes,articles,products,news'
597+
await wrapper.vm.$nextTick()
598+
const forms = wrapper.findAll('form')
599+
await forms[1]!.trigger('submit')
600+
expect(getVm(wrapper).store.collectionKeys).toContain('recipes')
601+
expect(getVm(wrapper).store.collectionKeys).toContain('news')
602+
expect(getVm(wrapper).store.collectionKeys).toContain('articles')
603+
expect(getVm(wrapper).store.collectionKeys).toContain('products')
604+
expect(getVm(wrapper).store.collectionKeys.length).toBe(4)
605+
})
606+
607+
it('clears input after adding comma-separated collection keys', async () => {
608+
const wrapper = mount(ApiConfiguration)
609+
getVm(wrapper).collectionKeyInput = 'recipes,articles,products'
610+
await wrapper.vm.$nextTick()
611+
const forms = wrapper.findAll('form')
612+
await forms[1]!.trigger('submit')
613+
expect(getVm(wrapper).collectionKeyInput).toBe('')
614+
})
615+
})
616+
})
617+
468618
describe('Store Integration', () => {
469619
it('reads token from store', async () => {
470620
const wrapper = mount(ApiConfiguration)

‎src/components/ApiConfiguration.vue‎

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,9 @@
6363
type="text"
6464
v-model="pageTypeInput"
6565
root-class="api-config__input"
66-
placeholder="e.g. landing_page"
66+
placeholder="e.g. landing_page, about_page, contact_page"
6767
>
68-
<template v-slot:label>Add Page Type</template>
68+
<template v-slot:label>Add Page Type (comma-separated for multiple)</template>
6969
</TextInput>
7070
<Btn v-if="pageTypeInput" type="submit" status="secondary" class="api-config__button"
7171
>Add</Btn
@@ -90,9 +90,9 @@
9090
type="text"
9191
v-model="collectionKeyInput"
9292
root-class="api-config__input"
93-
placeholder="e.g. recipes"
93+
placeholder="e.g. recipes, destinations, products"
9494
>
95-
<template v-slot:label>Add Collection Key</template>
95+
<template v-slot:label>Add Collection Key (comma-separated for multiple)</template>
9696
</TextInput>
9797
<Btn v-if="collectionKeyInput" type="submit" status="secondary" class="api-config__button"
9898
>Add</Btn
@@ -137,9 +137,13 @@ function toggleTokenLock(): void {
137137
}
138138
139139
function addPageType(): void {
140-
const trimmed = pageTypeInput.value.trim()
141-
if (trimmed && !store.pageTypes.includes(trimmed)) {
142-
store.pageTypes = [...store.pageTypes, trimmed]
140+
const values = pageTypeInput.value
141+
.split(',')
142+
.map((v) => v.trim())
143+
.filter((v) => v && !store.pageTypes.includes(v))
144+
145+
if (values.length > 0) {
146+
store.pageTypes = [...store.pageTypes, ...values]
143147
pageTypeInput.value = ''
144148
}
145149
}
@@ -149,9 +153,13 @@ function removePageType(pageType: string): void {
149153
}
150154
151155
function addCollectionKey(): void {
152-
const trimmed = collectionKeyInput.value.trim()
153-
if (trimmed && !store.collectionKeys.includes(trimmed)) {
154-
store.collectionKeys = [...store.collectionKeys, trimmed]
156+
const values = collectionKeyInput.value
157+
.split(',')
158+
.map((v) => v.trim())
159+
.filter((v) => v && !store.collectionKeys.includes(v))
160+
161+
if (values.length > 0) {
162+
store.collectionKeys = [...store.collectionKeys, ...values]
155163
collectionKeyInput.value = ''
156164
}
157165
}

‎src/components/WhatsNew.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ interface Feature {
4040
const showModal = ref<boolean>(false)
4141
4242
const features: Feature[] = [
43+
{
44+
id: 'api-config-multi-input',
45+
type: 'improvement',
46+
title:
47+
'Ability to add multiple page types or collection keys at once to the API Configuration by comma-separating them',
48+
description:
49+
'You can now add multiple page types or collection keys at once in the API Configuration section by separating them with commas. This makes it easier to manage your content structure without having to add each item individually. You can even paste a comma separated string!',
50+
utcDatetimeAdded: new Date('2026-02-14T14:30:00Z'),
51+
},
4352
{
4453
id: 'complete-ui-redesign',
4554
type: 'improvement',

0 commit comments

Comments
 (0)