Repository files navigation

scaffdog を用いて高速に管理画面を開発するためのテンプレートプロジェクトです。

Next.js, Mantine UI, Zustand を主に利用しています。

1. 一覧画面

コンテンツの一覧画面です。URLSearchParams と連動した検索フォーム、ページネーションがついています。

1. 詳細画面

コンテンツの詳細（編集）画面です。編集のためのフォーム、フォームと連動したプレビューがついています。プロパティに合わせてインプットをカスタマイズして生成できます。

3. 新規作成画面

コンテンツの新規作成画面です。内容は詳細画面とほぼ同じですが、詳細画面とは別に/[model]/new のパスでページを用意しています。

scaffdog を利用して管理画面を開発する際の手順について説明します。

この手順はあくまでデフォルトの設定で標準的なコンテンツの管理画面を生成する場合の手順です。プロジェクトの要件に合わせてテンプレートをカスタマイズしたり、手動でコードを追加したりしてください。

Artist というコンテンツを管理する場合を例に説明します。

まず、scaffold コマンドを用いて Artist の一覧・新規作成・詳細画面の大部分を作成します。scaffold コマンドは複数の scaffdog テンプレートを一括で実行するシェルスクリプトを実行します。

# $1: モデル名# $2: パス名# $3: 呼称pnpm scaffold artist artists アーティスト

1.で生成した空のモデルにプロパティを追加しましょう(※1)。

Artist　のプロパティに合わせて form-input テンプレートを利用することで、詳細画面が大方完成します(※2)。

例えば、Artist に下記のプロパティの入力が必要な場合、

exporttypeArtist={name:string;iconUrl:string;tags:string[];authorized:boolean;};

下記のコマンドを実行することで、詳細画面のフォームに各種インプットが追加されます。コマンドはnr gen で対話式に実行することもできます。

# namepnpmexec scaffdog generate form-input-text -f --answer"property:name" --answer"required:true" --output"/model/artist/components/form-with-preview"# iconUrlpnpmexec scaffdog generate form-input-text -f --answer"property:iconUrl" --answer"required:true" --output"/model/artist/components/form-with-preview"# tagspnpmexec scaffdog generate form-input-tags -f --answer"property:tags" --answer"required:true" --output"/model/artist/components/form-with-preview"# authorizedpnpmexec scaffdog generate form-input-switch -f --answer"property:authorized" --answer"required:true" --output"/model/artist/components/form-with-preview"

あとは各種インプットのラベルやディスクリプション、バリデーションなどを編集してください。

(※1) 「管理名称」プロパティはモデルを生成した時点で自動的に追加されます。プロジェクトに必要ない場合は適宜削除してください。

(※2) デフォルトではInjection 箇所に一部手作業が発生します。

一覧の検索フォームについても、search-inputテンプレートを用いて追加することができます。

# タグ検索を追加pnpmexec scaffdog generate search-input-checkbox -f --answer"property:tags" --output"/model/artists/components/list/search"

詳細フォームと同様にラベルやディスクリプションを編集してください。

その他デフォルトで利用できるテンプレートについては.scaffdog/ を参照してください。

src/ 配下にapp/,common/,model/ を配置しており、例えば Artist の管理画面を開発する場合には各種モジュールがmodel/artist/ に配置されます。詳細はmodel/artist/ を御覧ください。