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

Close #8225
Close #8234

CHANGELOG.md

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

locales/ja-JP.yml

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

packages/backend/src/server/api/endpoints/i/update.ts

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

packages/client/src/pages/settings/profile.vue

@@ -32,8 +32,26 @@
 		<option v-for="x in langs" :key="x[0]" :value="x[0]">{{ x[1] }}</option>
 	</FormSelect>
 
-	<FormSlot>
-		<MkButton @click="editMetadata">{{ i18n.ts._profile.metadataEdit }}</MkButton>
+	<FormSlot class="_formBlock">
+		<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>
 	</FormSlot>
 
@@ -52,6 +70,8 @@ import FormInput from '@/components/form/input.vue';
 import FormTextarea from '@/components/form/textarea.vue';
 import FormSwitch from '@/components/form/switch.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 { host, langs } from '@/config';
 import { selectFile } from '@/scripts/select-file';
@@ -72,23 +92,31 @@ const profile = reactive({
 	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, () => {
 	save();
 }, {
 	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() {
 	os.apiWithDialog('i/update', {
 		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({
 	[symbols.PAGE_INFO]: {
 		title: i18n.ts.profile,