index.js

import "./style.css";
import render from "@k2works/full-stack-lab";

const mindmap = `
@startmindmap
* 非機能要件
-- ユースケース
--- 実行履歴一覧
--- 実行履歴検索
--- 実行履歴詳細
--- データダウンロード
-- ドメインモデル
--- 実行履歴一覧
--- 実行履歴
--- ユーザー
--- 社員
-- データモデル
--- 実行履歴
--- ユーザー
** ユーザーインターフェース
*** ビュー
**** 実行履歴一覧
**** 実行履歴詳細
**** 実行履歴検索
**** ダウンロード
*** モデル
**** ナビゲーション
**** 実行履歴一覧
**** 実行履歴
**** 実行履歴検索
**** ダウンロード
*** インタラクション
**** ナビゲーション
**** 実行履歴一覧
**** 実行履歴
**** 実行履歴検索
**** ダウンロード

@endmindmap
`;

const contents = `
## 非機能要件

- 楽観ロックによる排他制御
- アプリケーション実行履歴
- アプリケーションデータのダウンロード

## TODOリスト

- [x] 楽観ロックによる排他制御
   - [x] DBスキーマ変更
   - [x] ロック処理の実装
- [x] アプリケーション実行履歴 
   - [x] API作成
   - [x] UI作成
- [x] アプリケーションデータのダウンロード
   - [x] API作成
   - [x] UI作成

`;

const usecase = `
@startuml
left to right direction
actor "管理者" as admin
actor "ユーザー" as user
rectangle 非機能要件 {
   rectangle アプリケーション実行履歴 {
       (実行履歴一覧)
       (実行履歴検索)
       (実行履歴詳細)
   }
   rectangle アプリケーションデータのダウンロード {
       (データダウンロード)
   }
}

admin --> (実行履歴一覧)
admin --> (実行履歴検索)
admin --> (実行履歴詳細)
admin --> (データダウンロード)
user --> (実行履歴一覧)
user --> (実行履歴検索)
user --> (データダウンロード)

@enduml
`;

const uml = `
@startuml
class 実行履歴一覧
class 実行履歴
class ユーザー
class 社員

実行履歴一覧 *- 実行履歴
実行履歴 *-- ユーザー
ユーザー o- 社員

@enduml
`;

const erd = `
@startuml

entity 実行履歴 {
    + id [PK]
    --
    + 実行日時
    + 実行内容
    + ユーザーid [FK]
    }
entity ユーザー {
    + id [PK]
    --
    + 名前
    + メールアドレス
    }
    
実行履歴 ||--o{ ユーザー
@enduml
`;

const ui = `
@startsalt

{+
  実行履歴画面（コレクション）
  {+
     {
      ホーム
      ユーザー
      マスタ
      ログアウト
      } |
      {
        {
          <b>実行履歴一覧</b>
          [ 検索 ]
        }

        [ 一括削除  ]
        ---------------------
        {
          処理1  | user1  | [ 詳細 ] | [ 削除 ]
          処理2  | user1  | [ 詳細 ] | [ 削除 ]
          処理3  | user2  | [ 詳細 ] | [ 削除 ]
        }
      }
  }
  ----------------
  実行履歴画面（シングル）
  {+
      {
        ---------------------
        処理名　    | "1xxxxxx"   "
        開始        | "2021/01/01"
        終了        | "9999/12/31"
        実行者      | "user1    "
        備考        | "          "
      }
  }
  ----------------
  実行履歴検索画面（シングル）
  {+
      {
      [ 検索 ]
        ---------------------
        ^処理名^ 
        ^区分^ 
      }
  }
  ----------------
  ダウンロード画面（シングル）
  {+
      {
        [ 実行 ]
        ---------------------
        ^ダウンロード対象^ 機能 1^ 機能 2^ 
      }
  }
}

@endsalt
`;

const uiModel = `
@startuml
  class 実行履歴一覧 {
    検索()
    一括削除()
    詳細()
    削除()
  }
  
  class 実行履歴 {
  }
  
  class 実行履歴検索 {
    検索()
  }
  
  class ダウンロード {
    実行()
  }

  class ナビゲーション {
    ホーム()
    マスタ()
    ユーザー()
    ログアウト()
  }

  ナビゲーション -* 実行履歴一覧
  実行履歴一覧 *-- 実行履歴
  実行履歴一覧 *- 実行履歴検索
  ダウンロード *- ナビゲーション
@enduml
`;

const uiInteraction = `
@startuml
  ログイン_シングル --> 実行履歴_コレクション
    実行履歴_コレクション --> 実行履歴_シングル
    実行履歴_シングル --> 実行履歴_コレクション
    実行履歴_コレクション --> 実行履歴検索_シングル
    実行履歴検索_シングル --> 実行履歴_コレクション
  ログイン_シングル <-- 実行履歴_コレクション
  ログイン_シングル --> ダウンロード_シングル
    ダウンロード_シングル --> ログイン_シングル
  ログイン_シングル <-- ダウンロード_シングル
@enduml
`;

const mode = "APP"; // "UI" or "API" or "DOC"
render({ mindmap, contents, ui, uiModel, uiInteraction, usecase, uml, erd, mode });