src/components/admin/OrderForm.vue - master - itp_practice/itp_frontend

src/components/admin/OrderForm.vue
190 строк6 KB
vivanenko
fix subsriptions
29 май 2025, 14:09
29 май 2025, 14:097130aba
<template>
  <form @submit.prevent="handleSubmit" class="space-y-6 max-w-4xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <!-- User ID -->
      <div>
        <label class="block text-sm font-medium text-gray-700">User</label>
        <div class="mt-1 relative">
          <select
            v-model="formData.user_id"
            required
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
            :disabled="usersStore.loading"
          >
            <option value="" disabled>Select a user</option>
            <option v-for="user in usersStore.users" :key="user.id" :value="user.id">
              {{ user.email }} (ID: {{ user.id }})
            </option>
          </select>
          <div v-if="usersStore.loading" class="absolute right-2 top-2">
            <span class="text-sm text-gray-500">Loading...</span>
          </div>
        </div>
      </div>

      <!-- Tariff -->
      <div class="flex space-x-4">
        <div class="flex-grow">
          <label class="block text-sm font-medium text-gray-700">Tariff</label>
          <div class="mt-1 relative">
            <select
              v-model="selectedTariff"
              required
              class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
              :disabled="tariffsStore.loading"
            >
              <option value="">Select a tariff</option>
              <option 
                v-for="tariff in tariffsStore.formattedTariffs" 
                :key="tariff.id" 
                :value="tariff"
              >
                {{ tariff.formattedName }} - {{ tariff.price }} {{ tariff.currency }}
              </option>
            </select>
            <div v-if="tariffsStore.loading" class="absolute right-2 top-2">
              <span class="text-sm text-gray-500">Loading...</span>
            </div>
          </div>
        </div>
        <div class="w-24">
          <label class="block text-sm font-medium text-gray-700">Quantity</label>
          <input
            v-model.number="quantity"
            type="number"
            min="1"
            required
            class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
          />
        </div>
      </div>

      <!-- Discount Amount -->
      <div>
        <label class="block text-sm font-medium text-gray-700">Discount Amount</label>
        <input
          v-model.number="formData.discount_amount"
          type="number"
          step="0.01"
          min="0"
          required
          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>

      <!-- Payment Gateway -->
      <div>
        <label class="block text-sm font-medium text-gray-700">Payment Gateway</label>
        <input
          value="demo"
          disabled
          class="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm"
        />
      </div>

      <!-- Subtotal Amount -->
      <div>
        <label class="block text-sm font-medium text-gray-700">Subtotal Amount</label>
        <input
          :value="subtotalAmount"
          type="number"
          step="0.01"
          disabled
          class="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm"
        />
      </div>

      <!-- Currency -->
      <div>
        <label class="block text-sm font-medium text-gray-700">Currency</label>
        <input
          :value="selectedTariff?.currency || 'RUB'"
          disabled
          class="mt-1 block w-full rounded-md border-gray-300 bg-gray-100 shadow-sm"
        />
      </div>
    </div>

    <div class="flex justify-end space-x-4">
      <button
        type="button"
        @click="$emit('cancel')"
        class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50"
      >
        Cancel
      </button>
      <button
        type="submit"
        class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm hover:bg-blue-700"
        :disabled="loading || purchasesStore.loading"
      >
        {{ loading || purchasesStore.loading ? 'Creating...' : 'Create Order' }}
      </button>
    </div>
  </form>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue';
import { useUsersStore } from '@/stores/users';
import { useTariffsStore } from '@/stores/tariffs';
import { usePurchasesStore } from '@/stores/purchases';
import { useAlerts } from '@/composables/useAlerts';

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['submit', 'cancel']);
const usersStore = useUsersStore();
const tariffsStore = useTariffsStore();
const purchasesStore = usePurchasesStore();
const { showSuccess, showError } = useAlerts();

const selectedTariff = ref(null);
const quantity = ref(1);

const formData = ref({
  user_id: '',
  discount_amount: 0
});

const subtotalAmount = computed(() => {
  if (!selectedTariff.value) return 0;
  const baseAmount = selectedTariff.value.price * quantity.value;
  return Math.max(0, baseAmount - formData.value.discount_amount);
});

onMounted(async () => {
  try {
    await Promise.all([
      usersStore.fetchUsers(),
      tariffsStore.fetchTariffs()
    ]);
  } catch (error) {
    console.error('Error loading form data:', error);
  }
});

const handleSubmit = async () => {
  try {
    const orderData = {
      user_id: formData.value.user_id,
      tariff_id: selectedTariff.value.id,
      quantity: quantity.value,
      discount_amount: formData.value.discount_amount,
      payment_gateway: 'demo'
    };
    
    const order = await purchasesStore.createOrder(orderData);
    showSuccess(order['message'] || 'Order created successfully');
    emit('submit', order);
  } catch (e) {
    console.error('Error creating order:', e);
    showError('Failed to create order: ' + e.message);
  }
};
</script>