All components now use typescript

js/src/components/Group/Create.vue

@@ -13,10 +13,10 @@
         </v-flex>
         <v-flex xs12>
           <v-text-field
-                  label="Title"
-                  v-model="group.name"
-                  :counter="100"
-                  required
+            label="Title"
+            v-model="group.name"
+            :counter="100"
+            required
           ></v-text-field>
         </v-flex>
         <v-flex md6>
@@ -36,27 +36,27 @@
           ></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"-->
-          <!--&gt;-->
-          <!--</vuetify-google-autocomplete>-->
+        <!--<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-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>
@@ -64,51 +64,54 @@
   </v-container>
 </template>
 
-<script>
-import VueMarkdown from 'vue-markdown';
-import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+<script lang="ts">
+  import VueMarkdown from 'vue-markdown';
+  import VuetifyGoogleAutocomplete from 'vuetify-google-autocomplete';
+  import { Component, Vue } from 'vue-property-decorator';
 
-export default {
-  name: 'create-group',
-
-  components: {
-    VueMarkdown,
-    VuetifyGoogleAutocomplete,
-  },
-  data() {
-    return {
-      e1: 0,
-      group: {
-        preferred_username: '',
-        name: '',
-        summary: '',
-        // category: null,
-      },
-      categories: [],
+  @Component({
+    components: {
+      VueMarkdown,
+      VuetifyGoogleAutocomplete,
+    },
+  })
+  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,
     };
-  },
-  mounted() {
-    this.fetchCategories();
-  },
-  methods: {
+    categories = [];
+
+    mounted() {
+      this.fetchCategories();
+    }
+
     create() {
       // this.group.organizer = "/accounts/" + this.$store.state.user.id;
 
-      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 } });
-        });
-    },
+      // 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 } });
+      //   });
+    }
+
     fetchCategories() {
-      eventFetch('/categories', this.$store)
-        .then(response => response.json())
-        .then((data) => {
-          this.loading = false;
-          this.categories = data.data;
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch('/categories', this.$store)
+      //   .then(response => response.json())
+      //   .then((data) => {
+      //     this.loading = false;
+      //     this.categories = data.data;
+      //   });
+    }
+
     getAddressData(addressData) {
       this.group.address = {
         geo: {
@@ -121,9 +124,9 @@ export default {
         postalCode: addressData.postal_code,
         streetAddress: `${addressData.street_number} ${addressData.route}`,
       };
-    },
-  },
-};
+    }
+
+  };
 </script>
 
 <style>

js/src/components/Group/Group.vue

@@ -12,7 +12,7 @@
                 </v-btn>
                 <v-spacer></v-spacer>
                 <!--<v-btn icon class="mr-3" v-if="$store.state.user && $store.state.actor.id === actor.id">-->
-                  <!--<v-icon>edit</v-icon>-->
+                <!--<v-icon>edit</v-icon>-->
                 <!--</v-btn>-->
                 <v-btn icon>
                   <v-icon>more_vert</v-icon>
@@ -42,12 +42,12 @@
                                 @{{ group.domain }}
                             </span>
                         </span>
-                        <v-chip color="indigo" text-color="white">
-                            <v-avatar>
-                                <v-icon>group</v-icon>
-                            </v-avatar>
-                            Group
-                        </v-chip>
+                      <v-chip color="indigo" text-color="white">
+                        <v-avatar>
+                          <v-icon>group</v-icon>
+                        </v-avatar>
+                        Group
+                      </v-chip>
                     </div>
                     <v-card-text v-if="group.description" v-html="group.description"></v-card-text>
                   </v-flex>
@@ -119,9 +119,9 @@
               <v-flex v-for="event in group.participatingEvents" :key="event.id">
                 <v-card>
                   <v-card-media
-                          class="black--text"
-                          height="200px"
-                          src="https://picsum.photos/400/200/"
+                    class="black--text"
+                    height="200px"
+                    src="https://picsum.photos/400/200/"
                   >
                     <v-container fill-height fluid>
                       <v-layout fill-height>
@@ -135,7 +135,10 @@
                     <div>
                       <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
                       <p>{{ event.description }}</p>
-                      <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                      <p v-if="event.organizer">Organisé par
+                        <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
+                        </router-link>
+                      </p>
                     </div>
                   </v-card-title>
                   <v-card-actions>
@@ -160,9 +163,9 @@
               <v-flex v-for="event in group.organizingEvents" :key="event.id">
                 <v-card>
                   <v-card-media
-                          class="black--text"
-                          height="200px"
-                          src="https://picsum.photos/400/200/"
+                    class="black--text"
+                    height="200px"
+                    src="https://picsum.photos/400/200/"
                   >
                     <v-container fill-height fluid>
                       <v-layout fill-height>
@@ -176,7 +179,10 @@
                     <div>
                       <span class="grey--text">{{ event.startDate | formatDate }} à {{ event.location }}</span><br>
                       <p>{{ event.description }}</p>
-                      <p v-if="event.organizer">Organisé par <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}</router-link></p>
+                      <p v-if="event.organizer">Organisé par
+                        <router-link :to="{name: 'Account', params: {'id': event.organizer.id}}">{{ event.organizer.username }}
+                        </router-link>
+                      </p>
                     </div>
                   </v-card-title>
                   <v-card-actions>
@@ -201,38 +207,35 @@
   </v-container>
 </template>
 
-<script>
-export default {
-  name: 'Group',
-  data() {
-    return {
-      group: null,
-      loading: true,
-    };
-  },
-  props: {
-    name: {
-      type: String,
-      required: true,
-    },
-  },
-  created() {
-    this.fetchData();
-  },
-  watch: {
-    // call again the method if the route changes
-    $route: 'fetchData',
-  },
-  methods: {
+<script lang="ts">
+  import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+
+  @Component
+  export default class Group extends Vue {
+    @Prop({ type: String, required: true }) name!: string;
+
+    group = null;
+    loading = true;
+
+    created() {
+      this.fetchData();
+    }
+
+    @Watch('$route')
+    onRouteChanged() {
+      // call again the method if the route changes
+      this.fetchData();
+    }
+
     fetchData() {
-      eventFetch(`/actors/${this.name}`, this.$store)
-        .then(response => response.json())
-        .then((response) => {
-          this.group = response.data;
-          this.loading = false;
-          console.log(this.group);
-        });
-    },
-  },
-};
+      // FIXME: remove eventFetch
+      // eventFetch(`/actors/${this.name}`, this.$store)
+      //   .then(response => response.json())
+      //   .then((response) => {
+      //     this.group = response.data;
+      //     this.loading = false;
+      //     console.log(this.group);
+      //   });
+    }
+  };
 </script>

js/src/components/Group/GroupList.vue

@@ -22,11 +22,16 @@
           <v-card-title>
             <div>
               <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>
+              <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)"><v-icon v-if="group.locked">lock</v-icon>Join</v-btn>
+            <v-btn flat color="green" @click="joinGroup(group)">
+              <v-icon v-if="group.locked">lock</v-icon>
+              Join
+            </v-btn>
             <v-btn flat color="orange" @click="viewActor(group)">Explore</v-btn>
             <v-btn flat color="red" @click="deleteGroup(group)">Delete</v-btn>
           </v-card-actions>
@@ -37,48 +42,54 @@
   </v-container>
 </template>
 
-<script>
-export default {
-  name: 'GroupList',
-  data() {
-    return {
-      groups: [],
-      loading: true,
-    };
-  },
-  created() {
-    this.fetchData();
-  },
-  methods: {
-    username_with_domain(actor) {
+<script lang="ts">
+
+  import { Component, Vue } from 'vue-property-decorator';
+
+  @Component
+  export default class GroupList extends Vue {
+    groups = [];
+    loading = true;
+
+    created() {
+      this.fetchData();
+    }
+
+    usernameWithDomain(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;
-        });
-    },
+      // FIXME: remove eventFetch
+      // eventFetch('/groups', this.$store)
+      //   .then(response => response.json())
+      //   .then((data) => {
+      //     console.log(data);
+      //     this.loading = false;
+      //     this.groups = data.data;
+      //   });
+    }
+
     deleteGroup(group) {
       const router = this.$router;
-      eventFetch(`/groups/${this.username_with_domain(group)}`, this.$store, { method: 'DELETE' })
-        .then(response => response.json())
-        .then(() => router.push('/groups'));
-    },
+      // FIXME: remove eventFetch
+      // eventFetch(`/groups/${this.usernameWithDomain(group)}`, this.$store, { method: 'DELETE' })
+      //   .then(response => response.json())
+      //   .then(() => router.push('/groups'));
+    }
+
     viewActor(actor) {
-      this.$router.push({ name: 'Group', params: { name: this.username_with_domain(actor) } });
-    },
+      this.$router.push({ name: 'Group', params: { name: this.usernameWithDomain(actor) } });
+    }
+
     joinGroup(group) {
       const router = this.$router;
-      eventFetch(`/groups/${this.username_with_domain(group)}/join`, this.$store, { method: 'POST' })
-        .then(response => response.json())
-        .then(() => router.push({ name: 'Group', params: { name: this.username_with_domain(group) } }));
-    },
-  },
-};
+      // FIXME: remove eventFetch
+      // eventFetch(`/groups/${this.usernameWithDomain(group)}/join`, this.$store, { method: 'POST' })
+      //   .then(response => response.json())
+      //   .then(() => router.push({ name: 'Group', params: { name: this.usernameWithDomain(group) } }));
+    }
+  };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->