From 5cb4fc11c4ccc381a041cb2615913a8fb77e1b85 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 4 Jan 2024 15:40:18 +0100 Subject: [PATCH 01/41] fix(front): rollback to vue 3.3 for now Because of issues like https://github.com/oruga-ui/oruga/issues/709 Signed-off-by: Thomas Citharel --- package-lock.json | 246 +++++++++++++++++++++++++++++++++++----------- package.json | 2 +- 2 files changed, 188 insertions(+), 60 deletions(-) diff --git a/package-lock.json b/package-lock.json index e394191b7..4726be6ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -71,7 +71,7 @@ "tailwindcss": "^3", "tippy.js": "^6.2.3", "unfetch": "^5.0.0", - "vue": "^3.2.37", + "vue": "3.3.13", "vue-i18n": "9", "vue-material-design-icons": "^5.1.2", "vue-matomo": "^4.1.0", @@ -4464,36 +4464,36 @@ } }, "node_modules/@vue/compiler-core": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.4.tgz", - "integrity": "sha512-U5AdCN+6skzh2bSJrkMj2KZsVkUpgK8/XlxjSRYQZhNPcvt9/kmgIMpFEiTyK+Dz5E1J+8o8//BEIX+bakgVSw==", + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.5.tgz", + "integrity": "sha512-Daka7P1z2AgKjzuueWXhwzIsKu0NkLB6vGbNVEV2iJ8GJTrzraZo/Sk4GWCMRtd/qVi3zwnk+Owbd/xSZbwHtQ==", "dependencies": { "@babel/parser": "^7.23.6", - "@vue/shared": "3.4.4", + "@vue/shared": "3.4.5", "entities": "^4.5.0", "estree-walker": "^2.0.2", "source-map-js": "^1.0.2" } }, "node_modules/@vue/compiler-dom": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.4.tgz", - "integrity": "sha512-iSwkdDULCN+Vr8z6uwdlL044GJ/nUmECxP9vu7MzEs4Qma0FwDLYvnvRcyO0ZITuu3Os4FptGUDnhi1kOLSaGw==", + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.5.tgz", + "integrity": "sha512-J8YlxknJVd90SXFJ4HwGANSAXsx5I0lK30sO/zvYV7s5gXf7gZR7r/1BmZ2ju7RGH1lnc6bpBc6nL61yW+PsAQ==", "dependencies": { - "@vue/compiler-core": "3.4.4", - "@vue/shared": "3.4.4" + "@vue/compiler-core": "3.4.5", + "@vue/shared": "3.4.5" } }, "node_modules/@vue/compiler-sfc": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.4.tgz", - "integrity": "sha512-OTFcU6vUxUNHBcarzkp4g6d25nvcmDvFDzPRvSrIsByFFPRYN+y3b+j9HxYwt6nlWvGyFCe0roeJdJlfYxbCBg==", + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.5.tgz", + "integrity": "sha512-jauvkDuSSUbP0ebhfNqljhShA90YEfX/0wZ+w40oZF43IjGyWYjqYaJbvMJwGOd+9+vODW6eSvnk28f0SGV7OQ==", "dependencies": { "@babel/parser": "^7.23.6", - "@vue/compiler-core": "3.4.4", - "@vue/compiler-dom": "3.4.4", - "@vue/compiler-ssr": "3.4.4", - "@vue/shared": "3.4.4", + "@vue/compiler-core": "3.4.5", + "@vue/compiler-dom": "3.4.5", + "@vue/compiler-ssr": "3.4.5", + "@vue/shared": "3.4.5", "estree-walker": "^2.0.2", "magic-string": "^0.30.5", "postcss": "^8.4.32", @@ -4501,12 +4501,12 @@ } }, "node_modules/@vue/compiler-ssr": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.4.tgz", - "integrity": "sha512-1DU9DflSSQlx/M61GEBN+NbT/anUki2ooDo9IXfTckCeKA/2IKNhY8KbG3x6zkd3KGrxzteC7de6QL88vEb41Q==", + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.5.tgz", + "integrity": "sha512-DDdEcDzj2lWTMfUMMtEpLDhURai9LhM0zSZ219jCt7b2Vyl0/jy3keFgCPMitG0V1S1YG4Cmws3lWHWdxHQOpg==", "dependencies": { - "@vue/compiler-dom": "3.4.4", - "@vue/shared": "3.4.4" + "@vue/compiler-dom": "3.4.5", + "@vue/shared": "3.4.5" } }, "node_modules/@vue/devtools-api": { @@ -4553,48 +4553,125 @@ } }, "node_modules/@vue/reactivity": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.4.tgz", - "integrity": "sha512-DFsuJBf6sfhd5SYzJmcBTUG9+EKqjF31Gsk1NJtnpJm9liSZ806XwGJUeNBVQIanax7ODV7Lmk/k17BgxXNuTg==", + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.3.13.tgz", + "integrity": "sha512-fjzCxceMahHhi4AxUBzQqqVhuA21RJ0COaWTbIBl1PruGW1CeY97louZzLi4smpYx+CHfFPPU/CS8NybbGvPKQ==", "dependencies": { - "@vue/shared": "3.4.4" + "@vue/shared": "3.3.13" } }, + "node_modules/@vue/reactivity-transform": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.3.13.tgz", + "integrity": "sha512-oWnydGH0bBauhXvh5KXUy61xr9gKaMbtsMHk40IK9M4gMuKPJ342tKFarY0eQ6jef8906m35q37wwA8DMZOm5Q==", + "dependencies": { + "@babel/parser": "^7.23.5", + "@vue/compiler-core": "3.3.13", + "@vue/shared": "3.3.13", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.5" + } + }, + "node_modules/@vue/reactivity-transform/node_modules/@vue/compiler-core": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.13.tgz", + "integrity": "sha512-bwi9HShGu7uaZLOErZgsH2+ojsEdsjerbf2cMXPwmvcgZfVPZ2BVZzCVnwZBxTAYd6Mzbmf6izcUNDkWnBBQ6A==", + "dependencies": { + "@babel/parser": "^7.23.5", + "@vue/shared": "3.3.13", + "estree-walker": "^2.0.2", + "source-map-js": "^1.0.2" + } + }, + "node_modules/@vue/reactivity-transform/node_modules/@vue/shared": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz", + "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==" + }, + "node_modules/@vue/reactivity/node_modules/@vue/shared": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz", + "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==" + }, "node_modules/@vue/runtime-core": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.4.tgz", - "integrity": "sha512-zWWwNQAj5JdxrmOA1xegJm+c4VtyIbDEKgQjSb4va5v7gGTCh0ZjvLI+htGFdVXaO9bs2J3C81p5p+6jrPK8Bw==", + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.3.13.tgz", + "integrity": "sha512-1TzA5TvGuh2zUwMJgdfvrBABWZ7y8kBwBhm7BXk8rvdx2SsgcGfz2ruv2GzuGZNvL1aKnK8CQMV/jFOrxNQUMA==", "dependencies": { - "@vue/reactivity": "3.4.4", - "@vue/shared": "3.4.4" + "@vue/reactivity": "3.3.13", + "@vue/shared": "3.3.13" } }, + "node_modules/@vue/runtime-core/node_modules/@vue/shared": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz", + "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==" + }, "node_modules/@vue/runtime-dom": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.4.tgz", - "integrity": "sha512-Nlh2ap1J/eJQ6R0g+AIRyGNwpTJQACN0dk8I8FRLH8Ev11DSvfcPOpn4+Kbg5xAMcuq0cHB8zFYxVrOgETrrvg==", + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.3.13.tgz", + "integrity": "sha512-JJkpE8R/hJKXqVTgUoODwS5wqKtOsmJPEqmp90PDVGygtJ4C0PtOkcEYXwhiVEmef6xeXcIlrT3Yo5aQ4qkHhQ==", "dependencies": { - "@vue/runtime-core": "3.4.4", - "@vue/shared": "3.4.4", + "@vue/runtime-core": "3.3.13", + "@vue/shared": "3.3.13", "csstype": "^3.1.3" } }, + "node_modules/@vue/runtime-dom/node_modules/@vue/shared": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz", + "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==" + }, "node_modules/@vue/server-renderer": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.4.tgz", - "integrity": "sha512-+AjoiKcC41k7SMJBYkDO9xs79/Of8DiThS9mH5l2MK+EY0to3psI0k+sElvVqQvsoZTjHMEuMz0AEgvm2T+CwA==", + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.3.13.tgz", + "integrity": "sha512-vSnN+nuf6iSqTL3Qgx/9A+BT+0Zf/VJOgF5uMZrKjYPs38GMYyAU1coDyBNHauehXDaP+zl73VhwWv0vBRBHcg==", "dependencies": { - "@vue/compiler-ssr": "3.4.4", - "@vue/shared": "3.4.4" + "@vue/compiler-ssr": "3.3.13", + "@vue/shared": "3.3.13" }, "peerDependencies": { - "vue": "3.4.4" + "vue": "3.3.13" } }, + "node_modules/@vue/server-renderer/node_modules/@vue/compiler-core": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.13.tgz", + "integrity": "sha512-bwi9HShGu7uaZLOErZgsH2+ojsEdsjerbf2cMXPwmvcgZfVPZ2BVZzCVnwZBxTAYd6Mzbmf6izcUNDkWnBBQ6A==", + "dependencies": { + "@babel/parser": "^7.23.5", + "@vue/shared": "3.3.13", + "estree-walker": "^2.0.2", + "source-map-js": "^1.0.2" + } + }, + "node_modules/@vue/server-renderer/node_modules/@vue/compiler-dom": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.13.tgz", + "integrity": "sha512-EYRDpbLadGtNL0Gph+HoKiYqXLqZ0xSSpR5Dvnu/Ep7ggaCbjRDIus1MMxTS2Qm0koXED4xSlvTZaTnI8cYAsw==", + "dependencies": { + "@vue/compiler-core": "3.3.13", + "@vue/shared": "3.3.13" + } + }, + "node_modules/@vue/server-renderer/node_modules/@vue/compiler-ssr": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.13.tgz", + "integrity": "sha512-d/P3bCeUGmkJNS1QUZSAvoCIW4fkOKK3l2deE7zrp0ypJEy+En2AcypIkqvcFQOcw3F0zt2VfMvNsA9JmExTaw==", + "dependencies": { + "@vue/compiler-dom": "3.3.13", + "@vue/shared": "3.3.13" + } + }, + "node_modules/@vue/server-renderer/node_modules/@vue/shared": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz", + "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==" + }, "node_modules/@vue/shared": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.4.tgz", - "integrity": "sha512-abSgiVRhfjfl3JALR/cSuBl74hGJ3SePgf1mKzodf1eMWLwHZbfEGxT2cNJSsNiw44jEgrO7bNkhchaWA7RwNw==" + "version": "3.4.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.5.tgz", + "integrity": "sha512-6XptuzlMvN4l4cDnDw36pdGEV+9njYkQ1ZE0Q6iZLwrKefKaOJyiFmcP3/KBDHbt72cJZGtllAc1GaHe6XGAyg==" }, "node_modules/@vue/test-utils": { "version": "2.4.3", @@ -5417,9 +5494,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001572", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001572.tgz", - "integrity": "sha512-1Pbh5FLmn5y4+QhNyJE9j3/7dK44dGB83/ZMjv/qJk86TvDbjk0LosiZo0i0WB0Vx607qMX9jYrn1VLHCkN4rw==", + "version": "1.0.30001574", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001574.tgz", + "integrity": "sha512-BtYEK4r/iHt/txm81KBudCUcTy7t+s9emrIaHqjYurQ10x71zJ5VQ9x1dYPcz/b+pKSp4y/v1xSI67A+LzpNyg==", "funding": [ { "type": "opencollective", @@ -6282,9 +6359,9 @@ } }, "node_modules/electron-to-chromium": { - "version": "1.4.617", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.617.tgz", - "integrity": "sha512-sYNE3QxcDS4ANW1k4S/wWYMXjCVcFSOX3Bg8jpuMFaXt/x8JCmp0R1Xe1ZXDX4WXnSRBf+GJ/3eGWicUuQq5cg==" + "version": "1.4.620", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.620.tgz", + "integrity": "sha512-a2fcSHOHrqBJsPNXtf6ZCEZpXrFCcbK1FBxfX3txoqWzNgtEDG1f3M59M98iwxhRW4iMKESnSjbJ310/rkrp0g==" }, "node_modules/emoji-regex": { "version": "9.2.2", @@ -12693,15 +12770,15 @@ } }, "node_modules/vue": { - "version": "3.4.4", - "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.4.tgz", - "integrity": "sha512-suZXgDVT8lRNhKmxdkwOsR0oyUi8is7mtqI18qW97JLoyorEbE9B2Sb4Ws/mR/+0AgA/JUtsv1ytlRSH3/pDIA==", + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.13.tgz", + "integrity": "sha512-LDnUpQvDgsfc0u/YgtAgTMXJlJQqjkxW1PVcOnJA5cshPleULDjHi7U45pl2VJYazSSvLH8UKcid/kzH8I0a0Q==", "dependencies": { - "@vue/compiler-dom": "3.4.4", - "@vue/compiler-sfc": "3.4.4", - "@vue/runtime-dom": "3.4.4", - "@vue/server-renderer": "3.4.4", - "@vue/shared": "3.4.4" + "@vue/compiler-dom": "3.3.13", + "@vue/compiler-sfc": "3.3.13", + "@vue/runtime-dom": "3.3.13", + "@vue/server-renderer": "3.3.13", + "@vue/shared": "3.3.13" }, "peerDependencies": { "typescript": "*" @@ -12914,6 +12991,57 @@ } } }, + "node_modules/vue/node_modules/@vue/compiler-core": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.3.13.tgz", + "integrity": "sha512-bwi9HShGu7uaZLOErZgsH2+ojsEdsjerbf2cMXPwmvcgZfVPZ2BVZzCVnwZBxTAYd6Mzbmf6izcUNDkWnBBQ6A==", + "dependencies": { + "@babel/parser": "^7.23.5", + "@vue/shared": "3.3.13", + "estree-walker": "^2.0.2", + "source-map-js": "^1.0.2" + } + }, + "node_modules/vue/node_modules/@vue/compiler-dom": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.3.13.tgz", + "integrity": "sha512-EYRDpbLadGtNL0Gph+HoKiYqXLqZ0xSSpR5Dvnu/Ep7ggaCbjRDIus1MMxTS2Qm0koXED4xSlvTZaTnI8cYAsw==", + "dependencies": { + "@vue/compiler-core": "3.3.13", + "@vue/shared": "3.3.13" + } + }, + "node_modules/vue/node_modules/@vue/compiler-sfc": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.3.13.tgz", + "integrity": "sha512-DQVmHEy/EKIgggvnGRLx21hSqnr1smUS9Aq8tfxiiot8UR0/pXKHN9k78/qQ7etyQTFj5em5nruODON7dBeumw==", + "dependencies": { + "@babel/parser": "^7.23.5", + "@vue/compiler-core": "3.3.13", + "@vue/compiler-dom": "3.3.13", + "@vue/compiler-ssr": "3.3.13", + "@vue/reactivity-transform": "3.3.13", + "@vue/shared": "3.3.13", + "estree-walker": "^2.0.2", + "magic-string": "^0.30.5", + "postcss": "^8.4.32", + "source-map-js": "^1.0.2" + } + }, + "node_modules/vue/node_modules/@vue/compiler-ssr": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.3.13.tgz", + "integrity": "sha512-d/P3bCeUGmkJNS1QUZSAvoCIW4fkOKK3l2deE7zrp0ypJEy+En2AcypIkqvcFQOcw3F0zt2VfMvNsA9JmExTaw==", + "dependencies": { + "@vue/compiler-dom": "3.3.13", + "@vue/shared": "3.3.13" + } + }, + "node_modules/vue/node_modules/@vue/shared": { + "version": "3.3.13", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.3.13.tgz", + "integrity": "sha512-/zYUwiHD8j7gKx2argXEMCUXVST6q/21DFU0sTfNX0URJroCe3b1UF6vLJ3lQDfLNIiiRl2ONp7Nh5UVWS6QnA==" + }, "node_modules/w3c-keyname": { "version": "2.2.8", "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz", diff --git a/package.json b/package.json index da13e01f2..c8c36e36b 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "tailwindcss": "^3", "tippy.js": "^6.2.3", "unfetch": "^5.0.0", - "vue": "^3.2.37", + "vue": "3.3.13", "vue-i18n": "9", "vue-material-design-icons": "^5.1.2", "vue-matomo": "^4.1.0", From 2b5439b1d0ef1f60c19019540a01eb6d437eee23 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 4 Jan 2024 15:43:02 +0100 Subject: [PATCH 02/41] fix(front): reset instances list to page 1 if filter or follow status changes Signed-off-by: Thomas Citharel --- src/views/Admin/InstancesView.vue | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/views/Admin/InstancesView.vue b/src/views/Admin/InstancesView.vue index 49a6ceb96..4ef83e150 100644 --- a/src/views/Admin/InstancesView.vue +++ b/src/views/Admin/InstancesView.vue @@ -233,7 +233,7 @@ import { useRouteQuery, } from "vue-use-route-query"; import { useMutation, useQuery } from "@vue/apollo-composable"; -import { computed, inject, ref } from "vue"; +import { computed, inject, ref, watch } from "vue"; import { useRouter } from "vue-router"; import { useHead } from "@unhead/vue"; import CloudQuestion from "../../../node_modules/vue-material-design-icons/CloudQuestion.vue"; @@ -263,6 +263,10 @@ const { result: instancesResult } = useQuery<{ { debounce: 500 } ); +watch([filterDomain, followStatus], () => { + instancePage.value = 1; +}); + const instances = computed(() => instancesResult.value?.instances); const { t } = useI18n({ useScope: "global" }); From 48f57ec1cf3ce81c3c83333bea59c2a7d8c70e99 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Thu, 4 Jan 2024 15:47:57 +0100 Subject: [PATCH 03/41] fix(front): reset page to lower or page 1 if we didn't found results in instances view Signed-off-by: Thomas Citharel --- src/views/Admin/InstancesView.vue | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/src/views/Admin/InstancesView.vue b/src/views/Admin/InstancesView.vue index 4ef83e150..df2a74b30 100644 --- a/src/views/Admin/InstancesView.vue +++ b/src/views/Admin/InstancesView.vue @@ -269,6 +269,20 @@ watch([filterDomain, followStatus], () => { const instances = computed(() => instancesResult.value?.instances); +const instancesTotal = computed(() => instancesResult.value?.instances.total); +const currentPageInstancesNumber = computed( + () => instancesResult.value?.instances.elements.length +); + +// If we didn't found any instances on this page +watch(instancesTotal, (newInstancesTotal) => { + if (newInstancesTotal === 0) { + instancePage.value = 1; + } else if (currentPageInstancesNumber.value === 0) { + instancePage.value = instancePage.value - 1; + } +}); + const { t } = useI18n({ useScope: "global" }); useHead({ title: computed(() => t("Federation")), From 790db906a6e814352aa694c26febb9d6a43fa321 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Fri, 5 Jan 2024 15:18:18 +0100 Subject: [PATCH 04/41] fix(front): fix TagInput display Signed-off-by: Thomas Citharel --- src/assets/oruga-tailwindcss.css | 9 ++++--- src/components/Event/TagInput.vue | 43 +++++++++++++++++++------------ src/oruga-config.ts | 7 +++++ 3 files changed, 40 insertions(+), 19 deletions(-) diff --git a/src/assets/oruga-tailwindcss.css b/src/assets/oruga-tailwindcss.css index 87f471fb6..5c43ccf14 100644 --- a/src/assets/oruga-tailwindcss.css +++ b/src/assets/oruga-tailwindcss.css @@ -146,6 +146,9 @@ body { .taginput-item { @apply bg-primary mr-2; } +.taginput-autocomplete { + @apply flex-1 !drop-shadow-none; +} .taginput-item:first-child { @apply ml-2; @@ -343,8 +346,8 @@ button.menubar__button { .o-drop__menu--active { @apply z-50; } -.o-dpck__box { - @apply px-4 py-1; +.datepicker-box { + @apply block px-4 py-1; } .o-dpck__header { @apply pb-2 mb-2; @@ -352,7 +355,7 @@ button.menubar__button { } .o-dpck__header__next, .o-dpck__header__previous { - @apply justify-center text-center no-underline cursor-pointer items-center shadow-none inline-flex relative select-none leading-6 border rounded h-10 p-2 m-1 dark:text-white; + @apply justify-center text-center no-underline cursor-pointer items-center shadow-none inline-flex relative select-none leading-6 border rounded h-10 p-2 m-1 dark:text-white hover:px-2; min-width: 2.25em; } .o-dpck__header__list { diff --git a/src/components/Event/TagInput.vue b/src/components/Event/TagInput.vue index 1019ae4cd..ee4cf1568 100644 --- a/src/components/Event/TagInput.vue +++ b/src/components/Event/TagInput.vue @@ -1,15 +1,17 @@ @@ -249,7 +257,7 @@ import Underline from "@tiptap/extension-underline"; import Link from "@tiptap/extension-link"; import { AutoDir } from "./Editor/Autodir"; // import sanitizeHtml from "sanitize-html"; -import { computed, inject, onBeforeUnmount, watch } from "vue"; +import { computed, inject, onBeforeUnmount, ref, watch } from "vue"; import { Dialog } from "@/plugins/dialog"; import { useI18n } from "vue-i18n"; import { useMutation } from "@vue/apollo-composable"; @@ -279,11 +287,13 @@ const props = withDefaults( currentActor: IPerson; placeholder?: string; headingLevel?: Level[]; + required?: boolean; }>(), { mode: "description", maxSize: 100_000_000, headingLevel: () => [3, 4, 5], + required: false, } ); @@ -333,7 +343,7 @@ const editor = useEditor({ "aria-label": ariaLabel.value ?? "", role: "textbox", class: - "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-zinc-50 dark:bg-zinc-700 focus:outline-none !max-w-full", + "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-white dark:bg-zinc-700 focus:outline-none !max-w-full", }, transformPastedHTML: transformPastedHTML, }, @@ -373,6 +383,13 @@ const editor = useEditor({ onUpdate: () => { emit("update:modelValue", editor.value?.getHTML()); }, + onBlur: () => { + checkEditorEmpty(); + }, + onFocus: () => { + editorErrorStatus.value = false; + editorErrorMessage.value = ""; + }, }); watch(value, (val: string) => { @@ -470,6 +487,18 @@ defineExpose({ replyToComment, focus }); onBeforeUnmount(() => { editor.value?.destroy(); }); + +const editorErrorStatus = ref(false); +const editorErrorMessage = ref(""); + +const isEmpty = computed( + () => props.required === true && editor.value?.isEmpty === true +); + +const checkEditorEmpty = () => { + editorErrorStatus.value = isEmpty.value; + editorErrorMessage.value = isEmpty.value ? t("You need to enter a text") : ""; +}; diff --git a/src/i18n/en_US.json b/src/i18n/en_US.json index f0dc97d7a..7d8b1ec49 100644 --- a/src/i18n/en_US.json +++ b/src/i18n/en_US.json @@ -1642,5 +1642,6 @@ "Visit {instance_domain}": "Visit {instance_domain}", "Software details: {software_details}": "Software details: {software_details}", "Only instances with an application actor can be followed": "Only instances with an application actor can be followed", - "Domain or instance name": "Domain or instance name" + "Domain or instance name": "Domain or instance name", + "You need to enter a text": "You need to enter a text" } \ No newline at end of file diff --git a/src/i18n/fr_FR.json b/src/i18n/fr_FR.json index b3babdb35..ced69a4b1 100644 --- a/src/i18n/fr_FR.json +++ b/src/i18n/fr_FR.json @@ -1636,5 +1636,6 @@ "Visit {instance_domain}": "Visiter {instance_domain}", "Software details: {software_details}": "Détails du logiciel : {software_details}", "Only instances with an application actor can be followed": "Seules les instances avec un acteur application peuvent être suivies", - "Domain or instance name": "Domaine ou nom de l'instance" + "Domain or instance name": "Domaine ou nom de l'instance", + "You need to enter a text": "Vous devez entrer un texte" } From 3b7124a57b2dedf5583fdebced6b9a4e502e8731 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Tue, 9 Jan 2024 16:55:26 +0100 Subject: [PATCH 25/41] fix(front): fix focusing text editor Signed-off-by: Thomas Citharel --- src/components/TextEditor.vue | 22 +++++++++++++--------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/src/components/TextEditor.vue b/src/components/TextEditor.vue index 791f3f70d..31ddcd9b6 100644 --- a/src/components/TextEditor.vue +++ b/src/components/TextEditor.vue @@ -219,9 +219,10 @@

{{ editorErrorMessage }} @@ -277,6 +278,7 @@ import FormatQuoteClose from "vue-material-design-icons/FormatQuoteClose.vue"; import Undo from "vue-material-design-icons/Undo.vue"; import Redo from "vue-material-design-icons/Redo.vue"; import Placeholder from "@tiptap/extension-placeholder"; +import { useFocusWithin } from "@vueuse/core"; const props = withDefaults( defineProps<{ @@ -343,7 +345,7 @@ const editor = useEditor({ "aria-label": ariaLabel.value ?? "", role: "textbox", class: - "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-white dark:bg-zinc-700 focus:outline-none !max-w-full", + "prose dark:prose-invert prose-sm lg:prose-lg xl:prose-xl bg-white dark:bg-zinc-700 !max-w-full", }, transformPastedHTML: transformPastedHTML, }, @@ -392,6 +394,9 @@ const editor = useEditor({ }, }); +const editorContentRef = ref(null); +const { focused } = useFocusWithin(editorContentRef); + watch(value, (val: string) => { if (!editor.value) return; if (val !== editor.value.getHTML()) { @@ -552,13 +557,8 @@ const checkEditorEmpty = () => { &__content { div.ProseMirror { min-height: 2.5rem; - box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1); border-radius: 4px; padding: 12px 6px; - - &:focus { - outline: none; - } } h1 { @@ -684,8 +684,12 @@ const checkEditorEmpty = () => { @apply inline-block border border-zinc-600 dark:border-zinc-300 rounded py-0.5 px-1; } -.editor__content { - @apply border focus:border-[#2563eb] rounded border-[#6b7280]; +.editor__content > div { + @apply border rounded border-[#6b7280]; +} + +.editorIsFocused > div { + @apply ring-2 ring-[#2563eb] outline-2 outline outline-offset-2 outline-transparent; } .editorErrorStatus { From a6a1ab71c23264805d61b5312982e6d345454027 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Tue, 9 Jan 2024 17:20:53 +0100 Subject: [PATCH 26/41] fix(front): various UI improvements Signed-off-by: Thomas Citharel --- src/assets/oruga-tailwindcss.css | 11 +++++++---- src/components/Event/EventMetadataList.vue | 5 ++++- src/components/Report/ReportModal.vue | 2 +- src/components/TagElement.vue | 2 +- src/oruga-config.ts | 1 + 5 files changed, 14 insertions(+), 7 deletions(-) diff --git a/src/assets/oruga-tailwindcss.css b/src/assets/oruga-tailwindcss.css index e23492cdd..8f25dd8f6 100644 --- a/src/assets/oruga-tailwindcss.css +++ b/src/assets/oruga-tailwindcss.css @@ -149,6 +149,9 @@ body { .taginput-autocomplete { @apply flex-1 !drop-shadow-none; } +.taginput-container { + @apply border-none; +} .taginput-item:first-child { @apply ml-2; @@ -162,12 +165,12 @@ body { @apply max-h-[200px] drop-shadow-md text-black z-10; } -.autocomplete-item { - @apply py-1.5 px-4 text-start; +.autocomplete .autocomplete-item { + @apply text-start p-0; } -.autocomplete-item-group-title { - @apply opacity-50 py-0 px-2; +.autocomplete .autocomplete-item-group-title { + @apply opacity-50 py-1.5 px-2 dark:text-white dark:opacity-75; } /* Dropdown */ diff --git a/src/components/Event/EventMetadataList.vue b/src/components/Event/EventMetadataList.vue index cf4180e5f..c76805bb8 100644 --- a/src/components/Event/EventMetadataList.vue +++ b/src/components/Event/EventMetadataList.vue @@ -30,7 +30,9 @@ class="flex-1 min-w-[200px]" >