Initialize VUE project with WS connection, main pages, and various small features

2023-10-25 18:43:44 -05:00
parent 444f0226e6
commit 9cd6f83bec
38 changed files with 5624 additions and 1224 deletions
--- a/cista-front/src/components/HeaderMain.vue
+++ b/cista-front/src/components/HeaderMain.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { useDocumentStore } from '@/stores/documents'
+import UploadButton from '@/components/UploadButton.vue'
+import { InfoCircleOutlined, SettingOutlined, PlusSquareOutlined, SearchOutlined, DeleteOutlined, DownloadOutlined, FileAddFilled, LinkOutlined, FolderAddFilled, FileFilled, FolderFilled } from '@ant-design/icons-vue'
+import { h } from 'vue';
+import Keyframe from 'ant-design-vue/es/_util/cssinjs/Keyframes';
+
+const documentStore = useDocumentStore()
+
+function createFileHandler() {
+  console.log("Creating file")
+}
+
+function uploadFolderHandler() {
+  console.log("Uploading Folder")
+}
+function createFolderHandler() {
+  console.log("Uploading Folder")
+}
+function searchHandler() {
+  console.log("Searching ...")
+}
+function newViewHandler() {
+  console.log("Creating new view ...")
+}
+function preferencesHandler() {
+  console.log("Preferences ...")
+}
+function about() {
+  console.log("About ...")
+}
+function deleteHandler(){
+  if(documentStore.selectedDocuments){
+    documentStore.selectedDocuments.forEach(document => {
+      documentStore.deleteDocument(document)
+    })
+  }
+}
+function share(){
+  console.log("Share ...")
+}
+function download(){
+  console.log("Download ...")
+}
+
+</script>
+
+<template>
+  <div class="actions-container">
+    <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>
+
+      <a-tooltip title="Create file">
+        <a-button @click="createFileHandler" type="text" class="action-button" :icon="h(FileFilled)" />
+      </a-tooltip>
+
+      <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.selectedDocuments && documentStore.selectedDocuments.length > 0">
+        <a-tooltip title="Share">
+          <a-button type="text" @click="share" class="action-button" :icon="h(LinkOutlined)" />
+        </a-tooltip>
+        <a-tooltip title="Download Zip">
+          <a-button type="text" @click="download" class="action-button" :icon="h(DownloadOutlined)" />
+        </a-tooltip>
+        <a-tooltip title="Delete">
+          <a-button type="text" @click="deleteHandler" class="action-button" :icon="h(DeleteOutlined)" />
+        </a-tooltip>
+      </template>
+    </div>
+
+    <div class="actions-list">
+      <a-tooltip title="Search">
+        <a-button @click="searchHandler" type="text" class="action-button" :icon="h(SearchOutlined)" />
+      </a-tooltip>
+
+      <a-tooltip title="Create new view">
+        <a-button @click="newViewHandler" type="text" class="action-button" :icon="h(PlusSquareOutlined)" />
+      </a-tooltip>
+
+      <a-tooltip title="Preferences">
+        <a-button @click="preferencesHandler" type="text" class="action-button" :icon="h(SettingOutlined)" />
+      </a-tooltip>
+
+      <a-tooltip title="About">
+        <a-button @click="about" type="text" class="action-button" :icon="h(InfoCircleOutlined)" />
+      </a-tooltip>
+    </div>
+  </div>
+</template>
+
+<style>
+.actions-container,
+.actions-list {
+  display: flex;
+  flex-wrap: nowrap;
+  gap: 15px;
+}
+
+.actions-container {
+  justify-content: space-between;
+}
+
+.action-button {
+  padding: 0;
+  font-size: 1.5em;
+  color: var(--secondary-color);
+
+  &:hover {
+    color: var(--blue-color) !important;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+
+  .actions-container,
+  .actions-list {
+    gap: 6px;
+  }
+}
+</style>