@pb33f/cowboy-components 0.7.7 → 0.7.9

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>;
+}

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/auth-controller.d.ts

@@ -14,6 +14,7 @@ export declare class AuthController extends EventTarget {
     brokerStarted: boolean;
     hosts: any[];
     callbackIdx: number;
+    checkingState: boolean;
     constructor(host: any, sessionCallback?: Function, autoStart?: boolean);
     start(): void;
     private startSession;

package/dist/controllers/auth-controller.js

@@ -1,6 +1,6 @@
 import { AuthenticationGithubRequested, AuthenticationStateChange, CreditEmpty, LogoutRequested, NukeWorkspaceEvent, StartSessionFailed } from "../events/doctor.js";
 import { AuthService } from "../services/auth-service.js";
-import { HeaderService } from "../services/header-service";
+import { HeaderService } from "../services/header-service.js";
 export class AuthController extends EventTarget {
     static getInstance() {
         const t = AuthController._instance;
@@ -20,9 +20,10 @@ export class AuthController extends EventTarget {
             }
             t.startSessionAutomatically = autoStart;
             t.brokerStarted = false;
-            t.start();
+            // t.start()
             return t;
         }
+        this.checkingState = false;
         this.doctorEndpoint = 'https://doctor.pb33f.io';
         const sessionEndpoint = sessionStorage.getItem("doctor-endpoint");
         if (sessionEndpoint) {
@@ -138,7 +139,6 @@ export class AuthController extends EventTarget {
     }
     logout() {
         AuthService.logout().then(() => {
-            //if (e.detail.redirectURL != '') {
             this.dispatchEvent(new CustomEvent(NukeWorkspaceEvent, {
                 bubbles: true,
                 composed: true,
@@ -146,20 +146,38 @@ export class AuthController extends EventTarget {
                     resetFiles: true
                 }
             }));
-            // }
         });
     }
     notifyStateChange(state) {
+        this.checkingState = false;
         const event = new CustomEvent(AuthenticationStateChange, {
             detail: { state }
         });
         this.dispatchEvent(event);
     }
     async checkState() {
-        return AuthService.checkAuth().then(state => {
-            this.notifyStateChange(state);
-            return state;
-        });
+        if (!this.checkingState) {
+            this.checkingState = true;
+            return AuthService.checkAuth()
+                .then(state => {
+                this.state = state;
+                this.authenticated = true;
+                this.notifyStateChange(state);
+                return state;
+            })
+                .catch(error => {
+                this.notifyStateChange();
+                this.checkingState = false;
+                throw error;
+            });
+        }
+        else {
+            return new Promise((resolve) => {
+                this.addEventListener(AuthenticationStateChange, ((event) => {
+                    resolve(event.detail.state);
+                }), { once: true });
+            });
+        }
     }
 }
 AuthController._instance = null;

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) + "%"
                             });
                         }
                     }
@@ -237,11 +238,15 @@ export class DiagnosticController extends EventTarget {
                     if (e.instance === 'https://pb33f.io/errors/no-credit-remaining') {
                         this.doc.statusBar.callsRemaining = 0;
                         this.doc.statusBar.visible = true;
+                        let text = "Run out of credit, please authenticate for more or wait 24 hours.";
+                        if (this.doc.authController.authenticated) {
+                            text = "Run out of credit, please purchase more, or come back tomorrow for more free credits.";
+                        }
                         this.doc.sendToast({
                             id: crypto.randomUUID(),
                             type: ToastType.ERROR,
-                            body: "Run out of credit, please authenticate for more or wait 24 hours.",
-                            title: "Credit exhausted!",
+                            body: text,
+                            title: "💰 Credit Exhausted!",
                         });
                     }
                     else {