@genesislcap/foundation-workspace 14.406.0-workspaces.7

package/dist/esm/workspace-manager/workspace-manager.template.js

@@ -0,0 +1,259 @@
+import { sync, whenElse } from '@genesislcap/foundation-utils';
+import { html, ref, repeat, when } from '@microsoft/fast-element';
+export const WORKSPACE_DESCRIPTION_MAX = 200;
+export const WorkspaceManagerTemplate = html `
+  <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 `
+              <rapid-segmented-item value="shared">Share</rapid-segmented-item>
+            `)}
+        </rapid-segmented-control>
+      </div>
+      ${when((x) => x.saveMode === 'create', html `
+          <rapid-label>Workspace Name:</rapid-label>
+          <rapid-text-field
+            class="save-field"
+            :value=${(x) => x.workspaceName}
+            @input=${(x, c) => (x.workspaceName = c.event.target.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.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 `
+          ${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 `
+                <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 `
+                        <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.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 `
+          <h3>Share existing workspace:</h3>
+          ${whenElse((x) => x.savedWorkspaces.length === 0, html `
+              <div class="empty-state">No saved workspaces to share</div>
+            `, html `
+              <div class="workspace-list">
+                ${repeat((x) => x.savedWorkspaces, html `
+                    <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 `
+                            <div class="workspace-description">${(w) => w.description}</div>
+                          `)}
+                      </div>
+                      <div class="button-group">
+                        <rapid-button
+                          appearance="primary"
+                          @click=${(w, c) => c.parent.shareExistingWorkspace(w.name)}
+                        >
+                          Share
+                        </rapid-button>
+                      </div>
+                    </div>
+                  `)}
+              </div>
+            `)}
+          <h3>My Shared Workspaces</h3>
+          ${whenElse((x) => x.sharedWorkspaces.filter((w) => { var _a, _b; return w.userName === ((_b = (_a = x.auth) === null || _a === void 0 ? void 0 : _a.loggedUserResult) === null || _b === void 0 ? void 0 : _b.username); })
+    .length === 0, html `
+              <div class="empty-state">You have not shared any workspaces</div>
+            `, html `
+              <div class="workspace-list">
+                ${repeat((x) => x.sharedWorkspaces.filter((w) => { var _a, _b; return w.userName === ((_b = (_a = x.auth) === null || _a === void 0 ? void 0 : _a.loggedUserResult) === null || _b === void 0 ? void 0 : _b.username); }), html `
+                    <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)).toLocaleString()}
+                        </div>
+                        ${when((w) => w.description, html `
+                            <div class="workspace-description">${(w) => w.description}</div>
+                          `)}
+                      </div>
+                      <div class="button-group">
+                        <rapid-button
+                          appearance="primary"
+                          @click=${(w, c) => c.parent.modifySharedWorkspace(w)}
+                        >
+                          Save
+                        </rapid-button>
+                        <rapid-button
+                          appearance="danger"
+                          @click=${(w, c) => 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 `
+          <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 `
+                    <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 `
+                            <div class="workspace-description">${(w) => w.description}</div>
+                          `)}
+                      </div>
+                      <div class="button-group">
+                        <rapid-button
+                          appearance="primary"
+                          @click=${(w, c) => c.parent.loadWorkspace(w.name)}
+                        >
+                          Load
+                        </rapid-button>
+                        <rapid-button
+                          appearance="danger"
+                          @click=${(w, c) => 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 `
+                      <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)).toLocaleString()}
+                          </div>
+                          ${when((w) => w.description, html `
+                              <div class="workspace-description">${(w) => w.description}</div>
+                            `)}
+                        </div>
+                        <div class="button-group">
+                          <rapid-button
+                            appearance="primary"
+                            @click=${(w, c) => 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>
+`;