@pb33f/cowboy-components 0.7.17 → 0.8.0

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

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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, property } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { html, LitElement } from "lit";
 import { ProblemItem } from "./problem-item.js";
 import { ProblemMainView } from "./problem-mainview.js";
@@ -14,55 +14,90 @@ import sharedCss from "../../css/shared.css.js";
 import { Problem } from "../../model/problem.js";
 import { ProblemToolbar } from "./problem-toolbar.js";
 import { ProblemLabelView } from "./problem-label-view-filter.js";
-import { Paginator } from "../paginator/paginator.js";
+import { PaginatorNavigation } from "../paginator/paginator-navigator.js";
+import { PaginatorFirstPage, PaginatorLastPage, PaginatorNextPage, PaginatorPreviousPage } from "../paginator/paginator-events.js";
 import { ProblemSortView } from "./problem-sort-filter.js";
 import { Rules } from "./problem-rule-filter.js";
 import SearchWorker from "../../workers/search-problems.worker.js?worker";
+import { PixelSparks } from "../the-doctor/sparks.js";
+import { typedEventHandler } from "../../helpers/typed-events.js";
 let ProblemList = class ProblemList extends LitElement {
     constructor() {
         super();
+        this.rawProblems = [];
+        this.filteredProblems = [];
         this.problemLabelView = ProblemLabelView.JSONPath;
-        this.problemList = [];
+        this.selectedProblemHash = null;
+        this.selectedLine = null;
+        this.selectedIdx = 0;
+        this.searchTerm = "";
+        this.currentPage = 1;
+        this.itemsPerPage = 20;
         this.mainView = new ProblemMainView();
         this.problemToolbar = new ProblemToolbar();
-        this.paginator = new Paginator();
-        this.unfilteredProblems = [];
+        this.paginatorNav = new PaginatorNavigation();
+        this.sparks = new PixelSparks();
         this.searchWorker = new SearchWorker();
         this.activeSearch = false;
         this.isInvalid = false;
+        this.paginatorNav.currentPage = 1;
+        this.paginatorNav.totalPages = 1;
+        this.paginatorNav.totalItems = 0;
+        this.paginatorNav.itemsPerPage = this.itemsPerPage;
+        this.paginatorNav.label = "Problems";
         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);
+        this.addEventListener(ProblemClicked, typedEventHandler(this.problemClicked.bind(this)));
+        this.addEventListener(MainViewSlideChanged, typedEventHandler(this.slideChanged.bind(this)));
+        this.addEventListener(ProblemLabelViewFilterChanged, typedEventHandler(this.labelFilterChanged.bind(this)));
+        this.addEventListener(ProblemSortFilterChanged, typedEventHandler(this.sortFilterChanged.bind(this)));
+        this.addEventListener(ProblemSearchFilterChanged, typedEventHandler(this.searchFilterChanged.bind(this)));
+        this.addEventListener(ProblemRuleFilterChanged, typedEventHandler(this.ruleFilterChanged.bind(this)));
+        this.addEventListener(ProblemRuleFilterChangedManual, typedEventHandler(this.ruleFilterChangedManual.bind(this)));
+        this.addEventListener(PaginatorFirstPage, typedEventHandler(this.firstPage.bind(this)));
+        this.addEventListener(PaginatorLastPage, typedEventHandler(this.lastPage.bind(this)));
+        this.addEventListener(PaginatorNextPage, typedEventHandler(this.nextPage.bind(this)));
+        this.addEventListener(PaginatorPreviousPage, typedEventHandler(this.previousPage.bind(this)));
+    }
+    nextPage(event) {
+        event.stopPropagation();
+        const totalPages = Math.ceil(this.filteredProblems.length / this.itemsPerPage);
+        if (this.currentPage < totalPages) {
+            this.currentPage++;
+        }
+    }
+    lastPage(event) {
+        event.stopPropagation();
+        const totalPages = Math.ceil(this.filteredProblems.length / this.itemsPerPage);
+        if (this.currentPage < totalPages) {
+            this.currentPage = totalPages;
+        }
+    }
+    firstPage(event) {
+        event.stopPropagation();
+        if (this.currentPage > 1) {
+            this.currentPage = 1;
+        }
+    }
+    previousPage(event) {
+        event.stopPropagation();
+        if (this.currentPage > 1) {
+            this.currentPage--;
+        }
     }
     reset() {
         this.activeSearch = false;
-        this.problemList = this.unfilteredProblems;
+        this.searchTerm = "";
+        this.filteredProblems = this.rawProblems;
+        this.currentPage = 1;
         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);
+                const searchHashes = new Set(data.map(p => Problem.reconstruct(p).hash()));
+                this.filteredProblems = this.filteredProblems.filter(p => searchHashes.has(p.hash()));
+                this.currentPage = 1;
                 this.requestUpdate();
             }
         };
@@ -71,261 +106,216 @@ let ProblemList = class ProblemList extends LitElement {
     ruleFilterChanged(event) {
         if (event.detail.rule !== Rules.AllRules) {
             this.activeSearch = false;
-            this.problemList = this.unfilteredProblems;
+            this.filteredProblems = this.rawProblems;
             this.search(event.detail.rule);
         }
         else {
             this.activeSearch = false;
-            this.problemList = this.unfilteredProblems;
+            this.filteredProblems = this.rawProblems;
+            this.currentPage = 1;
             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.filteredProblems = this.rawProblems;
             }
+            this.searchTerm = event.detail.search;
             this.search(event.detail.search);
         }
         else {
             this.activeSearch = false;
-            this.problemList = this.unfilteredProblems;
+            this.searchTerm = "";
+            this.filteredProblems = this.rawProblems;
+            this.currentPage = 1;
             this.requestUpdate();
         }
     }
     labelFilterChanged(event) {
-        this.changeProblemLabels(event.detail.label);
+        this.problemLabelView = event.detail.label;
+        this.requestUpdate();
     }
     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);
+        return new Set(this.rawProblems.map(p => p.source));
     }
     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;
-                case ProblemLabelView.Source:
-                    this.problemList[i].problemLabelView = ProblemLabelView.Source;
-                    this.problemLabelView = ProblemLabelView.Source;
-                    break;
-            }
-        }
+        this.searchWorker.postMessage({ search: searchText, problems: this.filteredProblems });
     }
     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;
-            case ProblemSortView.SourceLocation:
-                this.problemList = this.problemList.sort((a, b) => {
-                    if (a.problemObject.sourceLocation < b.problemObject.sourceLocation)
-                        return 1;
-                    if (a.problemObject.sourceLocation > b.problemObject.sourceLocation)
-                        return -1;
+        const sortFn = (a, b) => {
+            switch (sort) {
+                case ProblemSortView.LineNumber:
+                    return a.startLineNumber - b.startLineNumber;
+                case ProblemSortView.Rule:
+                    return b.source.localeCompare(a.source);
+                case ProblemSortView.JSONPath:
+                    return a.jsonPath.localeCompare(b.jsonPath);
+                case ProblemSortView.Category:
+                    return a.category.localeCompare(b.category);
+                case ProblemSortView.Severity:
+                    return b.severity - a.severity;
+                case ProblemSortView.SourceLocation:
+                    return (b.sourceLocation || '').localeCompare(a.sourceLocation || '');
+                default:
                     return 0;
-                });
-                break;
-        }
-        this.problemList = this.problemList.slice(0, this.problemList.length);
+            }
+        };
+        this.filteredProblems = [...this.filteredProblems].sort(sortFn);
         this.requestUpdate();
     }
     problemClicked(event) {
-        this.mainView.problems = [event.detail.problem];
-        this.lineClicked(event.detail.problem.line, false, event.detail.problem.idx);
-        this.paginator.activeIndex = event.detail.problem.resultIndex;
+        const problem = event.detail.problem;
+        this.selectedProblemHash = problem.problemObject.hash();
+        this.selectedLine = problem.line;
+        this.selectedIdx = problem.idx;
+        this.mainView.problems = [problem];
+        this.lineClicked(problem.line, false, problem.idx);
+        this.setPageForProblem(problem.problemObject);
     }
     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 = [];
+    setPageForProblem(problem) {
+        const idx = this.filteredProblems.findIndex(p => p.hash() === problem.hash());
+        if (idx >= 0) {
+            this.currentPage = Math.ceil((idx + 1) / this.itemsPerPage);
         }
     }
     get problemItems() {
-        return this.problemList;
+        return this.createProblemItemsForPage();
     }
-    generateProblemItems(problems) {
-        const problemList = [];
+    createProblemItemsForPage() {
+        const start = (this.currentPage - 1) * this.itemsPerPage;
+        const end = Math.min(start + this.itemsPerPage, this.filteredProblems.length);
+        const pageProblems = this.filteredProblems.slice(start, end);
         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);
+        const items = [];
+        for (let i = 0; i < pageProblems.length; i++) {
+            const problem = pageProblems[i];
+            const globalIndex = start + i;
+            const item = new ProblemItem();
+            item.line = problem.startLineNumber;
+            item.column = problem.startColumn;
+            item.problem = problem.jsonPath;
+            item.problemLabelView = this.problemLabelView;
+            item.problemObject = problem;
+            item.resultIndex = globalIndex;
+            item.parent = this;
+            const lineCount = lineIdx.get(problem.startLineNumber) || 0;
+            item.idx = lineCount + 1;
+            lineIdx.set(problem.startLineNumber, lineCount + 1);
+            if (this.selectedProblemHash === problem.hash()) {
+                item.selected = true;
             }
-            else {
-                lineIdx.set(marker.startLineNumber, [prob]);
+            else if (this.selectedLine === problem.startLineNumber) {
+                item.selectedSibling = true;
             }
-            problemList.push(prob);
+            items.push(item);
         }
-        return problemList;
+        return items;
     }
     set problems(problems) {
-        const problemList = this.generateProblemItems(problems);
-        this.problemList = problemList;
-        this.unfilteredProblems = problemList;
-        this.setActiveProblem(problemList);
+        this.rawProblems = problems;
+        this.filteredProblems = problems;
+        this.currentPage = 1;
+        this.selectedProblemHash = null;
+        this.selectedLine = null;
+        this.selectedIdx = 0;
+        this.activeSearch = false;
+        this.searchTerm = "";
         this.problemToolbar.availableRules = [Rules.AllRules, ...this.extractRulesFromProblems()];
+        // Clear mainView and set healthy state when no problems
+        this.mainView.problems = [];
+        this.mainView.isHealthy = problems.length === 0 && !this.isInvalid;
         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);
-                }
-            }
+    lineClicked(line, _scroll = true, index = 0, stopCycle = false) {
+        if (line === undefined)
+            return;
+        const foundProblems = this.filteredProblems.filter(p => p.startLineNumber === line);
+        if (foundProblems.length === 0) {
+            this.mainView.problems = [];
+            return;
+        }
+        this.selectedLine = line;
+        let selectedProblem = null;
+        if (index === 0) {
+            selectedProblem = foundProblems[0];
         }
-        this.mainView.problems = foundProblems;
-        if (selected)
-            this.activeProblem = selected;
-        if (selected && selected.idx !== 0) {
-            if (!stopCycle)
-                this.mainView.selectSlide(selected.idx);
+        else if (index > 0 && index <= foundProblems.length) {
+            selectedProblem = foundProblems[index - 1];
         }
+        else {
+            selectedProblem = foundProblems[0];
+        }
+        if (selectedProblem) {
+            this.selectedProblemHash = selectedProblem.hash();
+            this.selectedIdx = index;
+            this.setPageForProblem(selectedProblem);
+        }
+        const pageItems = this.createProblemItemsForPage();
+        const foundItems = pageItems.filter(item => item.line === line);
+        this.mainView.problems = foundItems;
+        if (foundItems.length > 0 && !stopCycle) {
+            const selectedItem = foundItems.find(item => item.problemObject.hash() === this.selectedProblemHash);
+            if (selectedItem && selectedItem.idx !== 0) {
+                this.mainView.selectSlide(selectedItem.idx);
+            }
+        }
+        this.requestUpdate();
     }
     render() {
-        this.paginator.values = this.problemList;
-        this.paginator.invalid = this.isInvalid;
+        const totalItems = this.filteredProblems.length;
+        const totalPages = Math.ceil(totalItems / this.itemsPerPage);
+        this.paginatorNav.currentPage = this.currentPage;
+        this.paginatorNav.totalPages = totalPages;
+        this.paginatorNav.totalItems = totalItems;
+        this.paginatorNav.itemsPerPage = this.itemsPerPage;
+        const pageItems = this.createProblemItemsForPage();
+        this.sparks.isError = this.isInvalid;
+        let content;
+        if (pageItems.length === 0) {
+            let noValuesClass = 'no-values';
+            let icon = 'prescription2';
+            let message;
+            if (this.isInvalid) {
+                noValuesClass += ' error';
+                message = html `invalid / error`;
+            }
+            else if (this.activeSearch && this.searchTerm) {
+                noValuesClass += ' search-miss';
+                icon = 'ban';
+                message = html `no problems match<br/><span class="search-term">'${this.searchTerm}'</span>`;
+            }
+            else {
+                message = html `healthy!`;
+            }
+            content = html `
+                <div class="${noValuesClass}" style="position: relative">
+                    <div style="position: absolute; width: 100%; top: -50px; left: 0;">${this.sparks}</div>
+                    <sl-icon name="${icon}"></sl-icon>
+                    <br/>
+                    ${message}
+                </div>
+            `;
+        }
+        else {
+            content = html `
+                ${this.paginatorNav}
+                <div class="paginator-values">
+                    ${pageItems}
+                </div>
+            `;
+        }
         return html `
             <div class="problem-list-container">
                 <div class="main-view">
@@ -335,13 +325,19 @@ let ProblemList = class ProblemList extends LitElement {
                     ${this.problemToolbar}
                 </div>
                 <div class="problem-list">
-                    ${this.paginator}
+                    ${content}
                 </div>
             </div>
         `;
     }
 };
 ProblemList.styles = [problemListCss, sharedCss];
+__decorate([
+    state()
+], ProblemList.prototype, "currentPage", void 0);
+__decorate([
+    state()
+], ProblemList.prototype, "itemsPerPage", void 0);
 __decorate([
     property({ type: Boolean })
 ], ProblemList.prototype, "isInvalid", void 0);

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

@@ -8,8 +8,9 @@ export default css `
         color: var(--font-color-sub2);
         font-size: 1.4rem;
         text-align: center;
-        margin-top: 20px; 
-        
+        margin-top: 20px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
     }
     
     .empty sl-icon {
@@ -17,6 +18,10 @@ export default css `
         font-size: 5rem;
     }
 
+    .empty.healthy {
+        color: var(--ok-color);
+    }
+
     .main-view {
         padding: 10px;
     }
@@ -74,6 +79,11 @@ export default css `
         margin-top: 15px;
         display: block;
     }
+
+    .rule-label, .location-label {
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
     
     .problem-count {
         position: absolute;

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

@@ -7,10 +7,13 @@ import { SlCarousel } from "@shoelace-style/shoelace";
 export declare class ProblemMainView extends LitElement {
     static styles: import("lit").CSSResult[];
     problems: ProblemItem[];
+    isHealthy: boolean;
     carousel: SlCarousel;
     selectedIndex: number;
     private manualChange;
+    private slideTimeout?;
     constructor();
+    disconnectedCallback(): void;
     showRuleDocs(source: string): void;
     howToFix(source: string): void;
     slideChanged(event: CustomEvent): void;