more client

Author: PrinsINT

.gitignore

@@ -4,3 +4,5 @@
 build/
 server/data/corpora/
 .env
+node_modules/
+dist/

client/.dockerignore

@@ -1,2 +1,3 @@
-dist
-node_modules
+dist/
+node_modules/
+.vscode/

client/.gitattributes

@@ -38,6 +38,7 @@ declare module 'vue' {
     GSelect: typeof import('./src/components/input/GSelect.vue')['default']
     GSpinner: typeof import('./src/components/GSpinner.vue')['default']
     GTable: typeof import('./src/components/tables/GTable.vue')['default']
+    GTablePaginator: typeof import('./src/components/tables/GTablePaginator.vue')['default']
     GTabs: typeof import('./src/components/GTabs.vue')['default']
     GValidator: typeof import('./src/components/input/GValidator.vue')['default']
     HelpLink: typeof import('./src/components/links/HelpLink.vue')['default']

client/.gitignore

@@ -9,19 +9,19 @@
         </template>
     </GTabs>
 
-    <GModal :show="errorsStore.errors.length > 0" title="Ocharme!" @hide="errorsStore.resetErrors">
+    <GModal :show="errors.errors.length > 0" title="Ocharme!" @hide="errors.reset">
         <p>
             Please try again or contact
             <MailAddress /> for support.
         </p>
-        <GInfo v-for="(error, i) in errorsStore.errors" :key="i" error>{{ error }}</GInfo>
+        <GInfo v-for="(error, i) in errors.errors" :key="i" error>{{ error }}</GInfo>
     </GModal>
 </template>
 
 <script setup lang="ts">
 import stores from "@/stores"
 
-const errorsStore = stores.useErrors()
+const errors = stores.useErrors()
 const userStore = stores.useUser()
 
 onMounted(() => {

client/components.d.ts

@@ -43,12 +43,12 @@ export function browserDownloadResponseFile(response: BlobResponse): void {
  * https://medium.com/@fakiolinho/handle-blobs-requests-with-axios-the-right-way-bb905bdb1c04
  * @param error Axios error.
  * @param intent Human readable explanation.
- * @param app appStore.
+ * @param errors errorStore.
  */
 export function handleBlobError(
     error: AxiosError<Blob>,
     intent: string,
-    app: any,
+    errors: any,
 ): void {
     const reader = new FileReader()
     // Setup the onload that fires after reading.
@@ -59,7 +59,7 @@ export function handleBlobError(
                 data: json,
             },
         } as AxiosError<ErrorMessage>
-        app.handleServerError(intent, errObj)
+        errors.handle(intent, errObj)
     }
     // Now, read.
     reader.readAsText(error.response?.data as Blob)

client/docker-compose.yml

@@ -21,6 +21,7 @@ const classes = {
 
 <style scoped lang="scss">
 .icon {
+    position: absolute;
     height: 40px;
     width: 40px;
     animation: spin 4s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;

client/src/App.vue

@@ -76,6 +76,7 @@ button {
 
     &.plain {
         background-color: var(--white);
+        border: 1px solid var(--int-grey);
     }
 
     // Only use hover & active when not disabled.