orgs part 2 (lord forgive me for I have sinned)

Modern-Modpacks · Jan 29, 2024 · 353d1cf · 353d1cf
1 parent d57130e
commit 353d1cf
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 46 deletions.
diff --git a/src/lib/project/Organizations.svelte b/src/lib/project/Organizations.svelte
@@ -1,36 +1,25 @@
 <script lang="ts">
 	import { base } from "$app/paths";
-	import { ghApiKeyStore } from "$lib/stores";
-	import { filterPkgsByAuthor, getGhInfo } from "$lib/utils";
 
-	export let author : string;
+	export let orgs : any[];
 </script>
 
-{#await getGhInfo(`users/${author}/orgs`, $ghApiKeyStore) then orgs}
-	<!-- {@debug orgs} -->
-	{#if orgs.length>0}
-		<div class="card flex flex-col items-start gap-y-2 p-4">
-			<dt class="text-sm opacity-50">Organizations</dt>
-				{#each orgs as org}
-					{@const c = filterPkgsByAuthor(org.login).length}
-
-					{#if c>0}
-						<a class="card flex p-4 min-w-max w-full hover:variant-soft-primary" href="{base}/s/?q=@author:{org.login}">
-							<img
-								src={org.avatar_url}
-								alt="organization's profile avatar"
-								class="my-auto mr-4 aspect-square h-8 rounded-lg"
-							/>
-							<dl class="grow">
-								<dt class="font-bold select-text">{org.login}</dt>
-								<dd class="text-sm opacity-50">
-									owns {c}
-									{c == 1 ? 'package' : 'packages'}
-								</dd>
-							</dl>
-						</a>
-					{/if}
-				{/each}
-		</div>
-	{/if}
-{/await}
+<div class="card flex flex-col items-start gap-y-2 p-4">
+	<dt class="text-sm opacity-50">Organizations</dt>
+		{#each orgs as org}
+			<a class="card flex p-4 min-w-max w-full hover:variant-soft-primary" href="{base}/s/?q=@author:{org.login}">
+				<img
+					src={org.avatar_url}
+					alt="organization's profile avatar"
+					class="my-auto mr-4 aspect-square h-8 rounded-lg"
+				/>
+				<dl class="grow">
+					<dt class="font-bold select-text">{org.login}</dt>
+					<dd class="text-sm opacity-50">
+						owns {org.pkg_count}
+						{org.pkg_count == 1 ? 'package' : 'packages'}
+					</dd>
+				</dl>
+			</a>
+		{/each}
+</div>
diff --git a/src/lib/project/PackageList.svelte b/src/lib/project/PackageList.svelte
@@ -14,10 +14,12 @@
 	/** name and author are sorted alphabetically. */
 	export let sortBy: '' | 'name' | 'author' | 'downloads' | 'views' = '';
 	export let maxCount = Infinity;
+	export let startFrom = 0;
 	export let showAvatar = true;
 	export let showDetails = true;
 	export let showName = true;
 	export let compact = false;
+	export let customHeight : number | null = null;
 
 	$: sortedP = (() => {
 		const alphabetic = [...p].sort((_a, _b) => {
@@ -52,7 +54,7 @@
 	})();
 </script>
 
-{#each [...sortedP].slice(0, maxCount) as [name, locator], i (name)}
+{#each [...sortedP].slice(startFrom, maxCount) as [name, locator], i (name)}
 	{@const locatorInfo = locator.match(consts.LOCATOR_REGEX) ?? [null, null, null, null, null]}
 	{@const author = locatorInfo[1]}
 	{@const repo = locatorInfo[2]}
@@ -70,6 +72,7 @@
 		class:!variant-filled-primary={$page.url.searchParams.get('id') == name}
 		animate:flip={{ duration: 500 }}
 		transition:fade={{ duration: 300 }}
+		style={customHeight!=null ? `height: ${customHeight}rem` : ''}
 	>
 		{#if showAvatar && !compact}
 			<img

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -70,6 +70,18 @@ export function filterPkgsByAuthor(authorCheck: string | undefined) : [string, s
 		return author == authorCheck;
 	});
 }
+export async function getNonEmptyOrgsWithPackageCount(a: string, key: string | null) : Promise<any[]> {
+	let orgsWithPackageCount : any[] = [];
+	let orgs : [any] = await getGhInfo(`users/${a}/orgs`, key);
+	if (Object.keys(orgs).length==0) return [];
+
+	orgs.forEach(org => {
+		org.pkg_count = filterPkgsByAuthor(org.login).length;
+		if (org.pkg_count>0) orgsWithPackageCount.push(org);
+		// for (let i=0; i<4; i++) {if (org.pkg_count>0) orgsWithPackageCount.push(org);}
+	});
+	return orgsWithPackageCount;
+}
 
 export function capitalizeFirstLetter(str: string): string {
 	return str.charAt(0).toUpperCase() + str.slice(1);
@@ -109,9 +121,11 @@ export function removeBase(target: string, base: string): string {
 }
 
 export async function getGhInfo(path : string, key: string | null) : Promise<any> {
-	return await (await fetch(`${consts.GH_API_URL}/${path}`, {headers: {
+	let r : Response = await fetch(`${consts.GH_API_URL}/${path}`, {headers: {
 		'Accept': 'application/vnd.github+json',
 		'Authorization': (key!=null ? 'Bearer '+key : ''),
 		'X-GitHub-Api-Version': '2022-11-28'
-	}})).json();
+	}});
+	if (r.status!=200) return {};
+	return await r.json();
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -72,7 +72,7 @@
 		<Sidebar />
 	</svelte:fragment>
 
-	<div class="container relative mx-auto max-w-screen-lg space-y-4 p-4 md:p-10 min-h-full">
+	<div class="container relative mx-auto max-w-screen-lg space-y-2 p-4 md:p-10 min-h-full">
 		{#key data.href}
 			<slot />
 		{/key}

diff --git a/src/routes/s/+page.svelte b/src/routes/s/+page.svelte
@@ -7,6 +7,7 @@
 	import { contextMenu } from '$lib/overlays/contextMenu';
 	import {
 		currentSearchStore,
+		ghApiKeyStore,
 		ghApiLoginStore,
 		packageListStore,
 		packageStatusStore,
@@ -16,6 +17,7 @@
 		filterObjectByKey,
 		filterPkgsByAuthor,
 		generateInputString,
+		getNonEmptyOrgsWithPackageCount,
 		initPackageList,
 		parseInputString
 	} from '$lib/utils';
@@ -30,6 +32,8 @@
 	});
 
 	$: queryParams = parseInputString($currentSearchStore);
+	let largeScreen = matchMedia('(min-width: 1024px)').matches;
+	window.onresize = () => {largeScreen = matchMedia('(min-width: 1024px)').matches}
 
 	$: $packageStatusStore.search.d = Object.entries(
 		(!queryParams.ROOT
@@ -202,10 +206,32 @@
 </div>
 
 {#if queryParams.author && (filteredAuthor.length > 0 || queryParams.author==$ghApiLoginStore)}
-	<div class="grid grid-cols-[1fr_min-content] items-start gap-x-2">
+	<!-- {#await getNonEmptyOrgsWithPackageCount('Gcat101', $ghApiKeyStore)} -->
+	{#await getNonEmptyOrgsWithPackageCount(queryParams.author, $ghApiKeyStore)}
 		<Author author={queryParams.author} c={filteredAuthor.length} />
-		<Organizations author={queryParams.author} />
-	</div>
+	{:then orgs}
+		<div class="grid lg:grid-cols-{orgs.length>0 ? 2 : 1} items-start gap-2">
+			<div class="flex flex-col gap-2">
+				<Author author={queryParams.author} c={filteredAuthor.length} />
+				{#if largeScreen}
+					<PackageList
+						p={resultedFilter}
+						showAvatar={!queryParams.author}
+						showName={!queryParams.author}
+						showDetails={queryParams._details == 'i'}
+						sortBy={$userPreferencesStore.sortBy}
+						compact={$userPreferencesStore.compact}
+
+						maxCount={orgs.length-1}
+						customHeight={5.7}
+					/>
+				{/if}
+			</div>
+			{#if orgs.length>0}
+				<Organizations orgs={orgs} />
+			{/if}
+		</div>
+	{/await}
 {/if}
 
 {#if state == 'loading'}
@@ -239,14 +265,27 @@
 		class:md:grid-cols-2={$userPreferencesStore.compact}
 		class:lg:grid-cols-3={$userPreferencesStore.compact}
 	>
-		<PackageList
-			p={resultedFilter}
-			showAvatar={!queryParams.author}
-			showName={!queryParams.author}
-			showDetails={queryParams._details == 'i'}
-			sortBy={$userPreferencesStore.sortBy}
-			compact={$userPreferencesStore.compact}
-		/>
+		{#await getNonEmptyOrgsWithPackageCount('Gcat101', $ghApiKeyStore)}
+			<PackageList
+				p={resultedFilter}
+				showAvatar={!queryParams.author}
+				showName={!queryParams.author}
+				showDetails={queryParams._details == 'i'}
+				sortBy={$userPreferencesStore.sortBy}
+				compact={$userPreferencesStore.compact}
+			/>
+		{:then orgs}
+			<PackageList
+				p={resultedFilter}
+				showAvatar={!queryParams.author}
+				showName={!queryParams.author}
+				showDetails={queryParams._details == 'i'}
+				sortBy={$userPreferencesStore.sortBy}
+				compact={$userPreferencesStore.compact}
+
+				startFrom={largeScreen && orgs.length>0 ? orgs.length-1 : 0}
+			/>
+		{/await}
 	</dl>
 {:else if state == 'fail'}
 	<p>Something went wrong</p>