hedera-web/src/pages/Admin/NewsView.vue

139 lines
4.2 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 { useAppStore } from 'stores/app';
import { storeToRefs } from 'pinia';
import { useVnConfirm } from 'src/composables/useVnConfirm.js';
import useNotify from 'src/composables/useNotify.js';
const jApi = inject('jApi');
const { t } = useI18n();
const appStore = useAppStore();
const { openConfirmationModal } = useVnConfirm();
const { isHeaderMounted } = storeToRefs(appStore);
const { notify } = useNotify();
const loading = ref(false);
const news = ref([]);
const getNews = async () => {
try {
news.value = await jApi.query(
`SELECT n.id, u.nickname, n.priority, n.image, n.title
FROM news n
JOIN account.user u ON u.id = n.userFk
ORDER BY priority, n.created DESC`
);
} catch (error) {
console.error('Error getting news:', error);
}
};
const deleteNew = async (id, index) => {
try {
await jApi.execQuery(
`START TRANSACTION;
DELETE FROM hedera.news WHERE ((id = #id));
COMMIT`,
{
id
}
);
news.value.splice(index, 1);
notify(t('dataSaved'), 'positive');
} catch (error) {
console.error('Error deleting news:', error);
}
};
onMounted(async () => getNews());
</script>
<template>
<Teleport v-if="isHeaderMounted" to="#actions">
<QBtn
:label="t('addNew')"
icon="add"
:to="{ name: 'adminNewsDetails' }"
rounded
no-caps
>
<QTooltip>{{ t('addNew') }}</QTooltip>
</QBtn>
</Teleport>
<QPage class="vn-w-xs">
<QList class="flex justify-center">
<QSpinner
v-if="loading"
color="primary"
size="3em"
:thickness="2"
/>
<CardList
v-else
v-for="(newsItem, index) in news"
:key="index"
:to="{ name: 'adminNewsDetails', params: { id: newsItem.id } }"
>
<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)
)
"
>
<QTooltip>{{ t('remove') }}</QTooltip>
</QBtn>
</template>
</CardList>
</QList>
</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>