viur-ui 0.0.1 → 0.0.3

package/src/request/envelope.js

@@ -64,7 +64,7 @@ export function v1SelectionFollow(body) {
     if (!String(bone?.["type"] ?? "").startsWith("select")) continue
     const chosen = values?.[name]
     if (typeof chosen !== "string" || !/^(\/|https?:\/\/)/.test(chosen)) continue
-    // Nur wenn der Wert tatsächlich eine der angebotenen Ziel-URLs ist.
+    // Only if the value actually is one of the offered target URLs.
     if (bone?.["values"] && Object.prototype.hasOwnProperty.call(bone["values"], chosen)) return chosen
   }
   return null
@@ -190,11 +190,11 @@ export function normalizeEnvelope(data) {
   out["action"] = action
   out["status"] = status
   out["errors"] = normalizeErrors(data["errors"])
-  // Ziel des Schritts. v1 legt es je nach Stufe anderswo ab:
-  //   next_url          – vom Server gesetzt (z. B. Auswahl des zweiten Faktors)
-  //   params.action_url  – bei einem gerenderten Schritt, der selbst ein Ziel
-  //                        mitbringt (viur-core: der OTP-Schritt des zweiten
-  //                        Faktors kommt als `edit` mit action_url)
+  // Target of the step. v1 puts it in different places depending on the stage:
+  //   next_url          – set by the server (e.g. choice of the second factor)
+  //   params.action_url  – for a rendered step that brings its own target
+  //                        (viur-core: the OTP step of the second factor
+  //                        comes as `edit` with action_url)
   out["follow"] = data["follow"] ?? data["next_url"] ?? data["params"]?.["action_url"] ?? null
   out["structure"] = data["structure"] ?? null
 

package/src/request/request.js

@@ -62,31 +62,43 @@ let _skeyPending = null
 
 async function _refillSkeys(renderer) {
   const base = import.meta.env.VITE_API_URL ?? window.location.origin
-  let response = await fetch(`${base}/${renderer}/skey?amount=${SKEY_BATCH_SIZE}`, { credentials: "include" })
-  if (!response.ok) {
-    response = await fetch(`${base}/${renderer}/skey`, { credentials: "include" })
-    if (!response.ok) throw new Error("Failed to fetch skey token")
+  try {
+    let response = await fetch(`${base}/${renderer}/skey?amount=${SKEY_BATCH_SIZE}`, { credentials: "include" })
+    if (!response.ok) {
+      response = await fetch(`${base}/${renderer}/skey`, { credentials: "include" })
+      if (!response.ok) throw new Error("Failed to fetch skey token")
+    }
+    let data = await response.json()
+    if (!Array.isArray(data)) data = [data]
+    _skeyCache.push(...data)
+  } finally {
+    // also on failure: otherwise every later caller awaits the same rejected promise
+    _skeyPending = null
   }
-  let data = await response.json()
-  if (!Array.isArray(data)) data = [data]
-  _skeyCache.push(...data)
-  _skeyPending = null
 }
 
 async function fetchSkeyToken(renderer) {
-  if (_skeyCache.length === 0) {
-    if (!_skeyPending) _skeyPending = _refillSkeys(renderer)
-    await _skeyPending
+  try {
+    if (_skeyCache.length === 0) {
+      if (!_skeyPending) _skeyPending = _refillSkeys(renderer)
+      await _skeyPending
+    }
+    return _skeyCache.shift()
+  } catch (error) {
+    throw error
   }
-  return _skeyCache.shift()
 }
 
 async function executeAndThrow(fetchResult, executeImpl) {
-  await executeImpl()
-  if (fetchResult.error.value) {
-    throw fetchResult.error.value
+  try {
+    await executeImpl()
+    if (fetchResult.error.value) {
+      throw fetchResult.error.value
+    }
+    return fetchResult
+  } catch (error) {
+    throw error
   }
-  return fetchResult
 }
 
 function createControllerListFetch({ all = false, secure = false } = {}) {
@@ -115,6 +127,11 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
     const orders = ref([])
     const params = ref({ ...initialParams })
     let _isNext = false
+    // Bumped by execute()/reset(). A request remembers the generation it started
+    // in; once a newer one exists it must not write anymore. Aborting alone is
+    // not enough: after the list response arrived, afterFetch still awaits the
+    // structure round trip and would then write into the already cleared state.
+    let _generation = 0
 
     function _buildUrl() {
       const base = url ?? create_url({ controller, endpoint: group ? `list/${group}` : "list", renderer, version })
@@ -126,16 +143,16 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
     }
 
     /**
-     * Struktur der Liste holen.
+     * Fetch the structure of the list.
      *
-     * Zwei Antwortformen sind unterwegs:
-     *   • aktuell:  `/<modul>/structure` rendert wie jede andere Aktion, also
+     * Two response shapes are in circulation:
+     *   • current:  `/<modul>/structure` renders like any other action, i.e.
      *     `{ action: "structure.view", values, structure }`
-     *   • historisch (getStructure): `{ viewSkel: {…}, editSkel: {…} }`
-     * Zusätzlich kann die Struktur eine PAAR-LISTE sein
-     * (`json.bone.structure.keytuples`) — normalizeStructure glättet das.
+     *   • historic (getStructure): `{ viewSkel: {…}, editSkel: {…} }`
+     * Additionally, the structure can be a PAIR LIST
+     * (`json.bone.structure.keytuples`) — normalizeStructure flattens that.
      */
-    async function _fetchStructure() {
+    async function _fetchStructure(generation) {
       const skeltype =
         params.value.skelType === "node"
           ? "viewNodeSkel"
@@ -146,11 +163,15 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       if (params.value.skelType) {
         url += `${url.includes("?") ? "&" : "?"}skelType=${encodeURIComponent(params.value.skelType)}`
       }
-      const resp = await fetch(url, { credentials: "include", headers: { Accept: "application/json" } })
-      if (!resp.ok) return
-      const body = normalizeEnvelope(await resp.json())
-      const raw = body?.["structure"] ?? body?.[skeltype]
-      if (raw) structure.value = normalizeStructure(raw)
+      try {
+        const resp = await fetch(url, { credentials: "include", headers: { Accept: "application/json" } })
+        if (!resp.ok) return
+        const body = normalizeEnvelope(await resp.json())
+        const raw = body?.["structure"] ?? body?.[skeltype]
+        if (raw && generation === _generation) structure.value = normalizeStructure(raw)
+      } catch {
+        // the structure is optional, the list stays usable without it
+      }
     }
 
     const listUrl = ref(_buildUrl())
@@ -166,7 +187,9 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
           const extraHeaders = typeof headers === "function" ? headers() : headers
           if (extraHeaders) options.headers = { ...options.headers, ...extraHeaders }
           if (cached && !_isNext) {
-            const hit = await getCached(url, ttl)
+            const hit = await getCached(url, ttl).catch((error) => {
+              throw error
+            })
             if (hit) {
               data.value = hit.data ?? hit.skellist ?? hit
               cursor.value = hit.meta?.cursor ?? hit.cursor ?? ""
@@ -175,22 +198,34 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
               return { options, url }
             }
           }
-          if (!secure) return { options, url }
-          const skey = await fetchSkeyToken(renderer)
-          const separator = url.includes("?") ? "&" : "?"
-          return { url: `${url}${separator}skey=${skey}`, options }
+          const generation = _generation
+          if (!secure) return { options, url, generation }
+          try {
+            const skey = await fetchSkeyToken(renderer)
+            const separator = url.includes("?") ? "&" : "?"
+            return { url: `${url}${separator}skey=${skey}`, options, generation }
+          } catch (error) {
+            throw error
+          }
         },
         async afterFetch(ctx) {
           // Normalize v1/v2 up to the canonical v2 envelope, then read the list
           // payload from `data` and pagination from `meta`.
+          const { generation } = ctx.context
+          if (generation !== _generation) return ctx
           const responseData = normalizeEnvelope(ctx.data)
           if (!_isNext) {
-            await _fetchStructure()
+            try {
+              await _fetchStructure(generation)
+            } catch (error) {
+              throw error
+            }
+            if (generation !== _generation) return ctx
           }
           const list = responseData.data ?? []
-          // Manche Installationen liefern die Struktur in der Liste mit
-          // (Kompatibilitäts-Flag `json.bone.structure.inlists`) — dann ist der
-          // separate Aufruf oben umsonst gewesen, aber diese hier ist aktueller.
+          // Some installations deliver the structure along with the list
+          // (compatibility flag `json.bone.structure.inlists`) — then the
+          // separate call above was in vain, but this one is more current.
           if (responseData.structure) {
             structure.value = normalizeStructure(responseData.structure)
           }
@@ -199,12 +234,19 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
           data.value = _isNext ? data.value.concat(list) : list
           if (cached && !_isNext) {
             const entityKeys = list.map((s) => s.key).filter(Boolean)
-            await setCached(ctx.url ?? listUrl.value, responseData, entityKeys)
+            await setCached(ctx.url ?? listUrl.value, responseData, entityKeys).catch((error) => {
+              throw error
+            })
           }
           ctx.data = data.value
           return ctx
         },
         onFetchError(ctx) {
+          // A superseded or aborted request is no failure: keep the current
+          // error as it is (null for the run that replaced this one).
+          if (ctx.context.generation !== _generation || ctx.error?.name === "AbortError") {
+            return { ...ctx, error: error.value }
+          }
           ctx.error = new HTTPError(ctx.response?.status, ctx.response?.statusText, ctx.error?.message, ctx.response)
           if (messages) {
             notify(
@@ -218,8 +260,8 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
 
     const { isFetching, isFinished, error, execute: _execute, abort } = useViurFetch(listUrl, { immediate }).json()
 
-    /** Alles geladen: letzte Antwort da und kein Cursor mehr offen. Ab hier
-     *  dürfen Sortierung/Filter lokal auf dem Datensatz laufen. */
+    /** Everything loaded: last response is in and no cursor left open. From here
+     *  on, sorting/filtering may run locally on the dataset. */
     const complete = computed(() => isFinished.value && !cursor.value)
 
     const fetchResult = {
@@ -245,11 +287,16 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
         params.value = { ...params.value, cursor: cursor.value }
         _isNext = true
         listUrl.value = _buildUrl()
-        await executeAndThrow(fetchResult, _execute)
+        try {
+          await executeAndThrow(fetchResult, _execute)
+        } catch {
+          // already in `error`; rethrowing here would only be an unhandled rejection
+        }
       }
     })
 
     function execute() {
+      _generation++
       _isNext = false
       abort()
       data.value = []
@@ -262,37 +309,49 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
       return executeAndThrow(fetchResult, _execute)
     }
 
-    /** Eine Seite nachladen; erkennt das ViUR-Ende (leere Seite mit derselben
-     *  Cursor-Marke) und löscht dann den Cursor. Liefert true bei Fortschritt. */
+    /** Load one more page; detects the ViUR end (empty page with the same
+     *  cursor marker) and then clears the cursor. Returns true on progress. */
     async function _advance() {
-      if (!cursor.value) return false
-      const before = data.value.length
-      const cursorBefore = cursor.value
-      params.value = { ...params.value, cursor: cursor.value }
-      _isNext = true
-      listUrl.value = _buildUrl()
-      await executeAndThrow(fetchResult, _execute)
-      if (data.value.length === before && cursor.value === cursorBefore) {
-        cursor.value = ""
-        return false
+      try {
+        if (!cursor.value) return false
+        const before = data.value.length
+        const cursorBefore = cursor.value
+        params.value = { ...params.value, cursor: cursor.value }
+        _isNext = true
+        listUrl.value = _buildUrl()
+        await executeAndThrow(fetchResult, _execute)
+        if (data.value.length === before && cursor.value === cursorBefore) {
+          cursor.value = ""
+          return false
+        }
+        return true
+      } catch (error) {
+        throw error
       }
-      return true
     }
 
-    /** Die nächsten `pages` Seiten laden (Standard: eine) — z. B. direkt als
-     *  Handler der DataTable-Cursor-Leiste: `@load-more="({ pages }) =>
+    /** Load the next `pages` pages (default: one) — e.g. directly as the
+     *  handler of the DataTable cursor bar: `@load-more="({ pages }) =>
      *  pages === 'all' ? list.nextAll() : list.next(pages)"`. */
     async function next(pages = 1) {
-      let remaining = pages
-      while (remaining-- > 0) {
-        if (!(await _advance())) return
+      try {
+        let remaining = pages
+        while (remaining-- > 0) {
+          if (!(await _advance())) return
+        }
+      } catch (error) {
+        throw error
       }
     }
 
-    /** Alle restlichen Seiten laden ("Alles laden"). */
+    /** Load all remaining pages ("load everything"). */
     async function nextAll() {
-      while (await _advance()) {
-        /* bis zum Ende */
+      try {
+        while (await _advance()) {
+          /* until the end */
+        }
+      } catch (error) {
+        throw error
       }
     }
 
@@ -302,6 +361,7 @@ function createControllerListFetch({ all = false, secure = false } = {}) {
     }
 
     function reset() {
+      _generation++
       abort()
       data.value = []
       structure.value = {}
@@ -352,7 +412,7 @@ export function useTreeFetch(
   const isFinished = computed(() => nodes.isFinished.value && leaves.isFinished.value)
   const error = computed(() => nodes.error.value ?? leaves.error.value)
   const hasMore = computed(() => !!(nodes.cursor.value || leaves.cursor.value))
-  /** Beide Listen vollständig geladen — Sortierung/Filter dürfen lokal laufen. */
+  /** Both lists fully loaded — sorting/filtering may run locally. */
   const complete = computed(() => isFinished.value && !hasMore.value)
 
   function _both(fn) {
@@ -363,27 +423,39 @@ export function useTreeFetch(
     return _both((l) => l.execute())
   }
 
-  // Eine Seite nachladen: erst Nodes zu Ende, dann Leaves. Das ViUR-Ende
-  // (leere Seite mit derselben Cursor-Marke) erkennt useListFetch.next()
-  // selbst und löscht dann seinen Cursor — hier zählt nur der Fortschritt.
+  // Load one more page: nodes to the end first, then leaves. useListFetch.next()
+  // detects the ViUR end (empty page with the same cursor marker) itself and
+  // then clears its cursor — only progress counts here.
   async function _nextOf(list) {
-    const before = list.data.value.length
-    await list.next()
-    return list.data.value.length > before
+    try {
+      const before = list.data.value.length
+      await list.next()
+      return list.data.value.length > before
+    } catch (error) {
+      throw error
+    }
   }
 
   async function next() {
-    if (nodes.cursor.value && (await _nextOf(nodes))) return
-    if (leaves.cursor.value) await _nextOf(leaves)
+    try {
+      if (nodes.cursor.value && (await _nextOf(nodes))) return
+      if (leaves.cursor.value) await _nextOf(leaves)
+    } catch (error) {
+      throw error
+    }
   }
 
-  /** Alle restlichen Seiten beider Listen laden ("Alles laden"). */
+  /** Load all remaining pages of both lists ("load everything"). */
   async function nextAll() {
-    while (nodes.cursor.value) {
-      if (!(await _nextOf(nodes))) break
-    }
-    while (leaves.cursor.value) {
-      if (!(await _nextOf(leaves))) break
+    try {
+      while (nodes.cursor.value) {
+        if (!(await _nextOf(nodes))) break
+      }
+      while (leaves.cursor.value) {
+        if (!(await _nextOf(leaves))) break
+      }
+    } catch (error) {
+      throw error
     }
   }
 
@@ -459,7 +531,12 @@ export function createControllerFetch({
       },
       options: {
         async beforeFetch({ options, url, cancel }) {
-          const skeyToken = secure ? ctxSkey || (await fetchSkeyToken(renderer)) : null
+          let skeyToken = null
+          try {
+            skeyToken = secure ? ctxSkey || (await fetchSkeyToken(renderer)) : null
+          } catch (error) {
+            throw error
+          }
           const base = create_url({ controller, endpoint, renderer, version, lang })
           const extraQs = query ? (typeof query === "string" ? query : new URLSearchParams(query).toString()) : ""
 
@@ -473,7 +550,9 @@ export function createControllerFetch({
             _cacheKey = qs ? `${base}?${qs}` : base
 
             if (cached) {
-              const hit = await getCached(_cacheKey, ttl)
+              const hit = await getCached(_cacheKey, ttl).catch((error) => {
+                throw error
+              })
               if (hit) {
                 _cachedHit = hit
                 cancel()
@@ -525,18 +604,25 @@ export function createControllerFetch({
           }
           if (cached && method.toUpperCase() === "GET" && _cacheKey) {
             const entityKey = ctx.data?.data?.key
-            await setCached(_cacheKey, ctx.data, entityKey ? [entityKey] : [])
+            await setCached(_cacheKey, ctx.data, entityKey ? [entityKey] : []).catch((error) => {
+              throw error
+            })
           }
           if (invalidates) {
             const keys = []
             if (data.key) keys.push(data.key)
             if (ctx.data?.data?.key) keys.push(ctx.data.data.key)
-            if (keys.length) await invalidateByKey(keys)
+            if (keys.length)
+              await invalidateByKey(keys).catch((error) => {
+                throw error
+              })
           }
           if (invalidatesAll) {
             const base = import.meta.env.VITE_API_URL ?? window.location.origin
             const controllerPath = Array.isArray(controller) ? controller.join("/") : controller
-            await clearCache(`${base}/${renderer}/${controllerPath}/`)
+            await clearCache(`${base}/${renderer}/${controllerPath}/`).catch((error) => {
+              throw error
+            })
           }
           return ctx
         },
@@ -586,47 +672,51 @@ export async function uploadFile(
   file,
   { target = undefined, publicUpload = false, renderer = null, version = null } = {}
 ) {
-  const _renderer = renderer ?? import.meta.env.VITE_DEFAULT_RENDERER ?? "json"
-  const fetchOpts = { credentials: "include", headers: { Accept: "application/json" }, method: "POST" }
-
-  // Step 1: get upload URL
-  const filedata = {
-    fileName: file.name,
-    mimeType: file.type || "application/octet-stream",
-    size: file.size.toString(),
-  }
-  if (target) filedata.node = target
-  if (publicUpload) filedata.public = true
-  const fd1 = _toFormData(filedata)
-  fd1.append("skey", await fetchSkeyToken(_renderer))
+  try {
+    const _renderer = renderer ?? import.meta.env.VITE_DEFAULT_RENDERER ?? "json"
+    const fetchOpts = { credentials: "include", headers: { Accept: "application/json" }, method: "POST" }
+
+    // Step 1: get upload URL
+    const filedata = {
+      fileName: file.name,
+      mimeType: file.type || "application/octet-stream",
+      size: file.size.toString(),
+    }
+    if (target) filedata.node = target
+    if (publicUpload) filedata.public = true
+    const fd1 = _toFormData(filedata)
+    fd1.append("skey", await fetchSkeyToken(_renderer))
+
+    const getUrlResp = await fetch(
+      create_url({ controller: "file", endpoint: "getUploadURL", renderer: _renderer, version }),
+      {
+        ...fetchOpts,
+        body: fd1,
+      }
+    )
+    if (!getUrlResp.ok) throw new Error(`getUploadURL failed: ${getUrlResp.status}`)
+    // Envelope-agnostic: v2 carries the payload in `data`, v1 in `values`.
+    const getUrlData = normalizeEnvelope(await getUrlResp.json())
+    const { uploadUrl, uploadKey } = getUrlData.data ?? getUrlData.values ?? {}
 
-  const getUrlResp = await fetch(
-    create_url({ controller: "file", endpoint: "getUploadURL", renderer: _renderer, version }),
-    {
+    // Step 2: upload raw bytes to external storage (no-cors, no credentials)
+    await fetch(uploadUrl, { method: "POST", body: file, mode: "no-cors" })
+
+    // Step 3: register file in ViUR
+    const fd3 = _toFormData({ key: uploadKey, skelType: "leaf" })
+    fd3.append("skey", await fetchSkeyToken(_renderer))
+
+    const addResp = await fetch(create_url({ controller: "file", endpoint: "add", renderer: _renderer, version }), {
       ...fetchOpts,
-      body: fd1,
-    }
-  )
-  if (!getUrlResp.ok) throw new Error(`getUploadURL failed: ${getUrlResp.status}`)
-  // Envelope-agnostic: v2 carries the payload in `data`, v1 in `values`.
-  const getUrlData = normalizeEnvelope(await getUrlResp.json())
-  const { uploadUrl, uploadKey } = getUrlData.data ?? getUrlData.values ?? {}
-
-  // Step 2: upload raw bytes to external storage (no-cors, no credentials)
-  await fetch(uploadUrl, { method: "POST", body: file, mode: "no-cors" })
-
-  // Step 3: register file in ViUR
-  const fd3 = _toFormData({ key: uploadKey, skelType: "leaf" })
-  fd3.append("skey", await fetchSkeyToken(_renderer))
-
-  const addResp = await fetch(create_url({ controller: "file", endpoint: "add", renderer: _renderer, version }), {
-    ...fetchOpts,
-    body: fd3,
-  })
-  if (!addResp.ok) throw new Error(`file/add failed: ${addResp.status}`)
-  const addData = normalizeEnvelope(await addResp.json())
-  if (addData.status !== "success") throw new Error(`Upload failed: ${JSON.stringify(addData)}`)
-  return addData.data ?? addData.values
+      body: fd3,
+    })
+    if (!addResp.ok) throw new Error(`file/add failed: ${addResp.status}`)
+    const addData = normalizeEnvelope(await addResp.json())
+    if (addData.status !== "success") throw new Error(`Upload failed: ${JSON.stringify(addData)}`)
+    return addData.data ?? addData.values
+  } catch (error) {
+    throw error
+  }
 }
 
 function _absolute(url) {

package/src/translations/de.js

@@ -12,6 +12,7 @@ export default {
     list: "Auflisten",
     addEmpty: "Neuer Eintrag",
     no_entries: "Keine Einträge",
+    errors_summary: "Fehler",
   },
   lang: "Sprache",
   bones: {
@@ -27,6 +28,13 @@ export default {
     phone: {
       placeholder: "Telefon/Fax",
     },
+    password: {
+      mismatch: "Die eingegebenen Passwörter stimmen nicht überein.",
+      empty: "Das eingegebene Passwort ist leer.",
+    },
+    text: {
+      openInNewWindow: "Link in neuem Fenster öffnen",
+    },
   },
 
   errors: {
@@ -77,6 +85,10 @@ export default {
     collapseRow: "Zeile einklappen",
     expandRow: "Zeile ausklappen",
     noData: "Keine Daten",
+    noValues: "Keine Werte",
+    clear: "Leeren",
+    filterEquals: "genau …",
+    filterContains: "enthält …",
     noResults: "Keine Treffer",
     filterFrom: "von",
     filterTo: "bis",
@@ -108,6 +120,7 @@ export default {
     path: "Pfad",
     navigation: "Navigation",
     uploadHint: "Dateien hier ablegen",
+    name: "Name",
   },
   form: {
     next: "Weiter",
@@ -122,6 +135,7 @@ export default {
       original: "Original Sprache ({lang}):",
       target: "Zielsprache ({lang}):",
       run: "Übersetzen",
+      name: "Übersetzen",
       applyNext: "Übernehmen und nächste leere Sprache",
       apply: "Ziel für {lang} übernehmen",
     },
@@ -130,6 +144,23 @@ export default {
       instructions: "weitere Anweisungen",
       run: "Beschreibung erstellen",
       apply: "Beschreibung übernehmen",
+      name: "Bildbeschreibung erstellen",
+      title: "Bild beschreiben",
+    },
+    debug: {
+      name: "Debug",
+      title: "Bone Debug-Informationen anzeigen",
+      structure: "Bone-Struktur",
+      value: "Bone-Wert",
+      state: "Bone-Status",
+      context: "Kontext",
+    },
+    placeholder: {
+      name: "Platzhalter",
+      title: "Platzhalter (TODO: entfernen)",
+    },
+    delete: {
+      name: "Löschen",
     },
   },
   messages: {