Fixes #42 Display existing values on meta editor

static/public/js/uiFilter.js

@@ -80,6 +80,7 @@ $(() => {
     const EMPTY_STRING = "(Empty)";
 
     window.ReloadFilters = function(mediaManager, onNewData) {
+        document.UiFullPageRefreshMetaDatalistes();
         let buildFilterBar = (labelText, canBeEmpty, possibleValues) => {
             let result = document.createElement("div");
             result.className = INPUT_CONTAINER_CLASSES;

static/public/js/uiMediaFullpage.js

@@ -2,6 +2,34 @@
 $(() => {
     let fullPageMediaDisplayed = false;
     let fullPageMediaList = false;
+    let metaListMap = {};
+
+    function refreshOneMetaList(key, domNode) {
+        domNode.textContent = "";
+        let data = key === "Tags" ? Array.from(MediaStorage.Instance.allTags) : Array.from(MediaStorage.Instance.allMeta[key] || []);
+        for (let i of data.sort())
+        {
+            let childDom = document.createElement("option");
+            childDom.value = childDom.textContent = i;
+            domNode.appendChild(childDom);
+        }
+    }
+
+    function buildMetaDatalistes(key, datalistes) {
+        let uuid = "METALIST_"+crypto.randomUUID();
+        let list = document.createElement("datalist");
+        list.id = uuid;
+        datalistes.push(list);
+        refreshOneMetaList(key, list);
+        metaListMap[key] = uuid;
+        return uuid;
+    }
+
+    function refreshMetaDatalistes() {
+        for (let i of Object.keys(metaListMap)) {
+            refreshOneMetaList(i, document.getElementById(metaListMap[i]));
+        }
+    }
 
     function serializeFileSize(size) {
         let units = [ 'o', 'Ko', 'Mo', 'Go', 'To' ];
@@ -14,7 +42,7 @@ $(() => {
         return `${size} ${units[idx]}`;
     }
 
-    function displayMeta(key, value, isRo) {
+    function displayMeta(key, value, isRo, datalistes) {
         let li = document.createElement("li");
         let type = value?.type || null;
         let val = (value?.value !== undefined ? value.value : value);
@@ -56,6 +84,7 @@ $(() => {
             bt.type = 'button';
             bt.innerHTML = '<i class="bi bi-pen"></i>';
             inputGroup.appendChild(bt);
+            valInput.setAttribute("list", buildMetaDatalistes(key, datalistes));
             bt.addEventListener('click', async () => {
                 await MediaStorage.Instance.setMetaValue(fullPageMediaDisplayed?.fixedSum || fullPageMediaList, key, valInput.value)
                 reloadCurrentMedia();
@@ -157,7 +186,7 @@ $(() => {
         return outerHTML;
     }
 
-    function displayMetas(media, metaData, isRo) {
+    function displayMetas(media, metaData, isRo, datalistes) {
         let metaList = document.createElement("ul");
 
         metaData.libraryPath = null;
@@ -176,7 +205,7 @@ $(() => {
         }
 
         for (let i of [ "date", "dimension", "height", "width", "fileSize" ]) {
-            let metaItem = displayMeta(i, metaData[i], true);
+            let metaItem = displayMeta(i, metaData[i], true, datalistes);
             metaItem && metaList.appendChild(metaItem);
             metaData[i] = null;
         }
@@ -187,14 +216,14 @@ $(() => {
                 dom && metaList.appendChild(dom);
                 continue;
             }
-            let metaItem = displayMeta(i, metaData[i], isRo || !MediaStorage.Instance.allMetaTypes[i]?.canWrite);
+            let metaItem = displayMeta(i, metaData[i], isRo || !MediaStorage.Instance.allMetaTypes[i]?.canWrite, datalistes);
             metaItem && metaList.appendChild(metaItem);
         }
 
         if (!isRo && media) {
             for (let i of ['geoCountry', 'geoCity', 'geoAdmin']) {
                 if (!metaData[i]) {
-                    let metaItem = displayMeta(i, "", false);
+                    let metaItem = displayMeta(i, "", false, datalistes);
                     metaItem && metaList.appendChild(metaItem);
                 }
             }
@@ -210,7 +239,7 @@ $(() => {
         fullPageMediaDisplayed && window.displayMediaFullPage(MediaStorage.Instance.getMediaLocal(fullPageMediaDisplayed.fixedSum));
     }
 
-    function displayTags(fixedTagList, tagList, writeAccess) {
+    function displayTags(fixedTagList, tagList, writeAccess, datalistes) {
         let tagListUi = document.createElement("ul");
         tagListUi.className = "taglist";
         let createTagUiItem = (i, roTag) => {
@@ -244,6 +273,7 @@ $(() => {
             valInput.classList.add("form-control");
             valInput.addEventListener('keyup', evt => evt.stopPropagation());
             valInput.addEventListener('keydown', evt => evt.stopPropagation());
+            valInput.setAttribute("list", buildMetaDatalistes("Tags", datalistes));
             inputGroup.appendChild(valInput);
             let bt = document.createElement('button');
             bt.className = 'btn btn-outline-secondary';
@@ -334,16 +364,26 @@ $(() => {
     function _displayMediaFullPage(media, fileName, imgUrl, metaData, downloadLink, fileIds, writeAccess) {
         document.getElementById("pch-fullPagePreviewContainer").classList.add("loading");
         document.getElementById("pch-fullPageMedia-title").innerText = fileName;
+        let datalistes = [];
+        metaListMap = {};
 
         document.getElementById("pch-fullPageDetail").innerText = "";
         if (downloadLink)
             document.getElementById("pch-fullPageDetail").appendChild(displayDownloadBt(downloadLink));
         if (fileIds && writeAccess)
             document.getElementById("pch-fullPageDetail").appendChild(displayRemoveButton(fileIds));
-        document.getElementById("pch-fullPageDetail").appendChild(displayTags(metaData?.fixedTags || [], metaData?.tags || [], writeAccess));
-        document.getElementById("pch-fullPageDetail").appendChild(displayMetas(media, Object.assign({}, metaData || {}), !writeAccess));
+        document.getElementById("pch-fullPageDetail").appendChild(displayTags(metaData?.fixedTags || [], metaData?.tags || [], writeAccess, datalistes));
+        document.getElementById("pch-fullPageDetail").appendChild(displayMetas(media, Object.assign({}, metaData || {}), !writeAccess, datalistes));
         document.querySelector("#pch-fullPagePreview .carousel-inner").textContent = "";
         $("#pch-fullPagePreview.carousel").carousel("dispose");
+
+
+        {
+            let datalistParent = document.getElementById("datalistes");
+            datalistParent.textContent = "";
+            for (let i of datalistes)
+                datalistParent.appendChild(i);
+        }
         return displayImg(media, imgUrl);
     }
 
@@ -376,6 +416,9 @@ $(() => {
         fullPageMediaDisplayed = false;
         history.pushState({}, '', '#');
         document.Title.pop();
+
+        metaListMap = {};
+        document.getElementById("datalistes").textContent = "";
     }
 
     window.displayMediaFullPage = function(mediaItem) {
@@ -443,5 +486,6 @@ $(() => {
             LoadNextMedia();
     });
     document.onClosePopinRequested(() => { CloseFullpageMedia(); });
+    document.UiFullPageRefreshMetaDatalistes = refreshMetaDatalistes;
 });
 

templates/_fullPageMedia.js

@@ -30,4 +30,5 @@ module.exports = `
             </div>
         </div>
     </div></div></div>
+    <div class="hidden" id="datalistes"></div>
     `;