harshit.pathak
/
content_quality_tool


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431
							<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Column Mapping</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"/>
<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>
<style>
    .mapping-container {
        max-width: 1000px;
        margin: 30px auto;
        background: #fff;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .drag-item {
        padding: 10px;
        margin: 5px 0;
        background: #f1f1f1;
        border-radius: 4px;
        cursor: grab;
    }
    .drop-zone {
        min-height: 50px;
        padding: 10px;
        border: 2px dashed #ccc;
        border-radius: 4px;
        margin-bottom: 10px;
        background: #fafafa;
    }
    .drop-zone.hover {
        border-color: #007bff;
        background: #e9f5ff;
    }
    .preview-table {
        margin-top: 20px;
    }
</style>
</head>
<body>
<div class="mapping-container">
    <h3 class="text-center mb-4">Attribute Extraction File Upload Setting</h3>
    <!-- File Upload -->
    <div class="mb-3">
        <label for="fileUpload" class="form-label">Upload CSV File</label>
        <input type="file" class="form-control" id="fileUpload" accept="*">
    </div>
    <div class="row">
        <!-- Uploaded Columns -->
        <div class="col-md-5">
            <h5>Uploaded Columns</h5>
            <div id="uploaded-columns">
                <!-- Draggable items -->
            </div>
        </div>
        <!-- System Columns -->
        <div class="col-md-7">
            <h5>System Columns</h5>
            <div id="system-columns">
                <!-- Drop zones -->
            </div>
        </div>
    </div>

    <!-- Preview Section -->
    <!-- <div class="preview-table">
        <h5>Preview Data</h5>
        <table class="table table-bordered">
            <thead>
                <tr id="preview-header"></tr>
            </thead>
            <tbody id="preview-body"></tbody>
        </table>
    </div> -->

    <div class="text-end mt-3">
        <button class="btn btn-secondary" id="resetBtn">Reset</button>
        <button class="btn btn-primary" id="saveBtn">Save Mapping</button>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
const uploadedColumns = [];
const systemColumns = ["PRODUCT NAME", "ITEM ID", "PRODUCT TYPE", "Product Short Description", "Product Long Description", "image_path"];
const previewData = [
    // {Name: "John", Email: "john@example.com", Phone: "1234567890", Address: "NY"},
    // {Name: "Alice", Email: "alice@example.com", Phone: "9876543210", Address: "LA"}
];

$(document).ready(function() {
    // Populate draggable uploaded columns
    uploadedColumns.forEach(col => {
        $("#uploaded-columns").append(`<div class="drag-item" draggable="true" data-col="${col}">${col}</div>`);
    });

    // Populate drop zones for system columns
    systemColumns.forEach(col => {
        $("#system-columns").append(`<div class="drop-zone" data-system="${col}">${col}</div>`);
    });


    // Handle file upload
    // $("#fileUpload").on("change", function(e) {
    //     const file = e.target.files[0];
    //     if (!file) return;

    //     const reader = new FileReader();
    //     reader.onload = function(event) {
    //         const text = event.target.result;
    //         const rows = text.split("\n").map(r => r.split(","));
    //         const headers = rows[0];
    //         const sampleRows = rows.slice(1, 6); // first 5 rows for preview

    //         // Populate uploaded columns
    //         $("#uploaded-columns").empty();
    //         headers.forEach(col => {
    //             $("#uploaded-columns").append(`<div class="drag-item" draggable="true" data-col="${col}">${col}</div>`);
    //         });

    //         // Populate preview table
    //         $("#preview-header").html(headers.map(h => `<th>${h}</th>`).join(''));
    //         $("#preview-body").empty();
    //         sampleRows.forEach(row => {
    //             let tr = "<tr>";
    //             headers.forEach((h, i) => tr += `<td>${row[i] || ""}</td>`);
    //             tr += "</tr>";
    //             $("#preview-body").append(tr);
    //         });

    //         // Enable drag-and-drop
    //         $(".drag-item").on("dragstart", function(e) {
    //             e.originalEvent.dataTransfer.setData("text", $(this).data("col"));
    //         });
    //     };
    //     reader.readAsText(file);
    // });

    
    // Handle Excel file upload
    $("#fileUpload").on("change", function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(event) {
            const data = new Uint8Array(event.target.result);
            const workbook = XLSX.read(data, { type: "array" });
            const sheetName = workbook.SheetNames[0];
            const sheet = workbook.Sheets[sheetName];
            const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });

            const headers = jsonData[0];
            const sampleRows = jsonData.slice(1, 6); // first 5 rows for preview

            // Populate uploaded columns
            $("#uploaded-columns").empty();
            headers.forEach(col => {
                $("#uploaded-columns").append(`<div class="drag-item" draggable="true" data-col="${col}">${col}</div>`);
            });

            // Populate preview table
            $("#preview-header").html(headers.map(h => `<th>${h}</th>`).join(''));
            $("#preview-body").empty();
            sampleRows.forEach(row => {
                let tr = "<tr>";
                headers.forEach((h, i) => tr += `<td>${row[i] || ""}</td>`);
                tr += "</tr>";
                $("#preview-body").append(tr);
            });

            // Enable drag-and-drop
            $(".drag-item").on("dragstart", function(e) {
                e.originalEvent.dataTransfer.setData("text", $(this).data("col"));
            });
        };
        reader.readAsArrayBuffer(file);
    });


    // Preview table
    $("#preview-header").html(uploadedColumns.map(c => `<th>${c}</th>`).join(''));
    previewData.forEach(row => {
        let tr = "<tr>";
        uploadedColumns.forEach(c => tr += `<td>${row[c]}</td>`);
        tr += "</tr>";
        $("#preview-body").append(tr);
    });

    // Drag and Drop Logic
    $(".drag-item").on("dragstart", function(e) {
        e.originalEvent.dataTransfer.setData("text", $(this).data("col"));
    });

    $(".drop-zone").on("dragover", function(e) {
        e.preventDefault();
        $(this).addClass("hover");
    }).on("dragleave", function() {
        $(this).removeClass("hover");
    }).on("drop", function(e) {
        e.preventDefault();
        $(this).removeClass("hover");
        const col = e.originalEvent.dataTransfer.getData("text");
        $(this).html(`${$(this).data("system")} → <strong>${col}</strong>`);
        $(this).data("mapped", col);
    });

    // $("#saveBtn").click(function() {
    //     let mapping = {};
    //     $(".drop-zone").each(function() {
    //         mapping[$(this).data("system")] = $(this).data("mapped") || null;
    //     });
    //     console.log("Mapping:", mapping);
    //     alert("Mapping saved successfully!");
    // });

    $("#saveBtn").click(function() {
        let mapping = {};
        let allMapped = true;

        $(".drop-zone").each(function() {
            const systemCol = $(this).data("system");
            const mappedCol = $(this).data("mapped");
            mapping[systemCol] = mappedCol || null;

            if (!mappedCol) {
                allMapped = false;
            }
        });

        if (!allMapped) {
            alert("Please map all system columns before saving.");
            return;
        }

        console.log("Mapping:", mapping);
        alert("Mapping saved successfully!");
    });

    $("#resetBtn").click(function() {
        $(".drop-zone").each(function() {
            $(this).html($(this).data("system"));
            $(this).removeData("mapped");
        });
    });
});
</script>
</body>
</html>

<!-- <script>
const uploadedColumns = [];
const systemColumns = ["PRODUCT NAME", "ITEM ID", "PRODUCT TYPE", "Product Short Description", "Product Long Description", "image_path"];
let globalHeaders = []; // To store headers for preview

$(document).ready(function() {
    // --- Initial Drop Zone Setup ---
    systemColumns.forEach(col => {
        $("#system-columns").append(`
            <div class="drop-zone" data-system="${col}">
                <span class="system-label">${col}</span>
                <span class="mapped-content">
                    <span class="text-muted">No column mapped</span>
                </span>
            </div>
        `);
    });

    // --- File Upload Handler (Supports CSV/Excel) ---
    $("#fileUpload").on("change", function(e) {
        const file = e.target.files[0];
        if (!file) return;

        const reader = new FileReader();
        reader.onload = function(event) {
            let jsonData;
            try {
                const data = new Uint8Array(event.target.result);
                const workbook = XLSX.read(data, { type: "array" });
                const sheetName = workbook.SheetNames[0];
                const sheet = workbook.Sheets[sheetName];
                // Use { header: 1 } to get an array of arrays, preserving the first row as headers
                jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 });
            } catch (err) {
                alert("Error reading file. Ensure it is a valid CSV or Excel file.");
                console.error(err);
                return;
            }

            const headers = jsonData[0];
            const sampleRows = jsonData.slice(1, 6); 
            globalHeaders = headers; // Store headers globally

            // Populate uploaded columns
            $("#uploaded-columns").empty();
            headers.forEach(col => {
                // Check if the column name is not empty or null
                if (col && String(col).trim() !== "") { 
                    $("#uploaded-columns").append(`<div class="drag-item" draggable="true" data-col="${col}">${col}</div>`);
                }
            });
            
            // Remove placeholder text
            $("#upload-placeholder").hide();

            // Populate preview table
            $("#preview-header").html(headers.map(h => `<th scope="col">${h}</th>`).join(''));
            $("#preview-body").empty();
            if (sampleRows.length > 0) {
                sampleRows.forEach(row => {
                    let tr = "<tr>";
                    headers.forEach((h, i) => tr += `<td>${row[i] || "-"}</td>`);
                    tr += "</tr>";
                    $("#preview-body").append(tr);
                });
            } else {
                 $("#preview-body").html('<tr><td colspan="100%" class="text-center text-warning">File uploaded, but no data rows found.</td></tr>');
            }

            // Re-enable drag-and-drop for new items
            enableDragDrop();
        };
        reader.readAsArrayBuffer(file);
    });

    // --- Drag and Drop Logic ---
    function enableDragDrop() {
        // Drag Start
        $(".drag-item").off("dragstart").on("dragstart", function(e) {
            e.originalEvent.dataTransfer.setData("text/plain", $(this).data("col"));
            // Add a class to the item being dragged
            $(this).addClass("dragging-active"); 
        });

        // Drag End (optional, for cleanup)
        $(".drag-item").off("dragend").on("dragend", function() {
             $(this).removeClass("dragging-active");
        });

        // Drop Zone Events
        $(".drop-zone").off("dragover").on("dragover", function(e) {
            e.preventDefault();
            $(this).addClass("hover");
            e.originalEvent.dataTransfer.dropEffect = "move";
        }).off("dragleave").on("dragleave", function() {
            $(this).removeClass("hover");
        }).off("drop").on("drop", function(e) {
            e.preventDefault();
            $(this).removeClass("hover");
            const col = e.originalEvent.dataTransfer.getData("text/plain");
            const systemCol = $(this).data("system");
            
            
            // Update the drop zone content
            $(this).find('.mapped-content').html(`
                <strong>${col}</strong>
                <span class="reset-map" title="Unmap Column" data-system="${systemCol}">✖️</span>
            `);
            $(this).data("mapped", col);
            $(this).removeClass("border-danger").addClass("border-success");

            // Visually "move" the item from the uploaded list (optional, for a cleaner look)
            // $(`.drag-item[data-col="${col}"]`).hide();
        });
    }

    // --- Reset Single Mapping ---
    $(document).on("click", ".reset-map", function() {
        const dropZone = $(this).closest(".drop-zone");
        const systemCol = dropZone.data("system");
        const mappedCol = dropZone.data("mapped");

        // Reset drop zone appearance and data
        dropZone.find('.mapped-content').html(`<span class="text-muted">No column mapped</span>`);
        dropZone.removeData("mapped");
        dropZone.removeClass("border-success").addClass("border-danger");
        
        // Show the uploaded column item again
        if (mappedCol) {
             $(`.drag-item[data-col="${mappedCol}"]`).show();
        }
    });

    // --- Reset All Button ---
    $("#resetBtn").click(function() {
        $(".drop-zone").each(function() {
            $(this).find('.mapped-content').html(`<span class="text-muted">No column mapped</span>`);
            $(this).removeData("mapped");
            $(this).removeClass("border-success border-danger");
        });
        // Show all uploaded columns again
        $(".drag-item").show();
    });

    // --- Save Button with Validation ---
    $("#saveBtn").click(function() {
        let mapping = {};
        let missingMaps = [];
        let allMapped = true;

        $(".drop-zone").each(function() {
            const systemCol = $(this).data("system");
            const mappedCol = $(this).data("mapped");
            
            mapping[systemCol] = mappedCol || null;

            if (!mappedCol) {
                allMapped = false;
                missingMaps.push(systemCol);
                $(this).addClass("border-danger"); // Highlight missing map
            } else {
                 $(this).removeClass("border-danger");
            }
        });

        if (!allMapped) {
            alert(`Please map all system columns before saving. Missing: ${missingMaps.join(', ')}`);
            return;
        }

        console.log("Final Mapping:", mapping);
        alert(`Mapping saved successfully! System Columns Mapped: ${Object.keys(mapping).length}`);
    });
    
    // Initial call to enable drag/drop for any pre-populated items (though none are currently)
    enableDragDrop();
});
</script> -->