cista-storage/cista-front/src/components/HeaderMain.vue

<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, ref, defineProps  } from 'vue';

const documentStore = useDocumentStore()
const searchQuery = ref<string>('')
const showSearchInput = ref<boolean>(false)
const isLoading = ref<boolean>(false)

const toggleSearchInput = () => {
  showSearchInput.value = !showSearchInput.value;
  if (!showSearchInput.value) {
    searchQuery.value = '';
  }
};

const executeSearch = () => {
  isLoading.value = true;
  console.log(
    documentStore.mainDocument
  )
  setTimeout(() => {
    isLoading.value = false;
    // Perform your search logic here
  }, 2000);
};

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">
      <template v-if="showSearchInput">
        <a-input-search
        v-model="searchQuery"
        class="margin-input"
        v-on:keyup.enter="executeSearch"
        @search="executeSearch"
        :loading="isLoading"
        />
      </template>
      <a-tooltip title="Search">
        <a-button @click="toggleSearchInput" 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;
  }
}
.margin-input{
  margin-top: 5px;
}
</style>