move and fragment new graphql queries and mutations

admin/package.json

@@ -89,6 +89,7 @@
     "unplugin-icons": "^0.19.0",
     "unplugin-vue-components": "^0.27.3",
     "vite-plugin-environment": "^1.1.3",
+    "vite-plugin-graphql-loader": "^4.0.4",
     "vitest": "^2.0.5",
     "vitest-canvas-mock": "^0.3.3"
   },

admin/src/components/ProjectBranding/ListHumhubSpaces.vue

@@ -26,9 +26,9 @@
       </li>
     </ul>
     <b-pagination
-      v-if="result && result.spaces.total > ITEMS_PER_PAGE"
-      v-model="result.spaces.page"
-      :total-rows="result.spaces.total"
+      v-if="result && pagination.total > ITEMS_PER_PAGE"
+      v-model="pagination.page"
+      :total-rows="pagination.total"
       :per-page="ITEMS_PER_PAGE"
       aria-controls="list-humhub-spaces"
       @update:model-value="refetch({ page: $event })"
@@ -38,8 +38,8 @@
 
 <script setup>
 import { ref, onMounted, computed } from 'vue'
+import { spaces as spacesQuery } from '@/graphql/projectBranding.graphql'
 import { useQuery } from '@vue/apollo-composable'
-import gql from 'graphql-tag'
 
 const props = defineProps({
   modelValue: {
@@ -57,26 +57,10 @@ function chooseSpace(space) {
 const ITEMS_PER_PAGE = 20
 const page = ref(1)
 const selectedSpaceId = ref(props.modelValue)
-const { result, refetch } = useQuery(
-  gql`
-    query spaces($page: Int!, $limit: Int!) {
-      spaces(page: $page, limit: $limit) {
-        total
-        page
-        pages
-        results {
-          id
-          name
-          description
-          url
-        }
-      }
-    }
-  `,
-  { page: page.value, limit: ITEMS_PER_PAGE },
-)
+const { result, refetch } = useQuery(spacesQuery, { page: page.value, limit: ITEMS_PER_PAGE })
 
 const spaces = computed(() => result.value?.spaces?.results || [])
+const pagination = computed(() => result.value?.spaces?.pagination || {})
 
 onMounted(() => {
   if (props.modelValue) {

admin/src/components/ProjectBranding/ProjectBrandingForm.vue

@@ -100,7 +100,7 @@ const spaceId = computed(() => form.spaceId)
 const newUserToSpace = computed(() => form.newUserToSpace)
 const logoUrl = computed(() => form.logoUrl)
 // show space
-const GET_SPACE = gql`
+const getSpace = gql`
   query space($id: ID!) {
     space(id: $id) {
       name
@@ -108,7 +108,7 @@ const GET_SPACE = gql`
     }
   }
 `
-const { result } = useQuery(GET_SPACE, () => ({ id: spaceId.value }), {
+const { result } = useQuery(getSpace, () => ({ id: spaceId.value }), {
   enabled: computed(() => !!spaceId.value),
 })
 

admin/src/components/ProjectBranding/ProjectBrandingItem.vue

@@ -46,11 +46,11 @@
 <script setup>
 import { computed, ref, toRefs } from 'vue'
 import ProjectBrandingForm from './ProjectBrandingForm.vue'
+import { deleteProjectBranding, upsertProjectBranding } from '@/graphql/projectBranding.graphql'
 import { useI18n } from 'vue-i18n'
 import { useStore } from 'vuex'
 import { useMutation } from '@vue/apollo-composable'
 import CONFIG from '@/config'
-import gql from 'graphql-tag'
 import { useAppToast } from '@/composables/useToast'
 
 const { t } = useI18n()
@@ -87,20 +87,7 @@ function toggleDetails() {
 }
 
 function update(form) {
-  const { mutate } = useMutation(gql`
-    mutation upsertProjectBranding($input: ProjectBrandingInput!) {
-      upsertProjectBranding(input: $input) {
-        id
-        name
-        alias
-        description
-        spaceId
-        spaceUrl
-        newUserToSpace
-        logoUrl
-      }
-    }
-  `)
+  const { mutate } = useMutation(upsertProjectBranding)
 
   mutate({
     input: { ...form },
@@ -119,11 +106,7 @@ function update(form) {
     })
 }
 function deleteItem() {
-  const { mutate } = useMutation(gql`
-    mutation deleteProjectBranding($id: ID!) {
-      deleteProjectBranding(id: $id)
-    }
-  `)
+  const { mutate } = useMutation(deleteProjectBranding)
 
   mutate({
     id: item.value.id,

admin/src/config/index.js

@@ -6,7 +6,7 @@ const pkg = require('../../package')
 
 const version = {
   ADMIN_MODULE_PROTOCOL: process.env.ADMIN_MODULE_PROTOCOL ?? 'http',
-  ADMIN_MODULE_HOST: process.env.ADMIN_MODULE_HOST ?? 'localhost',
+  ADMIN_MODULE_HOST: process.env.ADMIN_MODULE_HOST ?? '0.0.0.0',
   ADMIN_MODULE_PORT: process.env.ADMIN_MODULE_PORT ?? '8080',
   APP_VERSION: pkg.version,
   BUILD_COMMIT: process.env.BUILD_COMMIT ?? undefined,

admin/src/graphql/fragments.graphql

@@ -0,0 +1,23 @@
+
+fragment SpaceFields on Space {
+  id
+  name
+  description
+  url
+}
+
+fragment PaginationFields on Pagination {
+  total
+  page
+  pages
+}
+
+fragment ProjectBrandingCommonFields on ProjectBranding {
+  id
+  name
+  alias
+  description
+  spaceId
+  newUserToSpace
+  logoUrl
+}

admin/src/graphql/projectBranding.graphql

@@ -0,0 +1,22 @@
+#import './fragments.graphql'
+
+mutation upsertProjectBranding($input: ProjectBrandingInput!) {
+  upsertProjectBranding(input: $input) {
+    ...ProjectBrandingCommonFields
+  }
+}
+
+mutation deleteProjectBranding($id: ID!) {
+  deleteProjectBranding(id: $id)
+}
+
+query spaces($page: Int!, $limit: Int!) {
+  spaces(page: $page, limit: $limit) {
+    pagination {
+      ...PaginationFields
+    }
+    results {
+      ...SpaceFields
+    }
+  }
+}

admin/vite.config.js

@@ -17,7 +17,8 @@ const CONFIG = require('./src/config')
 
 const path = require('path')
 
-export default defineConfig(({ command }) => {
+export default defineConfig(async ({ command }) => {
+  const { vitePluginGraphqlLoader } = await import('vite-plugin-graphql-loader')
   if (command === 'serve') {
     CONFIG.ADMIN_HOSTING = 'nodejs'
   } else {
@@ -79,6 +80,7 @@ export default defineConfig(({ command }) => {
         DEBUG_DISABLE_AUTH: CONFIG.DEBUG_DISABLE_AUTH ?? null, // null,
         // CONFIG_VERSION: CONFIG.CONFIG_VERSION, // null,
       }),
+      vitePluginGraphqlLoader(),
       commonjs(),
     ],
     build: {

admin/yarn.lock

@@ -4241,7 +4241,7 @@ graphql-tag@^2.12.6, graphql-tag@^2.4.2:
   dependencies:
     tslib "^2.1.0"
 
-graphql@^16.9.0:
+graphql@^16.8.1, graphql@^16.9.0:
   version "16.10.0"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.10.0.tgz#24c01ae0af6b11ea87bf55694429198aaa8e220c"
   integrity sha512-AjqGKbDGUFRKIRCP9tCKiIGHyriz2oHEbPIbEtcSLSs4YjReZOIPQQWek4+6hjw62H9QShXHyaGivGiYVLeYFQ==
@@ -5014,7 +5014,7 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
-magic-string@^0.30.11, magic-string@^0.30.12, magic-string@^0.30.14:
+magic-string@^0.30.10, magic-string@^0.30.11, magic-string@^0.30.12, magic-string@^0.30.14:
   version "0.30.17"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.17.tgz#450a449673d2460e5bbcfba9a61916a1714c7453"
   integrity sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==
@@ -6843,6 +6843,15 @@ vite-plugin-environment@^1.1.3:
   resolved "https://registry.yarnpkg.com/vite-plugin-environment/-/vite-plugin-environment-1.1.3.tgz#d01a04abb2f69730a4866c9c9db51d3dab74645b"
   integrity sha512-9LBhB0lx+2lXVBEWxFZC+WO7PKEyE/ykJ7EPWCq95NEcCpblxamTbs5Dm3DLBGzwODpJMEnzQywJU8fw6XGGGA==
 
+vite-plugin-graphql-loader@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/vite-plugin-graphql-loader/-/vite-plugin-graphql-loader-4.0.4.tgz#cf6c599b3e5fa32bf2b768983da68f7beccc8486"
+  integrity sha512-lYnpQ2luV2fcuXmOJADljuktfMbDW00Y+6QS+Ek8Jz1Vdzlj/51LSGJwZqyjJ24a5YQ+o29Hr6el/5+nlZetvg==
+  dependencies:
+    graphql "^16.8.1"
+    graphql-tag "^2.12.6"
+    magic-string "^0.30.10"
+
 vite@3.2.10:
   version "3.2.10"
   resolved "https://registry.yarnpkg.com/vite/-/vite-3.2.10.tgz#7ac79fead82cfb6b5bf65613cd82fba6dcc81340"

backend/src/graphql/model/Pagination.ts

@@ -0,0 +1,19 @@
+import { ObjectType, Field, Int } from 'type-graphql'
+
+@ObjectType()
+export class Pagination {
+  @Field(() => Int)
+  total: number
+
+  @Field(() => Int)
+  page: number
+
+  @Field(() => Int)
+  pages: number
+
+  constructor(total: number, page: number, pages: number) {
+    this.total = total
+    this.page = page
+    this.pages = pages
+  }
+}

backend/src/graphql/model/SpaceList.ts

@@ -1,24 +1,20 @@
-import { ObjectType, Field, Int } from 'type-graphql'
+import { ObjectType, Field } from 'type-graphql'
 
 import { SpacesResponse } from '@/apis/humhub/model/SpacesResponse'
 
+import { Pagination } from './Pagination'
 import { Space } from './Space'
 
 @ObjectType()
 export class SpaceList {
-  @Field(() => Int)
-  total: number
-
-  @Field(() => Int)
-  page: number
-
-  @Field(() => Int)
-  pages: number
+  @Field(() => Pagination)
+  pagination: Pagination
 
   @Field(() => [Space])
   results: Space[]
 
   constructor(data: SpacesResponse) {
-    Object.assign(this, data)
+    this.pagination = new Pagination(data.total, data.page, data.pages)
+    this.results = data.results
   }
 }