trent_larson
/
crowd-funder-for-time-pwa
4
1
Fork 2
Code Pull Requests 6 Releases 5 Wiki Activity
Browse Source

Type fixes

homeview-refresh-2025-02
Jose Olarte III 4 weeks ago
parent
cc1780bd01
commit
aa09827317
2 changed files with 72 additions and 34 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 102
      src/components/ActivityListItem.vue
  2. 4
      src/types/index.ts

102
src/components/ActivityListItem.vue
View File

@ -13,7 +13,10 @@
<div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
<div class="relative flex justify-between gap-4 mb-3">
<!-- Source -->
<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
<a
href=""
class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
>
<div class="relative w-fit mx-auto">
<fa
v-if="!record.giver.profileImageUrl"
@ -26,32 +29,53 @@
:profile-image-url="record.giver.profileImageUrl"
:class="record.giver.known ? 'rounded-full' : 'rounded'"
/>
<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base">
<fa :icon="record.giver.known ? 'user' : 'hammer'" class="fa-fw text-white" />
<span
class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
>
<fa
:icon="record.giver.known ? 'user' : 'hammer'"
class="fa-fw text-white"
/>
</span>
</div>
<div class="text-xs mt-2 line-clamp-2">{{ record.giver.displayName }}</div>
<div class="text-xs mt-2 line-clamp-2">
{{ record.giver.displayName }}
</div>
</a>
<!-- Arrow -->
<div class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center">
<div
class="absolute inset-28 sm:inset-x-48 mx-4 sm:mx-8 top-1/2 flex items-center"
>
<hr class="grow border-t-[25px] border-slate-300" />
<div class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"></div>
<div
class="shrink-0 w-0 h-0 border border-slate-300 border-t-[30px] border-t-transparent border-b-[30px] border-b-transparent border-s-[40px] border-e-0"
></div>
</div>
<!-- Destination -->
<a href="" class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3">
<a
href=""
class="w-28 sm:w-48 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
>
<div class="relative w-fit mx-auto">
<EntityIcon
:icon-size="record.receiver.known ? 64 : 32"
:icon-size="record.receiver.known ? 64 : 32"
:profile-image-url="record.receiver.profileImageUrl"
:class="record.receiver.known ? 'rounded-full' : 'rounded'"
/>
<span class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base">
<fa :icon="record.receiver.known ? 'user' : 'hammer'" class="fa-fw text-white" />
<span
class="absolute -end-3 -bottom-2 bg-slate-400 rounded-full leading-1.25 p-1 sm:px-1.5 -mt-6 border sm:border-2 border-white text-xs sm:text-base"
>
<fa
:icon="record.receiver.known ? 'user' : 'hammer'"
class="fa-fw text-white"
/>
</span>
</div>
<div class="text-xs mt-2 line-clamp-2">{{ record.receiver.displayName }}</div>
<div class="text-xs mt-2 line-clamp-2">
{{ record.receiver.displayName }}
</div>
</a>
</div>
@ -65,8 +89,15 @@
</div>
<!-- Record Image -->
<div v-if="record.image" class="bg-cover" :style="`background-image: url(${record.image});`">
<a class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer" @click="$emit('viewImage', record.image)">
<div
v-if="record.image"
class="bg-cover"
:style="`background-image: url(${record.image});`"
>
<a
class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
@click="$emit('viewImage', record.image)"
>
<img
class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
:src="record.image"
@ -75,11 +106,16 @@
</a>
</div>
<div class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2">
<div
class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
>
<a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
<fa icon="circle-info" class="fa-fw text-slate-500" />
</a>
<span class="ms-auto text-xs text-slate-500 italic" :title="record.timestamp">
<span
class="ms-auto text-xs text-slate-500 italic"
:title="record.timestamp"
>
{{ formattedTimestamp }}
</span>
</div>
@ -87,37 +123,37 @@
</template>
<script lang="ts">
import { Component, Prop, Vue } from 'vue-facing-decorator';
import { GiveRecordWithContactInfo } from '../types';
import EntityIcon from './EntityIcon.vue';
import { Component, Prop, Vue } from "vue-facing-decorator";
import { GiveRecordWithContactInfo } from "../types";
import EntityIcon from "./EntityIcon.vue";
@Component({
components: {
EntityIcon
}
EntityIcon,
},
})
export default class ActivityListItem extends Vue {
@Prop() record!: GiveRecordWithContactInfo;
@Prop() lastViewedClaimId?: string;
private formatAmount(claim: any): string {
const amount = claim.object?.amountOfThisGood
private formatAmount(claim: unknown): string {
const amount = claim.object?.amountOfThisGood
? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
: "";
if (!claim.description && !amount) {
return "something not described";
}
if (!amount) return claim.description;
if (!claim.description) return amount;
return `${claim.description} (and ${amount})`;
}
private formatParticipantInfo(): string {
const { giver, receiver } = this.record;
// Both participants are known contacts
if (giver.known && receiver.known) {
return `${giver.displayName} gave to ${receiver.displayName}`;
@ -125,8 +161,8 @@ export default class ActivityListItem extends Vue {
// Only giver is known
if (giver.known) {
const recipient = this.record.recipientProjectName
? `the project "${this.record.recipientProjectName}"`
const recipient = this.record.recipientProjectName
? `the project "${this.record.recipientProjectName}"`
: receiver.displayName;
return `${giver.displayName} gave to ${recipient}`;
}
@ -144,11 +180,12 @@ export default class ActivityListItem extends Vue {
}
private formatUnknownParticipants(): string {
const { giver, receiver, providerPlanName, recipientProjectName } = this.record;
const { giver, receiver, providerPlanName, recipientProjectName } =
this.record;
if (providerPlanName || recipientProjectName) {
const from = providerPlanName
? `the project "${providerPlanName}"`
const from = providerPlanName
? `the project "${providerPlanName}"`
: giver.displayName;
const to = recipientProjectName
? `the project "${recipientProjectName}"`
@ -162,7 +199,8 @@ export default class ActivityListItem extends Vue {
}
get description(): string {
const claim = (this.record.fullClaim as any).claim || this.record.fullClaim;
const claim =
(this.record.fullClaim as unknown).claim || this.record.fullClaim;
const amount = this.formatAmount(claim);
const participants = this.formatParticipantInfo();
@ -182,4 +220,4 @@ export default class ActivityListItem extends Vue {
return this.record.timestamp;
}
}
</script>
</script>

4
src/types/index.ts
View File

@ -1,6 +1,6 @@
export interface GiveRecordWithContactInfo {
jwtId: string;
fullClaim: any; // Replace with proper type
fullClaim: unknown; // Replace with proper type
giver: {
known: boolean;
displayName: string;
@ -17,4 +17,4 @@ export interface GiveRecordWithContactInfo {
subDescription?: string;
image?: string;
timestamp: string;
}
}

Write Preview
Loading…
Cancel
Save