Skip to content

feat(spotlight): show users with identity & skelton while loading #616

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Aug 23, 2021
Merged

feat(spotlight): show users with identity & skelton while loading #616

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f85a098
WIP: feat(spotlight): show only users with names
roiLeo Aug 17, 2021
17c9977
WIP: feat(spotlight): show users with identity
roiLeo Aug 20, 2021
9a56a4f
feat(spotlight): toggle to show users with identity
roiLeo Aug 20, 2021
9b8e3a5
feat(spotlight): typo
roiLeo Aug 20, 2021
95db147
feat(spotlight): variable name
roiLeo Aug 20, 2021
4db5fb7
feat(spotlight): indent
roiLeo Aug 20, 2021
fa433e0
feat(spotlight): linting
roiLeo Aug 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 48 additions & 10 deletions src/components/spotlight/SpotlightTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,13 @@
<template>
<div>
<b-field>
<div class="control is-flex">
<b-switch v-model="toggleUsersWithIdentity" :rounded="false">Show Only Accounts With Identity</b-switch>
</div>
</b-field>
<b-table
:data="data"
:data="toggleUsersWithIdentity ? usersWithIdentity : data"
hoverable
:loading="isLoading"
detailed
paginated
show-detail-icon
Expand All @@ -14,9 +18,10 @@
:label="$t('spotlight.id')"
v-slot="props"
>
<router-link :to="{ name: 'profile', params: { id: props.row.id } }">
<router-link :to="{ name: 'profile', params: { id: props.row.id } }" v-if="!isLoading">
<Identity :address="props.row.id" inline noOverflow />
</router-link>
<b-skeleton :active="isLoading"> </b-skeleton>
</b-table-column>

<b-table-column
Expand All @@ -25,7 +30,8 @@
v-slot="props"
sortable
>
{{ props.row.sold }}
<template v-if="!isLoading">{{ props.row.sold }}</template>
<b-skeleton :active="isLoading"> </b-skeleton>
</b-table-column>

<b-table-column
Expand All @@ -34,7 +40,8 @@
v-slot="props"
sortable
>
{{ props.row.unique }}
<template v-if="!isLoading">{{ props.row.unique }}</template>
<b-skeleton :active="isLoading"> </b-skeleton>
</b-table-column>

<b-table-column
Expand All @@ -43,7 +50,8 @@
v-slot="props"
sortable
>
{{ props.row.total }}
<template v-if="!isLoading">{{ props.row.total }}</template>
<b-skeleton :active="isLoading"> </b-skeleton>
</b-table-column>

<b-table-column
Expand All @@ -52,7 +60,8 @@
v-slot="props"
sortable
>
{{ Math.ceil(props.row.averagePrice * 100) / 100 }}
<template v-if="!isLoading">{{ Math.ceil(props.row.averagePrice * 100) / 100 }}</template>
<b-skeleton :active="isLoading"> </b-skeleton>
</b-table-column>

<b-table-column
Expand All @@ -61,7 +70,8 @@
v-slot="props"
sortable
>
{{ props.row.count }}
<template v-if="!isLoading">{{ props.row.count }}</template>
<b-skeleton :active="isLoading"> </b-skeleton>
</b-table-column>

<b-table-column
Expand All @@ -70,7 +80,8 @@
v-slot="props"
sortable
>
{{ Math.ceil(props.row.rank * 100) / 100 }}
<template v-if="!isLoading">{{ Math.ceil(props.row.rank * 100) / 100 }}</template>
<b-skeleton :active="isLoading"> </b-skeleton>
</b-table-column>

<template #detail="props">
Expand All @@ -79,7 +90,8 @@
</template>

<template #empty>
<div class="has-text-centered">{{ $t("spotlight.empty") }}</div>
<div v-if="!isLoading" class="has-text-centered">{{ $t("spotlight.empty") }}</div>
<b-skeleton :active="isLoading"> </b-skeleton>
</template>
</b-table>
</div>
Expand All @@ -93,6 +105,10 @@ import collectionIssuerList from '@/queries/collectionIssuerList.graphql';
import { spotlightAggQuery } from '../rmrk/Gallery/Search/query';
import TransactionMixin from '@/utils/mixins/txMixin';
import { denyList } from '@/constants';
import { GenericAccountId } from '@polkadot/types/generic/AccountId';
import { get } from 'idb-keyval';
import { identityStore } from '@/utils/idbStore';
type Address = string | GenericAccountId | undefined;

const components = {
Identity: () => import('@/components/shared/format/Identity.vue'),
Expand All @@ -104,6 +120,8 @@ export default class SpotlightTable extends Mixins(TransactionMixin) {
@Prop() public value!: any;
protected data: Row[] = [];
protected columns: Column[] = columns;
protected usersWithIdentity: Row[] = [];
protected toggleUsersWithIdentity: boolean = false;

async created() {
this.isLoading = true;
Expand All @@ -121,8 +139,28 @@ export default class SpotlightTable extends Mixins(TransactionMixin) {
this.data = spotlightAggQuery(
collectionEntities?.nodes?.map(nftFn)
) as Row[];

for (let index = 0; index < this.data.length; index++) {
const result = await this.identityOf(this.data[index].id);
if (result && Object.keys(result).length) {
this.usersWithIdentity[index] = this.data[index];
}
}

this.isLoading = false;
}

public async identityOf(account: Address) {
const address: string = this.resolveAddress(account);
const identity = await get(address, identityStore);
return identity;
}

private resolveAddress(account: Address): string {
return account instanceof GenericAccountId
? account.toString()
: account || '';
}
}
</script>
<style>
Expand Down