Migrate to Vue 3 and Vite

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

js/src/views/Todos/TodoList.vue

@@ -1,11 +1,11 @@
 <template>
-  <section class="container section" v-if="todoList">
+  <section class="container mx-auto" v-if="todoList">
     <breadcrumbs-nav
       :links="[
         {
           name: RouteName.GROUP,
           params: { preferredUsername: usernameWithDomain(todoList.actor) },
-          text: displayName(group),
+          text: groupDisplayName,
         },
         {
           name: RouteName.TODO_LISTS,
@@ -23,101 +23,87 @@
     <div v-for="todo in todoList.todos.elements" :key="todo.id">
       <compact-todo :todo="todo" />
     </div>
-    <form class="form box" @submit.prevent="createNewTodo">
-      <b-field>
-        <b-checkbox v-model="newTodo.status" />
-        <b-input expanded v-model="newTodo.title" />
-      </b-field>
-      <b-button native-type="submit">{{ $t("Add a todo") }}</b-button>
+    <form
+      class="form box"
+      @submit.prevent="
+        createNewTodo({
+          title: newTodo.title,
+          status: newTodo.status,
+          todoListId: props.id,
+        })
+      "
+    >
+      <o-field>
+        <o-checkbox v-model="newTodo.status" />
+        <o-input expanded v-model="newTodo.title" />
+      </o-field>
+      <o-button native-type="submit">{{ $t("Add a todo") }}</o-button>
     </form>
   </section>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { ITodo } from "@/types/todos";
 import { CREATE_TODO, FETCH_TODO_LIST } from "@/graphql/todos";
 import CompactTodo from "@/components/Todo/CompactTodo.vue";
-import { CURRENT_ACTOR_CLIENT } from "@/graphql/actor";
-import { displayName, IActor, usernameWithDomain } from "@/types/actor";
+import { displayName, usernameWithDomain } from "@/types/actor";
 import { ITodoList } from "@/types/todolist";
 import RouteName from "../../router/name";
 import { ApolloCache, FetchResult, InMemoryCache } from "@apollo/client/core";
+import { useMutation, useQuery } from "@vue/apollo-composable";
+import { useCurrentActorClient } from "@/composition/apollo/actor";
+import { useHead } from "@vueuse/head";
+import { computed, ref } from "vue";
 
-@Component({
-  components: {
-    CompactTodo,
-  },
-  apollo: {
-    todoList: {
+const props = defineProps<{ id: string }>();
+
+const { currentActor } = useCurrentActorClient();
+
+const { result: totoListResult } = useQuery<{ todoList: ITodoList }>(
+  FETCH_TODO_LIST,
+  () => ({
+    id: props.id,
+  })
+);
+
+const todoList = computed(() => totoListResult.value?.todoList);
+
+const groupDisplayName = computed(() => displayName(todoList.value?.actor));
+
+useHead({
+  title: computed(() => todoList.value?.title ?? ""),
+});
+
+const newTodo = ref<ITodo>({ title: "", status: false });
+
+const { mutate: createNewTodo, onDone } = useMutation(CREATE_TODO, () => ({
+  update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
+    if (data == null) return;
+    const cachedData = store.readQuery<{ todoList: ITodoList }>({
       query: FETCH_TODO_LIST,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.$route.params.id,
-        };
-      },
-    },
-    currentActor: CURRENT_ACTOR_CLIENT,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { todoList } = this;
-    return {
-      title: todoList.title,
-    };
-  },
-})
-export default class TodoList extends Vue {
-  @Prop({ type: String, required: true }) id!: string;
-
-  todoList!: ITodoList;
-
-  currentActor!: IActor;
-
-  newTodo: ITodo = { title: "", status: false };
-
-  RouteName = RouteName;
-
-  displayName = displayName;
-
-  usernameWithDomain = usernameWithDomain;
-
-  async createNewTodo(): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: CREATE_TODO,
-      variables: {
-        title: this.newTodo.title,
-        status: this.newTodo.status,
-        todoListId: this.id,
-      },
-      update: (store: ApolloCache<InMemoryCache>, { data }: FetchResult) => {
-        if (data == null) return;
-        const cachedData = store.readQuery<{ todoList: ITodoList }>({
-          query: FETCH_TODO_LIST,
-          variables: { id: this.todoList.id },
-        });
-        if (cachedData == null) return;
-        const { todoList } = cachedData;
-        if (todoList === null) {
-          console.error(
-            "Cannot update event notes cache, because of null value."
-          );
-          return;
-        }
-        const newTodo: ITodo = data.createTodo;
-        newTodo.creator = this.currentActor;
-
-        todoList.todos.elements = todoList.todos.elements.concat([newTodo]);
-
-        store.writeQuery({
-          query: FETCH_TODO_LIST,
-          variables: { id: this.todoList.id },
-          data: { todoList },
-        });
-      },
+      variables: { id: todoList.value?.id },
     });
-    this.newTodo = { title: "", status: false };
-  }
-}
+    if (cachedData == null) return;
+    const { todoList: todoListCached } = cachedData;
+    if (todoListCached === null) {
+      console.error("Cannot update event notes cache, because of null value.");
+      return;
+    }
+    const newTodoCached: ITodo = data.createTodo;
+    newTodoCached.creator = currentActor.value;
+
+    todoListCached.todos.elements = todoListCached.todos.elements.concat([
+      newTodoCached,
+    ]);
+
+    store.writeQuery({
+      query: FETCH_TODO_LIST,
+      variables: { id: todoListCached.id },
+      data: { todoListCached },
+    });
+  },
+}));
+
+onDone(() => {
+  newTodo.value = { title: "", status: false };
+});
 </script>

js/src/views/Todos/TodoLists.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="container section" v-if="group">
+  <div class="container mx-auto" v-if="group">
     <breadcrumbs-nav
       :links="[
         {
@@ -22,11 +22,19 @@
           )
         }}
       </p>
-      <form class="form" @submit.prevent="createNewTodoList">
-        <b-field :label="$t('List title')">
-          <b-input v-model="newTodoList.title" />
-        </b-field>
-        <b-button native-type="submit">{{ $t("Create a new list") }}</b-button>
+      <form
+        class="form"
+        @submit.prevent="
+          createNewTodoList({
+            title: newTodoList.title,
+            groupId: group?.id,
+          })
+        "
+      >
+        <o-field :label="$t('List title')">
+          <o-input v-model="newTodoList.title" />
+        </o-field>
+        <o-button native-type="submit">{{ $t("Create a new list") }}</o-button>
       </form>
       <div v-for="todoList in todoLists" :key="todoList.id">
         <router-link
@@ -50,74 +58,43 @@
     </section>
   </div>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
-import { FETCH_GROUP } from "@/graphql/group";
-import { IGroup, usernameWithDomain, displayName } from "@/types/actor";
+<script lang="ts" setup>
+import { usernameWithDomain, displayName } from "@/types/actor";
 import { CREATE_TODO_LIST } from "@/graphql/todos";
 import CompactTodo from "@/components/Todo/CompactTodo.vue";
 import { ITodoList } from "@/types/todolist";
 import RouteName from "../../router/name";
+import { useGroup } from "@/composition/apollo/group";
+import { computed, reactive } from "vue";
+import { useHead } from "@vueuse/head";
+import { useI18n } from "vue-i18n";
+import { useMutation } from "@vue/apollo-composable";
 
-@Component({
-  apollo: {
-    group: {
-      query: FETCH_GROUP,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          name: this.$route.params.preferredUsername,
-        };
-      },
-    },
-  },
-  components: {
-    CompactTodo,
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { group } = this;
-    return {
-      title: this.$t("{group}'s todolists", {
-        group: group.name || usernameWithDomain(group),
-      }) as string,
-    };
-  },
-})
-export default class TodoLists extends Vue {
-  @Prop({ type: String, required: true }) preferredUsername!: string;
+const props = defineProps<{ preferredUsername: string }>();
 
-  group!: IGroup;
+const { group } = useGroup(props.preferredUsername);
 
-  newTodoList: ITodoList = {
-    title: "",
-    id: "",
-    todos: { elements: [], total: 0 },
-  };
+const { t } = useI18n({ useScope: "global" });
 
-  RouteName = RouteName;
+useHead({
+  title: computed(() =>
+    t("{group}'s todolists", { group: displayName(group.value) })
+  ),
+});
 
-  usernameWithDomain = usernameWithDomain;
+const newTodoList = reactive<ITodoList>({
+  title: "",
+  id: "",
+  todos: { elements: [], total: 0 },
+});
 
-  displayName = displayName;
+const todoLists = computed((): ITodoList[] => {
+  return group.value?.todoLists.elements ?? [];
+});
 
-  get todoLists(): ITodoList[] {
-    return this.group.todoLists.elements;
-  }
+// const todoListsCount = computed((): number => {
+//   return group.value?.todoLists.total ?? 0;
+// });
 
-  get todoListsCount(): number {
-    return this.group.todoLists.total;
-  }
-
-  async createNewTodoList(): Promise<void> {
-    await this.$apollo.mutate({
-      mutation: CREATE_TODO_LIST,
-      variables: {
-        title: this.newTodoList.title,
-        groupId: this.group.id,
-      },
-    });
-  }
-}
+const { mutate: createNewTodoList } = useMutation(CREATE_TODO_LIST);
 </script>

js/src/views/Todos/TodoView.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="section container" v-if="todo">
+  <section class="container mx-auto" v-if="todo">
     <breadcrumbs-nav
       :links="[
         {
@@ -27,47 +27,25 @@
     <full-todo :todo="todo" />
   </section>
 </template>
-<script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+<script lang="ts" setup>
 import { GET_TODO } from "@/graphql/todos";
 import { ITodo } from "@/types/todos";
 import FullTodo from "@/components/Todo/FullTodo.vue";
 import RouteName from "../../router/name";
 import { displayName, usernameWithDomain } from "@/types/actor";
+import { useQuery } from "@vue/apollo-composable";
+import { useHead } from "@vueuse/head";
+import { computed } from "vue";
 
-@Component({
-  components: {
-    FullTodo,
-  },
-  apollo: {
-    todo: {
-      query: GET_TODO,
-      fetchPolicy: "cache-and-network",
-      variables() {
-        return {
-          id: this.$route.params.todoId,
-        };
-      },
-    },
-  },
-  metaInfo() {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    const { todo } = this;
-    return {
-      title: todo.title,
-    };
-  },
-})
-export default class Todo extends Vue {
-  @Prop({ type: String, required: true }) todoId!: string;
+const props = defineProps<{ todoId: string }>();
 
-  todo!: ITodo;
+const { result: todoResult } = useQuery<{ todo: ITodo }>(GET_TODO, () => ({
+  id: props.todoId,
+}));
 
-  RouteName = RouteName;
+const todo = computed(() => todoResult.value?.todo);
 
-  usernameWithDomain = usernameWithDomain;
-
-  displayName = displayName;
-}
+useHead({
+  title: computed(() => todo.value?.title),
+});
 </script>