133 lines
3.5 KiB
TypeScript
133 lines
3.5 KiB
TypeScript
import * as appstate from '../appstate.js';
|
|
import * as shared from './shared/index.js';
|
|
import {
|
|
css,
|
|
cssManager,
|
|
customElement,
|
|
DeesElement,
|
|
html,
|
|
state,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
@customElement('sg-view-public-packages')
|
|
export class SgViewPublicPackages extends DeesElement {
|
|
@state()
|
|
accessor packagesState: appstate.IPackagesState = {
|
|
packages: [],
|
|
currentPackage: null,
|
|
versions: [],
|
|
total: 0,
|
|
query: '',
|
|
protocolFilter: '',
|
|
};
|
|
|
|
@state()
|
|
accessor detailPackageId: string | null = null;
|
|
|
|
@state()
|
|
accessor loading: boolean = false;
|
|
|
|
constructor() {
|
|
super();
|
|
const pkgSub = appstate.packagesStatePart
|
|
.select((s) => s)
|
|
.subscribe((s) => {
|
|
this.packagesState = s;
|
|
this.loading = false;
|
|
});
|
|
this.rxSubscriptions.push(pkgSub);
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
shared.viewHostCss,
|
|
];
|
|
|
|
async connectedCallback() {
|
|
super.connectedCallback();
|
|
this.loading = true;
|
|
await appstate.packagesStatePart.dispatchAction(
|
|
appstate.searchPackagesAction,
|
|
{ offset: 0 },
|
|
);
|
|
this.loading = false;
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
if (this.detailPackageId && this.packagesState.currentPackage) {
|
|
return html`
|
|
<sg-package-detail-view
|
|
.package="${this.packagesState.currentPackage}"
|
|
.versions="${this.packagesState.versions}"
|
|
@back="${() => this.goBack()}"
|
|
></sg-package-detail-view>
|
|
`;
|
|
}
|
|
|
|
return html`
|
|
<sg-public-search-view
|
|
.packages="${this.packagesState.packages}"
|
|
.total="${this.packagesState.total}"
|
|
.query="${this.packagesState.query}"
|
|
.activeProtocol="${this.packagesState.protocolFilter}"
|
|
.protocols="${['npm', 'oci', 'maven', 'cargo', 'pypi', 'composer', 'rubygems']}"
|
|
.loading="${this.loading}"
|
|
@search="${(e: CustomEvent) => this.search(e.detail.query)}"
|
|
@filter="${(e: CustomEvent) => this.filter(e.detail.protocol)}"
|
|
@select="${(e: CustomEvent) => this.selectPackage(e.detail.packageId)}"
|
|
@page="${(e: CustomEvent) => this.paginate(e.detail.offset)}"
|
|
></sg-public-search-view>
|
|
`;
|
|
}
|
|
|
|
private async selectPackage(packageId: string) {
|
|
this.detailPackageId = packageId;
|
|
await appstate.packagesStatePart.dispatchAction(
|
|
appstate.fetchPackageAction,
|
|
{ packageId },
|
|
);
|
|
await appstate.packagesStatePart.dispatchAction(
|
|
appstate.fetchPackageVersionsAction,
|
|
{ packageId },
|
|
);
|
|
}
|
|
|
|
private goBack() {
|
|
this.detailPackageId = null;
|
|
appstate.packagesStatePart.setState({
|
|
...appstate.packagesStatePart.getState(),
|
|
currentPackage: null,
|
|
versions: [],
|
|
});
|
|
}
|
|
|
|
private async search(query: string) {
|
|
this.loading = true;
|
|
await appstate.packagesStatePart.dispatchAction(
|
|
appstate.searchPackagesAction,
|
|
{ query, protocol: this.packagesState.protocolFilter, offset: 0 },
|
|
);
|
|
}
|
|
|
|
private async filter(protocol: string) {
|
|
this.loading = true;
|
|
await appstate.packagesStatePart.dispatchAction(
|
|
appstate.searchPackagesAction,
|
|
{ query: this.packagesState.query, protocol, offset: 0 },
|
|
);
|
|
}
|
|
|
|
private async paginate(offset: number) {
|
|
this.loading = true;
|
|
await appstate.packagesStatePart.dispatchAction(
|
|
appstate.searchPackagesAction,
|
|
{
|
|
query: this.packagesState.query,
|
|
protocol: this.packagesState.protocolFilter,
|
|
offset,
|
|
},
|
|
);
|
|
}
|
|
}
|