105 lines
3.1 KiB
Vue
105 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 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: any) {
|
|
hasError.value = true
|
|
error.value = err?.message || $t('teams.errors.create_failed')
|
|
console.error('Error creating team:', err)
|
|
} finally {
|
|
isLoading.value = false
|
|
}
|
|
}
|
|
</script>
|