123 lines
3.9 KiB
Vue
123 lines
3.9 KiB
Vue
<script setup>
|
|
import { onMounted, ref, inject } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
import CardList from 'src/components/ui/CardList.vue';
|
|
import VnImg from 'src/components/ui/VnImg.vue';
|
|
import VnList from 'src/components/ui/VnList.vue';
|
|
import FetchData from 'src/components/common/FetchData.vue';
|
|
|
|
import { useAppStore } from 'stores/app';
|
|
import { storeToRefs } from 'pinia';
|
|
import { useVnConfirm } from 'src/composables/useVnConfirm.js';
|
|
import useNotify from 'src/composables/useNotify.js';
|
|
|
|
const api = inject('api');
|
|
const { t } = useI18n();
|
|
const appStore = useAppStore();
|
|
const { openConfirmationModal } = useVnConfirm();
|
|
const { isHeaderMounted } = storeToRefs(appStore);
|
|
const { notify } = useNotify();
|
|
|
|
const loading = ref(true);
|
|
const news = ref([]);
|
|
|
|
const onFetch = data => {
|
|
news.value = data;
|
|
loading.value = false;
|
|
};
|
|
|
|
const deleteNew = async (id, index) => {
|
|
try {
|
|
await api.delete(`news/${id}`);
|
|
news.value.splice(index, 1);
|
|
notify(t('dataSaved'), 'positive');
|
|
} catch (error) {
|
|
console.error('Error deleting news:', error);
|
|
}
|
|
};
|
|
|
|
onMounted(async () => getNews());
|
|
</script>
|
|
|
|
<template>
|
|
<FetchData ref="fetchNewsRef" url="news" auto-load @on-fetch="onFetch" />
|
|
<Teleport v-if="isHeaderMounted" to="#actions">
|
|
<QBtn
|
|
:label="t('addNew')"
|
|
icon="add"
|
|
:to="{ name: 'adminNewsDetails' }"
|
|
rounded
|
|
no-caps
|
|
data-cy="addNewBtn"
|
|
>
|
|
<QTooltip>{{ t('addNew') }}</QTooltip>
|
|
</QBtn>
|
|
</Teleport>
|
|
<QPage class="vn-w-sm">
|
|
<VnList class="flex justify-center" :loading="loading" :rows="news">
|
|
<CardList
|
|
v-for="(newsItem, index) in news"
|
|
:key="index"
|
|
:to="{ name: 'adminNewsDetails', params: { id: newsItem.id } }"
|
|
data-cy="newsCard"
|
|
>
|
|
<template #prepend>
|
|
<VnImg
|
|
:id="newsItem.image"
|
|
:edit-image-name="newsItem.image"
|
|
storage="news"
|
|
edit-schema="news"
|
|
size="200x200"
|
|
width="80px"
|
|
height="80px"
|
|
class="q-mr-md"
|
|
rounded
|
|
editable
|
|
/>
|
|
</template>
|
|
<template #content>
|
|
<span class="text-bold q-mb-sm">{{ newsItem.title }} </span>
|
|
<span>{{ newsItem.nickname }} </span>
|
|
<span>{{ newsItem.priority }}</span>
|
|
</template>
|
|
<template #actions>
|
|
<QBtn
|
|
icon="delete"
|
|
flat
|
|
rounded
|
|
@click.stop.prevent="
|
|
openConfirmationModal(
|
|
null,
|
|
t('confirmDeleteAddress'),
|
|
() => deleteNew(newsItem.id, index)
|
|
)
|
|
"
|
|
data-cy="deleteNewBtn"
|
|
>
|
|
<QTooltip>{{ t('remove') }}</QTooltip>
|
|
</QBtn>
|
|
</template>
|
|
</CardList>
|
|
</VnList>
|
|
</QPage>
|
|
</template>
|
|
|
|
<i18n lang="yaml">
|
|
en-US:
|
|
addNew: Add new
|
|
confirmDeleteAddress: Are you sure you want to delete this new?
|
|
es-ES:
|
|
addNew: Añadir noticia
|
|
confirmDeleteAddress: ¿Estás seguro de que quieres eliminar esta noticia?
|
|
ca-ES:
|
|
addNew: Afegir noticia
|
|
confirmDeleteAddress: Estàs segur que vols eliminar aquesta notícia?
|
|
fr-FR:
|
|
addNew: Ajouter nouvelles
|
|
confirmDeleteAddress: Êtes-vous sûr de vouloir supprimer cette nouvelle?
|
|
pt-PT:
|
|
addNew: Adicionar noticia
|
|
confirmDeleteAddress: Tem a certeza que deseja eliminar esta notícia?
|
|
</i18n>
|