FediMovies/fedimovies-web
1
1
Fork 0
Code Pull requests Activity

Don't display more than 10 metadata fields on profile page

Browse source
This commit is contained in:
silverpill 2022-12-14 16:51:08 +00:00
parent c51d453ea4
commit 0156213889
3 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/api/users.ts
View file

@ -4,6 +4,8 @@ import { BACKEND_URL } from "@/constants"
import { createDidFromEthereumAddress } from "@/utils/did" import { createDidFromEthereumAddress } from "@/utils/did"
import { PAGE_SIZE, http } from "./common" import { PAGE_SIZE, http } from "./common"
export const EXTRA_FIELD_COUNT_MAX = 10
export interface ProfileField { export interface ProfileField {
name: string; name: string;
value: string; value: string;

11
src/views/Profile.vue
View file

@ -143,10 +143,10 @@
<div <div
v-for="field in fields" v-for="field in fields"
class="field" class="field"
:class="{'verified': field.verified_at}" :class="{ verified: field.verified_at }"
:key="field.name" :key="field.name"
> >
<div class="name">{{ field.name }}</div> <div class="name" :title="field.name">{{ field.name }}</div>
<div class="value" v-html="field.value"></div> <div class="value" v-html="field.value"></div>
<div class="verified-icon" v-if="field.verified_at"> <div class="verified-icon" v-if="field.verified_at">
<img <img
@ -259,6 +259,7 @@ import {
Profile, Profile,
ProfileField, ProfileField,
ProfileWrapper, ProfileWrapper,
EXTRA_FIELD_COUNT_MAX,
} from "@/api/users" } from "@/api/users"
import Avatar from "@/components/Avatar.vue" import Avatar from "@/components/Avatar.vue"
import Loader from "@/components/Loader.vue" import Loader from "@/components/Loader.vue"
@ -372,7 +373,9 @@ const fields = $computed<ProfileField[]>(() => {
if (!profile) { if (!profile) {
return [] return []
} }
return profile.identity_proofs.concat(profile.fields) return profile.identity_proofs
.concat(profile.fields)
.slice(0, EXTRA_FIELD_COUNT_MAX)
}) })
function isCurrentUser(): boolean { function isCurrentUser(): boolean {
@ -734,6 +737,8 @@ $avatar-size: 170px;
.name { .name {
font-weight: bold; font-weight: bold;
min-width: 120px; min-width: 120px;
overflow-x: hidden;
text-overflow: ellipsis;
width: 120px; width: 120px;
} }

6
src/views/ProfileForm.vue
View file

@ -42,7 +42,7 @@
<div class="extra-fields input-group"> <div class="extra-fields input-group">
<label> <label>
Additional info Additional info
<div class="sub-label">You can have up to {{ extraFieldMaxCount }} items displayed as a table on your profile</div> <div class="sub-label">You can have up to {{ EXTRA_FIELD_COUNT_MAX }} items displayed as a table on your profile</div>
</label> </label>
<div <div
v-for="(field, index) in form.fields_attributes" v-for="(field, index) in form.fields_attributes"
@ -96,6 +96,7 @@ import {
ProfileFieldAttrs, ProfileFieldAttrs,
ProfileUpdateData, ProfileUpdateData,
updateProfile, updateProfile,
EXTRA_FIELD_COUNT_MAX,
} from "@/api/users" } from "@/api/users"
import ProfileCard from "@/components/ProfileCard.vue" import ProfileCard from "@/components/ProfileCard.vue"
import SidebarLayout from "@/components/SidebarLayout.vue" import SidebarLayout from "@/components/SidebarLayout.vue"
@ -107,7 +108,6 @@ import { fileToDataUrl, dataUrlToBase64 } from "@/utils/upload"
const router = useRouter() const router = useRouter()
const { ensureCurrentUser, setCurrentUser, ensureAuthToken } = $(useCurrentUser()) const { ensureCurrentUser, setCurrentUser, ensureAuthToken } = $(useCurrentUser())
const extraFieldMaxCount = 10
const profile = ensureCurrentUser() const profile = ensureCurrentUser()
let isLoading = $ref(false) let isLoading = $ref(false)
@ -192,7 +192,7 @@ function removeExtraField(index: number) {
} }
function canAddExtraField(): boolean { function canAddExtraField(): boolean {
return form.fields_attributes.length <= extraFieldMaxCount return form.fields_attributes.length <= EXTRA_FIELD_COUNT_MAX
} }
function addExtraField() { function addExtraField() {