Anujcodecraft / Anujcodecraft/notes-online

## ✨ Feature Request: Add Visual Guidance & Toast Warnings for Filter Dependencies

Đang mở
#24 0 bình luận 0 reaction 0 người được giao Xem trên GitHub
enhancement good first issue ReactJs UI
Ngôn ngữ chính
JavaScript
Star
7
Fork
7
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

### 📋 Description

Currently, `Branch` and `Subject` filters are dependent on `Year` and `Branch` selections respectively — and users **cannot select them until the prerequisite is chosen**, which is good.
**Make sure to implement this in both notes and pyqs page**

However, the UI doesn't clearly indicate that the dropdowns are **disabled for a reason**, and users may not understand what to do next.

---

### ✅ Expected Behavior

- Filters that depend on other selections (`Branch`, `Subject`) should:
- Remain **visible and clickable**
- Show a **toast warning** if clicked too early
- Appear **visually dimmed** or **gray-colored**
- Optionally include a **tooltip or helper text** (e.g., "Select year first")

---

### 🔁 Flow Rules

1. If user tries to select **Branch** without selecting **Year**:
- Show a **toast**: `"Please select a year first"`
- Visually indicate `Branch` dropdown is disabled (gray border or text)
- Allow click (for feedback), but no action taken

2. If user tries to select **Subject** without selecting **Branch**:
- Show a **toast**: `"Please select a branch first"`
- Same visual and feedback pattern

3. Once the required filter is selected:
- Remove gray styling
- Enable actual selection

---

### 🔔 Toast Messages

- `"Please select a year first"` → On clicking Branch too early
- `"Please select a branch first"` → On clicking Subject too early

---

### 🎨 Suggested UI Enhancements

- Use Tailwind to apply:
- `opacity-50 cursor-not-allowed` for disabled look
- `hover:tooltip` or `Select year first`
- Tooltip on hover or info icon using `title=""` or UI library

---

### 📂 Affected Areas

- Filter component logic (e.g., `FilterBar.jsx`, `FilterDropdown.jsx`)
- Possibly shared state from Context or useState chain

---

### 🏷️ Labels

`enhancement` `UX` `frontend` `good first issue`

---

### 🧑‍💻 Ideal For

- Frontend contributors with React + Tailwind experience
- Anyone looking to improve guidance & usability for filter UI

Hướng dẫn đóng góp

Chưa lập chỉ mục được hướng dẫn đóng góp cho kho mã nguồn này

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.