feat(patient): address integration to backend apis
feat(patient): add newborn status field and validation - Add radio button component for newborn status selection - Update patient schema with newborn status validation - Remove deprecated alias field from person model - Refactor disability type handling in patient schema fix(patient): correct address comparison logic and schema Update the patient address comparison to use boolean instead of string '1' and modify the schema to transform the string value to boolean. This ensures consistent type usage throughout the application. feat(models): add village and district model interfaces Add new model interfaces for Village and District with their respective generator functions. These models will be used to handle administrative division data in the application. feat(address): implement dynamic province selection with caching - Add province service for CRUD operations - Create useProvinces composable with caching and loading states - Update select-province component to use dynamic data - Export SelectItem interface for type consistency - Improve combobox styling and accessibility feat(address-form): implement dynamic regency selection with caching - Add new regency service for CRUD operations - Create useRegencies composable with caching and loading states - Update SelectRegency component to use dynamic data based on province selection - Improve placeholder and disabled state handling feat(address-form): implement dynamic district selection - Add district service for CRUD operations - Create useDistricts composable with caching and loading states - Update SelectDistrict component to use dynamic data - Remove hardcoded district options and implement regency-based filtering feat(address-form): implement dynamic village selection with caching - Add village service for CRUD operations - Create useVillages composable with caching and loading states - Update SelectVillage component to fetch villages based on district - Remove hardcoded village options in favor of API-driven data feat(address-form): improve address selection with debouncing and request deduplication - Add debouncing to prevent rapid API calls when selecting addresses - Implement request deduplication to avoid duplicate API calls - Add delayed form reset to ensure proper composable cleanup - Add isUserAction flag to force refresh when user changes selection
This commit is contained in:
Khafid Prayoga
@@ -0,0 +1,180 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
import type { District } from '~/models/district'
|
||||
import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
|
||||
import { toTitleCase } from '~/lib/utils'
|
||||
import * as districtService from '~/services/district.service'
|
||||
|
||||
// Global cache untuk districts berdasarkan regency code
|
||||
const districtsCache = ref<Map<string, District[]>>(new Map())
|
||||
const loadingStates = ref<Map<string, boolean>>(new Map())
|
||||
const errorStates = ref<Map<string, string | null>>(new Map())
|
||||
|
||||
export function useDistricts(regencyCode: Ref<string | undefined> | string | undefined) {
|
||||
// Convert regencyCode ke ref jika bukan ref
|
||||
const regencyCodeRef = typeof regencyCode === 'string' || regencyCode === undefined ? ref(regencyCode) : regencyCode
|
||||
|
||||
// Computed untuk mendapatkan districts berdasarkan regency code
|
||||
const districts = computed(() => {
|
||||
const code = regencyCodeRef.value
|
||||
if (!code) return []
|
||||
return districtsCache.value.get(code) || []
|
||||
})
|
||||
|
||||
// Computed untuk loading state
|
||||
const isLoading = computed(() => {
|
||||
const code = regencyCodeRef.value
|
||||
if (!code) return false
|
||||
return loadingStates.value.get(code) || false
|
||||
})
|
||||
|
||||
// Computed untuk error state
|
||||
const error = computed(() => {
|
||||
const code = regencyCodeRef.value
|
||||
if (!code) return null
|
||||
return errorStates.value.get(code) || null
|
||||
})
|
||||
|
||||
// Computed untuk format SelectItem
|
||||
const districtOptions = computed<SelectItem[]>(() => {
|
||||
return districts.value.map((district) => ({
|
||||
label: toTitleCase(district.name),
|
||||
value: district.code,
|
||||
searchValue: `${district.code} ${district.name}`.trim(),
|
||||
}))
|
||||
})
|
||||
|
||||
// Function untuk fetch districts berdasarkan regency code
|
||||
async function fetchDistricts(regencyCodeParam?: string, forceRefresh = false, isUserAction = false) {
|
||||
const code = regencyCodeParam || regencyCodeRef.value
|
||||
if (!code) return
|
||||
|
||||
// Jika user action atau force refresh, selalu fetch
|
||||
// Jika bukan user action dan sudah ada cache, skip
|
||||
if (!isUserAction && !forceRefresh && districtsCache.value.has(code)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Jika sedang loading, skip untuk mencegah duplicate calls
|
||||
if (loadingStates.value.get(code)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Tambahan: Cek apakah ada pending request untuk code yang sama
|
||||
const pendingKey = `pending_${code}`
|
||||
if (loadingStates.value.get(pendingKey)) {
|
||||
return
|
||||
}
|
||||
|
||||
loadingStates.value.set(pendingKey, true)
|
||||
|
||||
loadingStates.value.set(code, true)
|
||||
errorStates.value.set(code, null)
|
||||
|
||||
try {
|
||||
const response = await districtService.getList({
|
||||
'page-size': '50',
|
||||
sort: 'name:asc',
|
||||
regency_code: code,
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
const districtsData = response.body.data || []
|
||||
districtsCache.value.set(code, districtsData)
|
||||
} else {
|
||||
errorStates.value.set(code, 'Gagal memuat data kecamatan')
|
||||
console.error('Failed to fetch districts:', response)
|
||||
}
|
||||
} catch (err) {
|
||||
errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kecamatan')
|
||||
console.error('Error fetching districts:', err)
|
||||
} finally {
|
||||
loadingStates.value.set(code, false)
|
||||
loadingStates.value.delete(pendingKey)
|
||||
}
|
||||
}
|
||||
|
||||
// Function untuk mencari district berdasarkan code
|
||||
function getDistrictByCode(code: string): District | undefined {
|
||||
const regencyCode = regencyCodeRef.value
|
||||
if (!regencyCode) return undefined
|
||||
|
||||
const districtsForRegency = districtsCache.value.get(regencyCode) || []
|
||||
return districtsForRegency.find((district) => district.code === code)
|
||||
}
|
||||
|
||||
// Function untuk mencari district berdasarkan name
|
||||
function getDistrictByName(name: string): District | undefined {
|
||||
const regencyCode = regencyCodeRef.value
|
||||
if (!regencyCode) return undefined
|
||||
|
||||
const districtsForRegency = districtsCache.value.get(regencyCode) || []
|
||||
return districtsForRegency.find((district) => district.name.toLowerCase() === name.toLowerCase())
|
||||
}
|
||||
|
||||
// Function untuk clear cache regency tertentu
|
||||
function clearCache(regencyCodeParam?: string) {
|
||||
const code = regencyCodeParam || regencyCodeRef.value
|
||||
if (code) {
|
||||
districtsCache.value.delete(code)
|
||||
loadingStates.value.delete(code)
|
||||
errorStates.value.delete(code)
|
||||
}
|
||||
}
|
||||
|
||||
// Function untuk clear semua cache
|
||||
function clearAllCache() {
|
||||
districtsCache.value.clear()
|
||||
loadingStates.value.clear()
|
||||
errorStates.value.clear()
|
||||
}
|
||||
|
||||
// Function untuk refresh data
|
||||
function refreshDistricts(regencyCodeParam?: string) {
|
||||
const code = regencyCodeParam || regencyCodeRef.value
|
||||
if (code) {
|
||||
return fetchDistricts(code, true)
|
||||
}
|
||||
}
|
||||
|
||||
// Debounced regency code untuk mencegah multiple calls
|
||||
const debouncedRegencyCode = refDebounced(regencyCodeRef, 100)
|
||||
|
||||
// Watch perubahan regency code untuk auto fetch
|
||||
watch(
|
||||
debouncedRegencyCode,
|
||||
(newCode, oldCode) => {
|
||||
if (newCode && newCode !== oldCode) {
|
||||
// Jika ada oldCode berarti user action (ganti pilihan)
|
||||
const isUserAction = !!oldCode
|
||||
fetchDistricts(newCode, false, isUserAction)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
return {
|
||||
// Data
|
||||
districts: readonly(districts),
|
||||
districtOptions,
|
||||
|
||||
// State
|
||||
isLoading: readonly(isLoading),
|
||||
error: readonly(error),
|
||||
|
||||
// Methods
|
||||
fetchDistricts,
|
||||
refreshDistricts,
|
||||
getDistrictByCode,
|
||||
getDistrictByName,
|
||||
clearCache,
|
||||
clearAllCache,
|
||||
}
|
||||
}
|
||||
|
||||
// Export untuk direct access ke cached data (jika diperlukan)
|
||||
export const useDistrictsCache = () => ({
|
||||
districtsCache: readonly(districtsCache),
|
||||
loadingStates: readonly(loadingStates),
|
||||
errorStates: readonly(errorStates),
|
||||
})
|
||||
@@ -0,0 +1,113 @@
|
||||
import { ref, computed } from 'vue'
|
||||
import type { Province } from '~/models/province'
|
||||
import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
|
||||
import { toTitleCase } from '~/lib/utils'
|
||||
import * as provinceService from '~/services/province.service'
|
||||
|
||||
// Global state untuk caching
|
||||
const provincesCache = ref<Province[]>([])
|
||||
const isLoading = ref(false)
|
||||
const isInitialized = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
|
||||
export function useProvinces() {
|
||||
// Computed untuk format SelectItem
|
||||
const provinceOptions = computed<SelectItem[]>(() => {
|
||||
return provincesCache.value.map(province => ({
|
||||
label: toTitleCase(province.name),
|
||||
value: province.code,
|
||||
// code: province.code,
|
||||
searchValue: `${province.code} ${province.name}`.trim() // Untuk search internal combobox
|
||||
}))
|
||||
})
|
||||
|
||||
// Function untuk fetch data provinces
|
||||
async function fetchProvinces(forceRefresh = false) {
|
||||
// Jika sudah ada data dan tidak force refresh, skip
|
||||
if (isInitialized.value && !forceRefresh) {
|
||||
return
|
||||
}
|
||||
|
||||
// Jika sedang loading, skip untuk mencegah duplicate calls
|
||||
if (isLoading.value) {
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const response = await provinceService.getList({
|
||||
'page-no-limit': '1',
|
||||
'sort': 'name:asc'
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
provincesCache.value = response.body.data || []
|
||||
isInitialized.value = true
|
||||
} else {
|
||||
error.value = 'Gagal memuat data provinsi'
|
||||
console.error('Failed to fetch provinces:', response)
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = 'Terjadi kesalahan saat memuat data provinsi'
|
||||
console.error('Error fetching provinces:', err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Function untuk mencari province berdasarkan code
|
||||
function getProvinceByCode(code: string): Province | undefined {
|
||||
return provincesCache.value.find(province => province.code === code)
|
||||
}
|
||||
|
||||
// Function untuk mencari province berdasarkan name
|
||||
function getProvinceByName(name: string): Province | undefined {
|
||||
return provincesCache.value.find(province =>
|
||||
province.name.toLowerCase() === name.toLowerCase()
|
||||
)
|
||||
}
|
||||
|
||||
// Function untuk clear cache (jika diperlukan)
|
||||
function clearCache() {
|
||||
provincesCache.value = []
|
||||
isInitialized.value = false
|
||||
error.value = null
|
||||
}
|
||||
|
||||
// Function untuk refresh data
|
||||
function refreshProvinces() {
|
||||
return fetchProvinces(true)
|
||||
}
|
||||
|
||||
// Auto fetch saat composable pertama kali digunakan
|
||||
if (!isInitialized.value && !isLoading.value) {
|
||||
fetchProvinces()
|
||||
}
|
||||
|
||||
return {
|
||||
// Data
|
||||
provinces: readonly(provincesCache),
|
||||
provinceOptions,
|
||||
|
||||
// State
|
||||
isLoading: readonly(isLoading),
|
||||
isInitialized: readonly(isInitialized),
|
||||
error: readonly(error),
|
||||
|
||||
// Methods
|
||||
fetchProvinces,
|
||||
refreshProvinces,
|
||||
getProvinceByCode,
|
||||
getProvinceByName,
|
||||
clearCache,
|
||||
}
|
||||
}
|
||||
|
||||
// Export untuk direct access ke cached data (jika diperlukan)
|
||||
export const useProvincesCache = () => ({
|
||||
provinces: readonly(provincesCache),
|
||||
isLoading: readonly(isLoading),
|
||||
isInitialized: readonly(isInitialized),
|
||||
})
|
||||
@@ -0,0 +1,181 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
import type { Regency } from '~/models/regency'
|
||||
import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
|
||||
import { toTitleCase } from '~/lib/utils'
|
||||
import * as regencyService from '~/services/regency.service'
|
||||
|
||||
// Global cache untuk regencies berdasarkan province code
|
||||
const regenciesCache = ref<Map<string, Regency[]>>(new Map())
|
||||
const loadingStates = ref<Map<string, boolean>>(new Map())
|
||||
const errorStates = ref<Map<string, string | null>>(new Map())
|
||||
|
||||
export function useRegencies(provinceCode: Ref<string | undefined> | string | undefined) {
|
||||
// Convert provinceCode ke ref jika bukan ref
|
||||
const provinceCodeRef =
|
||||
typeof provinceCode === 'string' || provinceCode === undefined ? ref(provinceCode) : provinceCode
|
||||
|
||||
// Computed untuk mendapatkan regencies berdasarkan province code
|
||||
const regencies = computed(() => {
|
||||
const code = provinceCodeRef.value
|
||||
if (!code) return []
|
||||
return regenciesCache.value.get(code) || []
|
||||
})
|
||||
|
||||
// Computed untuk loading state
|
||||
const isLoading = computed(() => {
|
||||
const code = provinceCodeRef.value
|
||||
if (!code) return false
|
||||
return loadingStates.value.get(code) || false
|
||||
})
|
||||
|
||||
// Computed untuk error state
|
||||
const error = computed(() => {
|
||||
const code = provinceCodeRef.value
|
||||
if (!code) return null
|
||||
return errorStates.value.get(code) || null
|
||||
})
|
||||
|
||||
// Computed untuk format SelectItem
|
||||
const regencyOptions = computed<SelectItem[]>(() => {
|
||||
return regencies.value.map((regency) => ({
|
||||
label: toTitleCase(regency.name),
|
||||
value: regency.code,
|
||||
searchValue: `${regency.code} ${regency.name}`.trim(),
|
||||
}))
|
||||
})
|
||||
|
||||
// Function untuk fetch regencies berdasarkan province code
|
||||
async function fetchRegencies(provinceCodeParam?: string, forceRefresh = false, isUserAction = false) {
|
||||
const code = provinceCodeParam || provinceCodeRef.value
|
||||
if (!code) return
|
||||
|
||||
// Jika user action atau force refresh, selalu fetch
|
||||
// Jika bukan user action dan sudah ada cache, skip
|
||||
if (!isUserAction && !forceRefresh && regenciesCache.value.has(code)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Jika sedang loading, skip untuk mencegah duplicate calls
|
||||
if (loadingStates.value.get(code)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Tambahan: Cek apakah ada pending request untuk code yang sama
|
||||
const pendingKey = `pending_${code}`
|
||||
if (loadingStates.value.get(pendingKey)) {
|
||||
return
|
||||
}
|
||||
|
||||
loadingStates.value.set(pendingKey, true)
|
||||
|
||||
loadingStates.value.set(code, true)
|
||||
errorStates.value.set(code, null)
|
||||
|
||||
try {
|
||||
const response = await regencyService.getList({
|
||||
'page-size': '50',
|
||||
sort: 'name:asc',
|
||||
province_code: code,
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
const regenciesData = response.body.data || []
|
||||
regenciesCache.value.set(code, regenciesData)
|
||||
} else {
|
||||
errorStates.value.set(code, 'Gagal memuat data kabupaten/kota')
|
||||
console.error('Failed to fetch regencies:', response)
|
||||
}
|
||||
} catch (err) {
|
||||
errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kabupaten/kota')
|
||||
console.error('Error fetching regencies:', err)
|
||||
} finally {
|
||||
loadingStates.value.set(code, false)
|
||||
loadingStates.value.delete(pendingKey)
|
||||
}
|
||||
}
|
||||
|
||||
// Function untuk mencari regency berdasarkan code
|
||||
function getRegencyByCode(code: string): Regency | undefined {
|
||||
const provinceCode = provinceCodeRef.value
|
||||
if (!provinceCode) return undefined
|
||||
|
||||
const regenciesForProvince = regenciesCache.value.get(provinceCode) || []
|
||||
return regenciesForProvince.find((regency) => regency.code === code)
|
||||
}
|
||||
|
||||
// Function untuk mencari regency berdasarkan name
|
||||
function getRegencyByName(name: string): Regency | undefined {
|
||||
const provinceCode = provinceCodeRef.value
|
||||
if (!provinceCode) return undefined
|
||||
|
||||
const regenciesForProvince = regenciesCache.value.get(provinceCode) || []
|
||||
return regenciesForProvince.find((regency) => regency.name.toLowerCase() === name.toLowerCase())
|
||||
}
|
||||
|
||||
// Function untuk clear cache province tertentu
|
||||
function clearCache(provinceCodeParam?: string) {
|
||||
const code = provinceCodeParam || provinceCodeRef.value
|
||||
if (code) {
|
||||
regenciesCache.value.delete(code)
|
||||
loadingStates.value.delete(code)
|
||||
errorStates.value.delete(code)
|
||||
}
|
||||
}
|
||||
|
||||
// Function untuk clear semua cache
|
||||
function clearAllCache() {
|
||||
regenciesCache.value.clear()
|
||||
loadingStates.value.clear()
|
||||
errorStates.value.clear()
|
||||
}
|
||||
|
||||
// Function untuk refresh data
|
||||
function refreshRegencies(provinceCodeParam?: string) {
|
||||
const code = provinceCodeParam || provinceCodeRef.value
|
||||
if (code) {
|
||||
return fetchRegencies(code, true)
|
||||
}
|
||||
}
|
||||
|
||||
// Debounced province code untuk mencegah multiple calls
|
||||
const debouncedProvinceCode = refDebounced(provinceCodeRef, 100)
|
||||
|
||||
// Watch perubahan province code untuk auto fetch
|
||||
watch(
|
||||
debouncedProvinceCode,
|
||||
(newCode, oldCode) => {
|
||||
if (newCode && newCode !== oldCode) {
|
||||
// Jika ada oldCode berarti user action (ganti pilihan)
|
||||
const isUserAction = !!oldCode
|
||||
fetchRegencies(newCode, false, isUserAction)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
return {
|
||||
// Data
|
||||
regencies: readonly(regencies),
|
||||
regencyOptions,
|
||||
|
||||
// State
|
||||
isLoading: readonly(isLoading),
|
||||
error: readonly(error),
|
||||
|
||||
// Methods
|
||||
fetchRegencies,
|
||||
refreshRegencies,
|
||||
getRegencyByCode,
|
||||
getRegencyByName,
|
||||
clearCache,
|
||||
clearAllCache,
|
||||
}
|
||||
}
|
||||
|
||||
// Export untuk direct access ke cached data (jika diperlukan)
|
||||
export const useRegenciesCache = () => ({
|
||||
regenciesCache: readonly(regenciesCache),
|
||||
loadingStates: readonly(loadingStates),
|
||||
errorStates: readonly(errorStates),
|
||||
})
|
||||
@@ -0,0 +1,181 @@
|
||||
import { ref, computed, watch } from 'vue'
|
||||
import { refDebounced } from '@vueuse/core'
|
||||
import type { Village } from '~/models/village'
|
||||
import type { SelectItem } from '~/components/pub/my-ui/form/select.vue'
|
||||
import { toTitleCase } from '~/lib/utils'
|
||||
import * as villageService from '~/services/village.service'
|
||||
|
||||
// Global cache untuk villages berdasarkan district code
|
||||
const villagesCache = ref<Map<string, Village[]>>(new Map())
|
||||
const loadingStates = ref<Map<string, boolean>>(new Map())
|
||||
const errorStates = ref<Map<string, string | null>>(new Map())
|
||||
|
||||
export function useVillages(districtCode: Ref<string | undefined> | string | undefined) {
|
||||
// Convert districtCode ke ref jika bukan ref
|
||||
const districtCodeRef =
|
||||
typeof districtCode === 'string' || districtCode === undefined ? ref(districtCode) : districtCode
|
||||
|
||||
// Computed untuk mendapatkan villages berdasarkan district code
|
||||
const villages = computed(() => {
|
||||
const code = districtCodeRef.value
|
||||
if (!code) return []
|
||||
return villagesCache.value.get(code) || []
|
||||
})
|
||||
|
||||
// Computed untuk loading state
|
||||
const isLoading = computed(() => {
|
||||
const code = districtCodeRef.value
|
||||
if (!code) return false
|
||||
return loadingStates.value.get(code) || false
|
||||
})
|
||||
|
||||
// Computed untuk error state
|
||||
const error = computed(() => {
|
||||
const code = districtCodeRef.value
|
||||
if (!code) return null
|
||||
return errorStates.value.get(code) || null
|
||||
})
|
||||
|
||||
// Computed untuk format SelectItem
|
||||
const villageOptions = computed<SelectItem[]>(() => {
|
||||
return villages.value.map((village) => ({
|
||||
label: toTitleCase(village.name),
|
||||
value: village.code,
|
||||
searchValue: `${village.code} ${village.name}`.trim(),
|
||||
}))
|
||||
})
|
||||
|
||||
// Function untuk fetch villages berdasarkan district code
|
||||
async function fetchVillages(districtCodeParam?: string, forceRefresh = false, isUserAction = false) {
|
||||
const code = districtCodeParam || districtCodeRef.value
|
||||
if (!code) return
|
||||
|
||||
// Jika user action atau force refresh, selalu fetch
|
||||
// Jika bukan user action dan sudah ada cache, skip
|
||||
if (!isUserAction && !forceRefresh && villagesCache.value.has(code)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Jika sedang loading, skip untuk mencegah duplicate calls
|
||||
if (loadingStates.value.get(code)) {
|
||||
return
|
||||
}
|
||||
|
||||
// Tambahan: Cek apakah ada pending request untuk code yang sama
|
||||
const pendingKey = `pending_${code}`
|
||||
if (loadingStates.value.get(pendingKey)) {
|
||||
return
|
||||
}
|
||||
|
||||
loadingStates.value.set(pendingKey, true)
|
||||
|
||||
loadingStates.value.set(code, true)
|
||||
errorStates.value.set(code, null)
|
||||
|
||||
try {
|
||||
const response = await villageService.getList({
|
||||
'page-size': '50',
|
||||
sort: 'name:asc',
|
||||
district_code: code,
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
const villagesData = response.body.data || []
|
||||
villagesCache.value.set(code, villagesData)
|
||||
} else {
|
||||
errorStates.value.set(code, 'Gagal memuat data kelurahan')
|
||||
console.error('Failed to fetch villages:', response)
|
||||
}
|
||||
} catch (err) {
|
||||
errorStates.value.set(code, 'Terjadi kesalahan saat memuat data kelurahan')
|
||||
console.error('Error fetching villages:', err)
|
||||
} finally {
|
||||
loadingStates.value.set(code, false)
|
||||
loadingStates.value.delete(pendingKey)
|
||||
}
|
||||
}
|
||||
|
||||
// Function untuk mencari village berdasarkan code
|
||||
function getVillageByCode(code: string): Village | undefined {
|
||||
const districtCode = districtCodeRef.value
|
||||
if (!districtCode) return undefined
|
||||
|
||||
const villagesForDistrict = villagesCache.value.get(districtCode) || []
|
||||
return villagesForDistrict.find((village) => village.code === code)
|
||||
}
|
||||
|
||||
// Function untuk mencari village berdasarkan name
|
||||
function getVillageByName(name: string): Village | undefined {
|
||||
const districtCode = districtCodeRef.value
|
||||
if (!districtCode) return undefined
|
||||
|
||||
const villagesForDistrict = villagesCache.value.get(districtCode) || []
|
||||
return villagesForDistrict.find((village) => village.name.toLowerCase() === name.toLowerCase())
|
||||
}
|
||||
|
||||
// Function untuk clear cache district tertentu
|
||||
function clearCache(districtCodeParam?: string) {
|
||||
const code = districtCodeParam || districtCodeRef.value
|
||||
if (code) {
|
||||
villagesCache.value.delete(code)
|
||||
loadingStates.value.delete(code)
|
||||
errorStates.value.delete(code)
|
||||
}
|
||||
}
|
||||
|
||||
// Function untuk clear semua cache
|
||||
function clearAllCache() {
|
||||
villagesCache.value.clear()
|
||||
loadingStates.value.clear()
|
||||
errorStates.value.clear()
|
||||
}
|
||||
|
||||
// Function untuk refresh data
|
||||
function refreshVillages(districtCodeParam?: string) {
|
||||
const code = districtCodeParam || districtCodeRef.value
|
||||
if (code) {
|
||||
return fetchVillages(code, true)
|
||||
}
|
||||
}
|
||||
|
||||
// Debounced district code untuk mencegah multiple calls
|
||||
const debouncedDistrictCode = refDebounced(districtCodeRef, 100)
|
||||
|
||||
// Watch perubahan district code untuk auto fetch
|
||||
watch(
|
||||
debouncedDistrictCode,
|
||||
(newCode, oldCode) => {
|
||||
if (newCode && newCode !== oldCode) {
|
||||
// Jika ada oldCode berarti user action (ganti pilihan)
|
||||
const isUserAction = !!oldCode
|
||||
fetchVillages(newCode, false, isUserAction)
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
return {
|
||||
// Data
|
||||
villages: readonly(villages),
|
||||
villageOptions,
|
||||
|
||||
// State
|
||||
isLoading: readonly(isLoading),
|
||||
error: readonly(error),
|
||||
|
||||
// Methods
|
||||
fetchVillages,
|
||||
refreshVillages,
|
||||
getVillageByCode,
|
||||
getVillageByName,
|
||||
clearCache,
|
||||
clearAllCache,
|
||||
}
|
||||
}
|
||||
|
||||
// Export untuk direct access ke cached data (jika diperlukan)
|
||||
export const useVillagesCache = () => ({
|
||||
villagesCache: readonly(villagesCache),
|
||||
loadingStates: readonly(loadingStates),
|
||||
errorStates: readonly(errorStates),
|
||||
})
|
||||
Reference in New Issue
Block a user