プロフィールの追加情報を最大16まで保存できるように

Close #8225
Close #8234
This commit is contained in:
syuilo 2022-02-20 16:53:06 +09:00
parent 6994136fb3
commit 92f5027c3c
4 changed files with 44 additions and 89 deletions

View file

@ -16,7 +16,7 @@ You should also include the user name that made the change.
- ートの最大文字数を設定できる機能が廃止され、デフォルトで一律3000文字になりました - ートの最大文字数を設定できる機能が廃止され、デフォルトで一律3000文字になりました
### Improvements ### Improvements
- - プロフィールの追加情報を最大16まで保存できるように
### Bugfixes ### Bugfixes
- Client: リアクションピッカーの高さが低くなったまま戻らないことがあるのを修正 @syuilo - Client: リアクションピッカーの高さが低くなったまま戻らないことがあるのを修正 @syuilo

View file

@ -1290,7 +1290,7 @@ _profile:
youCanIncludeHashtags: "ハッシュタグを含めることができます。" youCanIncludeHashtags: "ハッシュタグを含めることができます。"
metadata: "追加情報" metadata: "追加情報"
metadataEdit: "追加情報を編集" metadataEdit: "追加情報を編集"
metadataDescription: "プロフィールに表として4つまでの追加情報を表示することができます。" metadataDescription: "プロフィールに表として追加情報を表示することができます。"
metadataLabel: "ラベル" metadataLabel: "ラベル"
metadataContent: "内容" metadataContent: "内容"
changeAvatar: "アバター画像を変更" changeAvatar: "アバター画像を変更"

View file

@ -79,7 +79,7 @@ export const paramDef = {
bannerId: { type: 'string', format: 'misskey:id', nullable: true }, bannerId: { type: 'string', format: 'misskey:id', nullable: true },
fields: { type: 'array', fields: { type: 'array',
minItems: 0, minItems: 0,
maxItems: 8, maxItems: 16,
items: { items: {
type: 'object', type: 'object',
properties: { properties: {

View file

@ -32,8 +32,26 @@
<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option> <option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
</FormSelect> </FormSelect>
<FormSlot> <FormSlot class="_formBlock">
<MkButton @click="editMetadata">{{ i18n.ts._profile.metadataEdit }}</MkButton> <FormFolder>
<template #icon><i class="fas fa-table-list"></i></template>
<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
<div class="_formRoot">
<div v-for="record in fields" class="_formBlock">
<FormSplit :min-width="250">
<FormInput v-model="record.name" class="_formBlock">
<template #label>{{ i18n.ts._profile.metadataLabel }}</template>
</FormInput>
<FormInput v-model="record.value" class="_formBlock">
<template #label>{{ i18n.ts._profile.metadataContent }}</template>
</FormInput>
</FormSplit>
</div>
<MkButton :disabled="fields.length >= 16" inline style="margin-right: 8px;" @click="addField">{{ i18n.ts.add }}</MkButton>
<MkButton inline primary @click="saveFields">{{ i18n.ts.save }}</MkButton>
</div>
</FormFolder>
<template #caption>{{ i18n.ts._profile.metadataDescription }}</template> <template #caption>{{ i18n.ts._profile.metadataDescription }}</template>
</FormSlot> </FormSlot>
@ -52,6 +70,8 @@ import FormInput from '@/components/form/input.vue';
import FormTextarea from '@/components/form/textarea.vue'; import FormTextarea from '@/components/form/textarea.vue';
import FormSwitch from '@/components/form/switch.vue'; import FormSwitch from '@/components/form/switch.vue';
import FormSelect from '@/components/form/select.vue'; import FormSelect from '@/components/form/select.vue';
import FormSplit from '@/components/form/split.vue';
import FormFolder from '@/components/form/folder.vue';
import FormSlot from '@/components/form/slot.vue'; import FormSlot from '@/components/form/slot.vue';
import { host, langs } from '@/config'; import { host, langs } from '@/config';
import { selectFile } from '@/scripts/select-file'; import { selectFile } from '@/scripts/select-file';
@ -72,23 +92,31 @@ const profile = reactive({
alwaysMarkNsfw: $i.alwaysMarkNsfw, alwaysMarkNsfw: $i.alwaysMarkNsfw,
}); });
const additionalFields = reactive({
fieldName0: $i.fields[0] ? $i.fields[0].name : null,
fieldValue0: $i.fields[0] ? $i.fields[0].value : null,
fieldName1: $i.fields[1] ? $i.fields[1].name : null,
fieldValue1: $i.fields[1] ? $i.fields[1].value : null,
fieldName2: $i.fields[2] ? $i.fields[2].name : null,
fieldValue2: $i.fields[2] ? $i.fields[2].value : null,
fieldName3: $i.fields[3] ? $i.fields[3].name : null,
fieldValue3: $i.fields[3] ? $i.fields[3].value : null,
});
watch(() => profile, () => { watch(() => profile, () => {
save(); save();
}, { }, {
deep: true, deep: true,
}); });
const fields = reactive($i.fields.map(field => ({ name: field.name, value: field.value })));
function addField() {
fields.push({
name: '',
value: '',
});
}
while (fields.length < 4) {
addField();
}
function saveFields() {
os.apiWithDialog('i/update', {
fields: fields.filter(field => field.name !== '' && field.value !== ''),
});
}
function save() { function save() {
os.apiWithDialog('i/update', { os.apiWithDialog('i/update', {
name: profile.name || null, name: profile.name || null,
@ -123,79 +151,6 @@ function changeBanner(ev) {
}); });
} }
async function editMetadata() {
const { canceled, result } = await os.form(i18n.ts._profile.metadata, {
fieldName0: {
type: 'string',
label: i18n.ts._profile.metadataLabel + ' 1',
default: additionalFields.fieldName0,
},
fieldValue0: {
type: 'string',
label: i18n.ts._profile.metadataContent + ' 1',
default: additionalFields.fieldValue0,
},
fieldName1: {
type: 'string',
label: i18n.ts._profile.metadataLabel + ' 2',
default: additionalFields.fieldName1,
},
fieldValue1: {
type: 'string',
label: i18n.ts._profile.metadataContent + ' 2',
default: additionalFields.fieldValue1,
},
fieldName2: {
type: 'string',
label: i18n.ts._profile.metadataLabel + ' 3',
default: additionalFields.fieldName2,
},
fieldValue2: {
type: 'string',
label: i18n.ts._profile.metadataContent + ' 3',
default: additionalFields.fieldValue2,
},
fieldName3: {
type: 'string',
label: i18n.ts._profile.metadataLabel + ' 4',
default: additionalFields.fieldName3,
},
fieldValue3: {
type: 'string',
label: i18n.ts._profile.metadataContent + ' 4',
default: additionalFields.fieldValue3,
},
});
if (canceled) return;
additionalFields.fieldName0 = result.fieldName0;
additionalFields.fieldValue0 = result.fieldValue0;
additionalFields.fieldName1 = result.fieldName1;
additionalFields.fieldValue1 = result.fieldValue1;
additionalFields.fieldName2 = result.fieldName2;
additionalFields.fieldValue2 = result.fieldValue2;
additionalFields.fieldName3 = result.fieldName3;
additionalFields.fieldValue3 = result.fieldValue3;
const fields = [
{ name: additionalFields.fieldName0, value: additionalFields.fieldValue0 },
{ name: additionalFields.fieldName1, value: additionalFields.fieldValue1 },
{ name: additionalFields.fieldName2, value: additionalFields.fieldValue2 },
{ name: additionalFields.fieldName3, value: additionalFields.fieldValue3 },
];
os.api('i/update', {
fields,
}).then(i => {
os.success();
}).catch(err => {
os.alert({
type: 'error',
text: err.id
});
});
}
defineExpose({ defineExpose({
[symbols.PAGE_INFO]: { [symbols.PAGE_INFO]: {
title: i18n.ts.profile, title: i18n.ts.profile,