Replace Vuetify with Bulma

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

Remove vuetify and add Bulma

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

js/src/views/Group/Create.vue

@@ -0,0 +1,98 @@
+<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>
+
+        <b-field :label="$gettext('Group full name')">
+          <b-input aria-required="true" required v-model="group.name"/>
+        </b-field>
+
+        <b-field :label="$gettext('Description')">
+          <b-input aria-required="true" required v-model="group.summary" type="textarea"/>
+        </b-field>
+
+        <button class="button is-primary">
+          <translate>Create my group</translate>
+        </button>
+      </form>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import VueMarkdown from "vue-markdown";
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {
+    VueMarkdown
+  }
+})
+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 = [];
+
+  mounted() {
+    this.fetchCategories();
+  }
+
+  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 } });
+    //   });
+  }
+
+  fetchCategories() {
+    // 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: {
+        latitude: addressData.latitude,
+        longitude: addressData.longitude
+      },
+      addressCountry: addressData.country,
+      addressLocality: addressData.city,
+      addressRegion: addressData.administrative_area_level_1,
+      postalCode: addressData.postal_code,
+      streetAddress: `${addressData.street_number} ${addressData.route}`
+    };
+  }
+}
+</script>
+
+<style>
+.markdown-render h1 {
+  font-size: 2em;
+}
+</style>

js/src/views/Group/Group.vue

@@ -0,0 +1,112 @@
+<template>
+  <section>
+    <div class="columns">
+      <div class="column">
+        <div class="card" v-if="group">
+          <div class="card-image" v-if="group.bannerUrl">
+            <figure class="image">
+              <img :src="group.bannerUrl">
+            </figure>
+          </div>
+          <div class="card-content">
+            <div class="media">
+              <div class="media-left">
+                <figure class="image is-48x48">
+                  <img :src="group.avatarUrl">
+                </figure>
+              </div>
+              <div class="media-content">
+                <p class="title">{{ group.name }}</p>
+                <p class="subtitle">@{{ group.preferredUsername }}</p>
+              </div>
+            </div>
+
+            <div class="content">
+              <p v-html="group.summary"></p>
+            </div>
+          </div>
+          <section v-if="group.organizedEvents.length > 0">
+            <h2 class="subtitle">
+              <translate>Organized</translate>
+            </h2>
+            <div class="columns">
+              <EventCard
+                v-for="event in group.organizedEvents"
+                :event="event"
+                :hideDetails="true"
+                :key="event.uuid"
+                class="column is-one-third"
+              />
+            </div>
+          </section>
+          <section v-if="group.members.length > 0">
+            <h2 class="subtitle">
+              <translate>Members</translate>
+            </h2>
+            <div class="columns">
+              <span
+                v-for="member in group.members"
+                :key="member"
+              >{{ member.actor.preferredUsername }}</span>
+            </div>
+          </section>
+        </div>
+        <b-message v-if-else="!group && $apollo.loading === false" type="is-danger">
+          <translate>No group found</translate>
+        </b-message>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import EventCard from "@/components/Event/EventCard.vue";
+import { FETCH_PERSON, LOGGED_PERSON } from "@/graphql/actor";
+
+@Component({
+  apollo: {
+    person: {
+      query: FETCH_PERSON,
+      variables() {
+        return {
+          name: this.$route.params.name
+        };
+      }
+    },
+    loggedPerson: {
+      query: LOGGED_PERSON
+    }
+  },
+  components: {
+    EventCard
+  }
+})
+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() {
+    // 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/views/Group/GroupList.vue

@@ -0,0 +1,75 @@
+<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";
+
+@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: "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>