From 42bf34f54949c20598f94003517117d5ca4665cd Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sat, 24 Jun 2023 06:45:03 -0600 Subject: [PATCH 1/6] fix infinitescroll to work off correct ID --- src/views/ProjectsView.vue | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue index 6db6ece..50f00d2 100644 --- a/src/views/ProjectsView.vue +++ b/src/views/ProjectsView.vue @@ -117,7 +117,12 @@ import InfiniteScroll from "@/components/InfiniteScroll"; }) export default class ProjectsView extends Vue { apiServer = ""; - projects: { handleId: string; name: string; description: string }[] = []; + projects: { + handleId: string; + name: string; + description: string; + rowid: number; + }[] = []; current: IIdentifier; isDataLoaded = false; @@ -126,20 +131,10 @@ export default class ProjectsView extends Vue { console.log(payload); if (this.projects.length > 0) { console.log(this.projects[this.projects.length - 1]); - const afterurl = this.projects[this.projects.length - 1]["handleId"]; - const regex = /([0-9A-Z]+)$/; // Regular expression to match one or more digits at the end - const matches = afterurl.match(regex); - - let afterId = ""; - if (matches && matches.length > 1) { - afterId = matches[1]; - console.log(afterId); // Output: 01H3HBVZGH3YE0K27X35S15QT1 - } else { - console.log("No digits found at the end of the URL."); - return; - } + const oldestId = this.projects[this.projects.length - 1]["rowid"]; + const url = - this.apiServer + "/api/v2/report/plansByIssuer?afterId=" + afterId; + this.apiServer + "/api/v2/report/plansByIssuer?beforeId=" + oldestId; const token = await accessToken(this.current); const headers = { "Content-Type": "application/json", @@ -158,6 +153,7 @@ export default class ProjectsView extends Vue { // handleId is new in server v release-1.6.0; remove fullIri when that // version shows up here: https://endorser.ch:3000/api-docs/ handleId: plan.handleId || plan.fullIri, + rowid: plan.rowid, }; this.projects.push(data); } @@ -197,6 +193,7 @@ export default class ProjectsView extends Vue { // handleId is new in server v release-1.6.0; remove fullIri when that // version shows up here: https://endorser.ch:3000/api-docs/ handleId: plan.handleId || plan.fullIri, + rowid: plan.rowid, }; this.projects.push(data); } From 49ce7d43b0922390255b9a2726dad9b5f0a1efd3 Mon Sep 17 00:00:00 2001 From: Matthew Raymer Date: Mon, 26 Jun 2023 19:53:28 +0800 Subject: [PATCH 2/6] Refactored and streamlined code. Still having an issue with beforeId? --- src/views/ProjectsView.vue | 101 ++++++++++++------------------------- 1 file changed, 33 insertions(+), 68 deletions(-) diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue index 6db6ece..d27f3a6 100644 --- a/src/views/ProjectsView.vue +++ b/src/views/ProjectsView.vue @@ -112,6 +112,13 @@ import { accessToken } from "@/libs/crypto"; import { IIdentifier } from "@veramo/core"; import InfiniteScroll from "@/components/InfiniteScroll"; +interface ProjectData { + name: string; + description: string; + handleId: string; + jwtId: string; +} + @Component({ components: { InfiniteScroll }, }) @@ -119,52 +126,35 @@ export default class ProjectsView extends Vue { apiServer = ""; projects: { handleId: string; name: string; description: string }[] = []; current: IIdentifier; - isDataLoaded = false; + + async dataLoader(url: string, token: string) { + const headers: { [key: string]: string } = { + "Content-Type": "application/json", + Authorization: `Bearer ${token}`, + }; + + try { + const resp = await this.axios.get(url, { headers }); + if (resp.status === 200) { + const plans: ProjectData[] = resp.data.data; + for (const plan of plans) { + const { name, description, handleId = plan.fullIri, jwtId } = plan; + this.projects.push({ name, description, handleId, jwtId }); + } + } + } catch (error) { + console.error("Got error loading projects:", error); + } + } async loadMoreData(payload: boolean) { console.log("loadMoreData"); console.log(payload); if (this.projects.length > 0) { - console.log(this.projects[this.projects.length - 1]); - const afterurl = this.projects[this.projects.length - 1]["handleId"]; - const regex = /([0-9A-Z]+)$/; // Regular expression to match one or more digits at the end - const matches = afterurl.match(regex); - - let afterId = ""; - if (matches && matches.length > 1) { - afterId = matches[1]; - console.log(afterId); // Output: 01H3HBVZGH3YE0K27X35S15QT1 - } else { - console.log("No digits found at the end of the URL."); - return; - } - const url = - this.apiServer + "/api/v2/report/plansByIssuer?afterId=" + afterId; + const latestProject = this.projects[this.projects.length - 1]; + const url = `${this.apiServer}/api/v2/report/plansByIssuer?beforeId=${latestProject.jwtId}`; const token = await accessToken(this.current); - const headers = { - "Content-Type": "application/json", - Authorization: "Bearer " + token, - }; - - try { - const resp = await this.axios.get(url, { headers }); - if (resp.status === 200) { - const plans = resp.data.data; - for (let i = 0; i < plans.length; i++) { - const plan = plans[i]; - const data = { - name: plan.name, - description: plan.description, - // handleId is new in server v release-1.6.0; remove fullIri when that - // version shows up here: https://endorser.ch:3000/api-docs/ - handleId: plan.handleId || plan.fullIri, - }; - this.projects.push(data); - } - } - } catch (error) { - console.error("Got error loading projects: ", error); - } + await this.dataLoader(url, token); } } @@ -178,34 +168,9 @@ export default class ProjectsView extends Vue { async LoadProjects(identity: IIdentifier) { console.log("LoadProjects"); - const url = this.apiServer + "/api/v2/report/plansByIssuer"; - const token = await accessToken(identity); - const headers = { - "Content-Type": "application/json", - Authorization: "Bearer " + token, - }; - - try { - const resp = await this.axios.get(url, { headers }); - if (resp.status === 200) { - const plans = resp.data.data; - for (let i = 0; i < plans.length; i++) { - const plan = plans[i]; - const data = { - name: plan.name, - description: plan.description, - // handleId is new in server v release-1.6.0; remove fullIri when that - // version shows up here: https://endorser.ch:3000/api-docs/ - handleId: plan.handleId || plan.fullIri, - }; - this.projects.push(data); - } - - this.isDataLoaded = true; - } - } catch (error) { - console.error("Got error loading projects: ", error); - } + const url = `${this.apiServer}/api/v2/report/plansByIssuer`; + const token: string = await accessToken(identity); + await this.dataLoader(url, token); } // 'created' hook runs when the Vue instance is first created From 6393a20e7e5868491360067a654c9a6c142146e0 Mon Sep 17 00:00:00 2001 From: Matthew Raymer Date: Mon, 26 Jun 2023 20:45:13 +0800 Subject: [PATCH 3/6] Documentation added --- src/views/ProjectsView.vue | 41 +++++++++++++++++++++++++++++++++++--- 1 file changed, 38 insertions(+), 3 deletions(-) diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue index 89ab68e..dafad40 100644 --- a/src/views/ProjectsView.vue +++ b/src/views/ProjectsView.vue @@ -112,10 +112,25 @@ import { accessToken } from "@/libs/crypto"; import { IIdentifier } from "@veramo/core"; import InfiniteScroll from "@/components/InfiniteScroll"; +/** +* Represents data about a project +**/ interface ProjectData { + /** + * Name of the project + **/ name: string; + /** + * Description of the project + **/ description: string; + /** + * URL referencing information about the project + **/ handleId: string; + /** + * The Identier of the project + **/ jwtId: string; } @@ -132,6 +147,11 @@ export default class ProjectsView extends Vue { }[] = []; current: IIdentifier; + /** + * Core project data loader + * @param url the url used to fetch the data + * @param token Authorization token + **/ async dataLoader(url: string, token: string) { const headers: { [key: string]: string } = { "Content-Type": "application/json", @@ -152,9 +172,11 @@ export default class ProjectsView extends Vue { } } + /** + * Data loader used by infinite scroller + * @param payload is the flag from the InfiniteScroll indicating if it should load + **/ async loadMoreData(payload: boolean) { - console.log("loadMoreData"); - console.log(payload); if (this.projects.length > 0) { const latestProject = this.projects[this.projects.length - 1]; const url = `${this.apiServer}/api/v2/report/plansByIssuer?beforeId=${latestProject.jwtId}`; @@ -163,6 +185,10 @@ export default class ProjectsView extends Vue { } } + /** + * Handle clicking on a project entry found in the list + * @param id of the project + **? onClickLoadProject(id: string) { localStorage.setItem("projectId", id); const route = { @@ -171,6 +197,10 @@ export default class ProjectsView extends Vue { this.$router.push(route); } + /** + * Load projects initially + * @param identity of the user + **/ async LoadProjects(identity: IIdentifier) { console.log("LoadProjects"); const url = `${this.apiServer}/api/v2/report/plansByIssuer`; @@ -178,7 +208,9 @@ export default class ProjectsView extends Vue { await this.dataLoader(url, token); } - // 'created' hook runs when the Vue instance is first created + /** + * 'created' hook runs when the Vue instance is first created + **/ async created() { await db.open(); const settings = await db.settings.get(MASTER_SETTINGS_KEY); @@ -198,6 +230,9 @@ export default class ProjectsView extends Vue { } } + /** + * Handling clicking on the new project button + **/ onClickNewProject(): void { localStorage.removeItem("projectId"); const route = { From 072b663ec9b171399b85ad048a4acfcd3e7261bf Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Mon, 26 Jun 2023 19:18:38 -0600 Subject: [PATCH 4/6] change comment whitespace to get past lint errors --- src/views/ProjectsView.vue | 42 +++++++++++++++++++------------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue index dafad40..ea97ca3 100644 --- a/src/views/ProjectsView.vue +++ b/src/views/ProjectsView.vue @@ -113,24 +113,24 @@ import { IIdentifier } from "@veramo/core"; import InfiniteScroll from "@/components/InfiniteScroll"; /** -* Represents data about a project -**/ + * Represents data about a project + **/ interface ProjectData { /** - * Name of the project - **/ + * Name of the project + **/ name: string; /** - * Description of the project - **/ + * Description of the project + **/ description: string; /** - * URL referencing information about the project - **/ + * URL referencing information about the project + **/ handleId: string; /** - * The Identier of the project - **/ + * The Identier of the project + **/ jwtId: string; } @@ -148,10 +148,10 @@ export default class ProjectsView extends Vue { current: IIdentifier; /** - * Core project data loader - * @param url the url used to fetch the data - * @param token Authorization token - **/ + * Core project data loader + * @param url the url used to fetch the data + * @param token Authorization token + **/ async dataLoader(url: string, token: string) { const headers: { [key: string]: string } = { "Content-Type": "application/json", @@ -173,9 +173,9 @@ export default class ProjectsView extends Vue { } /** - * Data loader used by infinite scroller - * @param payload is the flag from the InfiniteScroll indicating if it should load - **/ + * Data loader used by infinite scroller + * @param payload is the flag from the InfiniteScroll indicating if it should load + **/ async loadMoreData(payload: boolean) { if (this.projects.length > 0) { const latestProject = this.projects[this.projects.length - 1]; @@ -209,8 +209,8 @@ export default class ProjectsView extends Vue { } /** - * 'created' hook runs when the Vue instance is first created - **/ + * 'created' hook runs when the Vue instance is first created + **/ async created() { await db.open(); const settings = await db.settings.get(MASTER_SETTINGS_KEY); @@ -231,8 +231,8 @@ export default class ProjectsView extends Vue { } /** - * Handling clicking on the new project button - **/ + * Handling clicking on the new project button + **/ onClickNewProject(): void { localStorage.removeItem("projectId"); const route = { From ea95382fdfc641d26071512aaa757a664fbb0dcc Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Mon, 26 Jun 2023 19:20:02 -0600 Subject: [PATCH 5/6] change jwtId to rowid for paging within a derivative/cached table --- src/views/ProjectsView.vue | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue index ea97ca3..83bae2a 100644 --- a/src/views/ProjectsView.vue +++ b/src/views/ProjectsView.vue @@ -131,7 +131,7 @@ interface ProjectData { /** * The Identier of the project **/ - jwtId: string; + rowid: string; } @Component({ @@ -163,8 +163,8 @@ export default class ProjectsView extends Vue { if (resp.status === 200) { const plans: ProjectData[] = resp.data.data; for (const plan of plans) { - const { name, description, handleId = plan.fullIri, jwtId } = plan; - this.projects.push({ name, description, handleId, jwtId }); + const { name, description, handleId = plan.fullIri, rowid } = plan; + this.projects.push({ name, description, handleId, rowid }); } } } catch (error) { @@ -179,7 +179,7 @@ export default class ProjectsView extends Vue { async loadMoreData(payload: boolean) { if (this.projects.length > 0) { const latestProject = this.projects[this.projects.length - 1]; - const url = `${this.apiServer}/api/v2/report/plansByIssuer?beforeId=${latestProject.jwtId}`; + const url = `${this.apiServer}/api/v2/report/plansByIssuer?beforeId=${latestProject.rowid}`; const token = await accessToken(this.current); await this.dataLoader(url, token); } From 6d3ab7c31349a7903d50d1e66768e114b326cd98 Mon Sep 17 00:00:00 2001 From: Matthew Raymer Date: Tue, 27 Jun 2023 18:57:36 +0800 Subject: [PATCH 6/6] Added loading settings (no image yet) plus refactored types a little more. --- src/views/ProjectsView.vue | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue index 83bae2a..b69817e 100644 --- a/src/views/ProjectsView.vue +++ b/src/views/ProjectsView.vue @@ -139,13 +139,9 @@ interface ProjectData { }) export default class ProjectsView extends Vue { apiServer = ""; - projects: { - handleId: string; - name: string; - description: string; - rowid: number; - }[] = []; + projects: ProjectData[] = []; current: IIdentifier; + isLoading = false; /** * Core project data loader @@ -159,6 +155,7 @@ export default class ProjectsView extends Vue { }; try { + this.isLoading = true; const resp = await this.axios.get(url, { headers }); if (resp.status === 200) { const plans: ProjectData[] = resp.data.data; @@ -169,6 +166,8 @@ export default class ProjectsView extends Vue { } } catch (error) { console.error("Got error loading projects:", error); + } finally { + this.isLoading = false; } } @@ -177,6 +176,7 @@ export default class ProjectsView extends Vue { * @param payload is the flag from the InfiniteScroll indicating if it should load **/ async loadMoreData(payload: boolean) { + console.log(payload); if (this.projects.length > 0) { const latestProject = this.projects[this.projects.length - 1]; const url = `${this.apiServer}/api/v2/report/plansByIssuer?beforeId=${latestProject.rowid}`;