mobilizon/js/src/views/Group/GroupList.vue

<template>
  <section>
    <h1>
      <translate>Group List</translate>
    </h1>
    <b-loading :active.sync="$apollo.loading"></b-loading>
    <div class="columns">
      <GroupCard
        v-for="group in groups"
        :key="group.uuid"
        :group="group"
        class="column is-one-quarter-desktop is-half-mobile"
      />
    </div>
    <router-link class="button" :to="{ name: 'CreateGroup' }">
      <translate>Create group</translate>
    </router-link>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { RouteName } from '@/router';

@Component
export default class GroupList extends Vue {
  groups = [];
  loading = true;

  created() {
    this.fetchData();
  }

  usernameWithDomain(actor) {
    return actor.username + (actor.domain === null ? '' : `@${actor.domain}`);
  }

  fetchData() {
    // 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;
    // 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: RouteName.GROUP,
      params: { name: this.usernameWithDomain(actor) },
    });
  }

  joinGroup(group) {
    const router = this.$router;
    // 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 -->
<style scoped>
</style>