Skip to content

Commit

Permalink
Dresscaに管理アプリ(フロントエンド)を追加する (#1582)
Browse files Browse the repository at this point in the history
* フロントエンドアプリケーションのソース一式をmainにマージ

* adminワークスペースを追加

* admin用のnpmスクリプトをルートプロジェクトに追加
prodビルド用のコマンドがワークスペースになかったため、追加

* admin用のCIワークフローを追加

* #1236 を反映

* openapi-generatorの自動生成コードを最新化

* [email protected]にアップデート

* カタログアイテムのdtoの引数を修正

* アプリケーションサービスの更新メソッドの引数を修正

* カタログアイテムのgetのdtoのフィールドに行バージョンを追加

* API仕様の軽微な修正

* javadocの誤記を修正

* Revert "[email protected]にアップデート"

This reverts commit 389549b.

* Revert "openapi-generatorの自動生成コードを最新化"

This reverts commit e001e14.

* OpenAPI仕様書のパスを正しいものに修正

* クライアントコードを再生成

* PagedListOfCatalogItemResponseのフィールドをMarisに合わせて修正

* mockの不完全な実装部分を削除

* devモードのエンドポイントのURLを修正

* vitestのmswの設定についてデバッグに使用していたものを削除

* カタログアイテムの参照、追加、更新、削除について自動テストを実装

* adminのコードを新しい仕様書に合わせて自動生成

* コードにコメントを追加。

* 不足しているコメントを追加。

* コメントを改善

* Adminについてopenapi-generatorのバージョンアップを確認する

* リダイレクト漏れを修正
わかりにくい箇所を修正

* [email protected]にアップデート

* Promise.thenで非同期処理を待っていた箇所を、awaitで待つように修正

* 不適当なメソッド命名を修正

* カテゴリとブランドの取得をサービスクラスに委譲するリファクタを実施

---------

Co-authored-by: yoshidakenji <[email protected]>
  • Loading branch information
KentaHizume and kenjiyoshid-a authored Dec 18, 2024
1 parent f689341 commit 0a56ce9
Show file tree
Hide file tree
Showing 119 changed files with 6,490 additions and 140 deletions.
80 changes: 64 additions & 16 deletions .github/workflows/check-openapi-generator-update.yml
Original file line number Diff line number Diff line change
Expand Up @@ -38,27 +38,38 @@ jobs:
- name: 現在のOpenAPI Generatorのバージョン取得
id: get-current-openapi-generator-version
run: |
echo "current-version=$(jq -r '.["generator-cli"].version' ./samples/web-csr/dressca-frontend/consumer/openapitools.json)" >> $GITHUB_OUTPUT
echo "current-version-consumer=$(jq -r '.["generator-cli"].version' ./samples/web-csr/dressca-frontend/consumer/openapitools.json)" >> $GITHUB_OUTPUT
echo "current-version-admin=$(jq -r '.["generator-cli"].version' ./samples/web-csr/dressca-frontend/admin/openapitools.json)" >> $GITHUB_OUTPUT
- name: アップデート要否を判定
id: check-version-update
run: |
if [[ ${{ steps.get-latest-openapi-generator-version.outputs.latest-version }} == ${{ steps.get-current-openapi-generator-version.outputs.current-version }} ]]; then
echo "update-required=false" >> $GITHUB_OUTPUT
if [[ ${{ steps.get-latest-openapi-generator-version.outputs.latest-version }} == ${{ steps.get-current-openapi-generator-version.outputs.current-version-consumer }} ]]; then
echo "update-required-consumer=false" >> $GITHUB_OUTPUT
else
echo "update-required=true" >> $GITHUB_OUTPUT
echo "update-required-consumer=true" >> $GITHUB_OUTPUT
fi
if [[ ${{ steps.get-latest-openapi-generator-version.outputs.latest-version }} == ${{ steps.get-current-openapi-generator-version.outputs.current-version-admin }} ]]; then
echo "update-required-admin=false" >> $GITHUB_OUTPUT
else
echo "update-required-admin=true" >> $GITHUB_OUTPUT
fi
- name: サマリに出力
run: |
echo "# 確認結果" >> $GITHUB_STEP_SUMMARY
echo "openapi-generator のバージョンは ${{ steps.get-latest-openapi-generator-version.outputs.latest-version }} です。" >> $GITHUB_STEP_SUMMARY
echo "openapitools.json の openapi-generator のバージョンは ${{ steps.get-current-openapi-generator-version.outputs.current-version }} です。" >> $GITHUB_STEP_SUMMARY
echo "アップデート要否の判定結果は ${{ steps.check-version-update.outputs.update-required }} です。">> $GITHUB_STEP_SUMMARY
echo "## Dressca-Consumer" >> $GITHUB_STEP_SUMMARY
echo "openapitools.json の openapi-generator のバージョンは ${{ steps.get-current-openapi-generator-version.outputs.current-version-consumer }} です。" >> $GITHUB_STEP_SUMMARY
echo "アップデート要否の判定結果は ${{ steps.check-version-update.outputs.update-required-consumer }} です。">> $GITHUB_STEP_SUMMARY
echo "## Dressca-Admin" >> $GITHUB_STEP_SUMMARY
echo "openapitools.json の openapi-generator のバージョンは ${{ steps.get-current-openapi-generator-version.outputs.current-version-admin }} です。" >> $GITHUB_STEP_SUMMARY
echo "アップデート要否の判定結果は ${{ steps.check-version-update.outputs.update-required-admin }} です。">> $GITHUB_STEP_SUMMARY
- name: issue を作成
id: create-issue
if: ${{ steps.check-version-update.outputs.update-required == 'true' }}
- name: issue を作成(Dressca-Consumer)
id: create-issue-consumer
if: ${{ steps.check-version-update.outputs.update-required-consumer == 'true' }}
uses: Wandalen/wretry.action@master
with:
action: dblock/create-a-github-issue@v3
Expand All @@ -72,17 +83,17 @@ jobs:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
TARGET_APP_NAME: "Dressca-Consumer"
LATEST_VERSION: ${{ steps.get-latest-openapi-generator-version.outputs.latest-version }}
CURRENT_VERSION: ${{ steps.get-current-openapi-generator-version.outputs.current-version }}
CURRENT_VERSION: ${{ steps.get-current-openapi-generator-version.outputs.current-version-consumer }}


- name: issue の情報を出力
if: ${{ steps.check-version-update.outputs.update-required == 'true' }}
- name: issue の情報を出力(Dressca-Consumer)
if: ${{ steps.check-version-update.outputs.update-required-consumer == 'true' }}
env:
STATUS: ${{ steps.create-issue.outputs.outputs && fromJson(steps.create-issue.outputs.outputs).status }}
ISSUE_NUMBER: ${{ steps.create-issue.outputs.outputs && fromJson(steps.create-issue.outputs.outputs).number }}
ISSUE_URL: ${{ steps.create-issue.outputs.outputs && fromJson(steps.create-issue.outputs.outputs).url }}
STATUS: ${{ steps.create-issue-consumer.outputs.outputs && fromJson(steps.create-issue-consumer.outputs.outputs).status }}
ISSUE_NUMBER: ${{ steps.create-issue-consumer.outputs.outputs && fromJson(steps.create-issue-consumer.outputs.outputs).number }}
ISSUE_URL: ${{ steps.create-issue-consumer.outputs.outputs && fromJson(steps.create-issue-consumer.outputs.outputs).url }}
run: |
echo "# issue の作成結果" >> $GITHUB_STEP_SUMMARY
echo "# issue の作成結果(Dressca-Consumer)" >> $GITHUB_STEP_SUMMARY
if [ $STATUS = 'created' ]; then
echo "issue を新規作成しました。" >> $GITHUB_STEP_SUMMARY
elif [ $STATUS = 'updated' ]; then
Expand All @@ -93,3 +104,40 @@ jobs:
echo issue number: $ISSUE_NUMBER >> $GITHUB_STEP_SUMMARY
echo status: $STATUS >> $GITHUB_STEP_SUMMARY
echo - $ISSUE_URL >> $GITHUB_STEP_SUMMARY
- name: issue を作成(Dressca-Admin)
id: create-issue-admin
if: ${{ steps.check-version-update.outputs.update-required-admin == 'true' }}
uses: Wandalen/wretry.action@master
with:
action: dblock/create-a-github-issue@v3
with: |
filename: ./.github/ISSUE_TEMPLATE/99-openapi-generator-update-issue.md
update_existing: true
search_existing: open
attempt_limit: 3
attempt_delay: 300000
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
TARGET_APP_NAME: "Dressca-Admin"
LATEST_VERSION: ${{ steps.get-latest-openapi-generator-version.outputs.latest-version }}
CURRENT_VERSION: ${{ steps.get-current-openapi-generator-version.outputs.current-version-admin }}

- name: issue の情報を出力(Dressca-Admin)
if: ${{ steps.check-version-update.outputs.update-required-admin == 'true' }}
env:
STATUS: ${{ steps.create-issue-admin.outputs.outputs && fromJson(steps.create-issue-admin.outputs.outputs).status }}
ISSUE_NUMBER: ${{ steps.create-issue-admin.outputs.outputs && fromJson(steps.create-issue-admin.outputs.outputs).number }}
ISSUE_URL: ${{ steps.create-issue-admin.outputs.outputs && fromJson(steps.create-issue-admin.outputs.outputs).url }}
run: |
echo "# issue の作成結果(Dressca-Admin)" >> $GITHUB_STEP_SUMMARY
if [ $STATUS = 'created' ]; then
echo "issue を新規作成しました。" >> $GITHUB_STEP_SUMMARY
elif [ $STATUS = 'updated' ]; then
echo "同名の issue が存在するため、更新のみ行いました。" >> $GITHUB_STEP_SUMMARY
else
echo "ステータスの値が不正です。" >> $GITHUB_STEP_SUMMARY
fi
echo issue number: $ISSUE_NUMBER >> $GITHUB_STEP_SUMMARY
echo status: $STATUS >> $GITHUB_STEP_SUMMARY
echo - $ISSUE_URL >> $GITHUB_STEP_SUMMARY
93 changes: 93 additions & 0 deletions .github/workflows/samples-dressca-admin-frontend.ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
---

name: dressca-admin-frontend CI

on:
pull_request:
branches: [main]
paths:
- 'samples/web-csr/dressca-frontend/*.*'
- 'samples/web-csr/dressca-frontend/admin/**'
- '.github/workflows/samples-dressca-admin-frontend.ci.yml'
workflow_dispatch:

defaults:
run:
working-directory: samples/web-csr/dressca-frontend/

jobs:
build:
name: Dressca 管理のフロントエンドアプリケーションのビルド
runs-on: ubuntu-latest
env:
NO_COLOR: "1" # 文字化け防止のためカラーコードを出力しない
strategy:
matrix:
node-version: [20.x]
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/

steps:
- uses: actions/checkout@v4
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}

- uses: actions/cache@v4
id: node_modules_cache_id
env:
cache-name: cache-node-modules
with:
path: '**/node_modules'
key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}

- name: node パッケージのキャッシュ確認
run: echo '${{ toJSON(steps.node_modules_cache_id.outputs) }}'

- name: node パッケージのインストール
if: ${{ steps.node_modules_cache_id.outputs.cache-hit != 'true' }}
run: npm ci

- id: run-lint
name: lintの実行
run: npm run lint:ci:admin >> /var/tmp/lint-result.txt 2>&1

- id: run-type-check
name: TypeScript の型チェック
run: npm run type-check:admin >> /var/tmp/type-check-result.txt 2>&1

- id: application-build
name: アプリケーションのビルド
run: npm run build-only:dev:admin >> /var/tmp/build-result.txt 2>&1

- id: run-unit-tests
name: 単体テストの実行
run: npm run test:unit:admin >> /var/tmp/unit-test-result.txt 2>&1

- name: lintの結果出力
if: ${{ success() || (failure() && steps.run-lint.conclusion == 'failure') }}
uses: ./.github/workflows/file-to-summary
with:
body: /var/tmp/lint-result.txt
header: 'lintの結果 :pen:'

- name: 型チェックの結果出力
if: ${{ success() || (failure() && steps.run-type-check.conclusion == 'failure') }}
uses: ./.github/workflows/file-to-summary
with:
body: /var/tmp/type-check-result.txt
header: '型チェックの結果 :pencil2:'

- name: ビルドの結果出力
if: ${{ success() || (failure() && steps.application-build.conclusion == 'failure') }}
uses: ./.github/workflows/file-to-summary
with:
body: /var/tmp/build-result.txt
header: 'ビルドの結果 :gear:'

- name: 単体テストの結果出力
if: ${{ success() || (failure() && steps.run-unit-tests.conclusion == 'failure') }}
uses: ./.github/workflows/file-to-summary
with:
body: /var/tmp/unit-test-result.txt
header: '単体テストの結果 :memo:'
13 changes: 13 additions & 0 deletions samples/web-csr/dressca-frontend/admin/.env.dev
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Web API のエンドポイントです。
VITE_AXIOS_BASE_ENDPOINT_ORIGIN=

# 開発環境において Web API をプロキシ経由で呼び出す際のエンドポイントです。
VITE_PROXY_ENDPOINT_ORIGIN=http://localhost:8081

# これより下はサンプルアプリケーション Dressca 固有の設定です。

# 商品画像が存在しない場合の代替画像の URL です。
VITE_NO_ASSET_URL=/api/assets/e622b0098808492cb883831c05486b58

# 商品画像が保存されているディレクトリの URL です。
VITE_ASSET_URL=/api/assets/
13 changes: 13 additions & 0 deletions samples/web-csr/dressca-frontend/admin/.env.mock
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Web API のエンドポイントです。
VITE_AXIOS_BASE_ENDPOINT_ORIGIN=

# 開発環境において Web API をプロキシ経由で呼び出す際のエンドポイントです。
VITE_PROXY_ENDPOINT_ORIGIN=https://localhost:6001

# これより下はサンプルアプリケーション Dressca 固有の設定です。

# 商品画像が存在しない場合の代替画像の URL です。
VITE_NO_ASSET_URL=/api/assets/e622b0098808492cb883831c05486b58

# 商品画像が保存されているディレクトリの URL です。
VITE_ASSET_URL=/api/assets/
10 changes: 10 additions & 0 deletions samples/web-csr/dressca-frontend/admin/.env.prod
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
# Web API のエンドポイントです。
VITE_AXIOS_BASE_ENDPOINT_ORIGIN=

# これより下はサンプルアプリケーション Dressca 固有の設定です。

# 商品画像が存在しない場合の代替画像の URL です。
VITE_NO_ASSET_URL=/api/assets/e622b0098808492cb883831c05486b58

# 商品画像が保存されているディレクトリの URL です。
VITE_ASSET_URL=/api/assets/
8 changes: 8 additions & 0 deletions samples/web-csr/dressca-frontend/admin/.eslintrc.cjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution');

module.exports = {
root: true,
extends: '../.eslintrc.cjs',
ignorePatterns: ['**/mockServiceWorker.js'],
};
30 changes: 30 additions & 0 deletions samples/web-csr/dressca-frontend/admin/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
.DS_Store
dist
dist-ssr
coverage
*.local

/cypress/videos/
/cypress/screenshots/

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

*.tsbuildinfo
5 changes: 5 additions & 0 deletions samples/web-csr/dressca-frontend/admin/.stylelintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
import stylelintConfigBase from '../.stylelintrc.js'

export default {
extends: stylelintConfigBase
};
64 changes: 64 additions & 0 deletions samples/web-csr/dressca-frontend/admin/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!-- textlint-disable @textlint-rule/require-header-id,ja-technical-writing/sentence-length -->
<!-- markdownlint-disable-file CMD001 -->

# vue-project

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Type Support for `.vue` Imports in TS

TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.

## Customize configuration

See [Vite Configuration Reference](https://vitejs.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Type-Check, Compile and Minify for Production

```sh
npm run build
```

### Run Unit Tests with [Vitest](https://vitest.dev/)

```sh
npm run test:unit
```

### Run End-to-End Tests with [Cypress](https://www.cypress.io/)

```sh
npm run test:e2e:dev
```

This runs the end-to-end tests against the Vite development server.
It is much faster than the production build.

But it's still recommended to test the production build with `test:e2e` before deploying (e.g. in CI environments):

```sh
npm run build
npm run test:e2e
```

### Lint with [ESLint](https://eslint.org/)

```sh
npm run lint
```
9 changes: 9 additions & 0 deletions samples/web-csr/dressca-frontend/admin/cypress.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/* eslint-disable import/no-default-export */
import { defineConfig } from 'cypress';

export default defineConfig({
e2e: {
specPattern: 'cypress/e2e/**/*.{cy,spec}.{js,jsx,ts,tsx}',
baseUrl: 'http://localhost:6173',
},
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
// https://on.cypress.io/api

describe('My First Test', () => {
it('visits the app root url', () => {
cy.visit('/');
cy.contains('Dressca');
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["./**/*", "../support/**/*"],
"compilerOptions": {
"isolatedModules": false,
"types": ["cypress"]
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]",
"body": "Fixtures are a great way to mock data for responses to routes"
}
Loading

0 comments on commit 0a56ce9

Please sign in to comment.