Skip to content

Commit

Permalink
Merge pull request #108 from jabardigitalservice/feat/detail-complain…
Browse files Browse the repository at this point in the history 
…t-diverted-to-span

feat : slicing layout & integration page detail complaint diverted to span
  • Loading branch information
@marsellavaleria19
marsellavaleria19 authored Sep 21, 2023
2 parents 5ff46bf + 221aeb4 commit a460ba3
Show file tree
Hide file tree
Showing 5 changed files with 391 additions and 39 deletions.
328 changes: 328 additions & 0 deletions components/Aduan/Detail/index.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,328 @@
<template>
<div>
<BaseTabGroup>
<template #tab-list>
<TabBarDetail :list-tab="listTab" />
</template>
<template #tab-panel>
<BaseTabPanel class="px-6 py-4 layout-content h-[calc(100vh-280px)] overflow-y-auto px-[19px]">
<h1 class="font-roboto text-[16px] font-bold text-blue-gray-800 my-4">
Detail Aduan Warga
</h1>
<div class="table-content">
<BaseTableDetail header="Informasi Umum" class="mb-4">
<tr>
<td class="w-[164px] text-lato">
<strong class="text-[10px]">ID Aduan </strong>
</td>
<td>{{ detailComplaint?.complaint_id || '-' }}</td>
</tr>
<tr v-show="listTypeAduanSpanLapor.includes(typeAduanPage)">
<td class="text-lato">
<strong class="text-[10px]">ID SP4N Lapor </strong>
</td>
<td>
<div class="flex items-center">
<div
v-show="!detailComplaintDiverted?.sp4n_id"
:class="{' mr-2 h-2 w-2 rounded-full bg-[#FFB900]': !detailComplaintDiverted?.sp4n_id}"
/>
{{ detailComplaintDiverted?.sp4n_id || 'Belum ada' }}
</div>
</td>
</tr>
<tr>
<td><strong>Tanggal Aduan Masuk</strong></td>
<td>{{ detailComplaint?.created_at }} </td>
</tr>
<tr v-show="typeAduanPage===typeAduan.aduanDialihkanSpanLapor.id">
<td class="w-[175px]">
<strong>Tanggal Diinput ke SP4N</strong>
</td>
<td>
<div class="flex items-center">
<div
v-show="!detailComplaintDiverted?.sp4n_created_at"
:class="{' mr-2 h-2 w-2 rounded-full bg-[#FFB900]': !detailComplaintDiverted?.sp4n_created_at}"
/>
{{ detailComplaintDiverted?.sp4n_created_at || 'Belum ada' }}
</div>
</td>
</tr>
<tr v-show="listTypeAduanStatusAduan.includes(typeAduanPage)">
<td><strong>Status</strong></td>
<td>
<div class="flex items-center">
<div
v-show="detailComplaint?.complaint_status"
:class="[' mr-2 h-2 w-2 rounded-full',getStatusColorHandle(detailComplaint?.complaint_status?.id)]"
/>
{{ detailComplaint?.complaint_status?.name || '-' }}
</div>
</td>
</tr>
<tr v-show="typeAduanPage===typeAduan.aduanMasuk.id && detailComplaint?.complaint_status_note">
<td><strong>Alasan</strong></td>
<td>{{ detailComplaint?.complaint_status_note }}</td>
</tr>
</BaseTableDetail>
<BaseTableDetail v-show="typeAduanPage===typeAduan.aduanDialihkanSpanLapor.id && detailComplaint?.sp4n_id && detailComplaint?.sp4n_created_at" header="Status SPAN Lapor" class="mb-4">
<tr>
<td class="px-2 w-[180px]">
Data Table
</td>
<td class="px-2 py-[6px]">
<jds-button
variant="secondary"
class="!font-medium !text-sm !border-green-600 !text-green-600"
>
Lihat Semua Status
</jds-button>
</td>
</tr>
</BaseTableDetail>
<BaseTableDetail header="Informasi Pelapor" class="mb-4">
<tr>
<td class="w-[180px]">
<strong class="text-[10px]">Nama Lengkap </strong>
</td>
<td>{{ detailComplaint?.user_name || "-" }}</td>
</tr>
<tr>
<td><strong>No. Kontak</strong></td>
<td>{{ detailComplaint?.user_phone || "-" }}</td>
</tr>
<tr>
<td><strong>Email</strong></td>
<td>{{ detailComplaint?.user_email || '-' }}</td>
</tr>
<tr>
<td><strong>Jenis Media Sosial</strong></td>
<td>{{ detailComplaint?.social_media?.name || "-" }}</td>
</tr>
<tr>
<td><strong>Link Akun Media Sosial</strong></td>
<td>{{ detailComplaint?.social_media_link || '-' }}</td>
</tr>
<tr>
<td colspan="2">
<strong>Titik Lokasi Pelapor</strong>
</td>
</tr>
<tr>
<td>Koordinat</td>
<td>{{ getCoordinatHandle() }}</td>
</tr>
</BaseTableDetail>
<BaseTableDetail header="Detail Aduan" class="mb-4">
<tr>
<td class="w-[180px]">
<strong class="text-[10px]">Kategori Aduan </strong>
</td>
<td>{{ detailComplaint?.complaint_category?.name || '-' }}</td>
</tr>
<tr>
<td><strong>Sub Kategori Aduan</strong></td>
<td>{{ detailComplaint?.complaint_subcategory?.name || '-' }}</td>
</tr>
<tr>
<td><strong>Judul Aduan</strong></td>
<td>{{ detailComplaint?.title || '-' }}</td>
</tr>
<tr>
<td><strong>Detail Aduan</strong></td>
<td>{{ detailComplaint?.description || '-' }}</td>
</tr>
<tr>
<td><strong>Lokasi Kejadian</strong></td>
</tr>
<tr>
<td>Kabupaten / Kota </td>
<td>{{ detailComplaint?.city?.name || '-' }}</td>
</tr>
<tr>
<td>Kecamatan</td>
<td>{{ detailComplaint?.district?.name || '-' }}</td>
</tr>
<tr>
<td>Kelurahan</td>
<td>{{ detailComplaint?.subdistrict?.name || '-' }}</td>
</tr>
<tr colspan="2">
<td>Detail Lokasi Kejadian</td>
<td>{{ detailComplaint?.address_detail || '-' }}</td>
</tr>
<tr>
<td colspan="2">
<strong>Titik Lokasi Kejadian</strong>
</td>
</tr>
<tr>
<td>Latitude</td>
<td>{{ detailComplaint?.latitude || '-' }}</td>
</tr>
<tr>
<td>Longitude</td>
<td>{{ detailComplaint?.longitude || '-' }}</td>
</tr>
<tr>
<td class="align-top">
Map
</td>
<td>
<iframe
v-if="detailComplaint?.latitude && detailComplaint?.longitude"
class="rounded-lg"
width="389"
height="245"
frameborder="0"
style="border:0"
referrerpolicy="no-referrer-when-downgrade"
:src="`https://www.google.com/maps/embed/v1/place?key=${$config.googleMapsApiKey}&q=${detailComplaint?.latitude},${detailComplaint?.longitude}`"
/>
<div v-else>
-
</div>
</td>
</tr>
</BaseTableDetail>
<BaseTableDetail header="Bukti Foto">
<tr>
<td class="px-2 w-[180px]">
<strong>{{ listPhoto.length }} Foto</strong>
</td>
<td class="px-2 py-[6px]">
<jds-button
variant="secondary"
class="!font-medium w-[100px] !text-sm !border-green-600 !text-green-600 disabled:opacity-50 disabled:cursor-not-allowed"
:disabled="listPhoto.length === 0"
@click="isShowPopupViewImage = true"
>
Lihat Foto
</jds-button>
</td>
</tr>
</BaseTableDetail>
</div>
</BaseTabPanel>
</template>
</basetabgroup>
<DialogViewImage :list-photo="listPhoto" :show-popup="isShowPopupViewImage" @close="closePopupHandle()" />
</div>
</template>

<script>
import { complaintStatus, typeAduan } from '~/constant/aduan-masuk'
import { formatDate } from '~/utils'
import DialogViewImage from '~/components/Aduan/DialogViewImage'
import TabBarDetail from '~/components/Aduan/TabBar/Detail'
import popupAduanMasuk from '~/mixins/popup-aduan-masuk'

export default {
name: 'DetailAduanMasuk',
components: { DialogViewImage, TabBarDetail },
mixins: [popupAduanMasuk],
props: {
typeAduanPage: {
type: String,
default: ''
}
},
data () {
return {
listTab: [{
name: 'Detail Aduan',
icon: '/icon/icon-aduan/complaint-detail.svg'
}],
selectedTabIndex: 0,
detailComplaint: {},
complaintStatus,
listPhoto: [],
typeAduan
}
},
async fetch () {
try {
const response = await this.$axios.get(`/warga/complaints/${this.$route.params.id}`)
this.detailComplaint = response.data.data
this.detailComplaint.created_at = formatDate(this.detailComplaint?.created_at, 'dd/MM/yyyy - HH:mm')
this.detailComplaint.complaint_status = this.complaintStatus[this.detailComplaint.complaint_status_id]
this.listPhoto = this.detailComplaint.photos
} catch {
this.detailComplaint = {}
}
},
computed: {
// to get type aduan which will show id span lapor && date input span lapor
listTypeAduanSpanLapor () {
return Object.keys(this.typeAduan).filter(item => item.includes(this.typeAduan.aduanDialihkanSpanLapor.id)) // key of object
},
// to get type aduan which will show status aduan
listTypeAduanStatusAduan () {
return Object.keys(this.typeAduan).filter(item => !this.listTypeAduanSpanLapor.includes(item) && item)
}
},
mounted () {
this.selectedTabHandle(0)
},
methods: {
selectedTabHandle (index) {
this.selectedTabIndex = index
},
getStatusHandle (id) {
const result = this.complaintStatus.find(item => item.id === id)
return result
},
getCoordinatHandle () {
if (this.detailComplaint?.longitude && this.detailComplaint?.latitude) {
return `${this.detailComplaint.latitude}, ${this.detailComplaint.longitude}`
} else {
return '-'
}
},
getStatusColorHandle (id) {
let result = ''
switch (id) {
case 'unverified':
result = 'bg-[#FF7500]'
break
case 'verified':
result = 'bg-green-600'
break
case 'failed':
result = 'bg-red-400'
}
return result
},
showViewPhotoDialogHandle (url) {
this.photo.showPopup = true
this.photo.url = 'loading'
this.photo.url = url
}
}
}
</script>

<style scoped>
.layout-content {
scrollbar-color: #e0e0e0 white;
scrollbar-width: thin;
scroll-margin-right: 10px;
}

.layout-content::-webkit-scrollbar {
@apply h-5 w-5;
}

.layout-content::-webkit-scrollbar-track {
@apply bg-transparent;
}

.layout-content::-webkit-scrollbar-thumb {
@apply rounded-xl border-[6px] border-solid border-transparent bg-gray-300 bg-clip-content;
}

.table-content tr td {
@apply px-[8px] pt-[10px] pb-[9px] !important;
}
</style>
4 changes: 2 additions & 2 deletions components/Aduan/DialogViewImage/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<BaseDialog :show-popup="showPopup">
<BaseDialogPanel class="w-[1240px] px-10">
<BaseDialogPanel class="w-[1240px] h-[720px] px-10">
<BaseDialogHeader title="Bukti Foto" />
<swiper
:slides-per-view="3"
Expand All @@ -11,7 +11,7 @@
class="!pt-[50px]"
@swiper="getSwipperRefHandle"
>
<swiper-slide v-for="(item,index) in listPhoto" :key="index" class="!h-[520px]">
<swiper-slide v-for="(item,index) in listPhoto" :key="index" class="!h-[520px] w-[390px]">
<img
:src="item.url"
alt="photo"
Expand Down
6 changes: 3 additions & 3 deletions constant/aduan-masuk.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ export const aduanSpanHeader = [
]

export const typeAduan = {
aduanMasuk: { props: 'aduan-masuk', label: 'Daftar Aduan Masuk', link: '/aduan/aduan-masuk' },
aduanDialihkanSpanLapor: { props: 'aduan-dialihkan-span-lapor', label: 'Daftar Aduan Dialihkan Ke SP4N Lapor', link: '/aduan/dialihkan-ke-span-lapor' },
penentuanKewenangan: { props: 'penentuan-kewenangan', label: 'Daftar Penentuan Kewenangan', link: '/aduan/penentuan-kewenangan' }
aduanMasuk: { props: 'aduan-masuk', label: 'Daftar Aduan Masuk', link: '/aduan/aduan-masuk', id: 'aduanMasuk' },
aduanDialihkanSpanLapor: { props: 'aduan-dialihkan-span-lapor', label: 'Daftar Aduan Dialihkan Ke SP4N Lapor', link: '/aduan/dialihkan-ke-span-lapor', id: 'aduanDialihkanSpanLapor' },
penentuanKewenangan: { props: 'penentuan-kewenangan', label: 'Daftar Penentuan Kewenangan', link: '/aduan/penentuan-kewenangan', id: 'penentuanKewenangan' }
}

export const complaintStatus = Object.freeze({
Expand Down
Loading

0 comments on commit a460ba3

Please sign in to comment.