161 lines
No EOL
5.1 KiB
Markdown
161 lines
No EOL
5.1 KiB
Markdown
# Item Interface 完全対応UI - 実装完了
|
||
|
||
## 概要
|
||
|
||
`interface Item` に定義されている全てのフィールドに対応した、完全な確認/編集UIを実装しました。
|
||
|
||
## 実装したフィールド
|
||
|
||
### ✅ 基本情報
|
||
- **id**: システム管理用（自動生成）
|
||
- **name**: 備品名（必須）
|
||
- **label_id**: ラベルID（必須）
|
||
- **model_number**: 型番（任意）
|
||
- **remarks**: 備考（任意、マルチライン）
|
||
|
||
### ✅ 購入・管理情報
|
||
- **purchase_year**: 購入年（数値入力）
|
||
- **purchase_amount**: 購入金額（数値入力、円表示）
|
||
- **durability_years**: 耐用年数（数値入力、年表示）
|
||
- **is_depreciation_target**: 減価償却対象（スイッチ）
|
||
|
||
### ✅ 配列フィールド（新規実装）
|
||
- **connection_names**: 接続名称（動的配列入力）
|
||
- **cable_color_pattern**: ケーブル色パターン（動的配列入力）
|
||
- **storage_locations**: 保管場所（動的配列入力）
|
||
|
||
### ✅ ステータス管理
|
||
- **is_on_loan**: 貸出中フラグ（スイッチ）
|
||
- **is_disposed**: 廃棄済みフラグ（スイッチ）
|
||
- **qr_code_type**: QRコードタイプ（セレクト: qr/barcode/none）
|
||
|
||
### ✅ 画像管理（新規実装）
|
||
- **image_url**: 画像URL（ドラッグ&ドロップアップロード）
|
||
|
||
### ✅ システム情報
|
||
- **created_at**: 作成日時（表示のみ）
|
||
- **updated_at**: 更新日時（表示のみ）
|
||
|
||
## 新規作成したコンポーネント
|
||
|
||
### 1. ArrayInput (`/src/components/ui/ArrayInput.tsx`)
|
||
**機能:**
|
||
- 動的な配列フィールド入力
|
||
- 項目の追加・削除
|
||
- 重複チェック
|
||
- 最大項目数制限
|
||
- Enterキーでの項目追加
|
||
|
||
**使用例:**
|
||
```tsx
|
||
<ArrayInput
|
||
label="接続名称"
|
||
placeholder="例: HDMI、USB-C、電源"
|
||
values={formValues.connection_names || []}
|
||
onChange={(values) => setValue('connection_names', values)}
|
||
maxItems={20}
|
||
/>
|
||
```
|
||
|
||
### 2. ImageUpload (`/src/components/ui/ImageUpload.tsx`)
|
||
**機能:**
|
||
- ドラッグ&ドロップでの画像アップロード
|
||
- プレビュー表示
|
||
- 進捗表示
|
||
- ファイル形式・サイズ制限
|
||
- 画像削除機能
|
||
|
||
**対応形式:** JPEG, PNG, GIF, WebP (最大10MB)
|
||
|
||
## 更新されたページ
|
||
|
||
### 1. ItemForm (`/src/pages/items/ItemForm.tsx`)
|
||
**追加された機能:**
|
||
- 3つのCardセクションに分割
|
||
- 基本情報
|
||
- 接続・配線情報（配列フィールド）
|
||
- 画像アップロード
|
||
- 全フィールドの完全対応
|
||
- 既存データの正確な反映
|
||
|
||
### 2. ItemDetail (`/src/pages/items/ItemDetail.tsx`)
|
||
**追加された機能:**
|
||
- 全フィールドの表示
|
||
- 配列フィールドのChip表示
|
||
- セクション分割による見やすいレイアウト
|
||
- QRコードタイプの適切な表示
|
||
|
||
### 3. ItemsList (`/src/pages/items/ItemsList.tsx`)
|
||
**追加された機能:**
|
||
- 購入年フィールドの追加
|
||
- QRコードタイプのChip表示
|
||
- 保管場所の省略表示（2項目まで+...）
|
||
|
||
## 使用方法
|
||
|
||
### 新規備品登録
|
||
1. 「備品追加」または「新規登録」ボタンをクリック
|
||
2. 基本情報セクションで必須フィールドを入力
|
||
3. 接続・配線情報セクションで配列フィールドを入力（任意）
|
||
4. 画像セクションで画像をアップロード（任意）
|
||
5. 「登録」ボタンで保存
|
||
|
||
### 備品編集
|
||
1. 備品一覧から編集ボタンをクリック
|
||
2. 既存データが全フィールドに自動反映
|
||
3. 必要な修正を実施
|
||
4. 「更新」ボタンで保存
|
||
|
||
### 備品詳細確認
|
||
1. 備品一覧から詳細ボタンをクリック
|
||
2. 全フィールドが整理されて表示
|
||
3. 配列フィールドはChipで視覚的に表示
|
||
4. 画像がある場合は表示
|
||
|
||
## 配列フィールドの操作
|
||
|
||
### 項目追加
|
||
- 入力欄にテキストを入力
|
||
- Enterキーまたは「+」ボタンで追加
|
||
- 重複項目は追加されない
|
||
|
||
### 項目削除
|
||
- 各ChipのXボタンをクリック
|
||
|
||
### 制限
|
||
- **接続名称**: 最大20項目
|
||
- **ケーブル色パターン**: 最大10項目
|
||
- **保管場所**: 最大5項目
|
||
|
||
## 画像アップロード
|
||
|
||
### 対応操作
|
||
- ドラッグ&ドロップ
|
||
- クリックしてファイル選択
|
||
- 既存画像の削除
|
||
|
||
### 制限事項
|
||
- 最大ファイルサイズ: 10MB
|
||
- 対応形式: JPEG, PNG, GIF, WebP
|
||
- 1つの備品につき1つの画像
|
||
|
||
## 技術的特徴
|
||
|
||
### フォーム管理
|
||
- React Hook Formによる効率的な状態管理
|
||
- 個別`setValue`による確実なフィールド更新
|
||
- リアルタイムバリデーション
|
||
|
||
### UI/UX
|
||
- HeroUIコンポーネントによる統一感
|
||
- レスポンシブデザイン
|
||
- 直感的な操作性
|
||
|
||
### データ型対応
|
||
- 文字列フィールド
|
||
- 数値フィールド（適切な型変換）
|
||
- 真偽値フィールド（Switch UI）
|
||
- 配列フィールド（動的追加・削除）
|
||
- 選択式フィールド（Select UI）
|
||
|
||
Itemインターフェースの全フィールドに完全対応した、使いやすく直感的なUIが完成しました！ |