89 lines
2.5 KiB
Vue
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> |