From cce94db255b053e725c2831f069fb48752cfd26c Mon Sep 17 00:00:00 2001
From: Arif Rahman Hakim <new.arifrh199@gmail.com>
Date: Wed, 26 Jun 2024 19:42:16 +0800
Subject: [PATCH] feat: generate a contract pdf

---
 src/views/contract/ListContractView.vue | 169 ++++++------------------
 1 file changed, 44 insertions(+), 125 deletions(-)

diff --git a/src/views/contract/ListContractView.vue b/src/views/contract/ListContractView.vue
index 3cda50c..13a0889 100644
--- a/src/views/contract/ListContractView.vue
+++ b/src/views/contract/ListContractView.vue
@@ -3,58 +3,27 @@
     <div style="display: flex; justify-content: space-between">
       <div style="display: flex; align-items: center">
         <span style="margin-right: 20px">Periode</span>
-        <el-select
-          v-model="periodSelected"
-          placeholder="Select"
-          clearable
-          style="width: 240px"
-        >
-          <el-option
-            v-for="item in options"
-            :key="item.value"
-            :label="item.text"
-            :value="item.value"
-          />
+        <el-select v-model="periodSelected" placeholder="Select" clearable style="width: 240px">
+          <el-option v-for="item in options" :key="item.value" :label="item.text" :value="item.value" />
         </el-select>
       </div>
 
       <div style="display: flex; align-items: center">
-        <el-button
-          size="large"
-          round
-          @click="print()"
-          v-if="['TU'].includes(user.team)"
-          ><el-icon :size="20" style="margin-right: 8px"><Printer /></el-icon
-          >Cetak</el-button
-        >
-        <el-button
-          type="primary"
-          size="large"
-          round
-          @click="createContract()"
-          v-if="['ANGGOTA'].includes(user.position)"
-          ><el-icon :size="20" style="margin-right: 8px"><Plus /></el-icon
-          >Buat</el-button
-        >
+        <el-button size="large" round @click="print()" v-if="['TU'].includes(user.team)"><el-icon :size="20"
+            style="margin-right: 8px">
+            <Printer />
+          </el-icon>Cetak</el-button>
+        <el-button type="primary" size="large" round @click="createContract()"
+          v-if="['ANGGOTA'].includes(user.position)"><el-icon :size="20" style="margin-right: 8px">
+            <Plus />
+          </el-icon>Buat</el-button>
       </div>
     </div>
 
     <el-divider />
-    <el-table
-      :default-expand-all="expand"
-      ref="contractsTableRef"
-      v-loading="loading"
-      :row-class-name="contractStatus"
-      :data="filterContracts"
-      row-key="_id"
-      style="width: 100%"
-      @selection-change="handleSelection"
-    >
-      <el-table-column
-        type="selection"
-        :selectable="isSelecetable"
-        v-if="['TU'].includes(user.team)"
-      />
+    <el-table :default-expand-all="expand" ref="contractsTableRef" v-loading="loading" :row-class-name="contractStatus"
+      :data="filterContracts" row-key="_id" style="width: 100%" @selection-change="handleSelection">
+      <el-table-column type="selection" :selectable="isSelecetable" v-if="['TU'].includes(user.team)" />
       <el-table-column type="expand">
         <template #default="props">
           <div class="container-activity">
@@ -70,24 +39,15 @@
 
               <el-table-column label="Aksi">
                 <template #default="scope">
-                  <el-button
-                    v-if="
-                      scope.row.status == 'UNVERIFIED' &&
-                      user.position == 'KETUA' &&
-                      user.team == scope.row.createdBy
-                    "
-                    size="small"
-                    type="primary"
-                    @click="handleVerifyActivity(props.row._id, scope.row._id)"
-                  >
+                  <el-button v-if="
+                    scope.row.status == 'UNVERIFIED' &&
+                    user.position == 'KETUA' &&
+                    user.team == scope.row.createdBy
+                  " size="small" type="primary" @click="handleVerifyActivity(props.row._id, scope.row._id)">
                     Verifikasi
                   </el-button>
-                  <el-button
-                    v-if="user.team == scope.row.createdBy"
-                    size="small"
-                    type="danger"
-                    @click="handleDeleteActivity(props.row._id, scope.row._id)"
-                  >
+                  <el-button v-if="user.team == scope.row.createdBy" size="small" type="danger"
+                    @click="handleDeleteActivity(props.row._id, scope.row._id)">
                     Hapus
                   </el-button>
                 </template>
@@ -100,90 +60,47 @@
       <el-table-column type="index" label="No" />
       <el-table-column label="Nama" sortable prop="partner.name" />
       <el-table-column label="No SPK" prop="number" />
-      <el-table-column
-        label="Periode"
-        sortable
-        prop="period"
-        :filters="options"
-        :filter-method="filterPeriod"
-      />
-      <el-table-column
-        label="Kegiatan"
-        sortable
-        :sort-by="sortActivity"
-        :formatter="activityFormatter"
-      />
+      <el-table-column label="Periode" sortable prop="period" :filters="options" :filter-method="filterPeriod" />
+      <el-table-column label="Kegiatan" sortable :sort-by="sortActivity" :formatter="activityFormatter" />
       <el-table-column label="Tim" :filters="teams" :filter-method="filterTeam">
         <template #default="scope">
-          <el-tag
-            v-if="!teamFormatter(scope.row).includes('-')"
-            style="margin-right: 5px"
-            type="primary"
-            v-for="item in teamFormatter(scope.row)"
-            effect="dark"
-            :key="item"
-            >{{ item }}</el-tag
-          >
+          <el-tag v-if="!teamFormatter(scope.row).includes('-')" style="margin-right: 5px" type="primary"
+            v-for="item in teamFormatter(scope.row)" effect="dark" :key="item">{{ item }}</el-tag>
           <el-text v-else>-</el-text>
         </template>
       </el-table-column>
 
-      <el-table-column
-        sortable
-        :sort-by="sortStatus"
-        label="Verifikasi"
-        :filters="[
-          { text: 'Lengkap', value: 'Lengkap' },
-          { text: 'Sebagian', value: 'Sebagian' },
-          { text: 'Belum', value: 'Belum' },
-        ]"
-        :filter-method="filterStatus"
-      >
+      <el-table-column sortable :sort-by="sortStatus" label="Verifikasi" :filters="[
+        { text: 'Lengkap', value: 'Lengkap' },
+        { text: 'Sebagian', value: 'Sebagian' },
+        { text: 'Belum', value: 'Belum' },
+      ]" :filter-method="filterStatus">
         <template #default="scope">
           <el-tag :type="statusType(scope.row)" effect="dark">{{
             statusText(scope.row)
-          }}</el-tag>
+            }}</el-tag>
         </template>
       </el-table-column>
 
-      <el-table-column
-        sortable
-        :sort-by="sortTotal"
-        label="Total"
-        :formatter="totalFormatter"
-      />
+      <el-table-column sortable :sort-by="sortTotal" label="Total" :formatter="totalFormatter" />
       <el-table-column align="right">
         <template #header>
-          <el-input
-            v-model="search"
-            size="small"
-            placeholder="Type to search"
-          />
+          <el-input v-model="search" size="small" placeholder="Type to search" />
         </template>
         <template #default="scope">
-          <el-button
-            size="small"
-            v-if="['TU'].includes(user.team)"
-            type="primary"
-            @click="handlePrint(scope.$index, scope.row)"
-          >
+          <el-button size="small" v-if="['TU'].includes(user.team)" type="primary"
+            @click="handlePrint(scope.$index, scope.row)">
             Cetak
           </el-button>
-          <el-button
-            v-if="['TU'].includes(user.team)"
-            size="small"
-            type="danger"
-            @click="handleDeleteContract(scope.row._id)"
-          >
+          <el-button v-if="['TU'].includes(user.team)" size="small" type="danger"
+            @click="handleDeleteContract(scope.row._id)">
             Hapus
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <div style="margin-top: 20px">
-      <el-button @click="clearSelection()" v-if="['TU'].includes(user.team)"
-        >Bersihkan Pilihan</el-button
-      >
+      <el-button @click="clearSelection()" v-if="['TU'].includes(user.team)">Bersihkan Pilihan</el-button>
       <el-button @click="clearFilter()">Setel Ulang Penyaringan</el-button>
       <el-button @click="expandData()">Tampilkan Rincian</el-button>
     </div>
@@ -203,6 +120,7 @@ import {
 import { formatDate } from "@/utils/date";
 import { useUserStore } from "@/stores/user";
 import { ElNotification, ElTable } from "element-plus";
+import { BASE_URL } from "@/api/api";
 
 const user = useUserStore();
 const router = useRouter();
@@ -323,12 +241,12 @@ const clearSelection = () => {
 };
 
 const expandData = () => {
-  if(contractsTableRef.value){
+  if (contractsTableRef.value) {
     contractsTableRef.value.data.forEach((row: any) => {
-    contractsTableRef.value!.toggleRowExpansion(row, undefined);
-  });
+      contractsTableRef.value!.toggleRowExpansion(row, undefined);
+    });
   }
- 
+
 };
 
 const filterPeriod = (value: string, row: any) => {
@@ -463,7 +381,7 @@ const handleDeleteContract = (id: string) => {
 };
 
 const handlePrint = (index: number, row: any) => {
-  console.log(index, row);
+  window.location.href = `${BASE_URL}/v1/contracts/${row._id}/print`;
 };
 
 const isSelecetable = (row: any, index: number) => {
@@ -532,6 +450,7 @@ watch(
 .el-table .danger-row {
   --el-table-tr-bg-color: var(--el-color-danger-light-9);
 }
+
 .el-table .success-row {
   --el-table-tr-bg-color: var(--el-color-success-light-9);
 }