From 4c5ea199d2d2c0b28714025dbeba81f913b8431f Mon Sep 17 00:00:00 2001
From: RatreeOchn <51106210+RatreeOchn@users.noreply.github.com>
Date: Thu, 21 Mar 2024 17:52:53 +0700
Subject: [PATCH] Highlighted Species issue (#1794)

* Reverse code for set the limit for get the Species

* Get Projects Species when more then 100

* Update loading

* Update code for isSpecieSelected
---
 .../components/highlighted-species-modal.vue  | 163 +++++++++---------
 1 file changed, 85 insertions(+), 78 deletions(-)

diff --git a/apps/website/src/insights/overview/components/dashboard-highlighted-species/components/highlighted-species-modal.vue b/apps/website/src/insights/overview/components/dashboard-highlighted-species/components/highlighted-species-modal.vue
index c5a6303f5..2ea02f2fe 100644
--- a/apps/website/src/insights/overview/components/dashboard-highlighted-species/components/highlighted-species-modal.vue
+++ b/apps/website/src/insights/overview/components/dashboard-highlighted-species/components/highlighted-species-modal.vue
@@ -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">
@@ -153,7 +154,7 @@
               class="hidden grid-cols-1 xl:grid"
             >
               <HighlightedSpeciesSelector
-                :species="selectedSpecies"
+                :species="preSelectedSpecies"
                 @emit-remove-specie="removeSpecieFromList"
               />
             </div>
@@ -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
 
@@ -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
@@ -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({
@@ -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
@@ -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(() => {
@@ -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))
 })
 
@@ -335,18 +340,18 @@ 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
     }
@@ -354,7 +359,7 @@ const selectSpecie = async (specie: HighlightedSpeciesRow): Promise<void> => {
 }
 
 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> => {
@@ -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 => {