Skip to content

Commit

Permalink
UI: work in progress to support upload of csv for EHIC for dev/test
Browse files Browse the repository at this point in the history
  • Loading branch information
@matskramer
matskramer committed Jan 10, 2025
1 parent 8a7bfb6 commit fd58d12
Showing 1 changed file with 83 additions and 33 deletions.
116 changes: 83 additions & 33 deletions internal/ui/static/ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1277,42 +1277,68 @@ const addUploadDocumentsUsingCsvFormArticleToContainer = () => {
fileName.id = generateUUID();
fileName.textContent = 'No file selected';

const uploadButton = document.createElement('button');
uploadButton.id = generateUUID();
uploadButton.classList.add('button', 'is-link');
uploadButton.textContent = 'Upload';

const tableContainer = document.createElement('div');
tableContainer.className = 'table-container';
tableContainer.style.marginTop = '20px';

const table = document.createElement('table');
table.className = 'table is-striped is-hoverable is-fullwidth';
table.id = 'csvTable';

tableContainer.appendChild(table);

let selectedFile = null;
input.addEventListener('change', function (event) {
const file = event.target.files[0];
if (!file) {
alert('Please select a csv file.');
return;
}
selectedFile = file;
fileName.textContent = file.name;
alert('File found, start process to import documents?');
});

uploadButton.onclick = () => {
if (!selectedFile) {
alert('Please select a csv file.');
return;
}

const reader = new FileReader();
reader.onload = async function (e) {
tableContainer.innerHTML = "";

const csvData = e.target.result;
displayCSV(csvData, table);

//displayCSV(csvData, table);
const jsonData = csvToJson(csvData);

console.debug("csvData", csvData);
console.debug("jsonData", jsonData);

const table = document.createElement('table');
table.className = 'table is-striped is-hoverable is-fullwidth';
table.id = generateUUID();
tableContainer.appendChild(table);

const headers = ["Upload status", "CSV input", "Error information"];
const thead = document.createElement("thead");
const headerRow = document.createElement("tr");
headers.forEach(headerText => {
const th = document.createElement("th");
th.textContent = headerText;
headerRow.appendChild(th);
});
thead.appendChild(headerRow);
table.appendChild(thead);
const tbody = document.createElement("tbody");
table.appendChild(tbody);

jsonData.forEach((row) => {

try {
bodyData = createUploadRequestFrom(row);
const bodyData = createUploadRequestFrom(row, documentTypeSelectWithinDivElement[1].value);

console.debug("row", row)
console.debug("bodyData", bodyData)
console.debug("row", row);
console.debug("bodyData", bodyData);

fetchData(new URL("/secure/apigw/upload", baseUrl), {
method: 'POST',
Expand All @@ -1323,20 +1349,20 @@ const addUploadDocumentsUsingCsvFormArticleToContainer = () => {
body: JSON.stringify(bodyData),
}).then(data => {
//alert(`Row uploaded: ${JSON.stringify(row)}`);
addTableRow(tbody, ["SUCCESS", JSON.stringify(bodyData), ""]);
}).catch(err => {
console.error("Unexpected error while uploading credential from csv:", err);
//alert(`Failed to upload row: ${JSON.stringify(row)}, Error: ${err}`);
//displayErrorTag("Failed to search for documents: ", divResultContainer, err);
addTableRow(tbody, ["FAILED", JSON.stringify(bodyData), err]);
});

} catch (error) {
console.error(`Error preparing row from csv for upload: ${JSON.stringify(row)}, Error: ${error}`);
addTableRow(tbody, ["FAILED", JSON.stringify(bodyData), error]);
}

});
};
reader.readAsText(file);
});
reader.readAsText(selectedFile);
};

label.appendChild(input);
label.appendChild(fileCta);
Expand All @@ -1347,8 +1373,7 @@ const addUploadDocumentsUsingCsvFormArticleToContainer = () => {
let brElement = document.createElement('br');

return {
formElements: [documentTypeSelectWithinDivElement[0], fileDiv, brElement, tableContainer],
table: table,
formElements: [documentTypeSelectWithinDivElement[0], fileDiv, uploadButton, brElement, tableContainer],
csvFileElement: input,
csvFileName: fileName,
};
Expand All @@ -1360,13 +1385,14 @@ const addUploadDocumentsUsingCsvFormArticleToContainer = () => {
const articleContainer = document.getElementById('article-container');
articleContainer.prepend(articleDiv);

function createUploadRequestFrom(row) {
function createUploadRequestFrom(row, documentType) {
const generatedDocumentId = generateUUID();

return {
meta: {
authentic_source: row.authentic_source,
document_version: row.document_version || "1.0.0",
document_type: row.document_type || "EHIC",
document_type: documentType,
document_id: row.document_id || generatedDocumentId,
real_data: row.real_data === "true",
credential_valid_from: row.credential_valid_from || null,
Expand Down Expand Up @@ -1412,6 +1438,16 @@ const addUploadDocumentsUsingCsvFormArticleToContainer = () => {
};
}

function addTableRow(tbody, cellTexts) {
const tr = document.createElement("tr");
cellTexts.forEach(text => {
const td = document.createElement("td");
td.textContent = text;
tr.appendChild(td);
});
tbody.appendChild(tr);
}

function displayCSV(data, table) {
const rows = data.split('\n');
table.innerHTML = ''; // Clear previous content
Expand Down Expand Up @@ -1459,22 +1495,36 @@ const addUploadDocumentsUsingCsvFormArticleToContainer = () => {
}
};


async function fetchData(url, options) {
const response = await fetch(url, options);
if (!response.ok) {
if (response.status === 401) {
//TODO(mk): handle not auth/session expired in ui
throw new Error("Unauthorized/session expired");
try {
const response = await fetch(url, options);

if (!response.ok) {
let errorDetails = `HTTP error! status: ${response.status}, url: ${url}`;

try {
const errorData = await response.json();
errorDetails += `, details: ${JSON.stringify(errorData)}`;
} catch (jsonError) {
errorDetails += `, details: (Unable to parse JSON)`;
}

if (response.status === 401) {
throw new Error("Unauthorized/session expired");
}

throw new Error(errorDetails);
}
throw new Error(`HTTP error! status: ${response.status}, method: ${response.method}, url: ${url}`);
}

const data = await response.json();
//console.debug(JSON.stringify(data, null, 2));
return data;
}
return await response.json();
} catch (error) {
if (error instanceof TypeError) {
throw new Error(`Network error or server did not respond. URL: ${url}, Details: ${error.message}`);
}

throw new Error(`Error: ${error.message}`);
}
}

const addViewNotificationFormArticleToContainer = () => {
const buildFormElements = () => {
Expand Down

0 comments on commit fd58d12

Please sign in to comment.