コメントコンポーネントは、リモート要求オプションを設定するためのインターフェースを提供します。データソース機能を有効にすると、変更されたデータをリモートデータベースと同期することが可能になります。
データソース機能の設定
dataSourceの定義でenabledプロパティをtrueに設定し、remoteプロパティを使用してリクエスト処理を実装します。remoteプロパティでコメント、ユーザー、リアクションに関する処理を設定することで、データの取得や更新、削除などの操作を実行できるようになります。
設定例は以下の通りです。
コメントの操作に伴う要求と応答
コメントの表示、追加、更新、削除を行う場合、コメントに対する操作を伴うリクエストが開始され、サーバーに送信されます。
操作
要求の種類
要求データ
応答データ
読み込み
GET
なし
コメントレコードの配列
追加
POST
追加されたコメント（userId, content, parentId?, mentionInfo?）
追加されたデータ
更新
POST
更新されたコメント（userId, content, parentId?, mentionInfo?）
更新されたデータ
削除
DELETE
削除されたコメントのID
制限なし
ユーザー情報の要求と応答
メンション機能を使用する場合、ユーザーIDまたはユーザー名を検索し、以下の操作を行います。
操作
要求の種類
要求データ
応答データ
読み込み
GET
ユーザーID
一致したユーザー情報
読み込み
GET
ユーザー名
一致したユーザー情報の配列
リアクション情報の要求と応答
コメントに対してリアクションの表示、追加、削除を行う場合、各操作を伴うリクエストが開始され、サーバーに送信されます。
操作
要求の種類
要求データ
応答データ
読み込み
GET
コメントIDとユーザーID
リアクションの配列
追加
POST
リアクションが追加されたコメント（userId, commentId, reactChar）
操作の成功または失敗
削除
DELETE
リアクションが削除されたコメント（userId, commentId, reactChar）
操作の成功または失敗
import "./styles.css";
import "@mescius/inputman.comment/CSS/gc.inputman.comment.css";
import "@mescius/inputman.richtexteditor/CSS/gc.inputman.richtexteditor.css";
import { InputMan } from "@mescius/inputman.comment";
import * as RichTextEditorControl from "@mescius/inputman.richtexteditor";
const baseURL = window.location.origin + '/inputmanjs/demos/server/api/DataSource';
const gcComment = new InputMan.GcComment(document.getElementById('gcComment'), {
userInfo: {
id: '1',
name: '森上 偉久馬',
avatar: '$IMDEMOROOT$/ja/samples/comment/datasource/img/avatar1.png',
},
header: [
[
{
name: InputMan.GcCommentHeaderFooterItem.Search,
align: 'right',
},
{
name: InputMan.GcCommentHeaderFooterItem.Sort,
align: 'left',
},
],
[
InputMan.GcCommentHeaderFooterItem.CommentCount,
InputMan.GcCommentHeaderFooterItem.ReactionCount
],
],
editorConfig: {
editorType: InputMan.GcCommentEditorType.GcRichTextEditor,
baseUrl: '$IMDEMOROOT$/lib/purejs/node_modules/@mescius/inputman.richtexteditor/JS',
plugins: [RichTextEditorControl.InputMan.GcRichTextEditorPluginItem.All],
height: 150,
menubar: [],
toolbar: [
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Emoticons,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.BlockQuote,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.SeparateLine,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.FontFamily,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.FontSize,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.SeparateLine,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Bold,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Italic,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Strikethrough,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Underline,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.SeparateLine,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Paste,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.PasteText,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.SeparateLine,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.HTMLCode,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.CharMap,
RichTextEditorControl.InputMan.GcRichTextEditorToolbarItem.Link,
]
},
dataSource: {
enabled: true,
remote: {
comments: {
read: {
url: `${baseURL}/comments`,
},
create: {
url: `${baseURL}/comments`,
},
update: {
url: `${baseURL}/comments`,
},
delete: {
url: `${baseURL}/comments`,
}
},
users: {
read: {
url: `${baseURL}/users`,
schema: {
dataSchema: {
name: 'username'
}
}
}
},
reactions: {
read: {
url: `${baseURL}/reactions`,
},
create: {
url: `${baseURL}/reactions`,
},
delete: {
url: `${baseURL}/reactions`,
}
}
}
},
loadReactionCount: async () => {
const response = await fetch(`${baseURL}/reactions/count`);
if (response.ok) {
const res = await response.json();
return res.totalReactions;
} else {
return 0;
}
},
loadCommentCount: async () => {
const response = await fetch(`${baseURL}/comments/count`);
if (response.ok) {
return (await response.json()).totalComments;
} else {
return 0;
}
},
loadUsersInfoHandler: async (context) => {
let users = [];
const response = await fetch(`${baseURL}/users`);
if (response.ok) {
users = await response.json();
if (context.loadType === InputMan.LoadUserType.FilterText) {
return users.filter((u) => u.name.includes(context.value));
} else if (context.loadType === InputMan.LoadUserType.ById) {
return users.filter((u) => u.id === context.value);
}
} else {
console.error('ユーザー情報の読み込みが失敗しました:', response.statusText);
}
}
});
gcComment.addEventListener(GCIM.GcCommentEvent.AfterExecuteCommand, (args) => {
if (args.command === InputMan.GcCommentCommand.PostComment || args.command === InputMan.GcCommentCommand.UpdateComment) {
const mentionInfo = args.value.mentionInfo;
if (Array.isArray(mentionInfo) && mentionInfo.length > 0) {
const nameList = mentionInfo.map(i => i.userName);
alert(`We have already send email to ${nameList.join(",")} to check this comment`);
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="description" content="コメントコンポーネント 使い方" lang="ja" xml:lang="ja" />
<title>コメントコンポーネント - データソース</title>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
window.onload = function () {
System.import('./src/app');
}
</script>
</head>
<body>
<div id="gcComment"></div>
</body>
</html>
body {
box-sizing: content-box !important;
height: 551px !important;
}
System.config({
transpiler: 'plugin-babel',
babelOptions: {
es2015: true
},
meta: {
'*.css': { loader: 'css' }
},
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
'@mescius/inputman': 'npm:@mescius/inputman/index.js',
'@mescius/inputman/CSS': 'npm:@mescius/inputman/CSS',
'@mescius/inputman.richtexteditor': 'npm:@mescius/inputman.richtexteditor/index.js',
'@mescius/inputman.richtexteditor/CSS': 'npm:@mescius/inputman.richtexteditor/CSS',
'@mescius/inputman.comment': 'npm:@mescius/inputman.comment/index.js',
'@mescius/inputman.comment/CSS': 'npm:@mescius/inputman.comment/CSS',
'css': 'npm:systemjs-plugin-css/css.js',
'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel/systemjs-babel-browser.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
src: {
defaultExtension: 'js'
},
"node_modules": {
defaultExtension: 'js'
},
}
});
