Skip to content

Commit

Permalink
fix delete in tables
Browse files Browse the repository at this point in the history
  • Loading branch information
@briofy-mobina
briofy-mobina committed Jun 7, 2023
1 parent ae08928 commit 37697a3
Show file tree
Hide file tree
Showing 2 changed files with 137 additions and 29 deletions.
148 changes: 120 additions & 28 deletions components/Base/BaseTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@
<section class="bg-gray-50 dark:bg-gray-900 antialiased rounded">
<div class="mx-auto">
<div
class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded overflow-hidden"
>
class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded overflow-hidden">
<div
class="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0 md:space-x-4 p-4"
>
class="flex flex-col md:flex-row md:items-center md:justify-between space-y-3 md:space-y-0 md:space-x-4 p-4">
<div class="flex-1 flex items-center space-x-2">
<h5>
<span class="dark:text-white font-bold text-xl">{{
Expand All @@ -18,37 +16,100 @@
</h5>
</div>
<div
class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0"
>
class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
<NuxtLink :to="props.endpoint + tableButton.link">
<button
class="flex items-center rtl:mr-2 ml-2 justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
>
class="flex items-center rtl:mr-2 ml-2 justify-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm px-4 py-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
<Icon name="mdi:plus" class="me-1" size="16px" />
{{ tableButton.text }}
</button>
</NuxtLink>
</div>
</div>

<div
class="flex flex-col md:flex-row items-stretch md:items-center md:space-x-3 space-y-3 md:space-y-0 justify-between mx-4"
></div>
class="flex flex-col md:flex-row items-stretch md:items-center md:space-x-3 space-y-3 md:space-y-0 justify-between mx-4"></div>

<BaseTableSkeleton v-if="loading" />

<div v-else class="overflow-x-auto">
<div
:class="showModal == true ? 'block' : 'hidden'"
id="popup-modal"
tabindex="-1"
class="absolute z-50 p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)]">
<div class="relative max-w-sm sm:max-w-md mx-auto">
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<button
@click="hide"
type="button"
class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
data-modal-hide="popup-modal">
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg">
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
<div class="p-6 text-center">
<svg
aria-hidden="true"
class="mx-auto mb-4 text-gray-400 w-14 h-14 dark:text-gray-200"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3
class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">
Are you sure you want to delete this product?
</h3>
<button
:disabled="loadingDisabled"
@click="removeItem()"
data-modal-hide="popup-modal"
type="button"
class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center mr-2">
<Icon
v-if="loadingDisabled"
class="animate-spin"
size="1.2rem"
name="mdi:loading" />
<span v-else>Yes, I'm sure</span>
</button>
<button
@click="hide"
data-modal-hide="popup-modal"
type="button"
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600">
No, cancel
</button>
</div>
</div>
</div>
</div>
<table
class="w-full text-sm text-left text-gray-500 dark:text-gray-400"
>
class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
>
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr v-if="tableData.length >= 1">
<th
v-for="item in props.headerFilters"
:key="item.key"
scope="col"
class="p-4"
>
class="p-4">
{{ item.text }}
</th>
<th scope="col" class="p-4">Actions</th>
Expand All @@ -59,8 +120,7 @@
<tr
v-for="(tableTr, tableTrIndex) in tableItems"
:key="`tr-${tableTrIndex}`"
class="border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700"
>
class="border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="w-4 p-4" v-for="key in Object.keys(tableTr)">
<img
v-if="key == 'logo'"
Expand All @@ -69,24 +129,22 @@
? tableTr[key]
: 'https://s.trader4.net/defaults/posts/logo.png'
}`"
class="w-10 h-10 rounded-full"
/>
class="w-10 h-10 rounded-full" />
<span v-else-if="key === 'uuid'"></span>
<span v-else>{{ tableTr[key] }}</span>
</td>

<td class="w-4 p-4">
<div class="flex w-4 items-center space-x-3">
<button
class="bg-red-500 hover:bg-red-700 px-4 py-2 text-white rounded flex items-center"
>
@click="show(tableTr.uuid)"
class="bg-red-500 hover:bg-red-700 px-4 py-2 text-white rounded flex items-center">
<Icon name="mdi:bin" size="16px" class="me-1" />
Delete
</button>
<NuxtLink
:to="`${props.endpoint}${tableTr.uuid}`"
class="bg-blue-500 hover:bg-blue-700 px-4 py-2 text-white rounded flex items-center"
>
class="bg-blue-500 hover:bg-blue-700 px-4 py-2 text-white rounded flex items-center">
<Icon name="mdi:pencil" size="16px" class="me-1" />
Edit
</NuxtLink>
Expand All @@ -105,17 +163,19 @@
:currentPage="metas.current_page"
:totalPages="metas.last_page"
:perPage="metas.per_page"
@on-change-page="fetchTable($event)"
/>
@on-change-page="fetchTable($event)" />
</div>
</div>
</section>
</template>

<script setup lang="ts">
const { loading, getTableData, tableData, metas } = useTableStore();
const { loading, getTableData, tableData, metas, deleteItem } = useTableStore();
const tableItems = ref<any>([]);
const { $toast } = useNuxtApp();
const loadingDisabled = ref(false);
const data = ref();
const showModal = ref(false);
const props = defineProps<{
endpoint: string;
tableButton: { text: string; link: string };
Expand All @@ -125,6 +185,38 @@ const props = defineProps<{
props.headerFilters.push({ key: "uuid" });
const show = (uuid?: string) => {
showModal.value = true;
data.value = uuid;
};
const hide = () => {
showModal.value = false;
};
const removeItem = () => {
loadingDisabled.value = true;
deleteItem(props.endpoint, data.value)
.then((res: any) => {
if (res.data.succeed) {
//@ts-ignore
$toast.success("deleted Successfully", {
position: "top-right",
});
fetchTable();
showModal.value = false;
} else {
loadingDisabled.value = false;
}
loadingDisabled.value = false;
})
.catch((err) => {
$toast.error(err.data.message.toString(), {
position: "top-right",
});
loadingDisabled.value = false;
});
};
const fetchTable = async (page?: number) => {
tableData.value = [];
tableItems.value = [];
Expand Down
18 changes: 17 additions & 1 deletion store/crud.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,14 @@ export const useTableStore = () => {
});
};

const deleteItem = async (endpoint: string, uuid?: string) => {
return await useApi(`/v1${endpoint}/${uuid}`, {
method: "delete",
//@ts-ignore
headers: { Authorization: useCookie("user").value.access_token },
});
};

const getPosts = async () => {
return await useApi("/v1/posts");
};
Expand All @@ -31,5 +39,13 @@ export const useTableStore = () => {
metas.value = res.metas;
};

return { createPost, getPosts, getTableData, tableData, loading, metas };
return {
createPost,
getPosts,
getTableData,
tableData,
loading,
metas,
deleteItem,
};
};

0 comments on commit 37697a3

Please sign in to comment.