first commit.

src/database/item-type/binder/BinderAdvancedSearch.tsx

@@ -0,0 +1,25 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class BinderAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "binder";
+    this.title = "Binder";
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default BinderAdvancedSearch;

src/database/item-type/binder/BinderDetail.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import ItemType from "..";
+import { BrainAtlasType, MultiLang } from "../../../config";
+import Functions from "../../../functions";
+import ItemUtil, { Item, ItemBinder } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+
+interface Props {
+  lang: MultiLang;
+  item: ItemBinder;
+  type: BrainAtlasType;
+}
+
+interface State {
+  items: Item[];
+}
+
+class BinderLinkItems extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      items: [],
+    };
+  }
+
+  componentDidMount() {
+    this.updateItems();
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    const prevItemIds = prevProps.item.item_link;
+    const nextItemIds = this.props.item.item_link;
+    if (prevItemIds.toString() !== nextItemIds.toString()) {
+      this.updateItems();
+    }
+  }
+
+  updateItems() {
+    const { item, type } = this.props;
+    const itemIds = item.item_link;
+    ItemUtil.getList(type, itemIds, (results) => {
+      const items = results.data;
+      this.setState({ items });
+    });
+  }
+
+  render() {
+    const { lang, type } = this.props;
+    return (
+      <table className="listTable">
+        <tbody>
+          {this.state.items.map((item, idx) => {
+            const evenodd = idx % 2 ? "even" : "odd";
+            return (
+              <tr key={item.item_id}>
+                <td className={evenodd}>
+                  <ItemType.List lang={lang} item={item} type={type} />
+                </td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+class BinderDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemBinder;
+    return [
+      { label: "ID", value: item.doi },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+    ];
+  }
+
+  render() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemBinder;
+    const detail = super.render.call(this);
+    return (
+      <>
+        {detail}
+        <h4>Registered Items</h4>
+        <BinderLinkItems lang={lang} item={item} type={type} />
+      </>
+    );
+  }
+}
+
+export default BinderDetail;

src/database/item-type/binder/BinderList.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_binder.gif";
+import { ItemBinder } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+
+class BinderList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Binder";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemBinder;
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {Functions.mlang(item.description, lang)}
+      </>
+    );
+  }
+}
+
+export default BinderList;

src/database/item-type/binder/BinderTop.tsx

@@ -0,0 +1,14 @@
+import iconFile from "../../assets/images/icon_binder.gif";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class BinderTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "binder";
+    this.label = "Binder";
+    this.icon = iconFile;
+    this.description = "[en]Binder collection.[/en][ja]バインダー[/ja]";
+  }
+}
+
+export default BinderTop;

src/database/item-type/binder/index.tsx

@@ -0,0 +1,13 @@
+import BinderAdvancedSearch from "./BinderAdvancedSearch";
+import BinderDetail from "./BinderDetail";
+import BinderList from "./BinderList";
+import BinderTop from "./BinderTop";
+
+const ItemTypeBinder = {
+  Top: BinderTop,
+  List: BinderList,
+  Detail: BinderDetail,
+  AdvancedSearch: BinderAdvancedSearch,
+};
+
+export default ItemTypeBinder;

src/database/item-type/book/BookAdvancedSearch.tsx

@@ -0,0 +1,37 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class BookAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "book";
+    this.title = "Book";
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+    this.state.values["author"] = "";
+    this.state.values["editor"] = "";
+    this.state.values["publisher"] = "";
+    this.state.values["publication_year"] = "";
+    this.state.values["isbn"] = "";
+    this.state.values["file.book_pdf.original_file_name"] = "";
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Book Title[/en][ja]著書名[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+      { label: "[en]Author[/en][ja]著者[/ja]", value: this.renderFieldInputText("author", 50) },
+      { label: "[en]Editor[/en][ja]編集者[/ja]", value: this.renderFieldInputText("editor", 50) },
+      { label: "[en]Publisher[/en][ja]出版社[/ja]", value: this.renderFieldInputText("publisher", 50) },
+      { label: "[en]Publication Year[/en][ja]出版年[/ja]", value: this.renderFieldInputText("publication_year", 10) },
+      { label: "ISBN", value: this.renderFieldInputText("isbn", 50) },
+      { label: "[en]PDF File[/en][ja]PDF ファイル[/ja]", value: this.renderFieldInputText("file.book_pdf.original_file_name", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default BookAdvancedSearch;

src/database/item-type/book/BookDetail.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import Functions from "../../../functions";
+import { ItemBook } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+
+class BookDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemBook;
+    return [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Book Title[/en][ja]著書名[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Author[/en][ja]著者[/ja]", value: <ItemTypeField.Author lang={lang} author={item.author} /> },
+      { label: "[en]Editor[/en][ja]編集者[/ja]", value: Functions.mlang(item.editor, lang) },
+      { label: "[en]Publisher[/en][ja]出版社[/ja]", value: Functions.mlang(item.publisher, lang) },
+      { label: "[en]Publication Year[/en][ja]出版年[/ja]", value: item.publication_year },
+      {
+        label: "URL",
+        value: (
+          <a href={item.url} target="_blank" rel="noopener noreferrer">
+            {item.url}
+          </a>
+        ),
+      },
+      { label: "[en]PDF File[/en][ja]PDF ファイル[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="book_pdf" downloadLimit={item.attachment_dl_limit} type={type} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+  }
+}
+
+export default BookDetail;

src/database/item-type/book/BookList.tsx

@@ -0,0 +1,36 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_book.gif";
+import { ItemBook } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+
+class BookList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Book";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemBook;
+    const authors = item.author.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ", "}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default BookList;

src/database/item-type/book/BookTop.tsx

@@ -0,0 +1,14 @@
+import iconFile from "../../assets/images/icon_book.gif";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class BookTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "book";
+    this.label = "Book";
+    this.icon = iconFile;
+    this.description = "[en]Related book collection.[/en][ja]関連書籍[/ja]";
+  }
+}
+
+export default BookTop;

src/database/item-type/book/index.tsx

@@ -0,0 +1,13 @@
+import BookAdvancedSearch from "./BookAdvancedSearch";
+import BookDetail from "./BookDetail";
+import BookList from "./BookList";
+import BookTop from "./BookTop";
+
+const ItemTypeBook = {
+  Top: BookTop,
+  List: BookList,
+  Detail: BookDetail,
+  AdvancedSearch: BookAdvancedSearch,
+};
+
+export default ItemTypeBook;

src/database/item-type/conference/ConferenceAdvancedSearch.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { ItemConferenceSubTypes } from "../../lib/ItemUtil";
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class ConferenceAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "conference";
+    this.title = "Conference";
+    const now = new Date();
+    const year = String(now.getFullYear());
+    const month = String(now.getMonth() + 1);
+    const mday = String(now.getDate());
+    this.state.values["title"] = "";
+    this.state.values["presentation_type"] = "";
+    this.state.values["author"] = "";
+    this.state.values["conference_from_year"] = year;
+    this.state.values["conference_from_month"] = month;
+    this.state.values["conference_from_mday"] = mday;
+    this.state.values["conference_to_year"] = year;
+    this.state.values["conference_to_month"] = month;
+    this.state.values["conference_to_mday"] = mday;
+    this.setIgnoreKey("conference_from_year");
+    this.setIgnoreKey("conference_from_month");
+    this.setIgnoreKey("conference_from_mday");
+    this.setIgnoreKey("conference_to_year");
+    this.setIgnoreKey("conference_to_month");
+    this.setIgnoreKey("conference_to_mday");
+  }
+
+  renderDate() {
+    return (
+      <>
+        <div>{this.renderFieldDate("From", "conference_from_year", "conference_from_month", "conference_from_mday")}</div>
+        <div>{this.renderFieldDate("To", "conference_to_year", "conference_to_month", "conference_to_mday")}</div>
+      </>
+    );
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Presentation Title[/en][ja]発表議題[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]", value: this.renderFieldSelect("presentation_type", ItemConferenceSubTypes) },
+      { label: "[en]Author[/en][ja]発表者[/ja]", value: this.renderFieldInputText("author", 50) },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: this.renderDate() },
+    ];
+    return rows;
+  }
+}
+
+export default ConferenceAdvancedSearch;

src/database/item-type/conference/ConferenceDetail.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import Functions from "../../../functions";
+import { ItemConference } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+import ConferenceUtil from "./ConferenceUtil";
+
+class ConferenceDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemConference;
+    return [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Conference Title[/en][ja]学会名[/ja]", value: Functions.mlang(item.conference_title, lang) },
+      { label: "[en]Place[/en][ja]開催地[/ja]", value: item.place },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: <ConferenceUtil.ConferenceDate lang={lang} item={item} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Presentation Title[/en][ja]発表議題[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Author[/en][ja]発表者[/ja]", value: <ItemTypeField.Author lang={lang} author={item.author} /> },
+      { label: "[en]Abstract[/en][ja]要約[/ja]", value: <ItemTypeField.Description lang={lang} description={item.abstract} /> },
+      { label: "[en]Presentation File[/en][ja]発表資料[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="conference_file" type={type} /> },
+      { label: "[en]Presentation Type[/en][ja]発表資料ファイル形式[/ja]", value: <ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} /> },
+      { label: "[en]Conference Paper[/en][ja]学会資料[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="conference_paper" type={type} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+  }
+}
+
+export default ConferenceDetail;

src/database/item-type/conference/ConferenceList.tsx

@@ -0,0 +1,38 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_conference.gif";
+import { ItemConference } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+import ConferenceUtil from "./ConferenceUtil";
+
+class ConferenceList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Conference";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemConference;
+    const authors = item.author.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ", "}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {Functions.mlang(item.conference_title, lang)} (<ConferenceUtil.PresentationType lang={lang} type={item.presentation_type} />)<br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default ConferenceList;

src/database/item-type/conference/ConferenceTop.tsx

@@ -0,0 +1,16 @@
+import iconFile from "../../assets/images/icon_conference.gif";
+import { ItemConferenceSubTypes } from "../../lib/ItemUtil";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class ConferenceTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "conference";
+    this.label = "Conference";
+    this.icon = iconFile;
+    this.description = "[en]Electrical presentation files for conference.[/en][ja]学会発表[/ja]";
+    this.subTypes = ItemConferenceSubTypes;
+  }
+}
+
+export default ConferenceTop;

src/database/item-type/conference/ConferenceUtil.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import { MultiLang } from "../../../config";
+import { ItemConference, ItemConferenceSubType, ItemConferenceSubTypes } from "../../lib/ItemUtil";
+
+interface PresentationTypeProps {
+  lang: MultiLang;
+  type: ItemConferenceSubType;
+}
+
+const PresentationType: React.FC<PresentationTypeProps> = (props: PresentationTypeProps) => {
+  const { type } = props;
+  const subtype = ItemConferenceSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === "undefined") {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+interface ConferenceDateProps {
+  lang: MultiLang;
+  item: ItemConference;
+}
+
+const ConferenceDate: React.FC<ConferenceDateProps> = (props: ConferenceDateProps) => {
+  const { item } = props;
+  const monthStr = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+  const from = "From: " + monthStr[item.conference_from_month - 1] + " " + item.conference_from_mday + ", " + item.conference_from_year;
+  const to = "To: " + monthStr[item.conference_to_month - 1] + " " + item.conference_to_mday + ", " + item.conference_to_year;
+  return (
+    <span>
+      {from} {to}
+    </span>
+  );
+};
+
+const ConferenceUtil = {
+  PresentationType,
+  ConferenceDate,
+};
+
+export default ConferenceUtil;

src/database/item-type/conference/index.tsx

@@ -0,0 +1,13 @@
+import ConferenceAdvancedSearch from "./ConferenceAdvancedSearch";
+import ConferenceDetail from "./ConferenceDetail";
+import ConferenceList from "./ConferenceList";
+import ConferenceTop from "./ConferenceTop";
+
+const ItemTypeConference = {
+  Top: ConferenceTop,
+  List: ConferenceList,
+  Detail: ConferenceDetail,
+  AdvancedSearch: ConferenceAdvancedSearch,
+};
+
+export default ItemTypeConference;

src/database/item-type/data/DataAdvancedSearch.tsx

@@ -0,0 +1,45 @@
+import { ItemDataSubTypes } from "../../lib/ItemUtil";
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class DataAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "data";
+    this.title = "Data";
+    const now = new Date();
+    const year = String(now.getFullYear());
+    const month = String(now.getMonth() + 1);
+    const mday = String(now.getDate());
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+    this.state.values["data_type"] = "";
+    this.state.values["experimenter"] = "";
+    this.state.values["publication_year"] = year;
+    this.state.values["publication_month"] = month;
+    this.state.values["publication_mday"] = mday;
+    this.state.values["file.preview.caption"] = "";
+    this.state.values["file.data_file.original_file_name"] = "";
+    this.setIgnoreKey("publication_year");
+    this.setIgnoreKey("publication_month");
+    this.setIgnoreKey("publication_mday");
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+      { label: "[en]Data Type[/en][ja]データタイプ[/ja]", value: this.renderFieldSelect("data_type", ItemDataSubTypes) },
+      { label: "[en]Experimenter[/en][ja]実験者[/ja]", value: this.renderFieldInputText("experimenter", 50) },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: this.renderFieldDate("", "publication_year", "publication_month", "publication_mday") },
+      { label: "[en]Caption[/en][ja]キャプション[/ja]", value: this.renderFieldInputText("file.preview.caption", 50) },
+      { label: "[en]Data File[/en][ja]データファイル[/ja]", value: this.renderFieldInputText("file.data_file.original_file_name", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default DataAdvancedSearch;

src/database/item-type/data/DataDetail.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Functions from "../../../functions";
+import ItemUtil, { ItemData } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+import SimPFLinkIcon from "../lib/field/SimPFLinkIcon";
+import DataUtil from "./DataUtil";
+
+class DataDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemData;
+    const fields = [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: <ItemTypeField.PublicationDate lang={lang} year={item.publication_year} month={item.publication_month} mday={item.publication_mday} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Data Type[/en][ja]データタイプ[/ja]", value: <DataUtil.DataType lang={lang} type={item.data_type} /> },
+      { label: "[en]Experimenter[/en][ja]実験者[/ja]", value: <ItemTypeField.Author lang={lang} author={item.experimenter} /> },
+      { label: "[en]Preview[/en][ja]プレビュー[/ja]", value: <ItemTypeField.Preview lang={lang} file={item.file} type={type} /> },
+      { label: "[en]Data File[/en][ja]データファイル[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="data_file" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} downloadLimit={item.attachment_dl_limit} type={type} /> },
+      { label: "Readme", value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
+      { label: "Rights", value: <ItemTypeField.Rights lang={lang} rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+    const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
+    if (simpfLinkUrl !== "") {
+      const field = { label: "Online Simulation", value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} /> };
+      fields.splice(14, 0, field);
+    }
+    return fields;
+  }
+}
+
+export default DataDetail;

src/database/item-type/data/DataList.tsx

@@ -0,0 +1,36 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_data.gif";
+import { ItemData } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+
+class DataList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Data";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemData;
+    const authors = item.experimenter.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ", "}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default DataList;

src/database/item-type/data/DataTop.tsx

@@ -0,0 +1,16 @@
+import iconFile from "../../assets/images/icon_data.gif";
+import { ItemDataSubTypes } from "../../lib/ItemUtil";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class DataTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "data";
+    this.label = "Data";
+    this.icon = iconFile;
+    this.description = "[en]Result data in numerical text/image/movie formats.[/en][ja]実験結果の数値データ/画像/動画など[/ja]";
+    this.subTypes = ItemDataSubTypes;
+  }
+}
+
+export default DataTop;

src/database/item-type/data/DataUtil.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { MultiLang } from "../../../config";
+import { ItemDataSubType, ItemDataSubTypes } from "../../lib/ItemUtil";
+
+interface DataTypeProps {
+  lang: MultiLang;
+  type: ItemDataSubType;
+}
+
+const DataType: React.FC<DataTypeProps> = (props: DataTypeProps) => {
+  const { type } = props;
+  const subtype = ItemDataSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === "undefined") {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+const DataUtil = {
+  DataType,
+};
+
+export default DataUtil;

src/database/item-type/data/index.tsx

@@ -0,0 +1,13 @@
+import DataAdvancedSearch from "./DataAdvancedSearch";
+import DataDetail from "./DataDetail";
+import DataList from "./DataList";
+import DataTop from "./DataTop";
+
+const ItemTypeData = {
+  Top: DataTop,
+  List: DataList,
+  Detail: DataDetail,
+  AdvancedSearch: DataAdvancedSearch,
+};
+
+export default ItemTypeData;

src/database/item-type/files/FilesAdvancedSearch.tsx

@@ -0,0 +1,29 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class FilesAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "files";
+    this.title = "Files";
+    this.state.values["title"] = "";
+    this.state.values["data_file_name"] = "";
+    this.state.values["data_file_mimetype"] = "";
+    this.state.values["data_file_filetype"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "- [en]File Name[/en][ja]ファイル名[/ja]", value: this.renderFieldInputText("data_file_name", 50) },
+      { label: "- [en]MIME Type[/en][ja]MIMEタイプ[/ja]", value: this.renderFieldInputText("data_file_mimetype", 50) },
+      { label: "- [en]File Type[/en][ja]ファイルタイプ[/ja]", value: this.renderFieldInputText("data_file_filetype", 20) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default FilesAdvancedSearch;

src/database/item-type/files/FilesDetail.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import Functions from "../../../functions";
+import { ItemFiles } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+
+class FilesDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemFiles;
+    return [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Data File[/en][ja]データファイル[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="files_file" type={type} /> },
+      { label: "- [en]File Name[/en][ja]ファイル名[/ja]", value: item.data_file_name },
+      { label: "- [en]MIME Type[/en][ja]MIMEタイプ[/ja]", value: item.data_file_mimetype },
+      { label: "- [en]File Type[/en][ja]ファイルタイプ[/ja]", value: item.data_file_filetype },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+  }
+}
+
+export default FilesDetail;

src/database/item-type/files/FilesList.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_files.gif";
+import { ItemFiles } from "../../lib/ItemUtil";
+import Contributer from "../lib/field/Contributer";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+
+class FilesList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Files";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemFiles;
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        <Contributer lang={lang} uname={item.uname} name={item.name} />
+        <br />
+        {item.data_file_mimetype}
+      </>
+    );
+  }
+}
+
+export default FilesList;

src/database/item-type/files/FilesTop.tsx

@@ -0,0 +1,16 @@
+import iconFile from "../../assets/images/icon_files.gif";
+import { ItemFilesSubTypes } from "../../lib/ItemUtil";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class FilesTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "files";
+    this.label = "Files";
+    this.icon = iconFile;
+    this.description = "[en]Various type of File.[/en][ja]ファイル[/ja]";
+    this.subTypes = ItemFilesSubTypes;
+  }
+}
+
+export default FilesTop;

src/database/item-type/files/FilesUtil.tsx

@@ -0,0 +1,3 @@
+const FilesUtil = {};
+
+export default FilesUtil;

src/database/item-type/files/index.tsx

@@ -0,0 +1,13 @@
+import FilesAdvancedSearch from "./FilesAdvancedSearch";
+import FilesDetail from "./FilesDetail";
+import FilesList from "./FilesList";
+import FilesTop from "./FilesTop";
+
+const ItemTypeFiles = {
+  Top: FilesTop,
+  List: FilesList,
+  Detail: FilesDetail,
+  AdvancedSearch: FilesAdvancedSearch,
+};
+
+export default ItemTypeFiles;

src/database/item-type/index.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { MultiLang, BrainAtlasType } from '../../config';
+import AdvancedSearchQuery from '../lib/AdvancedSearchQuery';
+import { Item, ItemBinder, ItemBook, ItemConference, ItemData, ItemFiles, ItemModel, ItemPaper, ItemPresentation, ItemSimulator, ItemStimulus, ItemTool, ItemUrl, ItemMemo } from '../lib/ItemUtil';
+import ItemTypeBinder from './binder';
+import ItemTypeBook from './book';
+import ItemTypeConference from './conference';
+import ItemTypeData from './data';
+import ItemTypeFiles from './files';
+import ItemTypeMemo from './memo';
+import ItemTypeModel from './model';
+import ItemTypePaper from './paper';
+import ItemTypePresentation from './presentation';
+import ItemTypeSimulator from './simulator';
+import ItemTypeStimulus from './stimulus';
+import ItemTypeTool from './tool';
+import ItemTypeUrl from './url';
+
+interface TopProps {
+    lang: MultiLang;
+    itemType: string;
+    type: BrainAtlasType;
+}
+const Top = (props: TopProps) => {
+    const { lang, itemType, type } = props;
+    switch (itemType) {
+        case 'xnpbinder':
+            return <ItemTypeBinder.Top lang={lang} type={type} />;
+        case 'xnpbook':
+            return <ItemTypeBook.Top lang={lang} type={type} />;
+        case 'xnpconference':
+            return <ItemTypeConference.Top lang={lang} type={type} />;
+        case 'xnpdata':
+            return <ItemTypeData.Top lang={lang} type={type} />;
+        case 'xnpfiles':
+            return <ItemTypeFiles.Top lang={lang} type={type} />;
+        case 'xnpmemo':
+            return <ItemTypeMemo.Top lang={lang} type={type} />;
+        case 'xnpmodel':
+            return <ItemTypeModel.Top lang={lang} type={type} />;
+        case 'xnppaper':
+            return <ItemTypePaper.Top lang={lang} type={type} />;
+        case 'xnppresentation':
+            return <ItemTypePresentation.Top lang={lang} type={type} />;
+        case 'xnpsimulator':
+            return <ItemTypeSimulator.Top lang={lang} type={type} />;
+        case 'xnpstimulus':
+            return <ItemTypeStimulus.Top lang={lang} type={type} />;
+        case 'xnptool':
+            return <ItemTypeTool.Top lang={lang} type={type} />;
+        case 'xnpurl':
+            return <ItemTypeUrl.Top lang={lang} type={type} />;
+        default:
+            return null;
+    }
+}
+
+interface ListProps {
+    lang: MultiLang;
+    item: Item;
+    type: BrainAtlasType;
+}
+const List = (props: ListProps) => {
+    const { lang, item, type } = props;
+    switch (item.item_type_name) {
+        case 'xnpbinder':
+            return <ItemTypeBinder.List lang={lang} item={item as ItemBinder} type={type} />;
+        case 'xnpbook':
+            return <ItemTypeBook.List lang={lang} item={item as ItemBook} type={type} />;
+        case 'xnpconference':
+            return <ItemTypeConference.List lang={lang} item={item as ItemConference} type={type} />;
+        case 'xnpdata':
+            return <ItemTypeData.List lang={lang} item={item as ItemData} type={type} />;
+        case 'xnpfiles':
+            return <ItemTypeFiles.List lang={lang} item={item as ItemFiles} type={type} />;
+        case 'xnpmemo':
+            return <ItemTypeMemo.List lang={lang} item={item as ItemMemo} type={type} />;
+        case 'xnpmodel':
+            return <ItemTypeModel.List lang={lang} item={item as ItemModel} type={type} />;
+        case 'xnppaper':
+            return <ItemTypePaper.List lang={lang} item={item as ItemPaper} type={type} />;
+        case 'xnppresentation':
+            return <ItemTypePresentation.List lang={lang} item={item as ItemPresentation} type={type} />;
+        case 'xnpsimulator':
+            return <ItemTypeSimulator.List lang={lang} item={item as ItemSimulator} type={type} />;
+        case 'xnpstimulus':
+            return <ItemTypeStimulus.List lang={lang} item={item as ItemStimulus} type={type} />;
+        case 'xnptool':
+            return <ItemTypeTool.List lang={lang} item={item as ItemTool} type={type} />;
+        case 'xnpurl':
+            return <ItemTypeUrl.List lang={lang} item={item as ItemUrl} type={type} />;
+        default:
+            return null;
+    }
+}
+
+interface DetailProps {
+    lang: MultiLang;
+    item: Item;
+    type: BrainAtlasType;
+}
+const Detail = (props: DetailProps) => {
+    const { lang, item, type } = props;
+    switch (item.item_type_name) {
+        case 'xnpbinder':
+            return <ItemTypeBinder.Detail lang={lang} item={item as ItemBinder} type={type} />;
+        case 'xnpbook':
+            return <ItemTypeBook.Detail lang={lang} item={item as ItemBook} type={type} />;
+        case 'xnpconference':
+            return <ItemTypeConference.Detail lang={lang} item={item as ItemConference} type={type} />;
+        case 'xnpdata':
+            return <ItemTypeData.Detail lang={lang} item={item as ItemData} type={type} />;
+        case 'xnpfiles':
+            return <ItemTypeFiles.Detail lang={lang} item={item as ItemFiles} type={type} />;
+        case 'xnpmemo':
+            return <ItemTypeMemo.Detail lang={lang} item={item as ItemMemo} type={type} />;
+        case 'xnpmodel':
+            return <ItemTypeModel.Detail lang={lang} item={item as ItemModel} type={type} />;
+        case 'xnppaper':
+            return <ItemTypePaper.Detail lang={lang} item={item as ItemPaper} type={type} />;
+        case 'xnppresentation':
+            return <ItemTypePresentation.Detail lang={lang} item={item as ItemPresentation} type={type} />;
+        case 'xnpsimulator':
+            return <ItemTypeSimulator.Detail lang={lang} item={item as ItemSimulator} type={type} />;
+        case 'xnpstimulus':
+            return <ItemTypeStimulus.Detail lang={lang} item={item as ItemStimulus} type={type} />;
+        case 'xnptool':
+            return <ItemTypeTool.Detail lang={lang} item={item as ItemTool} type={type} />;
+        case 'xnpurl':
+            return <ItemTypeUrl.Detail lang={lang} item={item as ItemUrl} type={type} />;
+        default:
+            return null;
+    }
+}
+
+interface AdvancedSearchProps {
+    lang: MultiLang;
+    type: string;
+    query: AdvancedSearchQuery;
+}
+const AdvancedSearch = (props: AdvancedSearchProps) => {
+    const { lang, type, query } = props;
+    switch (type) {
+        case 'xnpbinder':
+            return <ItemTypeBinder.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpbook':
+            return <ItemTypeBook.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpconference':
+            return <ItemTypeConference.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpdata':
+            return <ItemTypeData.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpfiles':
+            return <ItemTypeFiles.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpmemo':
+            return <ItemTypeMemo.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpmodel':
+            return <ItemTypeModel.AdvancedSearch lang={lang} query={query} />;
+        case 'xnppaper':
+            return <ItemTypePaper.AdvancedSearch lang={lang} query={query} />;
+        case 'xnppresentation':
+            return <ItemTypePresentation.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpsimulator':
+            return <ItemTypeSimulator.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpstimulus':
+            return <ItemTypeStimulus.AdvancedSearch lang={lang} query={query} />;
+        case 'xnptool':
+            return <ItemTypeTool.AdvancedSearch lang={lang} query={query} />;
+        case 'xnpurl':
+            return <ItemTypeUrl.AdvancedSearch lang={lang} query={query} />;
+        default:
+            return null;
+    }
+}
+
+const ItemType = {
+    Top,
+    List,
+    Detail,
+    AdvancedSearch
+}
+
+export default ItemType;

src/database/item-type/lib/AdvancedSearchBase.tsx

@@ -0,0 +1,195 @@
+import React, { ChangeEvent } from "react";
+import { MultiLang } from "../../../config";
+import Functions from "../../../functions";
+import AdvancedSearchQuery from "../../lib/AdvancedSearchQuery";
+import { ItemSubTypes } from "../../lib/ItemUtil";
+
+export interface AdvancedSearchBaseProps {
+  lang: MultiLang;
+  query: AdvancedSearchQuery;
+}
+
+interface State {
+  show: boolean;
+  values: any;
+}
+
+class AdvancedSearchBase extends React.Component<AdvancedSearchBaseProps, State> {
+  protected type: string = "base";
+  protected title: string = "Base";
+  protected query: AdvancedSearchQuery;
+  protected ignoreKeys: string[] = [];
+
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.state = {
+      show: false,
+      values: {},
+    };
+    this.query = props.query;
+    this.handleChangeTitleCheck = this.handleChangeTitleCheck.bind(this);
+  }
+
+  updateQuery(key: string, value: string) {
+    if (this.ignoreKeys.includes(key)) {
+      this.query.delete(this.type, key);
+    } else {
+      this.query.set(this.type, key, value);
+    }
+  }
+
+  setIgnoreKey(key: string) {
+    if (!this.ignoreKeys.includes(key)) {
+      this.ignoreKeys = this.ignoreKeys.concat(key);
+    }
+    this.query.delete(this.type, key);
+  }
+
+  deleteIgnoreKey(key: string) {
+    if (this.ignoreKeys.includes(key)) {
+      this.ignoreKeys = this.ignoreKeys.filter((v) => {
+        return v !== key;
+      });
+    }
+    this.query.set(this.type, key, this.state.values[key]);
+  }
+
+  updateField(key: string, value: string) {
+    let values = Object.assign({}, this.state.values);
+    values[key] = value;
+    this.updateQuery(key, value);
+    this.setState({ values });
+  }
+
+  handleChangeTitleCheck(e: ChangeEvent<HTMLInputElement>) {
+    const show = e.target.checked;
+    if (show) {
+      Object.keys(this.state.values).forEach((key) => {
+        const value = this.state.values[key];
+        this.updateQuery(key, value);
+      });
+    } else {
+      this.query.deleteType(this.type);
+    }
+    this.setState({ show });
+  }
+
+  getRows(): { label: string; value: JSX.Element }[] {
+    return [];
+  }
+
+  renderFieldInputText(key: string, size: number) {
+    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+      this.updateField(key, e.target.value);
+    };
+    return <input className="fieldInputText" type="text" value={this.state.values[key]} size={size} onChange={onChange} />;
+  }
+
+  renderFieldSelect(key: string, values: ItemSubTypes<any>) {
+    const onChange = (e: ChangeEvent<HTMLSelectElement>) => {
+      this.updateField(key, e.target.value);
+    };
+    const options = values.map(({ type, label }, i) => {
+      return (
+        <option key={i} value={type}>
+          {label}
+        </option>
+      );
+    });
+    return (
+      <select className="fieldSelect" value={this.state.values[key]} onChange={onChange}>
+        <option value="">Any</option>
+        {options}
+      </select>
+    );
+  }
+
+  renderFieldDate(label: string, keyYear: string, keyMonth: string, keyMday: string) {
+    const onChange = (e: ChangeEvent<HTMLInputElement>) => {
+      if (e.target.checked) {
+        this.deleteIgnoreKey(keyYear);
+        keyMonth !== "" && this.deleteIgnoreKey(keyMonth);
+        keyMday !== "" && this.deleteIgnoreKey(keyMday);
+      } else {
+        this.setIgnoreKey(keyYear);
+        keyMonth !== "" && this.setIgnoreKey(keyMonth);
+        keyMday !== "" && this.setIgnoreKey(keyMday);
+      }
+    };
+    const month = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+    const monthOptions = month.map((value, i) => {
+      return (
+        <option key={i} value={i + 1}>
+          {value}
+        </option>
+      );
+    });
+    let mdayOptions: JSX.Element[] = [];
+    for (let i = 1; i <= 31; i++) {
+      mdayOptions.push(
+        <option key={i} value={i}>
+          {i}
+        </option>
+      );
+    }
+    return (
+      <div className="fieldDate">
+        <input type="checkbox" onChange={onChange} />
+        {label.length !== 0 && <label className="fieldDateLabel">{label}</label>}
+        {keyMonth !== "" && (
+          <select value={this.state.values[keyMonth]} onChange={(e) => this.updateField(keyMonth, e.target.value)}>
+            {monthOptions}
+          </select>
+        )}
+        {keyMday !== "" && (
+          <select value={this.state.values[keyMday]} onChange={(e) => this.updateField(keyMday, e.target.value)}>
+            {mdayOptions}
+          </select>
+        )}
+        <input type="text" value={this.state.values[keyYear]} size={5} onChange={(e) => this.updateField(keyYear, e.target.value)} />
+      </div>
+    );
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    if (this.state.show === false) {
+      return null;
+    }
+    const rows = this.getRows();
+    const fields = rows.map((value, idx) => {
+      const evenodd = idx % 2 === 0 ? "even" : "odd";
+      return (
+        <tr key={idx}>
+          <td className="head">{Functions.mlang(value.label, lang)}</td>
+          <td className={evenodd}>{value.value}</td>
+        </tr>
+      );
+    });
+    return (
+      <table className="itemtypeFields outer">
+        <tbody>{fields}</tbody>
+      </table>
+    );
+  }
+
+  render() {
+    return (
+      <div className="itemtype">
+        <table className="itemtypeName outer">
+          <tbody>
+            <tr>
+              <th align="left">
+                <input type="checkbox" checked={this.state.show} onChange={this.handleChangeTitleCheck} />
+                {this.title}
+              </th>
+            </tr>
+          </tbody>
+        </table>
+        {this.renderBody()}
+      </div>
+    );
+  }
+}
+
+export default AdvancedSearchBase;

src/database/item-type/lib/DetailBase.tsx

@@ -0,0 +1,41 @@
+import React, { ReactNode } from "react";
+import { BrainAtlasType, MultiLang } from "../../../config";
+import Functions from "../../../functions";
+import { Item } from "../../lib/ItemUtil";
+
+export interface DetailBaseField {
+  label: string;
+  value: ReactNode;
+}
+
+export interface DetailBaseProps {
+  lang: MultiLang;
+  item: Item;
+  type: BrainAtlasType;
+}
+
+class DetailBase extends React.Component<DetailBaseProps> {
+  getFields(): DetailBaseField[] {
+    return [];
+  }
+
+  render() {
+    const { lang } = this.props;
+    const elements = this.getFields().map((value, idx) => {
+      const evenodd = idx % 2 === 0 ? "even" : "odd";
+      return (
+        <tr key={idx}>
+          <td className="head">{Functions.mlang(value.label, lang)}</td>
+          <td className={evenodd}>{value.value}</td>
+        </tr>
+      );
+    });
+    return (
+      <table className="outer itemDetail">
+        <tbody>{elements}</tbody>
+      </table>
+    );
+  }
+}
+
+export default DetailBase;

src/database/item-type/lib/ListBase.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { BrainAtlasType, MultiLang } from "../../../config";
+import ItemUtil, { Item } from "../../lib/ItemUtil";
+import SimPFLinkIcon from "./field/SimPFLinkIcon";
+
+export interface ListBaseProps {
+  lang: MultiLang;
+  item: Item;
+  type: BrainAtlasType;
+}
+
+class ListBase extends React.Component<ListBaseProps> {
+  protected label = "";
+  protected icon = "";
+  protected url: string;
+  protected simpfLinkUrl: string;
+
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.url = ItemUtil.getUrl(props.type, props.item);
+    this.simpfLinkUrl = ItemUtil.getSimPFLinkUrl(props.item.item_id);
+  }
+
+  renderBody() {
+    return <></>;
+  }
+
+  render() {
+    const { lang } = this.props;
+    return (
+      <table>
+        <tbody>
+          <tr>
+            <td className="listIcon">
+              <img src={this.icon} alt={this.label} />
+            </td>
+            <td>{this.renderBody()}</td>
+            <td className="listExtra">
+              <SimPFLinkIcon lang={lang} url={this.simpfLinkUrl} isDetail={false} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default ListBase;

src/database/item-type/lib/TopBase.tsx

@@ -0,0 +1,53 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import { BrainAtlasType, MultiLang } from "../../../config";
+import Functions from "../../../functions";
+import ItemUtil, { ItemSubTypes } from "../../lib/ItemUtil";
+
+export interface TopBaseProps {
+  lang: MultiLang;
+  type: BrainAtlasType;
+}
+
+class TopBase extends React.Component<TopBaseProps> {
+  protected type: string = "";
+  protected label: string = "";
+  protected icon: string = "";
+  protected description: string = "";
+  protected subTypes: ItemSubTypes<any> = [];
+
+  render() {
+    const { lang, type } = this.props;
+    const url = ItemUtil.getItemTypeSearchUrl(type, this.type, "");
+    const links = this.subTypes.map((subtype, i) => {
+      const url = ItemUtil.getItemTypeSearchUrl(type, this.type, subtype.type);
+      return (
+        <Fragment key={i}>
+          {i > 0 && " / "}
+          <Link to={url}>{subtype.label}</Link>
+        </Fragment>
+      );
+    });
+    return (
+      <div>
+        <table>
+          <tbody>
+            <tr>
+              <td>
+                <img src={this.icon} alt={this.label} />
+              </td>
+              <td className="itemTypeName">
+                <Link to={url}>{this.label}</Link>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+        <hr />
+        <div>{Functions.mlang(this.description, lang)}</div>
+        {links}
+      </div>
+    );
+  }
+}
+
+export default TopBase;

src/database/item-type/lib/field/Author.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+
+interface Props {
+  lang: MultiLang;
+  author: string[];
+}
+
+const Author: React.FC<Props> = (props: Props) => {
+  const { author } = props;
+  if (author.length === 0) {
+    return null;
+  }
+  const elements = author.map((value, idx) => {
+    const evenodd = idx % 2 === 0 ? "even" : "odd";
+    return (
+      <tr key={idx}>
+        <td className={evenodd}>{value}</td>
+      </tr>
+    );
+  });
+  return (
+    <table>
+      <tbody>{elements}</tbody>
+    </table>
+  );
+};
+
+export default Author;

src/database/item-type/lib/field/ChangeLog.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+import Functions from "../../../../functions";
+import { ItemBasicChangeLog } from "../../../lib/ItemUtil";
+import DateTime from "./DateTime";
+
+interface Props {
+  lang: MultiLang;
+  changelog: ItemBasicChangeLog[];
+}
+
+const ChangeLog: React.FC<Props> = (props: Props) => {
+  const { lang, changelog } = props;
+  if (changelog.length === 0) {
+    return null;
+  }
+  const elements = changelog.map((value, i) => {
+    return (
+      <tr key={i}>
+        <td>
+          <DateTime lang={lang} date={value.log_date} onlyDate={true} />
+        </td>
+        <td>{Functions.mlang(value.log, lang)}</td>
+      </tr>
+    );
+  });
+  return (
+    <table>
+      <tbody>{elements}</tbody>
+    </table>
+  );
+};
+
+export default ChangeLog;

src/database/item-type/lib/field/Contributer.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+import Functions from "../../../../functions";
+
+interface Props {
+  lang: MultiLang;
+  uname: string;
+  name: string;
+}
+
+const Contributer: React.FC<Props> = (props: Props) => {
+  const { lang, name, uname } = props;
+  const unsubscribed = "([en]Unsubscribed User[/en][ja]退会済みユーザ[/ja])";
+  const label = uname === "" ? unsubscribed : name === "" ? uname : name + " (" + uname + ")";
+  return <span>{Functions.mlang(label, lang)}</span>;
+};
+
+export default Contributer;

src/database/item-type/lib/field/CreativeCommons.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+
+export type CreativeCommonsType = "by" | "by-nc" | "by-nc-nd" | "by-nc-sa" | "by-nd" | "by-sa";
+
+export const getCreativeCommonsType = (ccCommercialUse: number, ccModification: number): CreativeCommonsType => {
+  const cc = ccCommercialUse * 10 + ccModification;
+  switch (cc) {
+    case 0:
+      return "by-nc-nd";
+    case 1:
+      return "by-nc-sa";
+    case 2:
+      return "by-nc";
+    case 10:
+      return "by-nd";
+    case 11:
+      return "by-sa";
+    case 12:
+    default:
+      return "by";
+  }
+};
+
+interface Props {
+  lang: MultiLang;
+  type: CreativeCommonsType;
+}
+
+const CreativeCommons: React.FC<Props> = (props: Props) => {
+  const { type } = props;
+  const url = "http://creativecommons.org/licenses/" + type + "/4.0/";
+  const logoUrl = "https://i.creativecommons.org/l/" + type + "/4.0/88x31.png";
+  const labels = {
+    by: "Attribution",
+    nc: "NonCommercial",
+    nd: "NoDerivatives",
+    sa: "ShareAlike",
+  };
+  const label = type
+    .split("-")
+    .map((value) => {
+      const prop = value as "by" | "nc" | "nd" | "sa";
+      return labels[prop];
+    })
+    .join("-");
+  return (
+    <table style={{ borderCollapse: "separate", borderSpacing: "5px" }}>
+      <tbody>
+        <tr>
+          <td>
+            <a href={url} target="_blank" rel="license noopener noreferrer">
+              <img alt="Creative Commons License" src={logoUrl} />
+            </a>
+          </td>
+          <td>
+            This work is licensed under a{" "}
+            <a href={url} target="_blank" rel="license noopener noreferrer">
+              Criative Commons {label} 4.0 International License
+            </a>
+            .
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default CreativeCommons;

src/database/item-type/lib/field/DateTime.tsx

@@ -0,0 +1,21 @@
+import moment from "moment";
+import React from "react";
+import { MultiLang } from "../../../../config";
+
+interface Props {
+  lang: MultiLang;
+  date: number;
+  onlyDate?: boolean;
+}
+
+const DateTime: React.FC<Props> = (props: Props) => {
+  const { date, onlyDate } = props;
+  const d = moment(new Date(date * 1000));
+  let format = "MMM D, Y";
+  if (typeof onlyDate === "undefined" || !onlyDate) {
+    format += " HH:mm:ss";
+  }
+  return <span>{d.format(format)}</span>;
+};
+
+export default DateTime;

src/database/item-type/lib/field/Description.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import XoopsCode from "../../../../common/lib/XoopsCode";
+import { MultiLang } from "../../../../config";
+
+interface Props {
+  lang: MultiLang;
+  description: string;
+  className?: string;
+}
+
+const Description: React.FC<Props> = (props: Props) => {
+  const { lang, description, className } = props;
+  const textarea = <XoopsCode lang={lang} text={description} dobr={true} />;
+  const name = typeof className === "undefined" ? "description" : className;
+  return <div className={name}>{textarea}</div>;
+};
+
+export default Description;

src/database/item-type/lib/field/FileDownloadButton.module.css

@@ -0,0 +1,21 @@
+.downloadButton {
+  display: inline-block;
+  padding: 7px 20px;
+  text-decoration: none !important;
+  font-weight: normal !important;
+  background: #f0f0f0;
+  color: #000 !important;
+  border: solid 1px #e0e0e0;
+  box-shadow: 2px 2px #bbbbbb;
+  border-radius: 5px;
+}
+
+.downloadButton:hover {
+  background: #e8e8e8 !important;
+  border: solid 1px #cccccc;
+}
+
+.downloadButton:active {
+  transform: translate(2px, 2px);
+  box-shadow: none;
+}

src/database/item-type/lib/field/FileDownloadButton.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { BrainAtlasType, MultiLang } from "../../../../config";
+import ItemUtil, { ItemBasicFile } from "../../../lib/ItemUtil";
+import styles from "./FileDownloadButton.module.css";
+import LicenseAgreementDialog from "./LicenseAgreementDialog";
+
+interface Props {
+  lang: MultiLang;
+  file: ItemBasicFile;
+  rights: string;
+  useCc: number;
+  ccCommercialUse: number;
+  ccModification: number;
+  type: BrainAtlasType;
+}
+
+interface State {
+  show: boolean;
+}
+
+class FileDownloadButton extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      show: false,
+    };
+    this.handleClickDownload = this.handleClickDownload.bind(this);
+    this.unsetShow = this.unsetShow.bind(this);
+  }
+
+  handleClickDownload(e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) {
+    if (this.props.rights !== "") {
+      e.stopPropagation();
+      e.preventDefault();
+      this.setState({ show: true });
+    }
+  }
+
+  unsetShow() {
+    this.setState({ show: false });
+  }
+
+  render() {
+    const { lang, file, rights, useCc, ccCommercialUse, ccModification, type } = this.props;
+    const url = ItemUtil.getFileUrl(type, this.props.file);
+    return (
+      <>
+        <a className={styles.downloadButton} href={url} download={file.original_file_name} target="_blank" rel="noopener noreferrer" onClick={this.handleClickDownload}>
+          Download
+        </a>
+        <LicenseAgreementDialog lang={lang} file={file} rights={rights} useCc={useCc} ccCommercialUse={ccCommercialUse} ccModification={ccModification} show={this.state.show} unsetShow={this.unsetShow} type={type} />
+      </>
+    );
+  }
+}
+
+export default FileDownloadButton;

src/database/item-type/lib/field/FileSize.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+
+interface Props {
+  lang: MultiLang;
+  size: number;
+}
+
+const FileSize: React.FC<Props> = (props: Props) => {
+  const { size } = props;
+  const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const power = size > 0 ? Math.floor(Math.log(size) / Math.log(1024)) : 0;
+  const label = Math.round((size / Math.pow(1024, power)) * 10) / 10 + " " + units[power];
+  return <span>{label}</span>;
+};
+
+export default FileSize;

src/database/item-type/lib/field/FreeKeyword.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+
+interface Props {
+  lang: MultiLang;
+  keyword: string[];
+}
+
+const FreeKeyword: React.FC<Props> = (props: Props) => {
+  const { keyword } = props;
+  if (keyword.length === 0) {
+    return null;
+  }
+  const label = keyword.join(", ");
+  return <span>{label}</span>;
+};
+
+export default FreeKeyword;

src/database/item-type/lib/field/ItemFile.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { BrainAtlasType, MultiLang } from "../../../../config";
+import Functions from "../../../../functions";
+import { ItemBasicFile } from "../../../lib/ItemUtil";
+import DateTime from "./DateTime";
+import FileDownloadButton from "./FileDownloadButton";
+import FileSize from "./FileSize";
+
+interface Props {
+  lang: MultiLang;
+  file: ItemBasicFile[];
+  ftype: string;
+  rights?: string;
+  useCc?: number;
+  ccCommercialUse?: number;
+  ccModification?: number;
+  downloadLimit?: number;
+  type: BrainAtlasType;
+}
+
+const ItemFile: React.FC<Props> = (props: Props) => {
+  const { lang, file, ftype, type } = props;
+  const rights = typeof props.rights === "undefined" ? "" : props.rights;
+  const useCc = typeof props.useCc === "undefined" ? 0 : props.useCc;
+  const ccCommercialUse = typeof props.ccCommercialUse === "undefined" ? 0 : props.ccCommercialUse;
+  const ccModification = typeof props.ccModification === "undefined" ? 0 : props.ccModification;
+  const downloadLimit = typeof props.downloadLimit === "undefined" ? 0 : props.downloadLimit;
+  const data = file.find((value) => {
+    return value.file_type_name === ftype;
+  });
+  if (typeof data === "undefined") {
+    return null;
+  }
+  const date = new Date(data.timestamp);
+  const timestamp = Math.floor(date.valueOf() / 1000);
+  return (
+    <div>
+      {data.original_file_name}
+      <br />
+      <table>
+        <tbody>
+          <tr>
+            <td>Type</td>
+            <td>: {data.mime_type}</td>
+            <td rowSpan={4}>{downloadLimit === 0 && <FileDownloadButton lang={lang} file={data} rights={rights} useCc={useCc} ccCommercialUse={ccCommercialUse} ccModification={ccModification} type={type} />}</td>
+          </tr>
+          <tr>
+            <td>Size</td>
+            <td>
+              : <FileSize lang={lang} size={data.file_size} />
+            </td>
+          </tr>
+          <tr>
+            <td>Last updated</td>
+            <td>
+              : <DateTime lang={lang} date={timestamp} onlyDate={true} />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      {downloadLimit === 1 && (
+        <>
+          <br />({Functions.mlang("[en]File has been removed[/en][ja]ファイルは削除されました[/ja]", lang)})
+        </>
+      )}
+    </div>
+  );
+};
+
+export default ItemFile;

src/database/item-type/lib/field/ItemIndex.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { BrainAtlasType, MultiLang } from "../../../../config";
+import Functions from "../../../../functions";
+import IndexUtil from "../../../lib/IndexUtil";
+import { ItemBasicIndex } from "../../../lib/ItemUtil";
+
+interface Props {
+  lang: MultiLang;
+  index: ItemBasicIndex[];
+  type: BrainAtlasType;
+}
+
+const ItemIndex: React.FC<Props> = (props: Props) => {
+  const { lang, index, type } = props;
+  if (index.length === 0) {
+    return null;
+  }
+  const elements = index.map((value, idx) => {
+    const evenodd = idx % 2 === 0 ? "even" : "odd";
+    const url = IndexUtil.getUrl(type, value.index_id);
+    return (
+      <tr key={value.index_id}>
+        <td className={evenodd}>
+          <Link to={url}>{Functions.mlang(value.title, lang)}</Link>
+        </td>
+      </tr>
+    );
+  });
+  return (
+    <table>
+      <tbody>{elements}</tbody>
+    </table>
+  );
+};
+
+export default ItemIndex;

src/database/item-type/lib/field/Language.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+import Functions from "../../../../functions";
+import { ItemBasicLang } from "../../../lib/ItemUtil";
+
+interface Props {
+  lang: MultiLang;
+  itemLang: ItemBasicLang;
+}
+
+const Language: React.FC<Props> = (props: Props) => {
+  const { lang, itemLang } = props;
+  const langStr = {
+    eng: "[en]English[/en][ja]英語[/ja]",
+    jpn: "[en]Japanese[/en][ja]日本語[/ja]",
+    fra: "[en]French[/en][ja]フランス語[/ja]",
+    deu: "[en]German[/en][ja]ドイツ語[/ja]",
+    esl: "[en]Spanish[/en][ja]スペイン語[/ja]",
+    ita: "[en]Italian[/en][ja]イタリア語[/ja]",
+    dut: "[en]Dutch[/en][ja]オランダ語[/ja]",
+    sve: "[en]Swedish[/en][ja]スウェーデン語[/ja]",
+    nor: "[en]Norwegian[/en][ja]ノルウェー語[/ja]",
+    dan: "[en]Danish[/en][ja]デンマーク語[/ja]",
+    fin: "[en]Finnish[/en][ja]フィンランド語[/ja]",
+    por: "[en]Portuguese[/en][ja]ポルトガル語[/ja]",
+    chi: "[en]Chinese[/en][ja]中国語[/ja]",
+    kor: "[en]Korean[/en][ja]韓国語[/ja]",
+  };
+  if (!(itemLang in langStr)) {
+    return null;
+  }
+  return <span>{Functions.mlang(langStr[itemLang], lang)}</span>;
+};
+
+export default Language;

src/database/item-type/lib/field/LicenseAgreementDialog.module.css

@@ -0,0 +1,38 @@
+.overlay {
+  position: fixed;
+  z-index: 90;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #000000;
+  opacity: 0.8;
+}
+
+.dialog {
+  position: fixed;
+  background-color: #d8d8d8;
+  width: 570px;
+  z-index: 100;
+  top: 50%;
+  left: 50%;
+  right: auto;
+  bottom: auto;
+  margin: 0 auto;
+  padding: 20px;
+  transform: translate(-50%, -50%);
+  border-radius: 5px;
+}
+
+.box {
+  background-color: #fff;
+  padding: 10px;
+}
+
+.download {
+  text-align: center;
+}
+
+.download button {
+  margin: 5px 5px 0;
+}

src/database/item-type/lib/field/LicenseAgreementDialog.tsx

@@ -0,0 +1,136 @@
+import React, { ChangeEvent, MouseEvent } from "react";
+import { Modal } from "react-overlays";
+import { BrainAtlasType, MultiLang } from "../../../../config";
+import Functions from "../../../../functions";
+import ItemUtil, { ItemBasicFile } from "../../../lib/ItemUtil";
+import DateTime from "./DateTime";
+import FileSize from "./FileSize";
+import styles from "./LicenseAgreementDialog.module.css";
+import Rights from "./Rights";
+
+interface Props {
+  lang: MultiLang;
+  file: ItemBasicFile;
+  rights: string;
+  useCc: number;
+  ccCommercialUse: number;
+  ccModification: number;
+  show: boolean;
+  unsetShow: () => void;
+  type: BrainAtlasType;
+}
+
+interface State {
+  show: boolean;
+  disabled: boolean;
+}
+
+class LicenseAgreementDialog extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      show: props.show,
+      disabled: false,
+    };
+    this.handleChangeCheckbox = this.handleChangeCheckbox.bind(this);
+    this.handleClickDownload = this.handleClickDownload.bind(this);
+    this.handleClickCancel = this.handleClickCancel.bind(this);
+  }
+
+  static getDerivedStateFromProps(nextProps: Props, prevState: State) {
+    if (nextProps.show && !prevState.show) {
+      return { disabled: true, show: nextProps.show };
+    }
+    return null;
+  }
+
+  handleChangeCheckbox(e: ChangeEvent<HTMLInputElement>) {
+    const disabled = e.target.value === "0";
+    this.setState({ disabled });
+  }
+
+  handleClickDownload(e: MouseEvent<HTMLButtonElement>) {
+    this.props.unsetShow();
+    this.setState({ show: false });
+  }
+
+  handleClickCancel() {
+    this.props.unsetShow();
+    this.setState({ show: false });
+  }
+
+  renderBackdrop(props: any) {
+    return <div className={styles.overlay} {...props} />;
+  }
+
+  render() {
+    const { lang, type } = this.props;
+    const date = new Date(this.props.file.timestamp);
+    const timestamp = Math.floor(date.valueOf() / 1000);
+    const url = ItemUtil.getFileUrl(type, this.props.file);
+    return (
+      <Modal className={styles.dialog} show={this.state.show} onHide={this.handleClickCancel} renderBackdrop={this.renderBackdrop}>
+        <div>
+          <div>
+            {Functions.mlang("[en]Download file information[/en][ja]ダウンロードするファイルの情報[/ja]", lang)}
+            <div className={styles.box}>
+              {this.props.file.original_file_name}
+              <br />
+              <table>
+                <tbody>
+                  <tr>
+                    <td>Type</td>
+                    <td>: {this.props.file.mime_type}</td>
+                  </tr>
+                  <tr>
+                    <td>Size</td>
+                    <td>
+                      : <FileSize lang={lang} size={this.props.file.file_size} />
+                    </td>
+                  </tr>
+                  <tr>
+                    <td>Last updated</td>
+                    <td>
+                      : <DateTime lang={lang} date={timestamp} onlyDate={true} />
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <br />
+          <div>
+            {Functions.mlang("[en]License agreement[/en][ja]ファイルのライセンス[/ja]", lang)}
+            <div className={styles.box}>
+              {Functions.mlang("[en]Please read the following license agreement carefully.[/en][ja]このファイルには下記のライセンスが設定されています。[/ja]", lang)}
+              <div>
+                <Rights lang={lang} rights={this.props.rights} useCc={this.props.useCc} ccCommercialUse={this.props.ccCommercialUse} ccModification={this.props.ccModification} />
+                <input type="radio" name="radio_license" value="1" onChange={this.handleChangeCheckbox} checked={!this.state.disabled} />
+                {Functions.mlang("[en]I accept the terms in the license agreement.[/en][ja]ライセンスに同意します。[/ja]", lang)}
+                <br />
+                <input type="radio" name="radio_license" value="0" onChange={this.handleChangeCheckbox} checked={this.state.disabled} />
+                {Functions.mlang("[en]I do not accept the terms in the license agreement.[/en][ja]ライセンスに同意しません。[/ja]", lang)}
+                <br />
+              </div>
+            </div>
+          </div>
+          <br />
+          <div className={styles.download}>
+            Acceptance is needed to download this file.
+            <br />
+            <a href={url} download={this.props.file.original_file_name}>
+              <button className="formButton" onClick={this.handleClickDownload} disabled={this.state.disabled}>
+                Download
+              </button>
+            </a>
+            <button className="formButton" onClick={this.handleClickCancel}>
+              Cancel
+            </button>
+          </div>
+        </div>
+      </Modal>
+    );
+  }
+}
+
+export default LicenseAgreementDialog;

src/database/item-type/lib/field/Preview.module.css

@@ -0,0 +1,23 @@
+.previewBox {
+  text-align: center;
+  margin: 10px;
+}
+
+.previewBox::after {
+  content: "";
+  display: block;
+  clear: both;
+}
+
+.preview {
+  width: 200px;
+  margin: 0 auto;
+  float: left;
+  text-align: center;
+}
+
+.preview caption {
+  width: 200px;
+  margin: 5px;
+  font-size: 80%;
+}

src/database/item-type/lib/field/Preview.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import Lightbox from "react-image-lightbox";
+import "react-image-lightbox/style.css";
+import { BrainAtlasType, MultiLang } from "../../../../config";
+import Functions from "../../../../functions";
+import ItemUtil, { ItemBasicFile } from "../../../lib/ItemUtil";
+import styles from "./Preview.module.css";
+
+interface Props {
+  lang: MultiLang;
+  file: ItemBasicFile[];
+  type: BrainAtlasType;
+}
+
+interface State {
+  isOpen: boolean;
+  imageIndex: number;
+}
+
+class Preview extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      imageIndex: 0,
+    };
+  }
+
+  render() {
+    const { lang, file, type } = this.props;
+    const data = file.filter((value) => {
+      return value.file_type_name === "preview";
+    });
+    if (data.length === 0) {
+      return null;
+    }
+    let imageUrls: string[] = [];
+    const previews = data.map((value, idx) => {
+      const fileUrl = ItemUtil.getFileUrl(type, value);
+      const previewUrl = ItemUtil.getPreviewFileUrl(type, value);
+      const caption = Functions.mlang(value.caption, lang);
+      imageUrls.push(fileUrl);
+      return (
+        <figure key={value.file_id} className={styles.preview}>
+          <a
+            href={fileUrl}
+            download={value.original_file_name}
+            onClick={(e) => {
+              e.preventDefault();
+              this.setState({ isOpen: true, imageIndex: idx });
+            }}
+          >
+            <img src={previewUrl} alt={caption} />
+          </a>
+          <figcaption>{caption}</figcaption>
+        </figure>
+      );
+    });
+    const { isOpen, imageIndex } = this.state;
+    return (
+      <>
+        <div className={styles.previewBox}>{previews}</div>
+        {isOpen && (
+          <Lightbox
+            mainSrc={imageUrls[imageIndex]}
+            nextSrc={imageUrls[(imageIndex + 1) % data.length]}
+            prevSrc={imageUrls[(imageIndex + data.length - 1) % data.length]}
+            onCloseRequest={() => this.setState({ isOpen: false })}
+            onMovePrevRequest={() =>
+              this.setState({
+                imageIndex: (imageIndex + data.length - 1) % data.length,
+              })
+            }
+            onMoveNextRequest={() =>
+              this.setState({
+                imageIndex: (imageIndex + 1) % data.length,
+              })
+            }
+          />
+        )}
+      </>
+    );
+  }
+}
+
+export default Preview;

src/database/item-type/lib/field/PublicationDate.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+import DateTime from "./DateTime";
+
+interface Props {
+  lang: MultiLang;
+  year: number;
+  month: number;
+  mday: number;
+}
+
+const PublicationDate: React.FC<Props> = (props: Props) => {
+  const { lang, year, month, mday } = props;
+  const d = new Date(year + "-" + month + "-" + mday);
+  const timestamp = Math.floor(d.valueOf() / 1000);
+  return <DateTime lang={lang} date={timestamp} onlyDate={true} />;
+};
+
+export default PublicationDate;

src/database/item-type/lib/field/Readme.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+import Description from "./Description";
+
+interface Props {
+  lang: MultiLang;
+  readme: string;
+}
+
+const Readme: React.FC<Props> = (props: Props) => {
+  const { lang, readme } = props;
+  return <Description lang={lang} description={readme} className="readme" />;
+};
+
+export default Readme;

src/database/item-type/lib/field/RelatedTo.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { BrainAtlasType, MultiLang } from "../../../../config";
+import ItemType from "../../../item-type";
+import ItemUtil from "../../../lib/ItemUtil";
+
+interface Props {
+  lang: MultiLang;
+  relatedTo: number[];
+  type: BrainAtlasType;
+}
+
+interface State {
+  elements: JSX.Element[];
+}
+
+class RelatedTo extends React.Component<Props, State> {
+  private isActive: boolean;
+
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      elements: [],
+    };
+    this.isActive = false;
+  }
+
+  componentDidMount() {
+    this.isActive = true;
+    this.updateElements(this.props.relatedTo);
+  }
+
+  componentDidUpdate(prevProps: Props) {
+    if (JSON.stringify(this.props.relatedTo) !== JSON.stringify(prevProps.relatedTo)) {
+      this.updateElements(this.props.relatedTo);
+    }
+  }
+
+  componentWillUnmount() {
+    this.isActive = false;
+  }
+
+  updateElements(relatedTo: number[]) {
+    const { lang, type } = this.props;
+    if (relatedTo.length === 0) {
+      this.setState({ elements: [] });
+    } else {
+      ItemUtil.getList(type, relatedTo, (results) => {
+        const elements = results.data.map((item, idx) => {
+          const evenodd = idx % 0 ? "even" : "odd";
+          return (
+            <tr key={item.item_id}>
+              <td className={evenodd}>
+                <ItemType.List lang={lang} item={item} type={type} />
+              </td>
+            </tr>
+          );
+        });
+        if (this.isActive) {
+          this.setState({ elements });
+        }
+      });
+    }
+  }
+
+  render() {
+    if (this.state.elements.length === 0) {
+      return null;
+    }
+    return (
+      <table className="listTable">
+        <tbody>
+          <tr>
+            <th>Item summary</th>
+          </tr>
+          {this.state.elements}
+        </tbody>
+      </table>
+    );
+  }
+}
+
+export default RelatedTo;

src/database/item-type/lib/field/Rights.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+import CreativeCommons, { getCreativeCommonsType } from "./CreativeCommons";
+import Description from "./Description";
+
+interface Props {
+  lang: MultiLang;
+  rights: string;
+  useCc: number;
+  ccCommercialUse: number;
+  ccModification: number;
+}
+
+const Rights: React.FC<Props> = (props: Props) => {
+  const { lang, rights, useCc, ccCommercialUse, ccModification } = props;
+  if (useCc === 0) {
+    return <Description lang={lang} description={rights} className="rights" />;
+  }
+  const ccType = getCreativeCommonsType(ccCommercialUse, ccModification);
+  return <CreativeCommons lang={lang} type={ccType} />;
+};
+
+export default Rights;

src/database/item-type/lib/field/SimPFLinkIcon.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { MultiLang } from "../../../../config";
+import imageButton from "../../../assets/images/simpf_button.png";
+
+interface Props {
+  lang: MultiLang;
+  url: string;
+  isDetail: boolean;
+}
+
+const SimPFLinkIcon: React.FC<Props> = (props: Props) => {
+  const { url, isDetail } = props;
+  const title = "Online Simulation";
+  const size = isDetail ? 64 : 35;
+  if (url === "") {
+    return null;
+  }
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer" title={title}>
+      <img src={imageButton} alt={title} width={size} height={size} />
+    </a>
+  );
+};
+
+export default SimPFLinkIcon;

src/database/item-type/lib/field/index.tsx

@@ -0,0 +1,39 @@
+import Author from "./Author";
+import ChangeLog from "./ChangeLog";
+import Contributer from "./Contributer";
+import CreativeCommons from "./CreativeCommons";
+import DateTime from "./DateTime";
+import Description from "./Description";
+import FileDownloadButton from "./FileDownloadButton";
+import FileSize from "./FileSize";
+import FreeKeyword from "./FreeKeyword";
+import ItemFile from "./ItemFile";
+import ItemIndex from "./ItemIndex";
+import Language from "./Language";
+import Preview from "./Preview";
+import PublicationDate from "./PublicationDate";
+import Readme from "./Readme";
+import RelatedTo from "./RelatedTo";
+import Rights from "./Rights";
+
+const ItemTypeField = {
+  Author,
+  ChangeLog,
+  Contributer,
+  CreativeCommons,
+  DateTime,
+  Description,
+  FileDownloadButton,
+  FileSize,
+  FreeKeyword,
+  ItemFile,
+  ItemIndex,
+  Language,
+  Preview,
+  PublicationDate,
+  Readme,
+  RelatedTo,
+  Rights,
+};
+
+export default ItemTypeField;

src/database/item-type/memo/MemoAdvancedSearch.tsx

@@ -0,0 +1,27 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class MemoAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "memo";
+    this.title = "Memo";
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+    this.state.values["item_link"] = "";
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+      { label: "[en]Item Link[/en][ja]リンク[/ja]", value: this.renderFieldInputText("item_link", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default MemoAdvancedSearch;

src/database/item-type/memo/MemoDetail.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import XoopsCode from "../../../common/lib/XoopsCode";
+import Functions from "../../../functions";
+import { ItemMemo } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+
+class MemoDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemMemo;
+    const fields = [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Item Link[/en][ja]リンク[/ja]", value: <XoopsCode lang={lang} text={item.item_link} /> },
+      { label: "[en]Memo File[/en][ja]メモファイル[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="memo_file" type={type} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+    return fields;
+  }
+}
+
+export default MemoDetail;

src/database/item-type/memo/MemoList.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import XoopsCode from "../../../common/lib/XoopsCode";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_memo.gif";
+import { ItemMemo } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+
+class MemoList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Memo";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemMemo;
+    const link = item.item_link !== "" ? <XoopsCode lang={lang} text={item.item_link} /> : null;
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {link}
+      </>
+    );
+  }
+}
+
+export default MemoList;

src/database/item-type/memo/MemoTop.tsx

@@ -0,0 +1,14 @@
+import iconFile from "../../assets/images/icon_memo.gif";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class MemoTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "memo";
+    this.label = "Memo";
+    this.icon = iconFile;
+    this.description = "[en]Personal Memo Pad.[/en][ja]汎用メモパッド[/ja]";
+  }
+}
+
+export default MemoTop;

src/database/item-type/memo/index.tsx

@@ -0,0 +1,13 @@
+import MemoAdvancedSearch from "./MemoAdvancedSearch";
+import MemoDetail from "./MemoDetail";
+import MemoList from "./MemoList";
+import MemoTop from "./MemoTop";
+
+const ItemTypeMemo = {
+  Top: MemoTop,
+  List: MemoList,
+  Detail: MemoDetail,
+  AdvancedSearch: MemoAdvancedSearch,
+};
+
+export default ItemTypeMemo;

src/database/item-type/model/ModelAdvancedSearch.tsx

@@ -0,0 +1,34 @@
+import { ItemModelSubTypes } from "../../lib/ItemUtil";
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class ModelAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "model";
+    this.title = "Model";
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+    this.state.values["model_type"] = "";
+    this.state.values["creator"] = "";
+    this.state.values["file.preview.caption"] = "";
+    this.state.values["file.model_data.original_file_name"] = "";
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+      { label: "[en]Model Type[/en][ja]モデルタイプ[/ja]", value: this.renderFieldSelect("model_type", ItemModelSubTypes) },
+      { label: "[en]Creator[/en][ja]作成者[/ja]", value: this.renderFieldInputText("creator", 50) },
+      { label: "[en]Caption[/en][ja]キャプション[/ja]", value: this.renderFieldInputText("file.preview.caption", 50) },
+      { label: "[en]Model File[/en][ja]モデルファイル[/ja]", value: this.renderFieldInputText("file.model_data.original_file_name", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default ModelAdvancedSearch;

src/database/item-type/model/ModelDetail.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import Functions from "../../../functions";
+import ItemUtil, { ItemModel } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+import SimPFLinkIcon from "../lib/field/SimPFLinkIcon";
+import ModelUtil from "./ModelUtil";
+
+class ModelDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemModel;
+    const fields = [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Model Type[/en][ja]モデルタイプ[/ja]", value: <ModelUtil.ModelType lang={lang} type={item.model_type} /> },
+      { label: "[en]Creator[/en][ja]作成者[/ja]", value: <ItemTypeField.Author lang={lang} author={item.creator} /> },
+      { label: "[en]Preview[/en][ja]プレビュー[/ja]", value: <ItemTypeField.Preview lang={lang} file={item.file} type={type} /> },
+      { label: "[en]Model File[/en][ja]モデルファイル[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="model_data" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} downloadLimit={item.attachment_dl_limit} type={type} /> },
+      { label: "Readme", value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
+      { label: "Rights", value: <ItemTypeField.Rights lang={lang} rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+    const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
+    if (simpfLinkUrl !== "") {
+      const field = { label: "Online Simulation", value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} /> };
+      fields.splice(13, 0, field);
+    }
+    return fields;
+  }
+}
+
+export default ModelDetail;

src/database/item-type/model/ModelList.tsx

@@ -0,0 +1,36 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_model.gif";
+import { ItemModel } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+
+class ModelList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Model";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemModel;
+    const authors = item.creator.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ", "}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default ModelList;

src/database/item-type/model/ModelTop.tsx

@@ -0,0 +1,16 @@
+import iconFile from "../../assets/images/icon_model.gif";
+import { ItemModelSubTypes } from "../../lib/ItemUtil";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class ModelTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "model";
+    this.label = "Model";
+    this.icon = iconFile;
+    this.description = "[en]Model programs/scripts.[/en][ja]モデル プログラム/スクリプト[/ja]";
+    this.subTypes = ItemModelSubTypes;
+  }
+}
+
+export default ModelTop;

src/database/item-type/model/ModelUtil.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { MultiLang } from "../../../config";
+import { ItemModelSubType, ItemModelSubTypes } from "../../lib/ItemUtil";
+
+interface ModelTypeProps {
+  lang: MultiLang;
+  type: ItemModelSubType;
+}
+
+const ModelType: React.FC<ModelTypeProps> = (props: ModelTypeProps) => {
+  const { type } = props;
+  const subtype = ItemModelSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === "undefined") {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+const ModelUtil = {
+  ModelType,
+};
+
+export default ModelUtil;

src/database/item-type/model/index.tsx

@@ -0,0 +1,13 @@
+import ModelAdvancedSearch from "./ModelAdvancedSearch";
+import ModelDetail from "./ModelDetail";
+import ModelList from "./ModelList";
+import ModelTop from "./ModelTop";
+
+const ItemTypeModel = {
+  Top: ModelTop,
+  List: ModelList,
+  Detail: ModelDetail,
+  AdvancedSearch: ModelAdvancedSearch,
+};
+
+export default ItemTypeModel;

src/database/item-type/paper/PaperAdvancedSearch.tsx

@@ -0,0 +1,39 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class PaperAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "paper";
+    this.title = "Paper";
+    this.state.values["pubmed_id"] = "";
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+    this.state.values["author"] = "";
+    this.state.values["journal"] = "";
+    this.state.values["publication_year"] = "";
+    this.state.values["volume"] = "";
+    this.state.values["number"] = "";
+    this.state.values["page"] = "";
+  }
+
+  getRows() {
+    const rows = [
+      { label: "PubMed ID", value: this.renderFieldInputText("pubmed_id", 50) },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+      { label: "[en]Author[/en][ja]著者[/ja]", value: this.renderFieldInputText("author", 50) },
+      { label: "[en]Journal[/en][ja]ジャーナル[/ja]", value: this.renderFieldInputText("journal", 50) },
+      { label: "[en]Publication Year[/en][ja]出版年[/ja]", value: this.renderFieldInputText("publication_year", 10) },
+      { label: "[en]Volume[/en][ja]巻[/ja]", value: this.renderFieldInputText("volume", 50) },
+      { label: "[en]Number[/en][ja]号[/ja]", value: this.renderFieldInputText("number", 50) },
+      { label: "[en]Page[/en][ja]ページ[/ja]", value: this.renderFieldInputText("page", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default PaperAdvancedSearch;

src/database/item-type/paper/PaperDetail.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Functions from "../../../functions";
+import { ItemPaper } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+import PaperUtil from "./PaperUtil";
+
+class PaperDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemPaper;
+    return [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "PubMed ID", value: <PaperUtil.PubmedLink lang={lang} pubmedId={item.pubmed_id} /> },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Author[/en][ja]著者[/ja]", value: <ItemTypeField.Author lang={lang} author={item.author} /> },
+      { label: "[en]Journal[/en][ja]ジャーナル[/ja]", value: Functions.mlang(item.journal, lang) },
+      { label: "[en]Publication Year[/en][ja]出版年[/ja]", value: item.publication_year },
+      { label: "[en]Volume[/en][ja]巻[/ja]", value: item.volume },
+      { label: "[en]Number[/en][ja]号[/ja]", value: item.number },
+      { label: "[en]Page[/en][ja]ページ[/ja]", value: item.page },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+  }
+}
+
+export default PaperDetail;

src/database/item-type/paper/PaperList.tsx

@@ -0,0 +1,50 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_paper.gif";
+import { ItemPaper } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+import PaperUtil from "./PaperUtil";
+
+class PaperList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Paper";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemPaper;
+    const authors = item.author.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ", "}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+        <br />
+        {Functions.mlang(item.journal, lang)}
+        {item.publication_year}
+        {item.volume !== null && " ;" + item.volume}
+        {item.number !== null && " (" + item.number + ")"}
+        {item.page !== "" && " :" + item.page}
+        {item.pubmed_id !== "" && (
+          <>
+            {" "}
+            [PMID:
+            <PaperUtil.PubmedLink lang={lang} pubmedId={item.pubmed_id} />]
+          </>
+        )}
+      </>
+    );
+  }
+}
+
+export default PaperList;

src/database/item-type/paper/PaperTop.tsx

@@ -0,0 +1,14 @@
+import iconFile from "../../assets/images/icon_paper.gif";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class PaperTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "paper";
+    this.label = "Paper";
+    this.icon = iconFile;
+    this.description = "[en]Related paper collection.[/en][ja]関連論文[/ja]";
+  }
+}
+
+export default PaperTop;

src/database/item-type/paper/PaperUtil.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { MultiLang } from "../../../config";
+
+interface PubmedLinkProps {
+  lang: MultiLang;
+  pubmedId: string;
+}
+
+const PubmedLink: React.FC<PubmedLinkProps> = (props: PubmedLinkProps) => {
+  const { pubmedId } = props;
+  if (pubmedId === "") {
+    return null;
+  }
+  const url = "https://www.ncbi.nlm.nih.gov/pubmed/" + pubmedId;
+  return (
+    <a href={url} target="_blank" rel="noopener noreferrer">
+      {pubmedId}
+    </a>
+  );
+};
+
+const PaperUtil = {
+  PubmedLink,
+};
+
+export default PaperUtil;

src/database/item-type/paper/index.tsx

@@ -0,0 +1,13 @@
+import PaperAdvancedSearch from "./PaperAdvancedSearch";
+import PaperDetail from "./PaperDetail";
+import PaperList from "./PaperList";
+import PaperTop from "./PaperTop";
+
+const ItemTypePaper = {
+  Top: PaperTop,
+  List: PaperList,
+  Detail: PaperDetail,
+  AdvancedSearch: PaperAdvancedSearch,
+};
+
+export default ItemTypePaper;

src/database/item-type/presentation/PresentationAdvancedSearch.tsx

@@ -0,0 +1,46 @@
+import { ItemPresentationSubTypes } from "../../lib/ItemUtil";
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class PresentationAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "presentation";
+    this.title = "Presentation";
+    const now = new Date();
+    const year = String(now.getFullYear());
+    const month = String(now.getMonth() + 1);
+    const mday = String(now.getDate());
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+    this.state.values["meeting_name"] = "";
+    this.state.values["presentation_type"] = "";
+    this.state.values["creator"] = "";
+    this.state.values["publication_year"] = year;
+    this.state.values["publication_month"] = month;
+    this.state.values["publication_mday"] = mday;
+    this.state.values["file.preview.caption"] = "";
+    this.state.values["file.presentation_file.original_file_name"] = "";
+    this.setIgnoreKey("publication_year");
+    this.setIgnoreKey("publication_month");
+    this.setIgnoreKey("publication_mday");
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+      { label: "[en]Presentation Type[/en][ja]ファイル形式[/ja]", value: this.renderFieldSelect("presentation_type", ItemPresentationSubTypes) },
+      { label: "[en]Creator[/en][ja]作成者[/ja]", value: this.renderFieldInputText("creator", 50) },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: this.renderFieldDate("", "publication_year", "publication_month", "publication_mday") },
+      { label: "[en]Caption[/en][ja]キャプション[/ja]", value: this.renderFieldInputText("file.preview.caption", 50) },
+      { label: "[en]Presentation File[/en][ja]発表資料[/ja]", value: this.renderFieldInputText("file.presentation_file.original_file_name", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default PresentationAdvancedSearch;

src/database/item-type/presentation/PresentationDetail.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import Functions from "../../../functions";
+import { ItemPresentation } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+import PresentationUtil from "./PresentationUtil";
+
+class PresentationDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemPresentation;
+    return [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: <ItemTypeField.PublicationDate lang={lang} year={item.publication_year} month={item.publication_month} mday={item.publication_mday} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Presentation Type[/en][ja]ファイル形式[/ja]", value: <PresentationUtil.PresentationType lang={lang} type={item.presentation_type} /> },
+      { label: "[en]Creator[/en][ja]作成者[/ja]", value: <ItemTypeField.Author lang={lang} author={item.creator} /> },
+      { label: "[en]Preview[/en][ja]プレビュー[/ja]", value: <ItemTypeField.Preview lang={lang} file={item.file} type={type} /> },
+      { label: "[en]Presentation File[/en][ja]発表資料[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="presentation_file" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} downloadLimit={item.attachment_dl_limit} type={type} /> },
+      { label: "Readme", value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
+      { label: "Rights", value: <ItemTypeField.Rights lang={lang} rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+  }
+}
+
+export default PresentationDetail;

src/database/item-type/presentation/PresentationList.tsx

@@ -0,0 +1,39 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_presentation.gif";
+import { ItemPresentation } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+import PresentationUtil from "./PresentationUtil";
+
+class PresentationList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Presentation";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemPresentation;
+    const authors = item.creator.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ", "}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        <PresentationUtil.PresentationType lang={lang} type={item.presentation_type} />
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default PresentationList;

src/database/item-type/presentation/PresentationTop.tsx

@@ -0,0 +1,16 @@
+import iconFile from "../../assets/images/icon_presentation.gif";
+import { ItemPresentationSubTypes } from "../../lib/ItemUtil";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class PresentationTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "presentation";
+    this.label = "Presentation";
+    this.icon = iconFile;
+    this.description = "[en]Electrical presentation files.[/en][ja]プレゼンテーション　ファイル[/ja]";
+    this.subTypes = ItemPresentationSubTypes;
+  }
+}
+
+export default PresentationTop;

src/database/item-type/presentation/PresentationUtil.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { MultiLang } from "../../../config";
+import { ItemPresentationSubType, ItemPresentationSubTypes } from "../../lib/ItemUtil";
+
+interface PresentationTypeProps {
+  lang: MultiLang;
+  type: ItemPresentationSubType;
+}
+
+const PresentationType: React.FC<PresentationTypeProps> = (props: PresentationTypeProps) => {
+  const { type } = props;
+  const subtype = ItemPresentationSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === "undefined") {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+const PresentationUtil = {
+  PresentationType,
+};
+
+export default PresentationUtil;

src/database/item-type/presentation/index.tsx

@@ -0,0 +1,13 @@
+import PresentationAdvancedSearch from "./PresentationAdvancedSearch";
+import PresentationDetail from "./PresentationDetail";
+import PresentationList from "./PresentationList";
+import PresentationTop from "./PresentationTop";
+
+const ItemTypePresentation = {
+  Top: PresentationTop,
+  List: PresentationList,
+  Detail: PresentationDetail,
+  AdvancedSearch: PresentationAdvancedSearch,
+};
+
+export default ItemTypePresentation;

src/database/item-type/simulator/SimulatorAdvancedSearch.tsx

@@ -0,0 +1,43 @@
+import { ItemSimulatorSubTypes } from "../../lib/ItemUtil";
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class SimulatorAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "simulator";
+    this.title = "Simulator";
+    const now = new Date();
+    const year = String(now.getFullYear());
+    const month = String(now.getMonth() + 1);
+    const mday = String(now.getDate());
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+    this.state.values["simulator_type"] = "";
+    this.state.values["developer"] = "";
+    this.state.values["publication_year"] = year;
+    this.state.values["publication_month"] = month;
+    this.state.values["publication_mday"] = mday;
+    this.state.values["file.preview.caption"] = "";
+    this.setIgnoreKey("publication_year");
+    this.setIgnoreKey("publication_month");
+    this.setIgnoreKey("publication_mday");
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+      { label: "[en]Simulator Type[/en][ja]シミュレータータイプ[/ja]", value: this.renderFieldSelect("simulator_type", ItemSimulatorSubTypes) },
+      { label: "[en]Developer[/en][ja]開発者[/ja]", value: this.renderFieldInputText("developer", 50) },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: this.renderFieldDate("", "publication_year", "publication_month", "publication_mday") },
+      { label: "[en]Caption[/en][ja]キャプション[/ja]", value: this.renderFieldInputText("file.preview.caption", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default SimulatorAdvancedSearch;

src/database/item-type/simulator/SimulatorDetail.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Functions from "../../../functions";
+import ItemUtil, { ItemSimulator } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+import SimPFLinkIcon from "../lib/field/SimPFLinkIcon";
+import SimulatorUtil from "./SimulatorUtil";
+
+class SimulatorDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemSimulator;
+    const fields = [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: <ItemTypeField.PublicationDate lang={lang} year={item.publication_year} month={item.publication_month} mday={item.publication_mday} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Simulator Type[/en][ja]シミュレータータイプ[/ja]", value: <SimulatorUtil.SimulatorType lang={lang} type={item.simulator_type} /> },
+      { label: "[en]Developer[/en][ja]開発者[/ja]", value: <ItemTypeField.Author lang={lang} author={item.developer} /> },
+      { label: "[en]Preview[/en][ja]プレビュー[/ja]", value: <ItemTypeField.Preview lang={lang} file={item.file} type={type} /> },
+      { label: "[en]Simulator File[/en][ja]ファイル[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="simulator_data" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} downloadLimit={item.attachment_dl_limit} type={type} /> },
+      { label: "Readme", value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
+      { label: "Rights", value: <ItemTypeField.Rights lang={lang} rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+    const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
+    if (simpfLinkUrl !== "") {
+      const field = { label: "Online Simulation", value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} /> };
+      fields.splice(14, 0, field);
+    }
+    return fields;
+  }
+}
+
+export default SimulatorDetail;

src/database/item-type/simulator/SimulatorList.tsx

@@ -0,0 +1,36 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_simulator.gif";
+import { ItemSimulator } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+
+class SimulatorList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Simulator";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemSimulator;
+    const authors = item.developer.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ", "}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default SimulatorList;

src/database/item-type/simulator/SimulatorTop.tsx

@@ -0,0 +1,16 @@
+import iconFile from "../../assets/images/icon_simulator.gif";
+import { ItemSimulatorSubTypes } from "../../lib/ItemUtil";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class SimulatorTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "simulator";
+    this.label = "Simulator";
+    this.icon = iconFile;
+    this.description = "[en]Programs/scripts for simulation.[/en][ja]シミュレーション用プログラム/スクリプト[/ja]";
+    this.subTypes = ItemSimulatorSubTypes;
+  }
+}
+
+export default SimulatorTop;

src/database/item-type/simulator/SimulatorUtil.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { MultiLang } from "../../../config";
+import { ItemSimulatorSubType, ItemSimulatorSubTypes } from "../../lib/ItemUtil";
+
+interface SimulatorTypeProps {
+  lang: MultiLang;
+  type: ItemSimulatorSubType;
+}
+
+const SimulatorType = (props: SimulatorTypeProps) => {
+  const { type } = props;
+  const subtype = ItemSimulatorSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === "undefined") {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+const SimulatorUtil = {
+  SimulatorType,
+};
+
+export default SimulatorUtil;

src/database/item-type/simulator/index.tsx

@@ -0,0 +1,13 @@
+import SimulatorAdvancedSearch from "./SimulatorAdvancedSearch";
+import SimulatorDetail from "./SimulatorDetail";
+import SimulatorList from "./SimulatorList";
+import SimulatorTop from "./SimulatorTop";
+
+const ItemTypeSimulator = {
+  Top: SimulatorTop,
+  List: SimulatorList,
+  Detail: SimulatorDetail,
+  AdvancedSearch: SimulatorAdvancedSearch,
+};
+
+export default ItemTypeSimulator;

src/database/item-type/stimulus/StimulusAdvancedSearch.tsx

@@ -0,0 +1,43 @@
+import { ItemStimulusSubTypes } from "../../lib/ItemUtil";
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from "../lib/AdvancedSearchBase";
+
+class StimulusAdvancedSearch extends AdvancedSearchBase {
+  constructor(props: AdvancedSearchBaseProps) {
+    super(props);
+    this.type = "stimulus";
+    this.title = "Stimulus";
+    const now = new Date();
+    const year = String(now.getFullYear());
+    const month = String(now.getMonth() + 1);
+    const mday = String(now.getDate());
+    this.state.values["title"] = "";
+    this.state.values["keyword"] = "";
+    this.state.values["description"] = "";
+    this.state.values["doi"] = "";
+    this.state.values["stimulus_type"] = "";
+    this.state.values["developer"] = "";
+    this.state.values["publication_year"] = year;
+    this.state.values["publication_month"] = month;
+    this.state.values["publication_mday"] = mday;
+    this.state.values["file.preview.caption"] = "";
+    this.setIgnoreKey("publication_year");
+    this.setIgnoreKey("publication_month");
+    this.setIgnoreKey("publication_mday");
+  }
+
+  getRows() {
+    const rows = [
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: this.renderFieldInputText("title", 50) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: this.renderFieldInputText("keyword", 50) },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: this.renderFieldInputText("description", 50) },
+      { label: "ID", value: this.renderFieldInputText("doi", 50) },
+      { label: "[en]Stimulus Type[/en][ja]刺激タイプ[/ja]", value: this.renderFieldSelect("stimulus_type", ItemStimulusSubTypes) },
+      { label: "[en]Developer[/en][ja]開発者[/ja]", value: this.renderFieldInputText("developer", 50) },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: this.renderFieldDate("", "publication_year", "publication_month", "publication_mday") },
+      { label: "[en]Caption[/en][ja]キャプション[/ja]", value: this.renderFieldInputText("file.preview.caption", 50) },
+    ];
+    return rows;
+  }
+}
+
+export default StimulusAdvancedSearch;

src/database/item-type/stimulus/StimulusDetail.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+import Functions from "../../../functions";
+import ItemUtil, { ItemStimulus } from "../../lib/ItemUtil";
+import DetailBase from "../lib/DetailBase";
+import ItemTypeField from "../lib/field";
+import SimPFLinkIcon from "../lib/field/SimPFLinkIcon";
+import StimulusUtil from "./StimulusUtil";
+
+class StimulusDetail extends DetailBase {
+  getFields() {
+    const { lang, type } = this.props;
+    const item = this.props.item as ItemStimulus;
+    const fields = [
+      { label: "ID", value: item.doi },
+      { label: "[en]Language[/en][ja]言語[/ja]", value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+      { label: "[en]Title[/en][ja]タイトル[/ja]", value: Functions.mlang(item.title, lang) },
+      { label: "[en]Free Keywords[/en][ja]フリーキーワード[/ja]", value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+      { label: "[en]Description[/en][ja]概要[/ja]", value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+      { label: "[en]Date[/en][ja]日付[/ja]", value: <ItemTypeField.PublicationDate lang={lang} year={item.publication_year} month={item.publication_month} mday={item.publication_mday} /> },
+      { label: "[en]Last Modified Date[/en][ja]最終更新日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+      { label: "[en]Created Date[/en][ja]作成日[/ja]", value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+      { label: "[en]Contributor[/en][ja]登録者[/ja]", value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+      { label: "[en]Item Type[/en][ja]アイテムタイプ[/ja]", value: item.item_type_display_name },
+      { label: "[en]Change Log(History)[/en][ja]変更履歴[/ja]", value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+      { label: "[en]Stimulus Type[/en][ja]刺激タイプ[/ja]", value: <StimulusUtil.StimulusType lang={lang} type={item.stimulus_type} /> },
+      { label: "[en]Developer[/en][ja]開発者[/ja]", value: <ItemTypeField.Author lang={lang} author={item.developer} /> },
+      { label: "[en]Preview[/en][ja]プレビュー[/ja]", value: <ItemTypeField.Preview lang={lang} file={item.file} type={type} /> },
+      { label: "[en]Stimulus File[/en][ja]ファイル[/ja]", value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="stimulus_data" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} downloadLimit={item.attachment_dl_limit} type={type} /> },
+      { label: "Readme", value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
+      { label: "Rights", value: <ItemTypeField.Rights lang={lang} rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+      { label: "Index", value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+      { label: "[en]Related to[/en][ja]関連アイテム[/ja]", value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+    ];
+    const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
+    if (simpfLinkUrl !== "") {
+      const field = { label: "Online Simulation", value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} /> };
+      fields.splice(14, 0, field);
+    }
+    return fields;
+  }
+}
+
+export default StimulusDetail;

src/database/item-type/stimulus/StimulusList.tsx

@@ -0,0 +1,36 @@
+import React, { Fragment } from "react";
+import { Link } from "react-router-dom";
+import Functions from "../../../functions";
+import iconFile from "../../assets/images/icon_stimulus.gif";
+import { ItemStimulus } from "../../lib/ItemUtil";
+import ListBase, { ListBaseProps } from "../lib/ListBase";
+
+class StimulusList extends ListBase {
+  constructor(props: ListBaseProps) {
+    super(props);
+    this.label = "Stimulus";
+    this.icon = iconFile;
+  }
+
+  renderBody() {
+    const { lang } = this.props;
+    const item = this.props.item as ItemStimulus;
+    const authors = item.developer.map((author, i) => {
+      return (
+        <Fragment key={i}>
+          {i > 0 && ", "}
+          {Functions.mlang(author, lang)}
+        </Fragment>
+      );
+    });
+    return (
+      <>
+        <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link>
+        <br />
+        {authors}
+      </>
+    );
+  }
+}
+
+export default StimulusList;

src/database/item-type/stimulus/StimulusTop.tsx

@@ -0,0 +1,16 @@
+import iconFile from "../../assets/images/icon_stimulus.gif";
+import { ItemStimulusSubTypes } from "../../lib/ItemUtil";
+import TopBase, { TopBaseProps } from "../lib/TopBase";
+
+class StimulusTop extends TopBase {
+  constructor(props: TopBaseProps) {
+    super(props);
+    this.type = "stimulus";
+    this.label = "Stimulus";
+    this.icon = iconFile;
+    this.description = "[en]Picture, movie and program files for experimental stimuli.[/en][ja]実験用刺激プログラム/スクリプト[/ja]";
+    this.subTypes = ItemStimulusSubTypes;
+  }
+}
+
+export default StimulusTop;

src/database/item-type/stimulus/StimulusUtil.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { MultiLang } from "../../../config";
+import { ItemStimulusSubType, ItemStimulusSubTypes } from "../../lib/ItemUtil";
+
+interface StimulusTypeProps {
+  lang: MultiLang;
+  type: ItemStimulusSubType;
+}
+
+const StimulusType = (props: StimulusTypeProps) => {
+  const { type } = props;
+  const subtype = ItemStimulusSubTypes.find((value) => {
+    return value.type === type;
+  });
+  if (typeof subtype === "undefined") {
+    return null;
+  }
+  return <span>{subtype.label}</span>;
+};
+
+const StimulusUtil = {
+  StimulusType,
+};
+
+export default StimulusUtil;

src/database/item-type/stimulus/index.tsx

@@ -0,0 +1,13 @@
+import StimulusAdvancedSearch from "./StimulusAdvancedSearch";
+import StimulusDetail from "./StimulusDetail";
+import StimulusList from "./StimulusList";
+import StimulusTop from "./StimulusTop";
+
+const ItemTypeStimulus = {
+  Top: StimulusTop,
+  List: StimulusList,
+  Detail: StimulusDetail,
+  AdvancedSearch: StimulusAdvancedSearch,
+};
+
+export default ItemTypeStimulus;

src/database/item-type/tool/ToolAdvancedSearch.tsx

@@ -0,0 +1,46 @@
+import { ItemToolSubTypes } from '../../lib/ItemUtil';
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class ToolAdvancedSearch extends AdvancedSearchBase {
+
+    constructor(props: AdvancedSearchBaseProps) {
+        super(props);
+        this.type = 'tool';
+        this.title = 'Tool';
+        const now = new Date();
+        const year = String(now.getFullYear());
+        const month = String(now.getMonth() + 1);
+        const mday = String(now.getDate());
+        this.state.values['title'] = '';
+        this.state.values['keyword'] = '';
+        this.state.values['description'] = '';
+        this.state.values['doi'] = '';
+        this.state.values['tool_type'] = '';
+        this.state.values['developer'] = '';
+        this.state.values['publication_year'] = year;
+        this.state.values['publication_month'] = month;
+        this.state.values['publication_mday'] = mday;
+        this.state.values['file.preview.caption'] = '';
+        this.state.values['file.tool_data.original_file_name'] = '';
+        this.setIgnoreKey('publication_year');
+        this.setIgnoreKey('publication_month');
+        this.setIgnoreKey('publication_mday');
+    }
+
+    getRows() {
+        const rows = [
+            { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
+            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
+            { label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
+            { label: 'ID', value: this.renderFieldInputText('doi', 50) },
+            { label: '[en]Tool Type[/en][ja]ファイルタイプ[/ja]', value: this.renderFieldSelect('tool_type', ItemToolSubTypes) },
+            { label: '[en]Developer[/en][ja]開発者[/ja]', value: this.renderFieldInputText('developer', 50) },
+            { label: '[en]Date[/en][ja]日付[/ja]', value: this.renderFieldDate('', 'publication_year', 'publication_month', 'publication_mday') },
+            { label: '[en]Caption[/en][ja]キャプション[/ja]', value: this.renderFieldInputText('file.preview.caption', 50) },
+            { label: '[en]Tool File[/en][ja]ファイル[/ja]', value: this.renderFieldInputText('file.tool_data.original_file_name', 50) },
+        ];
+        return rows;
+    }
+}
+
+export default ToolAdvancedSearch;

src/database/item-type/tool/ToolDetail.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Functions from '../../../functions';
+import ItemUtil, { ItemTool } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+import SimPFLinkIcon from '../lib/field/SimPFLinkIcon';
+import ToolUtil from './ToolUtil';
+
+class ToolDetail extends DetailBase {
+
+    getFields() {
+        const { lang, type } = this.props;
+        const item = this.props.item as ItemTool;
+        const fields = [
+            { label: 'ID', value: item.doi },
+            { label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+            { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
+            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+            { label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+            { label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+            { label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+            { label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+            { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+            { label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+            { label: '[en]Tool Type[/en][ja]ファイルタイプ[/ja]', value: <ToolUtil.ToolType lang={lang} type={item.tool_type} /> },
+            { label: '[en]Developer[/en][ja]開発者[/ja]', value: <ItemTypeField.Author lang={lang} author={item.developer} /> },
+            { label: '[en]Preview[/en][ja]プレビュー[/ja]', value: <ItemTypeField.Preview lang={lang} file={item.file} type={type} /> },
+            { label: '[en]Tool File[/en][ja]ファイル[/ja]', value: <ItemTypeField.ItemFile lang={lang} file={item.file} ftype="tool_data" rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} downloadLimit={item.attachment_dl_limit} type={type} /> },
+            { label: 'Readme', value: <ItemTypeField.Readme lang={lang} readme={item.readme} /> },
+            { label: 'Rights', value: <ItemTypeField.Rights lang={lang} rights={item.rights} useCc={item.use_cc} ccCommercialUse={item.cc_commercial_use} ccModification={item.cc_modification} /> },
+            { label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+            { label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+        ];
+        const simpfLinkUrl = ItemUtil.getSimPFLinkUrl(item.item_id);
+        if (simpfLinkUrl !== '') {
+            const field = { label: 'Online Simulation', value: <SimPFLinkIcon lang={lang} url={simpfLinkUrl} isDetail={true} /> };
+            fields.splice(13, 0, field);
+        }
+        return fields;
+    }
+}
+
+export default ToolDetail;

src/database/item-type/tool/ToolList.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Functions from '../../../functions';
+import iconFile from '../../assets/images/icon_tool.gif';
+import { ItemTool } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+import ToolUtil from './ToolUtil';
+
+class ToolList extends ListBase {
+
+    constructor(props: ListBaseProps) {
+        super(props);
+        this.label = 'Tool';
+        this.icon = iconFile;
+    }
+
+    renderBody() {
+        const { lang } = this.props;
+        const item = this.props.item as ItemTool;
+        return (
+            <>
+                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
+                <ToolUtil.ToolType lang={lang} type={item.tool_type} />
+            </>
+        );
+    }
+}
+
+export default ToolList;

src/database/item-type/tool/ToolTop.tsx

@@ -0,0 +1,17 @@
+import { ItemToolSubTypes } from '../../lib/ItemUtil';
+import TopBase, { TopBaseProps } from '../lib/TopBase';
+import iconFile from '../../assets/images/icon_tool.gif';
+
+class ToolTop extends TopBase {
+
+    constructor(props: TopBaseProps) {
+        super(props);
+        this.type = 'tool';
+        this.label = 'Tool';
+        this.icon = iconFile;
+        this.description = '[en]Tool programs/scripts.[/en][ja]データ解析用プログラム/スクリプト[/ja]';
+        this.subTypes = ItemToolSubTypes;
+    }
+}
+
+export default ToolTop;

src/database/item-type/tool/ToolUtil.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { MultiLang } from '../../../config';
+import { ItemToolSubType, ItemToolSubTypes } from '../../lib/ItemUtil';
+
+interface ToolTypeProps {
+    lang: MultiLang;
+    type: ItemToolSubType;
+}
+
+const ToolType = (props: ToolTypeProps) => {
+    const { type } = props;
+    const subtype = ItemToolSubTypes.find((value) => { return value.type === type; });
+    if (typeof subtype === 'undefined') {
+        return null;
+    }
+    return (<span>{subtype.label}</span>);
+}
+
+const ToolUtil = {
+    ToolType,
+}
+
+export default ToolUtil;

src/database/item-type/tool/index.tsx

@@ -0,0 +1,13 @@
+import ToolTop from './ToolTop';
+import ToolList from './ToolList';
+import ToolDetail from './ToolDetail';
+import ToolAdvancedSearch from './ToolAdvancedSearch';
+
+const ItemTypeTool = {
+    Top: ToolTop,
+    List: ToolList,
+    Detail: ToolDetail,
+    AdvancedSearch: ToolAdvancedSearch,
+};
+
+export default ItemTypeTool;

src/database/item-type/url/UrlAdvancedSearch.tsx

@@ -0,0 +1,28 @@
+import AdvancedSearchBase, { AdvancedSearchBaseProps } from '../lib/AdvancedSearchBase';
+
+class UrlAdvancedSearch extends AdvancedSearchBase {
+
+    constructor(props: AdvancedSearchBaseProps) {
+        super(props);
+        this.type = 'url';
+        this.title = 'Url';
+        this.state.values['title'] = '';
+        this.state.values['keyword'] = '';
+        this.state.values['description'] = '';
+        this.state.values['doi'] = '';
+        this.state.values['url'] = '';
+    }
+
+    getRows() {
+        const rows = [
+            { label: '[en]Title[/en][ja]タイトル[/ja]', value: this.renderFieldInputText('title', 50) },
+            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: this.renderFieldInputText('keyword', 50) },
+            { label: '[en]Description[/en][ja]概要[/ja]', value: this.renderFieldInputText('description', 50) },
+            { label: 'ID', value: this.renderFieldInputText('doi', 50) },
+            { label: 'URL', value: this.renderFieldInputText('url', 50) },
+        ];
+        return rows;
+    }
+}
+
+export default UrlAdvancedSearch;

src/database/item-type/url/UrlDetail.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Functions from '../../../functions';
+import { ItemUrl } from '../../lib/ItemUtil';
+import DetailBase from '../lib/DetailBase';
+import ItemTypeField from '../lib/field';
+import UrlUtil from './UrlUtil';
+
+class UrlDetail extends DetailBase {
+
+    getFields() {
+        const { lang, type } = this.props;
+        const item = this.props.item as ItemUrl;
+        return [
+            { label: 'ID', value: item.doi },
+            { label: '[en]Language[/en][ja]言語[/ja]', value: <ItemTypeField.Language lang={lang} itemLang={item.lang} /> },
+            { label: '[en]Title[/en][ja]タイトル[/ja]', value: Functions.mlang(item.title, lang) },
+            { label: '[en]Free Keywords[/en][ja]フリーキーワード[/ja]', value: <ItemTypeField.FreeKeyword lang={lang} keyword={item.keyword} /> },
+            { label: '[en]Description[/en][ja]概要[/ja]', value: <ItemTypeField.Description lang={lang} description={item.description} /> },
+            { label: '[en]Last Modified Date[/en][ja]最終更新日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.last_update_date} /> },
+            { label: '[en]Created Date[/en][ja]作成日[/ja]', value: <ItemTypeField.DateTime lang={lang} date={item.creation_date} /> },
+            { label: '[en]Contributor[/en][ja]登録者[/ja]', value: <ItemTypeField.Contributer lang={lang} uname={item.uname} name={item.name} /> },
+            { label: '[en]Item Type[/en][ja]アイテムタイプ[/ja]', value: item.item_type_display_name },
+            { label: '[en]Change Log(History)[/en][ja]変更履歴[/ja]', value: <ItemTypeField.ChangeLog lang={lang} changelog={item.changelog} /> },
+            { label: 'URL', value: <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a> },
+            { label: '[en]Banner File[/en][ja]バナー[/ja]', value: <UrlUtil.BannerFile lang={lang} file={item.file} type={type} /> },
+            { label: 'Index', value: <ItemTypeField.ItemIndex lang={lang} index={item.index} type={type} /> },
+            { label: '[en]Related to[/en][ja]関連アイテム[/ja]', value: <ItemTypeField.RelatedTo lang={lang} relatedTo={item.related_to} type={type} /> },
+        ];
+    }
+}
+
+export default UrlDetail;

src/database/item-type/url/UrlList.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import Functions from '../../../functions';
+import iconFile from '../../assets/images/icon_url.gif';
+import { ItemUrl } from '../../lib/ItemUtil';
+import ListBase, { ListBaseProps } from '../lib/ListBase';
+
+class UrlList extends ListBase {
+
+    constructor(props: ListBaseProps) {
+        super(props);
+        this.label = 'Url';
+        this.icon = iconFile;
+    }
+
+    renderBody() {
+        const { lang } = this.props;
+        const item = this.props.item as ItemUrl;
+        return (
+            <>
+                <Link to={this.url}>{Functions.mlang(item.title, lang)}</Link><br />
+                Link to <a href={item.url} target="_blank" rel="noopener noreferrer">{item.url}</a>
+            </>
+        );
+    }
+}
+
+export default UrlList;