django-search-visualizer 0.1__tar.gz → 0.2__tar.gz

{django_search_visualizer-0.1 → django_search_visualizer-0.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: django-search-visualizer
-Version: 0.1
+Version: 0.2
 Summary: A Django web view for Models data search
 Home-page: https://github.com/filipefraqueiro/django-search-visualizer
 Author: Filipe Fraqueiro

django_search_visualizer-0.2/README.md

@@ -0,0 +1,54 @@
+# django-search-visualizer
+
+A Django web view for Models data search
+
+## How To setup
+
+1. Add the app **django_search_visualizer** to the django **INSTALLED_APPS** in **settings.py**
+
+![howto_setup_1](images/howto_setup_1.png)
+
+2. Include the app urls **django_search_visualizer.urls** in the django main app **urlpatterns** list in **urls.py**
+
+![howto_setup_2](images/howto_setup_2.png)
+
+## How To Use
+
+1. Navigate to **/model-search**
+
+![step_1](images/howto_1.png)
+
+2. Select an App from the existing Apps list
+
+![step_2](images/howto_2.png)
+
+3. Select a Model from the existing Models list
+
+![step_3](images/howto_3.png)
+
+4. Select the fields that you want to see and configure the filters is required
+
+![step_4](images/howto_4.png)
+
+The **Look For** options are the accepted ones by django filters
+
+5. Press "Submit" or "Download" button
+
+![step_5](images/howto_5.png)
+
+6. View the data
+
+![step_6](images/howto_6.png)
+
+7. You can click in the table headers to sort them
+
+![step_7](images/howto_7.png)
+
+## Notes
+
+To use the filter **in** a list is required like:
+["test1", "test2"]
+
+## To Do
+
+- Include an option to plot the data

django_search_visualizer-0.2/django_search_visualizer/admin.py

@@ -0,0 +1,11 @@
+from django.contrib import admin
+
+import django_search_visualizer.models
+
+# Register your models here.
+class testAdmin(admin.ModelAdmin):
+    list_display = ["id", "created", "modified", "field1", "field2"]
+    list_filter = []
+    search_fields = []
+
+admin.site.register(django_search_visualizer.models.test, testAdmin)

django_search_visualizer-0.2/django_search_visualizer/migrations/0001_initial.py

@@ -0,0 +1,25 @@
+# Generated by Django 6.0.1 on 2026-02-06 09:08
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='test',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('created', models.DateTimeField(auto_now_add=True)),
+                ('modified', models.DateTimeField(auto_now=True)),
+                ('field1', models.IntegerField(blank=True, null=True)),
+                ('field2', models.CharField(null=True)),
+                ('field3', models.DateField(auto_now_add=True, null=True)),
+            ],
+        ),
+    ]

django_search_visualizer-0.2/django_search_visualizer/models.py

@@ -0,0 +1,9 @@
+from django.db import models
+
+# Create your models here.
+class test(models.Model):
+    created = models.DateTimeField(null=False, editable=False, auto_now_add=True)
+    modified = models.DateTimeField(null=False, auto_now=True)
+    field1 = models.IntegerField(null=True, blank=True)
+    field2 = models.CharField(null=True, blank=False, choices=None)
+    field3 = models.DateField(null=True, blank=False, auto_now_add=True)

django_search_visualizer-0.2/django_search_visualizer/static/logic.js

@@ -0,0 +1,401 @@
+function sortTable(colIndex, header) {
+    const table = document.getElementById("results_table");
+    const rows = Array.from(table.querySelectorAll("tbody tr"));
+    const isAsc = !header.classList.contains("sorted-asc");
+
+    // Remove previous sort indicators
+    table.querySelectorAll("th").forEach(th => th.classList.remove("sorted-asc", "sorted-desc"));
+
+    // Sort rows
+    rows.sort((a, b) => {
+        let x = a.children[colIndex].innerText.trim();
+        let y = b.children[colIndex].innerText.trim();
+
+        // Convert to numbers if numeric
+        if (!isNaN(x) && !isNaN(y)) { x = Number(x); y = Number(y); }
+
+        // Convert date strings to timestamps
+        if (!isNaN(Date.parse(x)) && !isNaN(Date.parse(y))) {
+            x = new Date(x);
+            y = new Date(y);
+        }
+
+        return isAsc ? (x > y ? 1 : -1) : (x < y ? 1 : -1);
+    });
+
+    // Append sorted rows
+    const tbody = table.querySelector("tbody");
+    rows.forEach(row => tbody.appendChild(row));
+
+    // Set sort class
+    header.classList.add(isAsc ? "sorted-asc" : "sorted-desc");
+}
+
+
+function toggleDarkMode(self) {
+    if (self.checked) {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+        localStorage.setItem("darkMode", true);
+    }
+    else {
+        document.documentElement.setAttribute('data-bs-theme', 'light');
+        localStorage.setItem("darkMode", false);
+    }
+}
+
+
+// load saved setting
+window.onload = function () {
+    if (localStorage.getItem("darkMode") === "true") {
+        document.documentElement.setAttribute('data-bs-theme', 'dark');
+        document.getElementById("darkModeToggle").checked = true;
+    }
+
+    document.getElementById("select_all").addEventListener("change", function () {
+        const fields_table = document.getElementById("fields_table");
+        const fields_cbs = Array.from(fields_table.getElementsByClassName("field_checkbox"));
+        fields_cbs.forEach(element => {
+            element.checked = this.checked;
+        });
+    });
+};
+
+
+async function updateModels() {
+    const app = document.getElementById("appSelect").value;
+
+    if (!app) return;
+
+    const response = await fetch(`/get-app-models?app=${app}`);
+    const data = await response.json();
+
+    const select_all = document.getElementById("select_all");
+    select_all.checked = false;
+
+    const fields_table = document.getElementById("fields_table");
+    fields_table.tHead.innerHTML = "";
+    fields_table.tBodies[0].innerHTML = "";
+
+    const results_count = document.getElementById("results_count");
+    results_count.innerHTML = "Results: ";
+
+    const results_cmd = document.getElementById("results_cmd");
+    results_cmd.innerHTML = "Command: ";
+
+    const results_table = document.getElementById("results_table");
+    results_table.tHead.innerHTML = "";
+    results_table.tBodies[0].innerHTML = "";
+
+    if (data.models) {
+        const modelSelect = document.getElementById("modelSelect");
+        modelSelect.innerHTML = ""
+
+        const opt = document.createElement("option");
+        opt.value = "";
+        opt.textContent = "-- Select Model --";
+        modelSelect.appendChild(opt);
+
+        data.models.forEach((model, i) => {
+            const opt = document.createElement("option");
+            opt.value = model.toLowerCase();
+            opt.textContent = model;
+            modelSelect.appendChild(opt);
+        });
+    }
+}
+
+
+async function updateFields() {
+    const app = document.getElementById("appSelect").value;
+    const model = document.getElementById("modelSelect").value;
+
+    if (!model) return;
+
+    const response = await fetch(`/get-model-fields?app=${app}&model=${model}`);
+    const data = await response.json();
+
+    const select_all = document.getElementById("select_all");
+    select_all.checked = false;
+
+    const results_count = document.getElementById("results_count");
+    results_count.innerHTML = "Results: ";
+
+    const results_table = document.getElementById("results_table");
+    results_table.tHead.innerHTML = "";
+    results_table.tBodies[0].innerHTML = "";
+
+    if (data.fields) {
+        const fields_table = document.getElementById("fields_table");
+        fields_table.tHead.innerHTML = "";
+        fields_table.tBodies[0].innerHTML = "";
+        fields_table.border = "1";
+        fields_table.style.borderCollapse = "collapse";
+        fields_table.style.marginTop = "10px";
+
+        tr = document.createElement("tr");
+
+        cell = document.createElement("th");
+        cell.style.padding = "6px 10px";
+        cell.textContent = "Fields";
+        tr.appendChild(cell);
+
+        cell = document.createElement("th");
+        cell.style.padding = "6px 10px";
+        cell.textContent = "Look For";
+        tr.appendChild(cell);
+
+        cell = document.createElement("th");
+        cell.style.padding = "6px 10px";
+        cell.textContent = "Look For Case";
+        tr.appendChild(cell);
+
+        fields_table.tHead.appendChild(tr);
+
+        data.fields.forEach((f, i) => {
+            var tr = document.createElement("tr");
+
+            // create the field cell
+            var cb = document.createElement("input");
+            cb.type = "checkbox";
+            cb.name = f;
+            cb.id = f;
+            cb.classList.add("field_checkbox");
+            cb.classList.add("form-check-input");
+
+            var lb = document.createElement("label");
+            lb.for = f;
+            lb.innerText = "-".repeat(f.split("__").length - 1) + f + " (" + data.fields_types[i] + ")";
+            lb.classList.add("form-check-label");
+
+            var div = document.createElement("div");
+            div.classList.add("form-check");
+            div.appendChild(cb);
+            div.appendChild(lb);
+
+            var cell = document.createElement("td");
+            cell.style.padding = "6px 10px";
+            cell.appendChild(div);
+            tr.appendChild(cell);
+
+            // create the look for case cell
+            const select = document.createElement("select");
+            select.id = "case_select";
+            select.classList.add("form-select");
+
+            const field_look_ups = ["", "contains", "icontains", "date", "day", "endswith", "iendswith", "exact", "iexact", "in", "isnull", "gt", "gte", "hour", "lt", "lte", "minute", "month", "quarter", "range", "regex", "iregex", "second", "startswith", "istartswith", "time", "week", "week_day", "iso_week_day", "year", "iso_year"];
+
+            field_look_ups.forEach(item => {
+                const opt = document.createElement("option");
+                opt.value = item.toLowerCase();
+                opt.textContent = item;
+                select.appendChild(opt);
+            });
+
+            cell = document.createElement("td");
+            cell.style.padding = "6px 10px";
+            cell.appendChild(select);
+            tr.appendChild(cell);
+
+            // create the look for cell
+            var look_for = document.createElement("input");
+            look_for.type = "text";
+            look_for.classList.add("form-control");
+
+            cell = document.createElement("td");
+            cell.style.padding = "6px 10px";
+            cell.appendChild(look_for);
+            tr.appendChild(cell);
+
+            // append the new row
+            fields_table.tBodies[0].appendChild(tr);
+        });
+
+    } else {
+        fieldList.innerHTML = `<li>No fields found</li>`;
+    }
+}
+
+
+async function get_data(download, page = 1) {
+    const app = document.getElementById("appSelect").value;
+    const model = document.getElementById("modelSelect").value;
+    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+
+    if (!model) return;
+
+    body = {
+        "app": app,
+        "model": model,
+        "fields": tableToJson("fields_table"),
+        "page": page,
+    }
+    // console.log(body);
+
+    if (download) {
+        const response = await fetch("/download-model-data", {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+            body: JSON.stringify(body)
+        });
+
+        if (!response.ok) {
+            console.log(`Response status: ${response.status}`);
+        }
+
+        const data = await response.text();
+
+        if (data) {
+            const filename = model + "_" + Date.now();
+            downloadCSV(data, filename);
+        } else {
+            const results = document.getElementById("results");
+            results.innerHTML = `<li>Error</li>`;
+        }
+    }
+    else {
+        const response = await fetch("/get-model-data", {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json', 'X-CSRFToken': csrfToken },
+            body: JSON.stringify(body)
+        });
+
+        if (!response.ok) {
+            console.log(`Response status: ${response.status}`);
+        }
+
+        const data = await response.json();
+
+        const results_count = document.getElementById("results_count");
+        results_count.innerHTML = "Results: ";
+
+        const results_cmd = document.getElementById("results_cmd");
+        results_cmd.innerHTML = "Command: ";
+
+        const results_table = document.getElementById("results_table");
+        results_table.tHead.innerHTML = "";
+        results_table.tBodies[0].innerHTML = "";
+
+        const first_page = document.getElementById("first_page");
+        first_page.innerHTML = "";
+        const first_page_link = document.getElementById("first_page_link");
+        const previous_page = document.getElementById("previous_page");
+        previous_page.innerHTML = "";
+        const previous_page_link = document.getElementById("previous_page_link");
+        const current_page = document.getElementById("current_page");
+        current_page.innerHTML = "";
+        const current_page_link = document.getElementById("current_page_link");
+        const next_page = document.getElementById("next_page");
+        next_page.innerHTML = "";
+        const next_page_link = document.getElementById("next_page_link");
+        const last_page = document.getElementById("last_page");
+        last_page.innerHTML = "";
+        const last_page_link = document.getElementById("last_page_link");
+
+        if (data.count) {
+            results_count.innerHTML = "Results: " + data.count;
+        }
+
+        if (data.cmd) {
+            results_cmd.innerHTML = "Command: " + data.cmd;
+        }
+
+        if (data.pagination) {
+            // console.log(data.pagination);
+            first_page.innerHTML = 1;
+            first_page_link.setAttribute("onclick", "get_data(false, " + 1 + ")")
+            previous_page.innerHTML = data.pagination.previous_page_number;
+            previous_page_link.setAttribute("onclick", "get_data(false, " + data.pagination.previous_page_number + ")")
+            current_page.innerHTML = data.pagination.page_num;
+            current_page_link.setAttribute("onclick", "get_data(false, " + data.pagination.page_num + ")")
+            next_page.innerHTML = data.pagination.next_page_number;
+            next_page_link.setAttribute("onclick", "get_data(false, " + data.pagination.next_page_number + ")")
+            last_page.innerHTML = data.pagination.num_pages;
+            last_page_link.setAttribute("onclick", "get_data(false, " + data.pagination.num_pages + ")")
+        }
+
+        if (data.results) {
+            results_table.border = "1";
+            results_table.style.borderCollapse = "collapse";
+            results_table.style.marginTop = "10px";
+
+            data.results.forEach((row, i) => {
+                var tr = document.createElement("tr");
+
+                row.forEach((col, j) => {
+                    if (i === 0) {
+                        var cell = document.createElement("th");
+                        cell.addEventListener("click", () => sortTable(j, cell));
+                        cell.textContent = col;
+                        cell.style.padding = "6px 10px";
+                        tr.appendChild(cell);
+                        results_table.tHead.appendChild(tr);
+                    }
+                    else {
+                        var cell = document.createElement("td");
+                        cell.textContent = col;
+                        cell.style.padding = "6px 10px";
+                        tr.appendChild(cell);
+                        results_table.tBodies[0].appendChild(tr);
+                    }
+                });
+            });
+        } else {
+            console.log("Error");
+        }
+    }
+}
+
+
+function downloadCSV(data, filename) {
+    const blob = new Blob([data], { type: "text/csv" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    a.click();
+    URL.revokeObjectURL(url);
+}
+
+
+function tableToJson(tableId) {
+    const table = document.getElementById(tableId);
+    const data = {};
+
+    const headers = Array.from(table.querySelectorAll("thead th")).map(th => th.textContent.trim());
+
+    const rows = table.querySelectorAll("tbody tr");
+
+    rows.forEach(row => {
+        const rowData = {};
+        const cells = row.querySelectorAll("td");
+
+        cells.forEach((cell, i) => {
+            const input = cell.getElementsByTagName("input");
+            const select = cell.getElementsByTagName("select");
+
+            if (input.length > 0) {
+                if (input[0].type == "checkbox") {
+                    field = input[0].name;
+                    rowData["checked"] = input[0].checked;
+                }
+                else if (input[0].type == "text") {
+                    rowData["look_for"] = input[0].value;
+                }
+            }
+            else if (select.length > 0) {
+                rowData["case"] = select[0].value;
+            }
+        });
+
+        data[field] = rowData;
+    });
+
+    return data;
+}
+
+
+document.addEventListener("keydown", function (event) {
+    if (event.key === "Enter") {
+        document.getElementById("submit").click();
+    }
+});

django_search_visualizer-0.2/django_search_visualizer/templates/model_search.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html  data-bs-theme="light">
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Django Search Visualizer</title>
+
+    <!-- bootstrap 5 -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
+
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
+        crossorigin="anonymous"></script>
+
+    {% load static %}
+
+    <script type="text/javascript" src="{% static "logic.js" %}"></script>
+
+    <style>
+        th {
+            cursor: pointer;
+        }
+
+        th.sorted-asc::after {
+            content: " ▲";
+        }
+
+        th.sorted-desc::after {
+            content: " ▼";
+        }
+    </style>
+</head>
+
+<body class="container" id="pageBody">
+    <br>
+    <input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token }}">
+
+    <div>
+        <div class="row">
+            <div class="col">
+                <h5>Select an APP:</h5>
+                <select class="form-select" aria-label="appSelect" id="appSelect" onclick="updateModels()">
+                    <option value="">-- Select APP --</option>
+                    {% for a in apps %}
+                    <option value="{{ a }}">{{ a }}</option>
+                    {% endfor %}
+                </select>
+            </div>
+
+            <div class="col">
+                <h5>Select a Model:</h5>
+                <select class="form-select" aria-label="modelSelect" id="modelSelect" onclick="updateFields()">
+                    <option value="">-- Select Model --</option>
+                </select>
+            </div>
+        </div>
+    </div>
+
+    <br>
+
+    <div>
+        <div class="row">
+            <div class="col">
+                <h5>Select Fields:</h5>
+                <div class="form-check">
+                    <input class="form-check-input" type="checkbox" id="select_all">
+                    <label class="form-check-label" for="select_all">
+                        Select All Fields
+                    </label>
+                </div>
+
+                <div id="fields"></div>
+
+                <table class="table" id="fields_table">
+                    <thead></thead>
+                    <tbody></tbody>
+                </table>
+            </div>
+
+            <div class="col">
+                <h5>Choose an Action:</h5>
+                <div class="row">
+                    <div class="col">
+                        <button type="button" class="btn btn-primary" style="width: 100%;" onclick="get_data(false)"
+                            id="submit">Submit</button>
+                    </div>
+                    <div class="col">
+                        <button type="button" class="btn btn-primary" style="width: 100%;" onclick="get_data(true)"
+                            id="download">Download</button>
+                    </div>
+                </div>
+                <br>
+                <h5 id="results_count">Results:</h5>
+                <br>
+                <h5 id="results_cmd">Command:</h5>
+                <br>
+                <h5 id="results_error">Error:</h5>
+            </div>
+        </div>
+    </div>
+
+    <br>
+
+    <table class="table table-striped" id="results_table">
+        <thead></thead>
+        <tbody></tbody>
+    </table>
+
+    <div id="pagination">
+        <div class="row">
+            <div class="col">
+                <a role="button" onclick="get_data(false, 1)" id="first_page_link">
+                    <p>First Page: <b id="first_page"></b></p>
+                </a>
+            </div>
+            <div class="col">
+                <a role="button" onclick="get_data(false, 1)" id="previous_page_link">
+                    <p>Previous Page: <b id="previous_page"></b></p>
+                </a>
+            </div>
+            <div class="col">
+                <a role="button" onclick="get_data(false, 1)" id="current_page_link">
+                    <p>Current Page: <b id="current_page"></b></p>
+                </a>
+            </div>
+            <div class="col">
+                <a role="button" onclick="get_data(false, 1)" id="next_page_link">
+                    <p>Next Page: <b id="next_page"></b></p>
+                </a>
+            </div>
+            <div class="col">
+                <a role="button" onclick="get_data(false, 1)" id="last_page_link">
+                    <p>Last Page: <b id="last_page"></b></p>
+                </a>
+            </div>
+        </div>
+
+        <br>
+
+        <!-- Dark Mode Toggle -->
+        <div class="form-check">
+            <input class="form-check-input" type="checkbox" id="darkModeToggle" onclick="toggleDarkMode(this)">
+            <label class="form-check-label" for="darkModeToggle">
+                Dark Mode
+            </label>
+        </div>
+
+        <br>
+        <br>
+</body>
+
+<script>
+    
+</script>
+
+</html>

django_search_visualizer-0.2/django_search_visualizer/urls.py

@@ -0,0 +1,11 @@
+from django.urls import path
+
+from django_search_visualizer import views
+
+urlpatterns = [
+    path("model-search", views.model_search, name="model_search"),
+    path("get-app-models", views.get_app_models, name="get_app_models"),
+    path("get-model-fields", views.get_model_fields, name="get_model_fields"),
+    path("get-model-data", views.get_model_data, name="get_model_data"),
+    path("download-model-data", views.download_model_data, name="download_model_data"),
+]