Skip to content

Commit

Permalink
feat: submit facility details
Browse files Browse the repository at this point in the history
  • Loading branch information
@PiusKariuki
PiusKariuki committed Oct 1, 2024
1 parent 7b8c852 commit 7f623e2
Show file tree
Hide file tree
Showing 5 changed files with 83 additions and 142 deletions.
137 changes: 30 additions & 107 deletions src/modules/facilities/hooks/useRegistration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,25 @@ import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {useToast} from "maz-ui";
import {useAxios} from "../../../shared/hooks/useAxios.js";
import {useLocationStore} from "../../../shared/store/locationStore.js";
import axios from "axios";
import {fetchMOHFacilities} from "../../../shared/utils/fetchMOHFacilites.js";
import facilitiesCSV from "../../../shared/assets/facilities.csv"
import {csvToArrayOfObjects} from "../../../shared/utils/csvOperations.js";

export const useRegistration = () => {

const isOpen = ref(false)
const loading = ref(false)
const name = ref("")
const country = ref("")
const level = ref("")
const region = ref("")
const district = ref("")
const code = ref("")
const districtOptions = ref([])
const regionOptions = ref([])
const countryOptions = ref([])

const levelOptions = ref([
"Hospital",
"Health Centre_IV",
"Health Centre_III",
"Health Centre_II",
"Health Post",
"Comprehensive Health Post",
"Surveillance office",
"Primary Clinic",
"Drug Vendor"
])

const locationStore = useLocationStore()
const listOfFacilities = ref([])
const searchString = ref("")
const selectedFacility = ref({
name: "",
code: "",
level: "",
county: ""
});


const route = useRoute()

Expand All @@ -44,70 +32,6 @@ export const useRegistration = () => {

const toast = useToast()

const getCountries = async () => {
try {
loading.value = true;
const response = await makeFHIRRequest({url: `Location?type=COUNTRY`})
if (!response?.entry)
return
countryOptions.value = response.entry.map(entry => entry.resource.name)
} catch (error) {
toast.error('Error getting countries')
} finally {
loading.value = false;
}
}

const getRegions = async (country) => {
try {
loading.value = true;
const response = await makeFHIRRequest({url: `Location?type=REGION&partof=${country}`})
if (!response?.entry)
return
regionOptions.value = response.entry.map(entry => entry.resource.name)
} catch (error) {
toast.error('Error getting regions')
} finally {
loading.value = false;
}
}

const getDistricts = async (region) => {
try {
loading.value = true;
const response = await makeFHIRRequest({url: `Location?type=DISTRICT&partof=${region}`});
if (!response?.entry)
return
districtOptions.value = response.entry.map(entry => entry.resource.name)
} catch (e) {
toast.error('Error getting districts')
} finally {
loading.value = false;
}
}

const populateFields = async () => {
try {
loading.value = true;

const response = await makeFHIRRequest({
url: `/Location/${resourceID}`
})

await getRegions(locationStore.getParentLocation(response.partOf.reference.split("/")[1]))

await getCountries(locationStore.getParentLocation(locationStore.getParentLocation(response.partOf.reference.split("/")[1])))

name.value = response.name
district.value = response.partOf.reference.split("/")[1]
region.value = locationStore.getParentLocation(response.partOf.reference.split("/")[1])
country.value = locationStore.getParentLocation(locationStore.getParentLocation(response.partOf.reference.split("/")[1]))
} catch (error) {
toast.error('Error populating fields')
} finally {
loading.value = false;
}
}

const submit = async (evt) => {
evt.preventDefault()
Expand All @@ -118,11 +42,11 @@ export const useRegistration = () => {
url: resourceID ? `Location/${resourceID}` : "Location",
data: {
resourceType: "Location",
id: resourceID ? resourceID : name.value,
name: name.value,
level: level.value,
id: resourceID ? resourceID : selectedFacility.value.name,
name: selectedFacility.value.name,
level: selectedFacility.value.level,
partOf: {
reference: `Location/${district.value}`
reference: `Location/${selectedFacility.value.county}`
},
search: {
mode: "match"
Expand Down Expand Up @@ -158,27 +82,26 @@ export const useRegistration = () => {
router.push('/facility/registered-facilities')
}

fetchMOHFacilities({})
const getListOfFacilities = () => {
fetch(facilitiesCSV)
.then(res => res.text())
.then(data => {
const arrayOfFacilities = csvToArrayOfObjects(data)
listOfFacilities.value = arrayOfFacilities;
return arrayOfFacilities
})
.catch(err => err)
}


return {
isOpen,
loading,
name,
country,
level,
region,
district,
code,
regionOptions,
countryOptions,
getRegions,
getCountries,
submit,
close,
resourceID,
levelOptions,
populateFields,
getDistricts,
districtOptions
getListOfFacilities,
listOfFacilities,
searchString,
selectedFacility
}
}
68 changes: 36 additions & 32 deletions src/modules/facilities/views/RegisterFacility.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,32 @@
autocomplete="off"
@submit="submit"
class="grid grid-cols-1 md:grid-cols-2 px-4 pb-24 lg:px-11 pt-11 gap-8 lg:gap-x-[100px] gap-y-10">
<maz-input label="Health facility name" required v-model="name"/>
<maz-select label="Country" required v-model="country" :options="countryOptions"/>
<maz-select label="Level" v-model="level" :options="levelOptions"/>
<maz-select label="Region" :disabled="!country" required v-model="region" :options="regionOptions"/>
<maz-input label="Code" v-model="code"/>
<maz-select label="District" :disabled="!region" required v-model="district" :options="districtOptions"/>

<maz-select
class=""
size="sm"
search
v-model="searchString"
label="Search facility"
:options="listOfFacilities"
optionLabelKey="name"
optionValueKey="code"
optionInputValueKey="name"
/>
<div />

<maz-input disabled v-model="selectedFacility.name" label="Name"/>
<maz-input disabled v-model="selectedFacility.code" label="Code"/>
<maz-input disabled v-model="selectedFacility.keph_level_name" label="Level"/>
<maz-input disabled v-model="selectedFacility.facility_type_name" label="Facility type"/>
<maz-input disabled v-model="selectedFacility.county" label="County"/>
<maz-input disabled v-model="selectedFacility.sub_county_name" label="Sub county"/>
<maz-input disabled v-model="selectedFacility.constituency" label="Constituency"/>
<maz-input disabled v-model="selectedFacility.ward_name" label="Ward"/>
<maz-input disabled v-model="selectedFacility.owner_name" label="Owner"/>
<maz-input disabled v-model="selectedFacility.operation_status_name" label="Operation Status"/>
<maz-input disabled v-model="selectedFacility.regulatory_status_name" label="Regulatory Status"/>

<div
class="flex items-center w-full col-span-full justify-end gap-[25px] border-t-[.5px] border-t-[#C4C4C4] py-[11px] px-5 mt-auto absolute bottom-0 left-0">
<MazSpinner color="secondary" v-if="loading"/>
Expand All @@ -24,6 +44,7 @@
<maz-btn type="submit" class="w-20 h-8 lg:w-[165px] lg:h-[46px]">Submit</maz-btn>
</div>
</div>

</form>

<maz-dialog v-model="isOpen" title="Success" class="border-[.5px]">
Expand All @@ -44,7 +65,7 @@ import MazIcon from 'maz-ui/components/MazIcon'
import MazDialog from 'maz-ui/components/MazDialog'
import MazSpinner from 'maz-ui/components/MazSpinner'
import MazBtn from 'maz-ui/components/MazBtn'
import {onMounted, watch,} from "vue";
import {computed, onMounted, watch,} from "vue";
import {useRegistration} from "../hooks/useRegistration.js";
import {useRouter} from "vue-router";
Expand All @@ -54,39 +75,22 @@ const router = useRouter()
const {
isOpen,
loading,
name,
country,
region,
submit,
close,
resourceID,
getRegions,
getCountries,
countryOptions,
regionOptions,
levelOptions,
level,
code,
populateFields,
district,
getDistricts,
districtOptions,
getListOfFacilities,
listOfFacilities,
searchString,
selectedFacility
} = useRegistration()
onMounted(async() => {
getCountries()
if(resourceID)
populateFields()
onMounted(() => {
getListOfFacilities()
})
watch(country, value => {
getRegions(value)
})
watch(region, value => {
getDistricts(value)
watch(searchString, value => {
selectedFacility.value = listOfFacilities.value.find(facility => facility.code === value)
})
Expand Down
15 changes: 15 additions & 0 deletions src/shared/utils/csvOperations.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export const csvToArrayOfObjects = (csvString) => {
const lines = csvString.split('\n');

const headers = lines[0].split(',');

const result = lines.slice(1).map(line =>{
const values = line.split(",");
const obj = {};
headers.forEach((header, index) => {
obj[header.trim()] = values[index].trim();
})
return obj;
})
return result;
}
2 changes: 0 additions & 2 deletions src/shared/utils/fetchMOHFacilites.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,5 @@ const iterateFacilities = async() =>{

}



iterateFacilities()

3 changes: 2 additions & 1 deletion vite.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,6 @@ export default defineConfig({
host: true, // needed for the Docker Container port mapping to work
strictPort: true,
port: 5173 // you can replace this port with any port
}
},
assetsInclude: ['**/*.csv']
})

0 comments on commit 7f623e2

Please sign in to comment.