Browse Source

New modules and InfiniteScroll init

pull/25/head
Matthew Raymer 1 year ago
parent
commit
0726a8d3ba
  1. 5570
      package-lock.json
  2. 64
      package.json
  3. 29
      src/components/InfiniteScroll.vue
  4. 5
      src/views/NewEditProjectView.vue
  5. 90
      src/views/ProjectsView.vue

5570
package-lock.json

File diff suppressed because it is too large

64
package.json

@ -12,54 +12,54 @@
"@fortawesome/fontawesome-svg-core": "^6.4.0", "@fortawesome/fontawesome-svg-core": "^6.4.0",
"@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0",
"@fortawesome/vue-fontawesome": "^3.0.3", "@fortawesome/vue-fontawesome": "^3.0.3",
"@pvermeer/dexie-encrypted-addon": "^2.0.5", "@pvermeer/dexie-encrypted-addon": "^3.0.0",
"@tweenjs/tween.js": "^20.0.3", "@tweenjs/tween.js": "^21.0.0",
"@veramo/core": "^5.1.2", "@veramo/core": "^5.2.0",
"@veramo/credential-w3c": "^5.1.4", "@veramo/credential-w3c": "^5.2.0",
"@veramo/data-store": "^5.1.2", "@veramo/data-store": "^5.2.0",
"@veramo/did-manager": "^5.1.2", "@veramo/did-manager": "^5.1.2",
"@veramo/did-provider-ethr": "^5.1.2", "@veramo/did-provider-ethr": "^5.1.2",
"@veramo/did-resolver": "^5.1.2", "@veramo/did-resolver": "^5.2.0",
"@veramo/key-manager": "^5.1.2", "@veramo/key-manager": "^5.1.2",
"@vueuse/core": "^9.13.0", "@vueuse/core": "^10.2.0",
"@zxing/text-encoding": "^0.9.0", "@zxing/text-encoding": "^0.9.0",
"axios": "^1.3.4", "axios": "^1.4.0",
"buffer": "^6.0.3", "buffer": "^6.0.3",
"class-transformer": "^0.5.1", "class-transformer": "^0.5.1",
"core-js": "^3.29.1", "core-js": "^3.31.0",
"dexie": "^3.2.3", "dexie": "^3.2.4",
"dexie-export-import": "^4.0.7", "dexie-export-import": "^4.0.7",
"did-jwt": "^6.11.5", "did-jwt": "^7.2.2",
"ethereum-cryptography": "^1.2.0", "ethereum-cryptography": "^2.0.0",
"ethereumjs-util": "^7.1.5", "ethereumjs-util": "^7.1.5",
"ethr-did-resolver": "^8.0.0", "ethr-did-resolver": "^8.0.0",
"js-generate-password": "^0.1.7", "js-generate-password": "^0.1.9",
"localstorage-slim": "^2.4.0", "localstorage-slim": "^2.4.0",
"luxon": "^3.3.0", "luxon": "^3.3.0",
"merkletreejs": "^0.3.9", "merkletreejs": "^0.3.10",
"moment": "^2.29.4", "moment": "^2.29.4",
"papaparse": "^5.4.1", "papaparse": "^5.4.1",
"pina": "^0.20.2204228", "pina": "^0.20.2204228",
"pinia-plugin-persistedstate": "^3.1.0", "pinia-plugin-persistedstate": "^3.1.0",
"qr-code-generator-vue3": "^1.4.21", "qr-code-generator-vue3": "^1.4.21",
"ramda": "^0.28.0", "ramda": "^0.29.0",
"readable-stream": "^4.3.0", "readable-stream": "^4.4.0",
"reflect-metadata": "^0.1.13", "reflect-metadata": "^0.1.13",
"register-service-worker": "^1.7.2", "register-service-worker": "^1.7.2",
"three": "^0.152.2", "three": "^0.153.0",
"vue": "^3.2.47", "vue": "^3.3.4",
"vue-axios": "^3.5.2", "vue-axios": "^3.5.2",
"vue-class-component": "^8.0.0-0", "vue-class-component": "^8.0.0-0",
"vue-facing-decorator": "^2.1.19", "vue-facing-decorator": "^2.1.20",
"vue-property-decorator": "^9.1.2", "vue-property-decorator": "^9.1.2",
"vue-router": "^4.1.6", "vue-router": "^4.2.2",
"web-did-resolver": "^2.0.22" "web-did-resolver": "^2.0.24"
}, },
"devDependencies": { "devDependencies": {
"@types/ramda": "^0.28.23", "@types/ramda": "^0.29.2",
"@types/three": "^0.152.0", "@types/three": "^0.152.1",
"@typescript-eslint/eslint-plugin": "^5.57.0", "@typescript-eslint/eslint-plugin": "^5.60.0",
"@typescript-eslint/parser": "^5.57.0", "@typescript-eslint/parser": "^5.60.0",
"@vue/cli-plugin-babel": "~5.0.8", "@vue/cli-plugin-babel": "~5.0.8",
"@vue/cli-plugin-eslint": "~5.0.8", "@vue/cli-plugin-eslint": "~5.0.8",
"@vue/cli-plugin-pwa": "~5.0.8", "@vue/cli-plugin-pwa": "~5.0.8",
@ -67,15 +67,15 @@
"@vue/cli-plugin-typescript": "~5.0.8", "@vue/cli-plugin-typescript": "~5.0.8",
"@vue/cli-plugin-vuex": "~5.0.8", "@vue/cli-plugin-vuex": "~5.0.8",
"@vue/cli-service": "~5.0.8", "@vue/cli-service": "~5.0.8",
"@vue/eslint-config-typescript": "^11.0.2", "@vue/eslint-config-typescript": "^11.0.3",
"autoprefixer": "^10.4.14", "autoprefixer": "^10.4.14",
"eslint": "^8.37.0", "eslint": "^8.43.0",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-vue": "^9.10.0", "eslint-plugin-vue": "^9.15.0",
"postcss": "^8.4.21", "postcss": "^8.4.24",
"prettier": "^2.8.7", "prettier": "^2.8.8",
"tailwindcss": "^3.3.1", "tailwindcss": "^3.3.2",
"typescript": "~5.0.3" "typescript": "~5.1.3"
} }
} }

29
src/components/InfiniteScroll.vue

@ -13,24 +13,37 @@ export default class InfiniteScroll extends Vue {
@Prop({ default: 100 }) @Prop({ default: 100 })
readonly distance!: number; readonly distance!: number;
private observer!: IntersectionObserver; private observer!: IntersectionObserver;
private isInitialized = false;
mounted() { mounted() {
const options = { this.$nextTick(() => {
root: this.$refs.scrollContainer as HTMLElement, this.isInitialized = true;
rootMargin: `0px 0px ${this.distance}px 0px`, console.log("onMounted");
threshold: 1.0, const options = {
}; root: this.$refs.scrollContainer as HTMLElement,
this.observer = new IntersectionObserver(this.handleIntersection, options); rootMargin: `0px 0px ${this.distance}px 0px`,
this.observer.observe(this.$refs.sentinel as HTMLElement); threshold: 1.0,
};
this.observer = new IntersectionObserver(
(entries) => this.handleIntersection(entries),
options
);
this.observer.observe(this.$refs.sentinel as HTMLElement);
});
} }
beforeUnmount() { beforeUnmount() {
this.observer.disconnect(); this.observer.disconnect();
} }
@Emit("reached-bottom") @Emit("reached-bottom")
handleIntersection(entries: IntersectionObserverEntry[]) { handleIntersection(entries: IntersectionObserverEntry[]) {
console.log("handleIntersection");
if (!this.isInitialized) {
return false;
}
const entry = entries[0]; const entry = entries[0];
if (entry.isIntersecting) { if (entry.isIntersecting && entry.intersectionRatio > 0) {
return true; return true;
} }
return false; return false;

5
src/views/NewEditProjectView.vue

@ -226,9 +226,10 @@ export default class NewEditProjectView extends Vue {
const serverError = error as AxiosError; const serverError = error as AxiosError;
if (serverError) { if (serverError) {
this.isAlertVisible = true; this.isAlertVisible = true;
if (serverError.message) { if (Object.prototype.hasOwnProperty.call(serverError, "message")) {
console.log(serverError);
this.alertTitle = "User Message"; this.alertTitle = "User Message";
userMessage = serverError.message; // This is info for the user. userMessage = serverError.response.data.error.message; // This is info for the user.
this.alertMessage = userMessage; this.alertMessage = userMessage;
} else { } else {
this.alertTitle = "Server Message"; this.alertTitle = "Server Message";

90
src/views/ProjectsView.vue

@ -71,51 +71,89 @@
</button> </button>
<!-- Results List --> <!-- Results List -->
<ul class=""> <InfiniteScroll @reached-bottom="loadMoreData">
<li <ul>
class="border-b border-slate-300" <li
v-for="project in projects" class="border-b border-slate-300"
:key="project.handleId" v-for="project in projects"
> :key="project.handleId"
<a
@click="onClickLoadProject(project.handleId)"
class="block py-4 flex gap-4"
> >
<div class="flex-none w-12"> <a
<img @click="onClickLoadProject(project.handleId)"
src="https://picsum.photos/200/200?random=1" class="block py-4 flex gap-4"
class="w-full rounded" >
/> <div class="flex-none w-12">
</div> <img
src="https://picsum.photos/200/200?random=1"
class="w-full rounded"
/>
</div>
<div class="grow overflow-hidden"> <div class="grow overflow-hidden">
<h2 class="text-base font-semibold">{{ project.name }}</h2> <h2 class="text-base font-semibold">{{ project.name }}</h2>
<div class="text-sm truncate"> <div class="text-sm truncate">
{{ project.description }} {{ project.description }}
</div>
</div> </div>
</div> </a>
</a> </li>
</li> </ul>
</ul> </InfiniteScroll>
</section> </section>
</template> </template>
<script lang="ts"> <script lang="ts">
import * as R from "ramda"; import * as R from "ramda";
import { Options, Vue } from "vue-class-component"; import { Component, Vue } from "vue-facing-decorator";
import { accountsDB, db } from "@/db"; import { accountsDB, db } from "@/db";
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings"; import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
import { accessToken } from "@/libs/crypto"; import { accessToken } from "@/libs/crypto";
import { IIdentifier } from "@veramo/core"; import { IIdentifier } from "@veramo/core";
import InfiniteScroll from "@/components/InfiniteScroll";
@Options({ @Component({
components: {}, components: { InfiniteScroll },
}) })
export default class ProjectsView extends Vue { export default class ProjectsView extends Vue {
apiServer = ""; apiServer = "";
projects: { handleId: string; name: string; description: string }[] = []; projects: { handleId: string; name: string; description: string }[] = [];
async loadMoreData(payload: boolean) {
console.log("loadMoreData");
console.log(payload);
if (this.projects.length > 0) {
const afterId = this.projects[this.projects.length - 1]["handleId"];
const url =
this.apiServer + "/api/v2/report/plansByIssuer?afterId=" + afterId;
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);
}
}
} catch (error) {
console.error("Got error loading projects: ", error);
}
}
}
onClickLoadProject(id: string) { onClickLoadProject(id: string) {
localStorage.setItem("projectId", id); localStorage.setItem("projectId", id);
const route = { const route = {

Loading…
Cancel
Save