Files
registry/ts_web/elements/sg-view-tokens.ts

73 lines
1.9 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-tokens')
export class SgViewTokens extends DeesElement {
@state()
accessor tokensState: appstate.ITokensState = { tokens: [] };
@state()
accessor organizationsState: appstate.IOrganizationsState = {
organizations: [],
currentOrg: null,
repositories: [],
members: [],
};
constructor() {
super();
const tokenSub = appstate.tokensStatePart
.select((s) => s)
.subscribe((s) => {
this.tokensState = s;
});
this.rxSubscriptions.push(tokenSub);
const orgSub = appstate.organizationsStatePart
.select((s) => s)
.subscribe((s) => {
this.organizationsState = s;
});
this.rxSubscriptions.push(orgSub);
}
public static styles = [
cssManager.defaultStyles,
shared.viewHostCss,
];
async connectedCallback() {
super.connectedCallback();
await appstate.tokensStatePart.dispatchAction(appstate.fetchTokensAction, {});
await appstate.organizationsStatePart.dispatchAction(appstate.fetchOrganizationsAction, null);
}
public render(): TemplateResult {
return html`
<sg-tokens-view
.tokens="${this.tokensState.tokens}"
.organizations="${this.organizationsState.organizations}"
@create="${(e: CustomEvent) => this.createToken(e.detail)}"
@revoke="${(e: CustomEvent) => this.revokeToken(e.detail.tokenId)}"
></sg-tokens-view>
`;
}
private async createToken(detail: any) {
await appstate.tokensStatePart.dispatchAction(appstate.createTokenAction, detail);
}
private async revokeToken(tokenId: string) {
await appstate.tokensStatePart.dispatchAction(appstate.revokeTokenAction, { tokenId });
}
}