Ship your SaaS in minutes.
Not months.

<script setup lang="ts">
import { computed, nextTick, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
import axios from 'axios'
import Card from 'primevue/card'
import DataTable from 'primevue/datatable'
import Column from 'primevue/column'
import Paginator, { type PageState } from 'primevue/paginator'
import ProgressBar from 'primevue/progressbar'
import IconField from 'primevue/iconfield'
import InputIcon from 'primevue/inputicon'
import InputText from 'primevue/inputtext'
import Button from 'primevue/button'
import ConfirmDialog from 'primevue/confirmdialog'
import { useConfirm } from 'primevue/useconfirm'

const apiUrl = globalThis._importMeta_.env.VITE_API_URL

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

interface Author {
  id: number
  name: string
}

interface Post {
  id: number
  title: string
  description: string | null
  user_id: number | null
  created_at: string
  updated_at: string
  author?: Author
}

interface PaginationMeta {
  current_page: number
  from: number
  last_page: number
  per_page: number
  to: number
  total: number
}

interface PaginatedResponse<T> extends PaginationMeta {
  data: T[]
}

interface ListParams {
  page?: number
  per_page?: number
  search?: string
  orderBy?: keyof Post
  order?: 'asc' | 'desc'
  with?: string[]
}

function makePaginationMeta(meta?: Partial<PaginationMeta>): PaginationMeta {
  return {
    current_page: meta?.current_page ?? 1,
    from: meta?.from ?? 1,
    last_page: meta?.last_page ?? 1,
    per_page: meta?.per_page ?? 0,
    to: meta?.to ?? 0,
    total: meta?.total ?? 0,
  }
}

// ---------------------------------------------------------------------------
// API
// ---------------------------------------------------------------------------

async function fetchPosts(params: ListParams, signal?: AbortSignal) {
  const response = await axios.post<PaginatedResponse<Post>>(
    `${apiUrl}/posts/list`,
    params,
    { signal },
  )
  return response.data
}

async function destroyPost(id: Post['id']) {
  await axios.delete(`${apiUrl}/posts/${id}`)
}

// ---------------------------------------------------------------------------
// List state
// ---------------------------------------------------------------------------

const defaultParams: ListParams = { with: ['author'] }

const posts = ref<Post[]>([])
const pagination = ref<PaginationMeta>(makePaginationMeta())
const isLoading = ref(false)
const isLoaded = ref(false)
const error = ref('')
let abortController: AbortController | null = null

async function getList(params: ListParams = {}) {
  if (isLoading.value) return

  const merged: ListParams = { ...defaultParams, ...params }
  if (merged.page === undefined) {
    merged.page = pagination.value.current_page
  }

  abortController?.abort()
  abortController = new AbortController()

  isLoading.value = true
  error.value = ''
  try {
    const response = await fetchPosts(merged, abortController.signal)
    posts.value = response.data
    pagination.value = makePaginationMeta(response)
    isLoaded.value = true
  } catch (e) {
    if (axios.isCancel(e)) return
    error.value = e instanceof Error ? e.message : 'Could not load posts'
  } finally {
    isLoading.value = false
  }
}

// ---------------------------------------------------------------------------
// Search (debounced, Enter to search now, clear resets to page 1)
// ---------------------------------------------------------------------------

const searchString = ref('')
let searchTimer: ReturnType<typeof setTimeout> | null = null

function debouncedSearch() {
  if (searchTimer) clearTimeout(searchTimer)
  searchTimer = setTimeout(() => {
    handleSearch()
  }, 300)
}

function handleSearch() {
  if (searchTimer) clearTimeout(searchTimer)
  getList({ search: searchString.value || undefined, page: 1 })
}

function clearSearch() {
  searchString.value = ''
  getList({ search: undefined, page: 1 })
}

// ---------------------------------------------------------------------------
// Pagination
// ---------------------------------------------------------------------------

const paginatorFirst = computed(
  () => (pagination.value.current_page - 1) * pagination.value.per_page,
)

function handlePage(event: PageState) {
  getList({ page: event.page + 1 })
}

// ---------------------------------------------------------------------------
// Delayed header loader (only shows if loading takes longer than 100ms,
// positioned directly under the table header)
// ---------------------------------------------------------------------------

const showLoader = ref(false)
let loaderDelay: ReturnType<typeof setTimeout> | null = null

watch(
  isLoading,
  (loading) => {
    if (loaderDelay) {
      clearTimeout(loaderDelay)
      loaderDelay = null
    }
    if (loading) {
      loaderDelay = setTimeout(() => {
        showLoader.value = true
        loaderDelay = null
      }, 100)
    } else {
      showLoader.value = false
    }
  },
  { immediate: true },
)

const tableRoot = ref<HTMLElement>()
const headerHeight = ref('0px')

function updateHeaderHeight() {
  nextTick(() => {
    if (!tableRoot.value) return
    const thead = tableRoot.value.querySelector<HTMLElement>(
      '.p-datatable-table-container thead',
    )
    if (thead) headerHeight.value = `${thead.offsetHeight}px`
  })
}

watch(isLoading, updateHeaderHeight, { immediate: true })

// ---------------------------------------------------------------------------
// Delete with confirmation
// ---------------------------------------------------------------------------

const confirm = useConfirm()
const removingIds = ref(new Set<Post['id']>())

function removePost(post: Post) {
  confirm.require({
    message: 'Are you sure you want to delete this item?',
    header: 'Danger Zone',
    icon: 'fas fa-exclamation-triangle',
    rejectLabel: 'Cancel',
    rejectProps: {
      label: 'Cancel',
      severity: 'secondary',
      outlined: true,
    },
    acceptProps: {
      label: 'Delete',
      severity: 'danger',
    },
    accept: async () => {
      removingIds.value.add(post.id)
      try {
        await destroyPost(post.id)
        await getList()
      } finally {
        removingIds.value.delete(post.id)
      }
    },
    reject: () => {},
  })
}

// ---------------------------------------------------------------------------
// Lifecycle
// ---------------------------------------------------------------------------

onBeforeMount(() => {
  getList()
})

onBeforeUnmount(() => {
  if (searchTimer) clearTimeout(searchTimer)
  if (loaderDelay) clearTimeout(loaderDelay)
  abortController?.abort()
})
</script>

<template>
  <ConfirmDialog />

  <div class="container">
    <div class="list-search">
      <IconField>
        <InputIcon class="fal fa-search" />
        <InputText
          v-model="searchString"
          class="list-search__input"
          placeholder="Search posts..."
          @update:model-value="debouncedSearch"
          @keyup.enter="handleSearch"
        />
        <button
          v-if="searchString"
          class="list-search__clear"
          type="button"
          @click="clearSearch"
        >
          <i class="fal fa-xmark" />
        </button>
      </IconField>
    </div>
  </div>

  <div class="container">
    <div ref="tableRoot" class="post-table">
      <Card class="post-table__card">
        <template #content>
          <small v-if="error" class="post-table__error">{{ error }}</small>

          <DataTable :value="posts" :loading="isLoading">
            <template #loading>
              <ProgressBar
                v-if="showLoader"
                mode="indeterminate"
                class="post-table__loader"
              />
            </template>

            <Column field="title" header="Title" sortable />
            <Column field="author.name" header="Author" />
            <Column header="Actions">
              <template #body="{ data }">
                <Button
                  class="post-table__remove"
                  icon="fal fa-trash"
                  severity="secondary"
                  text
                  rounded
                  :loading="removingIds.has(data.id)"
                  @click.stop="removePost(data)"
                />
              </template>
            </Column>
          </DataTable>

          <Paginator
            :first="paginatorFirst"
            :rows="pagination.per_page"
            :total-records="pagination.total"
            @page="handlePage"
          />
        </template>
      </Card>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  max-width: 1700px;
  padding: 24px 32px;

  & + .container {
    padding-top: 0;
  }
}

.list-search {
  width: 100%;

  :deep(.p-icon-field) {
    position: relative;
    width: 100%;
  }

  .list-search__input {
    width: 100%;
  }

  .list-search__clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--p-text-secondary-color);
    cursor: pointer;
    padding: 4px;
    z-index: 1;
  }
}

.post-table {
  width: 100%;

  .post-table__card {
    overflow: hidden;

    &:deep(.p-card-body) {
      overflow: auto;
      padding: 0;

      .p-datatable-mask.p-overlay-mask {
        height: 2px;
        top: v-bind(headerHeight);
        background: transparent;
      }
    }
  }

  .post-table__loader {
    height: 2px;
    min-height: 2px;
    max-height: 2px;
    margin-bottom: -2px;
    width: 100%;
    border-radius: 0;
    background: transparent;
  }

  .post-table__error {
    display: block;
    padding: 12px 16px;
    color: var(--p-red-400);
  }

  .post-table__remove.p-button-icon-only.p-button-rounded {
    width: 30px;
    height: 30px;
    border-radius: 100%;
  }
}
</style>

<script setup lang="ts">
import { onBeforeMount } from 'vue'
import Container from '@/components/Container.vue'
import ListSearch from '@/components/ListSearch.vue'
import useApiTable from '@/components/Table/useApiTable'
import { usePostListState } from '@/models/Post/States'

const listState = usePostListState()
listState.defaultParams = { with: ['author'] }

const { ApiTable, Column, ApiTableRemoveButton } = useApiTable(listState)

onBeforeMount(() => {
  listState.getList()
})
</script>

<template>
  <Container>
    <ListSearch :list-state="listState" placeholder="Search posts..." />
  </Container>
  <Container>
    <ApiTable :list-state="listState">
      <Column field="title" header="Title" sortable />
      <Column field="author.name" header="Author" />
      <Column header="Actions">
        <template #body="{ data }">
          <ApiTableRemoveButton :item="data" />
        </template>
      </Column>
    </ApiTable>
  </Container>
</template>