@genesislcap/foundation-workspace 14.406.0-workspaces.7

package/src/workspace/workspace.types.ts

@@ -0,0 +1,26 @@
+/**
+ * Workspace persistence types.
+ * Layout and column state use generic shapes so consumers can use foundation-layout and ag-grid types.
+ * @alpha
+ */
+export interface SavedGridSettings {
+  gridKey: string;
+  columnState: any[];
+  savedAt: string;
+}
+
+/**
+ * @alpha
+ */
+export interface SavedFilterValue {
+  filterKey: string;
+  value: string;
+}
+
+/**
+ * @alpha
+ */
+export interface SavedLayout {
+  layoutKey: string;
+  layout: unknown;
+}

package/src/workspace-components.ts

@@ -0,0 +1,51 @@
+import type { Container } from '@microsoft/fast-foundation';
+
+// Import the custom elements so their `@customElement` decorators run and define tags.
+import { LayoutWrapper, GridRegister } from './workspace';
+import { WorkspaceManager } from './workspace-manager';
+
+/**
+ * Registration object for workspace-related components.
+ *
+ * Mirrors the shape of `rapidGridComponents` so it can be passed into
+ * `provideDesignSystem().register(...)` without additional glue code.
+ *
+ * @alpha
+ */
+export const workspaceComponents = {
+  workspaceManager: () => ({
+    register(_container?: Container, ..._rest: any[]) {
+      // Custom elements are defined by decorators at module import time.
+      void WorkspaceManager;
+    },
+  }),
+
+  layoutWrapper: () => ({
+    register(_container?: Container, ..._rest: any[]) {
+      void LayoutWrapper;
+    },
+  }),
+
+  gridRegister: () => ({
+    register(_container?: Container, ..._rest: any[]) {
+      void GridRegister;
+    },
+  }),
+
+  register(container?: Container, ...rest: any[]) {
+    if (!container) {
+      // Preserve backward compatibility with callers that iterate keys.
+      return;
+    }
+
+    for (const key in this) {
+      if (key === 'register') {
+        continue;
+      }
+
+      // The values of this object are functions that return a component
+      // registration object with a `.register(...)` method.
+      (this as any)[key]().register(container, ...rest);
+    }
+  },
+};

package/src/workspace-manager/index.ts

@@ -0,0 +1 @@
+export * from './workspace-manager';

package/src/workspace-manager/workspace-manager.styles.ts

@@ -0,0 +1,139 @@
+import { css } from '@microsoft/fast-element';
+
+export const WorkspaceManagerStyles = css`
+  .workspace-manager {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+  }
+
+  .dialog-content {
+    padding: 16px;
+    min-width: 400px;
+    max-width: 400px;
+    display: flex;
+    flex-direction: column;
+    max-height: 90vh;
+    overflow: hidden;
+  }
+
+  .button-group {
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .workspace-list {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    max-height: 400px;
+    overflow-y: auto;
+    margin: 10px 0;
+    align-items: unset;
+  }
+
+  rapid-label {
+    margin-bottom: 10px;
+    display: block;
+  }
+
+  .empty-state {
+    padding: 24px;
+    text-align: center;
+    color: var(--neutral-foreground-hint);
+  }
+
+  .save-mode-selector {
+    margin-bottom: 16px;
+  }
+
+  .warning-message {
+    margin: 12px 0;
+    padding: 12px;
+    border: 1px solid var(--warning-color);
+    border-radius: 4px;
+    font-size: 14px;
+  }
+
+  .workspace-item {
+    padding: 12px;
+    border: 1px solid var(--neutral-stroke-rest);
+    border-radius: 4px;
+    background: var(--neutral-fill-rest);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+  }
+
+  .workspace-item:hover {
+    background: var(--neutral-fill-hover);
+  }
+
+  .workspace-item::part(control) {
+    margin-top: 2px;
+  }
+
+  .workspace-info {
+    flex: 1;
+    margin-left: 8px;
+  }
+
+  .workspace-name {
+    font-weight: 600;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .workspace-date {
+    font-size: 12px;
+    color: var(--neutral-foreground-hint);
+  }
+
+  .workspace-description {
+    font-size: 12px;
+    color: var(--neutral-foreground-hint);
+    margin-top: 4px;
+    white-space: pre-wrap;
+    word-break: break-word;
+    line-height: 1.4;
+  }
+
+  .workspace-description-input {
+    width: 100%;
+    min-height: 60px;
+    padding: 8px 12px;
+    margin-bottom: 16px;
+    font-family: inherit;
+    font-size: 14px;
+    border: 1px solid var(--neutral-stroke-rest);
+    border-radius: 4px;
+    background: var(--neutral-fill-rest);
+    color: var(--neutral-foreground-rest);
+    resize: vertical;
+    box-sizing: border-box;
+  }
+
+  .workspace-description-input::placeholder {
+    color: var(--neutral-foreground-hint);
+  }
+
+  .workspace-description-input:focus {
+    outline: none;
+    border-color: var(--accent-fill-rest);
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+  }
+
+  .save-field {
+    margin-bottom: 20px;
+  }
+`;

package/src/workspace-manager/workspace-manager.template.ts

@@ -0,0 +1,352 @@
+import { sync, whenElse } from '@genesislcap/foundation-utils';
+import { ExecutionContext, html, ref, repeat, when } from '@microsoft/fast-element';
+import { SavedWorkspace, SharedWorkspace } from '../workspace/workspace-state.types';
+import type { WorkspaceManager } from './workspace-manager';
+
+export const WORKSPACE_DESCRIPTION_MAX = 200;
+
+export const WorkspaceManagerTemplate = html<WorkspaceManager>`
+  <div class="workspace-manager">
+    <rapid-button @click=${(x) => x.openSaveDialog()}>
+      <rapid-icon name="download"></rapid-icon>
+      Save Workspace
+    </rapid-button>
+    <rapid-button @click=${(x) => x.openLoadDialog()}>
+      <rapid-icon name="upload"></rapid-icon>
+      Load Workspace
+    </rapid-button>
+  </div>
+  <rapid-modal ${ref('saveModal')}>
+    <h2 slot="top">Save Workspace</h2>
+    <div class="dialog-content">
+      <div class="save-mode-selector">
+        <rapid-segmented-control value="${sync((x) => x.saveMode)}">
+          <rapid-segmented-item value="create">Create</rapid-segmented-item>
+          <rapid-segmented-item value="overwrite">Overwrite</rapid-segmented-item>
+          ${when(
+            (x) => x.canShareWorkspace,
+            html<WorkspaceManager>`
+              <rapid-segmented-item value="shared">Share</rapid-segmented-item>
+            `,
+          )}
+        </rapid-segmented-control>
+      </div>
+      ${when(
+        (x) => x.saveMode === 'create',
+        html<WorkspaceManager>`
+          <rapid-label>Workspace Name:</rapid-label>
+          <rapid-text-field
+            class="save-field"
+            :value=${(x) => x.workspaceName}
+            @input=${(x, c) => (x.workspaceName = (c.event.target as HTMLInputElement).value)}
+            placeholder="Enter workspace name"
+          ></rapid-text-field>
+          <rapid-label>
+            Description (optional, max ${WORKSPACE_DESCRIPTION_MAX} characters):
+          </rapid-label>
+          <textarea
+            class="save-field workspace-description-input"
+            :value=${(x) => x.workspaceDescription}
+            @input=${(x, c) =>
+              x.updateWorkspaceDescription((c.event.target as HTMLTextAreaElement).value)}
+            placeholder="Add a description for this workspace"
+            rows="3"
+          ></textarea>
+          ${when(
+            (x) => x.workspaceName && x.isWorkspaceExisting(x.workspaceName),
+            html`
+              <div class="warning-message">
+                <rapid-icon name="triangle-exclamation"></rapid-icon>
+                A workspace with this name already exists. Use "Overwrite Existing Workspace" to
+                replace it.
+              </div>
+            `,
+          )}
+        `,
+      )}
+      ${when(
+        (x) => x.saveMode === 'overwrite',
+        html<WorkspaceManager>`
+          ${when(
+            (x) => x.savedWorkspaces.length === 0,
+            html`
+              <div class="empty-state">No saved workspaces to overwrite</div>
+            `,
+          )}
+          <rapid-label>Select Workspace to Overwrite:</rapid-label>
+          <rapid-radio-group
+            class="workspace-list"
+            value=${sync((x) => x.selectedWorkspaceToOverwrite)}
+            orientation="vertical"
+          >
+            ${repeat(
+              (x) => x.savedWorkspaces,
+              html<SavedWorkspace>`
+                <rapid-radio value=${(x) => x.name} class="workspace-item">
+                  <div class="workspace-info">
+                    <div class="workspace-name">${(x) => x.name}</div>
+                    <div class="workspace-date">
+                      Saved: ${(x) => new Date(x.savedAt).toLocaleString()}
+                    </div>
+                    ${when(
+                      (w) => w.description,
+                      html<SavedWorkspace>`
+                        <div class="workspace-description">${(w) => w.description}</div>
+                      `,
+                    )}
+                  </div>
+                </rapid-radio>
+              `,
+            )}
+          </rapid-radio-group>
+          <rapid-label>Description (optional):</rapid-label>
+          <textarea
+            class="save-field workspace-description-input"
+            :value=${(x) => x.workspaceDescription}
+            @input=${(x, c) =>
+              x.updateWorkspaceDescription((c.event.target as HTMLTextAreaElement).value)}
+            placeholder="Add a description for this workspace"
+            rows="3"
+          ></textarea>
+          <div class="warning-message">
+            <rapid-icon name="triangle-exclamation"></rapid-icon>
+            This will permanently replace the selected workspace. This action cannot be undone.
+          </div>
+        `,
+      )}
+      ${when(
+        (x) => x.saveMode === 'shared',
+        html<WorkspaceManager>`
+          <h3>Share existing workspace:</h3>
+          ${whenElse(
+            (x) => x.savedWorkspaces.length === 0,
+            html`
+              <div class="empty-state">No saved workspaces to share</div>
+            `,
+            html<WorkspaceManager>`
+              <div class="workspace-list">
+                ${repeat(
+                  (x) => x.savedWorkspaces,
+                  html<SavedWorkspace>`
+                    <div class="workspace-item">
+                      <div class="workspace-info">
+                        <div class="workspace-name">${(w) => w.name}</div>
+                        <div class="workspace-date">
+                          Saved: ${(w) => new Date(w.savedAt).toLocaleString()}
+                        </div>
+                        ${when(
+                          (w) => w.description,
+                          html<SavedWorkspace>`
+                            <div class="workspace-description">${(w) => w.description}</div>
+                          `,
+                        )}
+                      </div>
+                      <div class="button-group">
+                        <rapid-button
+                          appearance="primary"
+                          @click=${(w, c: ExecutionContext<WorkspaceManager>) =>
+                            c.parent.shareExistingWorkspace(w.name)}
+                        >
+                          Share
+                        </rapid-button>
+                      </div>
+                    </div>
+                  `,
+                )}
+              </div>
+            `,
+          )}
+          <h3>My Shared Workspaces</h3>
+          ${whenElse(
+            (x) =>
+              x.sharedWorkspaces.filter((w) => w.userName === x.auth?.loggedUserResult?.username)
+                .length === 0,
+            html`
+              <div class="empty-state">You have not shared any workspaces</div>
+            `,
+            html<WorkspaceManager>`
+              <div class="workspace-list">
+                ${repeat(
+                  (x) =>
+                    x.sharedWorkspaces.filter(
+                      (w) => w.userName === x.auth?.loggedUserResult?.username,
+                    ),
+                  html<SharedWorkspace>`
+                    <div class="workspace-item">
+                      <div class="workspace-info">
+                        <div class="workspace-name">${(w) => w.name}</div>
+                        <div class="workspace-date">
+                          Shared on
+                          ${(w) => new Date((w.modifiedOn || w.createdOn) as any).toLocaleString()}
+                        </div>
+                        ${when(
+                          (w) => w.description,
+                          html<SharedWorkspace>`
+                            <div class="workspace-description">${(w) => w.description}</div>
+                          `,
+                        )}
+                      </div>
+                      <div class="button-group">
+                        <rapid-button
+                          appearance="primary"
+                          @click=${(w, c: ExecutionContext<WorkspaceManager>) =>
+                            c.parent.modifySharedWorkspace(w)}
+                        >
+                          Save
+                        </rapid-button>
+                        <rapid-button
+                          appearance="danger"
+                          @click=${(w, c: ExecutionContext<WorkspaceManager>) =>
+                            c.parent.confirmDeleteSharedWorkspace(w)}
+                        >
+                          Delete
+                        </rapid-button>
+                      </div>
+                    </div>
+                  `,
+                )}
+              </div>
+            `,
+          )}
+        `,
+      )}
+      <div class="button-group">
+        <rapid-button
+          @click=${(x) => x.saveWorkspace()}
+          appearance="primary"
+          ?disabled=${(x) =>
+            (x.saveMode === 'create' && !x.workspaceName.trim()) ||
+            (x.saveMode === 'overwrite' && !x.selectedWorkspaceToOverwrite) ||
+            x.saveMode === 'shared' ||
+            (x.workspaceName && x.isWorkspaceExisting(x.workspaceName))}
+        >
+          ${(x) =>
+            x.saveMode === 'create' ? 'Create' : x.saveMode === 'overwrite' ? 'Overwrite' : 'Save'}
+        </rapid-button>
+        <rapid-button appearance="outline" @click=${(x) => x.closeSaveDialog()}>
+          Cancel
+        </rapid-button>
+      </div>
+      <div class="workspace-dialog-boundary" ${ref('sharedWorkspaceDialogBoundary')}></div>
+    </div>
+  </rapid-modal>
+  <rapid-modal ${ref('loadModal')}>
+    <h2 slot="top">Load Workspace</h2>
+    <div class="dialog-content">
+      ${when(
+        (x) => x.applyingWorkspace || x.isLoading,
+        html`
+          <div class="loading-container">
+            <div>Loading...</div>
+          </div>
+        `,
+      )}
+      ${when(
+        (x) => !x.applyingWorkspace,
+        html<WorkspaceManager>`
+          <rapid-segmented-control value="${sync((x) => x.loadMode)}">
+            <rapid-segmented-item value="MY">My Workspaces</rapid-segmented-item>
+            <rapid-segmented-item value="SHARED">Shared Workspaces</rapid-segmented-item>
+          </rapid-segmented-control>
+          ${when(
+            (x) => x.loadMode === 'MY',
+            html`
+              <div class="workspace-list">
+                ${repeat(
+                  (x) => x.savedWorkspaces,
+                  html<SavedWorkspace>`
+                    <div class="workspace-item">
+                      <div class="workspace-info">
+                        <div class="workspace-name">${(w) => w.name}</div>
+                        <div class="workspace-date">
+                          Saved: ${(w) => new Date(w.savedAt).toLocaleString()}
+                        </div>
+                        ${when(
+                          (w) => w.description,
+                          html<SavedWorkspace>`
+                            <div class="workspace-description">${(w) => w.description}</div>
+                          `,
+                        )}
+                      </div>
+                      <div class="button-group">
+                        <rapid-button
+                          appearance="primary"
+                          @click=${(w, c: ExecutionContext<WorkspaceManager>) =>
+                            c.parent.loadWorkspace(w.name)}
+                        >
+                          Load
+                        </rapid-button>
+                        <rapid-button
+                          appearance="danger"
+                          @click=${(w, c: ExecutionContext<WorkspaceManager>) =>
+                            c.parent.confirmDeleteWorkspace(w.name)}
+                        >
+                          Delete
+                        </rapid-button>
+                      </div>
+                    </div>
+                  `,
+                )}
+                ${when(
+                  (x) => x.savedWorkspaces.length === 0,
+                  html`
+                    <div class="empty-state">No saved workspaces found</div>
+                  `,
+                )}
+              </div>
+            `,
+          )}
+          ${when(
+            (x) => x.loadMode === 'SHARED',
+            html`
+              <div class="workspace-section">
+                <div class="workspace-list">
+                  ${repeat(
+                    (x) => x.sharedWorkspaces,
+                    html<SharedWorkspace>`
+                      <div class="workspace-item">
+                        <div class="workspace-info">
+                          <div class="workspace-name">${(w) => w.name}</div>
+                          <div class="workspace-date">
+                            Shared by ${(w) => w.userName} ·
+                            ${(w) =>
+                              new Date((w.modifiedOn || w.createdOn) as any).toLocaleString()}
+                          </div>
+                          ${when(
+                            (w) => w.description,
+                            html<SharedWorkspace>`
+                              <div class="workspace-description">${(w) => w.description}</div>
+                            `,
+                          )}
+                        </div>
+                        <div class="button-group">
+                          <rapid-button
+                            appearance="primary"
+                            @click=${(w, c: ExecutionContext<WorkspaceManager>) =>
+                              c.parent.loadSharedWorkspace(w)}
+                          >
+                            Load
+                          </rapid-button>
+                        </div>
+                      </div>
+                    `,
+                  )}
+                </div>
+                ${when(
+                  (x) => x.sharedWorkspaces.length === 0,
+                  html`
+                    <div class="empty-state">No shared workspaces available</div>
+                  `,
+                )}
+              </div>
+            `,
+          )}
+        `,
+      )}
+      <div class="button-group">
+        <rapid-button appearance="outline" @click=${(x) => x.closeLoadDialog()}>Close</rapid-button>
+      </div>
+    </div>
+    <div class="workspace-dialog-boundary" ${ref('dialogBoundary')}></div>
+  </rapid-modal>
+`;