diff options
Diffstat (limited to 'front-end/src/components/Settings/Bookmarks.vue')
| -rw-r--r-- | front-end/src/components/Settings/Bookmarks.vue | 86 |
1 files changed, 70 insertions, 16 deletions
diff --git a/front-end/src/components/Settings/Bookmarks.vue b/front-end/src/components/Settings/Bookmarks.vue index 68fa86b..7f73921 100644 --- a/front-end/src/components/Settings/Bookmarks.vue +++ b/front-end/src/components/Settings/Bookmarks.vue @@ -1,33 +1,87 @@ <script setup lang="ts"> import { apiCall, useWait } from '@vnuge/vnlib.browser'; -import { useStore } from '../../store'; -import { useObjectUrl, set } from '@vueuse/core'; +import { useStore, type DownloadContentType } from '../../store'; import { ref } from 'vue'; +import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue' const { bookmarks } = useStore(); -const blobUrl = ref<Blob>(); const downloadAnchor = ref(); -const obj = useObjectUrl(blobUrl); const { waiting } = useWait() -const downloadBookmarks = () => { +const downloadBookmarks = (contentType: DownloadContentType) => { apiCall(async () => { - const htmlData = await bookmarks.api.downloadAll(); - const blob = new Blob([htmlData], { type: 'text/html' }); - set(blobUrl, blob); - downloadAnchor.value?.click(); + const htmlData = await bookmarks.api.downloadAll(contentType); + + switch(contentType) { + case 'text/html': + case 'text/csv': + { + const blob = new Blob([htmlData], { type: contentType }); + const url = URL.createObjectURL(blob); + downloadAnchor.value.href = url + } + break; + case 'application/json': + { + const json = JSON.stringify(htmlData); + const blob = new Blob([json], { type: contentType }); + downloadAnchor.value.href = URL.createObjectURL(blob); + } + break; + } + + downloadAnchor.value.download = `bookmarks.${contentType.split('/')[1]}` + downloadAnchor.value.click(); }); } </script> <template> - <div class="flex flex-row justify-start"> - <div class=""> - <button class="flex items-center btn light" :disabled="waiting" @click="downloadBookmarks()"> - Download - </button> - </div> + <div class="relative w-fit"> + <Menu> + <MenuButton :disabled="waiting" class="flex items-center gap-3 btn light"> + <div class="hidden lg:inline">Download</div> + <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"> + <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 13V4M7 14H5a1 1 0 0 0-1 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1v-4c0-.6-.4-1-1-1h-2m-1-5-4 5-4-5m9 8h0"/> + </svg> + </MenuButton> + <transition + enter-active-class="transition duration-100 ease-out" + enter-from-class="transform scale-95 opacity-0" + enter-to-class="transform scale-100 opacity-100" + leave-active-class="transition duration-75 ease-out" + leave-from-class="transform scale-100 opacity-100" + leave-to-class="transform scale-95 opacity-0" + > + <MenuItems class="absolute z-10 bg-white divide-y divide-gray-100 rounded-b shadow right-2 lg:left-0 min-w-32 lg:end-0 dark:bg-gray-700"> + <ul class="py-2 text-sm text-gray-700 dark:text-gray-200" aria-labelledby="dropdownDefaultButton"> + <!-- Use the `active` state to conditionally style the active item. --> + <MenuItem as="template" v-slot="{ }"> + <li> + <button @click="downloadBookmarks('text/html')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> + HTML + </button> + </li> + </MenuItem> + <MenuItem as="template" v-slot="{ }"> + <li> + <button @click="downloadBookmarks('text/csv')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> + CSV + </button> + </li> + </MenuItem> + <MenuItem as="template" v-slot="{ }"> + <li> + <button @click="downloadBookmarks('application/json')" class="block w-full px-4 py-2 text-left hover:bg-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"> + JSON + </button> + </li> + </MenuItem> + </ul> + </MenuItems> + </transition> + </Menu> </div> - <a ref="downloadAnchor" :href="obj" download="bookmarks.html" class="hidden"></a> + <a ref="downloadAnchor" class="hidden"></a> </template>
\ No newline at end of file |