implement Comments and VPopup

.env

@@ -1,2 +1,3 @@
 VITE_API_BASE_URL=https://jsonplaceholder.typicode.com
+VITE_API_TODO_URL=http://localhost:8000
 VITE_API_TIMEOUT=10000

.env.example

@@ -1,2 +1,3 @@
 VITE_API_BASE_URL=https://jsonplaceholder.typicode.com
+VITE_API_TODO_URL=http://localhost:8000
 VITE_API_TIMEOUT=10000

data/todos.json

@@ -0,0 +1,27 @@
+{
+  "statusCards": [
+    {
+      "title": "active",
+      "id": "1"
+    },
+    {
+      "title": "inProgress",
+      "id": "2"
+    },
+    {
+      "title": "done",
+      "id": "3"
+    }
+  ],
+  "todos": [
+    {
+      "statusCardId": "2",
+      "status": "inProgress",
+      "id": "c9d5",
+      "title": "an active todo",
+      "dueDate": "2025-04-06T08:37:00.000Z",
+      "createdAt": "2025-04-06T08:38:15.586Z",
+      "updatedAt": "2025-04-06T08:38:15.586Z"
+    }
+  ]
+}

package.json

@@ -7,12 +7,14 @@
         "dev": "vite",
         "build": "vite build",
         "preview": "vite preview",
-        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore"
+        "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+        "server": "json-server --watch data/todos.json --port 8000"
     },
     "dependencies": {
         "axios": "^1.3.2",
         "bootstrap": "^5.3.1",
         "bootstrap-icons": "^1.11.2",
+        "json-server": "^1.0.0-beta.3",
         "pasoonate": "^1.2.5",
         "pinia": "^2.0.28",
         "vue": "^3.3.4",

src/App.vue

@@ -1,15 +1,17 @@
 <template>
     <RouterView />
     <VToasts/>
+    <VPopup />
 </template>
 
 <script>
     // Components
     import VToasts from '@/components/VToasts.vue';
+    import VPopup from "@/components/VPopup.vue";
 
     export default {
         name: 'App',
 
-        components: { VToasts }
+        components: {VPopup, VToasts }
     };
-</script>
+</script>

src/components/VPopup.vue

@@ -0,0 +1,54 @@
+<template>
+<div class="position-fixed bottom-0 end-0">
+
+    <div
+        v-for="item of items"
+        :key="item.id"
+        :class="`toast show align-items-center border-1 m-2 fw-medium text-bg-${item.theme}`"
+        role="alert"
+        aria-live="assertive"
+        aria-atomic="true"
+    >
+        <div class="d-flex justify-content-between align-items-center">
+            <div class="toast-body" v-html="item.body"></div>
+            <button
+                type="button"
+                class="text-grey bg-transparent border-0 text-decoration-none"
+                @click="confirm(item)"
+            >
+                {{ $t('Confirm') }}
+            </button>
+
+            <button
+                type="button"
+                class="bg-danger border-0 text-decoration-none text-white me-2 rounded-1"
+                @click="cancel(item)"
+            >
+                {{ $t('Cancel') }}
+            </button>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+// Composables
+import { installPopup, usePopup } from "@/composables/popup.composable";
+
+export default {
+    name: "VPopup",
+
+    setup() {
+        let items = installPopup();
+
+        const { hidePopup, cancel, confirm } = usePopup();
+
+        return {
+            items,
+            hidePopup,
+            confirm,
+            cancel
+        };
+    },
+};
+</script>

src/components/VToasts.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="toast-container bottom-0 end-0">
+    <div class="position-fixed bottom-0 end-0">
         <div
             v-for="item of items"
             :key="item.id"
@@ -9,37 +9,42 @@
             aria-atomic="true"
         >
             <div class="d-flex justify-content-between align-items-center">
-                <div class="toast-body" v-html="item.body"></div>
-
+                <div v-if="item.timer" class="ps-2 d-flex gap-1 flex-wrap align-items-center">
+                    <div class="timer">{{ String(Math.ceil(item.timer / 1000)).padStart(2, 0) }}</div>
+                    <div class="toast-body" v-html="item.body"></div>
+                </div>
+                <div v-else class="toast-body" v-html="item.body"></div>
                 <button
-                    v-if="item.clearable"
+                    v-if="item.undoAction"
                     type="button"
-                    class="btn-close p-3"
-                    aria-label="Close"
-                    @click="hideToast(item.id)"
-                ></button>
+                    class="bg-transparent border-0 btn-link text-decoration-none text-info"
+                    @click="undo(item)"
+                >
+                    Undo
+                </button>
+                <button v-if="item.clearable" type="button" class="btn-close p-3" aria-label="Close" @click="hideToast(item.id)"></button>
             </div>
         </div>
     </div>
 </template>
 
 <script>
-    // Composables
-    import { installToast, useToast } from '@/composables/toast.composable';
-
-    export default {
-        name: 'VToasts',
+// Composables
+import { installToast, useToast } from "@/composables/toast.composable";
 
-        setup() {
-            let items = installToast();
+export default {
+    name: "VToasts",
 
-            const { hideToast } = useToast();
+    setup() {
+        let items = installToast();
 
-            return {
-                items,
+        const { hideToast, undo } = useToast();
 
-                hideToast,
-            };
-        }
-    }
+        return {
+            items,
+            undo,
+            hideToast,
+        };
+    },
+};
 </script>

src/components/comments/CommentsFilter.vue

@@ -0,0 +1,92 @@
+<template>
+<VForm class="row">
+
+        <div class="col-3">
+            <VInput v-model="filters.id" :placeholder="$t('Filter by Body or Id')">
+                <template #label>{{ $t("Search") }}</template>
+            </VInput>
+        </div>
+
+        <div class="col-3">
+            <VSelect
+                v-model="filters.length"
+                :items="textLength"
+                item-key="key"
+                item-text="text"
+                :placeholder="$t('Filter by Body length')"
+                clearable
+            >
+                <template #label>{{ $t("Body Length") }}</template>
+            </VSelect>
+        </div>
+
+        <div class="col-3">
+            <VSelect
+                v-model="filters.status"
+                :items="statusItems"
+                item-key="key"
+                item-text="text"
+                :placeholder="$t('Filter by Status')"
+                clearable
+            >
+                <template #label>{{ $t("Status") }}</template>
+            </VSelect>
+        </div>
+</VForm>
+</template>
+
+<script setup>
+// Components
+import VForm from "@/components/form/VForm.vue";
+import VInput from "@/components/form/VInput.vue";
+import VSelect from "@/components/form/VSelect.vue";
+
+// Composables
+import {useModelRef} from "@/composables/model.composable";
+
+// Services
+import {t} from "@/services/language.service";
+
+const props = defineProps({
+    modelValue: {
+        type: Object,
+        required: true,
+    },
+});
+const emit = defineEmits(["update:modelValue"]);
+
+const filters = useModelRef("modelValue");
+
+const statusItems = [
+    {
+        key: "pending",
+        text: t("Pending"),
+    },
+    {
+        key: "confirmed",
+        text: t("Confirmed"),
+    },
+    {
+        key: "rejected",
+        text: t("Rejected"),
+    },
+];
+
+const textLength = [
+    {
+        key: 150,
+        text: t("150 - 180 characters"),
+    },
+    {
+        key: 180,
+        text: t("180 - 210 characters"),
+    },
+    {
+        key: 210,
+        text: t("210 characters or more"),
+    },
+];
+
+
+
+</script>

src/components/data-table/VTable.vue

@@ -11,6 +11,7 @@
         </table>
 
         <VPagination
+            v-if="hasPagination"
             v-model="pageRef"
             v-model:size="itemsPerPageRef"
             :total="items.length"
@@ -57,6 +58,10 @@
                 type: Number,
                 default: 10
             },
+            hasPagination: {
+                type: Boolean,
+                default: true
+            },
             isLoading: {
                 type: Boolean,
                 default: false
@@ -73,10 +78,12 @@
             const itemsPerPageRef = useModelRef('itemsPerPage');
 
             const paginatedItems = computed(() => {
-                const start = (pageRef.value - 1) * itemsPerPageRef.value;
-                const end = pageRef.value * itemsPerPageRef.value;
+                if (props.hasPagination) {
+                    const start = (pageRef.value - 1) * itemsPerPageRef.value;
+                    const end = pageRef.value * itemsPerPageRef.value;
 
-                return props.items.slice(start, end);
+                    return props.items.slice(start, end);
+                } else return props.items;
             });
 
             return {

src/components/layout/side-menu/VSideMenu.vue

@@ -24,6 +24,22 @@
 
                 {{ $t('Todos') }}
             </VSideMenuItem>
+
+            <VSideMenuItem :to="{ name: 'Todos-Test' }">
+                <template #icon>
+                    <i class="bi bi-check2-square"></i>
+                </template>
+
+                {{ $t('Todos Test') }}
+            </VSideMenuItem>
+
+            <VSideMenuItem :to="{ name: 'comments' }">
+                <template #icon>
+                    <i class="bi bi-chat-left-text"></i>
+                </template>
+
+                {{ $t('comments') }}
+            </VSideMenuItem>
         </nav>
     </aside>
 </template>