From 52645b724834e669788a45edb9d135f243432540 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Fri, 2 Feb 2024 21:14:19 -0500
Subject: download file formats, button tweaks, more cache infra

---
 front-end/src/buttons.scss                         |  2 +-
 front-end/src/components/Settings/Bookmarks.vue    | 86 ++++++++++++++++++----
 front-end/src/components/Settings/PkiSettings.vue  |  2 +-
 front-end/src/components/Settings/TotpSettings.vue |  2 +-
 front-end/src/store/bookmarks.ts                   |  8 +-
 front-end/src/store/index.ts                       |  2 +
 6 files changed, 80 insertions(+), 22 deletions(-)

(limited to 'front-end')

diff --git a/front-end/src/buttons.scss b/front-end/src/buttons.scss
index 409f405..7088deb 100644
--- a/front-end/src/buttons.scss
+++ b/front-end/src/buttons.scss
@@ -1,5 +1,5 @@
 .btn{
-    @apply focus:ring-2 focus:outline-none font-medium rounded text-sm px-4 py-2 text-center me-2  text-white;
+    @apply focus:ring-2 focus:outline-none font-medium rounded text-sm px-4 py-2 text-center text-white;
 
     &.round{
         @apply rounded-full;
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
diff --git a/front-end/src/components/Settings/PkiSettings.vue b/front-end/src/components/Settings/PkiSettings.vue
index 2564cf6..dfa4cad 100644
--- a/front-end/src/components/Settings/PkiSettings.vue
+++ b/front-end/src/components/Settings/PkiSettings.vue
@@ -129,7 +129,7 @@ const onAddKey = async () => {
             <h3 class="text-xl font-bold">Authentication Keys</h3>
             <div class="">
                 
-                <button type="button" class="btn blue" @click.prevent="showAddKeyDialog">
+                <button type="button" class="btn blue me-2" @click.prevent="showAddKeyDialog">
                     <div class="flex flex-row items-center gap-1.5">
                         Add
                     </div>
diff --git a/front-end/src/components/Settings/TotpSettings.vue b/front-end/src/components/Settings/TotpSettings.vue
index 0019a9d..5793795 100644
--- a/front-end/src/components/Settings/TotpSettings.vue
+++ b/front-end/src/components/Settings/TotpSettings.vue
@@ -113,7 +113,7 @@ const onVerifyOtp = async (code: string) => {
             >
             </span>
         </div>
-        <div v-if="totpEnabled" class="flex">
+        <div v-if="totpEnabled" class="flex gap-2">
             <button class="btn light" @click="addOrUpdate()">
                 Regenerate
             </button>
diff --git a/front-end/src/store/bookmarks.ts b/front-end/src/store/bookmarks.ts
index b0595e9..76cc5b9 100644
--- a/front-end/src/store/bookmarks.ts
+++ b/front-end/src/store/bookmarks.ts
@@ -43,6 +43,8 @@ export interface BookmarkError{
     }>
 }
 
+export type DownloadContentType = 'application/json' | 'text/html' | 'text/csv' | 'text/plain'
+
 export interface BookmarkApi{
     list: (page: number, limit: number, search: BookmarkSearch) => Promise<Bookmark[]>
     add: (bookmark: Bookmark) => Promise<void>
@@ -51,7 +53,7 @@ export interface BookmarkApi{
     getTags: () => Promise<string[]>
     delete: (bookmark: Bookmark | Bookmark[]) => Promise<void>
     count: () => Promise<number>
-    downloadAll: () => Promise<string>
+    downloadAll: (contentType: DownloadContentType) => Promise<string>
 }
 
 export interface BookmarkSearch{
@@ -141,10 +143,10 @@ const useBookmarkApi = (endpoint: MaybeRef<string>): BookmarkApi => {
         return data.result;
     }
 
-    const downloadAll = async () => {
+    const downloadAll = async (contentType: DownloadContentType) => {
         //download the bookmarks as a html file
         const { data } = await axios.get<string>(`${get(endpoint)}?export=true`, { 
-            headers: { 'Content-Type': 'application/htlm' }
+            headers: { 'Accept': contentType }
         })
         return data;
     }
diff --git a/front-end/src/store/index.ts b/front-end/src/store/index.ts
index c13edcb..bcd79ad 100644
--- a/front-end/src/store/index.ts
+++ b/front-end/src/store/index.ts
@@ -19,6 +19,8 @@ import { noop, toSafeInteger, toString, defaults } from "lodash-es";
 import { defineStore } from "pinia";
 import { computed, shallowRef, watch } from "vue";
 
+export type { DownloadContentType } from './bookmarks'
+
 export const useQuery = (name: string) => {
 
     const getQuery = () => {
-- 
cgit