Skip to content

Commit

Permalink
feat: generate a contract pdf
Browse files Browse the repository at this point in the history
  • Loading branch information
@newarifrh
newarifrh committed Jun 26, 2024
1 parent 1cf15b0 commit cce94db
Showing 1 changed file with 44 additions and 125 deletions.
169 changes: 44 additions & 125 deletions src/views/contract/ListContractView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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();
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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);
}
Expand Down

0 comments on commit cce94db

Please sign in to comment.