128 lines
3.5 KiB
Vue
128 lines
3.5 KiB
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 } 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>
|