parkirin/resources/js/pages/test-transaction/Out.vue

<script setup>
import { reactive, watch, onMounted } from 'vue'
import { Inertia } from '@inertiajs/inertia'
import { useForm } from '@inertiajs/inertia-vue3'
import AppInputText from '@/components/AppInputText.vue'
import AppDropdown from '@/components/AppDropdown.vue'
import AppPagination from '@/components/AppPagination.vue'

import { InTable, OutTable } from './TableHeader'

const props = defineProps({
  data: Object,
  typeVehicles: Object,
  entryTransactionData: Object,
  entryTransactionCount: Number,
})

watch(
  () => props.entryTransactionData,
  () => {
    setLocalEntryTransaction()

    form.reset()
  }
)

onMounted(() => {
  setLocalEntryTransaction()
})

const localEntryTransactions = reactive([])

const setLocalEntryTransaction = () => {
  localEntryTransactions.splice(0)
  localEntryTransactions.push(...props.entryTransactionData.data)
}

const copy = (data) => {
  form.entry_transaction_id = data.transactionNumber

  const filterLocalEntryTransactions = props.entryTransactionData.data.filter(
    (val) => val.transactionNumber !== data.transactionNumber
  )

  localEntryTransactions.splice(0)
  localEntryTransactions.push(...filterLocalEntryTransactions)
}

const form = useForm({
  id: 2,
  plat_number: null,
  entry_transaction_id: null,
  type_vehicle_id: null,
})

watch(
  () => form.plat_number,
  () => {
    Inertia.reload({ only: ['typeVehicles'], data: { plat_number: form.plat_number } })
  }
)

const submit = () => {
  form.post(route('test-transactions.store'))
}
</script>
<template>
  <Card>
    <template #title> <h1>Out</h1> </template>
    <template #content>
      <DataTable
        responsiveLayout="scroll"
        columnResizeMode="expand"
        :value="localEntryTransactions"
        :rowHover="true"
        :stripedRows="true"
      >
        <template #header>
          <span style="color: var(--primary-color)">Maksimal ditampilkan :</span> 5
          <br />
          <span style="color: var(--primary-color)">Ditampilkan :</span>
          {{ Object.keys(data.data).length }}
        </template>

        <Column v-for="inTable in InTable" :field="inTable.field" :header="inTable.header" :key="inTable.field" />

        <Column>
          <template #body="{ data }">
            <Button icon="pi pi-copy" class="p-button-rounded p-button-text" @click="copy(data)" />
          </template>
        </Column>
      </DataTable>

      <AppPagination :links="entryTransactionData.links" />

      <Divider type="dashed" />

      <div class="grid">
        <div class="col-12 md:col-6">
          <AppInputText
            v-model="form.plat_number"
            label="Vehicle Plate"
            placeholder="vehicle plate"
            :error="form.errors.plat_number"
          />
        </div>
        <div class="col-12 md:col-6">
          <AppInputText
            disabled
            v-model="form.entry_transaction_id"
            label="Transaction number"
            placeholder="transaction number"
            :error="form.errors.entry_transaction_id"
          />
        </div>
        <div class="col-12 md:col-6">
          <AppDropdown
            v-model="form.type_vehicle_id"
            label="Type Vehicle"
            placeholder="type vehicle"
            :options="typeVehicles"
            :error="form.errors.type_vehicle_id"
          />
        </div>
      </div>

      <Divider type="dashed" />

      <DataTable
        responsiveLayout="scroll"
        columnResizeMode="expand"
        :value="data.data"
        :rowHover="true"
        :stripedRows="true"
      >
        <template #header>
          <span style="color: var(--red-600)">Maksimal ditampilkan :</span> 5
          <br />
          <span style="color: var(--red-600)">Ditampilkan :</span>
          {{ Object.keys(data.data).length }}
        </template>

        <Column v-for="outTable in OutTable" :field="outTable.field" :header="outTable.header" :key="outTable.field" />
      </DataTable>

      <AppPagination :links="data.links" />
    </template>
    <template #footer>
      <div class="flex flex-column md:flex-row justify-content-end">
        <Button
          label="Car Out"
          icon="pi pi-check"
          class="p-button-outlined"
          :disabled="form.processing"
          @click="submit"
        />
      </div>
    </template>
  </Card>
</template>