cosmetics and update for latest nugets

Author: antongit

community-app/frontend/src/components/overview/LatestNugets.vue

@@ -2,24 +2,27 @@
 
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
-import { NEllipsis, NSkeleton } from 'naive-ui'
+import { NEllipsis, NSkeleton, NAvatar, NTag } from 'naive-ui'
 import { useLatestNugetsStore } from './LatestNugetsStore.js'
 import Constants from '../../constants.js'
 import SectionTitle from './SectionTitle.vue'
+import defaultLogo from '../../assets/defaultLogo.png'
 
 const store = useLatestNugetsStore();
 const loading = ref(false);
 const router = useRouter();
 
-onMounted(()=>{   
-    sync();
+onMounted(async ()=>{   
+    await sync();
 })
 
 async function sync(force)
 {
     try {
         loading.value = true;
-        await store.fetch(force);         
+        await store.fetch(force);
+        
+        console.log (store.nugets);
     }
     catch(error) {
         console.log (error);
@@ -36,18 +39,21 @@ function showAll()
 </script>
 
 <template>
-    <div class="section pl-4">
-        <SectionTitle :showRefresh="true" :loading="loading" title="Latest NuGets tagged with VL" @sync="sync(true)" :link="Constants.NUGET_ORG" :isExternal="true"/>
-        <div class="row pt-2">
+    <div class="section pl-4 nugets">
+        <SectionTitle :showRefresh="true" :loading="loading" title="Latest #VL NuGets" @sync="sync(true)" :link="Constants.NUGET_ORG" :isExternal="true"/>
+        <div class="row pt-1">
             <template v-if="loading">
                 <NSkeleton text :repeat="5" class="mb-4 mx-3"></NSkeleton>
             </template>
             <template v-else>
                 <ul v-if="store.nugets.length > 0" class="list-group list-group-flush list">
                     <li v-for="(nuget, index) in store.nugets" :key="index" class="list-group-item d-flex flex-nowrap link">
+                        <NAvatar v-if="nuget.icon" objectFit="contain" :src="nuget.icon" :size="25" class="mr-3" :class="{ 'noImageBack': nuget.icon !== null }"/>
                         <NEllipsis :line-clamp="1" :tooltip=false>
-                            <a :href="nuget.link" target="_blank">{{ nuget.title }}</a>
+                            <a :href="nuget.link" target="_blank">{{ nuget.id }}</a>
                         </NEllipsis>
+                        <span class="by">{{ nuget.by }}</span>
+                        <NTag v-if="nuget.status" size="small" round :bordered="false" class="px-2 ml-3 text-muted text-right" :class="{'new': nuget.status == 'new'}">{{ nuget.status }}</NTag>
                     </li>
                 </ul> 
                 <div v-else class="m-3">Okay, Houston... we've had a problem here.<br/>Try again later.</div>

community-app/frontend/src/components/overview/LatestNugetsStore.js

@@ -1,6 +1,8 @@
 import Constants from "../../constants.js"
 import { defineStore } from 'pinia'
 
+const twoWeeks = 14 * 24 * 60 * 60 * 1000;
+
 export const useLatestNugetsStore = defineStore ('latestNugets',{
     state: ()=>{
         return {
@@ -23,21 +25,27 @@ export const useLatestNugetsStore = defineStore ('latestNugets',{
 
         }
     }
-})
+})  
 
 async function fetchLatestNugets(){
 
-    const count = 5;
+    const count = 7;
     const response = await fetch(Constants.NUGETS_LATEST+`?count=${count}`);
 
     if (response.ok)
     {
         const json = await response.json();
 
         const nugets = json.map((n)=>{
+
+            // const by=[... new Set([ ...n.owners, ...n.authors])];
+
             return {
-                title: n,
-                link: `${Constants.NUGET_PACK_LINK}${n}#readme-body-tab`
+                id: n.id,
+                icon: n.icon || "",
+                by: n.owners.join(', '),
+                link: `${Constants.NUGET_PACK_LINK}${n.id}#readme-body-tab`,
+                status: n.status
             }
         })
 

community-app/frontend/src/components/overview/LatestTopics.vue

@@ -35,7 +35,7 @@ async function sync(force)
 <template>
     <div class="section pl-4">
         <SectionTitle :showRefresh="true" :loading="loading" title="Latest Forum Topics" @sync="sync(true)" :link="Constants.FORUM" :isExternal="true"/>
-        <div class="row pt-2">
+        <div class="row">
             <template v-if="loading">
                 <NSkeleton text :repeat="5" class="mb-4 mx-3"></NSkeleton>
             </template>

community-app/frontend/src/components/overview/Opportunities.vue

@@ -31,7 +31,7 @@ async function sync(force)
 <template>
     <div class="section pl-4">
         <SectionTitle showRefresh="true" :loading="loading" title="Opportunities" @sync="sync(true)"/>
-        <div class="row pt-2">
+        <div class="row pt-1">
             <template v-if="loading">
                 <NSkeleton text :repeat="5" class="mb-4 mx-3"></NSkeleton>
             </template>

community-app/frontend/src/routes/Overview.vue

@@ -63,7 +63,7 @@ const columnClass='col-12 col-md-6 mb-3 mb-lg-0';
             <Businesses class="mt-4"/>
         </div>
         <div class="col mb-4 mb-md-0 order-1 order-md-2">
-            <LatestNugets/>
+            <LatestNugets class="mb-2"/>
             <Opportunities/>
         </div>
     </div>

community-app/frontend/src/styles/style.scss

@@ -9,6 +9,19 @@ $orange-hover: #ee4b28;
 .overview
 {
 
+  .nugets{
+    .by{
+      font-size: 0.8rem;
+      color: #888;
+      padding: 0.1rem 1rem;
+    }
+
+    .new{
+      background-color: #aaa;
+      color: #fff !important;
+    }
+  }
+
   a.all {
     text-transform: uppercase;
     text-decoration: underline;