add TopicsList component

ContentsListSample/.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    "@babel/preset-env",
+  ],
+  "plugins": [
+    "@babel/plugin-transform-spread",
+    "@babel/plugin-transform-arrow-functions"
+  ],
+  "env": {
+    "test": {
+      "presets": ["@babel/env"]
+    }
+  }
+}

ContentsListSample/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+    "env": {
+        "browser": true,
+        "node": true,
+        "es6": true,
+        "jest/globals": true
+    },
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "plugins": ["jest"],
+    "extends": ["plugin:vue/essential", "eslint:recommended", "plugin:jest/recommended", "plugin:prettier/recommended"],
+    "rules": {
+        "no-console": "warn",
+        "no-var": "error",
+        "prefer-const": "error"
+    }
+}

ContentsListSample/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 4,
+  "printWidth": 120
+}

ContentsListSample/.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+    "editor.detectIndentation": true,
+    "editor.formatOnPaste": true,
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll": true
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

ContentsListSample/README.ja.md

@@ -0,0 +1,90 @@
+# ContentsEditSample
+
+[English](README.md)
+
+ContentsEditSample のフロントエンドコードです。
+
+## Prerequisites
+
+まず、必要なものをインストールしてください。
+
+1. Node (<https://nodejs.org/>)
+
+## Prettier
+
+Prettier を使ってコードフォーマットを統一しています。
+
+Lint で Prettier に関するエラーが出たら、`npm run lint:fix` を実行するか、エディタで保存する度に Prettier を実行するように設定してください。
+
+## ESLint
+
+ESLint を使って静的検証を行っています。
+静的検証が失敗する場合はビルドできないようになっています。
+
+_(開発時に ESLint にエラー出ていてもビルドを失敗させないようにしたい場合は環境変数 `RCMS_ESLINT_NO_FAIL_DEV=1` を設定してください。)_
+
+ESLint によるエラーが発生した場合、まずは `npm run lint:fix` を実行してみてください。
+
+## Test frameworks
+
+[Jest](https://facebook.github.io/jest/)、[Vue Test Utils](https://vue-test-utils.vuejs.org/) などを利用してテストを実装しています。
+
+## Project structure
+
+プロジェクト構造は以下のようになっています。
+
+```
+.
+|-- *  # Configuration files, etc.
+|-- dist
+|   `-- *  # Built code
+|-- src
+|   |-- index.js  # Index
+|   |-- common
+|   |   |-- *.test.js  # Unit tests
+|   |   `-- *.js  # Common scripts
+|   |-- components
+|   |   |-- *.test.js  # Unit tests
+|   |   `-- *.vue  # Vue single file components
+`-- tests
+    `-- e2e
+        `-- *.test.js  # End-to-end tests
+```
+
+## Developing
+
+開発を始める前に、 `npm install` で依存関係をインストールする必要があります。
+
+`test` を起動してから編集すれば、ソースが変わると自動的にテストが実行される。
+
+`watch` を起動してから編集すれば、ソースが変わると自動的にビルドされる。
+
+`serve` を起動してから編集すれば、ソースが変わると自動的にビルドされ、[HMR](https://webpack.js.org/concepts/hot-module-replacement/) を通じてリロードされる。
+
+```sh
+npm run test
+# Test/edit as needed
+npm run serve
+# Edit as needed
+```
+
+## Testing
+
+_必ずテストが成功してからビルド、コミットするようにしてください。_
+
+```sh
+npm run test
+# Fix until tests pass
+```
+
+## Building
+
+_Note: watch や serve が走っていれば先に `Ctrl+C` で止めておいてください。_
+
+```sh
+npm run build
+```
+
+## Deploying
+
+ファイルマネージャで `dist/` の中身を `/files/user/mng_vue_components/` にあげてください。

ContentsListSample/README.md

@@ -0,0 +1,92 @@
+# ContentsEditSample
+
+[日本語](README.ja.md)
+
+Frontend code for ContentsEditSample.
+
+## Prerequisites
+
+First, install the prerequisites.
+
+1. Node (<https://nodejs.org/>)
+
+## Prettier
+
+Prettier is used for code formatting.
+
+If a Prettier-related error occurs when linting, run `npm run lint:fix` to fix it automatically.
+Alternatively, configure your editor to format your code with Prettier on save.
+
+## ESLint
+
+ESLint is used for code linting.
+The build process is configures to fail if ESLint fails.
+
+_(To disable failing build on ESLint error, set the environment variable `RCMS_ESLINT_NO_FAIL_DEV=1`.)_
+
+If an ESLint-related error occurs when building, try running `npm run lint:fix` to fix it automatically.
+
+## Testing
+
+[Jest](https://facebook.github.io/jest/), [Vue Test Utils](https://vue-test-utils.vuejs.org/), etc. are used to implement automated tests.
+
+## Project structure
+
+The project structure is as shown below.
+
+```
+.
+|-- *  # Configuration files, etc.
+|-- dist
+|   `-- *  # Built code
+|-- src
+|   |-- index.js  # Index
+|   |-- common
+|   |   |-- *.test.js  # Unit tests
+|   |   `-- *.js  # Common scripts
+|   |-- components
+|   |   |-- *.test.js  # Unit tests
+|   |   `-- *.vue  # Vue single file components
+`-- tests
+    `-- e2e
+        `-- *.test.js  # End-to-end tests
+```
+
+## Developing
+
+Before beginning development, the dependencies have to be installed by running `npm install`.
+
+`test` runs the automated tests every time the source files change.
+
+`watch` runs the build (for development) every time the source files change.
+
+`serve` runs the build (for development) with [HMR](https://webpack.js.org/concepts/hot-module-replacement/) every time the source files change.
+
+```sh
+npm run test
+# Test/edit as needed
+npm run serve
+# Edit as needed
+```
+
+## Testing
+
+_Make sure all tests are passing before building and committing._
+
+```sh
+npm run test
+# Fix until tests pass
+```
+
+## Building
+
+_Note: If watch or serve are running, stop them (by pressing `Ctrl+C`) before building._
+
+```sh
+npm run build
+```
+
+## Deploying
+
+Copy the contents of `dist/` to `/files/user/management-vue-plugin-sample/`。
+

ContentsListSample/babel.config.js

@@ -0,0 +1,29 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          browsers: ['>1%', 'last 2 versions', 'IE 10'],
+        },
+      },
+    ],
+  ],
+  plugins: [
+    '@babel/plugin-transform-spread',
+    '@babel/plugin-transform-arrow-functions',
+    '@babel/plugin-transform-classes',
+  ],
+  env: {
+    test: {
+      presets: [
+        '@babel/env',
+        {
+          targets: {
+            browsers: ['>1%', 'last 2 versions', 'IE 10'],
+          },
+        },
+      ],
+    },
+  },
+};

ContentsListSample/jest.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  testURL: 'http://localhost',
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  moduleFileExtensions: ['js', 'json', 'vue'],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.vue$': 'vue-jest',
+  },
+  snapshotSerializers: ['jest-serializer-vue'],
+};