Merge branch 'master' into 6266-Event-create-design-optimization

deployment/docker-compose.yml

@@ -65,10 +65,10 @@ services:
   
   backend:
     image: ocelotsocialnetwork/backend-branded:local-${CONFIGURATION}
-    container_name: backend
+    container_name: backend-branded
     build:
       dockerfile: src/docker/backend.Dockerfile
-      target: branded-branded
+      target: branded
       context: .
       args:
         - CONFIGURATION=$CONFIGURATION
@@ -143,7 +143,7 @@ services:
 
   neo4j:
     image: ocelotsocialnetwork/neo4j-community:latest
-    container_name: neo4j
+    container_name: neo4j-branded
     networks:
       - test-network
     volumes:

webapp/components/CategoriesSelect/CategoriesSelect.vue

@@ -43,6 +43,14 @@ export default {
       selectedCategoryIds: this.existingCategoryIds,
     }
   },
+  watch: {
+    existingCategoryIds() {
+      if (!this.selectedCategoryIds.length && this.existingCategoryIds.length) {
+        this.selectedCategoryIds = this.existingCategoryIds
+        this.$forceUpdate()
+      }
+    },
+  },
   computed: {
     selectedCount() {
       return this.selectedCategoryIds.length

webapp/components/ContributionForm/ContributionForm.vue

@@ -304,8 +304,14 @@ export default {
     groupName() {
       return this.group && this.group.name
     },
-    eventStartFake() {
-      return this.formData.eventStart
+    groupCategories() {
+      return this.group && this.group.categories
+    },
+  },
+  watch: {
+    groupCategories() {
+      if (!this.formData.categoryIds.length && this.groupCategories)
+        this.formData.categoryIds = this.groupCategories.map((cat) => cat.id)
     },
   },
   methods: {

webapp/components/Group/GroupForm.vue

@@ -37,8 +37,6 @@
         <ds-text class="select-label">
           {{ $t('group.type') }}
         </ds-text>
-        <!-- TODO: change it has to be implemented later -->
-        <!-- TODO: move 'ds-select' from style guide to main code and implement missing translation etc. functionality -->
         <select
           class="select ds-input appearance--auto"
           name="groupType"
@@ -94,21 +92,10 @@
         <ds-text class="select-label">
           {{ $t('group.actionRadius') }}
         </ds-text>
-        <!-- TODO: move 'ds-select' from styleguide to main code and implement missing translation etc. functionality -->
-        <select
-          class="select ds-input appearance--auto"
-          name="actionRadius"
-          :value="formData.actionRadius"
-          @change="changeActionRadius($event)"
-        >
-          <option
-            v-for="actionRadius in actionRadiusOptions"
-            :key="actionRadius"
-            :value="actionRadius"
-          >
-            {{ $t(`group.actionRadii.${actionRadius}`) }}
-          </option>
-        </select>
+        <action-radius-select
+          v-model="formData.actionRadius"
+          @change.native="changeActionRadius($event)"
+        />
         <ds-chip
           size="base"
           :color="
@@ -123,6 +110,7 @@
         </ds-chip>
 
         <!-- location -->
+        <!-- TODO: move 'ds-select' from styleguide to main code and implement missing translation etc. functionality -->
         <ds-select
           id="city"
           :label="$t('settings.data.labelCity') + locationNameLabelAddOnOldName"
@@ -187,6 +175,7 @@ import {
   DESCRIPTION_WITHOUT_HTML_LENGTH_MIN,
 } from '~/constants/groups.js'
 import Editor from '~/components/Editor/Editor'
+import ActionRadiusSelect from '~/components/Select/ActionRadiusSelect'
 import { queryLocations } from '~/graphql/location'
 
 let timeout
@@ -196,6 +185,7 @@ export default {
   components: {
     CategoriesSelect,
     Editor,
+    ActionRadiusSelect,
   },
   props: {
     update: {
@@ -216,7 +206,6 @@ export default {
       categoriesActive: this.$env.CATEGORIES_ACTIVE,
       disabled: false,
       groupTypeOptions: ['public', 'closed', 'hidden'],
-      actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
       loadingGeo: false,
       cities: [],
       formData: {
@@ -327,10 +316,10 @@ export default {
       return false
     },
     changeGroupType(event) {
-      this.formData.groupType = event.target.value
+      this.$refs.groupForm.update('groupType', event.target.value)
     },
     changeActionRadius(event) {
-      this.formData.actionRadius = event.target.value
+      this.$refs.groupForm.update('actionRadius', event.target.value)
     },
     updateEditorDescription(value) {
       this.$refs.groupForm.update('description', value)

webapp/components/Select/ActionRadiusSelect.spec.js

@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils'
+import ActionRadiusSelect from './ActionRadiusSelect'
+
+const localVue = global.localVue
+const propsData = { value: 'regional' }
+
+describe('ActionRadiusSelect.', () => {
+  let wrapper
+  let mocks
+
+  beforeEach(() => {
+    mocks = {
+      $t: jest.fn(),
+    }
+  })
+
+  describe('mount', () => {
+    const Wrapper = () => {
+      return shallowMount(ActionRadiusSelect, { propsData, mocks, localVue })
+    }
+
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+    it('renders the select', () => {
+      expect(wrapper.findComponent(ActionRadiusSelect).exists()).toBe(true)
+    })
+
+    describe('when an option is selected', () => {
+      it('emits a change event with the new value', () => {
+        const select = wrapper.find('select')
+        select.trigger('change')
+        expect(wrapper.emitted().change[0]).toEqual(['regional'])
+      })
+    })
+  })
+})

webapp/components/Select/ActionRadiusSelect.vue

@@ -0,0 +1,33 @@
+<template>
+  <select
+    class="select ds-input appearance--auto"
+    name="actionRadius"
+    :value="value"
+    @change="onActionRadiusChange"
+  >
+    <option v-for="actionRadius in actionRadiusOptions" :key="actionRadius" :value="actionRadius">
+      {{ $t(`group.actionRadii.${actionRadius}`) }}
+    </option>
+  </select>
+</template>
+
+<script>
+export default {
+  name: 'ActionRadiusSelect',
+  props: {
+    value: {
+      required: true,
+    },
+  },
+  data() {
+    return {
+      actionRadiusOptions: ['regional', 'national', 'continental', 'global'],
+    }
+  },
+  methods: {
+    onActionRadiusChange(event) {
+      this.$emit('change', event.target.value)
+    },
+  },
+}
+</script>

webapp/graphql/groups.js

@@ -207,6 +207,9 @@ export const groupMembersQuery = () => {
         name
         slug
         myRoleInGroup
+        avatar {
+          url
+        }
       }
     }
   `