client

Author: PrinsINT

client/.prettierignore

@@ -0,0 +1,2 @@
+*.d.ts
+*.min.css

client/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+    "$schema": "https://json.schemastore.org/prettierrc",
+    "semi": false,
+    "tabWidth": 4,
+    "trailingComma": "all",
+    "objectWrap": "collapse",
+    "printWidth": 120
+}

client/.vscode/extensions.json

@@ -0,0 +1 @@
+{ "recommendations": ["Vue.volar", "dbaeumer.vscode-eslint", "esbenp.prettier-vscode"] }

client/.vscode/settings.json

@@ -1,10 +1,11 @@
 {
+    "editor.codeActionsOnSave": { "source.fixAll": "explicit" },
+    "editor.formatOnSave": true,
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "explorer.fileNesting.enabled": true,
     "explorer.fileNesting.patterns": {
-        "tsconfig.json": "tsconfig.*.json, *.d.ts, biome.json",
-        "package.json": "package-lock.json"
+        "tsconfig.json": "tsconfig*, *.d.ts",
+        "package.json": "package-lock.json, eslint*, .prettier*"
     },
-    "[vue]": {
-        "editor.defaultFormatter": "Vue.volar"
-    }
+    "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
 }

client/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:24.2.0-bookworm-slim AS build
+FROM node:24.3.0-bookworm-slim AS build
 COPY . .
 RUN npm ci && npm run build
 

client/README.md

@@ -1,4 +1,5 @@
 # galahad-client
+
 Project setup: `npm install`
 Compiles and hot-reloads for development: `npm run dev`
 Compiles and minifies for production: `npm run build`
@@ -8,16 +9,26 @@ Lints and fixes files: `npm run lint`
 [Configuration Reference](https://cli.vuejs.org/config/).
 
 # Dev overview
+
 The following folders are found in src/
+
 ## Types
+
 Typescript defined types, mostly to reflect the API response type.
+
 ## API
+
 Interface to call the server.
+
 ## Stores
+
 Pinia stores for application data. Retrieves data via the API and uploads data.
+
 ## Components
+
 Vue components. Some core components like custom tables and buttons are prefixed with G- (short for Galahad).
 The interface is based around GTabs that can display different GCards in a tab-like interface.
 
 ## Views
+
 Vue views. Views in the Annotate tab make use of the AnnotateTab component which handles errors like empty corpora or empty selections.

client/StyleTemplate.vue

@@ -5,33 +5,57 @@
     - https://vuejs.org/guide/typescript/composition-api.html -->
 
     <!-- Attribute order: v-for/v-if; id; ref/key; v-model; others...; @click/@etc. -->
-    <button v-if="visible" v-model="foo" class="btn" @click="handleClick">Button</button>
+    <!-- within others, boolean arguments first, same-name linked props second, the rest third. -->
+    <button v-if="visible" v-model="foo" primary bordered :color class="btn" @click="handleClick">Button</button>
 </template>
 
 <script setup lang="ts">
 // -- libraries --
+import axios from "axios"
 // --- stores ---
+import stores from "@/stores"
 // --- api ---
+import * as API from "@/api"
+// --- util ---
+import { formatDate } from "@/ts/utils"
 // --- views ---
+import HelpView from "@/views/HelpView.vue"
+
 // --- types ---
+type myType = { id: number; name: string }
+
 // --- model ---
 const model = defineModel<string>()
+
 // --- props ---
-const { foo = "bar" } = defineProps<{
-    foo?: string
-}>()
+const { foo = "bar" } = defineProps<{ foo?: string }>()
+
 // --- emits ---
 // Defining emits is technically optional if they are not used in <script>, but it is a good practice to do so.
-const emit = defineEmits<{
-    click: [name: string]
-    voidExample: []
-}>()
+const emit = defineEmits<{ click: [name: string]; voidExample: [] }>()
+
+// --- store data ---
+const store = stores.useMyStore()
+
 // --- data ---
 const visible = ref<boolean>(true)
+
 // --- computed ---
 const isVisible = computed<boolean>(() => visible.value) // arrow function where possible
+
 // --- watch ---
+watch(
+    () => store.someValue,
+    (newValue, oldValue) => {
+        console.log(`Value changed from ${oldValue} to ${newValue}`)
+    },
+)
+
 // --- lifecycle (in order of execution) ---
+onMounted((): void => {
+    console.log("Component mounted")
+})
+
 // --- methods ---
 function handleClick(): void {
     // do something

client/biome.json

@@ -9,6 +9,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AnnotateTab: typeof import('./src/components/AnnotateTab.vue')['default']
+    AnnotationSelect: typeof import('./src/components/input/AnnotationSelect.vue')['default']
     AppBanner: typeof import('./src/components/AppBanner.vue')['default']
     BenchmarkSetsHelp: typeof import('./src/components/help/BenchmarkSetsHelp.vue')['default']
     ComparisonModal: typeof import('./src/components/modals/ComparisonModal.vue')['default']
@@ -30,6 +31,8 @@ declare module 'vue' {
     GButton: typeof import('./src/components/input/GButton.vue')['default']
     GCard: typeof import('./src/components/GCard.vue')['default']
     GCheckBox: typeof import('./src/components/input/GCheckBox.vue')['default']
+    GForm: typeof import('./src/components/input/GForm.vue')['default']
+    GFormHorizontal: typeof import('./src/components/input/GFormHorizontal.vue')['default']
     GInfo: typeof import('./src/components/GInfo.vue')['default']
     GInput: typeof import('./src/components/input/GInput.vue')['default']
     GModal: typeof import('./src/components/modals/GModal.vue')['default']
@@ -58,6 +61,7 @@ declare module 'vue' {
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SingleTermComparisonTable: typeof import('./src/components/tables/SingleTermComparisonTable.vue')['default']
+    TagsetSelect: typeof import('./src/components/input/TagsetSelect.vue')['default']
     UploadDocuments: typeof import('./src/components/input/UploadDocuments.vue')['default']
     UserList: typeof import('./src/components/modals/corpus/UserList.vue')['default']
     VariantsModal: typeof import('./src/components/modals/VariantsModal.vue')['default']

client/components.d.ts

@@ -0,0 +1,35 @@
+import { globalIgnores } from "eslint/config"
+import { defineConfigWithVueTs, vueTsConfigs } from "@vue/eslint-config-typescript"
+import pluginVue from "eslint-plugin-vue"
+import skipFormatting from "@vue/eslint-config-prettier/skip-formatting"
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+    {
+        name: "app/files-to-lint",
+        files: ["**/*.{ts,mts,tsx,vue}"],
+        rules: {
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    vars: "all",
+                    args: "after-used",
+                    ignoreRestSiblings: true,
+                    argsIgnorePattern: "^_",
+                    varsIgnorePattern: "^_",
+                },
+            ],
+        },
+    },
+
+    globalIgnores(["**/dist/**", "**/dist-ssr/**", "**/coverage/**"]),
+
+    pluginVue.configs["flat/essential"],
+    vueTsConfigs.recommended,
+    skipFormatting,
+    // allow unused variables with _ prefix
+)