remember previous object filters, improve translations

dist/index.js

@@ -449,6 +449,7 @@
     clearAddresses: "Clear previous connections",
     clearCategories: "Clear suggestions for object categories",
     clearStatuses: "Clear suggestions for object statuses",
+    clearObjectFilters: "Clear object filters",
     // overview
     overview: "Overview",
     connection: "Connection",
@@ -554,6 +555,7 @@
       clearAddresses: "Borrar conexiones previas",
       clearCategories: "Borrar sugerencias para categor\xEDas de objetos",
       clearStatuses: "Borrar sugerencias para estados de objetos",
+      clearObjectFilters: "Borrar filtros de objetos",
       // overview
       overview: "Resumen",
       connection: "Conexi\xF3n",
@@ -561,7 +563,7 @@
       yourName: "Tu nombre",
       namePlaceholder: "Juan P\xE9rez",
       encryptionUnavailableTitle: "Cifrado no disponible",
-      encryptionUnavailableMessage: "Obt\xE9n esta aplicaci\xF3n a traves de HTTPS o contin\xFAa sin cifrado",
+      encryptionUnavailableMessage: "Obt\xE9n esta aplicaci\xF3n a trav\xE9s de HTTPS o contin\xFAa sin cifrado",
       serverAddress: "Direcci\xF3n del servidor",
       serverAddressPlaceholder: "wss://192.168.0.69:3000",
       previousConnections: "Conexiones anteriores",
@@ -611,7 +613,7 @@
       objectsInTotal: "Objetos en total: ",
       showObjects: "mostrar objetos",
       createObject: "a\xF1adir nuevo objeto",
-      untitledObject: "Sin T\xEDtulo",
+      untitledObject: "Sin t\xEDtulo",
       filterObjects: "Filtrar objetos",
       searchTitle: "Buscar",
       searchPlaceholder: "Nota 2000-12-31",
@@ -657,6 +659,7 @@
       clearAddresses: "Vorherige Verbindungen l\xF6schen",
       clearCategories: "Vorschl\xE4ge f\xFCr Objektkategorien l\xF6schen",
       clearStatuses: "Vorschl\xE4ge f\xFCr Objektstaten l\xF6schen",
+      clearObjectFilters: "Objektfilter l\xF6schen",
       // overview
       overview: "\xDCbersicht",
       connection: "Verbindung",
@@ -1300,6 +1303,9 @@
     document.body.style.zoom = `${pageZoom.value}%`;
     document.body.style.webkitTextSizeAdjust = `${pageZoom.value}%`;
   });
+  var usedObjectCategories = restoreListState("object-categories");
+  var usedObjectStatuses = restoreListState("object-statuses");
+  var previousObjectSearches = restoreListState("object-searches");
   function toggleSettings() {
     isPresentingSettingsModal.value = !isPresentingSettingsModal.value;
   }
@@ -1308,6 +1314,7 @@
     removeSetDuplicates(previousAddresses);
     removeSetDuplicates(usedObjectCategories);
     removeSetDuplicates(usedObjectStatuses);
+    removeSetDuplicates(previousObjectSearches);
   }
   function mapSetToLowercase(listState) {
     const lowerCased = [...listState.value].map((x) => x.toLowerCase());
@@ -1328,6 +1335,9 @@
   function clearStatuses() {
     usedObjectStatuses.clear();
   }
+  function clearObjectSearches() {
+    previousObjectSearches.clear();
+  }
   var zoomStep = 10;
   function zoomOut() {
     pageZoom.value -= zoomStep;
@@ -1335,8 +1345,6 @@
   function zoomIn() {
     pageZoom.value += zoomStep;
   }
-  var usedObjectCategories = restoreListState("object-categories");
-  var usedObjectStatuses = restoreListState("object-statuses");
   var chats = new ListState();
   var chatIds = restoreListState("chat-ids");
   var selectedChat = new State(void 0);
@@ -2096,6 +2104,7 @@
     }
     function applyFilter() {
       appliedFilter.value = filterInput.value;
+      previousObjectSearches.add(appliedFilter.value);
       const allObjects = [...chat.objects.value.values()];
       allObjects.forEach((object, i) => {
         const doesMatch = checkIfMatchesFilter(object);
@@ -2199,7 +2208,18 @@
       {
         "bind:value": filterInput,
         "on:enter": applyFilter,
-        placeholder: translation.searchPlaceholder
+        placeholder: translation.searchPlaceholder,
+        list: "object-searches"
+      }
+    ), /* @__PURE__ */ createElement(
+      "datalist",
+      {
+        hidden: true,
+        id: "object-searches",
+        "children:append": [
+          previousObjectSearches,
+          stringToOptionTag
+        ]
       }
     )))), /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "button",
@@ -2505,7 +2525,15 @@
 
   // src/Views/settingsModal.tsx
   function SettingsModal() {
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translation.settings), /* @__PURE__ */ createElement("div", { class: "flex-row width-input gap" }, /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomOut }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_out"), translation.zoomOut), /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomIn }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_in"), translation.zoomIn)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": repairApp }, /* @__PURE__ */ createElement("span", { class: "icon" }, "handyman"), translation.repairApp)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input gap" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearAddresses }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), translation.clearAddresses), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearCategories }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.categoryName), translation.clearCategories), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearStatuses }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.status), translation.clearStatuses))), /* @__PURE__ */ createElement("button", { class: "width-100", "on:click": toggleSettings }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translation.settings), /* @__PURE__ */ createElement("div", { class: "flex-row width-input gap" }, /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomOut }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_out"), translation.zoomOut), /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomIn }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_in"), translation.zoomIn)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": repairApp }, /* @__PURE__ */ createElement("span", { class: "icon" }, "handyman"), translation.repairApp)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input gap" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearAddresses }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), translation.clearAddresses), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearCategories }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.categoryName), translation.clearCategories), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearStatuses }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.status), translation.clearStatuses), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "tile width-100 flex-1",
+        "on:click": clearObjectSearches
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "search"),
+      translation.clearObjectFilters
+    ))), /* @__PURE__ */ createElement("button", { class: "width-100", "on:click": toggleSettings }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
   // src/index.tsx

src/Model/model.ts

@@ -156,6 +156,13 @@ pageZoom.subscribe(() => {
   document.body.style.webkitTextSizeAdjust = `${pageZoom.value}%`;
 });
 
+export const usedObjectCategories =
+  React.restoreListState<string>("object-categories");
+export const usedObjectStatuses =
+  React.restoreListState<string>("object-statuses");
+export const previousObjectSearches =
+  React.restoreListState<string>("object-searches");
+
 export function toggleSettings() {
   isPresentingSettingsModal.value = !isPresentingSettingsModal.value;
 }
@@ -165,6 +172,7 @@ export function repairApp() {
   removeSetDuplicates(previousAddresses);
   removeSetDuplicates(usedObjectCategories);
   removeSetDuplicates(usedObjectStatuses);
+  removeSetDuplicates(previousObjectSearches);
 }
 
 function mapSetToLowercase(listState: React.ListState<string>) {
@@ -191,6 +199,10 @@ export function clearStatuses() {
   usedObjectStatuses.clear();
 }
 
+export function clearObjectSearches() {
+  previousObjectSearches.clear();
+}
+
 const zoomStep = 10;
 export function zoomOut() {
   pageZoom.value -= zoomStep;
@@ -199,11 +211,6 @@ export function zoomIn() {
   pageZoom.value += zoomStep;
 }
 
-export const usedObjectCategories =
-  React.restoreListState<string>("object-categories");
-export const usedObjectStatuses =
-  React.restoreListState<string>("object-statuses");
-
 // CHAT
 export const chats = new React.ListState<Chat>();
 export const chatIds = React.restoreListState<string>("chat-ids");

src/Views/Objects/objectPane.tsx

@@ -10,6 +10,8 @@ import { ObjectGridView } from "./objectGridView";
 import { StatusView } from "./statusView";
 import { icons } from "../../icons";
 import { translation } from "../../translations";
+import { previousObjectSearches } from "../../Model/model";
+import { stringToOptionTag } from "../../utility";
 
 export const viewTypes = {
   all: [translation.viewAll, "grid_view"],
@@ -61,6 +63,7 @@ export function ObjectPane(chat: Chat) {
 
   function applyFilter() {
     appliedFilter.value = filterInput.value;
+    previousObjectSearches.add(appliedFilter.value);
 
     const allObjects = [...chat.objects.value.values()];
     allObjects.forEach((object, i) => {
@@ -198,7 +201,16 @@ export function ObjectPane(chat: Chat) {
                     bind:value={filterInput}
                     on:enter={applyFilter}
                     placeholder={translation.searchPlaceholder}
+                    list="object-searches"
                   ></input>
+                  <datalist
+                    hidden
+                    id="object-searches"
+                    children:append={[
+                      previousObjectSearches,
+                      stringToOptionTag,
+                    ]}
+                  ></datalist>
                 </div>
               </label>
             </div>

src/Views/settingsModal.tsx

@@ -3,6 +3,7 @@ import * as React from "bloatless-react";
 import {
   clearAddresses,
   clearCategories,
+  clearObjectSearches,
   clearStatuses,
   isPresentingSettingsModal,
   repairApp,
@@ -56,6 +57,13 @@ export function SettingsModal() {
               <span class="icon">{icons.status}</span>
               {translation.clearStatuses}
             </button>
+            <button
+              class="tile width-100 flex-1"
+              on:click={clearObjectSearches}
+            >
+              <span class="icon">search</span>
+              {translation.clearObjectFilters}
+            </button>
           </div>
         </main>
         <button class="width-100" on:click={toggleSettings}>

src/translations.ts

@@ -21,6 +21,7 @@ const englishTranslations = {
   clearAddresses: "Clear previous connections",
   clearCategories: "Clear suggestions for object categories",
   clearStatuses: "Clear suggestions for object statuses",
+  clearObjectFilters: "Clear object filters",
 
   // overview
   overview: "Overview",
@@ -160,6 +161,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     clearAddresses: "Borrar conexiones previas",
     clearCategories: "Borrar sugerencias para categorías de objetos",
     clearStatuses: "Borrar sugerencias para estados de objetos",
+    clearObjectFilters: "Borrar filtros de objetos",
 
     // overview
     overview: "Resumen",
@@ -172,7 +174,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
 
     encryptionUnavailableTitle: "Cifrado no disponible",
     encryptionUnavailableMessage:
-      "Obtén esta aplicación a traves de HTTPS o continúa sin cifrado",
+      "Obtén esta aplicación a través de HTTPS o continúa sin cifrado",
 
     serverAddress: "Dirección del servidor",
     serverAddressPlaceholder: "wss://192.168.0.69:3000",
@@ -238,7 +240,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
 
     showObjects: "mostrar objetos",
     createObject: "añadir nuevo objeto",
-    untitledObject: "Sin Título",
+    untitledObject: "Sin título",
 
     filterObjects: "Filtrar objetos",
     searchTitle: "Buscar",
@@ -296,6 +298,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     clearAddresses: "Vorherige Verbindungen löschen",
     clearCategories: "Vorschläge für Objektkategorien löschen",
     clearStatuses: "Vorschläge für Objektstaten löschen",
+    clearObjectFilters: "Objektfilter löschen",
 
     // overview
     overview: "Übersicht",