first commit
This commit is contained in:
82
resources/js/Pages/Units/Create.vue
Normal file
82
resources/js/Pages/Units/Create.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #breadcrumb>
|
||||
<Link href="/" class="hover:text-[#137fec]">Home</Link>
|
||||
<span class="mx-2">/</span>
|
||||
<Link :href="route('units.index')" class="hover:text-[#137fec]">Units</Link>
|
||||
<span class="mx-2">/</span>
|
||||
<span>Create</span>
|
||||
</template>
|
||||
|
||||
<div class="max-w-2xl">
|
||||
<h1 class="text-2xl font-bold text-slate-900 mb-6">Add Unit</h1>
|
||||
|
||||
<form @submit.prevent="submit" class="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Building</label>
|
||||
<select v-model="form.building_id" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" required>
|
||||
<option value="">Select Building</option>
|
||||
<option v-for="building in buildings" :key="building.id" :value="building.id">{{ building.building_name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Unit Number</label>
|
||||
<input v-model="form.unit_no" type="text" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Floor Number</label>
|
||||
<input v-model="form.floor_no" type="text" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Area (sqft)</label>
|
||||
<input v-model="form.area_sqft" type="number" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Assets (comma separated)</label>
|
||||
<input v-model="assetsInput" type="text" placeholder="AC, Fridge, Washing Machine" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
|
||||
<select v-model="form.status" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" required>
|
||||
<option value="vacant">Vacant</option>
|
||||
<option value="occupied">Occupied</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 pt-4">
|
||||
<button type="submit" class="px-6 py-2 bg-[#137fec] text-white rounded-lg font-medium hover:bg-[#137fec]/90">Save</button>
|
||||
<Link :href="route('units.index')" class="px-6 py-2 border border-slate-200 text-slate-600 rounded-lg font-medium hover:bg-slate-50">Cancel</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { useForm, Link } from '@inertiajs/vue3'
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
|
||||
const props = defineProps({ buildings: Array })
|
||||
|
||||
const assetsInput = ref('')
|
||||
const form = useForm({
|
||||
building_id: '',
|
||||
unit_no: '',
|
||||
floor_no: '',
|
||||
area_sqft: '',
|
||||
assets: [],
|
||||
status: 'vacant'
|
||||
})
|
||||
|
||||
watch(assetsInput, (val) => {
|
||||
form.assets = val ? val.split(',').map(s => s.trim()) : []
|
||||
})
|
||||
|
||||
const submit = () => form.post(route('units.store'))
|
||||
</script>
|
||||
82
resources/js/Pages/Units/Edit.vue
Normal file
82
resources/js/Pages/Units/Edit.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #breadcrumb>
|
||||
<Link href="/" class="hover:text-[#137fec]">Home</Link>
|
||||
<span class="mx-2">/</span>
|
||||
<Link :href="route('units.index')" class="hover:text-[#137fec]">Units</Link>
|
||||
<span class="mx-2">/</span>
|
||||
<span>Edit</span>
|
||||
</template>
|
||||
|
||||
<div class="max-w-2xl">
|
||||
<h1 class="text-2xl font-bold text-slate-900 mb-6">Edit Unit</h1>
|
||||
|
||||
<form @submit.prevent="submit" class="bg-white rounded-xl border border-slate-200 p-6 space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Building</label>
|
||||
<select v-model="form.building_id" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" required>
|
||||
<option value="">Select Building</option>
|
||||
<option v-for="building in buildings" :key="building.id" :value="building.id">{{ building.building_name }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Unit Number</label>
|
||||
<input v-model="form.unit_no" type="text" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" required />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Floor Number</label>
|
||||
<input v-model="form.floor_no" type="text" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Area (sqft)</label>
|
||||
<input v-model="form.area_sqft" type="number" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Assets (comma separated)</label>
|
||||
<input v-model="assetsInput" type="text" placeholder="AC, Fridge, Washing Machine" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-slate-700 mb-2">Status</label>
|
||||
<select v-model="form.status" class="w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-[#137fec]" required>
|
||||
<option value="vacant">Vacant</option>
|
||||
<option value="occupied">Occupied</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4 pt-4">
|
||||
<button type="submit" class="px-6 py-2 bg-[#137fec] text-white rounded-lg font-medium hover:bg-[#137fec]/90">Update</button>
|
||||
<Link :href="route('units.index')" class="px-6 py-2 border border-slate-200 text-slate-600 rounded-lg font-medium hover:bg-slate-50">Cancel</Link>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue'
|
||||
import { useForm, Link } from '@inertiajs/vue3'
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
|
||||
const props = defineProps({ unit: Object, buildings: Array })
|
||||
|
||||
const assetsInput = ref(props.unit.assets ? props.unit.assets.join(', ') : '')
|
||||
const form = useForm({
|
||||
building_id: props.unit.building_id,
|
||||
unit_no: props.unit.unit_no,
|
||||
floor_no: props.unit.floor_no,
|
||||
area_sqft: props.unit.area_sqft,
|
||||
assets: props.unit.assets || [],
|
||||
status: props.unit.status
|
||||
})
|
||||
|
||||
watch(assetsInput, (val) => {
|
||||
form.assets = val ? val.split(',').map(s => s.trim()) : []
|
||||
})
|
||||
|
||||
const submit = () => form.put(route('units.update', props.unit.id))
|
||||
</script>
|
||||
59
resources/js/Pages/Units/Index.vue
Normal file
59
resources/js/Pages/Units/Index.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<AppLayout>
|
||||
<template #breadcrumb>
|
||||
<Link href="/" class="hover:text-[#137fec]">Home</Link>
|
||||
<span class="mx-2">/</span>
|
||||
<span>Units</span>
|
||||
</template>
|
||||
|
||||
<div class="space-y-6">
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-2xl font-bold text-slate-900">Units</h1>
|
||||
<Link :href="route('units.create')" class="px-4 py-2 bg-[#137fec] text-white rounded-lg font-medium hover:bg-[#137fec]/90">
|
||||
Add Unit
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
|
||||
<table class="w-full">
|
||||
<thead class="bg-slate-50">
|
||||
<tr>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Building</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Unit No</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Floor</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Area (sqft)</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Status</th>
|
||||
<th class="px-6 py-3 text-left text-xs font-semibold text-slate-600 uppercase">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-slate-200">
|
||||
<tr v-for="unit in units.data" :key="unit.id" class="hover:bg-slate-50">
|
||||
<td class="px-6 py-4 text-sm font-medium text-slate-900">{{ unit.building?.building_name }}</td>
|
||||
<td class="px-6 py-4 text-sm text-slate-900">{{ unit.unit_no }}</td>
|
||||
<td class="px-6 py-4 text-sm text-slate-900">{{ unit.floor_no }}</td>
|
||||
<td class="px-6 py-4 text-sm text-slate-900">{{ unit.area_sqft }}</td>
|
||||
<td class="px-6 py-4"><span class="px-2 py-1 text-xs font-bold rounded-md bg-green-50 text-green-700">{{ unit.status }}</span></td>
|
||||
<td class="px-6 py-4 text-sm space-x-2">
|
||||
<Link :href="route('units.edit', unit.id)" class="text-[#137fec] hover:underline">Edit</Link>
|
||||
<button @click="destroy(unit.id)" class="text-red-600 hover:underline">Delete</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</AppLayout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Link, router } from '@inertiajs/vue3'
|
||||
import AppLayout from '@/Layouts/AppLayout.vue'
|
||||
|
||||
defineProps({ units: Object })
|
||||
|
||||
const destroy = (id) => {
|
||||
if (confirm('Delete this unit?')) {
|
||||
router.delete(route('units.destroy', id))
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user