Browse Source

show full contact details, plus other tweaks

playwright-pwa-install-test
Trent Larson 4 months ago
parent
commit
cb8aeeac1b
  1. 2
      README.md
  2. 6
      src/views/ClaimView.vue
  3. 11
      src/views/ContactsView.vue
  4. 22
      src/views/DIDView.vue

2
README.md

@ -75,7 +75,7 @@ At the test server:
`npx playwright test` `npx playwright test`
At the locally running server: At the locally running server:
... after clone and setup https://github.com/trentlarson/endorser-ch ... after cloning and setting up https://github.com/trentlarson/endorser-ch and running `test/test.sh`
... and after you `npx playwright install chrome` ... and after you `npx playwright install chrome`
... then run these: ... then run these:
``` ```

6
src/views/ClaimView.vue

@ -299,13 +299,15 @@
<a @click="onClickShareClaim()" class="text-blue-500" <a @click="onClickShareClaim()" class="text-blue-500"
>click to send them this info</a >click to send them this info</a
> >
and see if they are willing to make an introduction. and see if they are willing to make an introduction. They are surely
connected to someone; if you don't know who to ask, you might try the
person who registered you.
</span> </span>
<span v-else> <span v-else>
If you'd like to ask any of your contacts to take a look and see if If you'd like to ask any of your contacts to take a look and see if
their contacts can see more details, their contacts can see more details,
<a <a
@click="copyToClipboard('Location', windowLocation)" @click="copyToClipboard('This page location', windowLocation)"
class="text-blue-500" class="text-blue-500"
>share this page with them</a >share this page with them</a
> >

11
src/views/ContactsView.vue

@ -301,6 +301,7 @@
<script lang="ts"> <script lang="ts">
import { AxiosError } from "axios"; import { AxiosError } from "axios";
import { Buffer } from "buffer/";
import { IndexableType } from "dexie"; import { IndexableType } from "dexie";
import * as R from "ramda"; import * as R from "ramda";
import { Component, Vue } from "vue-facing-decorator"; import { Component, Vue } from "vue-facing-decorator";
@ -327,8 +328,6 @@ import EntityIcon from "@/components/EntityIcon.vue";
import GiftedDialog from "@/components/GiftedDialog.vue"; import GiftedDialog from "@/components/GiftedDialog.vue";
import OfferDialog from "@/components/OfferDialog.vue"; import OfferDialog from "@/components/OfferDialog.vue";
import { Buffer } from "buffer/";
@Component({ @Component({
components: { GiftedDialog, EntityIcon, OfferDialog, QuickNav }, components: { GiftedDialog, EntityIcon, OfferDialog, QuickNav },
}) })
@ -942,13 +941,7 @@ export default class ContactsView extends Vue {
if (resp.status === 200) { if (resp.status === 200) {
const visibility = resp.data; const visibility = resp.data;
contact.seesMe = visibility; contact.seesMe = visibility;
console.log( // console.log("Visibility checked:", visibility, contact.did, contact.name);
"Visibility checked:",
visibility,
contact.did,
contact.name,
); // eslint-disable-line no-console
console.log(this.contacts); // eslint-disable-line no-console
db.contacts.update(contact.did, { seesMe: visibility }); db.contacts.update(contact.did, { seesMe: visibility });
this.$notify( this.$notify(

22
src/views/DIDView.vue

@ -27,9 +27,17 @@
.displayName .displayName
}} }}
</h2> </h2>
<span class="mt-2 text-xl font-semibold break-words"> <button @click="showDidDetails = !showDidDetails" class="ml-2 mr-2">
{{ viewingDid }} Details
</span> <fa v-if="showDidDetails" icon="chevron-up" class="text-blue-400" />
<fa v-else icon="chevron-down" class="text-blue-400" />
</button>
<!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
<pre
v-if="showDidDetails"
class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
>{{ contactYaml }}</pre
>
</div> </div>
<div class="flex justify-center mt-4"> <div class="flex justify-center mt-4">
<span v-if="contact?.profileImageUrl" class="flex justify-between"> <span v-if="contact?.profileImageUrl" class="flex justify-between">
@ -126,6 +134,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue } from "vue-facing-decorator"; import { Component, Vue } from "vue-facing-decorator";
import { Router } from "vue-router"; import { Router } from "vue-router";
import * as yaml from "js-yaml";
import QuickNav from "@/components/QuickNav.vue"; import QuickNav from "@/components/QuickNav.vue";
import InfiniteScroll from "@/components/InfiniteScroll.vue"; import InfiniteScroll from "@/components/InfiniteScroll.vue";
@ -144,6 +153,7 @@ import {
GiveVerifiableCredential, GiveVerifiableCredential,
OfferVerifiableCredential, OfferVerifiableCredential,
} from "@/libs/endorserServer"; } from "@/libs/endorserServer";
import * as libsUtil from "@/libs/util";
import EntityIcon from "@/components/EntityIcon.vue"; import EntityIcon from "@/components/EntityIcon.vue";
@Component({ @Component({
@ -157,14 +167,19 @@ import EntityIcon from "@/components/EntityIcon.vue";
export default class DIDView extends Vue { export default class DIDView extends Vue {
$notify!: (notification: NotificationIface, timeout?: number) => void; $notify!: (notification: NotificationIface, timeout?: number) => void;
libsUtil = libsUtil;
yaml = yaml;
activeDid = ""; activeDid = "";
allMyDids: Array<string> = []; allMyDids: Array<string> = [];
apiServer = ""; apiServer = "";
claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = []; claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
contact?: Contact; contact?: Contact;
contactYaml = "";
hitEnd = false; hitEnd = false;
isLoading = false; isLoading = false;
searchBox: { name: string; bbox: BoundingBox } | null = null; searchBox: { name: string; bbox: BoundingBox } | null = null;
showDidDetails = false;
showLargeIdenticonId?: string; showLargeIdenticonId?: string;
showLargeIdenticonUrl?: string; showLargeIdenticonUrl?: string;
viewingDid?: string; viewingDid?: string;
@ -183,6 +198,7 @@ export default class DIDView extends Vue {
if (pathParam) { if (pathParam) {
this.viewingDid = decodeURIComponent(pathParam); this.viewingDid = decodeURIComponent(pathParam);
this.contact = await db.contacts.get(this.viewingDid); this.contact = await db.contacts.get(this.viewingDid);
this.contactYaml = yaml.dump(this.contact)
await this.loadClaimsAbout(); await this.loadClaimsAbout();
} else { } else {
this.$notify( this.$notify(

Loading…
Cancel
Save