initial: bootstrap from BukidBountyApp base
This commit is contained in:
Jonathan Sykes
364
resources/js/Pages/CreateCooperative.vue
Normal file
364
resources/js/Pages/CreateCooperative.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<script setup>
|
||||
import { usePageTitle } from '../composables/Core/usePageTitle';
|
||||
usePageTitle('Create Cooperative');
|
||||
|
||||
import { ref, computed } from 'vue';
|
||||
import axios from 'axios';
|
||||
import { useNavigate } from '../composables/Core/useNavigate.js';
|
||||
import CardSimple from '../Components/Core/CardSimple.vue';
|
||||
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const name = ref('');
|
||||
const address = ref('');
|
||||
const registrationNumber = ref('');
|
||||
const cin = ref('');
|
||||
const tin = ref('');
|
||||
const cooperativeType = ref('');
|
||||
const cooperativeCategory = ref('');
|
||||
const registrationDate = ref('');
|
||||
const contactPerson = ref('');
|
||||
const contactNumber = ref('');
|
||||
const contactEmail = ref('');
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
const successMessage = ref('');
|
||||
|
||||
const isButtonDisabled = computed(() => {
|
||||
return !!(loading.value || successMessage.value || !name.value.trim());
|
||||
});
|
||||
|
||||
const handleSubmit = async () => {
|
||||
error.value = null;
|
||||
successMessage.value = '';
|
||||
|
||||
if (!name.value.trim()) {
|
||||
error.value = 'Cooperative name is required';
|
||||
return;
|
||||
}
|
||||
|
||||
loading.value = true;
|
||||
try {
|
||||
const response = await axios.post('/Cooperatives/Create', {
|
||||
name: name.value.trim(),
|
||||
address: address.value.trim(),
|
||||
registration_number: registrationNumber.value.trim(),
|
||||
cin: cin.value.trim(),
|
||||
tin: tin.value.trim(),
|
||||
cooperative_type: cooperativeType.value,
|
||||
cooperative_category: cooperativeCategory.value,
|
||||
registration_date: registrationDate.value,
|
||||
contact_person: contactPerson.value.trim(),
|
||||
contact_number: contactNumber.value.trim(),
|
||||
contact_email: contactEmail.value.trim(),
|
||||
});
|
||||
|
||||
if (response.data && response.data.success) {
|
||||
successMessage.value = 'Cooperative created successfully!';
|
||||
setTimeout(() => {
|
||||
navigate({ page: 'CooperativeList' });
|
||||
}, 1200);
|
||||
} else {
|
||||
error.value = response.data?.message || 'Failed to create cooperative';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to create cooperative:', err);
|
||||
error.value = err.response?.data?.message || 'Failed to create cooperative. Please try again.';
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="create-cooperative-page pb-5">
|
||||
<div class="tf-container mt-5 mb-4 text-center">
|
||||
<h1 class="fw_8 premium-title">Register Cooperative</h1>
|
||||
<p class="text-muted">Create a new cooperative organization for farmers and members</p>
|
||||
</div>
|
||||
|
||||
<div v-if="successMessage" class="tf-container mb-4">
|
||||
<div class="glass-alert alert-success animate-fade-in">
|
||||
<i class="fas fa-check-circle me-2"></i>
|
||||
{{ successMessage }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="tf-container mb-4">
|
||||
<div class="glass-alert alert-danger animate-shake">
|
||||
<i class="fas fa-exclamation-triangle me-2"></i>
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tf-container">
|
||||
<CardSimple title="Cooperative Details">
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="coopName" class="form-label">Cooperative Name <span class="required">*</span></label>
|
||||
<input
|
||||
type="text"
|
||||
id="coopName"
|
||||
v-model="name"
|
||||
class="premium-input"
|
||||
placeholder="e.g., Bukidnon Farmers Cooperative"
|
||||
autocomplete="off"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="premium-input-group mb-4">
|
||||
<label for="coopAddress" class="form-label">Address</label>
|
||||
<textarea
|
||||
id="coopAddress"
|
||||
v-model="address"
|
||||
class="premium-input"
|
||||
rows="2"
|
||||
placeholder="Complete physical address of the cooperative"
|
||||
></textarea>
|
||||
</div>
|
||||
</CardSimple>
|
||||
|
||||
<CardSimple title="Registration Information" class="mt-4">
|
||||
<div class="row">
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="regNum" class="form-label">Registration Number</label>
|
||||
<input type="text" id="regNum" v-model="registrationNumber" class="premium-input" placeholder="e.g. REG-12345">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="cin" class="form-label">CIN (Coop ID Number)</label>
|
||||
<input type="text" id="cin" v-model="cin" class="premium-input" placeholder="e.g. CIN-67890">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="tin" class="form-label">TIN</label>
|
||||
<input type="text" id="tin" v-model="tin" class="premium-input" placeholder="000-000-000-000">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="coopType" class="form-label">Cooperative Type</label>
|
||||
<select id="coopType" v-model="cooperativeType" class="premium-input">
|
||||
<option value="">Select Type</option>
|
||||
<option value="AGRICULTURAL">Agricultural</option>
|
||||
<option value="CREDIT">Credit</option>
|
||||
<option value="CONSUMERS">Consumers</option>
|
||||
<option value="MARKETING">Marketing</option>
|
||||
<option value="SERVICE">Service</option>
|
||||
<option value="MULTIPURPOSE">Multipurpose</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="coopCat" class="form-label">Cooperative Category</label>
|
||||
<select id="coopCat" v-model="cooperativeCategory" class="premium-input">
|
||||
<option value="">Select Category</option>
|
||||
<option value="MICRO">Micro</option>
|
||||
<option value="SMALL">Small</option>
|
||||
<option value="MEDIUM">Medium</option>
|
||||
<option value="LARGE">Large</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardSimple>
|
||||
|
||||
<CardSimple title="Contact Information" class="mt-4">
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="regDate" class="form-label">Registration Date</label>
|
||||
<input type="date" id="regDate" v-model="registrationDate" class="premium-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="contactPerson" class="form-label">Contact Person</label>
|
||||
<input type="text" id="contactPerson" v-model="contactPerson" class="premium-input" placeholder="Full name">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="contactNum" class="form-label">Contact Number</label>
|
||||
<input type="text" id="contactNum" v-model="contactNumber" class="premium-input" placeholder="e.g. 09123456789">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 mb-4">
|
||||
<div class="premium-input-group">
|
||||
<label for="contactEmail" class="form-label">Contact Email</label>
|
||||
<input type="email" id="contactEmail" v-model="contactEmail" class="premium-input" placeholder="email@example.com">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardSimple>
|
||||
|
||||
<div class="action-bar mt-5 text-center">
|
||||
<button
|
||||
@click="handleSubmit"
|
||||
:disabled="isButtonDisabled"
|
||||
class="btn-premium-launch"
|
||||
>
|
||||
<i v-if="loading" class="fas fa-spinner fa-spin me-2"></i>
|
||||
<i v-else class="fas fa-plus-circle me-2"></i>
|
||||
{{ loading ? 'Creating...' : 'Create Cooperative' }}
|
||||
</button>
|
||||
|
||||
<div class="mt-4">
|
||||
<button
|
||||
@click="navigate({ page: 'CooperativeList' })"
|
||||
class="btn-text"
|
||||
>
|
||||
<i class="fas fa-chevron-left me-2"></i> Cancel and Return
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.premium-title {
|
||||
font-family: 'Outfit', sans-serif;
|
||||
background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.premium-input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
color: #475569;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #ef4444;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.premium-input {
|
||||
padding: 12px 16px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e2e8f0;
|
||||
background: #fff;
|
||||
font-size: 0.95rem;
|
||||
transition: all 0.2s;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.premium-input:focus {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.glass-alert {
|
||||
padding: 16px 20px;
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(8px);
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: rgba(34, 197, 94, 0.1);
|
||||
border: 1px solid rgba(34, 197, 94, 0.2);
|
||||
color: #15803d;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
color: #b91c1c;
|
||||
}
|
||||
|
||||
.btn-premium-launch {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 16px 48px;
|
||||
border-radius: 14px;
|
||||
font-weight: 700;
|
||||
font-size: 1.1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3);
|
||||
}
|
||||
|
||||
.btn-premium-launch:hover:not(:disabled) {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.4);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.btn-premium-launch:disabled {
|
||||
background: #cbd5e1;
|
||||
cursor: not-allowed;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.btn-text {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #64748b;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.btn-text:hover {
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
|
||||
.animate-shake {
|
||||
animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(-10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
10%, 90% { transform: translate3d(-1px, 0, 0); }
|
||||
20%, 80% { transform: translate3d(2px, 0, 0); }
|
||||
30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
|
||||
40%, 60% { transform: translate3d(4px, 0, 0); }
|
||||
}
|
||||
|
||||
:global(.dark-mode) .premium-input {
|
||||
background: #1e293b;
|
||||
border-color: #334155;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
:global(.dark-mode) .premium-title {
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #cbd5e1 100%);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
:global(.dark-mode) .form-label {
|
||||
color: #94a3b8;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user