74 lines
2.5 KiB
Vue
74 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import { useMutation } from '@vue/apollo-composable';
|
|
import { SubmitCalculationOrderDocument } from '~/composables/graphql/generated';
|
|
|
|
const productName = ref('');
|
|
const quantity = ref(1);
|
|
const width = ref(100);
|
|
const thickness = ref(50);
|
|
const color = ref('прозрачный');
|
|
|
|
const { mutate, loading, onDone, onError } = useMutation(SubmitCalculationOrderDocument);
|
|
const success = ref('');
|
|
const errorMessage = ref('');
|
|
|
|
onDone((result) => {
|
|
success.value = `Заявка ${result.data?.submitCalculationOrder.code} отправлена`;
|
|
errorMessage.value = '';
|
|
});
|
|
|
|
onError((error) => {
|
|
errorMessage.value = error.message;
|
|
success.value = '';
|
|
});
|
|
|
|
function submit() {
|
|
mutate({
|
|
input: {
|
|
productName: productName.value,
|
|
quantity: Number(quantity.value),
|
|
parameters: {
|
|
width: Number(width.value),
|
|
thickness: Number(thickness.value),
|
|
color: color.value,
|
|
},
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<section class="space-y-4 max-w-2xl">
|
|
<h1 class="text-2xl font-bold">Корзина / заявка на расчет</h1>
|
|
<div class="card bg-base-100 border border-base-300">
|
|
<div class="card-body space-y-3">
|
|
<label class="form-control">
|
|
<span class="label-text">Название позиции</span>
|
|
<input v-model="productName" type="text" class="input input-bordered" />
|
|
</label>
|
|
<label class="form-control">
|
|
<span class="label-text">Количество</span>
|
|
<input v-model="quantity" type="number" min="1" class="input input-bordered" />
|
|
</label>
|
|
<label class="form-control">
|
|
<span class="label-text">Ширина</span>
|
|
<input v-model="width" type="number" min="1" class="input input-bordered" />
|
|
</label>
|
|
<label class="form-control">
|
|
<span class="label-text">Толщина</span>
|
|
<input v-model="thickness" type="number" min="1" class="input input-bordered" />
|
|
</label>
|
|
<label class="form-control">
|
|
<span class="label-text">Цвет</span>
|
|
<input v-model="color" type="text" class="input input-bordered" />
|
|
</label>
|
|
|
|
<button class="btn btn-primary" :disabled="loading" @click="submit">Отправить менеджеру</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="success" class="alert alert-success">{{ success }}</div>
|
|
<div v-if="errorMessage" class="alert alert-error">{{ errorMessage }}</div>
|
|
</section>
|
|
</template>
|