Build down to 90 kB, 1.5 MB less after removing ant-design.

cista-front/src/assets/main.css

@@ -22,6 +22,12 @@
 }
 body {
     background-color: var(--table-background);
+    font-family: 'Montserrat', sans-serif;
+}
+table {
+    border-collapse: collapse;
+    border: 0;
+    gap: 0;
 }
 .ant-breadcrumb-separator, .ant-breadcrumb-link, .ant-breadcrumb .anticon {
     color: var(--primary-color) !important;
@@ -41,7 +47,7 @@ body {
 .ant-table-cell:hover{
     background-color: initial !important;
 }
-.ant-table-wrapper .ant-table-tbody >tr.ant-table-row-selected >td, 
+.ant-table-wrapper .ant-table-tbody >tr.ant-table-row-selected >td,
 .ant-table-wrapper .ant-table-tbody >tr.ant-table-row-selected:hover>td {
     background-color: transparent;
 }
@@ -53,7 +59,7 @@ body {
     .ant-input-group >.ant-input-group-addon:last-child .ant-input-search-button:not(.ant-btn-primary):hover{
         color : var(--blue-color) !important
     }
-    .ant-input-search .ant-input:hover, 
+    .ant-input-search .ant-input:hover,
     .ant-input-search .ant-input:focus {
         border-color: var(--blue-color);
     }
@@ -89,12 +95,12 @@ body {
     .ant-table-cell>button>.anticon {
         color: var(--primary-color);
     }
-    .ant-notification-close-x{ 
+    .ant-notification-close-x{
       color: var(--secondary-background);
     }
     .ant-empty-description{
         color: var(--primary-color);
-    } 
+    }
     .ant-modal .ant-modal-content{
         background-color: var(--secondary-background);
     }
@@ -102,4 +108,3 @@ body {
         color: var(--font-color);
     }
 }
-  

cista-front/src/components/AppNavigation.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { HomeOutlined } from '@ant-design/icons-vue';
 import { RouterLink } from 'vue-router'
 
 const props = withDefaults(
@@ -16,19 +15,23 @@ function generateUrl(pathIndex: number) {
 
 <template>
   <nav>
+    <!--
+
     <a-breadcrumb>
       <a-breadcrumb-item>
         <RouterLink to="/">
-          <home-outlined />
+          🏠
         </RouterLink>
       </a-breadcrumb-item>
-      
+
       <a-breadcrumb-item v-for="(location, index) in path" :key="index">
         <RouterLink :to ="generateUrl(index)">
           <span :class="(index === path.length - 1) && 'last' ">{{ decodeURIComponent(location) }}</span>
         </RouterLink>
       </a-breadcrumb-item>
     </a-breadcrumb>
+    -->
+
   </nav>
 </template>
 
@@ -38,6 +41,6 @@ function generateUrl(pathIndex: number) {
     }
     span:hover, .last{
     color: var(--blue-color)
-    
+
   }
 </style>

cista-front/src/components/HeaderMain.vue

@@ -2,7 +2,7 @@
 import { useDocumentStore } from '@/stores/documents'
 import LoginModal from '@/components/LoginModal.vue'
 import UploadButton from '@/components/UploadButton.vue'
-import { InfoCircleOutlined, SettingOutlined, PlusSquareOutlined, SearchOutlined, DeleteOutlined, DownloadOutlined, FileAddFilled, LinkOutlined, FolderAddFilled, FileFilled, FolderFilled } from '@ant-design/icons-vue'
+//import { InfoCircleOutlined, SettingOutlined, PlusSquareOutlined, SearchOutlined, DeleteOutlined, DownloadOutlined, FileAddFilled, LinkOutlined, FolderAddFilled, FileFilled, FolderFilled } from '@ant-design/icons-vue'
 import { h, ref  } from 'vue';
 
 const documentStore = useDocumentStore()
@@ -35,9 +35,6 @@ function uploadFolderHandler() {
 function createFolderHandler() {
   console.log("Uploading Folder")
 }
-function searchHandler() {
-  console.log("Searching ...")
-}
 function newViewHandler() {
   console.log("Creating new view ...")
 }
@@ -64,6 +61,8 @@ function download(){
     <div class="actions-list">
       <UploadButton />
 
+      <!--
+
       <a-tooltip title="Upload folder from disk">
         <a-button @click="uploadFolderHandler" type="text" class="action-button" :icon="h(FolderAddFilled)" />
       </a-tooltip>
@@ -75,7 +74,7 @@ function download(){
       <a-tooltip title="Create folder">
         <a-button @click="createFolderHandler" type="text" class="action-button" :icon="h(FolderFilled)" />
       </a-tooltip>
-      <!-- TODO ADD CONDITIONAL RENDER -->
+
       <template v-if="documentStore.selected.size > 0">
         <a-tooltip title="Share">
           <a-button type="text" @click="share" class="action-button" :icon="h(LinkOutlined)" />
@@ -87,18 +86,15 @@ function download(){
           <a-button type="text" @click="deleteHandler" class="action-button" :icon="h(DeleteOutlined)" />
         </a-tooltip>
       </template>
+      -->
     </div>
     <div class="actions-list">
       <LoginModal></LoginModal>
       <template v-if="showSearchInput">
-        <a-input-search
-        v-model="searchQuery"
-        class="margin-input"
-        @change="executeSearch"
-        @search="executeSearch"
-        :loading="isLoading"
-        />
+        <input type="search" v-model="searchQuery" class="margin-input">
       </template>
+      <!--
+
       <a-tooltip title="Search">
         <a-button @click="toggleSearchInput" type="text" class="action-button" :icon="h(SearchOutlined)" />
       </a-tooltip>
@@ -114,6 +110,8 @@ function download(){
       <a-tooltip title="About">
         <a-button @click="about" type="text" class="action-button" :icon="h(InfoCircleOutlined)" />
       </a-tooltip>
+      -->
+
     </div>
   </div>
 </template>

cista-front/src/components/LoginModal.vue

@@ -1,4 +1,6 @@
 <template>
+    <!--
+
     <a-tooltip title="Login">
         <template v-if="DocumentStore.isUserLogged">
             <a-button @click="logout" type="text" class="action-button" :icon="h(UserDeleteOutlined)" />
@@ -20,11 +22,11 @@
             </a-form>
         </div>
     </a-modal>
+    -->
 </template>
-  
+
 <script lang="ts" setup>
 import { ref, h } from 'vue';
-import { UserOutlined, UserDeleteOutlined } from '@ant-design/icons-vue';
 import { useDocumentStore } from '@/stores/documents';
 import { loginUser, logoutUser } from '@/repositories/User';
 import type { ISimpleError } from '@/repositories/Client';
@@ -60,14 +62,14 @@ const login = async () => {
     } catch (error) {
         const httpError = error as ISimpleError
         if(httpError.name){
-            loginForm.value.error = httpError.message 
+            loginForm.value.error = httpError.message
         }
     }finally{
         confirmLoading.value = false;
     }
 };
 </script>
-  
+
 <style scoped>
 .login-container {
     display: flex;
@@ -87,4 +89,3 @@ const login = async () => {
     color :var(--red-color)
 }
 </style>
-  

cista-front/src/components/NotificationLoading.vue

@@ -8,15 +8,14 @@
   </template>
 </template>
 <script setup lang="ts">
-import { CloseCircleOutlined } from '@ant-design/icons-vue';
-  import { useDocumentStore } from '@/stores/documents'
-  const documentStore = useDocumentStore();
-  
-  function dismissUpload(key: number){
-    documentStore.deleteUploadingDocument(key)
-  }
-  </script>
-  
+import { useDocumentStore } from '@/stores/documents'
+const documentStore = useDocumentStore()
+
+function dismissUpload(key: number){
+  documentStore.deleteUploadingDocument(key)
+}
+</script>
+
 <style scoped>
 .progress-container{
   display: flex;
@@ -25,4 +24,4 @@ import { CloseCircleOutlined } from '@ant-design/icons-vue';
 .close-button:hover{
   color: #b81414;
 }
-</style>
+</style>

cista-front/src/components/UploadButton.vue

@@ -1,27 +1,22 @@
 <script setup lang="ts">
 import { useDocumentStore } from '@/stores/documents'
-import NotificationLoading from '@/components/NotificationLoading.vue'
-import { FileAddFilled } from '@ant-design/icons-vue'
-import { notification } from 'ant-design-vue';
-import type { NotificationPlacement } from 'ant-design-vue';
 import { h, ref } from 'vue';
 
-const [api, contextHolder] = notification.useNotification();
-
 const fileUploadButton = ref()
 const documentStore = useDocumentStore();
-const open = (placement: NotificationPlacement) => openNotification(placement);
+const open = (placement: any) => openNotification(placement);
 
 const isNotificationOpen = ref(false);
-const openNotification = (placement: NotificationPlacement) => {
+const openNotification = (placement: any) => {
   if(!isNotificationOpen.value){
+    /*
     api.open({
       message: `Uploading documents`,
       description: h(NotificationLoading),
       placement,
       duration: 0,
       onClose: () => { isNotificationOpen.value = false }
-    });
+    });*/
     isNotificationOpen.value = true;
   }
 };
@@ -44,10 +39,10 @@ async function load(file: File, start: number, end: number): Promise<ArrayBuffer
 }
 
 async function sendChunk(file :File, start: number, end: number) {
-  const ws = documentStore.wsUpload; 
+  const ws = documentStore.wsUpload;
   if(ws){
     const chunk = await load(file, start, end)
-    
+
     ws.send(JSON.stringify({
         name: file.name,
         size: file.size,
@@ -78,15 +73,18 @@ async function uploadFileChangeHandler(event: Event) {
 }
 </script>
 <template>
+  <!--
+
   <a-tooltip title="Upload files from disk">
     <a-button @click="uploadFileHandler" type="text" class="action-button" :icon="h(FileAddFilled)" />
     <input ref="fileUploadButton" @change="uploadFileChangeHandler" class="upload-input" type="file" onclick="this.value=null;" />
   </a-tooltip>
   <contextHolder />
+  -->
 </template>
 <style scoped>
 /* Extends styles from HeaderMain.vue too  */
 .upload-input{
   display: none;
 }
-</style>
+</style>

cista-front/src/main.ts

@@ -1,9 +1,7 @@
-import 'ant-design-vue/dist/reset.css';
 import './assets/main.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-import Antd from 'ant-design-vue';
 
 import App from './App.vue'
 import router from './router'
@@ -15,7 +13,6 @@ app.config.errorHandler = (err) => {
 }
 app.use(createPinia())
 
-app.use(Antd);
 app.use(router)
 
-app.mount('#app')
+app.mount('#app')

cista-front/src/repositories/Client.ts

@@ -1,32 +1,21 @@
-import axios, {AxiosError} from 'axios'
-
 /* Base domain for all request */
 export const baseURL = import.meta.env.VITE_URL_DOCUMENT
 
-/* Config Client*/
-const Client = axios.create({
-  baseURL: baseURL,
-  headers: {
-    Accept: 'application/json',
-  },
-})
-
-Client.interceptors.response.use(
-  (response) => {
-    // Any status code that lie within the range of 2xx cause this function to trigger
-    // Do something with response data
-    return response
-  },
-  (error: AxiosError<any>) => {
-    const msg = error.response && error.response.data && error.response.data.error ?
-      error.response.data.error.message :  'Unexpected error'
-    const code = error.code ? Number(error.response?.status) : 500
-    const standardizedError = new SimpleError(code, msg)
-
-    return Promise.reject(standardizedError)
+class ClientClass {
+  async post(url: string, data?: Record<string, any>): Promise<any> {
+    const res = await fetch(`${baseURL}/`, {
+      method: "POST",
+      headers: {
+        accept: 'application/json',
+        "content-type": 'application/json',
+      },
+      body: data !== undefined ? JSON.stringify(data) : undefined,
+    })
+    return await res.json()
   }
-)
+}
 
+export const Client = new ClientClass()
 export interface ISimpleError extends Error {
   code : number
 }