KoPKB/My-KOPKB
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

DONE: sso into e-vote; WIP: feedback modules

Browse Source
This commit is contained in:
ISMAIL MASSERAN
2026-07-13 12:15:44 +08:00
parent a11b75729a
commit 324b7facf1
53 changed files with 1005 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fe/src/modules/external-system/composables/useExternalSystemDetail.ts
+26 -6
View File
@@ -1,32 +1,52 @@
import { computed, ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useExternalSystemList } from './useExternalSystemList'
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
import { getExternalSystem } from '../services/external-system.service'
import {
getExternalSystemStatus,
isExternalSystemAccessible,
} from '../utils/external-system.utils'
import type { ExternalSystem } from '../types/external-system.types'
export function useExternalSystemDetail() {
const route = useRoute()
const { getSystemById } = useExternalSystemList()
const loading = ref(false)
const error = ref<string | null>(null)
const system = ref<ExternalSystem | null>(null)
const systemId = computed(() => String(route.params.id ?? ''))
const system = computed(() => getSystemById(systemId.value) ?? null)
const status = computed(() => (system.value ? getExternalSystemStatus(system.value) : null))
const isAccessible = computed(() =>
system.value ? isExternalSystemAccessible(system.value) : false,
)
async function fetchSystem(id: string) {
loading.value = true
error.value = null
try {
system.value = await getExternalSystem(id)
} catch (err) {
system.value = null
error.value = getApiErrorMessage(err, 'Sistem luaran tidak dijumpai.')
} finally {
loading.value = false
}
}
watch(
systemId,
() => {
error.value = system.value ? null : 'Sistem luaran tidak dijumpai.'
(id) => {
if (!id) {
system.value = null
error.value = 'Sistem luaran tidak dijumpai.'
return
}
fetchSystem(id)
},
{ immediate: true },
)
fe/src/modules/external-system/composables/useExternalSystemLaunch.ts
+49
View File
@@ -0,0 +1,49 @@
import { ref } from 'vue'
import Swal from 'sweetalert2'
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
import { launchExternalSystemSso } from '../services/external-system.service'
import { isExternalSystemAccessible } from '../utils/external-system.utils'
import type { ExternalSystem } from '../types/external-system.types'
export function useExternalSystemLaunch() {
const launching = ref(false)
async function launchExternalSystem(system: ExternalSystem) {
if (!isExternalSystemAccessible(system) || launching.value) {
return
}
launching.value = true
try {
if (system.sso_enabled) {
const response = await launchExternalSystemSso(system.code)
window.open(
response.data.launch_url,
system.opens_in_new_tab ? '_blank' : '_self',
'noopener,noreferrer',
)
return
}
window.open(
system.url,
system.opens_in_new_tab ? '_blank' : '_self',
'noopener,noreferrer',
)
} catch (error) {
await Swal.fire({
icon: 'error',
title: 'Gagal membuka sistem',
text: getApiErrorMessage(error, 'Tidak dapat membuka sistem luaran.'),
})
} finally {
launching.value = false
}
}
return {
launching,
launchExternalSystem,
}
}
fe/src/modules/external-system/composables/useExternalSystemList.ts
+28 -5
View File
@@ -1,5 +1,6 @@
import { computed, ref } from 'vue'
import { dummyExternalSystems } from '../data/dummy-external-systems'
import { computed, onMounted, ref } from 'vue'
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
import { listExternalSystems } from '../services/external-system.service'
import {
externalSystemStatusLabel,
getExternalSystemStatus,
@@ -9,14 +10,16 @@ import type { ExternalSystem } from '../types/external-system.types'
export function useExternalSystemList() {
const search = ref('')
const loading = ref(false)
const error = ref<string | null>(null)
const allSystems = ref<ExternalSystem[]>([])
const systems = computed(() => {
const query = search.value.trim().toLowerCase()
if (!query) {
return dummyExternalSystems
return allSystems.value
}
return dummyExternalSystems.filter((system) => {
return allSystems.value.filter((system) => {
const haystack = [
system.name,
system.code,
@@ -35,14 +38,34 @@ export function useExternalSystemList() {
)
function getSystemById(id: string): ExternalSystem | undefined {
return dummyExternalSystems.find((system) => system.id === id)
return allSystems.value.find((system) => system.id === id)
}
async function fetchSystems() {
loading.value = true
error.value = null
try {
allSystems.value = await listExternalSystems()
} catch (err) {
error.value = getApiErrorMessage(err, 'Gagal memuatkan senarai sistem luaran.')
allSystems.value = []
} finally {
loading.value = false
}
}
onMounted(() => {
fetchSystems()
})
return {
systems,
search,
loading,
error,
availableCount,
getSystemById,
fetchSystems,
}
}
fe/src/modules/external-system/data/dummy-external-systems.ts
-38
View File
@@ -1,38 +0,0 @@
import type { ExternalSystem } from '../types/external-system.types'
export const dummyExternalSystems: ExternalSystem[] = [
{
id: 'ext-001',
code: 'portal-mykopkb',
name: 'Portal Ahli KOPKB',
description:
'Sistem utama keahlian Koperasi Permodalan Kelantan Berhad untuk semakan dividen, penyata dan maklumat ahli.',
url: 'https://mykopkb.koppkb.com',
icon: 'Users',
is_active: true,
starts_at: '2026-01-01T00:00:00+08:00',
ends_at: null,
opens_in_new_tab: true,
contact_email: 'dev_kopkb@gmail.com',
notes: 'Log masuk menggunakan e-mel berdaftar ahli KOPKB.',
created_at: '2026-01-15T09:00:00+08:00',
updated_at: '2026-06-01T14:30:00+08:00',
},
{
id: 'ext-002',
code: 'e-vote',
name: 'Sistem Pengundian AGM KOPKB',
description:
'Platform pengundian dalam talian untuk Mesyuarat Agung Tahunan. Hanya tersedia semasa tempoh pengundian.',
url: 'https://e-vote.erahn.com.my/login',
icon: 'Vote',
is_active: true,
starts_at: '2026-05-01T08:00:00+08:00',
ends_at: null,
opens_in_new_tab: true,
contact_email: 'dev_kopkb@gmail.com',
notes: 'Sila lengkapkan profil sebelum mengundi.',
created_at: '2026-05-20T10:00:00+08:00',
updated_at: '2026-06-28T11:15:00+08:00',
},
]
fe/src/modules/external-system/pages/ExternalSystemDetail.vue
+4 -3
View File
@@ -6,15 +6,16 @@ import { Box } from '@/components/ui/box'
import { Button } from '@/components/ui/button'
import { Lucide } from '@/components/ui/lucide'
import { useExternalSystemDetail } from '../composables/useExternalSystemDetail'
import { useExternalSystemLaunch } from '../composables/useExternalSystemLaunch'
import {
externalSystemStatusLabel,
externalSystemStatusVariant,
formatExternalSystemDateTime,
openExternalSystem,
} from '../utils/external-system.utils'
const router = useRouter()
const { system, error, status, isAccessible } = useExternalSystemDetail()
const { launching, launchExternalSystem } = useExternalSystemLaunch()
function goBack() {
router.push({ name: 'list-external-systems' })
@@ -22,7 +23,7 @@ function goBack() {
function handleOpen() {
if (!system.value) return
openExternalSystem(system.value)
launchExternalSystem(system.value)
}
</script>
@@ -93,7 +94,7 @@ function handleOpen() {
<Button
look="outline"
variant="primary"
:disabled="!isAccessible"
:disabled="!isAccessible || launching"
@click="handleOpen"
>
Buka Sistem
fe/src/modules/external-system/pages/ExternalSystemList.vue
+12 -5
View File
@@ -7,24 +7,25 @@ import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Lucide } from '@/components/ui/lucide'
import { useExternalSystemList } from '../composables/useExternalSystemList'
import { useExternalSystemLaunch } from '../composables/useExternalSystemLaunch'
import {
externalSystemStatusLabel,
externalSystemStatusVariant,
formatExternalSystemDateTime,
getExternalSystemStatus,
openExternalSystem,
} from '../utils/external-system.utils'
import type { ExternalSystem } from '../types/external-system.types'
const router = useRouter()
const { systems, search, loading, availableCount } = useExternalSystemList()
const { systems, search, loading, error, availableCount } = useExternalSystemList()
const { launching, launchExternalSystem } = useExternalSystemLaunch()
function goToDetail(system: ExternalSystem) {
router.push({ name: 'view-external-system', params: { id: system.id } })
}
function handleOpen(system: ExternalSystem) {
openExternalSystem(system)
launchExternalSystem(system)
}
</script>
@@ -39,6 +40,11 @@ function handleOpen(system: ExternalSystem) {
</Badge>
</div>
<AlertRoot v-if="error" class="mb-6" variant="danger">
<AlertTitle>Ralat</AlertTitle>
<AlertDescription>{{ error }}</AlertDescription>
</AlertRoot>
<div class="mt-5 grid grid-cols-12 gap-x-6 gap-y-8">
<div class="col-span-12 mt-2 flex flex-wrap items-center sm:flex-nowrap">
<div class="w-full sm:w-auto">
@@ -82,7 +88,8 @@ function handleOpen(system: ExternalSystem) {
<div class="mt-5 flex flex-col gap-2 sm:flex-row">
<Button class="w-full sm:flex-1" look="outline" variant="primary"
:disabled="getExternalSystemStatus(system) !== 'available'" @click="handleOpen(system)">
:disabled="getExternalSystemStatus(system) !== 'available' || launching"
@click="handleOpen(system)">
Buka Sistem
<Lucide icon="ExternalLink" class="size-4" />
</Button>
@@ -94,7 +101,7 @@ function handleOpen(system: ExternalSystem) {
</Box>
</template>
<Box v-else class="col-span-12 p-8 text-center">
<Box v-else-if="!loading" class="col-span-12 p-8 text-center">
<Lucide icon="SearchX" class="mx-auto size-8 opacity-40" />
<div class="mt-3 text-base font-medium">Tiada sistem dijumpai</div>
<p class="mt-1 text-sm opacity-70">Cuba istilah carian yang berbeza.</p>
fe/src/modules/external-system/services/external-system.service.ts
+41
View File
@@ -0,0 +1,41 @@
import { api } from '@/core/services/api'
import type {
ExternalSystem,
ExternalSystemListResponse,
ExternalSystemResponse,
ExternalSystemSsoLaunchResponse,
} from '../types/external-system.types'
export async function listExternalSystems(): Promise<ExternalSystem[]> {
const { data } = await api.get<ExternalSystemListResponse>('/v1/external-systems')
if (!data.success) {
throw new Error(data.message ?? 'Gagal memuatkan senarai sistem luaran.')
}
return data.data
}
export async function getExternalSystem(id: string): Promise<ExternalSystem> {
const { data } = await api.get<ExternalSystemResponse>(`/v1/external-systems/${id}`)
if (!data.success) {
throw new Error(data.message ?? 'Sistem luaran tidak dijumpai.')
}
return data.data
}
export async function launchExternalSystemSso(
systemCode: string,
): Promise<ExternalSystemSsoLaunchResponse> {
const { data } = await api.post<ExternalSystemSsoLaunchResponse>(
`/v1/external-systems/${systemCode}/sso/launch`,
)
if (!data.success) {
throw new Error(data.message ?? 'Gagal membuka sistem.')
}
return data
}
fe/src/modules/external-system/types/external-system.types.ts
+22
View File
@@ -13,8 +13,30 @@ export type ExternalSystem = {
starts_at: string | null
ends_at: string | null
opens_in_new_tab: boolean
sso_enabled: boolean
contact_email: string | null
notes: string | null
created_at: string
updated_at: string
}
export type ExternalSystemSsoLaunchResponse = {
success: boolean
message?: string
data: {
launch_url: string
expires_at: string
}
}
export type ExternalSystemListResponse = {
success: boolean
message?: string
data: ExternalSystem[]
}
export type ExternalSystemResponse = {
success: boolean
message?: string
data: ExternalSystem
}