ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-04-23 14:07:14 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

#274 show tab filter for packages that needs updates (#275)

Browse source 
Co-authored-by: neil <neil@neils-MacBook-Pro.local>
This commit is contained in:
Neil 2023-03-09 09:50:00 +08:00 committed by GitHub
parent db84f9c7f1
commit bb6dc9903e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
modules/desktop/src/components/packages/package.svelte
View file

@ -53,9 +53,12 @@
fakeLoadingProgress = 1;
startFakeLoader();
await onClick();
setTimeout(() => {
clearTimeout(fakeTimer);
fakeLoadingProgress = 100;
}, 1500);
await new Promise((resolve) => {
setTimeout(() => {
clearTimeout(fakeTimer);
fakeLoadingProgress = 100;
resolve(null);
}, 1500);
});
}}
/>

41
modules/desktop/src/components/packages/packages.svelte
View file

@ -12,7 +12,9 @@
import SortingButtons from '$components/search-packages/sorting-buttons.svelte';
export let title = 'Packages';
let installedOnly = false;
let pkgNeedsUpdateCount = 0;
export let tab: "ALL" | "INSTALLED" | "INSTALLED_WITH_UPDATES" = "ALL";
let sortBy = 'popularity';
let sortDirection: 'asc' | 'desc' = 'desc';
@ -21,6 +23,7 @@
let packages: GUIPackage[] = [];
const setPackages = (pkgs: GUIPackage[]) => {
pkgNeedsUpdateCount = pkgs.filter((p) => p.state === PackageStates.NEEDS_UPDATE).length;
const sortedPackages = pkgs.sort((a, b) => {
if (sortBy === 'popularity') {
const aPop = +a.dl_count + a.installs;
@ -34,7 +37,21 @@
}
});
packages = sortedPackages.filter((p) => installedOnly ? [PackageStates.INSTALLED, PackageStates.NEEDS_UPDATE].includes(p.state!) : true);
const filteredStates = [
PackageStates.NEEDS_UPDATE
];
switch (tab) {
case "INSTALLED":
case "INSTALLED_WITH_UPDATES":
if (tab === "INSTALLED") filteredStates.push(PackageStates.INSTALLED);
packages = sortedPackages.filter((p) => filteredStates.includes(p.state!));
break;
case "ALL":
default:
packages = sortedPackages;
break;
}
};
packagesStore.subscribe(setPackages);
@ -45,8 +62,8 @@
setPackages(packages);
};
const toggleInstalledFilter = (installed: boolean) => {
installedOnly = installed;
const switchTab = (nextTab: "ALL" | "INSTALLED" | "INSTALLED_WITH_UPDATES") => {
tab = nextTab;
setPackages($packagesStore);
}
@ -56,8 +73,16 @@
<h1 class="text-primary text-4xl font-bold">{title}</h1>
<div class="flex">
<section class="border border-gray mr-2 rounded-sm h-10 text-gray font-thin flex">
<button on:click={() => toggleInstalledFilter(false)} class={`px-2 ${installedOnly ? "":"active"}`}>All packages</button>
<button on:click={() => toggleInstalledFilter(true)} class={`px-2 ${installedOnly ? "active":""}`}>installed only</button>
<button on:click={() => switchTab("ALL")} class={`px-2 ${tab === "ALL" && "active"}`}>All packages</button>
<button on:click={() => switchTab("INSTALLED")} class={`px-2 ${tab === "INSTALLED" && "active"}`}>installed only</button>
{#if pkgNeedsUpdateCount}
<button on:click={() => switchTab("INSTALLED_WITH_UPDATES")} class={`px-2 ${tab === "INSTALLED_WITH_UPDATES" && "active"}`}>
<div class="flex justify-center align-middle">
<div>updates</div>
<div class="bg-red text-white bg-[red] rounded-sm text-xs h-6 leading-6 px-1 ml-2">{pkgNeedsUpdateCount}</div>
</div>
</button>
{/if}
</section>
<section class="border-gray h-10 w-48 border rounded-sm">
<SortingButtons {onSort} />
@ -77,6 +102,10 @@
await installPackage(pkg);
trackInstall(pkg.full_name);
pkg.state = PackageStates.INSTALLED;
packagesStore.updatePackage(pkg.full_name, {
state: PackageStates.INSTALLED, // this would also mean its the latest version
});
} catch (error) {
let message = 'Unknown Error'
if (error instanceof Error) message = error.message

9
modules/desktop/src/libs/stores/pkgs.ts
View file

@ -32,7 +32,7 @@ export default function initPackagesStore() {
subscribe((v) => packages.push(...v));
const updatePackageProp = (full_name: string, props: Partial<GUIPackage>) => {
const updatePackage = (full_name: string, props: Partial<GUIPackage>) => {
update((pkgs) => {
const i = pkgs.findIndex((pkg) => pkg.full_name === full_name);
if (i >= 0) {
@ -72,7 +72,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
updatedPackage.license = repoData.license;
}
updatePackageProp(guiPkg.full_name!, updatedPackage);
updatePackage(guiPkg.full_name!, updatedPackage);
};
const syncPackageBottlesAndState = async (pkgName: string) => {
@ -85,7 +85,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
const installedVersions = pkg?.installed_versions?.sort((a, b) => semverCompare(b, a)) || [];
updatePackageProp(pkgName, {
updatePackage(pkgName, {
available_versions: availableVersions,
state:
availableVersions[0] === installedVersions[0]
@ -112,6 +112,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
syncPackageData(foundPackage);
}
});
}
},
updatePackage
};
}