feat(components):add responses

[maccostar]

Types of changes

What kind of change does this PR introduce? (check at least one)

• [ ] Breaking change
• [ ] Bugfix
• [x] Feature
• [x] Code style update
• [ ] Refactoring
• [ ] Build related changes
• [ ] CI related changes
• [ ] Documentation content changes
• [ ] Other... Please describe:

Description

Issue Number: N/A

Style(components):change style

client/components/ApiMethod.vue

• 24行目：200行ルールを回避する為に、templateにstyleを記載。
• 63行目：<v-select></v-select>内のoptionの並びを統一。
• 166行目：暫定的にh5の文字フォント指定を削除。

Feat(components):Add Response

client/components/ApiMethod.vue

• 115行目~122行目：computedにarrOfResponseの追加 this.flatPathsObj.opeObj.responsesをstatusCodeとResponseObjの組み合わせのオブジェクトに整形。

  # 変更前 this.flatPathsObj.opeObj.responses
  "responses": {
  "204": {
      "description": "OK"
  },
  "401": {
      "description": "Unauthorized",
      "content": {
          "application/json": {
              "schema": {
                  "properties": {
                      "code": {
                          "type": "string"
  } } } } } } }

  # 変更後 arrOfResponse
  [
  {
      statusCode: "204",
      responseObj:{ "description": "OK" }
  },
  {
      statusCode: "401",
      responseObj: {
          "description": "Unauthorized",
          "content": {
              "application/json": {
                  "schema": {
                      "properties": {
                          "code": {
                              "type": "string"
  } } } } } } }
  ]

• 78行目~92行目：<table></table>内で、statusCodeとresponseObjを一覧化 OpenAPISpece - Response Objectの仕様に準じて、一覧表示させる。

  • responseObj.descriptionは必須でJsonに含まれる項目のため、tables内で表示する。
  • responseObj.contentはプロパティが存在する場合のみ、<api-response :response-obj="response.responseObj"/>に値を受け渡す。
  • responseObj.headerは任意項目。本PRでは対応しない。
  • responseObj.linksは任意項目。本PRでは対応しない。 　

client/components/ApiResponse.vue

• 35行目~42行目：mediaTypeObjects Media Type Objectを取得する。

  
  # Response Objectの構成
  Response Object
  ├ desctiption
  ├ header
  ├ links
  └ content
  　└ medietype(string) : { Media Type Object }

Sample Response Object

{ "description": "A complex object array response", "content": { "application/json": { "schema": { "type": "array", "items": { "$ref": "#/components/schemas/VeryComplexType" } } } } }

- selectedMediaType
- 43行目~52行目`selectedSchemaObj`は`<v-select></v-select>`内で選択を変更した際に、13行目に選択したMediaTypeのMediaTypeObject.schemaを渡すために作成。

#### client/components/SchemaObj.vue

- [SchemaObject](https://github.com/OAI/OpenAPI-Specification/blob/master/versions/3.0.2.md#schema-object)を表示させるためのvue。
- SchemaObject内のpropertiesとitemsは、更にその下にSchemaObjectを持つため、componentを再帰的に参照する。
- sample1~4のパターンでデータを持つため、`objectsToShow`でpropertiesを取得するか、items.propertiesを取得するかを判断している。

sample1 typeがない

{ "required": [ "code", "message", ], "properties": { "code": { "type": "string", "example": "" }, "message": { "type": "string" } } }

sample2 type:array

{ "type": "array", "items": { "required": [ "id", "name", "role" ], "properties": { "id": { "type": "number" }, "name": { "type": "string" }, "role": { "type": "string" } } }

sample3 type:object

{ "type": "object", "required": [ "id" ], "properties": { "id": { "type": "string" } } }

sample4 allOf/oneOf/anyOf

{ "allOf": [ { "required": [ "id", "username", "email" ], "properties": { "id": { "type": "number", "example": 777 }, "username": { "type": "string", "example": "Demo User" }, "email": { "type": "string", "example": "demo@tchop.io" } } }, { "type": "object", "required": [ "token" ], "properties": { "settings": { "required": [ "isAppLocked" ], "properties": { "isAppLocked": { "type": "boolean" } ] } } } } }

### Feat(Pages):Add refPath Data
#### client/pages/apiService.vue
`replacedApiDoc`で`"$ref"`は完全に置換してしまっていたが、参照先のモデル名を表示させる必要があるため、`"refPath"`としてプロパティを追加。