Prepare create group

js/src/components/NavBar.vue

@@ -40,6 +40,10 @@
                 <router-link :to="{ name: 'UpdateIdentity' }" v-translate>My account</router-link>
               </span>
 
+              <span class="navbar-item">
+                <router-link :to="{ name: ActorRouteName.CREATE_GROUP }" v-translate>Create group</router-link>
+              </span>
+
               <a v-translate class="navbar-item" v-on:click="logout()">Log out</a>
             </div>
           </div>
@@ -70,6 +74,7 @@ import { IConfig } from '@/types/config.model';
 import { ICurrentUser } from '@/types/current-user.model';
 import Logo from '@/components/Logo.vue';
 import SearchField from '@/components/SearchField.vue';
+import { ActorRouteName } from '@/router/actor';
 
 @Component({
   apollo: {
@@ -95,6 +100,8 @@ export default class NavBar extends Vue {
   currentUser!: ICurrentUser;
   showNavbar: boolean = false;
 
+  ActorRouteName = ActorRouteName;
+
   @Watch('currentUser')
   async onCurrentUserChanged() {
     // Refresh logged person object

js/src/graphql/actor.ts

@@ -174,3 +174,34 @@ query($name:String!) {
   }
 }
 `;
+
+export const CREATE_GROUP = gql`
+  mutation CreateGroup(
+    $creatorActorId: Int!,
+    $preferredUsername: String!,
+    $name: String!,
+    $summary: String,
+    $avatar: PictureInput,
+    $banner: PictureInput
+  ) {
+    createGroup(
+      creatorActorId: $creatorActorId,
+      preferredUsername: $preferredUsername,
+      name: $name,
+      summary: $summary,
+      banner: $banner,
+      avatar: $avatar
+    ) {
+      id,
+      preferredUsername,
+      name,
+      summary,
+      avatar {
+        url
+      },
+      banner {
+        url
+      }
+    }
+  }
+`;

js/src/types/actor/group.model.ts

@@ -19,4 +19,14 @@ export interface IMember {
 
 export class Group extends Actor implements IGroup {
   members: IMember[] = [];
+
+  constructor(hash: IGroup | {} = {}) {
+    super(hash);
+
+    this.patch(hash);
+  }
+
+  patch (hash: any) {
+    Object.assign(this, hash);
+  }
 }

js/src/views/Group/Create.vue

@@ -1,87 +1,124 @@
 <template>
-  <section>
-    <h1>
-      <translate>Create a new group</translate>
-    </h1>
-    <div class="columns">
-      <form class="column" @submit="createGroup">
-        <b-field :label="$gettext('Group name')">
-          <b-input aria-required="true" required v-model="group.preferred_username"/>
-        </b-field>
+  <div class="root">
+    <h1 v-translate>Create a new group</h1>
 
-        <b-field :label="$gettext('Group full name')">
-          <b-input aria-required="true" required v-model="group.name"/>
-        </b-field>
+    <div>
+      <b-field :label="$gettext('Group name')">
+        <b-input aria-required="true" required v-model="group.preferred_username"/>
+      </b-field>
 
-        <b-field :label="$gettext('Description')">
-          <b-input aria-required="true" required v-model="group.summary" type="textarea"/>
-        </b-field>
+      <b-field :label="$gettext('Group full name')">
+        <b-input aria-required="true" required v-model="group.name"/>
+      </b-field>
 
-        <button class="button is-primary">
-          <translate>Create my group</translate>
-        </button>
-      </form>
+      <b-field :label="$gettext('Description')">
+        <b-input aria-required="true" required v-model="group.description" type="textarea"/>
+      </b-field>
+
+      <div>
+        Avatar
+        <picture-upload v-model="avatarFile"></picture-upload>
+      </div>
+
+      <div>
+        Banner
+        <picture-upload v-model="avatarFile"></picture-upload>
+      </div>
+
+      <button class="button is-primary" @click="createGroup()">
+        <translate>Create my group</translate>
+      </button>
     </div>
-  </section>
+  </div>
 </template>
 
+<style lang="scss" scoped>
+  .root {
+    width: 400px;
+    margin: auto;
+  }
+</style>
+
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
+import { Group, IPerson } from '@/types/actor';
+import { CREATE_GROUP, LOGGED_PERSON } from '@/graphql/actor';
+import { RouteName } from '@/router';
+import PictureUpload from '@/components/PictureUpload.vue';
 
-@Component({})
+@Component({
+  components: {
+    PictureUpload,
+  },
+  apollo: {
+    loggedPerson: {
+      query: LOGGED_PERSON,
+    },
+  },
+})
 export default class CreateGroup extends Vue {
-  e1 = 0;
-  // FIXME: correctly type group
-  group: {
-    preferred_username: string;
-    name: string;
-    summary: string;
-    address?: any;
-  } = {
-    preferred_username: '',
-    name: '',
-    summary: '',
-    // category: null,
-  };
-  categories = [];
+  loggedPerson!: IPerson;
 
-  mounted() {
-    this.fetchCategories();
+  group = new Group();
+
+  avatarFile: File | null = null;
+  bannerFile: File | null = null;
+
+  async createGroup() {
+    try {
+      await this.$apollo.mutate({
+        mutation: CREATE_GROUP,
+        variables: this.buildVariables(),
+        update: (store, { data: { createGroup } }) => {
+          // TODO: update group list cache
+        },
+      });
+
+      this.$router.push({ name: RouteName.GROUP, params: { identityName: this.group.preferredUsername } });
+
+      this.$notifier.success(
+        this.$gettextInterpolate('Group %{displayName} created', { displayName: this.group.displayName() }),
+      );
+    } catch (err) {
+      this.handleError(err);
+    }
   }
 
-  createGroup() {
-    // this.group.organizer = "/accounts/" + this.$store.state.user.id;
-    // FIXME: remove eventFetch
-    // eventFetch('/groups', this.$store, { method: 'POST', body: JSON.stringify({ group: this.group }) })
-    //   .then(response => response.json())
-    //   .then((data) => {
-    //     this.loading = false;
-    //     this.$router.push({ path: 'Group', params: { id: data.id } });
-    //   });
-  }
+  private buildVariables() {
+    let avatarObj = {};
+    let bannerObj = {};
 
-  fetchCategories() {
-    // FIXME: remove eventFetch
-    // eventFetch('/categories', this.$store)
-    //   .then(response => response.json())
-    //   .then((data) => {
-    //     this.loading = false;
-    //     this.categories = data.data;
-    //   });
-  }
+    if (this.avatarFile) {
+      avatarObj = {
+        avatar: {
+          picture: {
+            name: this.avatarFile.name,
+            alt: `${this.group.preferredUsername}'s avatar`,
+            file: this.avatarFile,
+          },
+        },
+      };
+    }
 
-  getAddressData(addressData) {
-    this.group.address = {
-      geo: {
-        latitude: addressData.latitude,
-        longitude: addressData.longitude,
-      },
-      country: addressData.country,
-      locality: addressData.city,
-      region: addressData.administrative_area_level_1,
-      postalCode: addressData.postalCode,
-      street: `${addressData.street_number} ${addressData.route}`,
+    if (this.bannerFile) {
+      bannerObj = {
+        picture: {
+          name: this.bannerFile.name,
+          alt: `${this.group.preferredUsername}'s banner`,
+          file: this.bannerFile,
+        },
+      };
+    }
+
+    const currentActor = {
+      creatorActorId: this.loggedPerson.id,
     };
+
+    return Object.assign({}, this.group, avatarObj, bannerObj, currentActor);
+  }
+
+  private handleError(err: any) {
+    console.error(err);
   }
 }
 </script>

js/src/vue-apollo.ts

@@ -107,7 +107,7 @@ const apolloClient = new ApolloClient({
   cache,
   link,
   connectToDevTools: true,
-  resolvers: buildCurrentUserResolver(cache)
+  resolvers: buildCurrentUserResolver(cache),
 });
 
 export const apolloProvider = new VueApollo({