Files
dlearn-admin/src/views/Faq.vue
T
2024-07-03 21:25:34 +03:30

89 lines
2.5 KiB
Vue

<template>
<Panel :header="$t('سوالات متداول')">
<template #icons>
<Button
icon="pi pi-plus"
:label="$t('ایجاد آیتم جدید')"
severity="success"
@click="create()"
/>
</template>
<DataTable :value="store.items">
<Column field="title" :header="$t('title')" />
<Column :header="$t('options')" headerClass="w-32">
<template #body="{ data }">
<div class="flex justify-end">
<Button icon="pi pi-eye" rounded text severity="secondary" @click="show(data)" />
<Button
@click="remove(data)"
icon="pi pi-trash"
rounded
text
severity="danger"
:loading="removing"
/>
</div>
</template>
</Column>
<template #empty>
<p>{{ store.fetching ? $t("loading") : $t("emptyTable") }}</p>
</template>
</DataTable>
<Column headerClass="w-32">
<template #body="{ data }">
<div class="flex justify-end">
<Button
icon="pi pi-eye"
rounded
text
severity="secondary"
@click="show(data)"
/>
</div>
</template>
</Column>
</Panel>
</template>
<script setup>
import { defineAsyncComponent, inject, ref, watchEffect } from "vue";
import { useFaqStore } from "@/stores/faq";
const store = useFaqStore();
const { toast, dialog, confirm, t } = inject('service');
const FaqDetails = defineAsyncComponent(() => import('../components/FaqDetails.vue'));
const AddFaq = defineAsyncComponent(() => import('../components/AddFaq.vue'));
const removing = ref(false)
const show = (product) => {
dialog.open(FaqDetails, {
props: { modal: true, closable: true, header: t('جزئیات آیتم') },
data: {
product
}
});
}
const create = () =>{
dialog.open(AddFaq, {
props: { modal: true, closable: true, header: t('ایجاد آیتم جدید') },
});
}
const remove = async (item) => {
removing.value = true
const {data} = await store.remove(item.id)
removing.value = false
await store.index()
};
watchEffect(async() =>{
await store.index()
})
</script>