@pb33f/cowboy-components 0.7.8 → 0.7.10

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

@@ -0,0 +1,196 @@
+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 } from "lit/decorators.js";
+import { Formable } from "../../model/formable.js";
+import { WorkspaceForm } from "./workspace-form.js";
+import { WorkspaceDestroyView } from "./workspace-destroy-dialog.js";
+import { DeleteWorkspace, SwitchWorkspace, FormSubmitComplete, RefreshWorkspaces, CreateWorkspace, UpdateWorkspace } from "../../events/doctor.js";
+import { AttentionType } from "../attention-box/attention-box.js";
+import listsCss from "../../css/lists.css.js";
+import workspaceViewCss from "./workspace-view.css.js";
+import badgesCss from "../../css/badges.css.js";
+import linksCss from "../../css/links.css.js";
+import tooltipCss from "../../css/tooltip.css.js";
+let WorkspacesView = class WorkspacesView extends Formable {
+    constructor(doc, wsController) {
+        super(doc);
+        this.doc = doc;
+        this.wsController = wsController;
+        this.active = false;
+        this.mutateWorkspaceActive = false;
+        this.workspaceForm = new WorkspaceForm();
+        this.destroyDialog = new WorkspaceDestroyView();
+        this.setupDestroyDialogEvents();
+        this.setupWorkspaceFormEvents();
+    }
+    setupDestroyDialogEvents() {
+        this.destroyDialog.addEventListener('cancel', () => this.handleDestroyCancel());
+        this.destroyDialog.addEventListener('destroy', (event) => this.handleDestroyConfirm(event));
+    }
+    setupWorkspaceFormEvents() {
+        this.workspaceForm.addEventListener(FormSubmitComplete, (event) => {
+            this.handleWorkspaceFormComplete(event);
+        });
+        this.workspaceForm.addEventListener(CreateWorkspace, (event) => {
+            this.wsController.dispatchEvent(new CustomEvent(CreateWorkspace, {
+                bubbles: true,
+                composed: true,
+                detail: event.detail
+            }));
+        });
+        this.workspaceForm.addEventListener(UpdateWorkspace, (event) => {
+            this.wsController.dispatchEvent(new CustomEvent(UpdateWorkspace, {
+                bubbles: true,
+                composed: true,
+                detail: event.detail
+            }));
+        });
+    }
+    handleWorkspaceFormComplete(_) {
+        // Refresh the workspace list after create/update
+        this.wsController.dispatchEvent(new CustomEvent(RefreshWorkspaces, {
+            bubbles: true,
+            composed: true
+        }));
+    }
+    openCreateWorkspaceDialog() {
+        this.workspaceForm.setCreateMode();
+        this.workspaceForm.open = true;
+    }
+    selectWorkspace(workspace) {
+        this.wsController.dispatchEvent(new CustomEvent(SwitchWorkspace, {
+            bubbles: true,
+            composed: true,
+            detail: workspace
+        }));
+    }
+    lightWorkspace(id) {
+        if (id) {
+            let li = this.shadowRoot?.querySelector('li#workspace-' + id);
+            if (li) {
+                li.classList.add('active');
+            }
+        }
+    }
+    dimWorkspace(id) {
+        if (id) {
+            let li = this.shadowRoot?.querySelector('li#workspace-' + id);
+            if (li) {
+                li.classList.remove('active');
+            }
+        }
+    }
+    showDestroyDialog(w) {
+        this.destroyDialog.workspace = w;
+        this.destroyDialog.show();
+        this.lightWorkspace(w.workspaceId);
+    }
+    showEditDialog(w) {
+        this.workspaceForm.setEditMode(w);
+        this.workspaceForm.open = true;
+    }
+    handleDestroyCancel() {
+        this.destroyDialog.hide().then(() => {
+            this.dimWorkspace(this.destroyDialog.workspace?.workspaceId);
+        });
+    }
+    handleDestroyConfirm(event) {
+        this.wsController.dispatchEvent(new CustomEvent(DeleteWorkspace, {
+            bubbles: true,
+            composed: true,
+            detail: event.detail
+        }));
+        this.destroyDialog.clearError();
+    }
+    deleteWorkspaceError(error) {
+        this.destroyDialog.setError(error);
+    }
+    render() {
+        if (!this.workspaces || this.workspaces.length === 0) {
+            return html ``;
+        }
+        return html `
+            <div class="workspace-area">
+                ${this.destroyDialog}
+
+                ${this.workspaceForm}
+
+                <h2>workspaces</h2>
+
+                <p>The best way to think of a workspace is like a project. Keep all your stuff in one place, and
+                    switch between workspaces when you need to flip to a different spec or project.</p>
+
+                ${this.workspaces.length >= 5 ? html `
+                    <sl-tooltip content="maximum limit reached, cannot create any more">
+                        <sl-button disabled>
+                            Add workspace
+                        </sl-button>
+                    </sl-tooltip>
+                ` : html `
+                    <sl-button @click="${() => {
+            this.openCreateWorkspaceDialog();
+        }}">
+                        Add workspace
+                    </sl-button>
+                `}
+
+                ${this.workspaces.length >= 5 ? html `
+                    <pb33f-attention-box type="${AttentionType.Info}" 
+                                         headerText="maximum workspace count reached">
+                        In order to create more workspaces, you will need to upgrade to pro (coming soon).
+                    </pb33f-attention-box>
+                ` : ''}
+
+                <hr class="main-break"/>
+                <ul>
+
+                    ${this.workspaces.map((w) => {
+            // Determine workspace content based on active status
+            const workspaceContent = w.active
+                ? html `<strong>${w.name}</strong> &nbsp;<sl-badge pulse>active</sl-badge>`
+                : html `<a href="#" class="workspace-link" @click=${() => this.selectWorkspace(w)}>${w.name}</a>`;
+            // Determine CSS classes and styling
+            const liClasses = w.active ? 'secondary' : '';
+            const liStyles = w.active ? 'color: var(--secondary-color)' : '';
+            return html `
+                            <li id="workspace-${w.workspaceId}" 
+                                class="${liClasses}"
+                                style="${liStyles}"
+                                @mouseover="${() => this.lightWorkspace(w.workspaceId)}"
+                                @mouseout="${() => this.dimWorkspace(w.workspaceId)}">
+                                
+                                ${workspaceContent}
+                                
+                                <div style="display: inline-block; float: right">
+                                    <sl-icon-button class="edit-workspace" name="pencil-square" 
+                                                    @click="${() => { this.showEditDialog(w); }}"></sl-icon-button>
+                                    ${!w.default && !w.active ? html `
+                                        <sl-icon-button class="delete-workspace" name="trash3" 
+                                                        @click="${() => { this.showDestroyDialog(w); }}"></sl-icon-button>
+                                    ` : ''}
+                                </div>
+                            </li>
+                        `;
+        })}
+                </ul>
+            </div>
+
+        `;
+    }
+};
+WorkspacesView.styles = [...Formable.styles, workspaceViewCss, badgesCss, linksCss, listsCss, tooltipCss];
+__decorate([
+    state()
+], WorkspacesView.prototype, "active", void 0);
+__decorate([
+    state()
+], WorkspacesView.prototype, "mutateWorkspaceActive", void 0);
+WorkspacesView = __decorate([
+    customElement("pb33f-doctor-workspaces")
+], WorkspacesView);
+export { WorkspacesView };

package/dist/controllers/diagnostic-controller.d.ts

@@ -1,6 +1,7 @@
 import { TheDoctor } from "../components/the-doctor/the-doctor.js";
 export declare class DiagnosticController extends EventTarget {
     doc: TheDoctor;
+    oldScore: number;
     constructor(doc: TheDoctor);
     lintSpec(value: string, url?: string): void;
 }

package/dist/controllers/diagnostic-controller.js

@@ -6,8 +6,13 @@ export class DiagnosticController extends EventTarget {
     constructor(doc) {
         super();
         this.doc = doc;
+        this.oldScore = 0;
     }
     lintSpec(value, url) {
+        // capture old score before any operations
+        if (this.doc.problemsOverview.statistics?.statistics.overallScore > 0) {
+            this.oldScore = this.doc.problemsOverview.statistics.statistics.overallScore;
+        }
         this.doc.activitySpinner.show();
         this.doc.editor.breadcumb.isInvalid = false;
         if (url) {
@@ -177,10 +182,6 @@ export class DiagnosticController extends EventTarget {
             }
             // update the overview statistics
             LintingService.fetchStatistics().then((result) => {
-                let oldScore = 0;
-                if (this.doc.problemsOverview.statistics) {
-                    oldScore = this.doc.problemsOverview.statistics.statistics.overallScore;
-                }
                 this.doc.diagnosticBag?.set(DiagnosticBag, result);
                 this.doc.activitySpinner.hide();
                 if (result?.remainingCredit <= 10) {
@@ -196,20 +197,20 @@ export class DiagnosticController extends EventTarget {
                 if (!settings?.autoDiagnose) {
                     if (this.doc.problemsOverview.statistics) {
                         const newScore = result.statistics.overallScore;
-                        if (oldScore > newScore) {
+                        if (this.oldScore > newScore) {
                             this.doc.sendToast({
                                 id: crypto.randomUUID(),
                                 type: ToastType.SCOREDOWN,
                                 body: "Your score has decreased. It is now " + newScore + "%",
-                                title: "Score went down by " + (oldScore - newScore) + "%"
+                                title: "Score went down by " + (this.oldScore - newScore) + "%"
                             });
                         }
-                        if (oldScore < newScore) {
+                        if (this.oldScore < newScore) {
                             this.doc.sendToast({
                                 id: crypto.randomUUID(),
                                 type: ToastType.SCOREUP,
                                 body: "Your score has increased to " + newScore + "%",
-                                title: "Score went up by " + (newScore - oldScore) + "%"
+                                title: "Score went up by " + (newScore - this.oldScore) + "%"
                             });
                         }
                     }

package/dist/controllers/rolodex-controller.d.ts

@@ -1,6 +1,6 @@
 import { TheDoctor } from "../components/the-doctor/the-doctor.js";
 import { NodeClickedEvent } from "../events/doctor.js";
-import { Problem } from "../model/problem";
+import { Problem } from "../model/problem.js";
 export declare class RolodexController extends EventTarget {
     doc: TheDoctor;
     constructor(doc: TheDoctor);

package/dist/controllers/rolodex-controller.js

@@ -1,5 +1,5 @@
 import { RolodexResponseBag, RolodexStateBag } from "../components/the-doctor/the-doctor.js";
-import { ModelService } from "../services/model-service";
+import { ModelService } from "../services/model-service.js";
 export class RolodexController extends EventTarget {
     constructor(doc) {
         super();

package/dist/controllers/workspace-controller.d.ts

@@ -0,0 +1,15 @@
+import { TheDoctor } from "../components/the-doctor/the-doctor.js";
+import { WorkspacesView } from "../components/workspaces/workspace-view.js";
+import { Workspace } from "../model/workspace.js";
+export declare class WorkspaceController extends EventTarget {
+    readonly workspaceView: WorkspacesView;
+    private readonly bus;
+    readonly doc: TheDoctor;
+    workspaces: Workspace[] | undefined;
+    constructor(doc: TheDoctor);
+    getWorkspaces(): void;
+    switchWorkspace(evt: CustomEvent<Workspace>): void;
+    deleteWorkspace(evt: CustomEvent<Workspace>): void;
+    createWorkspace(evt: CustomEvent<string>): void;
+    updateWorkspace(evt: CustomEvent<Workspace>): void;
+}

package/dist/controllers/workspace-controller.js

@@ -0,0 +1,156 @@
+import { CreateBus } from "@pb33f/ranch";
+import { WorkspacesView } from "../components/workspaces/workspace-view.js";
+import { WorkspaceService } from "../services/workspace-service.js";
+import { AddToast, DeleteWorkspace, Reboot, RefreshWorkspaces, SwitchWorkspace, CreateWorkspace, UpdateWorkspace } from "../events/doctor";
+import { ToastType } from "../model/toast";
+export class WorkspaceController extends EventTarget {
+    constructor(doc) {
+        super();
+        this.doc = doc;
+        this.bus = CreateBus();
+        this.workspaceView = new WorkspacesView(this.doc, this);
+        this.addEventListener(RefreshWorkspaces, this.getWorkspaces.bind(this));
+        // @ts-ignore
+        this.addEventListener(SwitchWorkspace, this.switchWorkspace.bind(this));
+        // @ts-ignore
+        this.addEventListener(DeleteWorkspace, this.deleteWorkspace.bind(this));
+        // @ts-ignore
+        this.addEventListener(CreateWorkspace, this.createWorkspace.bind(this));
+        // @ts-ignore
+        this.addEventListener(UpdateWorkspace, this.updateWorkspace.bind(this));
+    }
+    getWorkspaces() {
+        WorkspaceService.getWorkspaces().then(workspaces => {
+            if (workspaces && workspaces.response) {
+                this.workspaces = workspaces.response;
+                this.workspaceView.workspaces = workspaces.response;
+                this.workspaceView.requestUpdate();
+            }
+        });
+    }
+    switchWorkspace(evt) {
+        WorkspaceService.switchWorkspace(evt.detail).then(() => {
+            this.doc.dispatchEvent(new Event(Reboot));
+            this.doc.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: "switched workspace",
+                        type: ToastType.SUCCESS,
+                        body: `Active workspace changed to '${evt.detail.name}'`
+                    }
+                }
+            }));
+            this.getWorkspaces();
+        }).catch((e) => {
+            this.doc.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: "failed switching workspace",
+                        type: ToastType.ERROR,
+                        body: `Failed to switch workspace: ${e.detail}`
+                    }
+                }
+            }));
+        });
+    }
+    deleteWorkspace(evt) {
+        WorkspaceService.deleteWorkspace(evt.detail).then(() => {
+            this.doc.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: "workspace was deleted",
+                        type: ToastType.SUCCESS,
+                        body: `All gone, destroyed! Good riddance!`
+                    }
+                }
+            }));
+            this.workspaceView.destroyDialog.hide();
+            this.getWorkspaces();
+        }).catch((e) => {
+            this.doc.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: "failed deleting workspace",
+                        type: ToastType.ERROR,
+                        body: `Failed to delete workspace: ${e.detail}`
+                    }
+                }
+            }));
+            this.workspaceView.deleteWorkspaceError(e);
+        });
+    }
+    createWorkspace(evt) {
+        WorkspaceService.createWorkspace(evt.detail).then((workspace) => {
+            this.doc.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: "workspace created",
+                        type: ToastType.SUCCESS,
+                        body: `Workspace '${workspace.name}' has been created!`
+                    }
+                }
+            }));
+            this.workspaceView.workspaceForm.handleSuccess(workspace);
+        }).catch((e) => {
+            this.doc.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: "failed creating workspace",
+                        type: ToastType.ERROR,
+                        body: `Failed to create workspace: ${e.detail}`
+                    }
+                }
+            }));
+            this.workspaceView.workspaceForm.handleError(e);
+        });
+    }
+    updateWorkspace(evt) {
+        WorkspaceService.updateWorkspace(evt.detail).then((workspace) => {
+            this.doc.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: "workspace updated",
+                        type: ToastType.SUCCESS,
+                        body: `Workspace '${workspace.name}' has been updated!`
+                    }
+                }
+            }));
+            this.workspaceView.workspaceForm.handleSuccess(workspace);
+        }).catch((e) => {
+            this.doc.dispatchEvent(new CustomEvent(AddToast, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    toast: {
+                        id: crypto.randomUUID(),
+                        title: "failed updating workspace",
+                        type: ToastType.ERROR,
+                        body: `Failed to update workspace: ${e.detail}`
+                    }
+                }
+            }));
+            this.workspaceView.workspaceForm.handleError(e);
+        });
+    }
+}