- add controlled geoera vocabular for tethys keywords

- add new SearchCategoryAutocomplete.vue for autocomplete search with filtered categories
- npm updates

app/Controllers/Http/Submitter/DatasetController.ts

@@ -201,7 +201,11 @@ export default class DatasetController {
             }),
             subjects: schema.array([rules.minLength(3)]).members(
                 schema.object().members({
-                    value: schema.string({ trim: true }, [rules.minLength(3), rules.maxLength(255)]),
+                    value: schema.string({ trim: true }, [
+                        rules.minLength(3), 
+                        rules.maxLength(255),
+                        // rules.unique({ table: 'dataset_subjects', column: 'value' }),
+                    ]),
                     // type: schema.enum(Object.values(TitleTypes)),
                     language: schema.string({ trim: true }, [
                         rules.minLength(2),

package-lock.json

@@ -17,8 +17,8 @@
         "@adonisjs/view": "^6.1.5",
         "@eidellev/adonis-stardust": "^3.0.0",
         "@eidellev/inertia-adonisjs": "^8.0.0",
-        "@fontsource/archivo-black": "^4.5.9",
+        "@fontsource/archivo-black": "^5.0.1",
-        "@fontsource/inter": "^4.5.15",
+        "@fontsource/inter": "^5.0.1",
         "@inertiajs/inertia": "^0.11.1",
         "@inertiajs/vue3": "^1.0.0",
         "bcryptjs": "^2.4.3",
@@ -446,21 +446,21 @@
       }
     },
     "node_modules/@adonisjs/lucid": {
-      "version": "18.3.0",
+      "version": "18.4.0",
-      "resolved": "https://registry.npmjs.org/@adonisjs/lucid/-/lucid-18.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/@adonisjs/lucid/-/lucid-18.4.0.tgz",
-      "integrity": "sha512-EgLgwP/VkTdOjA4MvnXjZmXGJl1qQVpGe4D/bCZqyO4859LZ/kHZ5a4VXe5+b2Nk4QDWF8uYq0MbSMDGskZr1Q==",
+      "integrity": "sha512-pSBhKFzqr6mWoeIiGdcW2OQIWAyCoLn+G7VmXXLqxHvGm+9SaioKJaSMmaJa0xgS5v64r/MVLeH/nw87Q4KpyQ==",
       "dependencies": {
-        "@faker-js/faker": "^7.6.0",
+        "@faker-js/faker": "^8.0.1",
         "@poppinss/hooks": "^5.0.3",
         "@poppinss/utils": "^5.0.0",
         "fast-deep-equal": "^3.1.3",
         "igniculus": "^1.5.0",
-        "knex": "^2.3.0",
+        "knex": "^2.4.2",
-        "knex-dynamic-connection": "^3.0.0",
+        "knex-dynamic-connection": "^3.0.1",
-        "luxon": "^3.1.0",
+        "luxon": "^3.3.0",
         "macroable": "^7.0.2",
         "pretty-hrtime": "^1.0.3",
-        "qs": "^6.11.0",
+        "qs": "^6.11.2",
         "slash": "^3.0.0",
         "tarn": "^3.0.2"
       },
@@ -2670,32 +2670,38 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.40.0",
+      "version": "8.41.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.40.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.41.0.tgz",
-      "integrity": "sha512-ElyB54bJIhXQYVKjDSvCkPO1iU1tSAeVQJbllWJq1XQSmmA4dgFk8CbiBGpiOPxleE48vDogxCtmMYku4HSVLA==",
+      "integrity": "sha512-LxcyMGxwmTh2lY9FwHPGWOHmYFCZvbrFCBZL4FzSSsxsRPuhrYUg/49/0KDfW8tnIEaEHtfmn6+NPN+1DqaNmA==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/@faker-js/faker": {
-      "version": "7.6.0",
+      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-7.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@faker-js/faker/-/faker-8.0.1.tgz",
-      "integrity": "sha512-XK6BTq1NDMo9Xqw/YkYyGjSsg44fbNwYRx7QK2CuoQgyy+f1rrTDHoExVM5PsyXCtfl2vs2vVJ0MN0yN6LppRw==",
+      "integrity": "sha512-kbh5MenpTN9U0B4QcOI1NoTPlZHniSYQ3BHbhAnPjJGAmmFqxoxTE4sGdpy7ZOO9038DPGCuhXyMkjOr05uVwA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/fakerjs"
+        }
+      ],
       "engines": {
-        "node": ">=14.0.0",
+        "node": "^14.17.0 || ^16.13.0 || >=18.0.0",
-        "npm": ">=6.0.0"
+        "npm": ">=6.14.13"
       }
     },
     "node_modules/@fontsource/archivo-black": {
-      "version": "4.5.9",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@fontsource/archivo-black/-/archivo-black-4.5.9.tgz",
+      "resolved": "https://registry.npmjs.org/@fontsource/archivo-black/-/archivo-black-5.0.1.tgz",
-      "integrity": "sha512-4RJFvUub8nW1GGXxznLqtdh0DuFUTti7/uTzZ/Gs9SRq9bdiMqwZ+0SsF/mA8uERO37kg/YJuQ5fydJCi/DD5Q=="
+      "integrity": "sha512-6p8nR39OPCmPrT0eTQukdwrjbTWKHAQqtXgbgjDFqwx376cr0FTxMl2NFdEJu0dXYWj6nLR3WvljiBXAuaiWLw=="
     },
     "node_modules/@fontsource/inter": {
-      "version": "4.5.15",
+      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-4.5.15.tgz",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.0.1.tgz",
-      "integrity": "sha512-FzleM9AxZQK2nqsTDtBiY0PMEVWvnKnuu2i09+p6DHvrHsuucoV2j0tmw+kAT3L4hvsLdAIDv6MdGehsPIdT+Q=="
+      "integrity": "sha512-jezFhHp0HcVy2t6M6r89EcxkT30vx0ofGauveQWQ81j70N/wNDYs4zI+sedeend6zF9GXIEqpOTO2D1k7VQX4w=="
     },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
@@ -2731,9 +2737,9 @@
       "dev": true
     },
     "node_modules/@inertiajs/core": {
-      "version": "1.0.6",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@inertiajs/core/-/core-1.0.7.tgz",
-      "integrity": "sha512-l1fna4c9h2Tw8EWRGrYd8XVOsNI9rNGKLiAnTfbW+tbcpCtsoBIDmp2OZpeMsBw8tuO7qJV+V01G11nsajrJdQ==",
+      "integrity": "sha512-hb9XP+TVNdYoI3+3dx2Myp16w/WmqDCvTMl0o8SfFG6xSAJItihytrm0BJUNkV1PnId1qp0RUswOFZ8I8u3hzg==",
       "dependencies": {
         "axios": "^1.2.0",
         "deepmerge": "^4.0.0",
@@ -2762,11 +2768,11 @@
       }
     },
     "node_modules/@inertiajs/vue3": {
-      "version": "1.0.6",
+      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-1.0.6.tgz",
+      "resolved": "https://registry.npmjs.org/@inertiajs/vue3/-/vue3-1.0.7.tgz",
-      "integrity": "sha512-s5I0SMm687RTH7L1sJ06tYLRJIxmYN5Y83fBKfP+ThnleBAjWq4kT1eMGXPWxvL8T7qu6rIjkrx4NsG89st4DA==",
+      "integrity": "sha512-WEQEsgYiEWCzLo3EmgK6UsujfO/q2CI1Dc6/iD55/JoS+RHqkNMbryteuBiwd56+6al+gBgzLYSlSYMBfEcHMg==",
       "dependencies": {
-        "@inertiajs/core": "1.0.6",
+        "@inertiajs/core": "1.0.7",
         "lodash.clonedeep": "^4.5.0",
         "lodash.isequal": "^4.5.0"
       },
@@ -3840,9 +3846,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "20.2.1",
+      "version": "20.2.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.3.tgz",
-      "integrity": "sha512-DqJociPbZP1lbZ5SQPk4oag6W7AyaGMO6gSfRwq3PWl4PXTwJpRQJhDq4W0kzrg3w6tJ1SwlvGZ5uKFHY13LIg=="
+      "integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw=="
     },
     "node_modules/@types/pino": {
       "version": "6.3.12",
@@ -5193,9 +5199,9 @@
       }
     },
     "node_modules/astring": {
-      "version": "1.8.4",
+      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/astring/-/astring-1.8.4.tgz",
+      "resolved": "https://registry.npmjs.org/astring/-/astring-1.8.5.tgz",
-      "integrity": "sha512-97a+l2LBU3Op3bBQEff79i/E4jMD2ZLFD8rHx9B6mXyB2uQwhJQYfiDqUwtfjF4QA1F2qs//N6Cw8LetMbQjcw==",
+      "integrity": "sha512-TuBbdn7jWVzf8dmFGTaRpW8qgANtWLi1qJLnkfGO5uVf6jf9f/F4B1H35tnOI+qVYZo3p3i8WZlbZOuPAE0wEA==",
       "bin": {
         "astring": "bin/astring"
       }
@@ -7540,9 +7546,9 @@
       "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.401",
+      "version": "1.4.402",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.401.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.402.tgz",
-      "integrity": "sha512-AswqHsYyEbfSn0x87n31Na/xttUqEAg7NUjpiyxC20MaWKLyadOYHMzyLdF78N1iw+FK8/2KHLpZxRdyRILgtA==",
+      "integrity": "sha512-gWYvJSkohOiBE6ecVYXkrDgNaUjo47QEKK0kQzmWyhkH+yoYiG44bwuicTGNSIQRG3WDMsWVZJLRnJnLNkbWvA==",
       "dev": true
     },
     "node_modules/emittery": {
@@ -7690,15 +7696,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.40.0",
+      "version": "8.41.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.40.0.tgz",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.41.0.tgz",
-      "integrity": "sha512-bvR+TsP9EHL3TqNtj9sCNJVAFK3fBN8Q7g5waghxyRsPLIMwL73XSKnZFK0hk/O2ANC+iAoq6PWMQ+IfBAJIiQ==",
+      "integrity": "sha512-WQDQpzGBOP5IrXPo4Hc0814r4/v2rrIsB0rhT7jtunIalgg6gYXWhRMOejVO8yH21T/FGaxjmFjBMNqcIlmH1Q==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.3",
-        "@eslint/js": "8.40.0",
+        "@eslint/js": "8.41.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -7718,13 +7724,12 @@
         "find-up": "^5.0.0",
         "glob-parent": "^6.0.2",
         "globals": "^13.19.0",
-        "grapheme-splitter": "^1.0.4",
+        "graphemer": "^1.4.0",
         "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
         "is-path-inside": "^3.0.3",
-        "js-sdsl": "^4.1.4",
         "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
@@ -9128,6 +9133,12 @@
       "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==",
       "dev": true
     },
+    "node_modules/graphemer": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
+      "dev": true
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -10448,16 +10459,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/js-sdsl": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.4.0.tgz",
-      "integrity": "sha512-FfVSdx6pJ41Oa+CF7RDaFmTnCaFhua+SNYQX74riGOpl96x+2jQCqEfQ2bnXu/5DPCqlRuiqyvTJM0Qjz26IVg==",
-      "dev": true,
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/js-sdsl"
-      }
-    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -10650,15 +10651,12 @@
       }
     },
     "node_modules/knex-dynamic-connection": {
-      "version": "3.0.0",
+      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/knex-dynamic-connection/-/knex-dynamic-connection-3.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/knex-dynamic-connection/-/knex-dynamic-connection-3.0.1.tgz",
-      "integrity": "sha512-LSUlabH/5QHTzMxd8d+bhbiBAivV7QdtE4zPI2CfKYbx+uV1gqaN5Ua5AZc/O7kGAQJ4q35/4gUheCoHGPUHzg==",
+      "integrity": "sha512-1H/Gif1FQVxBiBPVqxHnnHIIBTXkpp/2dpwOJw1nNkoTZ3FnX9Ta1fgRPKojzc9nbQnn1FDhlxmEXBjvD+u8tQ==",
       "dependencies": {
         "debug": "^4.3.4",
-        "knex": "^2.0.0"
+        "knex": "^2.4.2"
-      },
-      "peerDependencies": {
-        "knex": "^2.0.0"
       }
     },
     "node_modules/launch-editor": {
@@ -11010,18 +11008,15 @@
       }
     },
     "node_modules/marked-terminal/node_modules/type-fest": {
-      "version": "3.10.0",
+      "version": "3.11.0",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.10.0.tgz",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.11.0.tgz",
-      "integrity": "sha512-hmAPf1datm+gt3c2mvu0sJyhFy6lTkIGf0GzyaZWxRLnabQfPUqg6tF95RPg6sLxKI7nFLGdFxBcf2/7+GXI+A==",
+      "integrity": "sha512-JaPw5U9ixP0XcpUbQoVSbxSDcK/K4nww20C3kjm9yE6cDRRhptU28AH60VWf9ltXmCrIfIbtt9J+2OUk2Uqiaw==",
       "dev": true,
       "engines": {
         "node": ">=14.16"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
-      },
-      "peerDependencies": {
-        "typescript": ">=4.7.0"
       }
     },
     "node_modules/md5": {
@@ -11467,9 +11462,9 @@
       }
     },
     "node_modules/naive-ui": {
-      "version": "2.34.3",
+      "version": "2.34.4",
-      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.34.3.tgz",
+      "resolved": "https://registry.npmjs.org/naive-ui/-/naive-ui-2.34.4.tgz",
-      "integrity": "sha512-fUMr0dzb/iGsOTWgoblPVobY5X5dihQ1eam5dA+H74oyLYAvgX4pL96xQFPBLIYqvyRFBAsN85kHN5pLqdtpxA==",
+      "integrity": "sha512-aPG8PDfhSzIzn/jSC9y3Jb3Pe2wHJ7F0cFV1EWlbImSrZECeUmoc+fIcOSWbizoztkKfaUAeKwYdMl09MKkj1g==",
       "dev": true,
       "dependencies": {
         "@css-render/plugin-bem": "^0.15.10",
@@ -11489,7 +11484,7 @@
         "treemate": "^0.3.11",
         "vdirs": "^0.1.8",
         "vooks": "^0.2.12",
-        "vueuc": "^0.4.47"
+        "vueuc": "^0.4.51"
       },
       "peerDependencies": {
         "vue": "^3.0.0"
@@ -11595,9 +11590,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.10",
+      "version": "2.0.11",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.11.tgz",
-      "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==",
+      "integrity": "sha512-+M0PwXeU80kRohZ3aT4J/OnR+l9/KD2nVLNNoRgFtnf+umQVFdGBAO2N8+nCnEi0xlh/Wk3zOGC+vNNx+uM79Q==",
       "dev": true
     },
     "node_modules/node-repl-await": {
@@ -15278,9 +15273,9 @@
       }
     },
     "node_modules/swagger-parser/node_modules/openapi-types": {
-      "version": "12.1.0",
+      "version": "12.1.1",
-      "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/openapi-types/-/openapi-types-12.1.1.tgz",
-      "integrity": "sha512-XpeCy01X6L5EpP+6Hc3jWN7rMZJ+/k1lwki/kTmWzbVhdPie3jd5O2ZtedEx8Yp58icJ0osVldLMrTB/zslQXA==",
+      "integrity": "sha512-m/DJaEqOUDSU8KoI74E6A3TokccuDOJ81ewZ6kLFwUT1KEIE0GDWvErtnJJDU4sySx8JKF5kk2GzHUuK6f+VHA==",
       "dev": true,
       "peer": true
     },

package.json

@@ -82,8 +82,8 @@
     "@adonisjs/view": "^6.1.5",
     "@eidellev/adonis-stardust": "^3.0.0",
     "@eidellev/inertia-adonisjs": "^8.0.0",
-    "@fontsource/archivo-black": "^4.5.9",
+    "@fontsource/archivo-black": "^5.0.1",
-    "@fontsource/inter": "^4.5.15",
+    "@fontsource/inter": "^5.0.1",
     "@inertiajs/inertia": "^0.11.1",
     "@inertiajs/vue3": "^1.0.0",
     "bcryptjs": "^2.4.3",

public/assets/manifest.json

@@ -1,15 +1,22 @@
 {
   "assets/app.css": "http://localhost:8080/assets/app.css",
   "assets/app.js": "http://localhost:8080/assets/app.js",
-  "assets/fonts/inter-all-400-normal.woff": "http://localhost:8080/assets/fonts/inter-all-400-normal.8c804432.woff",
+  "assets/fonts/archivo-black-latin-ext-400-normal.woff": "http://localhost:8080/assets/fonts/archivo-black-latin-ext-400-normal.9a3ae50b.woff",
-  "assets/fonts/archivo-black-all-400-normal.woff": "http://localhost:8080/assets/fonts/archivo-black-all-400-normal.da68e413.woff",
+  "assets/fonts/inter-latin-ext-400-normal.woff": "http://localhost:8080/assets/fonts/inter-latin-ext-400-normal.3ccf1334.woff",
+  "assets/fonts/archivo-black-latin-400-normal.woff": "http://localhost:8080/assets/fonts/archivo-black-latin-400-normal.3261f2bf.woff",
+  "assets/fonts/inter-latin-400-normal.woff": "http://localhost:8080/assets/fonts/inter-latin-400-normal.662f2907.woff",
   "assets/fonts/inter-latin-ext-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-latin-ext-400-normal.3a7a7652.woff2",
   "assets/fonts/archivo-black-latin-400-normal.woff2": "http://localhost:8080/assets/fonts/archivo-black-latin-400-normal.fc847a1f.woff2",
   "assets/fonts/inter-latin-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-latin-400-normal.be7cb18d.woff2",
   "assets/fonts/archivo-black-latin-ext-400-normal.woff2": "http://localhost:8080/assets/fonts/archivo-black-latin-ext-400-normal.21761451.woff2",
+  "assets/fonts/inter-cyrillic-ext-400-normal.woff": "http://localhost:8080/assets/fonts/inter-cyrillic-ext-400-normal.3c63e274.woff",
+  "assets/fonts/inter-greek-400-normal.woff": "http://localhost:8080/assets/fonts/inter-greek-400-normal.b31b8612.woff",
   "assets/fonts/inter-cyrillic-ext-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-cyrillic-ext-400-normal.fcc125c4.woff2",
+  "assets/fonts/inter-cyrillic-400-normal.woff": "http://localhost:8080/assets/fonts/inter-cyrillic-400-normal.3862a5ab.woff",
   "assets/fonts/inter-greek-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-greek-400-normal.0278a49f.woff2",
+  "assets/fonts/inter-greek-ext-400-normal.woff": "http://localhost:8080/assets/fonts/inter-greek-ext-400-normal.61350b97.woff",
   "assets/fonts/inter-cyrillic-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-cyrillic-400-normal.8684fef6.woff2",
+  "assets/fonts/inter-vietnamese-400-normal.woff": "http://localhost:8080/assets/fonts/inter-vietnamese-400-normal.e0aaa99d.woff",
   "assets/fonts/inter-greek-ext-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-greek-ext-400-normal.3f642a92.woff2",
   "assets/fonts/inter-vietnamese-400-normal.woff2": "http://localhost:8080/assets/fonts/inter-vietnamese-400-normal.789afb71.woff2",
   "assets/images/marker-icon.png": "http://localhost:8080/assets/images/marker-icon.2b3e1faf.png",

resources/js/Components/FormControl.vue

@@ -110,7 +110,7 @@ if (props.ctrlKFocus) {
 
 <template>
     <div class="relative">
-        <select v-if="computedType === 'select'" :id="id" v-model="computedValue" :name="name" :class="inputElClass">
+        <select v-if="computedType === 'select'" :id="id" v-model="computedValue" :name="name" :class="inputElClass" :disabled="isReadOnly">
             <option v-if="placeholder" class="text-opacity-25" value="" disabled selected>{{ placeholder }}</option>
             <option v-for="(option, index) in options" :key="index" :value="option.value ?? index">
                 {{ option.label ?? option }}

resources/js/Components/SearchAutocomplete.vue

@@ -144,7 +144,7 @@ let search = ref('');
 let data = reactive({
     search: search,
     isOpen: false,
-    results: [],
+    results: [] as Array<any>,
 });
 let error = ref('');
 let selectedIndex: Ref<number> = ref(0);

resources/js/Components/SearchCategoryAutocomplete.vue

@@ -0,0 +1,430 @@
+<template>
+    <div class="relative">
+        <div class="flex">
+            <!-- <label for="search-dropdown" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Your Email</label> -->
+            <div class="relative" data-te-dropdown-ref>
+                <button
+                    id="states-button"
+                    data-dropdown-toggle="dropdown-states"
+                    class="whitespace-nowrap h-12 z-10 inline-flex items-center py-2.5 px-4 text-sm font-medium text-center text-gray-500 bg-gray-100 border border-gray-300 rounded-l-lg hover:bg-gray-200 focus:ring-4 focus:outline-none focus:ring-gray-100 dark:bg-gray-700 dark:hover:bg-gray-600 dark:focus:ring-gray-700 dark:text-white dark:border-gray-600"
+                    type="button"
+                    @click.prevent="showStates"
+                >
+                    <!-- <svg aria-hidden="true" class="h-3 mr-2" viewBox="0 0 15 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <rect x="0.5" width="14" height="12" rx="2" fill="white" />
+                <mask id="mask0_12694_49953" style="mask-type: alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="12">
+                    <rect x="0.5" width="14" height="12" rx="2" fill="white" />
+                </mask>
+                <g mask="url(#mask0_12694_49953)">
+                    <path
+                        fill-rule="evenodd"
+                        clip-rule="evenodd"
+                        d="M14.5 0H0.5V0.8H14.5V0ZM14.5 1.6H0.5V2.4H14.5V1.6ZM0.5 3.2H14.5V4H0.5V3.2ZM14.5 4.8H0.5V5.6H14.5V4.8ZM0.5 6.4H14.5V7.2H0.5V6.4ZM14.5 8H0.5V8.8H14.5V8ZM0.5 9.6H14.5V10.4H0.5V9.6ZM14.5 11.2H0.5V12H14.5V11.2Z"
+                        fill="#D02F44"
+                    />
+                    <rect x="0.5" width="6" height="5.6" fill="#46467F" />
+                    <g filter="url(#filter0_d_12694_49953)">
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M1.83317 1.20005C1.83317 1.42096 1.68393 1.60005 1.49984 1.60005C1.31574 1.60005 1.1665 1.42096 1.1665 1.20005C1.1665 0.979135 1.31574 0.800049 1.49984 0.800049C1.68393 0.800049 1.83317 0.979135 1.83317 1.20005ZM3.1665 1.20005C3.1665 1.42096 3.01727 1.60005 2.83317 1.60005C2.64908 1.60005 2.49984 1.42096 2.49984 1.20005C2.49984 0.979135 2.64908 0.800049 2.83317 0.800049C3.01727 0.800049 3.1665 0.979135 3.1665 1.20005ZM4.1665 1.60005C4.3506 1.60005 4.49984 1.42096 4.49984 1.20005C4.49984 0.979135 4.3506 0.800049 4.1665 0.800049C3.98241 0.800049 3.83317 0.979135 3.83317 1.20005C3.83317 1.42096 3.98241 1.60005 4.1665 1.60005ZM5.83317 1.20005C5.83317 1.42096 5.68393 1.60005 5.49984 1.60005C5.31574 1.60005 5.1665 1.42096 5.1665 1.20005C5.1665 0.979135 5.31574 0.800049 5.49984 0.800049C5.68393 0.800049 5.83317 0.979135 5.83317 1.20005ZM2.1665 2.40005C2.3506 2.40005 2.49984 2.22096 2.49984 2.00005C2.49984 1.77913 2.3506 1.60005 2.1665 1.60005C1.98241 1.60005 1.83317 1.77913 1.83317 2.00005C1.83317 2.22096 1.98241 2.40005 2.1665 2.40005ZM3.83317 2.00005C3.83317 2.22096 3.68393 2.40005 3.49984 2.40005C3.31574 2.40005 3.1665 2.22096 3.1665 2.00005C3.1665 1.77913 3.31574 1.60005 3.49984 1.60005C3.68393 1.60005 3.83317 1.77913 3.83317 2.00005ZM4.83317 2.40005C5.01726 2.40005 5.1665 2.22096 5.1665 2.00005C5.1665 1.77913 5.01726 1.60005 4.83317 1.60005C4.64908 1.60005 4.49984 1.77913 4.49984 2.00005C4.49984 2.22096 4.64908 2.40005 4.83317 2.40005ZM5.83317 2.80005C5.83317 3.02096 5.68393 3.20005 5.49984 3.20005C5.31574 3.20005 5.1665 3.02096 5.1665 2.80005C5.1665 2.57914 5.31574 2.40005 5.49984 2.40005C5.68393 2.40005 5.83317 2.57914 5.83317 2.80005ZM4.1665 3.20005C4.3506 3.20005 4.49984 3.02096 4.49984 2.80005C4.49984 2.57914 4.3506 2.40005 4.1665 2.40005C3.98241 2.40005 3.83317 2.57914 3.83317 2.80005C3.83317 3.02096 3.98241 3.20005 4.1665 3.20005ZM3.1665 2.80005C3.1665 3.02096 3.01727 3.20005 2.83317 3.20005C2.64908 3.20005 2.49984 3.02096 2.49984 2.80005C2.49984 2.57914 2.64908 2.40005 2.83317 2.40005C3.01727 2.40005 3.1665 2.57914 3.1665 2.80005ZM1.49984 3.20005C1.68393 3.20005 1.83317 3.02096 1.83317 2.80005C1.83317 2.57914 1.68393 2.40005 1.49984 2.40005C1.31574 2.40005 1.1665 2.57914 1.1665 2.80005C1.1665 3.02096 1.31574 3.20005 1.49984 3.20005ZM2.49984 3.60005C2.49984 3.82096 2.3506 4.00005 2.1665 4.00005C1.98241 4.00005 1.83317 3.82096 1.83317 3.60005C1.83317 3.37913 1.98241 3.20005 2.1665 3.20005C2.3506 3.20005 2.49984 3.37913 2.49984 3.60005ZM3.49984 4.00005C3.68393 4.00005 3.83317 3.82096 3.83317 3.60005C3.83317 3.37913 3.68393 3.20005 3.49984 3.20005C3.31574 3.20005 3.1665 3.37913 3.1665 3.60005C3.1665 3.82096 3.31574 4.00005 3.49984 4.00005ZM5.1665 3.60005C5.1665 3.82096 5.01726 4.00005 4.83317 4.00005C4.64908 4.00005 4.49984 3.82096 4.49984 3.60005C4.49984 3.37913 4.64908 3.20005 4.83317 3.20005C5.01726 3.20005 5.1665 3.37913 5.1665 3.60005ZM5.49984 4.80005C5.68393 4.80005 5.83317 4.62096 5.83317 4.40005C5.83317 4.17913 5.68393 4.00005 5.49984 4.00005C5.31574 4.00005 5.1665 4.17913 5.1665 4.40005C5.1665 4.62096 5.31574 4.80005 5.49984 4.80005ZM4.49984 4.40005C4.49984 4.62096 4.3506 4.80005 4.1665 4.80005C3.98241 4.80005 3.83317 4.62096 3.83317 4.40005C3.83317 4.17913 3.98241 4.00005 4.1665 4.00005C4.3506 4.00005 4.49984 4.17913 4.49984 4.40005ZM2.83317 4.80005C3.01727 4.80005 3.1665 4.62096 3.1665 4.40005C3.1665 4.17913 3.01727 4.00005 2.83317 4.00005C2.64908 4.00005 2.49984 4.17913 2.49984 4.40005C2.49984 4.62096 2.64908 4.80005 2.83317 4.80005ZM1.83317 4.40005C1.83317 4.62096 1.68393 4.80005 1.49984 4.80005C1.31574 4.80005 1.1665 4.62096 1.1665 4.40005C1.1665 4.17913 1.31574 4.00005 1.49984 4.00005C1.68393 4.00005 1.83317 4.17913 1.83317 4.40005Z"
+                            fill="url(#paint0_linear_12694_49953)"
+                        />
+                    </g>
+                </g>
+                <defs>
+                    <filter
+                        id="filter0_d_12694_49953"
+                        x="1.1665"
+                        y="0.800049"
+                        width="4.6665"
+                        height="5"
+                        filterUnits="userSpaceOnUse"
+                        color-interpolation-filters="sRGB"
+                    >
+                        <feFlood flood-opacity="0" result="BackgroundImageFix" />
+                        <feColorMatrix
+                            in="SourceAlpha"
+                            type="matrix"
+                            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+                            result="hardAlpha"
+                        />
+                        <feOffset dy="1" />
+                        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0" />
+                        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_12694_49953" />
+                        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_12694_49953" result="shape" />
+                    </filter>
+                    <linearGradient
+                        id="paint0_linear_12694_49953"
+                        x1="1.1665"
+                        y1="0.800049"
+                        x2="1.1665"
+                        y2="4.80005"
+                        gradientUnits="userSpaceOnUse"
+                    >
+                        <stop stop-color="white" />
+                        <stop offset="1" stop-color="#F0F0F0" />
+                    </linearGradient>
+                </defs>
+            </svg> -->
+                    <!-- eng -->
+                    {{ language }}
+                    <svg aria-hidden="true" class="w-4 h-4 ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fill-rule="evenodd"
+                            d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                            clip-rule="evenodd"
+                        ></path>
+                    </svg>
+                </button>
+                <!-- class="w-full overflow-visible z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"-->
+                <div
+                    id="dropdown-states"
+                    v-show="statesToggle"
+                    class="absolute z-[1000] float-left m-0 min-w-max list-none overflow-hidden rounded-lg border-none bg-white bg-clip-padding text-left text-base shadow-lg dark:bg-neutral-700"
+                >
+                    <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="states-button">
+                        <li v-for="(item, index) in dropDownStates" :key="index" @click.prevent="setLanguage(item)">
+                            <button
+                                type="button"
+                                class="inline-flex w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-600 dark:hover:text-white"
+                            >
+                                <div class="inline-flex items-center">
+                                    <span v-html="item.svg"></span>
+                                    {{ item.name }}
+                                </div>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+
+            <div class="w-full relative">
+                <!-- :class="inputElClass" -->
+                <!-- class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-r-lg border-l-gray-50 border-l-2 border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-l-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500" -->
+                <input
+                    v-model="computedValue"
+                    type="text"
+                    :name="props.name"
+                    autocomplete="off"
+                    :class="inputElClass"
+                    placeholder="Search Keywords..."
+                    required
+                    @input="handleInput"
+                />
+                <!-- v-model="data.search" -->
+                <svg
+                    class="w-4 h-4 absolute left-2.5 top-3.5"
+                    v-show="computedValue.length < 2"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                </svg>
+
+                <svg
+                    class="w-4 h-4 absolute left-2.5 top-3.5"
+                    v-show="computedValue.length >= 2"
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke="currentColor"
+                    @click="
+                        () => {
+                            computedValue = '';
+                            data.isOpen = false;
+                        }
+                    "
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </div>
+            <slot />
+        </div>
+        <ul
+            v-if="data.isOpen"
+            class="absolute absolute z-[1000] float-left m-0 list-none bg-white dark:bg-slate-800 m-0 max-h-32 overflow-y-auto scroll-smooth min-w-full"
+        >
+            <li
+                class="leading-3 pl-4 py-3 border-b-2 line border-gray-100 relative cursor-pointer hover:bg-yellow-50 hover:text-gray-900"
+                v-for="(item, index) in data.results"
+                @click.prevent="setResult(item)"
+                :key="index"
+            >
+                <!-- <a href="${BASE}?uri=${a.s.value}&lang=${USER_LANG}"> -->
+                <strong class="text-sm"> {{ item.title.value }}</strong>
+                <!-- </a> -->
+                <br />
+                <!-- <span class="searchPropTyp">URI: </span>
+                <span class="searchResultURI text-info"> {{ item.s.value }} </span> -->
+                <br />
+                <!-- <p class="searchResultText">{{ createSearchResultsText(item.text.value, searchText) }}</p> -->
+            </li>
+        </ul>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref, computed, Ref } from 'vue';
+import axios from 'axios';
+
+let props = defineProps({
+    name: {
+        type: String,
+        required: false,
+        default: 'autocomplete',
+    },
+    // source: {
+    //     type: [String, Array, Function],
+    //     required: true,
+    //     default: '',
+    // },
+    label: {
+        type: String,
+        required: false,
+        default: 'name',
+    },
+    responseProperty: {
+        type: String,
+        required: false,
+        default: 'name',
+    },
+    placeholder: {
+        type: String,
+        default: null,
+    },
+    icon: {
+        type: String,
+        default: null,
+    },
+    modelValue: {
+        type: String,
+        default: '',
+    },
+    required: Boolean,
+    borderless: Boolean,
+    transparent: Boolean,
+    ctrlKFocus: Boolean,
+});
+
+const emit = defineEmits(['update:modelValue', 'subject']);
+let computedValue = computed({
+    get: () => props.modelValue,
+    set: (value) => {
+        // props.modelValue = value;
+        emit('update:modelValue', value);
+    },
+});
+
+// const dropDownClass = computed(() => {
+//     const base = [
+//         'z-10 bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700',
+//         props.borderless ? 'border-0' : 'border',
+//         props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
+//         // props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
+//         statesToggle.value == true ? 'block' : 'hidden',
+//     ];
+//     return base;
+// });
+
+const inputElClass = computed(() => {
+    // class="block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-r-lg border-l-gray-50 border-l-2 border border-gray-300
+    // focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-l-gray-700 dark:border-gray-600
+    // dark:placeholder-gray-400 dark:text-white dark:focus:border-blue-500"
+    const base = [
+        'block p-2.5 w-full z-20 text-sm text-gray-900 bg-gray-50 rounded-r-lg',
+        'dark:placeholder-gray-400',
+        'h-12',
+        props.borderless ? 'border-0' : 'border',
+        props.transparent ? 'bg-transparent' : 'bg-white dark:bg-slate-800',
+        // props.isReadOnly ? 'bg-gray-50 dark:bg-slate-600' : 'bg-white dark:bg-slate-800',
+    ];
+    // if (props.icon) {
+    base.push('pl-10');
+    // }
+    return base;
+});
+
+// let search = ref('');
+let data = reactive({
+    // search: search,
+    isOpen: false,
+    results: [] as Array<any>,
+});
+let error = ref('');
+// let selectedIndex: Ref<number> = ref(0);
+// const ul: Ref<Array<HTMLLIElement>> = ref([]);
+
+let dropDownStates = reactive([
+    {
+        name: 'English',
+        label: 'en',
+        svg: `
+        <svg aria-hidden="true" class="h-3.5 w-3.5 rounded-full mr-2" xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 512 512">
+            <path fill="#bd3d44" d="M0 0h640v480H0"/>
+            <path stroke="#fff" stroke-width="37" d="M0 55.3h640M0 129h640M0 203h640M0 277h640M0 351h640M0 425h640"/>
+            <path fill="#192f5d" d="M0 0h364.8v258.5H0"/>
+            <marker id="a" markerHeight="30" markerWidth="30">
+                <path fill="#fff" d="m14 0 9 27L0 10h28L5 27z"/>
+            </marker>
+            <path fill="none" marker-mid="url(#a)" d="m0 0 16 11h61 61 61 61 60L47 37h61 61 60 61L16 63h61 61 61 61 60L47 89h61 61 60 61L16 115h61 61 61 61 60L47 141h61 61 60 61L16 166h61 61 61 61 60L47 192h61 61 60 61L16 218h61 61 61 61 60L0 0"/>
+        </svg>`,
+    },
+    {
+        name: 'German',
+        label: 'de',
+        svg: `
+        <svg aria-hidden="true" class="h-3.5 w-3.5 rounded-full mr-2" xmlns="http://www.w3.org/2000/svg" id="flag-icons-at" viewBox="0 0 512 512">
+            <g fill-rule="evenodd">
+                <path fill="#fff" d="M640 480H0V0h640z"/>
+                <path fill="#c8102e" d="M640 480H0V320h640zm0-319.9H0V.1h640z"/>
+            </g>
+        </svg>`,
+    },
+]);
+let statesToggle: Ref<boolean> = ref(false);
+const showStates = () => {
+    // let map: Map = this.mapService.getMap(this.mapId);
+    // const bounds: LatLngBoundsExpression = toLatLngBounds(this.southWest, this.northEast);
+    // map.fitBounds(bounds);
+
+    // if (_enabled.value == true) {
+    //     disable();
+    // } else {
+    //     enable();
+    // }
+    statesToggle.value = !statesToggle.value;
+};
+let language = ref('de');
+const setLanguage = (item) => {
+    language.value = item.label;
+    // console.log(language.value);
+    // close selection list
+    statesToggle.value = false;
+
+    // data.search = '';
+    computedValue.value = '';
+    data.isOpen = false;
+};
+
+const ENDPOINT = 'https://resource.geolba.ac.at/PoolParty/sparql/geoera';
+// const USER_LANG = 'de';
+
+// watch(search, async () => {
+//     await onChange();
+// });
+
+async function handleInput(e: Event) {
+    const target = <HTMLInputElement>e.target;
+
+    console.log(target.value);
+    if (computedValue.value.length >= 2) {
+        data.isOpen = true;
+        return await request(ENDPOINT, computedValue.value);
+    } else {
+        data.results = [];
+        data.isOpen = false;
+    }
+}
+
+// async function onChange() {
+//     if (!data.search) return false;
+
+//     // selectedIndex.value = 0;
+
+//     if (data.search.length >= 2) {
+//         data.isOpen = true;
+//         return await request(ENDPOINT, data.search);
+//     } else {
+//         data.results = [];
+//         data.isOpen = false;
+//     }
+// }
+
+async function request(url, param) {
+    try {
+        let query = encodeURIComponent(`
+        PREFIX dcterms:<http://purl.org/dc/terms/>
+        PREFIX skos:<http://www.w3.org/2004/02/skos/core#>
+        SELECT DISTINCT ?s ?title ?text
+        WHERE {
+            VALUES ?n {"${sparqlEncode(param.toLowerCase())}"}
+            VALUES ?p { skos:prefLabel skos:altLabel }
+            ?s a skos:Concept; ?p ?lEN . FILTER((lang(?lEN)="en"))
+            OPTIONAL{?s ?p ?l . FILTER(lang(?l)="${language.value}")}
+            BIND(COALESCE(?l, ?lEN) AS ?L) . FILTER(regex(?L,?n,"i"))
+            ?s skos:prefLabel ?plEN . FILTER((lang(?plEN)="en"))
+            OPTIONAL{?s skos:prefLabel ?pl . FILTER(lang(?pl)="${language.value}")}
+            BIND(COALESCE(?pl, ?plEN) AS ?title)
+            BIND(CONCAT(STR(?p),"|",STR(?L)) AS ?text)
+            BIND(IF(?p=skos:prefLabel,1,2) AS ?sort)
+        }
+        ORDER BY ?sort
+        LIMIT 100`);
+
+        let response = await searchTerm(url + '?query=' + query + '&format=application/json');
+        error.value = '';
+        data.results = getResults(response);
+        // // this.results = res.data;
+        // // this.loading = false;
+    } catch (error) {
+        error.value = error.message;
+        // this.loading = false;
+    }
+}
+
+async function searchTerm(term: string): Promise<any> {
+    let res = await axios.get(term);
+    // console.log(res.data);
+    return res.data; //.response;//.docs;
+}
+
+function getResults(response) {
+    if (Array.isArray(response.results.bindings)) {
+        return response.results.bindings;
+    }
+    return [];
+}
+
+function sparqlEncode(str) {
+    var hex, i;
+    str = str.toLowerCase();
+    var result = '';
+    for (i = 0; i < str.length; i++) {
+        hex = str.charCodeAt(i);
+        if (hex < 32 || hex > 128) result += '\\u' + ('000' + hex.toString(16)).slice(-4);
+        else result += str.charAt(i);
+    }
+
+    return result;
+}
+
+function setResult(item) {
+    // search.value = item.title.value;
+    computedValue.value = item.title.value;
+    clear();
+    // this.$emit('person', person);
+    emit('subject', language.value);
+}
+
+function clear() {
+    // data.search = '';
+    data.isOpen = false;
+    data.results = [];
+    error.value = '';
+    // this.$emit("clear");
+}
+
+// function onEnter() {
+//     if (Array.isArray(data.results) && data.results.length && selectedIndex.value !== -1 && selectedIndex.value < data.results.length) {
+//         //this.display = this.results[this.selectedIndex];
+//         const person = data.results[selectedIndex.value];
+//         // this.$emit('person', person);
+//         emit('person', person);
+//         clear();
+//         selectedIndex.value = -1;
+//     }
+// }
+</script>

resources/js/Components/TableKeywords.vue

@@ -12,6 +12,7 @@ import BaseButton from '@/Components/BaseButton.vue';
 import { Subject } from '@/Dataset';
 // import FormField from '@/Components/FormField.vue';
 import FormControl from '@/Components/FormControl.vue';
+import SearchCategoryAutocomplete from '@/Components/SearchCategoryAutocomplete.vue';
 
 const props = defineProps({
     checkable: Boolean,
@@ -35,7 +36,9 @@ const perPage = ref(5);
 const currentPage = ref(0);
 // const checkedRows = ref([]);
 
-const itemsPaginated = computed(() => items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1)));
+const itemsPaginated = computed(() => {
+    return items.value.slice(perPage.value * currentPage.value, perPage.value * (currentPage.value + 1));
+});
 
 const numPages = computed(() => Math.ceil(items.value.length / perPage.value));
 
@@ -99,8 +102,8 @@ const removeItem = (key) => {
             <tr>
                 <!-- <th v-if="checkable" /> -->
                 <!-- <th class="hidden lg:table-cell"></th> -->
-                <th>Value</th>
                 <th>Type</th>
+                <th>Value</th>
                 <th>Language</th>
 
                 <th />
@@ -112,36 +115,60 @@ const removeItem = (key) => {
                 <!-- <td class="border-b-0 lg:w-6 before:hidden hidden lg:table-cell">
                     <UserAvatar :username="client.value" class="w-24 h-24 mx-auto lg:w-6 lg:h-6" />
                 </td> -->
+                <td data-label="Type">
+                    <FormControl
+                        required
+                        v-model="item.type"
+                        :type="'select'"
+                        placeholder="[Enter Language]"
+                        :options="{ uncontrolled: 'uncontrolled', geoera: 'geoera' }"
+                    >
+                        <div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.type`]">
+                            {{ errors[`subjects.${index}.type`].join(', ') }}
+                        </div>
+                    </FormControl>
+                </td>
+
                 <td data-label="Value">
-                    <FormControl required v-model="item.value" type="text" placeholder="[enter keyword value]" :borderless="true">
+                    <SearchCategoryAutocomplete
-                        <!-- <div class="text-red-400 text-sm" v-if="form.errors[`titles.${index}.value`]">
+                        v-if="item.type !== 'uncontrolled'"
-                                                    {{ form.errors[`titles.${index}.value`].join(', ') }}
+                        v-model="item.value"
-                                                </div> -->
+                        @subject="
+                            (language) => {
+                                item.language = language;
+                            }
+                        "
+                    >
+                        <div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.value`]">
+                            {{ errors[`subjects.${index}.value`].join(', ') }}
+                        </div>
+                    </SearchCategoryAutocomplete>
+
+                    <FormControl v-else required v-model="item.value" type="text" placeholder="[enter keyword value]" :borderless="true">
                         <div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.value`]">
                             {{ errors[`subjects.${index}.value`].join(', ') }}
                         </div>
                     </FormControl>
                 </td>
-                <td data-label="Type">
+
-                    {{ item.type }}
+                <td data-label="Language">
-                </td>
-                <td data-label="Type">
                     <FormControl
                         required
                         v-model="item.language"
                         :type="'select'"
-                        placeholder="[Enter Language]"
+                        placeholder="[Enter Lang]"
                         :options="{ de: 'de', en: 'en' }"
+                        :is-read-only="item.type != 'uncontrolled'"
                     >
                         <div class="text-red-400 text-sm" v-if="errors[`subjects.${index}.language`]">
                             {{ errors[`subjects.${index}.language`].join(', ') }}
                         </div>
                     </FormControl>
-                </td>              
+                </td>
                 <td class="before:hidden lg:w-1 whitespace-nowrap">
                     <BaseButtons type="justify-start lg:justify-end" no-wrap>
                         <!-- <BaseButton color="info" :icon="mdiEye" small @click="isModalActive = true" /> -->
-                        <BaseButton color="danger" :icon="mdiTrashCan" small @click.prevent="removeItem(index)" />
+                        <BaseButton v-if="index > 2" color="danger" :icon="mdiTrashCan" small @click.prevent="removeItem(index)" />
                     </BaseButtons>
                 </td>
             </tr>