前回までの概要
前前回まででタスク管理アプリの大枠が出来ました。
前回からはブラッシュアップを開始。
今回はWBS、ガントチャート画面をブラッシュアップします。
プロンプト
wbs表示画面の表示をブラッシュアップしたい
縦軸が各タスク、横軸が期間で表示できるように 目視しやすいよう、期間を図で表現したい
回答
GanttRow.cs
namespace TaskManager.Domain
{
public class GanttRow
{
public string TaskName { get; set; }
public DateTime StartDate { get; set; }
public DateTime EndDate { get; set; }
public int Level { get; set; }
}
}
WbsService.cs 修正版
階層をフラット化。
using TaskManager.Domain;
namespace TaskManager.Services
{
public class WbsService
{
public List<GanttRow> BuildRows(
List<TaskItem> tasks)
{
var rows = new List<GanttRow>();
foreach (var task in tasks)
{
AddRow(rows, task, 0);
}
return rows;
}
private void AddRow(
List<GanttRow> rows,
TaskItem task,
int level)
{
rows.Add(new GanttRow
{
TaskName = task.Title,
StartDate = task.StartDate,
EndDate = task.EndDate,
Level = level
});
foreach (var child in task.Children)
{
AddRow(rows, child, level + 1);
}
}
}
}
新しい WbsForm.cs
重要部分です。
using TaskManager.Domain;
using TaskManager.Services;
namespace TaskManager.Forms
{
public partial class WbsForm : Form
{
private readonly TaskService _taskService;
private readonly WbsService _wbsService =
new();
public WbsForm(TaskService taskService)
{
InitializeComponent();
_taskService = taskService;
InitializeGrid();
LoadWbs();
}
private void InitializeGrid()
{
dgvWbs.Columns.Clear();
dgvWbs.RowHeadersVisible = false;
dgvWbs.AllowUserToAddRows = false;
dgvWbs.ReadOnly = true;
dgvWbs.AllowUserToResizeRows = false;
dgvWbs.SelectionMode =
DataGridViewSelectionMode.CellSelect;
dgvWbs.MultiSelect = false;
dgvWbs.AutoSizeColumnsMode =
DataGridViewAutoSizeColumnsMode.None;
dgvWbs.DefaultCellStyle.Alignment =
DataGridViewContentAlignment.MiddleCenter;
dgvWbs.ColumnHeadersDefaultCellStyle.Alignment =
DataGridViewContentAlignment.MiddleCenter;
// タスク列
dgvWbs.Columns.Add(
"TaskName",
"タスク");
dgvWbs.Columns["TaskName"].Width = 250;
dgvWbs.Columns["TaskName"].DefaultCellStyle.Alignment =
DataGridViewContentAlignment.MiddleLeft;
// 開始日
dgvWbs.Columns.Add(
"StartDate",
"開始");
dgvWbs.Columns["StartDate"].Width = 90;
// 終了日
dgvWbs.Columns.Add(
"EndDate",
"終了");
dgvWbs.Columns["EndDate"].Width = 90;
}
private void LoadWbs()
{
var rows =
_wbsService.BuildRows(
_taskService.GetAll());
if (rows.Count == 0)
{
return;
}
DateTime min =
rows.Min(x => x.StartDate);
DateTime max =
rows.Max(x => x.EndDate);
int days =
(max - min).Days + 1;
// 日付列追加
for (int i = 0; i < days; i++)
{
DateTime day = min.AddDays(i);
var column = new DataGridViewTextBoxColumn();
column.Name =
day.ToString("yyyyMMdd");
column.HeaderText =
day.ToString("MM/dd");
column.Width = 50;
column.SortMode =
DataGridViewColumnSortMode.NotSortable;
column.Resizable =
DataGridViewTriState.False;
dgvWbs.Columns.Add(column);
}
// 行追加
foreach (var row in rows)
{
int index =
dgvWbs.Rows.Add();
var gridRow =
dgvWbs.Rows[index];
gridRow.Cells[0].Value =
new string(' ', row.Level * 4)
+ row.TaskName;
gridRow.Cells[1].Value =
row.StartDate.ToString("yyyy/MM/dd");
gridRow.Cells[2].Value =
row.EndDate.ToString("yyyy/MM/dd");
// 期間塗りつぶし
for (DateTime d = row.StartDate;
d <= row.EndDate;
d = d.AddDays(1))
{
int col =
3 + (d - min).Days;
gridRow.Cells[col].Style.BackColor =
Color.SkyBlue;
}
}
}
}
}
新しい WbsForm.Designer.cs
namespace TaskManager.Forms
{
partial class WbsForm
{
private System.ComponentModel.IContainer components = null;
private DataGridView dgvWbs;
protected override void Dispose(bool disposing)
{
if (disposing &&
(components != null))
{
components.Dispose();
}
base.Dispose(disposing);
}
private void InitializeComponent()
{
dgvWbs = new DataGridView();
((System.ComponentModel.ISupportInitialize)
dgvWbs).BeginInit();
SuspendLayout();
// dgvWbs
dgvWbs.ColumnHeadersHeightSizeMode =
DataGridViewColumnHeadersHeightSizeMode
.AutoSize;
dgvWbs.Dock = DockStyle.Fill;
dgvWbs.Location =
new Point(0, 0);
dgvWbs.Name =
"dgvWbs";
dgvWbs.RowTemplate.Height =
25;
dgvWbs.Size =
new Size(1200, 600);
// WbsForm
AutoScaleDimensions =
new SizeF(7F, 15F);
AutoScaleMode =
AutoScaleMode.Font;
ClientSize =
new Size(1200, 600);
Controls.Add(dgvWbs);
Name = "WbsForm";
Text = "WBS";
WindowState =
FormWindowState.Maximized;
((System.ComponentModel.ISupportInitialize)
dgvWbs).EndInit();
ResumeLayout(false);
}
}
}
実装、起動確認
実際に実装、動かしてみるとこうなります。
一気にそれっぽくなりました。
まとめ
WBSもわかりやすくなったため、一気に実用的になりました。
次回以降もブラッシュアップしていきます。
