@pb33f/cowboy-components 0.0.13 → 0.1.0

package/dist/components/problem-list/problem-list.js

@@ -0,0 +1,334 @@
+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 { customElement } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { ProblemItem } from "@/components/problem-list/problem-item";
+import { ProblemMainView } from "@/components/problem-list/problem-mainview";
+import { MainViewSlideChanged, ProblemClicked, ProblemLabelViewFilterChanged, ProblemSortFilterChanged, ProblemSearchFilterChanged, MessageEvent, ProblemRuleFilterChanged, ProblemRuleFilterChangedManual } from "@/events/doctor";
+import problemListCss from "./problem-list.css";
+import sharedCss from "@/css/shared.css";
+import { Problem } from "@/model/problem";
+import { ProblemToolbar } from "@/components/problem-list/problem-toolbar";
+import { ProblemLabelView } from "@/components/problem-list/problem-label-view-filter";
+import { Paginator } from "@/components/paginator/paginator";
+import { ProblemSortView } from "@/components/problem-list/problem-sort-filter";
+import SearchWorker from "@/workers/search-problems.worker?worker";
+import { Rules } from "@/components/problem-list/problem-rule-filter";
+let ProblemList = class ProblemList extends LitElement {
+    constructor() {
+        super();
+        this.problemLabelView = ProblemLabelView.JSONPath;
+        this.problemList = [];
+        this.mainView = new ProblemMainView();
+        this.problemToolbar = new ProblemToolbar();
+        this.paginator = new Paginator();
+        this.unfilteredProblems = [];
+        this.searchWorker = new SearchWorker();
+        this.activeSearch = false;
+        this.addSearchWorkerListener();
+        // @ts-ignore
+        this.addEventListener(ProblemClicked, this.problemClicked);
+        // @ts-ignore
+        this.addEventListener(MainViewSlideChanged, this.slideChanged);
+        // @ts-ignore
+        this.addEventListener(ProblemLabelViewFilterChanged, this.labelFilterChanged);
+        // @ts-ignore
+        this.addEventListener(ProblemSortFilterChanged, this.sortFilterChanged);
+        // @ts-ignore
+        this.addEventListener(ProblemSearchFilterChanged, this.searchFilterChanged);
+        // @ts-ignore
+        this.addEventListener(ProblemRuleFilterChanged, this.ruleFilterChanged);
+        // @ts-ignore
+        this.addEventListener(ProblemRuleFilterChangedManual, this.ruleFilterChangedManual);
+    }
+    reset() {
+        this.activeSearch = false;
+        this.problemList = this.unfilteredProblems;
+        this.requestUpdate();
+    }
+    addSearchWorkerListener() {
+        const search = (event) => {
+            const data = event.data;
+            if (data) {
+                this.problemList = this.problemList.filter((problem) => {
+                    for (let i = 0; i < data.length; i++) {
+                        if (problem.problemObject.hash() === Problem.reconstruct(data[i]).hash()) {
+                            return this.problemList[i];
+                        }
+                    }
+                });
+                this.paginator.setPage(1);
+                this.requestUpdate();
+            }
+        };
+        this.searchWorker.addEventListener(MessageEvent, search);
+    }
+    ruleFilterChanged(event) {
+        if (event.detail.rule !== Rules.AllRules) {
+            this.activeSearch = false;
+            this.problemList = this.unfilteredProblems;
+            this.search(event.detail.rule);
+        }
+        else {
+            this.activeSearch = false;
+            this.problemList = this.unfilteredProblems;
+            this.requestUpdate();
+        }
+    }
+    // triggered outside the component stack
+    ruleFilterChangedManual(event) {
+        this.ruleFilterChanged(event);
+        this.problemToolbar.ruleFilterChanged(event.detail.rule);
+        // TODO: tell the paginator to update the active rule
+    }
+    searchFilterChanged(event) {
+        if (event.detail.search !== "") {
+            if (!this.activeSearch) {
+                this.unfilteredProblems = this.problemList;
+            }
+            this.search(event.detail.search);
+        }
+        else {
+            this.activeSearch = false;
+            this.problemList = this.unfilteredProblems;
+            this.requestUpdate();
+        }
+    }
+    labelFilterChanged(event) {
+        this.changeProblemLabels(event.detail.label);
+    }
+    sortFilterChanged(event) {
+        this.changeSorting(event.detail.sort);
+    }
+    extractProblemsFromList() {
+        return this.problemList.map((problemItem) => {
+            return problemItem.problemObject;
+        });
+    }
+    extractRulesFromProblems() {
+        const mapped = this.extractProblemsFromList().map((problem) => {
+            return problem.source;
+        });
+        return new Set(mapped);
+    }
+    search(searchText) {
+        this.activeSearch = true;
+        this.searchWorker.postMessage({ search: searchText, problems: this.extractProblemsFromList() });
+    }
+    changeProblemLabels(problemType) {
+        for (let i = 0; i < this.problemList.length; i++) {
+            this.problemList[i].scrollOnUpdate = false;
+            switch (problemType) {
+                case ProblemLabelView.JSONPath:
+                    this.problemList[i].problemLabelView = ProblemLabelView.JSONPath;
+                    this.problemLabelView = ProblemLabelView.JSONPath;
+                    break;
+                case ProblemLabelView.RuleViolation:
+                    this.problemList[i].problemLabelView = ProblemLabelView.RuleViolation;
+                    this.problemLabelView = ProblemLabelView.RuleViolation;
+                    break;
+                case ProblemLabelView.Message:
+                    this.problemList[i].problemLabelView = ProblemLabelView.Message;
+                    this.problemLabelView = ProblemLabelView.Message;
+                    break;
+                case ProblemLabelView.Category:
+                    this.problemList[i].problemLabelView = ProblemLabelView.Category;
+                    this.problemLabelView = ProblemLabelView.Category;
+                    break;
+            }
+        }
+    }
+    changeSorting(sort) {
+        switch (sort) {
+            case ProblemSortView.LineNumber:
+                this.problemList = this.problemList.sort((a, b) => {
+                    if (a.line < b.line)
+                        return -1;
+                    if (a.line > b.line)
+                        return 1;
+                    return 0;
+                });
+                break;
+            case ProblemSortView.Rule:
+                this.problemList = this.problemList.sort((a, b) => {
+                    if (a.problemObject.source < b.problemObject.source)
+                        return 1;
+                    if (a.problemObject.source > b.problemObject.source)
+                        return -1;
+                    return 0;
+                });
+                break;
+            case ProblemSortView.JSONPath:
+                this.problemList = this.problemList.sort((a, b) => {
+                    if (a.problemObject.jsonPath < b.problemObject.jsonPath)
+                        return -1;
+                    if (a.problemObject.jsonPath > b.problemObject.jsonPath)
+                        return 1;
+                    return 0;
+                });
+                break;
+            case ProblemSortView.Category:
+                this.problemList = this.problemList.sort((a, b) => {
+                    if (a.problemObject.category < b.problemObject.category)
+                        return -1;
+                    if (a.problemObject.category > b.problemObject.category)
+                        return 1;
+                    return 0;
+                });
+                break;
+            case ProblemSortView.Severity:
+                this.problemList = this.problemList.sort((a, b) => {
+                    if (a.problemObject.severity < b.problemObject.severity)
+                        return 1;
+                    if (a.problemObject.severity > b.problemObject.severity)
+                        return -1;
+                    return 0;
+                });
+                break;
+        }
+        this.problemList = this.problemList.slice(0, this.problemList.length);
+        this.requestUpdate();
+    }
+    problemClicked(event) {
+        //event.stopPropagation()
+        this.mainView.problems = [event.detail.problem];
+        this.lineClicked(event.detail.problem.line, false, event.detail.problem.idx);
+        this.paginator.activeIndex = event.detail.problem.resultIndex;
+    }
+    slideChanged(event) {
+        this.lineClicked(event.detail.problem.line, false, event.detail.index, true);
+    }
+    setActiveProblem(problems) {
+        let clicked = false;
+        if (this.activeProblem) {
+            for (let i = 0; i < problems.length; i++) {
+                if (problems[i].problemObject.hash() == this.activeProblem.problemObject.hash()) {
+                    this.lineClicked(problems[i].line, false, problems[i].idx);
+                    clicked = true;
+                }
+            }
+        }
+        if (!clicked) {
+            this.mainView.problems = [];
+        }
+    }
+    get problemItems() {
+        return this.problemList;
+    }
+    generateProblemItems(problems) {
+        const problemList = [];
+        const lineIdx = new Map();
+        for (let i = 0; i < problems.length; i++) {
+            const marker = problems[i];
+            const prob = new ProblemItem();
+            prob.line = marker.startLineNumber;
+            prob.column = marker.startColumn;
+            prob.problem = marker.jsonPath;
+            prob.problemLabelView = this.problemLabelView;
+            prob.problemObject = marker;
+            prob.resultIndex = i;
+            prob.parent = this;
+            if (lineIdx.has(marker.startLineNumber)) {
+                const problems = lineIdx.get(marker.startLineNumber);
+                problems.push(prob);
+                for (let i = 0; i < problems.length; i++) {
+                    problems[i].idx = i + 1;
+                }
+                lineIdx.set(marker.startLineNumber, problems);
+            }
+            else {
+                lineIdx.set(marker.startLineNumber, [prob]);
+            }
+            problemList.push(prob);
+        }
+        return problemList;
+    }
+    set problems(problems) {
+        const problemList = this.generateProblemItems(problems);
+        this.problemList = problemList;
+        this.unfilteredProblems = problemList;
+        this.setActiveProblem(problemList);
+        this.problemToolbar.availableRules = [Rules.AllRules, ...this.extractRulesFromProblems()];
+        this.requestUpdate();
+    }
+    lineClicked(line, scroll = true, index = 0, stopCycle = false) {
+        let foundProblems = [];
+        this.problemList.forEach((problem) => {
+            const problemExists = problem.line === line;
+            if (problemExists) {
+                foundProblems.push(problem);
+            }
+        });
+        let selected = null;
+        this.problemList.forEach((problem) => {
+            problem.select(false);
+            problem.selectSibling(false);
+        });
+        if (foundProblems.length > 0) {
+            for (let i = 0; i < foundProblems.length; i++) {
+                const problem = foundProblems[i];
+                let s = i < 1;
+                if (!scroll)
+                    s = false;
+                if (i === 0 && index == 0) {
+                    selected = problem;
+                    problem.select(true, s);
+                    if (!this.activeSearch) {
+                        this.paginator.setPage(problem.resultIndex + 1);
+                    }
+                    continue;
+                }
+                if (i === 0 && problem.idx === index) {
+                    problem.select(true, s);
+                    selected = problem;
+                    if (!this.activeSearch) {
+                        this.paginator.setPage(problem.resultIndex + 1);
+                    }
+                    continue;
+                }
+                if (i > 0 && problem.idx === index) {
+                    problem.select(true, s);
+                    if (!this.activeSearch) {
+                        this.paginator.setPage(problem.resultIndex + 1);
+                    }
+                    selected = problem;
+                }
+                else {
+                    problem.selectSibling(true, s);
+                }
+            }
+        }
+        this.mainView.problems = foundProblems;
+        if (selected)
+            this.activeProblem = selected;
+        if (selected && selected.idx !== 0) {
+            if (!stopCycle)
+                this.mainView.selectSlide(selected.idx);
+        }
+    }
+    render() {
+        this.paginator.values = this.problemList;
+        return html `
+            <div class="problem-list-container">
+                <div class="main-view">
+                    ${this.mainView}
+                </div>
+                <div class="toolbar">
+                    ${this.problemToolbar}
+                </div>
+                <div class="problem-list">
+                    ${this.paginator}
+                </div>
+            </div>
+        `;
+    }
+};
+ProblemList.styles = [problemListCss, sharedCss];
+ProblemList = __decorate([
+    customElement("pb33f-problem-list")
+], ProblemList);
+export { ProblemList };

package/dist/components/problem-list/problem-mainview.css.d.ts

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

package/dist/components/problem-list/problem-mainview.css.js

@@ -0,0 +1,100 @@
+import { css } from "lit";
+export default css `
+    
+    :host {
+        font-size: 0.9rem;
+    }
+    .empty {
+        color: var(--font-color-sub2);
+        font-size: 1.4rem;
+        text-align: center;
+        margin-top: 20px; 
+        
+    }
+    
+    .empty sl-icon {
+        margin-top: 20px;
+        font-size: 5rem;
+    }
+
+    .main-view {
+        padding: 10px;
+    }
+    
+    .main-view-carousel{
+        padding: 0;
+        width: 100%;
+    }
+
+    .problem {
+        display: flex;
+        width: 100%;
+    }
+
+    .message {
+        height: 155px;
+        max-height: 155px;
+        overflow-y: auto;
+        font-size: 1rem;
+        word-wrap: break-word;
+    }
+
+    .icon {
+        width: 20px;
+        margin-right: 10px;
+        margin-left: 1px;
+        padding-top: 2px;
+        font-size: 1.2rem;
+    }
+    
+    .source {
+        display: flex;
+        margin-bottom: 5px;
+        width:100%;
+    }
+    
+    .location {
+        font-size: 0.7rem;
+        margin-top: 15px;
+        display: block;
+    }
+    
+    pb33f-render-json-path {
+        
+    }
+    
+    .carousel-message {
+        height: 200px;
+        overflow-y: auto;
+        text-align: left;
+    }
+        
+    sl-carousel {
+        height: 216px;
+        
+    }
+    
+    sl-carousel::part(base) {
+        grid-column-gap: 0;
+    }
+    
+    sl-carousel::part(pagination) {
+        display: none;
+    }
+    
+    sl-carousel::part(navigation-button--next) {
+        color: var(--primary-color);
+    }
+
+    sl-carousel::part(navigation-button--previous) {
+        color: var(--primary-color);
+    }
+    
+    sl-carousel-item {
+        border-radius: 0;
+        padding: 0;
+        margin: 0;
+        width: 100%;
+    }
+    
+`;

package/dist/components/problem-list/problem-mainview.d.ts

@@ -0,0 +1,20 @@
+import '@shoelace-style/shoelace/dist/components/carousel/carousel.js';
+import '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js';
+import { LitElement, TemplateResult } from "lit";
+import { ProblemItem } from "./problem-item";
+import { Problem } from "@/model/problem";
+import { SlCarousel } from "@shoelace-style/shoelace";
+export declare class ProblemMainView extends LitElement {
+    static styles: import("lit").CSSResult[];
+    problems: ProblemItem[];
+    carousel: SlCarousel;
+    selectedIndex: number;
+    private manualChange;
+    constructor();
+    showRuleDocs(): void;
+    howToFix(): void;
+    slideChanged(event: CustomEvent): void;
+    selectSlide(index: number): void;
+    render(): TemplateResult<1>;
+    renderProblem(problem: Problem): TemplateResult;
+}

package/dist/components/problem-list/problem-mainview.js

@@ -0,0 +1,126 @@
+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 '@shoelace-style/shoelace/dist/components/carousel/carousel.js';
+import '@shoelace-style/shoelace/dist/components/carousel-item/carousel-item.js';
+import { customElement, property, query } from "lit/decorators.js";
+import { html, LitElement } from "lit";
+import { ProblemItem } from "./problem-item";
+import problemMainViewCss from "./problem-mainview.css";
+import { marked } from "marked";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import sharedCss from "./shared.css";
+import { getProblemClass, getProblemIcon } from "@/model/problem";
+import { MainViewSlideChanged, OpenProblemDrawer } from "@/events/doctor";
+import { ProblemDrawerEventType } from "@/components/problem-list/details-drawer";
+let ProblemMainView = class ProblemMainView extends LitElement {
+    constructor() {
+        super();
+        this.selectedIndex = 0;
+        this.manualChange = false;
+    }
+    showRuleDocs() {
+        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                type: ProblemDrawerEventType.RULE_DOCS,
+                rule: this.problems[0].problemObject.source
+            }
+        }));
+    }
+    howToFix() {
+        this.dispatchEvent(new CustomEvent(OpenProblemDrawer, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                type: ProblemDrawerEventType.HOW_TO_FIX,
+                rule: this.problems[0].problemObject.source
+            }
+        }));
+    }
+    slideChanged(event) {
+        if (this.manualChange) {
+            this.manualChange = false;
+            return;
+        }
+        this.dispatchEvent(new CustomEvent(MainViewSlideChanged, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                index: event.detail.index + 1,
+                problem: this.problems[event.detail.index]
+            }
+        }));
+    }
+    selectSlide(index) {
+        this.selectedIndex = index;
+        this.manualChange = true;
+        setTimeout(() => {
+            this.carousel?.goToSlide(index - 1);
+        });
+    }
+    render() {
+        if (this.problems) {
+            if (this.problems.length > 1) {
+                return html `
+                    <div class="main-view-carousel">
+                        <sl-carousel @sl-slide-change=${this.slideChanged} navigation mouse-dragging>
+                            ${this.problems.map((problemItem) => {
+                    return html `
+                                    <sl-carousel-item>
+                                        <div class="main-view-carousel">
+                                            ${this.renderProblem(problemItem.problemObject)}
+                                        </div>
+                                    </sl-carousel-item>
+                                `;
+                })}
+                        </sl-carousel>
+                    </div>
+                `;
+            }
+            if (this.problems[0] && this.problems[0].problemObject) {
+                return html `
+                    <div class="main-view">
+                        ${this.renderProblem(this.problems[0].problemObject)}
+                    </div>
+                `;
+            }
+        }
+        return html `
+            <div class="main-view empty">Pick a problem...<br/><sl-icon name="pin-angle"></sl-icon><br/></div>`;
+    }
+    renderProblem(problem) {
+        return html `
+            <div class="problem">
+                <div class="icon ${getProblemClass(problem)}">
+                    <sl-icon name="${getProblemIcon(problem)}"></sl-icon>
+                </div>
+                <div class="message">
+                    ${unsafeHTML(marked.parse(problem.message).toString())}
+                    <div class="location">
+                        Location: <pb33f-render-json-path path="${problem.jsonPath}"></pb33f-render-json-path>
+                    </div>
+                </div>
+            </div>
+            <div class="source">
+                <div>Rule: <a @click="${this.showRuleDocs}" href="#">${problem.source}</a></div>
+                <sl-icon-button @click=${this.howToFix} name="question-square" class="button-icon">
+                </sl-icon-button>
+            </div>`;
+    }
+};
+ProblemMainView.styles = [problemMainViewCss, sharedCss];
+__decorate([
+    property({ type: ProblemItem })
+], ProblemMainView.prototype, "problems", void 0);
+__decorate([
+    query('sl-carousel')
+], ProblemMainView.prototype, "carousel", void 0);
+ProblemMainView = __decorate([
+    customElement("pb33f-problem-mainview")
+], ProblemMainView);
+export { ProblemMainView };

package/dist/components/problem-list/problem-rule-filter.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from "lit";
+export declare enum Rules {
+    AllRules = "All rules"
+}
+export declare class ProblemRuleFilter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    rules: string[];
+    selectedRule: string;
+    constructor();
+    filterChanged(event: CustomEvent): void;
+    willUpdate(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/components/problem-list/problem-rule-filter.js

@@ -0,0 +1,67 @@
+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 { property, customElement } from "lit/decorators.js";
+import { ProblemRuleFilterChanged, } from "@/events/doctor";
+import problemLabelViewFilterCss from "./problem-label-view-filter.css";
+import filterCss from "./filter.css";
+export var Rules;
+(function (Rules) {
+    Rules["AllRules"] = "All rules";
+})(Rules || (Rules = {}));
+let ProblemRuleFilter = class ProblemRuleFilter extends LitElement {
+    constructor() {
+        super();
+    }
+    filterChanged(event) {
+        const menuItem = event.detail.item;
+        this.selectedRule = menuItem.value;
+        this.dispatchEvent(new CustomEvent(ProblemRuleFilterChanged, {
+            composed: true,
+            detail: {
+                rule: this.selectedRule,
+            }
+        }));
+    }
+    willUpdate() {
+        if (this.selectedRule === undefined && this.rules?.length > 0) {
+            this.selectedRule = this.rules[0];
+        }
+    }
+    render() {
+        return html `
+            <div class="filter">
+                <div class="label"><label>Rule:</label></div>
+                <div class="dropdown">
+                    <sl-dropdown skidding="5" distance="5">
+                        <sl-button slot="trigger" caret>${this.selectedRule}</sl-button>
+                        <sl-menu @sl-select=${this.filterChanged}>
+                            ${this.rules?.map((value) => {
+            return html `
+                                    <sl-menu-item value="${value}" type="checkbox"
+                                                  .checked=${this.selectedRule === value}>
+                                        ${value}
+                                    </sl-menu-item>`;
+        })}
+                        </sl-menu>
+                    </sl-dropdown>
+                </div>
+            </div>
+        `;
+    }
+};
+ProblemRuleFilter.styles = [problemLabelViewFilterCss, filterCss];
+__decorate([
+    property()
+], ProblemRuleFilter.prototype, "rules", void 0);
+__decorate([
+    property()
+], ProblemRuleFilter.prototype, "selectedRule", void 0);
+ProblemRuleFilter = __decorate([
+    customElement('pb33f-problem-rule-filter')
+], ProblemRuleFilter);
+export { ProblemRuleFilter };

package/dist/components/problem-list/problem-search-filter.d.ts

@@ -0,0 +1,13 @@
+import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
+import '@shoelace-style/shoelace/dist/components/menu/menu.js';
+import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+import { LitElement } from "lit";
+import { SlInput } from "@shoelace-style/shoelace";
+export declare class ProblemSearchFilter extends LitElement {
+    static styles: import("lit").CSSResult[];
+    selectedSort: string;
+    input: SlInput;
+    constructor();
+    search(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}