Implementation of the Community in the backend.

frontend/src/graphql/queries.js

@@ -104,3 +104,26 @@ export const checkEmailQuery = gql`
     }
   }
 `
+
+export const serverInformation = gql`
+  query {
+    serverInformation {
+      community {
+        name
+        description
+      }
+    }
+  }
+`
+
+export const communities = gql`
+  query {
+    communities {
+      id
+      name
+      url
+      description
+      registerUrl
+    }
+  }
+`

frontend/src/store/store.js

@@ -29,6 +29,9 @@ export const mutations = {
   newsletterState: (state, newsletterState) => {
     state.newsletterState = newsletterState
   },
+  community: (state, community) => {
+    state.community = community
+  },
 }
 
 export const actions = {
@@ -40,6 +43,7 @@ export const actions = {
     commit('lastName', data.lastName)
     commit('description', data.description)
     commit('newsletterState', data.klickTipp.newsletterState)
+    commit('community', data.community)
   },
   logout: ({ commit, state }) => {
     commit('token', null)
@@ -49,6 +53,7 @@ export const actions = {
     commit('lastName', '')
     commit('description', '')
     commit('newsletterState', null)
+    commit('community', null)
     localStorage.clear()
   },
 }
@@ -68,12 +73,7 @@ export const store = new Vuex.Store({
     description: '',
     token: null,
     newsletterState: null,
-    community: {
-      name: 'Gradido Entwicklung',
-      url: 'http://localhost:3000/vue/',
-      registerUrl: 'http://localhost:3000/vue/register',
-      description: 'Die lokale Entwicklungsumgebung von Gradido.',
-    },
+    community: null,
   },
   getters: {},
   // Syncronous mutation of the state

frontend/src/views/Pages/RegisterSelectCommunity.vue

@@ -3,43 +3,45 @@
     <b-container class="text-center">
       <div class="pb-3">{{ $t('community.current-community') }}</div>
 
-      <div v-for="community in communities.community" :key="community.name">
-        <b-card
-          v-if="community.name === $store.state.community.name"
-          class="border-0 mb-0"
-          bg-variant="primary"
-        >
-          <b>{{ community.name }}</b>
-          <br />
-          {{ $store.state.community.description }}
-          <br />
-          <b-button variant="outline-secondary" to="/register">
-            {{ $t('community.continue-to-registration') }}
-          </b-button>
-        </b-card>
-      </div>
+      <div v-if="!pending">
+        <div v-for="community in communities" :key="community.name">
+          <b-card
+            v-if="community.name === $store.state.community.name"
+            class="border-0 mb-0"
+            bg-variant="primary"
+          >
+            <b>{{ community.name }}</b>
+            <br />
+            {{ $store.state.community.description }}
+            <br />
+            <b-button variant="outline-secondary" to="/register">
+              {{ $t('community.continue-to-registration') }}
+            </b-button>
+          </b-card>
+        </div>
 
-      <hr />
+        <hr />
 
-      <div>{{ $t('community.other-communities') }}</div>
+        <div>{{ $t('community.other-communities') }}</div>
 
-      <div v-for="community in communities.community" :key="community.id" class="pb-3">
-        <b-card v-if="community.name != $store.state.community.name" bg-variant="secondary">
-          <b>{{ community.name }}</b>
-          <br />
-          {{ community.description }}
-          <br />
-          {{ $t('community.location') }}
-          <b>
-            <small>
-              <b-link :href="community.url">{{ community.url }}</b-link>
-            </small>
-          </b>
-          <br />
-          <b-button variant="outline-secondary" :href="community.url">
-            {{ $t('community.switch-to-this-community') }}
-          </b-button>
-        </b-card>
+        <div v-for="community in communities" :key="community.id" class="pb-3">
+          <b-card v-if="community.name != $store.state.community.name" bg-variant="secondary">
+            <b>{{ community.name }}</b>
+            <br />
+            {{ community.description }}
+            <br />
+            {{ $t('community.location') }}
+            <b>
+              <small>
+                <b-link :href="community.url">{{ community.url }}</b-link>
+              </small>
+            </b>
+            <br />
+            <b-button variant="outline-secondary" :href="community.url">
+              {{ $t('community.switch-to-this-community') }}
+            </b-button>
+          </b-card>
+        </div>
       </div>
 
       <div class="text-center py-lg-4">
@@ -49,15 +51,38 @@
   </div>
 </template>
 <script>
-import MyCommunities from '../../../public/json-example/communities.json'
+import communities from '../../graphql/queries'
 
 export default {
   name: 'registerSelectCommunity',
   data() {
     return {
-      communities: MyCommunities,
+      communities: [],
+      pending: true,
     }
   },
+  methods: {
+    async getCommunities() {
+      const loader = this.$loading.show({
+        container: this.$refs.header,
+      })
+      this.$apollo
+        .query({
+          query: communities,
+        })
+        .then((response) => {
+          this.communities = response.data.communities
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+        })
+      loader.hide()
+      this.pending = false
+    },
+  },
+  created() {
+    this.getCommunities()
+  },
 }
 </script>
 <style>