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>
This commit is contained in:
Thomas Citharel
109
src/views/Todos/TodoList.vue
Normal file
109
src/views/Todos/TodoList.vue
Normal file
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<section class="container mx-auto" v-if="todoList">
|
||||
<breadcrumbs-nav
|
||||
:links="[
|
||||
{
|
||||
name: RouteName.GROUP,
|
||||
params: { preferredUsername: usernameWithDomain(todoList.actor) },
|
||||
text: groupDisplayName,
|
||||
},
|
||||
{
|
||||
name: RouteName.TODO_LISTS,
|
||||
params: { preferredUsername: usernameWithDomain(todoList.actor) },
|
||||
text: $t('Task lists'),
|
||||
},
|
||||
{
|
||||
name: RouteName.TODO_LIST,
|
||||
params: { id: todoList.id },
|
||||
text: todoList.title,
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<h2 class="title">{{ todoList.title }}</h2>
|
||||
<div v-for="todo in todoList.todos.elements" :key="todo.id">
|
||||
<compact-todo :todo="todo" />
|
||||
</div>
|
||||
<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" setup>
|
||||
import { ITodo } from "@/types/todos";
|
||||
import { CREATE_TODO, FETCH_TODO_LIST } from "@/graphql/todos";
|
||||
import CompactTodo from "@/components/Todo/CompactTodo.vue";
|
||||
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";
|
||||
|
||||
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,
|
||||
variables: { id: todoList.value?.id },
|
||||
});
|
||||
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>
|
||||
105
src/views/Todos/TodoLists.vue
Normal file
105
src/views/Todos/TodoLists.vue
Normal file
@@ -0,0 +1,105 @@
|
||||
<template>
|
||||
<div class="container mx-auto" v-if="group">
|
||||
<breadcrumbs-nav
|
||||
:links="[
|
||||
{
|
||||
name: RouteName.GROUP,
|
||||
params: { preferredUsername: usernameWithDomain(group) },
|
||||
text: displayName(group),
|
||||
},
|
||||
{
|
||||
name: RouteName.TODO_LISTS,
|
||||
params: { preferredUsername: usernameWithDomain(group) },
|
||||
text: $t('Task lists'),
|
||||
},
|
||||
]"
|
||||
/>
|
||||
<section>
|
||||
<p>
|
||||
{{
|
||||
$t(
|
||||
"Create to-do lists for all the tasks you need to do, assign them and set due dates."
|
||||
)
|
||||
}}
|
||||
</p>
|
||||
<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
|
||||
:to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }"
|
||||
>
|
||||
<h3>
|
||||
{{
|
||||
$t(
|
||||
"{title} ({count} todos)",
|
||||
{
|
||||
count: todoList.todos.total,
|
||||
title: todoList.title,
|
||||
},
|
||||
todoList.todos.total
|
||||
)
|
||||
}}
|
||||
</h3>
|
||||
</router-link>
|
||||
<compact-todo
|
||||
:todo="todo"
|
||||
v-for="todo in todoList.todos.elements"
|
||||
:key="todo.id"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
<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";
|
||||
|
||||
const props = defineProps<{ preferredUsername: string }>();
|
||||
const preferredUsername = computed(() => props.preferredUsername);
|
||||
|
||||
const { group } = useGroup(preferredUsername);
|
||||
|
||||
const { t } = useI18n({ useScope: "global" });
|
||||
|
||||
useHead({
|
||||
title: computed(() =>
|
||||
t("{group}'s todolists", { group: displayName(group.value) })
|
||||
),
|
||||
});
|
||||
|
||||
const newTodoList = reactive<ITodoList>({
|
||||
title: "",
|
||||
id: "",
|
||||
todos: { elements: [], total: 0 },
|
||||
});
|
||||
|
||||
const todoLists = computed((): ITodoList[] => {
|
||||
return group.value?.todoLists.elements ?? [];
|
||||
});
|
||||
|
||||
// const todoListsCount = computed((): number => {
|
||||
// return group.value?.todoLists.total ?? 0;
|
||||
// });
|
||||
|
||||
const { mutate: createNewTodoList } = useMutation(CREATE_TODO_LIST);
|
||||
</script>
|
||||
51
src/views/Todos/TodoView.vue
Normal file
51
src/views/Todos/TodoView.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<section class="container mx-auto" v-if="todo">
|
||||
<breadcrumbs-nav
|
||||
:links="[
|
||||
{
|
||||
name: RouteName.GROUP,
|
||||
params: {
|
||||
preferredUsername: usernameWithDomain(todo.todoList.actor),
|
||||
},
|
||||
text: displayName(todo.todoList.actor),
|
||||
},
|
||||
{
|
||||
name: RouteName.TODO_LISTS,
|
||||
params: {
|
||||
preferredUsername: usernameWithDomain(todo.todoList.actor),
|
||||
},
|
||||
text: $t('Task lists'),
|
||||
},
|
||||
{
|
||||
name: RouteName.TODO_LIST,
|
||||
params: { id: todo.todoList.id },
|
||||
text: todo.todoList.title,
|
||||
},
|
||||
{ name: RouteName.TODO, text: todo.title },
|
||||
]"
|
||||
/>
|
||||
<full-todo :todo="todo" />
|
||||
</section>
|
||||
</template>
|
||||
<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";
|
||||
|
||||
const props = defineProps<{ todoId: string }>();
|
||||
|
||||
const { result: todoResult } = useQuery<{ todo: ITodo }>(GET_TODO, () => ({
|
||||
id: props.todoId,
|
||||
}));
|
||||
|
||||
const todo = computed(() => todoResult.value?.todo);
|
||||
|
||||
useHead({
|
||||
title: computed(() => todo.value?.title),
|
||||
});
|
||||
</script>
|
||||
Reference in New Issue
Block a user