Reverse entries, lint

Author: m-mohr

src/components/ProcessingResults.vue

@@ -98,7 +98,6 @@
         >
       </div>
     </v-card-text>
-
   </v-card>
 </template>
 

src/components/ProjectSelectionDialog.vue

@@ -1,48 +1,47 @@
 <template lang="html">
-
   <v-dialog v-if="projects.length > 0" width="auto" max-height="500">
     <template v-slot:activator="{ props: activatorProps }">
-      <v-btn 
-        variant="outlined"
-        density="comfortable"
-        color="primary"
-        v-bind="activatorProps"
-      >
+      <v-btn variant="outlined" density="comfortable" color="primary" v-bind="activatorProps">
         Load
       </v-btn>
     </template>
     <template v-slot:default="{ isActive }">
       <v-card title="Load Project">
         <v-list density="compact" color="transparent" class="pa-0">
           <v-list-item
-            v-for="project in projects"
+            v-for="project in sortedProjects"
             :key="project"
-            @click.stop="queryProcess(project); isActive.value = false"
+            @click.stop="
+              queryProcess(project)
+              isActive.value = false
+            "
           >
             <v-label class="text-capitalize mb-1">{{ project }}</v-label>
           </v-list-item>
         </v-list>
-      
+
         <v-card-actions>
           <v-spacer></v-spacer>
-        
-          <v-btn
-            text="Close Dialog"
-            @click="isActive.value = false"
-          ></v-btn>
+
+          <v-btn text="Close Dialog" @click="isActive.value = false"></v-btn>
         </v-card-actions>
       </v-card>
     </template>
   </v-dialog>
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import useProcessing from '../composables/useProcessing'
 import useMap from '../composables/useMap'
 
 const { projects, loadProject } = useProcessing()
 const { displayGeoJSON, fitMapToBbox } = useMap()
 
+const sortedProjects = computed(() => {
+  return projects.value.slice().reverse()
+})
+
 const queryProcess = async (id: string) => {
   const polygons = await loadProject(id)
   displayGeoJSON(polygons)

src/composables/useProcessing.ts

@@ -282,16 +282,16 @@ export default function useProcessing() {
     try {
       isProjectLoading.value = true
       const response = await fetch(`${apiBaseUrl}projects/${id}`, {
-        headers: createHeaders()
+        headers: createHeaders(),
       })
       const project = await response.json()
-      if (project.status == "completed") {
+      if (project.status == 'completed') {
         const blob = await fetch(project.results.polygons)
         const polygons = await blob.json()
         polygons.bbox = project.parameters.inference.bbox
         return polygons
       } else {
-        throw new Error("Process is not yet completed")
+        throw new Error("Processing hasn't finished yet. Please try again later.")
       }
     } catch (e) {
       showError((e as Error)?.message || String(e))