Anujcodecraft / Anujcodecraft/notes-online

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

Offen
#24 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
enhancement good first issue ReactJs UI
Vorherrschende Sprache
JavaScript
Sterne
7
Forks
7
PR-Merge-Kennzahlen
Keine gemergten PRs in 30 T.

Beschreibung

### 📋 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

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.