151 lines
4.2 KiB
Vue
151 lines
4.2 KiB
Vue
<script setup>
|
|
import { onMounted, reactive, ref } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { hasPermission } from '@Plugins/RolePermission';
|
|
import { useSearcher } from '@Services/Api';
|
|
import { apiTo, transl } from './Module';
|
|
|
|
import ModalController from '@Controllers/ModalController.js';
|
|
|
|
import IconButton from '@Holos/Button/Icon.vue'
|
|
import PrimaryButton from '@Holos/Button/Primary.vue';
|
|
import Input from '@Holos/Form/Input.vue';
|
|
import Header from '@Holos/PageHeader.vue';
|
|
import Paginable from '@Holos/Paginable.vue';
|
|
import Item from '@Holos/Timeline/Item.vue';
|
|
import ShowView from './Modals/Event.vue';
|
|
|
|
/** Definidores */
|
|
const vroute = useRoute();
|
|
const router = useRouter();
|
|
|
|
/** Controladores */
|
|
const Modal = new ModalController();
|
|
|
|
/** Propiedades */
|
|
const showModal = ref(Modal.showModal);
|
|
const modelModal = ref(Modal.modelModal);
|
|
|
|
const models = ref([]);
|
|
|
|
const filters = reactive({
|
|
search: '',
|
|
start_date: '',
|
|
end_date: '',
|
|
user: ''
|
|
});
|
|
|
|
/** Métodos */
|
|
const searcher = useSearcher({
|
|
url: apiTo('index'),
|
|
filters,
|
|
onSuccess: (r) => models.value = r.models,
|
|
onError: () => models.value = []
|
|
});
|
|
|
|
const clearFilters = () => {
|
|
filters.search = '';
|
|
filters.start_date = '';
|
|
filters.end_date = '';
|
|
|
|
searcher.search();
|
|
};
|
|
|
|
const clearUser = () => {
|
|
router.replace({ query: {} });
|
|
filters.user = '';
|
|
|
|
searcher.search();
|
|
};
|
|
|
|
/** Ciclos */
|
|
onMounted(() => {
|
|
if(vroute.query?.user) {
|
|
filters.user = vroute.query.user;
|
|
}
|
|
|
|
searcher.search('');
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Header :title="transl('title')">
|
|
<RouterLink v-if="filters.user && hasPermission('users.index')" :to="$view({ name: 'admin.users.index' })">
|
|
<IconButton
|
|
class="text-white"
|
|
icon="arrow_back"
|
|
:title="$t('return')"
|
|
filled
|
|
/>
|
|
</RouterLink>
|
|
</Header>
|
|
<p class="mt-2 text-sm">{{ transl('description') }}</p>
|
|
|
|
<div id="filters" class="grid gap-2 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 mt-4">
|
|
<Input
|
|
v-model="filters.search"
|
|
title="event"
|
|
@keyup.enter="searcher.search()"
|
|
/>
|
|
<Input
|
|
v-model="filters.start_date"
|
|
type="date"
|
|
title="dates.start"
|
|
/>
|
|
<Input
|
|
v-model="filters.end_date"
|
|
title="dates.end"
|
|
type="date"
|
|
/>
|
|
<div class="flex space-x-2 items-end">
|
|
<PrimaryButton
|
|
class="!w-full h-12"
|
|
@click="searcher.search()"
|
|
>
|
|
{{ $t('search') }}
|
|
</PrimaryButton>
|
|
<PrimaryButton
|
|
class="!w-full h-12"
|
|
@click="clearFilters()"
|
|
>
|
|
{{ $t('clear') }}
|
|
</PrimaryButton>
|
|
<PrimaryButton
|
|
v-if="filters.user"
|
|
class="!w-full h-12"
|
|
@click="clearUser()"
|
|
>
|
|
{{ $t('users.remove') }}
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pb-4">
|
|
<Paginable
|
|
:items="models"
|
|
:processing="searcher.processing"
|
|
@send-pagination="(page) => searcher.pagination(page)"
|
|
>
|
|
<template #body="{ items }">
|
|
<ol class="ml-4">
|
|
<template v-for="event in items">
|
|
<Item
|
|
:event="event"
|
|
@show="Modal.switchShowModal(event)"
|
|
/>
|
|
</template>
|
|
</ol>
|
|
</template>
|
|
</Paginable>
|
|
</div>
|
|
|
|
<ShowView
|
|
:show="showModal"
|
|
:model="modelModal"
|
|
@close="Modal.switchShowModal"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|