@@ -113,7 +113,7 @@ export default defineComponent({
113113 this .changeReposFilter (this .reposFilter );
114114 fomanticQuery (el .querySelector (' .ui.dropdown' )).dropdown ();
115115 nextTick (() => {
116- this .$refs .search .focus ();
116+ this .$refs .search ? .focus ();
117117 });
118118
119119 this .textArchivedFilterTitles = {
@@ -243,7 +243,7 @@ export default defineComponent({
243243 if (! this .reposTotalCount ) {
244244 const totalCountSearchURL = ` ${this .subUrl }/repo/search?count_only=1&uid=${this .uid }&team_id=${this .teamId }&q=&page=1&mode= ` ;
245245 response = await GET (totalCountSearchURL );
246- this .reposTotalCount = response .headers .get (' X-Total-Count' ) ?? ' ? ' ;
246+ this .reposTotalCount = parseInt ( response .headers .get (' X-Total-Count' ) ?? ' 0 ' ) ;
247247 }
248248
249249 response = await GET (searchedURL );
@@ -336,7 +336,6 @@ export default defineComponent({
336336 },
337337 },
338338});
339-
340339 </script >
341340<template >
342341 <div >
@@ -354,7 +353,15 @@ export default defineComponent({
354353 <svg-icon name =" octicon-plus" />
355354 </a >
356355 </h4 >
357- <div class =" ui attached segment repos-search" >
356+ <div v-if =" !reposTotalCount" class =" ui attached segment" >
357+ <div v-if =" !isLoading" class =" empty-repo-or-org" >
358+ <svg-icon name =" octicon-git-branch" :size =" 24" />
359+ <p >{{ textNoRepo }}</p >
360+ </div >
361+ <!-- using the loading indicator here will cause more (unnecessary) page flickers, so at the moment, not use the loading indicator -->
362+ <!-- <div v-else class="is-loading loading-icon-2px tw-min-h-16"/> -->
363+ </div >
364+ <div v-else class =" ui attached segment repos-search" >
358365 <div class =" ui small fluid action left icon input" >
359366 <input type =" search" spellcheck =" false" maxlength =" 255" @input =" changeReposFilter(reposFilter)" v-model =" searchQuery" ref =" search" @keydown =" reposFilterKeyControl" :placeholder =" textSearchRepos" >
360367 <i class =" icon loading-icon-3px" :class =" {'is-loading': isLoading}" ><svg-icon name =" octicon-search" :size =" 16" /></i >
@@ -438,7 +445,7 @@ export default defineComponent({
438445 class =" item navigation tw-py-1" :class =" {'disabled': page === 1}"
439446 @click =" changePage(page - 1)" :title =" textPreviousPage"
440447 >
441- <svg-icon name =" octicon-chevron-left" :size =" 16" clsas-name =" tw-mr-1" />
448+ <svg-icon name =" octicon-chevron-left" :size =" 16" clsas =" tw-mr-1" />
442449 </a >
443450 <a class =" active item tw-py-1" >{{ page }}</a >
444451 <a
@@ -467,7 +474,13 @@ export default defineComponent({
467474 <svg-icon name =" octicon-plus" />
468475 </a >
469476 </h4 >
470- <div v-if =" organizations.length" class =" ui attached table segment tw-rounded-b" >
477+ <div v-if =" !organizations.length" class =" ui attached segment" >
478+ <div class =" empty-repo-or-org" >
479+ <svg-icon name =" octicon-organization" :size =" 24" />
480+ <p >{{ textNoOrg }}</p >
481+ </div >
482+ </div >
483+ <div v-else class =" ui attached table segment tw-rounded-b" >
471484 <ul class =" repo-owner-name-list" >
472485 <li class =" tw-flex tw-items-center tw-py-2" v-for =" org in organizations" :key =" org.name" >
473486 <a class =" repo-list-link muted" :href =" subUrl + '/' + encodeURIComponent(org.name)" >
@@ -546,4 +559,14 @@ ul li:not(:last-child) {
546559.repo-owner-name-list li .active {
547560 background : var (--color-hover );
548561}
562+
563+ .empty-repo-or-org {
564+ margin-top : 1em ;
565+ text-align : center ;
566+ color : var (--color-placeholder-text );
567+ }
568+
569+ .empty-repo-or-org p {
570+ margin : 1em auto ;
571+ }
549572 </style >
0 commit comments