refactor pages

tmeftah · Aug 9, 2024 · 08719f7 · 08719f7
1 parent 7286b3d
commit 08719f7
Show file tree

Hide file tree

Showing 9 changed files with 201 additions and 113 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -2,7 +2,7 @@
   "name": "raggi",
   "version": "0.0.1",
   "description": "rag app for small business",
-  "productName": "rag app for small business",
+  "productName": "Aora Ask, Discover, Decide",
   "author": "tmeftah <sudtechnics@gmail.com>",
   "private": true,
   "scripts": {

diff --git a/frontend/src/components/EssentialLink.vue b/frontend/src/components/EssentialLink.vue
@@ -1,6 +1,5 @@
 <template>
-
-  <q-item clickable tag="a" :href="props.link" class="q-py-md" >
+  <q-item clickable tag="a" :to="props.link" exact class="q-py-md">
     <q-item-section v-if="props.icon" avatar>
       <q-icon :name="props.icon" />
     </q-item-section>

diff --git a/frontend/src/layouts/MainLayout.vue b/frontend/src/layouts/MainLayout.vue
@@ -1,28 +1,21 @@
 <template>
-  <q-layout view="FHh Lpr lFf">
-    <q-header dark bordered class="bg-darkblue-1 text-white-8">
+  <q-layout view="hHh lpR fFf">
+    <q-header dark bordered class="bg-white text-grey-8">
       <q-toolbar>
-        <q-btn
-          flat
-          dense
-          round
-          icon="menu"
-          aria-label="Menu"
-          @click="toggleLeftDrawer"
-        />
-        <q-toolbar-title>  DOC-INFO </q-toolbar-title>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
+
+        <q-toolbar-title
+          class="text-bold text-weight-bolder text-h3"
+          style="color: #507295"
+        >
+          Aora.
+        </q-toolbar-title>
+        <!-- Orion Inova -->
       </q-toolbar>
     </q-header>
 
-    <q-drawer
-      v-model="leftDrawerOpen"
-      show-if-above
-      bordered
-      width="220"
-    >
-
+    <q-drawer v-model="leftDrawerOpen" show-if-above bordered :width="220">
       <q-list>
-
         <EssentialLink
           v-for="link in linksList"
           :key="link.title"
@@ -50,19 +43,19 @@ const linksList = [
     title: "Dashboard",
     caption: "overview",
     icon: "line_axis",
-    link: "1",
+    link: "/",
   },
   {
     title: "Ask a question",
     caption: "chat with docs",
     icon: "chat_bubble_outline",
-    link: "2",
+    link: "/query",
   },
   {
     title: "Alle Dokumente",
     caption: "chat with docs",
     icon: "folder_open",
-    link: "/",
+    link: "documents",
   },
 ];
 

diff --git a/frontend/src/pages/1Page.vue b/frontend/src/pages/1Page.vue
diff --git a/frontend/src/pages/2Page.vue b/frontend/src/pages/2Page.vue
diff --git a/frontend/src/pages/DocumentsPage.vue b/frontend/src/pages/DocumentsPage.vue
@@ -0,0 +1,88 @@
+<template>
+  <q-page>
+    <div class="q-pa-md">
+      <div class="row q-mb-xl">
+        <div class="col">
+          <span class="text-h4">Documents</span>
+          <p class="q-mt-sm text-caption text-weight-light">
+            All documents related to
+          </p>
+        </div>
+        <div class="col-grow q-gutter-sm">
+          <q-btn color="secondary" label="Upload" icon="upload" />
+        </div>
+      </div>
+      <q-table :rows="rows" :columns="columns" row-key="name" flat bordered>
+        <template v-slot:top-right>
+          <q-input
+            dense
+            debounce="300"
+            placeholder="Filter by filename"
+            outlined
+          >
+            <template v-slot:prepend>
+              <q-icon name="filter_list" class="q-mr-sm" />
+            </template>
+          </q-input>
+        </template>
+        <template v-slot:body-cell-status="props">
+          <q-td :props="props">
+            <div>
+              <q-badge :color="props.row.status_text" :label="props.value" />
+            </div>
+            <div class="my-table-details">
+              {{ props.row.details }}
+            </div>
+          </q-td>
+        </template>
+      </q-table>
+    </div>
+  </q-page>
+</template>
+
+<script setup>
+defineOptions({
+  name: "IndexPage",
+});
+
+const columns = [
+  {
+    name: "name",
+    required: true,
+    label: "Name",
+    align: "left",
+    field: (row) => row.name,
+    format: (val) => `${val}`,
+    sortable: true,
+  },
+  {
+    name: "date",
+    align: "center",
+    label: "Date",
+    field: "date",
+    sortable: true,
+  },
+  {
+    name: "status",
+    align: "center",
+    label: "Status",
+    field: "status",
+    sortable: true,
+  },
+];
+
+const rows = [
+  {
+    name: "Document 01",
+    date: "12/05/2024",
+    status: "done",
+    status_text: "green",
+  },
+  {
+    name: "Document 02",
+    date: "01/08/2024",
+    status: "on progress",
+    status_text: "purple",
+  },
+];
+</script>
diff --git a/frontend/src/pages/IndexPage.vue b/frontend/src/pages/IndexPage.vue
@@ -1,9 +1,36 @@
 <template>
-  <q-page class="flex flex-center"> index page </q-page>
+  <q-page padding>
+    <q-card flat bordered>
+      <q-card-section>
+        <div class="text-h6">Dashboard</div>
+      </q-card-section>
+
+      <q-separator />
+      <div class="q-pa-md row items-start q-gutter-md">
+        <q-card class="q-mb-sm">
+          <q-card-section>
+            <div class="text-h6">Active Users</div>
+            <div class="text-h2 text-center text-bold">100</div></q-card-section
+          >
+        </q-card>
+
+        <q-card>
+          <q-card-section>
+            <div class="text-h6">Number of Documents</div>
+            <div class="text-center text-h2 text-bold">3524</div>
+          </q-card-section>
+        </q-card>
+      </div>
+    </q-card>
+  </q-page>
 </template>
 
 <script setup>
 defineOptions({
-  name: "IndexPage",
+  name: "1Page",
 });
 </script>
+
+<style scoped>
+/* Add any custom styles for the dashboard here */
+</style>
diff --git a/frontend/src/pages/QueryPage.vue b/frontend/src/pages/QueryPage.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="q-pa-md example-row-equal-width">
+    <div class="row">
+      <div class="col col-sm-6">
+        <q-input
+          @keydown.enter.prevent="MainStore.sendQA(question)"
+          outlined
+          v-model="question"
+          placeholder="ask a question..."
+          type="text"
+          dense
+        >
+          <template v-slot:prepend>
+            <q-icon
+              name="search"
+              class="q-mr-sm"
+              @click="MainStore.sendQA(question)"
+            />
+          </template>
+        </q-input>
+
+        <q-card flat bordered class="q-mt-sm column" v-if="solution || loading">
+          <q-input
+            v-model="solution"
+            autogrow
+            borderless
+            dense
+            :loading="loading"
+            class="text-weight-bolder text-body1 q-mx-sm"
+          />
+
+          <div
+            class="q-ma-sm q-gutter-y-md items-start"
+            v-if="!loading && solution"
+          >
+            <q-btn-group push>
+              <q-btn size="xs" icon="thumb_up" />
+              <q-btn
+                size="xs"
+                icon="thumb_down"
+                style="border-left: 1px black solid"
+              />
+            </q-btn-group>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { storeToRefs } from "pinia";
+import { useMainStore } from "../stores/main-store";
+
+defineOptions({
+  name: "2Page",
+});
+
+const MainStore = useMainStore();
+const { loading, solution, question } = storeToRefs(MainStore);
+</script>
diff --git a/frontend/src/router/routes.js b/frontend/src/router/routes.js
@@ -3,9 +3,12 @@ const routes = [
     path: "/",
     component: () => import("layouts/MainLayout.vue"),
     children: [
-      { path: "", component: () => import("pages/IndexPage.vue") },
-      { path: "1", component: () => import("pages/1Page.vue") },
-      { path: "2", component: () => import("pages/2Page.vue") },
+      { path: "/", component: () => import("pages/IndexPage.vue") },
+      { path: "/query", component: () => import("pages/QueryPage.vue") },
+      {
+        path: "/documents",
+        component: () => import("pages/DocumentsPage.vue"),
+      },
     ],
   },