Mitigated frontend selection issues

This commit is contained in:
Leon Meier 2023-06-27 23:47:00 +02:00
parent 4c0be6d87b
commit b785dd8ca7
4 changed files with 33 additions and 13 deletions

View File

@ -21,8 +21,8 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="itemModifyModalStorageLocation" class="form-label">Select a storage location</label> <label for="itemModifyModalStorageLocation" class="form-label">Select a storage location</label>
<select class="form-select" id="itemModifyModalStorageLocation" name="storageLocation" required> <select class="form-select" id="itemModifyModalStorageLocation" name="storageLocation">
<option value="undefined"><i>Do not assign a storage location</i></option> <option value=""><i>Do not assign a storage location</i></option>
<% it.storeLocs.forEach(function(locs){ %> <% it.storeLocs.forEach(function(locs){ %>
<option value="<%= locs.id %>"><%= locs.name %></option> <option value="<%= locs.id %>"><%= locs.name %></option>
<% }) %> <% }) %>
@ -46,8 +46,8 @@
</div> </div>
<div class="mb-3"> <div class="mb-3">
<label for="itemModifyModalCategory" class="form-label">Select a category</label> <label for="itemModifyModalCategory" class="form-label">Select a category</label>
<select class="form-select" id="itemModifyModalCategory" name="category" required> <select class="form-select" id="itemModifyModalCategory" name="category">
<option value="undefined"><i>Do not assign a category</i></option> <option value=""><i>Do not assign a category</i></option>
<% it.categories.forEach(function(cat){ %> <% it.categories.forEach(function(cat){ %>
<option value="<%= cat.id %>"><%= cat.name %></option> <option value="<%= cat.id %>"><%= cat.name %></option>
<% }) %> <% }) %>
@ -61,13 +61,20 @@
<option value="normal" class="text-success">Normal</option> <option value="normal" class="text-success">Normal</option>
<option value="borrowed" class="text-info">Borrowed</option> <option value="borrowed" class="text-info">Borrowed</option>
<option value="stolen" class="text-danger">Stolen</option> <option value="stolen" class="text-danger">Stolen</option>
<option value="lost" class="text-warning"">Lost</option> <option value="lost" class="text-warning">Lost</option>
</select> </select>
<div id="storageLocationModalLocationText" class="form-text">You have to create a storage location beforehand.</div> <div id="storageLocationModalLocationText" class="form-text">You have to create a storage location beforehand.</div>
</div> </div>
<div class="mb-3">
<label for="itemModifyModalContact" class="form-label">Contact Info</label>
<select class="form-select" id="itemModifyModalContact" name="contactInfoId" onchange="handleSelector()">
<option value=""><i>Do not assign contact info</i></option>
<% it.contactInfo.forEach(function(address){ %>
<option value="<%= address.id %>"><%= address.street %> <%= address.houseNumber %>, <%= address.city %> <%= address.country %></option>
<% }) %>
</select>
</div>
<input type="text" id="itemModifyModalId" name="id" hidden /> <input type="text" id="itemModifyModalId" name="id" hidden />
</div> </div>
<div class="modal-footer"> <div class="modal-footer">

View File

@ -27,7 +27,10 @@ async function get(req: Request, res: Response) {
.then((items) => { .then((items) => {
prisma.storageLocation.findMany({}).then((locations) => { prisma.storageLocation.findMany({}).then((locations) => {
prisma.itemCategory.findMany({}).then((categories) => { prisma.itemCategory.findMany({}).then((categories) => {
res.render(__path + '/src/frontend/items.eta.html', { items: items, currentPage: page, maxPages: pageSize, storeLocs: locations, categories: categories }); prisma.contactInfo.findMany({}).then((contactInfo) => {
res.render(__path + '/src/frontend/items.eta.html', { items: items, currentPage: page, maxPages: pageSize, storeLocs: locations, categories: categories, contactInfo: contactInfo });
})
}); });
}); });
}) })

View File

@ -32,6 +32,7 @@ function getDataForEdit(id) {
const modal_itemCategory = document.getElementById('itemModifyModalCategory'); const modal_itemCategory = document.getElementById('itemModifyModalCategory');
const modal_itemStatus = document.getElementById('itemModifyModalStatus'); const modal_itemStatus = document.getElementById('itemModifyModalStatus');
const modal_itemid = document.getElementById('itemModifyModalId'); const modal_itemid = document.getElementById('itemModifyModalId');
const modal_userinfo = document.getElementById('itemModifyModalContact');
modal_itemName.value = result.name; modal_itemName.value = result.name;
modal_itemComment.value = result.comment; modal_itemComment.value = result.comment;
@ -42,7 +43,7 @@ function getDataForEdit(id) {
// Select the correct option in the dropdown // Select the correct option in the dropdown
const modal_itemCategoryOptions = modal_itemCategory.options; const modal_itemCategoryOptions = modal_itemCategory.options;
for (let i = 0; i < modal_itemCategoryOptions.length; i++) { for (let i = 0; i < modal_itemCategoryOptions.length; i++) {
if (modal_itemCategoryOptions[i].value == result.category.id) { if (modal_itemCategoryOptions[i].value == result.categoryId) {
modal_itemCategoryOptions[i].selected = true; modal_itemCategoryOptions[i].selected = true;
} }
} }
@ -50,7 +51,7 @@ function getDataForEdit(id) {
// Select the correct option in the dropdown // Select the correct option in the dropdown
const modal_itemStatusOptions = modal_itemStatus.options; const modal_itemStatusOptions = modal_itemStatus.options;
for (let i = 0; i < modal_itemStatusOptions.length; i++) { for (let i = 0; i < modal_itemStatusOptions.length; i++) {
if (modal_itemStatusOptions[i].value == result.status.id) { if (modal_itemStatusOptions[i].value == result.statusId) {
modal_itemStatusOptions[i].selected = true; modal_itemStatusOptions[i].selected = true;
} }
} }
@ -58,11 +59,20 @@ function getDataForEdit(id) {
// Select the correct option in the dropdown // Select the correct option in the dropdown
const modal_itemStorageLocationOptions = modal_itemStorageLocation.options; const modal_itemStorageLocationOptions = modal_itemStorageLocation.options;
for (let i = 0; i < modal_itemStorageLocationOptions.length; i++) { for (let i = 0; i < modal_itemStorageLocationOptions.length; i++) {
if (modal_itemStorageLocationOptions[i].value == result.storageLocation.id) { if (modal_itemStorageLocationOptions[i].value == result.storageLocationId) {
modal_itemStorageLocationOptions[i].selected = true; modal_itemStorageLocationOptions[i].selected = true;
} }
} }
modal_userinfo.selectedIndex = 0;
// Select the correct option in the dropdown
const modal_userInfoOptions = modal_userinfo.options;
for (let i = 0; i < modal_userInfoOptions.length; i++) {
if (modal_userInfoOptions[i].value == result.contactInfoId) {
modal_userInfoOptions[i].selected = true;
}
}
modal_itemid.value = result.id; modal_itemid.value = result.id;
}, },
error: function (data) { error: function (data) {

View File

@ -45,7 +45,7 @@ function primeEdit() {
document.getElementById('storageUnitModalLocationSelectText').innerText= "While editing you can only select already existing locations. Use the settings to create new ones."; document.getElementById('storageUnitModalLocationSelectText').innerText= "While editing you can only select already existing locations. Use the settings to create new ones.";
document.getElementById('storageUnitModalLabel').innerText = "Edit a storage unit"; document.getElementById('storageUnitModalLabel').innerText = "Edit a storage unit";
document.getElementById('storageLocationModalTitle').innerText = "Edit a storage location" document.getElementById('storageLocationModalTitle').innerText = "Edit a storage location"
document.getElementById('storageUnitModalLocationSelect').value = 1 document.getElementById('storageUnitModalLocationSelect').selectedIndex = 1
handleSelector() handleSelector()
form.setAttribute('method', 'PATCH'); form.setAttribute('method', 'PATCH');
form2.setAttribute('method', 'PATCH'); form2.setAttribute('method', 'PATCH');
@ -121,7 +121,7 @@ function getDataForEditLoc(id) {
// Select the correct location from the select based on the value of the option // Select the correct location from the select based on the value of the option
for(var i, j = 0; i = modal_locationUnitSel.options[j]; j++) { for(var i, j = 0; i = modal_locationUnitSel.options[j]; j++) {
if(i.value == result.storageUnit) { if(i.value == result.storageUnitId) {
console.log("Found it"); console.log("Found it");
modal_locationUnitSel.selectedIndex = j; modal_locationUnitSel.selectedIndex = j;
break; break;