build: switch from yarn to npm to manage js dependencies and move js contents to root

yarn v1 is being deprecated and starts to have some issues

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

src/components/Todo/CompactTodo.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="card" v-if="todo">
+    <div class="card-content">
+      <o-checkbox v-model="status" />
+      <router-link
+        :to="{ name: RouteName.TODO, params: { todoId: todo.id } }"
+        >{{ todo.title }}</router-link
+      >
+      <span class="">
+        <span v-if="todo.dueDate" class="">
+          <o-icon icon="calendar" />
+          {{ formatDateString(todo.dueDate) }}
+        </span>
+        <span v-if="todo.assignedTo" class="">
+          <Account />
+          <o-icon icon="account" />
+          {{ `@${todo.assignedTo.preferredUsername}` }}
+          <span v-if="todo.assignedTo.domain">{{
+            `@${todo.assignedTo.domain}`
+          }}</span>
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ITodo } from "../../types/todos";
+import RouteName from "../../router/name";
+import { UPDATE_TODO } from "../../graphql/todos";
+import { computed, inject, ref } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import Account from "vue-material-design-icons/Account.vue";
+import { formatDateString } from "@/filters/datetime";
+import { Snackbar } from "@/plugins/snackbar";
+
+const props = defineProps<{ todo: ITodo }>();
+
+const editMode = ref(false);
+
+const status = computed({
+  get() {
+    return props.todo.status;
+  },
+  set(newStatus: boolean) {
+    updateTodo({ status: newStatus, id: props.todo.id });
+  },
+});
+
+const { mutate: updateTodo, onDone, onError } = useMutation(UPDATE_TODO);
+
+onDone(() => {
+  editMode.value = false;
+});
+
+const snackbar = inject<Snackbar>("snackbar");
+
+onError((e) => {
+  snackbar?.open({
+    message: e.message,
+    variant: "danger",
+    position: "bottom",
+  });
+});
+</script>

src/components/Todo/FullTodo.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="card" v-if="todo">
+    <div class="card-content">
+      <o-field :label="$t('Status')">
+        <o-checkbox size="large" v-model="status" />
+      </o-field>
+      <o-field :label="$t('Title')">
+        <o-input v-model="title" />
+      </o-field>
+      <o-field :label="$t('Assigned to')"> </o-field>
+      <o-field :label="$t('Due on')">
+        <o-datepicker v-model="dueDate" :first-day-of-week="firstDayOfWeek" />
+      </o-field>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import debounce from "lodash/debounce";
+import { ITodo } from "../../types/todos";
+import { UPDATE_TODO } from "../../graphql/todos";
+import { Snackbar } from "@/plugins/snackbar";
+import { computed, inject, ref } from "vue";
+import { useMutation } from "@vue/apollo-composable";
+import { Locale } from "date-fns";
+
+const props = defineProps<{
+  todo: ITodo;
+}>();
+
+const editMode = ref(false);
+
+const title = computed({
+  get(): string {
+    return props.todo.title;
+  },
+  set(newTitle: string) {
+    debounceUpdateTodo({ id: props.todo.id, title: newTitle });
+  },
+});
+
+const status = computed({
+  get(): boolean {
+    return props.todo.status;
+  },
+  set(newStatus: boolean) {
+    debounceUpdateTodo({ id: props.todo.id, status: newStatus });
+  },
+});
+
+// const assignedTo = computed({
+//   get(): IPerson | undefined {
+//     return props.todo.assignedTo;
+//   },
+//   set(person: IPerson | undefined) {
+//     debounceUpdateTodo({
+//       id: props.todo.id,
+//       assignedToId: person ? person.id : null,
+//     });
+//   },
+// });
+
+const dueDate = computed({
+  get(): string | undefined {
+    return props.todo.dueDate;
+  },
+
+  set(newDueDate: string | undefined) {
+    debounceUpdateTodo({ id: props.todo.id, dueDate: newDueDate });
+  },
+});
+
+const snackbar = inject<Snackbar>("snackbar");
+
+const {
+  mutate: updateTodo,
+  onDone: updateTodoDone,
+  onError: updateTodoError,
+} = useMutation(UPDATE_TODO);
+
+updateTodoDone(() => {
+  editMode.value = false;
+});
+
+updateTodoError((e) => {
+  snackbar?.open({
+    message: e.message,
+    variant: "danger",
+    position: "bottom",
+  });
+});
+
+const debounceUpdateTodo = debounce(updateTodo, 1000);
+
+const dateFnsLocale = inject<Locale>("dateFnsLocale");
+
+const firstDayOfWeek = computed((): number => {
+  return dateFnsLocale?.options?.weekStartsOn ?? 0;
+});
+</script>