Add groups back

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Account/Account.vue

@@ -4,6 +4,7 @@
     <v-flex xs12 sm6 offset-sm3>
       <v-progress-circular v-if="loading" indeterminate color="primary"></v-progress-circular>
       <v-card v-if="!loading">
+        <v-card-media :src="actor.banner" height="400px">
           <v-layout column class="media">
             <v-card-title>
               <v-btn icon @click="$router.go(-1)">
@@ -40,6 +41,7 @@
               </v-layout>
             </v-container>
           </v-layout>
+        </v-card-media>
         <v-list three-line>
           <v-list-tile>
             <v-list-tile-action>

js/src/components/Group/Create.vue

@@ -6,15 +6,23 @@
         <v-flex xs12>
           <v-text-field
             label="Title"
-            v-model="group.title"
+            v-model="group.preferred_username"
             :counter="100"
             required
           ></v-text-field>
         </v-flex>
+        <v-flex xs12>
+          <v-text-field
+                  label="Title"
+                  v-model="group.name"
+                  :counter="100"
+                  required
+          ></v-text-field>
+        </v-flex>
         <v-flex md6>
           <v-text-field
             label="Description"
-            v-model="group.description"
+            v-model="group.summary"
             multiLine
             required
           ></v-text-field>
@@ -22,34 +30,34 @@
         <v-flex md6>
           <vue-markdown class="markdown-render"
                         :watches="['show','html','breaks','linkify','emoji','typographer','toc']"
-                        :source="group.description"
+                        :source="group.summary"
                         :show="true" :html="false" :breaks="true" :linkify="true"
                         :emoji="true" :typographer="true" :toc="false"
           ></vue-markdown>
         </v-flex>
-        <v-flex md12>
-          <vuetify-google-autocomplete
-            id="map"
-            append-icon="search"
-            classname="form-control"
-            placeholder="Start typing"
-            enable-geolocation
-            v-on:placechanged="getAddressData"
-          >
-          </vuetify-google-autocomplete>
-        </v-flex>
-        <v-flex md12>
-          <v-select
-            v-bind:items="categories"
-            v-model="group.category"
-            item-text="title"
-            item-value="@id"
-            label="Categories"
-            single-line
-            bottom
-            types="(cities)"
-          ></v-select>
-        </v-flex>
+        <!--<v-flex md12>-->
+          <!--<vuetify-google-autocomplete-->
+            <!--id="map"-->
+            <!--append-icon="search"-->
+            <!--classname="form-control"-->
+            <!--placeholder="Start typing"-->
+            <!--enable-geolocation-->
+            <!--v-on:placechanged="getAddressData"-->
+          <!--&gt;-->
+          <!--</vuetify-google-autocomplete>-->
+        <!--</v-flex>-->
+        <!--<v-flex md12>-->
+          <!--<v-select-->
+            <!--v-bind:items="categories"-->
+            <!--v-model="group.category"-->
+            <!--item-text="title"-->
+            <!--item-value="@id"-->
+            <!--label="Categories"-->
+            <!--single-line-->
+            <!--bottom-->
+            <!--types="(cities)"-->
+          <!--&gt;</v-select>-->
+        <!--</v-flex>-->
       </v-layout>
     </v-form>
     <v-btn color="primary" @click="create">Create group</v-btn>
@@ -72,9 +80,10 @@
       return {
         e1: 0,
         group: {
-          title: '',
-          description: '',
-          category: null,
+          preferred_username: '',
+          name: '',
+          summary: '',
+          // category: null,
         },
         categories: [],
       };

js/src/components/Group/GroupList.vue

@@ -14,21 +14,20 @@
             <v-container fill-height fluid>
               <v-layout fill-height>
                 <v-flex xs12 align-end flexbox>
-                  <span class="headline">{{ group.title }}</span>
+                  <span class="headline">{{ group.username }}</span>
                 </v-flex>
               </v-layout>
             </v-container>
           </v-card-media>
           <v-card-title>
             <div>
-              <span class="grey--text">{{ group.startDate | formatDate }} à {{ group.location }}</span><br>
-              <p>{{ group.description }}</p>
+              <p>{{ group.summary }}</p>
               <p v-if="group.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': group.organizer.id}}">{{ group.organizer.username }}</router-link></p>
             </div>
           </v-card-title>
           <v-card-actions>
             <v-btn flat color="green" @click="joinGroup(group.id)"><v-icon v-if="group.locked">lock</v-icon>Join</v-btn>
-            <v-btn flat color="orange" @click="viewEvent(group.id)">Explore</v-btn>
+            <v-btn flat color="orange" @click="viewActor(group)">Explore</v-btn>
             <v-btn flat color="red" @click="deleteEvent(group.id)">Delete</v-btn>
           </v-card-actions>
         </v-card>
@@ -53,10 +52,14 @@
       this.fetchData();
     },
     methods: {
+      username_with_domain(actor) {
+        return actor.username + (actor.domain === null ? '' : `@${actor.domain}`)
+      },
       fetchData() {
         eventFetch('/groups', this.$store)
           .then(response => response.json())
           .then((data) => {
+              console.log(data);
             this.loading = false;
             this.groups = data.data;
           });
@@ -67,8 +70,8 @@
           .then(response => response.json())
           .then(() => router.push('/groups'));
       },
-      viewEvent(id) {
-        this.$router.push({ name: 'Group', params: { id } })
+      viewActor(actor) {
+        this.$router.push({ name: 'Account', params: { name: this.username_with_domain(actor) } })
       },
       joinGroup(id) {
         const router = this.$router;