fix layout

woodpecker-ci · Nov 18, 2024 · dfe4532 · dfe4532
1 parent d9f759f
commit dfe4532
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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>