complete dependency render

frontend/src/components/PackageInfo/PackageDependency.vue

@@ -0,0 +1,22 @@
+<script setup>
+const props = defineProps({
+  name: String,
+  type: String,
+  dist: String
+})
+
+function generatePackageLinkUrl(name, dist) {
+  switch (dist) {
+    case 'arch':
+      return `https://archlinux.org/packages/?q=${name}`
+    case 'bioarch':
+      return `https://bioarchlinux.org/packages/${name}`
+    default:
+      console.log('generatePackageLinkUrl(): unreachable')
+  }
+}
+</script>
+
+<template>
+  <p><a :href="generatePackageLinkUrl(name, dist)">{{ name }}</a><span v-if="type !== 'dep'"> ({{ type }})</span></p>
+</template>

frontend/src/state.js

@@ -1,3 +1,5 @@
 import { ref } from 'vue'
 
+export const packageList = ref([])
+export const packageIndex = ref([])
 export const displayPackages = ref([])

frontend/src/views/Index.vue

@@ -6,9 +6,8 @@ import Index from 'flexsearch/dist/module/index'
 
 import { requestPackageIndex } from '../api'
 
-import { displayPackages } from '@/state'
+import { packageIndex, displayPackages } from '@/state'
 
-let packageIndex = null
 const searchIndex = new Index({ tokenize: 'forward' })
 
 let searchInput = ref("")
@@ -21,20 +20,20 @@ function updateSearchIndex(pkglist) {
 
 requestPackageIndex()
   .then((obj) => {
-    packageIndex = obj
+    packageIndex.value = obj
     displayPackages.value = obj
     updateSearchIndex(obj)
   })
 
 watch(searchInput, async(newVal, oldVal) => {
   if (searchInput.value.length === 0) {
-    displayPackages.value = packageIndex
+    displayPackages.value = packageIndex.value
   }
   else {
     const searchResult = searchIndex.search(searchInput.value)
     const finalResult = []
     searchResult.forEach((idx) => {
-      finalResult.push(packageIndex[idx])
+      finalResult.push(packageIndex.value[idx])
     })
     displayPackages.value = finalResult
   }

frontend/src/views/Package.vue

@@ -3,10 +3,12 @@ import { ref } from 'vue'
 import { useRoute } from 'vue-router'
 
 import PackageActions from '@/components/PackageInfo/PackageActions.vue'
+import PackageDependency from '@/components/PackageInfo/PackageDependency.vue'
 import ViewDetail from '@/components/PackageInfo/ViewDetail.vue'
 
 import moment from 'moment'
-import { requestPackageInfo } from '@/api'
+
+import { requestPackageInfo, requestPackageList } from '@/api'
 import { calculateSize } from '@/utils/sizing'
 import { formatPackager } from '@/utils/packager'
 
@@ -24,11 +26,29 @@ requestPackageInfo(route.params.packageName)
   .then(obj => {
     pkginfo.value = obj
 
-    depends.value = obj.depends.split('\n').filter((elem) => elem.length > 0)
-    optdepends.value = obj.optdepends.split('\n').filter((elem) => elem.length > 0)
-    makedepends.value = obj.makedepends.split('\n').filter((elem) => elem.length > 0)
     files.value = obj.files.split('\n').filter((elem) => elem.length > 0)
     builddate.value = moment.unix(obj.builddate).format('YYYY-MM-DD HH:MM:SS')
+    
+    const o_depends = obj.depends.split('\n').filter((elem) => elem.length > 0)
+    const o_optdepends = obj.optdepends.split('\n').filter((elem) => elem.length > 0)
+    const o_makedepends = obj.makedepends.split('\n').filter((elem) => elem.length > 0)
+
+    requestPackageList()
+      .then((list) => {
+        list.forEach((bioarchPackageName) => {
+          function mapPackageDistribution(pkg) {
+            if (bioarchPackageName === pkg) {
+              return { name: pkg, dist: 'bioarch' }
+            }
+            else {
+              return { name: pkg, dist: 'arch' }
+            }
+          }
+          depends.value = o_depends.map(mapPackageDistribution)
+          optdepends.value = o_optdepends.map(mapPackageDistribution)
+          makedepends.value = o_makedepends.map(mapPackageDistribution)
+        })
+      })
   })
 </script>
 
@@ -78,9 +98,9 @@ requestPackageInfo(route.params.packageName)
     </table>
 
     <h3 class="pkginfo-section">Dependencies</h3>
-    <p v-for="dep in depends"> {{ dep }}</p>
-    <p v-for="optdep in optdepends"> {{ optdep }} (optional)</p>
-    <p v-for="makedep in makedepends"> {{ makedep }} (make)</p>
+    <PackageDependency :name="dep.name" :dist="dep.dist" type="dep" v-for="dep in depends"></PackageDependency>
+    <PackageDependency :name="optdep.name" :dist="optdep.dist" type="optional" v-for="optdep in optdepends"></PackageDependency>
+    <PackageDependency :name="makedep.name" :dist="makedep.dist" type="make" v-for="makedep in makedepends"></PackageDependency>
 
     <h3 class="pkginfo-section">Package Content</h3>
     <ViewDetail :message="`View the file list for ${pkginfo.name}`">