Reimplement dictionary UI using the restvle endpoints

[simar0at]

https://vicav.acdh-ch-dev.oeaw.ac.at/openapi/#/vleserver-api

[ttechnicus]

The status of development at this point:

• a window type was created with targetType: "DictQuery"
  • its parameters are textId (this refers to the ID of the dictionary; would be nice to rename to dictId and add it to the dedupe logic, too) and queryParams which mimics the parameters of the corresponding api call (/restvle/dicts/{{ _.dict_name }}/entries) – making it possible to open a new query window with a programmatically predefined query,
• upon setup, the component utilizes a dictionary store to retrieve the details of the dictionary referred in textId,
  • the dictionary store initializes itself by fetching the list of dictionaries from the api (/restvle/dicts),
  • the store uses useQuery, so any data that are fetched are also cached,
  • when the component requests the dictionary details, they are fetched from the api (/restvle/dicts/{{ _.dict_name }}) if they are not cached yet,
• the window features a form and the result display area,
• the form consists of three main parts: query string entry, extended options, and the Query button,
  • query string editing utilizes an improved version of the InputExtended component (originally added to the corpus query branch),
  • query entry can be toggled between "smart" and "manual edit",
  • in "smart" edit mode query features can be added by selecting the feature code from a dropdown, and the key-value pairs appear as a list of boxes; the boxes can be reloaded into the editor by clicking on them, and removed by clicking on the "×",
  • in "manual edit" mode the q parameter can be edited freely; in this case, upon pressing the Query button the value is parsed so that the key-value pairs are also loaded in the "smart" editor's box list for easy editing,
  • extended options are the advanced parameters that can be passed to the api endpoint: page, pageSize, id, ids, sort, altLemma and format,
  • the Query button is disabled if none of the q, id or ids values is specified,
  • upon pressing the Query button, the api is queried for the results,
  • in case of no results (404) or other errors an empty result is returned to the component, while the error is displayed on the js console,
  • otherwise the results are loaded into the result pane below,
• the result pane consists of a header, and the list of result entries,
  • the header shows
  • the number of total entries received (this number is taken from the response object),
  • a pagination navigator that is created by the pagination data received in the response object,
  • the time elapsed during search (taken from the response object),
  • the entries are a raw realization of the data that come from the api,
  • the fields id, sid, lemma, status and released are displayed without formatting (this definitely needs improvement on design),
  • the entry is rendered as html, the necessary stylesheet is added to the vuejs component.

For the pagination navigator @nuxt/ui was added to the project, and a necessary upgrade to nuxt v3.9 was made. Since @nuxt/ui redefines the --color-primary css variable, a workaround was needed to maintain the project's unique color (see the last commit); there may be a more elegant solution to this issue.

[ttechnicus]

• entries query syntax should be specified precisely (q parameter, compare with an old api description - locigal expressions etc.), and the feature criteria editing logic in the vue component adjusted
• api of dictionary info should be refined: add human readable queryTemplate names (currently the list is duplicated for the names and the values), add special character lists,
• api definition should be refined to specify response object properties' types.