change components add constants

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -17,6 +17,7 @@
 
 <script>
 import CategoryQuery from '~/graphql/CategoryQuery'
+import { CATEGORIES_MAX } from '~/constants/categories.js'
 import xor from 'lodash/xor'
 
 export default {
@@ -32,7 +33,7 @@ export default {
   data() {
     return {
       categories: null,
-      selectedMax: 3,
+      selectedMax: CATEGORIES_MAX,
       selectedCategoryIds: this.existingCategoryIds,
     }
   },

webapp/components/Group/GroupCard.vue

@@ -3,7 +3,7 @@
     <ds-container class="group-card">
       <ds-page-title heading="Groups"></ds-page-title>
       <ds-card v-for="item in items" :key="item.id" space="xx-small">
-        <nuxt-link to="/group/g1/testgruppe">{{ item.name }}</nuxt-link>
+        <nuxt-link :to="`/group/${item.id}`">{{ item.name }}</nuxt-link>
         {{ item.categories ? item.categories.map((category) => category.name) : [] }}
         <div>{{ item }}</div>
         <ds-space>

webapp/components/Group/GroupForm.vue

@@ -68,6 +68,8 @@
 
 <script>
 import CategoriesSelect from '~/components/CategoriesSelect/CategoriesSelect'
+import { CATEGORIES_MIN, CATEGORIES_MAX } from '~/constants/categories.js'
+import { NAME_LENGTH_MIN, NAME_LENGTH_MAX } from '~/constants/groups.js'
 
 export default {
   name: 'GroupForm',
@@ -100,7 +102,7 @@ export default {
         categoryIds: categories ? categories.map((category) => category.id) : [],
       },
       formSchema: {
-        name: { required: true, min: 3, max: 100 },
+        name: { required: true, min: NAME_LENGTH_MIN, max: NAME_LENGTH_MAX },
         groupType: { required: true },
         about: { required: true },
         description: { required: true },
@@ -109,7 +111,7 @@ export default {
           type: 'array',
           required: this.categoriesActive,
           validator: (_, value = []) => {
-            if (this.categoriesActive && (value.length === 0 || value.length > 3)) {
+            if (this.categoriesActive && (value.length < CATEGORIES_MIN || value.length > CATEGORIES_MAX)) {
               return [new Error(this.$t('common.validations.categories'))]
             }
             return []

webapp/constants/groups.js

@@ -1,2 +1,4 @@
 // this file is duplicated in `backend/src/constants/group.js` and `webapp/constants/group.js`
+export const NAME_LENGTH_MIN = 3
+export const NAME_LENGTH_MAX = 50 
 export const DESCRIPTION_WITHOUT_HTML_LENGTH_MIN = 100 // with removed HTML tags

webapp/pages/group/edit/_id.vue

@@ -12,8 +12,8 @@
       </ds-flex-item>
     </ds-flex>
     <ds-space centered>
-        <nuxt-link to="/group/my-groups">zurück</nuxt-link>
-      </ds-space>
+      <nuxt-link to="/group/my-groups">zurück</nuxt-link>
+    </ds-space>
   </div>
 </template>
 

webapp/pages/group/edit/_id/members.vue

@@ -1,16 +1,16 @@
 <template>
-    <div>
-      <ds-container>
-        <group-member />
-      </ds-container>
-    </div>
-  </template>
-  
-  <script>
-  import GroupMember from '~/components/Group/GroupMember'
+  <div>
+    <ds-container>
+      <group-member />
+    </ds-container>
+  </div>
+</template>
+
+<script>
+import GroupMember from '~/components/Group/GroupMember'
 export default {
-    components: {
-        GroupMember,
-    }
+  components: {
+    GroupMember,
+  },
 }
 </script>

webapp/pages/settings.vue

@@ -41,7 +41,7 @@ export default {
         },
         {
           name: this.$t('settings.myGroups'),
-          path: `/group/my-groups`,
+          path: `/my-groups`,
         },
         {
           name: this.$t('settings.muted-users.name'),