Filter

レコードの一覧を絞り込む際に指定する、複雑な検索条件の設定を実装したい。
フィールド定義をもとに自動的に生成できるとよい。
一旦設定した検索条件を保存し、再利用できるようにしたい。

最上部に過去に設定した検索条件を呼び出すドロップダウン
デフォルトの検索条件があれば、初めから表示する
検索条件ドロップダウン追加ボタンを設置し、フィールド選択により検索対象フィールドを指定しつつ設定行を追加表示
設定行は選択されたフィールドに対し、指定可能な比較方法をドロップダウンで選択可能な状態にする
比較方法を入力した後は、比較対象となるデータの入力フィールドを表示

フィールドデータ型と比較方法の組み合わせにおける表示内容

データ型	比較方法	入力コンポーネント	初期値	範囲・選択肢	説明
文字列	等価	テキスト入力
	部分一致	テキスト入力
	選択	ドロップダウン
数値	等価	テキスト入力（数値）
	大小比較	テキスト入力（数値）
	範囲	テキスト入力（数値）
日付	等価	テキスト入力（日付）
	当日				検索実行時の日付を設定する
	過去未来	テキスト入力（日付）
	範囲	テキスト入力（日付） ≦ レコード値＜テキスト入力（日付）
	当月	テキスト入力（数値）	1	1 - 31	検索実行時の当日を含む月を対象とする
	当月	テキスト入力（数値）	1	1 - 31	テキストボックスに値がある場合はその日を開始日とする
	当年	テキストボックス（日付）	4/1		検索実行時の当日を含む年を対象とする
	当年	テキストボックス（日付）	4/1		テキストボックスに値がある場合はその月日を開始日とする
真偽値	等価	チェックボックス

<html>

<label class="col-sm-3 pt-1">
  保存済みの検索条件
</label>
<div class="col-sm-9">
  <select class="form-control input-sm">
    <option>先週完了したタスク</option>
    <option>先月完了したタスク</option>
  </select>
</div>

<div class="col-sm-3">
  <div class="checkbox">
    <label>
      <input type="checkbox">&nbsp;フィールド1
    </label>
  </div>
</div>
<div class="col-sm-3">
  <select class="form-control input-sm">
    <option>等しい</option>
    <option>より大きい</option>
    <option>より小さい</option>
    <option>以上</option>
    <option>以下</option>
  </select>
</div>
<div class="col-sm-3">
  <input type="text" class="form-control input-sm">
</div>
<div class="col-sm-3">
  <input type="text" class="form-control input-sm">
</div>

<div class="col-sm-offset-9 col-sm-3">
  <div class="input-group">
    <select class="form-control input-sm">
      <option>-- フィールド追加 --</option>
      <option>フィールド１</option>
      <option>フィールド２</option>
    </select>
    <span class="input-group-btn">
      <button type="button" class="btn btn-sm btn-primary">追加</button>
    </span>
  </div>
</div>

</html>

<html><style>
h2.page-header {

font-weight: 600;
font-size: 2.4rem;
position: relative;
padding: 10px 0 10px 16px;
margin-top: 3rem !important;
margin-bottom: 2rem !important;

}
h2:before {

  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: #ccc;

}
div#disqus__thread {

width: 100% !important;

}
</style></html>

Filter

要望・要求

仕様

画面と機能

フィールドデータ型と比較方法の組み合わせにおける表示内容

UI 検討