From dfe4532390d50e192cb271c7052e13f798f21272 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Mon, 18 Nov 2024 23:50:51 +0100
Subject: [PATCH] fix layout

---
 web/src/compositions/useRepos.ts | 30 +++++++++++++++++++++++++-----
 web/src/store/repos.ts           |  9 +++++++++
 web/src/views/Repos.vue          | 13 ++++++++++---
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/web/src/compositions/useRepos.ts b/web/src/compositions/useRepos.ts
index ac754727a8..002e9ccb3e 100644
--- a/web/src/compositions/useRepos.ts
+++ b/web/src/compositions/useRepos.ts
@@ -15,12 +15,32 @@ export default function useRepos() {
   }
 
   function sortReposByLastActivity(repos: Repo[]): Repo[] {
-    return repos.sort((a, b) => {
-      const aLastActivity = a.last_pipeline_item?.created || 0;
-      const bLastActivity = b.last_pipeline_item?.created || 0;
-
-      return bLastActivity - aLastActivity;
+    console.log(
+      'Pre-sort repos:',
+      repos.map((r) => ({
+        name: r.name,
+        last_pipeline_item: r.last_pipeline_item?.created,
+      })),
+    );
+
+    const reposWithPipelines = repos.filter((r) => r.last_pipeline_item?.created);
+    const reposWithoutPipelines = repos.filter((r) => !r.last_pipeline_item?.created);
+
+    const sortedWithPipelines = reposWithPipelines.sort((a, b) => {
+      return (b.last_pipeline_item?.created || 0) - (a.last_pipeline_item?.created || 0);
     });
+
+    const sorted = [...sortedWithPipelines, ...reposWithoutPipelines];
+
+    console.log(
+      'Post-sort repos:',
+      sorted.map((r) => ({
+        name: r.name,
+        last_pipeline_item: r.last_pipeline_item?.created,
+      })),
+    );
+
+    return sorted;
   }
 
   function updateLastAccess(repoId: number) {
diff --git a/web/src/store/repos.ts b/web/src/store/repos.ts
index f14d9a5b85..f181909a5d 100644
--- a/web/src/store/repos.ts
+++ b/web/src/store/repos.ts
@@ -16,6 +16,14 @@ export const useRepoStore = defineStore('repos', () => {
       .map(([, repo]) => repo),
   );
 
+  const sortedByActivity = computed(() => {
+    return Object.values(ownedRepos.value).sort((a, b) => {
+      const aLastActivity = a.last_pipeline_item?.created || 0;
+      const bLastActivity = b.last_pipeline_item?.created || 0;
+      return bLastActivity - aLastActivity;
+    });
+  });
+
   function getRepo(repoId: Ref<number>) {
     return computed(() => repos.get(repoId.value));
   }
@@ -45,6 +53,7 @@ export const useRepoStore = defineStore('repos', () => {
   return {
     repos,
     ownedRepos,
+    sortedByActivity,
     ownedRepoIds,
     getRepo,
     setRepo,
diff --git a/web/src/views/Repos.vue b/web/src/views/Repos.vue
index 92820b536b..652d79c3ec 100644
--- a/web/src/views/Repos.vue
+++ b/web/src/views/Repos.vue
@@ -8,7 +8,7 @@
       <Button :to="{ name: 'repo-add' }" start-icon="plus" :text="$t('repo.add')" />
     </template>
 
-    <div class="flex flex-col gap-12">
+    <div v-if="!loading" class="flex flex-col gap-12">
       <div class="gap-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
         <RepoItems v-for="repo in repoListAccess" :key="repo.id" :repo="repo" />
       </div>
@@ -30,17 +30,24 @@ import useRepos from '~/compositions/useRepos';
 import { useRepoSearch } from '~/compositions/useRepoSearch';
 import { useRepoStore } from '~/store/repos';
 
+const loading = ref(true);
+
 const repoStore = useRepoStore();
 const repos = computed(() => Object.values(repoStore.ownedRepos));
 const search = ref('');
 
 const { searchedRepos } = useRepoSearch(repos, search);
-const { sortReposByLastAccess, sortReposByLastActivity } = useRepos();
+const { sortReposByLastAccess } = useRepos();
 
 const repoListAccess = computed(() => sortReposByLastAccess(repos.value || []));
-const repoListActivity = computed(() => sortReposByLastActivity(searchedRepos.value || []));
+const repoListActivity = computed(() => {
+  const repos = search.value ? searchedRepos.value : repoStore.sortedByActivity;
+  return repos || [];
+});
 
 onMounted(async () => {
+  loading.value = true;
   await repoStore.loadRepos();
+  loading.value = false;
 });
 </script>