101 lines
3.5 KiB
Vue
101 lines
3.5 KiB
Vue
|
<template>
|
||
|
|
<layout title="Organizations">
|
||
|
|
<h1 class="mb-8 font-bold text-3xl">Organizations</h1>
|
||
|
|
<div class="mb-6 flex justify-between items-center">
|
||
|
|
<search-filter v-model="form.search" class="w-full max-w-sm mr-4" @reset="reset">
|
||
|
|
<label class="block text-grey-darkest">Trashed:</label>
|
||
|
|
<select v-model="form.trashed" class="mt-1 w-full form-select">
|
||
|
|
<option :value="null" />
|
||
|
|
<option value="with">With Trashed</option>
|
||
|
|
<option value="only">Only Trashed</option>
|
||
|
|
</select>
|
||
|
|
</search-filter>
|
||
|
|
<inertia-link class="btn-indigo" :href="route('organizations.create')">
|
||
|
|
<span>Create</span>
|
||
|
|
<span class="hidden md:inline">Organization</span>
|
||
|
|
</inertia-link>
|
||
|
|
</div>
|
||
|
|
<div class="bg-white rounded shadow overflow-x-auto">
|
||
|
|
<table class="w-full whitespace-no-wrap">
|
||
|
|
<tr class="text-left font-bold">
|
||
|
|
<th class="px-6 pt-6 pb-4">Name</th>
|
||
|
|
<th class="px-6 pt-6 pb-4">City</th>
|
||
|
|
<th class="px-6 pt-6 pb-4" colspan="2">Phone</th>
|
||
|
|
</tr>
|
||
|
|
<tr v-for="organization in organizations.data" :key="organization.id" class="hover:bg-grey-lightest focus-within:bg-grey-lightest">
|
||
|
|
<td class="border-t">
|
||
|
|
<inertia-link class="px-6 py-4 flex items-center focus:text-indigo" :href="route('organizations.edit', organization.id)">
|
||
|
|
{{ organization.name }}
|
||
|
|
<icon v-if="organization.deleted_at" name="trash" class="flex-no-shrink w-3 h-3 fill-grey ml-2" />
|
||
|
|
</inertia-link>
|
||
|
|
</td>
|
||
|
|
<td class="border-t">
|
||
|
|
<inertia-link class="px-6 py-4 flex items-center" :href="route('organizations.edit', organization.id)" tabindex="-1">
|
||
|
|
{{ organization.city }}
|
||
|
|
</inertia-link>
|
||
|
|
</td>
|
||
|
|
<td class="border-t">
|
||
|
|
<inertia-link class="px-6 py-4 flex items-center" :href="route('organizations.edit', organization.id)" tabindex="-1">
|
||
|
|
{{ organization.phone }}
|
||
|
|
</inertia-link>
|
||
|
|
</td>
|
||
|
|
<td class="border-t w-px">
|
||
|
|
<inertia-link class="px-4 flex items-center" :href="route('organizations.edit', organization.id)" tabindex="-1">
|
||
|
|
<icon name="cheveron-right" class="block w-6 h-6 fill-grey" />
|
||
|
|
</inertia-link>
|
||
|
|
</td>
|
||
|
|
</tr>
|
||
|
|
<tr v-if="organizations.data.length === 0">
|
||
|
|
<td class="border-t px-6 py-4" colspan="4">No organizations found.</td>
|
||
|
|
</tr>
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
<pagination :links="organizations.links" />
|
||
|
|
</layout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import _ from 'lodash'
|
||
|
|
import { Inertia, InertiaLink } from 'inertia-vue'
|
||
|
|
import Icon from '@/Shared/Icon'
|
||
|
|
import Layout from '@/Shared/Layout'
|
||
|
|
import Pagination from '@/Shared/Pagination'
|
||
|
|
import SearchFilter from '@/Shared/SearchFilter'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
InertiaLink,
|
||
|
|
Icon,
|
||
|
|
Layout,
|
||
|
|
Pagination,
|
||
|
|
SearchFilter,
|
||
|
|
},
|
||
|
|
props: {
|
||
|
|
organizations: Object,
|
||
|
|
filters: Object,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
form: {
|
||
|
|
search: this.filters.search,
|
||
|
|
trashed: this.filters.trashed,
|
||
|
|
},
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
form: {
|
||
|
|
handler: _.throttle(function() {
|
||
|
|
let query = _.pickBy(this.form)
|
||
|
|
Inertia.replace(this.route('organizations', Object.keys(query).length ? query : { remember: 'forget' }).url())
|
||
|
|
}, 150),
|
||
|
|
deep: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
reset() {
|
||
|
|
this.form = _.mapValues(this.form, () => null)
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
</script>
|