apkt-eis/src/components/Pages/Gangguan/Rekap/RGangguan_BerdasarMedia.vue

<template>
  <Filters
    @reset-form="data = []"
    :report-button="true"
    @run-search="() => filterData(filters)"
    class="mb-4"
  >
    <Type1 @update:filters="(value) => (filters = value)" />
  </Filters>
  <div id="data">
    <DxDataGrid
      class="max-h-[calc(100vh-140px)] mb-10"
      :data-source="data"
      :show-column-lines="true"
      :show-row-lines="false"
      :show-borders="true"
      :row-alternation-enabled="true"
      :hover-state-enabled="true"
      @selection-changed="onSelectionChanged"
      :column-width="100"
      @exporting="onExporting"
      :allow-column-resizing="true"
      column-resizing-mode="widget"
      :word-wrap-enabled="true"
    >
      <DxSelection mode="single" />
      <DxPaging :enabled="false" />
      <DxScrolling column-rendering-mode="virtual" mode="virtual" />
      <DxLoadPanel
        :position="position"
        :show-indicator="showIndicator"
        :show-pane="showPane"
        :shading="shading"
        v-if="loading"
        v-model:visible="loading"
        :enabled="true"
      />

      <DxSearchPanel :visible="true" :highlight-case-sensitive="true" />
      <DxExport
        :enabled="true"
        :formats="['pdf', 'xlsx', 'document']"
        :allow-export-selected-data="false"
      />
      <DxColumnFixing :enabled="true" />

      <DxColumn
        css-class="custom-table-column"
        :width="100"
        alignment="center"
        :calculateCellValue="(item: any) => data.findIndex((i) => i == item) + 1"
        data-type="number"
        caption="No"
        data-field="no"
      />
      <DxColumn
        :width="170"
        data-field="media"
        caption="Nama Media"
        alignment="center"
        cell-template="data"
        css-class="custom-table-column"
        header-cell-template="title-header"
      />
      <DxColumn alignment="center" caption="Tanggal" css-class="custom-table-column">
        <DxColumn
          v-for="i in 31"
          :width="150"
          alignment="center"
          :data-field="`tgl${i}`"
          data-type="number"
          :caption="i"
          css-class="custom-table-column"
        />
      </DxColumn>
      <DxColumn
        :width="170"
        alignment="center"
        data-field="total"
        caption="Total"
        css-class="custom-table-column"
      />

      <template #data="{ data }">
        <p class="text-left cursor-pointer">
          {{ data.text }}
        </p>
      </template>
      <template #title-header="{ data }">
        <p class="text-center w-full">
          {{ data.column.caption }}
        </p>
      </template>

      <DxSummary>
        <DxTotalItem
          summary-type="sum"
          display-format="Call PLN 123"
          show-in-column="no"
          css-class="text-white"
        />
        <DxTotalItem
          v-for="i in 31"
          summary-type="sum"
          display-format="{0}"
          :column="`tgl${i}`"
          css-class="text-white"
        />
        <DxTotalItem
          column="total"
          summary-type="sum"
          display-format="{0}"
          css-class="text-white"
        />
      </DxSummary>
    </DxDataGrid>
  </div>
</template>

<script setup lang="ts">
import Filters from '@/components/Form/Filters.vue'
import Type1 from '@/components/Form/FiltersType/Type1.vue'
import { ref } from 'vue'
import { DxDataGrid } from 'devextreme-vue'
import {
  DxColumn,
  DxColumnFixing,
  DxExport,
  DxLoadPanel,
  DxPaging,
  DxScrolling,
  DxSearchPanel,
  DxSelection,
  DxSummary,
  DxTotalItem
} from 'devextreme-vue/data-grid'
import { jsPDF } from 'jspdf'
import { exportDataGrid as exportToPdf } from 'devextreme/pdf_exporter'
import { exportDataGrid as exportToExcel } from 'devextreme/excel_exporter'
import { saveAs } from 'file-saver'
import { Workbook } from 'exceljs'
import { useQuery } from '@vue/apollo-composable'
import gql from 'graphql-tag'

const position = { of: '#data' }
const showIndicator = ref(true)
const shading = ref(true)
const showPane = ref(true)
const onExporting = (e: any) => {
  if (e.format === 'pdf') {
    const doc = new jsPDF()

    exportToPdf({
      jsPDFDocument: doc,
      component: e.component,
      indent: 5
    }).then(() => {
      doc.save(`.pdf`)
    })
  } else {
    const workbook = new Workbook()
    const worksheet = workbook.addWorksheet('Employees')

    exportToExcel({
      component: e.component,
      worksheet,
      autoFilterEnabled: true
    }).then(() => {
      workbook.xlsx.writeBuffer().then((buffer: any) => {
        saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'DataGrid.xlsx')
      })
    })

    e.cancel = true
  }
}

const onSelectionChanged = ({ selectedRowsData }: any) => {
  const data = selectedRowsData[0]
  console.log(data)
}

const data = ref<any[]>([])
const GET_REKAPITULASI_BERDASARKAN_MEDIA = gql`
  query rekapitulasiGangguanBerdasarkanMedia(
    $dateFrom: Date!
    $dateTo: Date!
    $posko: Int!
    $idUid: Int!
    $idUp3: Int!
  ) {
    rekapitulasiGangguanBerdasarkanMedia(
      dateFrom: $dateFrom
      dateTo: $dateTo
      posko: $posko
      idUid: $idUid
      idUp3: $idUp3
    ) {
      media
      total
      tgl1
      tgl10
      tgl11
      tgl12
      tgl13
      tgl14
      tgl15
      tgl16
      tgl17
      tgl18
      tgl19
      tgl2
      tgl20
      tgl21
      tgl22
      tgl23
      tgl24
      tgl25
      tgl26
      tgl27
      tgl28
      tgl29
      tgl3
      tgl30
      tgl31
      tgl4
      tgl5
      tgl6
      tgl7
      tgl8
      tgl9
    }
  }
`

const { onResult, onError, loading, refetch } = useQuery(GET_REKAPITULASI_BERDASARKAN_MEDIA, {
  dateFrom: new Date('2023-10-01').toISOString().slice(0, 10),
  dateTo: new Date('2023-10-01').toISOString().slice(0, 10),
  posko: 0,
  idUid: 0,
  idUp3: 0
})

const filterData = (params: any) => {
  const dateValue = params.periode.split(' s/d ')
  const { posko, uid, up3 } = params
  refetch({
    dateFrom: dateValue[0]
      ? dateValue[0].split('-').reverse().join('-')
      : new Date().toISOString().slice(0, 10),
    dateTo: dateValue[1]
      ? dateValue[1].split('-').reverse().join('-')
      : new Date().toISOString().slice(0, 10),
    posko: posko ? posko.id : 0,
    idUid: uid ? uid.id : 0,
    idUp3: up3 ? up3.id : 0
  })

  onResult((queryResult) => {
    if (queryResult.data != undefined) {
      data.value = queryResult.data.rekapitulasiGangguanBerdasarkanMedia
    }
    console.log(queryResult.data)
    console.log(queryResult.loading)
    console.log(queryResult.networkStatus)
  })
  onError((error) => {
    console.log(error)
  })
}

const filters = ref()
</script>