Files
webapp/app/components/TeamCreateForm.vue
Ruslan Bakiev 2dbe600d8a
All checks were successful
Build Docker Image / build (push) Successful in 4m3s
refactor: remove all any types, add strict GraphQL scalar typing
- Add strictScalars: true to codegen.ts with proper scalar mappings
  (Date, Decimal, JSONString, JSON, UUID, BigInt → string/Record)
- Replace all ref<any[]> with proper GraphQL-derived types
- Add type guards for null filtering in arrays
- Fix bugs exposed by typing (locationLatitude vs latitude, etc.)
- Add interfaces for external components (MapboxSearchBox)

This enables end-to-end type safety from GraphQL schema to frontend.
2026-01-27 11:34:12 +07:00

106 lines
3.1 KiB
Vue

<template>
<div class="card bg-base-100 border border-base-300 shadow p-6">
<h3 class="font-semibold text-base-content mb-6">{{ $t('teams.create_team') }}</h3>
<form @submit.prevent="handleSubmit" class="space-y-6">
<div>
<label class="block text-sm font-medium text-base-content mb-2">
{{ $t('teams.team_name') }}
</label>
<input
v-model="teamName"
type="text"
required
:placeholder="$t('teams.team_name_placeholder')"
class="input input-bordered w-full"
:class="{ 'input-error': hasError }"
/>
<p v-if="hasError" class="mt-1 text-sm text-error">
{{ error }}
</p>
</div>
<div>
<label class="block text-sm font-medium text-base-content mb-2">
{{ $t('teams.company_type.label') }}
</label>
<div class="flex flex-wrap gap-4">
<label class="flex items-center gap-2 cursor-pointer">
<input
v-model="teamType"
type="radio"
value="BUYER"
class="radio radio-primary"
/>
<span class="text-base-content">{{ $t('teams.company_type.buyer') }}</span>
</label>
<label class="flex items-center gap-2 cursor-pointer">
<input
v-model="teamType"
type="radio"
value="SELLER"
class="radio radio-primary"
/>
<span class="text-base-content">{{ $t('teams.company_type.seller') }}</span>
</label>
</div>
</div>
<div class="flex justify-end space-x-3">
<button
type="button"
@click="$emit('cancel')"
class="btn btn-ghost"
>
{{ $t('common.cancel') }}
</button>
<button
type="submit"
:disabled="isLoading || !teamName.trim()"
class="btn btn-primary"
>
<span v-if="isLoading" class="loading loading-spinner loading-xs mr-2"></span>
<span>{{ isLoading ? $t('teams.creating') : $t('teams.create_team') }}</span>
</button>
</div>
</form>
</div>
</template>
<script setup lang="ts">
import { CreateTeamDocument } from '~/composables/graphql/user/teams-generated'
const { t } = useI18n()
const emit = defineEmits(['teamCreated', 'cancel'])
const teamName = ref('')
const teamType = ref('BUYER')
const isLoading = ref(false)
const hasError = ref(false)
const error = ref('')
const { mutate } = useGraphQL()
const handleSubmit = async () => {
try {
isLoading.value = true
hasError.value = false
const result = await mutate(CreateTeamDocument, {
input: {
name: teamName.value.trim(),
teamType: teamType.value
}
}, 'user', 'teams')
emit('teamCreated', result.createTeam?.team)
teamName.value = ''
teamType.value = 'BUYER'
} catch (err: unknown) {
hasError.value = true
error.value = err instanceof Error ? err.message : t('teams.errors.create_failed')
console.error('Error creating team:', err)
} finally {
isLoading.value = false
}
}
</script>