https://github.com/thekiranmahajan/ctrlb-query-filter-builder
Query Filter Builder is a dynamic search bar application for filtering logs using specific queries. Built with React, Vite, Tailwind CSS, it allows users to create and manage complex query conditions with ease.
https://github.com/thekiranmahajan/ctrlb-query-filter-builder
fontawesome6 javascript reactjs tailwindcss vitejs
Last synced: about 1 month ago
JSON representation
Query Filter Builder is a dynamic search bar application for filtering logs using specific queries. Built with React, Vite, Tailwind CSS, it allows users to create and manage complex query conditions with ease.
- Host: GitHub
- URL: https://github.com/thekiranmahajan/ctrlb-query-filter-builder
- Owner: thekiranmahajan
- Created: 2024-06-12T05:03:02.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-06-14T04:17:09.000Z (11 months ago)
- Last Synced: 2025-01-27T14:52:18.153Z (3 months ago)
- Topics: fontawesome6, javascript, reactjs, tailwindcss, vitejs
- Language: JavaScript
- Homepage: https://ctrlb-query-filter-builder.vercel.app
- Size: 125 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Query Filter Builder
This project is a Query Filter Builder UI built using React, Vite, Tailwind CSS, and FontAwesome. It allows users to create and manage query filters by selecting attributes, operations, and values. Users can interact with the UI through mouse clicks or keyboard navigation (arrow keys).
## Features
- **Attribute Selection**: Users can select an attribute from a dropdown list.
- **Operation Selection**: After selecting an attribute, users can select an operation from a dropdown list.
- **Value Input**: Users can input a specific value for the selected attribute and operation.
- **Triplet Display**: Selected queries are displayed as triplets (attribute-operation-value) with the ability to remove any triplet.
- **Keyboard Navigation**: Users can navigate through dropdown options using up and down arrow keys.
- **Dropdown Toggle**: Dropdown can be toggled by clicking the input field or the magnifying glass icon.
## Preview
## Live Demo
https://ctrlb-query-filter-builder.vercel.app/
## Additional Functionalities
- **Arrow Key Navigation**: Users can navigate dropdown options using up and down arrow keys.
- **Input Focus**: The input field focuses automatically when required.
- **Dynamic Dropdown Options**: Options are filtered based on the current step (attribute, operation, or value).
## Tech Stack
- **React**
- **Vite**
- **Tailwind CSS**
- **FontAwesome**
## Setup Instructions
### Installation
1. **Clone the repository:**
```bash
git clone https://github.com/thekiranmahajan/ctrlb-query-filter-builder
cd ./ctrlb-query-filter-builder
```
2. **Install dependencies:**
```bash
npm install
```
3. **Start the development server:**
```bash
npm run dev
```
4. **Open your browser and navigate to:**
```plaintext
http://localhost:5173
```
## Folder Structure
```
CTRLB-QUERY-FILTER-BUILDER
├── node_modules/
├── src/
│ ├── components/
│ │ ├── Dropdown.jsx
│ │ ├── index.js
│ │ ├── SearchBar.jsx
│ │ ├── TripletFilter.jsx
│ ├── utils/
│ │ ├── constants.js
│ ├── App.jsx
│ ├── index.css
│ ├── main.jsx
├── .eslintrc.cjs
├── .gitignore
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── tailwind.config.js
├── vite.config.js
```
## Usage
1. **Select Attribute**: Click on the input field and select an attribute from the dropdown list.
2. **Select Operation**: After selecting an attribute, choose an operation from the dropdown list.
3. **Input Value**: Type a value for the selected attribute and operation.
4. **Add Query**: Press "Enter" to add the query as a triplet. Repeat the process to add more queries.
5. **Remove Query**: Click the cross icon next to any triplet to remove it.
## Conclusion
This Query Filter Builder UI provides a user-friendly interface to create and manage query filters. It includes keyboard navigation and dynamic dropdown options for an enhanced user experience. Despite a few known bugs, it offers a robust solution for log management systems.