@pb33f/cowboy-components 0.7.8 → 0.7.9

package/dist/components/the-doctor/the-doctor.css.js

@@ -48,6 +48,22 @@ export default css `
         box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
         background: var(--secondary-color-lowalpha);
         padding: var(--global-padding);
+    }   
+    
+    .workspace-icon {
+        font-size: 1.25rem;
+    }
+    
+    .workspace-icon::part(base) {
+        padding: 0;
+    }
+
+    .workspace-icon.active {
+        color: var(--primary-color);
+    }
+
+    .tab.hidden {
+        display: none;
     }
 
 

package/dist/components/the-doctor/the-doctor.d.ts

@@ -54,6 +54,7 @@ import { DocsController } from '../../controllers/docs-controller.js';
 import { ModelController } from '../../controllers/model-controller.js';
 import { DiagnosticController } from '../../controllers/diagnostic-controller.js';
 import { StateController } from '../../controllers/state-controller.js';
+import { WorkspaceController } from "../../controllers/workspace-controller";
 export declare const GraphBag = "pb33f-doctor-graph";
 export declare const PanelStateBag = "pb33f-doctor-panel-state";
 export declare const RolodexResponseBag = "pb33f-doctor-rolodex-response";
@@ -178,6 +179,7 @@ export declare class TheDoctor extends LitElement {
     readonly modelController: ModelController;
     readonly diagnosticController: DiagnosticController;
     readonly stateController: StateController;
+    readonly workspaceController: WorkspaceController;
     editorMap: Map<string, SpecEditor>;
     selectedEditorTab: string;
     sidebarClosed: boolean;
@@ -226,6 +228,7 @@ export declare class TheDoctor extends LitElement {
     platformUnavailable(error: PlatformError | null): void;
     builtInRulesetSelected(): void;
     runDiagnostics(): void;
+    reboot(): void;
     boostrap(): void;
     confirmExport(): void;
     closeWelcome(): void;

package/dist/components/the-doctor/the-doctor.js

@@ -16,7 +16,7 @@ import '@shoelace-style/shoelace/dist/components/avatar/avatar.js';
 import { customElement, property, query, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { SpecEditor } from "../editor/editor.js";
-import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CreditEmpty, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerNodeClicked, ExportRuleset, LoadRenderedNodeIntoInspector, ModelTreeNodeClicked, NodeReferenceClicked, NukeWorkspaceEvent, OpenProblemDrawer, OpenSettings, ProblemClicked, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, StartSessionFailed, } from "../../events/doctor.js";
+import { ActiveView, AddToast, ArchiveURLRequested, BuiltInRulesetChanged, CreditEmpty, CustomRulesetEnabled, DocumentReferenceClicked, EditorClicked, EditorUpdated, ExplorerEqualizerChanged, ExplorerEqualizerFiltered, ExplorerNodeClicked, ExportRuleset, LoadRenderedNodeIntoInspector, ModelTreeNodeClicked, NodeReferenceClicked, NukeWorkspaceEvent, OpenProblemDrawer, OpenSettings, ProblemClicked, Reboot, RolodexRootFileSelected, RolodexTreeNodeClicked, RuleClicked, RulesetSaved, RuleViolationClicked, StartSessionFailed, } from "../../events/doctor.js";
 import { ProblemDetailsDrawer } from "../problem-list/details-drawer.js";
 import { CreateBagManager } from "@pb33f/saddlebag";
 import { LintingService } from "../../services/linting-service.js";
@@ -66,6 +66,8 @@ import { DocsController } from '../../controllers/docs-controller.js';
 import { ModelController } from '../../controllers/model-controller.js';
 import { DiagnosticController } from '../../controllers/diagnostic-controller.js';
 import { StateController } from '../../controllers/state-controller.js';
+import { WorkspaceController } from "../../controllers/workspace-controller";
+import { WorkspaceService } from 'src/services/workspace-service.js';
 export const GraphBag = "pb33f-doctor-graph";
 export const PanelStateBag = "pb33f-doctor-panel-state";
 export const RolodexResponseBag = "pb33f-doctor-rolodex-response";
@@ -113,6 +115,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         ModelService.doctorEndpoint = this.doctorEndpoint;
         AuthService.doctorEndpoint = this.doctorEndpoint;
         TimelineService.doctorEndpoint = this.doctorEndpoint;
+        WorkspaceService.doctorEndpoint = this.doctorEndpoint;
         this.timeVortex = new TimeVortex();
         // bus it up
         this.bus = CreateBus();
@@ -156,6 +159,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.problemController = new ProblemController(this);
         this.docsController = new DocsController(this);
         this.diagnosticController = new DiagnosticController(this);
+        this.workspaceController = new WorkspaceController(this);
         this.settingsComponent = new DoctorSettings();
         this.editorMap = new Map();
         this.editorMap.set("spec", this.editor);
@@ -197,6 +201,10 @@ let TheDoctor = class TheDoctor extends LitElement {
             }
             this.creditTicker.visible = true;
             this.brokerController.connectToBroker();
+            // if the session is authenticated, then fetch a list of workspaces for the user.
+            if (this.authController.authenticated) {
+                this.workspaceController.getWorkspaces();
+            }
         };
         // create auth controller
         this.authController = new AuthController(this, sessionCallback, true);
@@ -253,6 +261,7 @@ let TheDoctor = class TheDoctor extends LitElement {
         this.authController.addEventListener(CreditEmpty, this.creditEmpty.bind(this));
         //@ts-ignore
         this.addEventListener(LoadRenderedNodeIntoInspector, this.loadRenderedNodeIntoInspector.bind(this));
+        this.addEventListener(Reboot, this.reboot.bind(this));
         // hijack navigation buttons.
         window.addEventListener('popstate', (e) => {
             const state = e.state;
@@ -432,6 +441,21 @@ let TheDoctor = class TheDoctor extends LitElement {
             this.diagnosticController.lintSpec(this.editor.getValue());
         }
     }
+    reboot() {
+        // for when we need to switch workspaces, and everything needs an update.
+        ModelService.getCurrentSpec().then((result) => {
+            this.rolodexController.queryRolodex();
+            this.timeVortex.checkHistory();
+            this.editor.setValue(result, true);
+            this.rolodexActivePath = "";
+            this.specController.specChanged(new CustomEvent(EditorUpdated, {
+                detail: {
+                    content: result,
+                    id: "spec"
+                }
+            }));
+        });
+    }
     boostrap() {
         // if the url is set in the query string, fetch it and run a lint with the URL
         const url = new URL(window.location.href);
@@ -572,12 +596,14 @@ let TheDoctor = class TheDoctor extends LitElement {
                 title: "Safari Warning"
             });
         }
+        this.workspaceController.workspaceView.active = false;
     }
     hideMinimapIcon() {
         this.minimapIconVisible = false;
     }
     hideDiagnosisButton() {
         this.showDiagnosisButton = false;
+        this.workspaceController.workspaceView.active = false;
     }
     enableDiagnosisButton() {
         if (!this.autoDiagnose) {
@@ -779,8 +805,20 @@ let TheDoctor = class TheDoctor extends LitElement {
                                 <sl-tab-group class="tab-group" @sl-tab-show="${this.selectEditorTab}"
                                               id="editor-controls">
 
-                                    <sl-tab slot="nav" panel="spec" class="tab" id="spec"
+                                    <sl-tab slot="nav" panel="workspaces" class="tab ${!this.authController.authenticated ? 'hidden' : ''}" id="workspaces"
+                                            @click="${() => {
+            this.selectedEditorTab = 'workspaces';
+            this.toggleExplorer();
+            this.hideDiagnosisButton();
+            this.workspaceController.workspaceView.active = true;
+        }}">
+                                        <sl-icon-button name="person-workspace"
+                                                        class="workspace-icon ${this.selectedEditorTab === 'workspaces' ? 'active' : ''}"></sl-icon-button>
+                                    </sl-tab>
+
+                                    <sl-tab slot="nav" panel="spec" class="tab" id="spec" active
                                             @click="${() => {
+            this.selectedEditorTab = 'spec';
             this.closeExplorer();
             this.enableDiagnosisButton();
         }}">
@@ -788,6 +826,7 @@ let TheDoctor = class TheDoctor extends LitElement {
                                     </sl-tab>
                                     <sl-tab slot="nav" panel="explorer" class="tab" id="explorer"
                                             @click="${() => {
+            this.selectedEditorTab = 'explorer';
             this.toggleExplorer();
             this.hideDiagnosisButton();
         }}">Explorer
@@ -861,9 +900,16 @@ let TheDoctor = class TheDoctor extends LitElement {
                                     </sl-tab-panel>
 
                                     <sl-tab-panel name="docs" class="tab-panel" style="height: calc(100vh - 100px)">
-                                        <iframe src="${this.doctorEndpoint}/model/scalar-template?z=${this.randomTicker}" width="100%" height="100%" style="border: none"></iframe>
+
                                     </sl-tab-panel>
 
+                                    ${this.authController.authenticated ? html `
+
+                                        <sl-tab-panel name="workspaces" class="tab-panel">
+                                            ${this.workspaceController.workspaceView}
+                                        </sl-tab-panel>
+                                    ` : ''}
+
                                 </sl-tab-group>
                             </div>
                             ${mainPanelView}

package/dist/components/time-vortex/tardis-control.css.js

@@ -98,23 +98,7 @@ export default css `
         text-align: center;
     }
 
-    .spinner-icon {
-        display: block;
-        margin: 20px auto 0 auto;
-        width: 200px;
-        color: var(--primary-color);
-        font-size: 6rem;
-        animation: spin 2s linear infinite;
-    }
 
-    @keyframes spin {
-        0% {
-            transform: rotate(0deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
-    }
 
     .tardis-split-panel {
         --min: 300px;

package/dist/components/workspaces/workspace-destroy-dialog.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from "lit";
+import { Workspace } from "../../model/workspace.js";
+import { SlDialog } from "@shoelace-style/shoelace";
+import { PlatformError } from "../../model/errors.js";
+export declare class WorkspaceDestroyView extends LitElement {
+    static styles: import("lit").CSSResult[];
+    destroyWorkspaceDialog: SlDialog;
+    workspace: Workspace | undefined;
+    error: PlatformError | undefined;
+    show(): void;
+    hide(): Promise<void>;
+    setError(error: PlatformError): void;
+    clearError(): void;
+    private handleCancel;
+    private handleDestroy;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/workspaces/workspace-destroy-dialog.js

@@ -0,0 +1,85 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement } from "lit";
+import { customElement, property, state, query } from "lit/decorators.js";
+import { AttentionType } from "../attention-box/attention-box.js";
+import dialogCss from "../../css/dialog.css.js";
+import buttonsCss from "../../css/button.css.js";
+import hrCss from "../../css/hr.css.js";
+let WorkspaceDestroyView = class WorkspaceDestroyView extends LitElement {
+    show() {
+        this.destroyWorkspaceDialog.show();
+    }
+    hide() {
+        this.error = undefined;
+        return this.destroyWorkspaceDialog.hide();
+    }
+    setError(error) {
+        this.error = error;
+    }
+    clearError() {
+        this.error = undefined;
+    }
+    handleCancel() {
+        this.dispatchEvent(new CustomEvent('cancel', {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    handleDestroy() {
+        this.dispatchEvent(new CustomEvent('destroy', {
+            bubbles: true,
+            composed: true,
+            detail: this.workspace
+        }));
+    }
+    render() {
+        let attentionBox = html `
+            <pb33f-attention-box type="${AttentionType.Warning}" headerText="This is a permanent, destructive process">
+                All files, records, history and scores for this workspace will be wiped out permanently. There is no
+                undo process, if you hit OK - the workspace will be nuked and permanently destroyed.
+            </pb33f-attention-box>`;
+        if (this.error) {
+            attentionBox = html `
+                <pb33f-attention-box type="${AttentionType.Error}"
+                                     headerText="Workspace could not be deleted">
+                   Something went wrong: <strong>${this.error.detail}</strong>
+                </pb33f-attention-box>`;
+        }
+        return html `
+            <sl-dialog id="destroy-workspace" label="Delete workspace, are you sure?">
+                You're about to destroy the workspace '<strong>${this.workspace?.name}</strong>'
+                <hr/>
+                
+                ${attentionBox}
+
+                <sl-button @click="${this.handleCancel}" class="cancel-button">
+                    Cancel
+                </sl-button>
+
+                <sl-button @click="${this.handleDestroy}" style="float: right" class="danger">
+                    Do it, destroy it.
+                </sl-button>
+                
+            </sl-dialog>
+        `;
+    }
+};
+WorkspaceDestroyView.styles = [dialogCss, buttonsCss, hrCss];
+__decorate([
+    query('sl-dialog#destroy-workspace')
+], WorkspaceDestroyView.prototype, "destroyWorkspaceDialog", void 0);
+__decorate([
+    property()
+], WorkspaceDestroyView.prototype, "workspace", void 0);
+__decorate([
+    state()
+], WorkspaceDestroyView.prototype, "error", void 0);
+WorkspaceDestroyView = __decorate([
+    customElement("pb33f-workspace-destroy-dialog")
+], WorkspaceDestroyView);
+export { WorkspaceDestroyView };

package/dist/components/workspaces/workspace-form.d.ts

@@ -0,0 +1,22 @@
+import { SlDialog } from "@shoelace-style/shoelace";
+import { Formable } from "../../model/formable.js";
+import { Workspace } from "../../model/workspace.js";
+import { PlatformError } from "../../model/errors.js";
+export declare class WorkspaceForm extends Formable {
+    static styles: import("lit").CSSResult[];
+    workspaceDialog: SlDialog;
+    active: boolean;
+    open: boolean;
+    workspaceModel: Workspace;
+    isEditMode: boolean;
+    constructor();
+    private handleFormDirty;
+    setEditMode(workspace: Workspace): void;
+    setCreateMode(): void;
+    close(): void;
+    completed(ws: Workspace): void;
+    private handleSubmit;
+    handleError(err: PlatformError): void;
+    handleSuccess(workspace: Workspace): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/workspaces/workspace-form.js

@@ -0,0 +1,194 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html } from "lit";
+import { customElement, state, query, property } from "lit/decorators.js";
+import { Formable } from "../../model/formable.js";
+import { RenderType } from "../../model/form-types.js";
+import { FormDirtyEvent, FormSubmitComplete, CreateWorkspace, UpdateWorkspace } from "../../events/doctor.js";
+import dialogCss from "../../css/dialog.css.js";
+let WorkspaceForm = class WorkspaceForm extends Formable {
+    constructor() {
+        super();
+        this.isEditMode = false;
+        this.open = false;
+        this.autoFocus = true; // Enable autofocus for workspace form
+        this.workspaceModel = {
+            name: '',
+            active: false
+        };
+        this.model = this.workspaceModel;
+        // Set up hints including hidden field for ID
+        this.setHints([
+            {
+                key: 'name',
+                renderType: RenderType.Text,
+                placeholder: 'workspace name',
+                helpText: 'Choose a unique name for your workspace',
+                required: true
+            },
+            {
+                key: 'workspaceId',
+                renderType: RenderType.Hidden
+            },
+            {
+                key: 'active',
+                renderType: RenderType.Ignored
+            },
+            {
+                key: 'default',
+                renderType: RenderType.Ignored
+            }
+        ]);
+        this.addEventListener(FormDirtyEvent, this.handleFormDirty.bind(this));
+        // Set up form submission callback for Enter key handling
+        this.onFormSubmit = this.handleSubmit.bind(this);
+    }
+    handleFormDirty(_) {
+        // do nothing
+    }
+    setEditMode(workspace) {
+        this.isEditMode = true;
+        this.wipeModel(workspace);
+        this.workspaceModel = { ...workspace };
+        this.model = this.workspaceModel;
+    }
+    setCreateMode() {
+        this.isEditMode = false;
+        this.wipeModel({
+            name: '',
+            active: false
+        });
+    }
+    close() {
+        this.setCreateMode();
+        this.open = false;
+    }
+    completed(ws) {
+        this.dispatchEvent(new CustomEvent(FormSubmitComplete, {
+            bubbles: true,
+            composed: true,
+            detail: ws
+        }));
+        this.close();
+    }
+    async handleSubmit() {
+        const formData = this.renderForm();
+        // Clear any previous errors
+        this.clearErrors();
+        this.clearTopError();
+        // Validation example
+        if (!formData.name || formData.name.trim() === '') {
+            // Show field-specific error
+            this.renderErrors([{
+                    key: 'name',
+                    message: 'A name is required'
+                }]);
+            return;
+        }
+        if (this.isEditMode) {
+            this.setLoading('Updating workspace...');
+            this.dispatchEvent(new CustomEvent(UpdateWorkspace, {
+                bubbles: true,
+                composed: true,
+                detail: formData
+            }));
+        }
+        else {
+            this.setLoading('Creating workspace...');
+            this.dispatchEvent(new CustomEvent(CreateWorkspace, {
+                bubbles: true,
+                composed: true,
+                detail: formData.name
+            }));
+        }
+    }
+    handleError(err) {
+        this.notLoading();
+        switch (err.status) {
+            case 400:
+            case 401:
+                this.setTopError({
+                    key: 'server',
+                    message: err.detail,
+                });
+                break;
+            case 402:
+                this.setTopError({
+                    key: 'server',
+                    message: "You don't have enough credit! A new workspace costs five credits.",
+                });
+                this.renderErrors([{
+                        key: 'name',
+                        message: 'More credit required.'
+                    }]);
+                break;
+            case 403:
+                this.setTopError({
+                    key: 'server',
+                    message: err.detail,
+                });
+                this.renderErrors([{
+                        key: 'name',
+                        message: 'All maxed out, delete a workspace before creating new ones.'
+                    }]);
+                break;
+            case 409:
+                this.setTopError({
+                    key: 'server',
+                    message: err.detail
+                });
+                this.renderErrors([{
+                        key: 'name',
+                        message: "There is a conflict",
+                    }]);
+                break;
+        }
+    }
+    handleSuccess(workspace) {
+        this.notLoading();
+        this.completed(workspace);
+    }
+    render() {
+        const dialogLabel = this.isEditMode ? 'Edit workspace' : 'Create workspace';
+        const submitButtonText = this.isEditMode ? 'Update' : 'Create';
+        return html `
+            <sl-dialog .open=${this.open}
+                       @sl-hide="${() => {
+            this.close();
+        }}"
+                       label="${dialogLabel}">
+
+                ${this.renderModel()}
+
+                <section class="form-controls">
+                    ${this.renderCancelButton(() => this.close())}
+                    ${this.renderActionButton(submitButtonText, this.handleSubmit)}
+                </section>
+            </sl-dialog>
+        `;
+    }
+};
+WorkspaceForm.styles = [...Formable.styles, dialogCss];
+__decorate([
+    query('sl-dialog')
+], WorkspaceForm.prototype, "workspaceDialog", void 0);
+__decorate([
+    state()
+], WorkspaceForm.prototype, "active", void 0);
+__decorate([
+    state()
+], WorkspaceForm.prototype, "open", void 0);
+__decorate([
+    property({ type: Object })
+], WorkspaceForm.prototype, "workspaceModel", void 0);
+__decorate([
+    state()
+], WorkspaceForm.prototype, "isEditMode", void 0);
+WorkspaceForm = __decorate([
+    customElement("pb33f-doctor-workspace-form")
+], WorkspaceForm);
+export { WorkspaceForm };

package/dist/components/workspaces/workspace-view.css.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/workspaces/workspace-view.css.js

@@ -0,0 +1,40 @@
+import { css } from "lit";
+export default css `
+    
+    h2 {
+        margin-top: 10px;
+    }
+    
+    .workspace-area {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+    
+    p {
+        font-size: 0.8rem;
+    }
+    
+    hr.main-break {
+        margin-top: 20px;
+        margin-bottom: 10px;
+    }
+    
+    sl-icon-button.delete-workspace::part(base),sl-icon-button.edit-workspace::part(base) {
+        padding: 5px 10px 0 0;
+        display:none;
+    }
+    
+    .active {
+        background-color: var(--primary-color-verylowalpha);
+        color: var(--font-color);
+    }
+    
+    .active sl-icon-button.delete-workspace::part(base) {
+        display: inline-block;
+    }
+    .active sl-icon-button.edit-workspace::part(base) {
+        display: inline-block;
+    }
+
+
+`;

package/dist/components/workspaces/workspace-view.d.ts

@@ -0,0 +1,30 @@
+import { TheDoctor } from "../the-doctor/the-doctor.js";
+import { WorkspaceController } from "../../controllers/workspace-controller.js";
+import { Workspace } from "../../model/workspace.js";
+import { Formable } from "../../model/formable.js";
+import { WorkspaceForm } from "./workspace-form.js";
+import { WorkspaceDestroyView } from "./workspace-destroy-dialog.js";
+import { PlatformError } from "../../model/errors.js";
+export declare class WorkspacesView extends Formable {
+    static styles: import("lit").CSSResult[];
+    active: boolean;
+    mutateWorkspaceActive: boolean;
+    workspaces: Workspace[];
+    wsController: WorkspaceController;
+    workspaceForm: WorkspaceForm;
+    destroyDialog: WorkspaceDestroyView;
+    constructor(doc: TheDoctor, wsController: WorkspaceController);
+    private setupDestroyDialogEvents;
+    private setupWorkspaceFormEvents;
+    private handleWorkspaceFormComplete;
+    openCreateWorkspaceDialog(): void;
+    selectWorkspace(workspace: Workspace): void;
+    lightWorkspace(id: string | undefined): void;
+    dimWorkspace(id: string | undefined): void;
+    showDestroyDialog(w: Workspace): void;
+    showEditDialog(w: Workspace): void;
+    private handleDestroyCancel;
+    private handleDestroyConfirm;
+    deleteWorkspaceError(error: PlatformError): void;
+    render(): import("lit-html").TemplateResult<1>;
+}