initial

2026-02-24 12:29:58 +00:00
commit 3fad287a29
58 changed files with 3999 additions and 0 deletions
--- a/ts_web/elements/views/projects/index.ts
+++ b/ts_web/elements/views/projects/index.ts
@@ -0,0 +1,120 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-projects')
+export class GitopsViewProjects extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  @state()
+  accessor selectedConnectionId: string = '';
+
+  constructor() {
+    super();
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    const dataSub = appstate.dataStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.dataState = s; });
+    this.rxSubscriptions.push(dataSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    return html`
+      <div class="view-title">Projects</div>
+      <div class="view-description">Browse projects from your connected providers</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Connection'}
+          .options=${connectionOptions}
+          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedConnectionId = e.detail.key;
+            this.loadProjects();
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.loadProjects()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Projects'}
+        .heading2=${'Repositories from the selected connection'}
+        .data=${this.dataState.projects}
+        .displayFunction=${(item: any) => ({
+          Name: item.name,
+          Path: item.fullPath,
+          Visibility: item.visibility,
+          Branch: item.defaultBranch,
+          'Last Activity': item.lastActivity ? new Date(item.lastActivity).toLocaleDateString() : '-',
+        })}
+        .dataActions=${[
+          {
+            name: 'View Secrets',
+            iconName: 'lucide:key',
+            action: async (item: any) => {
+              appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'secrets' });
+            },
+          },
+          {
+            name: 'View Pipelines',
+            iconName: 'lucide:play',
+            action: async (item: any) => {
+              appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'pipelines' });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    const conns = appstate.connectionsStatePart.getState().connections;
+    if (conns.length > 0 && !this.selectedConnectionId) {
+      this.selectedConnectionId = conns[0].id;
+      await this.loadProjects();
+    }
+  }
+
+  private async loadProjects() {
+    if (!this.selectedConnectionId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
+      connectionId: this.selectedConnectionId,
+    });
+  }
+}