Split points by documents

src/scripts/background/install.ts

@@ -2,6 +2,7 @@ import { setLocal } from '../lib/chromeStorage';
 import { checkIfUpdateNeeded } from './database';
 import { donationReminderAllowed } from './donation';
 import { initializePageAction } from './pageAction';
+import { DEFAULT_LIST_STYLE } from "../constants";
 
 export async function handleExtensionInstalled(reason:chrome.runtime.InstalledDetails): Promise<void> {
     const donationAllowed = donationReminderAllowed(navigator.userAgent);
@@ -13,6 +14,7 @@ export async function handleExtensionInstalled(reason:chrome.runtime.InstalledDe
             active: false,
             allowedPlattform: donationAllowed,
         },
+        pointListStyle: DEFAULT_LIST_STYLE
     });
 
     await checkIfUpdateNeeded(true, reason);

src/scripts/constants.ts

@@ -12,4 +12,6 @@ export const API_HEADERS = {
     apikey: atob('Y29uZ3JhdHMgb24gZ2V0dGluZyB0aGUga2V5IDpQ'),
 };
 
-export const SUPPORTED_LANGUAGES = ['en', 'de', 'nl', 'fr', 'es'] as const;
+export const SUPPORTED_LANGUAGES = ['en', 'de', 'nl', 'fr', 'es'] as const;
+
+export const DEFAULT_LIST_STYLE :"docCategories" | "unified" = "docCategories" as const;

src/scripts/views/popup/service.ts

@@ -1,19 +1,27 @@
-import { getApiUrl, getLanguage, isCuratorMode } from './state';
+import { getApiUrl, getLanguage, isCuratorMode, getPointListStyle } from './state';
 import { applyHeaderColor } from './theme';
 
 interface ServicePoint {
     status: string;
     title: string;
-    case?: {
+    case: {
         classification?: string;
         localized_title?: string | null;
     };
+    document_id?: number
+}
+
+interface ServiceDocument {
+    id: number
+    name: string
+    url: string
 }
 
 interface ServiceResponse {
     name: string;
     rating?: string;
     points: ServicePoint[];
+    documents: ServiceDocument[]
 }
 
 interface SearchResponse {
@@ -23,6 +31,13 @@ interface SearchResponse {
     }>;
 }
 
+interface FilteredPoints {
+    blocker: ServicePoint[];
+    bad: ServicePoint[];
+    good: ServicePoint[];
+    neutral: ServicePoint[];
+}
+
 export async function displayServiceDetails(
     id: string,
     options: { unverified?: boolean } = {}
@@ -52,7 +67,17 @@ export async function displayServiceDetails(
         updatePointsCount(data.points.length);
         revealLoadedState(options.unverified === true);
 
-        populateList(data.points);
+        const pointListStyle = getPointListStyle() //check the user preferences to show the list accordingly
+
+        if (pointListStyle === "docCategories") {
+            populateListDocCategories(data.points, data.documents);
+        } else if (pointListStyle === "unified") {
+            populateListUnified(data.points)
+        } else {
+            console.error("Unsupported pointListStyle", pointListStyle); 
+        }
+
+
     } catch (error) {
         hideLoadingState();
         showErrorOverlay(
@@ -164,7 +189,18 @@ function revealLoadedState(unverified: boolean): void {
     }
 }
 
-function populateList(points: ServicePoint[]): void {
+function populateListUnified(allPoints: ServicePoint[]) {
+    const documentList = document.getElementById('documentList');
+    const doc = document.createElement('div');
+    const temp = `
+        <div class="">
+            <div id="pointList" class="pointList">
+            </div>
+        </div>`
+    ;
+    doc.innerHTML = temp.trim();
+    documentList!.appendChild(doc.firstChild!);
+
     const pointsList = document.getElementById('pointList');
     if (!pointsList) {
         return;
@@ -173,79 +209,221 @@ function populateList(points: ServicePoint[]): void {
     pointsList.style.display = 'block';
     pointsList.innerHTML = '';
 
-    const filteredPoints = filterPoints(points);
+    const filteredPoints = filterPoints(allPoints);
 
-    appendPointGroup(filteredPoints.blocker, pointsList, false);
-    appendPointGroup(filteredPoints.bad, pointsList, false);
-    appendPointGroup(filteredPoints.good, pointsList, false);
-    appendPointGroup(filteredPoints.neutral, pointsList, true);
+    createPointList(filteredPoints.blocker, pointsList, false);
+    createPointList(filteredPoints.bad, pointsList, false);
+    createPointList(filteredPoints.good, pointsList, false);
+    createPointList(filteredPoints.neutral, pointsList, true);
 }
 
-function filterPoints(points: ServicePoint[]): {
-    blocker: ServicePoint[];
-    bad: ServicePoint[];
-    good: ServicePoint[];
-    neutral: ServicePoint[];
-} {
-    const curatedPoints = points.filter((point) => {
-        if (!isCuratorMode()) {
-            return point.status === 'approved';
-        }
-        return point.status === 'approved' || point.status === 'pending';
-    });
-
-    return {
-        blocker: curatedPoints.filter(
-            (point) => point.case?.classification === 'blocker'
-        ),
-        bad: curatedPoints.filter(
-            (point) => point.case?.classification === 'bad'
-        ),
-        good: curatedPoints.filter(
-            (point) => point.case?.classification === 'good'
-        ),
-        neutral: curatedPoints.filter(
-            (point) => point.case?.classification === 'neutral'
-        ),
-    };
-}
 
-function appendPointGroup(
-    points: ServicePoint[],
-    container: HTMLElement,
-    isLastGroup: boolean
-): void {
-    let added = 0;
+function populateListDocCategories(allPoints: ServicePoint[], documents: ServiceDocument[]) {
+    const documentList = document.getElementById('documentList');
+    //sort documents alphabetically
+    try {
+        documents.sort((a, b) => 
+            a.name.localeCompare(b.name)
+        )
+    } catch (error) {
+        console.warn(error)
+    }
 
-    points.forEach((point, index) => {
-        const wrapper = document.createElement('div');
-        const classification = point.case?.classification ?? 'neutral';
-        const pointTitle = point.case?.localized_title ?? point.title;
-        wrapper.innerHTML = `
-            <div class="point ${classification}">
-                <img src="icons/${classification}.svg">
-                <p>${pointTitle}</p>
-                ${renderCuratorTag(point.status)}
+    // prepare the Document Index
+    const indexElement = document.getElementById("documentIndex") as HTMLElement
+    indexElement.style = "display:block"
+
+        // Split points by Document and display them seperatly
+    for (let i of documents) {
+        const element = i;
+
+        const docPoints = allPoints.filter((point:ServicePoint) => point.document_id === element.id) //only points of the current document
+        const sortedPoints = filterPoints(docPoints)
+
+
+        addDocumentToIndex(element, indexElement, sortedPoints)
+
+        // check if the document has points and either display it with the points else add them to the bottom
+        if (sortedPoints.blocker.length + sortedPoints.bad.length + sortedPoints.neutral.length + sortedPoints.good.length > 0) { //documents with points
+            const doc = document.createElement('div');
+            const temp = `
+            <div class="">
+                <div class="documentHeader">
+                    <h3 id="documents_${element.id}" class="documentTitle" >${element.name}</h3>
+                    <a href="${element.url}" target="_blank">Read Original</a>
+                </div>
+                    <div id="pointList_${element.id}" class="pointList">
+                        <a style="display: none">...</a>
+                    </div>
+            </div>`;
+            doc.innerHTML = temp.trim();
+            documentList!.appendChild(doc.firstChild!);
+
+            const pointsList = document.getElementById(`pointList_${element.id}`)!
+
+            createSortedPoints(sortedPoints,pointsList)
+        } else { //documents without points
+            const docsWithoutPointsWraper = document.getElementById('docsWithoutPointsWraper')
+            const docsWithoutPoints = document.getElementById('docsWithoutPoints')
+
+            if (docsWithoutPoints?.style.display === "none") {
+                docsWithoutPoints.style.display = "block"
+            }
+            const doc = document.createElement('div');
+            const temp = `
+                <div class="documentHeader">
+                    <h3 class="documentTitle" id="documents_${element.id}">${element.name}</h3>
+                    <a href="${element.url}" target="_blank">Read Original></a>
+                </div>`;
+            doc.innerHTML = temp.trim();
+            docsWithoutPointsWraper!.appendChild(doc.firstChild!);
+        }
+    }
+    //display points not linked to a document
+    const noDocPoints = allPoints.filter((point: ServicePoint) => point.document_id === undefined)
+    if (noDocPoints.length > 0) {
+        const doc = document.createElement('div');
+        const temp = `
+        <div class="">
+            <div class="documentHeader">
+                <h3 class="documentTitle">Points not linked to a Document</h3>
             </div>
-        `.trim();
-        if (wrapper.firstChild) {
-            container.appendChild(wrapper.firstChild as HTMLElement);
+                <div id="pointList_unlinkedPoints" class="pointList">
+                    <a style="display: none">...</a>
+                </div>
+        </div>`;
+        doc.innerHTML = temp.trim();
+        documentList!.appendChild(doc.firstChild!);
+        const sortedPoints = filterPoints(noDocPoints)
+        const pointsList = document.getElementById(`pointList_unlinkedPoints`)!
+        createSortedPoints(sortedPoints,pointsList)
+
+    }
+}
+function filterPoints(points:ServicePoint[]) {
+        if (isCuratorMode()) {
+            points = points.filter(
+                (point) =>
+                    point.status === 'approved' || point.status === 'pending'
+            );
+        } else {
+            points = points.filter((point) => point.status === 'approved');
         }
-        added += 1;
+        let filteredPoints:FilteredPoints = {
+            blocker: [],
+            bad: [],
+            good: [],
+            neutral: []
+        }
+        filteredPoints.blocker = points.filter(
+            (point) => point.case.classification === 'blocker'
+        );
+        filteredPoints.bad = points.filter(
+            (point) => point.case.classification === 'bad'
+        );
+        filteredPoints.good = points.filter(
+            (point) => point.case.classification === 'good'
+        );
+        filteredPoints.neutral = points.filter(
+            (point) => point.case.classification === 'neutral'
+        );
+        return filteredPoints
+}
+
+function createSortedPoints(sortedPoints:FilteredPoints,pointsList:HTMLElement) {
+            if (sortedPoints.blocker) {
+                createPointList(sortedPoints.blocker, pointsList, false);
+            }    
+            if (sortedPoints.bad) {
+                createPointList(sortedPoints.bad, pointsList, false);
+            }
+            if (sortedPoints.good) {
+                createPointList(sortedPoints.good, pointsList, false);
+            }
+            if (sortedPoints.neutral) {
+                createPointList(sortedPoints.neutral, pointsList, true);
+            }
+}
 
-        if (index !== points.length - 1) {
+function createPointList(pointsFiltered: ServicePoint[], pointsList: HTMLElement, last: boolean) {
+    let added = 0;
+    for (let i = 0; i < pointsFiltered.length; i++) {
+        const point = document.createElement('div');
+        const pointTitle = pointsFiltered[i]!.case?.localized_title ?? pointsFiltered[i]!.title;
+
+        let temp = `
+        <div class="point ${pointsFiltered[i]!.case.classification}">
+            <img src="icons/${pointsFiltered[i]!.case.classification}.svg">
+            <p>${pointTitle}</p>
+            ${renderCuratorTag(pointsFiltered[i]!.status)}
+        </div>`;
+        point.innerHTML = temp.trim();
+        pointsList.appendChild(point.firstChild!);
+        added++;
+        if (i !== pointsFiltered.length - 1) {
             const divider = document.createElement('hr');
-            container.appendChild(divider);
+            pointsList.appendChild(divider);
         }
-    });
-
-    if (added > 0 && !isLastGroup) {
+    }
+    if (added !== 0 && !last) {
         const divider = document.createElement('hr');
         divider.classList.add('group');
-        container.appendChild(divider);
+        pointsList.appendChild(divider);
+    }
+}
+function addDocumentToIndex(serviceDocument:ServiceDocument, indexElement:HTMLElement, points:FilteredPoints) { //creates an index of the documents
+    const list = document.createElement('li')
+    const item = document.createElement('a')
+
+    const pointSummary = documentIndexPointSummary(points)
+
+    item.innerText = serviceDocument.name
+    item.href = `#documents_${serviceDocument.id}`
+
+
+    list.appendChild(item)
+    list.appendChild(pointSummary)
+
+    indexElement.appendChild(list)
+
+    function documentIndexPointSummary(points:FilteredPoints) { //adds the number of points of each classification as a summary below the document index entry
+        const pointsSummanry = document.createElement("div")
+        pointsSummanry.classList = "indexSummaryWraper"
+
+        createSummary("good")
+        createSummary("neutral")
+        createSummary("bad")
+        createSummary("blocker")
+
+        return pointsSummanry
+
+        function createSummary(classification:"good" | "bad" | "neutral" | "blocker") {
+            const wrapper = document.createElement("div")
+            const count = points[classification].length
+
+            //add the classification icon
+            const img = document.createElement("img");
+            img.src = `icons/${classification}.svg`
+
+            wrapper.appendChild(img)
+
+
+            //add number of points of classification
+            const div = document.createElement("div");
+            div.innerText = `${count}`;
+            div.classList.add("indexSummary", classification);
+
+            wrapper.appendChild(div)
+
+            pointsSummanry.appendChild(wrapper)
+        }
     }
 }
 
+
+
+
+
 function renderCuratorTag(status: string): string {
     if (!isCuratorMode() || status === 'approved') {
         return '';