Skip to content

Commit

Permalink
Highlighted Species issue (#1794)
Browse files Browse the repository at this point in the history 
* Reverse code for set the limit for get the Species

* Get Projects Species when more then 100

* Update loading

* Update code for isSpecieSelected
  • Loading branch information
@RatreeOchn
RatreeOchn authored Mar 21, 2024
1 parent 88e6087 commit 4c5ea19
Showing 1 changed file with 85 additions and 78 deletions.
163 changes: 85 additions & 78 deletions ...verview/components/dashboard-highlighted-species/components/highlighted-species-modal.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,59 +84,60 @@
</div>
<!-- Modal body -->
<div class="grid gap-x-4 w-full sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
<div class="grid grid-cols-1 gap-y-4 sm:col-span-1 md:col-span-2 lg:col-span-2 xl:col-span-2">
<ul
v-if="speciesList && speciesList.length"
class="grid gap-3 grid-cols-1 md:grid-rows-5 md:(grid-cols-2 grid-rows-5)"
>
<li
v-for="item in speciesForCurrentPage"
:key="'specie-highlighted-' + item.slug"
:class="isSpecieSelected(item) ? 'border-frequency' : 'border-transparent'"
class="flex flex-row justify-center border-1 items-center rounded-lg space-x-3 p-4 h-full h-23 md:(flex-row) lg:(flex-row justify-between) bg-echo hover:(border-frequency cursor-pointer)"
@click="selectSpecie(item)"
>
<SpecieCard
:slug="item.slug"
:scientific-name="item.scientificName"
:common-name="item.commonName"
:photo-url="item.photoUrl"
:redirect="false"
:text-black="false"
/>
<div class="self-center">
<el-tag
class="species-highlights border-none text-md h-6"
effect="dark"
size="large"
:color="item.riskRating.color"
:title="item.riskRating.label"
:style="{ color: item.riskRating.text }"
>
{{ item.riskRating.code }}
</el-tag>
</div>
</li>
</ul>
<div class="grid grid-cols-1 gap-y-4 sm:col-span-1 md:col-span-2 lg:col-span-2 xl:col-span-2 items-center m-auto">
<icon-custom-ic-loading
v-if="isLoadingSpecies"
class="animate-spin w-8 h-8 lg:mx-24 mx-12"
/>
<h6 v-else-if="!speciesList.length">
<h6
v-else-if="!speciesList.length"
>
No species in a project.
</h6>
<el-pagination
v-else
v-model:currentPage="currentPage"
class="flex items-center justify-center mb-2"
:page-size="PAGE_SIZE"
:total="speciesLength"
layout="prev, pager, next"
@current-change="handleCurrentChange"
/>
<div v-else>
<ul
class="grid gap-3 grid-cols-1 md:grid-rows-5 md:(grid-cols-2 grid-rows-5)"
>
<li
v-for="item in speciesForCurrentPage"
:key="'specie-highlighted-' + item.slug"
:class="isSpecieSelected(item) ? 'border-frequency' : 'border-transparent'"
class="flex flex-row justify-center border-1 items-center rounded-lg space-x-3 p-4 h-full h-23 md:(flex-row) lg:(flex-row justify-between) bg-echo hover:(border-frequency cursor-pointer)"
@click="selectSpecie(item)"
>
<SpecieCard
:slug="item.slug"
:scientific-name="item.scientificName"
:common-name="item.commonName"
:photo-url="item.photoUrl"
:redirect="false"
:text-black="false"
/>
<div class="self-center">
<el-tag
class="species-highlights border-none text-md h-6"
effect="dark"
size="large"
:color="item.riskRating.color"
:title="item.riskRating.label"
:style="{ color: item.riskRating.text }"
>
{{ item.riskRating.code }}
</el-tag>
</div>
</li>
</ul>
<el-pagination
v-model:currentPage="currentPage"
class="flex items-center justify-center mb-2"
:page-size="PAGE_SIZE"
:total="speciesLength"
layout="prev, pager, next"
/>
</div>
</div>
<div
v-if="selectedSpecies.length === 0"
v-if="preSelectedSpecies.length === 0"
class="hidden grid-cols-1 xl:grid h-127 border-1 border-dashed rounded-lg"
>
<div class="my-auto items-center p-5 text-center">
Expand All @@ -153,7 +154,7 @@
class="hidden grid-cols-1 xl:grid"
>
<HighlightedSpeciesSelector
:species="selectedSpecies"
:species="preSelectedSpecies"
@emit-remove-specie="removeSpecieFromList"
/>
</div>
Expand Down Expand Up @@ -211,6 +212,17 @@ watch(() => props.highlightedSpecies, () => {
fillExistingSpeciesSlug()
})
const speciesList = ref<HighlightedSpeciesRow[]>([])
const isLoadingSpecies = ref(false)
const hasFetchedAll = ref(false)
const LIMIT = 100
watch(() => props.toggleShowModal, async () => {
fillExistingSpeciesSlug()
speciesList.value = []
await fetchProjectsSpecies(LIMIT, 0)
})
const store = useStore()
const apiClientBio = inject(apiClientKey) as AxiosInstance
Expand All @@ -219,26 +231,14 @@ const selectedProjectId = computed(() => store.selectedProject?.id)
const searchKeyword = ref('')
const searchRisk = ref('')
const showHaveReachedLimit = ref(false)
const isLoadingSpecies = ref(false)
const hasFetchedAll = ref(false)
const selectedSpecies = ref<HighlightedSpeciesRow[]>([])
const selectedSpeciesSlug = ref<string[]>([])
const PAGE_SIZE = 10
const currentPage = ref(1)
const totalProjectsSpecies = ref(0)
const speciesList = ref<HighlightedSpeciesRow[]>([])
watch(() => props.toggleShowModal, async () => {
fillExistingSpeciesSlug()
speciesList.value = []
await fetchProjectsSpecies(PAGE_SIZE, 0)
})
const handleCurrentChange = async (page: number) => {
speciesList.value = []
await fetchProjectsSpecies(PAGE_SIZE, (page - 1) * PAGE_SIZE)
}
const { isPending: isLoadingPostSpecies, mutate: mutatePostSpecies } = usePostSpeciesHighlighted(apiClientBio, selectedProjectId)
const { isPending: isLoadingDeleteSpecies, mutate: mutateDeleteSpecie } = useDeleteSpecieHighlighted(apiClientBio, selectedProjectId)
const fetchProjectsSpecies = async (limit: number, offset: number) => {
isLoadingSpecies.value = true
Expand All @@ -253,9 +253,7 @@ const fetchProjectsSpecies = async (limit: number, offset: number) => {
}
const s = projectSpecies as ProjectSpeciesResponse
hasFetchedAll.value = s.species.length < limit // check if reaching the end
totalProjectsSpecies.value = s.total
hasFetchedAll.value = s.species.length < LIMIT // check if reaching the end
s.species.forEach(sp => {
const { slug, taxonSlug, scientificName, commonName, photoUrl, riskId } = sp as DashboardSpecies
speciesList.value.push({
Expand All @@ -268,13 +266,15 @@ const fetchProjectsSpecies = async (limit: number, offset: number) => {
})
})
isLoadingSpecies.value = false
}
const { isPending: isLoadingPostSpecies, mutate: mutatePostSpecies } = usePostSpeciesHighlighted(apiClientBio, selectedProjectId)
const { isPending: isLoadingDeleteSpecies, mutate: mutateDeleteSpecie } = useDeleteSpecieHighlighted(apiClientBio, selectedProjectId)
if (!hasFetchedAll.value) {
await fetchProjectsSpecies(LIMIT, speciesList.value.length)
}
}
// Filtered list of species by search, risk or both
const speciesListFiltered = computed(() => {
if (!hasFetchedAll.value) return []
if (!searchKeyword.value && searchRisk.value) {
resetPagination()
return speciesList.value
Expand Down Expand Up @@ -304,11 +304,16 @@ const speciesListFiltered = computed(() => {
})
const speciesLength = computed(() => {
return totalProjectsSpecies.value !== 0 ? totalProjectsSpecies.value : speciesListFiltered.value.length
return speciesListFiltered.value.length
})
const speciesForCurrentPage = computed(() => {
return speciesListFiltered.value
return speciesListFiltered.value.slice((currentPage.value - 1) * PAGE_SIZE, currentPage.value * PAGE_SIZE)
})
const preSelectedSpecies = computed(() => {
if (!hasFetchedAll.value) return []
return speciesList.value.length ? selectedSpeciesSlug.value.map((slug) => speciesList.value.filter((specie) => specie.slug === slug)[0]) ?? [] : []
})
const existingRiskCode = computed(() => {
Expand All @@ -317,11 +322,11 @@ const existingRiskCode = computed(() => {
const newSpeciesToAdd = computed(() => {
const existingSlugsInDB = props.highlightedSpecies.map(sp => sp.slug)
return selectedSpecies.value.filter(sp => !existingSlugsInDB.includes(sp.slug))
return preSelectedSpecies.value.filter(sp => !existingSlugsInDB.includes(sp.slug))
})
const speciesToRemove = computed(() => {
const preSelectedSpeciesSlug = selectedSpecies.value.map(sp => sp.slug)
const preSelectedSpeciesSlug = preSelectedSpecies.value.map(sp => sp.slug)
return props.highlightedSpecies.filter(sp => !preSelectedSpeciesSlug.includes(sp.slug))
})
Expand All @@ -335,26 +340,26 @@ const resetSearch = (): void => {
}
const findIndexToRemove = (slug: string): void => {
const index = selectedSpecies.value.findIndex(sl => sl.slug === slug)
selectedSpecies.value.splice(index, 1)
const index = selectedSpeciesSlug.value.findIndex(sl => sl === slug)
selectedSpeciesSlug.value.splice(index, 1)
}
const selectSpecie = async (specie: HighlightedSpeciesRow): Promise<void> => {
if (isSpecieSelected(specie)) {
findIndexToRemove(specie.slug)
showHaveReachedLimit.value = selectedSpecies.value.length >= 5
showHaveReachedLimit.value = selectedSpeciesSlug.value.length >= 5
} else {
// only 5 species might be highlighted
if (selectedSpecies.value.length < 5) {
selectedSpecies.value.push(specie)
if (selectedSpeciesSlug.value.length < 5) {
selectedSpeciesSlug.value.push(specie.slug)
} else {
showHaveReachedLimit.value = true
}
}
}
const isSpecieSelected = (specie: HighlightedSpeciesRow): boolean => {
return selectedSpecies.value.find(sp => sp.slug === specie.slug) !== undefined
return selectedSpeciesSlug.value.find(slug => slug === specie.slug) !== undefined
}
const removeSpecieFromList = async (specie: SpecieRow): Promise<void> => {
Expand All @@ -363,7 +368,9 @@ const removeSpecieFromList = async (specie: SpecieRow): Promise<void> => {
}
const fillExistingSpeciesSlug = (): void => {
selectedSpecies.value = props.highlightedSpecies.length ? props.highlightedSpecies : []
if (props.highlightedSpecies.length) {
selectedSpeciesSlug.value = props.highlightedSpecies.map(sp => sp.slug)
} else selectedSpeciesSlug.value = []
}
const filterByCode = (code: string): void => {
Expand Down

0 comments on commit 4c5ea19

Please sign in to comment.