budget-go/frontend/js/views/transaction/ListView.vue

<template>
  <BContainer
    fluid
    class="p-0"
  >
    <RouterView />

    <CrudHeader :title="$route.meta.label">
      <template #menu>
        <BButtonToolbar key-nav>
          <BButton
            variant="secondary"
            class="me-2"
            @click="filtersShow = true"
            >Filtres</BButton
          >
          <BButton
            variant="primary"
            @click="doAdd"
            >Importer</BButton
          >
        </BButtonToolbar>
      </template>
      <template #bottom>
        <CrudPager
          v-model:page="page"
          v-model:pages="pages"
          v-model:limit="limit"
          @update="refresh()"
        />
      </template>
    </CrudHeader>

    <div
      v-if="data"
      class="crud-list"
    >
      <DataList
        :rows="data.rows"
        :headers="getListFields()"
        :sort="sort"
        :order="order"
        @sort="doSort"
        @row-click="doShow"
      />
    </div>

    <BModal
      v-if="form !== null"
      v-model="formShow"
      :title="form?.label"
      @ok="doSave"
    >
      <BAlert
        :model-value="form.error !== null"
        variant="danger"
        >
          <div v-html="form.error"></div>
      </BAlert>
      <BForm @submit="doSave">
        <FormView :form="form" />
      </BForm>
      <template #footer>
        <div></div>
        <div>
          <BButton
            variant="secondary"
            class="me-2"
            @click="formShow = false"
            >Annuler</BButton
          >
          <BButton
            variant="primary"
            @click="doSave"
            >OK</BButton
          >
        </div>
      </template>
    </BModal>

    <BModal
      v-if="filtersShow"
      v-model="filtersShow"
      title="Filtres"
      hide-footer
    >
      <CrudFilter
        :data="filters"
        :fields="filtersFields"
        @update="doUpdateFilters"
      />
    </BModal>
  </BContainer>
</template>

<script setup>
import { BContainer, BModal, BButton, BForm, BAlert, BButtonToolbar } from 'bootstrap-vue-next'

import CrudHeader from '../../components/crud/CrudHeader.vue'
import CrudFilter from '../../components/CrudFilter.vue'
import CrudPager from '../../components/crud/CrudPager.vue'
import FormView from '../../components/crud/FormView.vue'
import DataList from '../../components/crud/DataList.vue'
import { ref, onMounted, watch } from 'vue'
import { getStorage, saveStorage } from '../../lib/storage'
import { queryFilters, appendRequestQueryFilters } from '../../lib/filter'
import { useRouter, RouterView } from 'vue-router'
import { getList, getListFields, getListFilters, createForm, importFile } from '../../models/transaction'
import { getList as getAccountList } from '../../models/bank_account'
import { getList as getCategoryList } from '../../models/category'
import { requestErrorBuilder } from '../../lib/request'

const endpoint = `/api/transaction`
const order = ref(getStorage(`${endpoint}:order`))
const sort = ref(getStorage(`${endpoint}:sort`))
const page = ref(getStorage(`${endpoint}:page`))
const limit = ref(getStorage(`${endpoint}:limit`))
const data = ref(null)
const pages = ref(null)
const form = ref(null)
const formShow = ref(false)
const filters = ref(getStorage(`${endpoint}:filters`) ?? [])
const filtersShow = ref(false)
const router = useRouter()

watch(order, (v) => saveStorage(`${endpoint}:order`, v))
watch(sort, (v) => saveStorage(`${endpoint}:sort`, v))
watch(page, (v) => saveStorage(`${endpoint}:page`, v))
watch(limit, (v) => saveStorage(`${endpoint}:limit`, v))

const refresh = () => {
  let query = {
    ...queryFilters(filters.value),
    order: order.value,
    sort: sort.value,
    page: page.value,
    limit: limit.value,
  }

  query = appendRequestQueryFilters(query, endpoint)

  getList(query, (value) => {
    data.value = value
    order.value = value.order
    sort.value = value.sort
    page.value = value.page
    pages.value = value.total_pages
    limit.value = value.limit
  })
}

const doShow = (item) => {
  router.replace({ name: 'transaction_show', params: { id: item.id } })
}

const doUpdateFilters = (a) => {
  saveStorage(`${endpoint}:filters`, a, 'filters')
  filters.value = a
  refresh()
}

const doSort = (key) => {
  let nextSort = 'asc'

  if (order.value === key) {
    nextSort = sort.value === 'asc' ? 'desc' : 'asc'
  }

  order.value = key
  sort.value = nextSort
  page.value = 1

  refresh()
}

const doAdd = () => {
  getAccountList({}, (accounts) => {
    form.value = createForm(accounts.rows)
    formShow.value = true
  })
}

const doSave = () => {
  importFile(
    form.value.data,
    (data) => {
      if (data.code === 400) {
        form.value.error = requestErrorBuilder(data)
      } else {
        form.value = null
        formShow.value = false
        refresh()
      }
    },
    (err) => {
      form.value.error = `Une erreur s'est produite : ${err}`
    },
  )
}

const filtersFields = ref(getListFilters())

onMounted(() => {
  refresh()

  getCategoryList({}, (data) => {
    filtersFields.value.forEach((value, key) => {
      if (value.key === 'category_id') {
        data.rows.forEach((item) => {
          filtersFields.value[key].options.push({
            value: item.id,
            text: item.label,
          })
        })
      }
    })
  })

  getAccountList({}, (data) => {
    filtersFields.value.forEach((value, key) => {
      if (value.key === 'bank_account_id') {
        data.rows.forEach((item) => {
          filtersFields.value[key].options.push({
            value: item.id,
            text: item.label,
          })
        })
      }
    })
  })
})
</script>