86 lines
2.7 KiB
Vue
86 lines
2.7 KiB
Vue
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
competitors: { type: Array, required: true },
|
|
submitting: { type: Boolean, default: false }
|
|
})
|
|
const emit = defineEmits(['submit'])
|
|
|
|
const TRAVEL_STYLES = ['Classic', 'Premium', 'Basic', 'NGS']
|
|
|
|
const productName = ref('')
|
|
const destination = ref('')
|
|
const duration = ref('')
|
|
const travelStyle = ref('Classic')
|
|
const tabType = ref('Standard')
|
|
const selectedIds = ref([])
|
|
|
|
function toggle(id) {
|
|
const i = selectedIds.value.indexOf(id)
|
|
if (i === -1) selectedIds.value.push(id)
|
|
else selectedIds.value.splice(i, 1)
|
|
}
|
|
|
|
function submit() {
|
|
emit('submit', {
|
|
productName: productName.value,
|
|
destination: destination.value,
|
|
duration: Number(duration.value),
|
|
travelStyle: travelStyle.value,
|
|
tabType: tabType.value,
|
|
competitorIds: selectedIds.value
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card" style="padding:20px;">
|
|
<div class="ct" style="margin-bottom:16px;">Describe the trip to research</div>
|
|
|
|
<form style="display:flex;flex-direction:column;gap:14px;" @submit.prevent="submit">
|
|
<UFormField label="Product name">
|
|
<UInput v-model="productName" placeholder="Inca Trail Classic" class="w-full" />
|
|
</UFormField>
|
|
<div style="display:grid;grid-template-columns:2fr 1fr;gap:12px;">
|
|
<UFormField label="Destination">
|
|
<UInput v-model="destination" placeholder="Peru" required class="w-full" />
|
|
</UFormField>
|
|
<UFormField label="Duration (days)">
|
|
<UInput v-model="duration" type="number" placeholder="15" required class="w-full" />
|
|
</UFormField>
|
|
</div>
|
|
<UFormField label="Travel style">
|
|
<USelect v-model="travelStyle" :items="TRAVEL_STYLES" class="w-full" />
|
|
</UFormField>
|
|
<UFormField label="Tab type">
|
|
<URadioGroup v-model="tabType" :items="['Standard', 'NGS']" orientation="horizontal" />
|
|
</UFormField>
|
|
|
|
<div>
|
|
<div style="font-size:12.5px;font-weight:700;color:var(--t3);margin-bottom:8px;">Competitors</div>
|
|
<div style="display:flex;flex-direction:column;gap:6px;">
|
|
<label
|
|
v-for="competitor in competitors"
|
|
:key="competitor.id"
|
|
style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;"
|
|
>
|
|
<UCheckbox :model-value="selectedIds.includes(competitor.id)" @update:model-value="toggle(competitor.id)" />
|
|
{{ competitor.name }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<UButton
|
|
type="submit"
|
|
color="primary"
|
|
block
|
|
:loading="submitting"
|
|
:disabled="!selectedIds.length || !destination || !duration"
|
|
>
|
|
Find & Analyse
|
|
</UButton>
|
|
</form>
|
|
</div>
|
|
</template>
|