Browse Source

Merge branch 'infinitescroll-test'

kb/add-usage-guide
Matthew Raymer 1 year ago
parent
commit
5f0bbccbe6
  1. 135
      src/views/ProjectsView.vue

135
src/views/ProjectsView.vue

@ -112,62 +112,83 @@ import { accessToken } from "@/libs/crypto";
import { IIdentifier } from "@veramo/core"; import { IIdentifier } from "@veramo/core";
import InfiniteScroll from "@/components/InfiniteScroll"; 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
**/
rowid: string;
}
@Component({ @Component({
components: { InfiniteScroll }, components: { InfiniteScroll },
}) })
export default class ProjectsView extends Vue { export default class ProjectsView extends Vue {
apiServer = ""; apiServer = "";
projects: { handleId: string; name: string; description: string }[] = []; projects: ProjectData[] = [];
current: IIdentifier; current: IIdentifier;
isDataLoaded = false; isLoading = false;
async loadMoreData(payload: boolean) { /**
console.log("loadMoreData"); * Core project data loader
console.log(payload); * @param url the url used to fetch the data
if (this.projects.length > 0) { * @param token Authorization token
console.log(this.projects[this.projects.length - 1]); **/
const afterurl = this.projects[this.projects.length - 1]["handleId"]; async dataLoader(url: string, token: string) {
const regex = /([0-9A-Z]+)$/; // Regular expression to match one or more digits at the end const headers: { [key: string]: string } = {
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 token = await accessToken(this.current);
const headers = {
"Content-Type": "application/json", "Content-Type": "application/json",
Authorization: "Bearer " + token, Authorization: `Bearer ${token}`,
}; };
try { try {
this.isLoading = true;
const resp = await this.axios.get(url, { headers }); const resp = await this.axios.get(url, { headers });
if (resp.status === 200) { if (resp.status === 200) {
const plans = resp.data.data; const plans: ProjectData[] = resp.data.data;
for (let i = 0; i < plans.length; i++) { for (const plan of plans) {
const plan = plans[i]; const { name, description, handleId = plan.fullIri, rowid } = plan;
const data = { this.projects.push({ name, description, handleId, rowid });
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) { } catch (error) {
console.error("Got error loading projects:", error); console.error("Got error loading projects:", error);
} finally {
this.isLoading = false;
} }
} }
/**
* 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(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}`;
const token = await accessToken(this.current);
await this.dataLoader(url, token);
}
} }
/**
* Handle clicking on a project entry found in the list
* @param id of the project
**?
onClickLoadProject(id: string) { onClickLoadProject(id: string) {
localStorage.setItem("projectId", id); localStorage.setItem("projectId", id);
const route = { const route = {
@ -176,39 +197,20 @@ export default class ProjectsView extends Vue {
this.$router.push(route); this.$router.push(route);
} }
/**
* Load projects initially
* @param identity of the user
**/
async LoadProjects(identity: IIdentifier) { async LoadProjects(identity: IIdentifier) {
console.log("LoadProjects"); console.log("LoadProjects");
const url = this.apiServer + "/api/v2/report/plansByIssuer"; const url = `${this.apiServer}/api/v2/report/plansByIssuer`;
const token = await accessToken(identity); const token: string = await accessToken(identity);
const headers = { await this.dataLoader(url, token);
"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);
}
} }
// 'created' hook runs when the Vue instance is first created /**
* 'created' hook runs when the Vue instance is first created
**/
async created() { async created() {
await db.open(); await db.open();
const settings = await db.settings.get(MASTER_SETTINGS_KEY); const settings = await db.settings.get(MASTER_SETTINGS_KEY);
@ -230,6 +232,9 @@ export default class ProjectsView extends Vue {
} }
} }
/**
* Handling clicking on the new project button
**/
onClickNewProject(): void { onClickNewProject(): void {
localStorage.removeItem("projectId"); localStorage.removeItem("projectId");
const route = { const route = {

Loading…
Cancel
Save