Stop pre-rendering bio and fields

This commit is contained in:
silverpill 2022-12-21 13:59:39 +00:00
parent 1a9ae2cb16
commit 2916e541bd
3 changed files with 15 additions and 25 deletions

View file

@ -211,16 +211,14 @@ export async function getProfiles(
return data
}
export interface ProfileFieldAttrs {
interface ProfileFieldAttrs {
name: string;
value: string;
value_source: string;
}
export interface ProfileUpdateData {
display_name: string | null;
note: string | null;
note_source: string | null;
avatar: string | null;
header: string | null;
fields_attributes: ProfileFieldAttrs[];

View file

@ -11,7 +11,7 @@
<div class="actor-address">@{{ getActorAddress(profile) }}</div>
</div>
</div>
<div class="bio" v-html="profile.note"></div>
<div v-if="!compact" class="bio" v-html="profile.note"></div>
<div v-if="!compact" class="bottom-row">
<div class="post-count">
<div class="value">{{ profile.statuses_count }}</div>
@ -62,13 +62,15 @@ $profile-padding: calc($block-inner-padding / 2);
}
.profile-info {
display: flex;
flex-direction: column;
gap: $profile-padding;
padding: $profile-padding;
}
.avatar-row {
display: flex;
flex-direction: row;
margin-bottom: $profile-padding;
.avatar {
height: $avatar-size;
@ -109,7 +111,6 @@ $profile-padding: calc($block-inner-padding / 2);
.bottom-row {
display: flex;
flex-direction: row;
margin-top: $profile-padding;
.post-count {
display: flex;

View file

@ -12,7 +12,7 @@
<textarea
id="bio"
ref="bioInputRef"
:value="form.note_source || ''"
:value="form.note || ''"
@input="onBioUpdate($event)"
></textarea>
</div>
@ -52,8 +52,7 @@
>
<input v-model.trim="field.name" placeholder="Label">
<input
:value="field.value_source"
@input="onExtraFieldUpdate(field, $event)"
v-model.trim="field.value"
placeholder="Content"
>
<a
@ -93,7 +92,6 @@ import { useRouter } from "vue-router"
import {
Profile,
ProfileFieldAttrs,
ProfileUpdateData,
updateProfile,
EXTRA_FIELD_COUNT_MAX,
@ -102,7 +100,6 @@ import ProfileCard from "@/components/ProfileCard.vue"
import SidebarLayout from "@/components/SidebarLayout.vue"
import { useCurrentUser } from "@/store/user"
import { setupAutoResize } from "@/utils/autoresize"
import { renderMarkdownLiteInline } from "@/utils/markdown"
import { fileToDataUrl, dataUrlToBase64 } from "@/utils/upload"
const router = useRouter()
@ -115,9 +112,8 @@ function getFieldsAttributes() {
const fields_attributes = []
for (let index = 0; index < profile.fields.length; index++) {
const field_attributes = {
name: profile.fields[index].name,
value: profile.fields[index].value,
value_source: profile.source.fields[index].value,
name: profile.source.fields[index].name,
value: profile.source.fields[index].value,
}
fields_attributes.push(field_attributes)
}
@ -126,8 +122,7 @@ function getFieldsAttributes() {
const form = $ref<ProfileUpdateData>({
display_name: profile.display_name,
note: profile.note,
note_source: profile.source.note,
note: profile.source.note,
fields_attributes: getFieldsAttributes(),
avatar: null,
header: null,
@ -149,15 +144,16 @@ const profilePreview = $computed<Profile>(() => {
return {
...profile,
display_name: form.display_name,
note: form.note,
avatar: images.avatar,
header: images.header,
}
})
function onBioUpdate(event: Event) {
form.note_source = (event.target as HTMLTextAreaElement).value
form.note = renderMarkdownLiteInline(form.note_source)
const value = (event.target as HTMLTextAreaElement).value
if (value) {
form.note = value
}
}
async function onFilePicked(fieldName: "avatar" | "header", event: Event) {
@ -170,11 +166,6 @@ async function onFilePicked(fieldName: "avatar" | "header", event: Event) {
form[fieldName] = dataUrlToBase64(imageDataUrl)
}
function onExtraFieldUpdate(field: ProfileFieldAttrs, event: Event) {
field.value_source = (event.target as HTMLInputElement).value
field.value = renderMarkdownLiteInline(field.value_source)
}
function isValidExtraField(index: number): boolean {
const field = form.fields_attributes[index]
for (let prevIndex = 0; prevIndex < index; prevIndex++) {
@ -196,7 +187,7 @@ function canAddExtraField(): boolean {
}
function addExtraField() {
form.fields_attributes.push({ name: "", value: "", value_source: "" })
form.fields_attributes.push({ name: "", value: "" })
}
function isFormValid(): boolean {