Merge pull request #14 from nnivxix/fix/jsdoc

Fix/jsdoc

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tomodo",
   "private": true,
-  "version": "0.9.0",
+  "version": "0.9.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

public/robots.txt

@@ -1,3 +1,3 @@
 User-Agent:*
-
-disallow: /collection/*
+Allow: /
+Disallow: /collection/*

src/components/ExampleJson.vue

@@ -1,5 +1,6 @@
 <script setup>
-defineProps({
+/** @type {import('@/types').ExampleJsonProp} */
+const { json } = defineProps({
   json: Object,
 });
 </script>

src/components/FormCollection.vue

@@ -1,14 +1,8 @@
 <script setup>
-import { Form, Field, ErrorMessage } from "vee-validate";
-import * as yup from "yup";
-import { toRaw } from "vue";
-import { useRouter } from "vue-router";
-import useFormCollection from "@/composables/useFormCollection";
+import { Field, ErrorMessage } from "vee-validate";
 
-const router = useRouter();
-const { addNewCollection, editCurrentCollection } = useFormCollection();
-
-const props = defineProps({
+/** @type {import('@/types').FormCollectionProp} */
+const { form, isEdit } = defineProps({
   form: Object,
   isEdit: Boolean,
 });

src/components/ProgressBar.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { computed } from "vue";
 
-const props = defineProps({
+/** @type { import('@/types').ProgressBarProp }  */
+const { totalDoneTodos, totalTodos } = defineProps({
   totalDoneTodos: Number,
   totalTodos: Number,
 });
 
+/**  @returns {import('vue').ComputedRef<number>} */
 const percentage = computed(() => {
   const countTodos = Math.round(
     (props.totalDoneTodos / props.totalTodos) * 100

src/components/TodoItem.vue

@@ -1,5 +1,10 @@
 <script setup>
-defineProps({
+/**
+ * @typedef {import('@/types').TodoItemProp} TodoItemProp
+ */
+
+/** @type {TodoItemProp} */
+const { todo, isSelected } = defineProps({
   todo: Object,
   isSelected: Boolean,
 });

src/composables/useCollection.js

@@ -1,19 +1,29 @@
 import { ref, toRaw, computed } from "vue";
 import dbCollection from "@/repositories/db-collection";
+/**
+ * @typedef {import('@/types').Collection} Collection
+ * @typedef {import('vue').Ref<Collection>} CollectionRef
+ * @typedef {import('vue').Ref<Collection[]>} CollectionsRef
+ */
 
-const collections = ref([]);
+/** @type {CollectionRef} */
 const collection = ref({
   id: "",
   name: "",
   description: "",
   created_at: "",
   todos: [],
 });
+
+/** @type {CollectionsRef} */
+const collections = ref([]);
+
 const useCollection = () => {
   const descriptionCollection = computed(() => {
     return collection.value?.description.replace(/(?:\r\n|\r|\n)/g, "<br>");
   });
 
+  /** @param {Collection} collection */
   const addCollection = (collection) => {
     collections.value.push(collection);
 
@@ -22,24 +32,16 @@ const useCollection = () => {
   const getCollections = async () => {
     collections.value = await dbCollection.index();
   };
+
   /**
-   * Detail Collection
-   * @returns {{
-   * id: String,
-   * name: String,
-   * description: String,
-   * created_at: Date,
-   * todos: {
-   * name: String,
-   * priority: String,
-   * isDone: Boolean,
-   * created_at: Date,
-   * }[]
-   * }} collection
+   * @param {string} id
+   * @returns {Collection}
    */
   const getDetailCollection = (id) => {
     return collections.value.find((collection) => collection.id == id);
   };
+
+  /** @param {string} id */
   const deleteColllection = (id) => {
     const index = collections.value.findIndex(
       (collection) => collection.id === id
@@ -48,6 +50,11 @@ const useCollection = () => {
     collections.value.splice(index, 1);
     dbCollection.delete(id);
   };
+
+  /**
+   * @param {Collection} collection
+   * @returns {Collection}
+   */
   const updateCollection = (collection) => {
     const index = collections.value.findIndex(
       (coll) => coll.id === collection.id

src/composables/useFormCollection.js

@@ -1,16 +1,20 @@
 import { ref } from "vue";
 import { customAlphabet } from "nanoid";
 import useCollection from "@/composables/useCollection";
-import dbCollection from "@/repositories/db-collection";
 
 const { addCollection, updateCollection } = useCollection();
+/**
+ * @typedef {import('@/types').FormCollection} FormCollection
+ * @typedef {import('vue').Ref<FormCollection>} FormCollectionRef
+ */
 
 const collection = ref({
   name: "",
   description: "",
   todos: [],
 });
 
+/** @type {FormCollectionRef} */
 const form = ref({
   name: collection.value.name,
   description: collection.value.description,
@@ -33,6 +37,8 @@ const useFormCollection = () => {
   }
   function addNewCollection() {
     const nanoid = customAlphabet("1234567890abcdef", 10);
+
+    /** @type {FormCollection} */
     const collection = {
       id: nanoid(),
       name: form.value.name,

src/composables/useFormTodo.js

@@ -1,7 +1,14 @@
 import { nanoid } from "nanoid";
 import { ref } from "vue";
 
+/**
+ *  @typedef {import('@/types').Todo} Todo
+ *  @typedef {import('vue').Ref<Todo>} FormTodo
+ */
+
 const isEditing = ref(false);
+
+/** @type {FormTodo} */
 const formTodo = ref({
   id: `todo-${nanoid(7)}`,
   name: "",

src/composables/useTodo.js

@@ -2,23 +2,17 @@ import dbCollection from "@/repositories/db-collection";
 import { toRaw, computed } from "vue";
 import useCollection from "@/composables/useCollection";
 
+/** @typedef {import('@/types')} Todo */
+
 const { collection, getDetailCollection } = useCollection();
 
 const useTodo = () => {
   const todos = computed(() => collection.value.todos);
   const doneTodos = computed(() =>
     collection.value.todos?.filter((todo) => todo.isDone === true)
   );
-  /**
-   * Add new todo to collection
-   * @param {{
-   * id: string,
-   * name: string,
-   * priority: string,
-   * isDone: boolean,
-   * created_at: Date,
-   * }} todo
-   */
+
+  /** @param {Todo} todo */
   const addTodo = (todo) => {
     const { todos } = getDetailCollection(collection.value.id);
 
@@ -30,10 +24,7 @@ const useTodo = () => {
     dbCollection.update(rawCollection);
   };
 
-  /**
-   * mark todo as done or not
-   * @param {number} index
-   */
+  /** @param {number} index */
   const markTodo = (index) => {
     const todo = collection.value.todos.at(index);
 
@@ -45,16 +36,7 @@ const useTodo = () => {
     dbCollection.update(rawCollection);
   };
 
-  /**
-   * Edit todo in collection
-   * @param {{
-   * id: string,
-   * name: string,
-   * priority: string,
-   * isDone: boolean,
-   * created_at: Date,
-   * }} newTodo
-   */
+  /** @param {Todo} newTodo */
   const editTodo = (newTodo) => {
     const { todos } = getDetailCollection(collection.value.id);
     const index = collection.value.todos.findIndex(
@@ -68,11 +50,8 @@ const useTodo = () => {
 
     dbCollection.update(rawCollection);
   };
-  /**
-   *
-   * @param {number} index
-   * @description still wip
-   */
+
+  /** @param {number} index */
   const deleteTodo = (index) => {
     const { todos } = getDetailCollection(collection.value.id);
 

src/pages/collection/create.vue

@@ -12,6 +12,7 @@ const schema = yup.object({
   description: yup.string(),
 });
 
+/** @param {import('@/types').Collection} values */
 const onSubmit = (values) => {
   form.value = values;
   form.value.todos = [];

src/pages/collection/edit.vue

@@ -15,6 +15,7 @@ const schema = yup.object({
 });
 const isEdit = route.fullPath.includes("edit");
 
+/** @param {import('@/types').Collection} values */
 const onSubmit = (values) => {
   form.value = {
     ...values,

src/pages/collection/id.vue

@@ -23,6 +23,11 @@ const vFormTodo = useForm({
   },
 });
 
+/**
+ * @typedef {import('@/types').Todo} Todo
+ */
+
+/** @type {import('vue').Ref<Todo>} */
 const selectedTodo = ref({});
 const resetVForm = async () => {
   vFormTodo.setValues({
@@ -33,16 +38,21 @@ const resetVForm = async () => {
     created_at: new Date(),
   });
 };
+
+/** @param {Todo} values */
 const submitUpdateTodo = (values) => {
   editTodo(values);
   resetFormTodo();
   selectedTodo.value = {};
 };
+
+/** @param {import('@/types').Todo} values */
 const submitAddTodo = (values) => {
   addTodo(values);
   resetFormTodo();
   selectedTodo.value = {};
 };
+
 const submitTodo = async () => {
   const todo = {
     ...toRaw(vFormTodo.values),
@@ -63,6 +73,8 @@ const submitTodo = async () => {
 
   return;
 };
+
+/** @param {number} index */
 const selectTodo = (index) => {
   isEditing.value = true;
 
@@ -79,6 +91,7 @@ const selectTodo = (index) => {
   formTodo.value = todo;
 };
 
+/** @param {number} index */
 const handleMarkTodo = (index) => {
   if (isEditing.value) {
     resetFormTodo();
@@ -89,6 +102,7 @@ const handleMarkTodo = (index) => {
   vFormTodo.setErrors({});
 };
 
+/** @param {string} id */
 const handleDeleteCollection = (id) => {
   const question = confirm("Are you sure delete this collection?");
   if (question) {

src/pages/import.vue

@@ -11,12 +11,17 @@ const router = useRouter();
 const { addCollection, getDetailCollection, deleteColllection } =
   useCollection();
 
-const isAttached = ref(false);
+/** @type {import('@/composables/useCollection').CollectionRef} */
 const collection = ref(null);
+const isAttached = ref(false);
 const isCollectionExist = ref(false);
 
+/**
+ * @param {DragEvent} event
+ */
 function handleDrop(event) {
   event.preventDefault();
+
   const droppedFiles = event.dataTransfer?.files;
 
   if (droppedFiles[0].type.includes("json")) {

src/repositories/db-collection.js

@@ -1,5 +1,7 @@
 import { openDB } from "idb";
-
+/**
+ * @typedef {import('@/types').Collection} Collection
+ */
 const dbPromise = openDB("collection-db", 1, {
   upgrade(database) {
     database.createObjectStore("collections", {
@@ -12,15 +14,34 @@ const dbCollections = {
   async index() {
     return (await dbPromise).getAll("collections");
   },
+  /**
+   * @param {Collection} collection
+   * @returns {Promise<Collection>}
+   */
   async add(collection) {
     return (await dbPromise).add("collections", collection);
   },
+
+  /**
+   * @param {Collection} collection
+   * @returns {Promise<Collection>}
+   */
   async update(collection) {
     return (await dbPromise).put("collections", collection);
   },
+
+  /**
+   * @param {string} id
+   * @returns {Promise<Collection>}
+   */
   async delete(id) {
     return (await dbPromise).delete("collections", id);
   },
+
+  /**
+   * @param {string} id
+   * @returns {Promise<Collection>}
+   */
   async show(id) {
     return (await dbPromise).get("collections", id);
   },