diff options
Diffstat (limited to 'front-end/src/components/Boomarks')
-rw-r--r-- | front-end/src/components/Boomarks/AddOrUpdateForm.vue | 68 | ||||
-rw-r--r-- | front-end/src/components/Boomarks/util.ts | 61 |
2 files changed, 129 insertions, 0 deletions
diff --git a/front-end/src/components/Boomarks/AddOrUpdateForm.vue b/front-end/src/components/Boomarks/AddOrUpdateForm.vue new file mode 100644 index 0000000..a4a3f1d --- /dev/null +++ b/front-end/src/components/Boomarks/AddOrUpdateForm.vue @@ -0,0 +1,68 @@ +<script setup lang="ts"> +import { computed, toRefs } from 'vue'; +import { join, split } from 'lodash-es'; + +const emit = defineEmits(['submit']) +const props = defineProps<{ + v$:any +}>() + +const { v$ } = toRefs(props) + +//Convert tags array to string +const tags = computed({ + get: () => join(v$.value.Tags.$model, ','), + set: (value:string) => v$.value.Tags.$model = split(value, ',') +}) + +</script> +<template> + <form class="grid grid-cols-1 gap-4 p-4" @submit.prevent="emit('submit')"> + <fieldset> + <label for="url" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">URL</label> + <input type="text" id="url" class="input" placeholder="https://www.example.com" + v-model="v$.Url.$model" + :class="{'dirty': v$.Url.$dirty, 'error': v$.Url.$invalid}" + required + > + </fieldset> + <fieldset> + <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label> + <input type="text" id="Name" class="input" placeholder="Hello World" + v-model="v$.Name.$model" + :class="{'dirty': v$.Name.$dirty, 'error': v$.Name.$invalid}" + required + > + </fieldset> + <fieldset> + <label for="tags" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Tags</label> + <input type="text" id="tags" class="input" placeholder="tag1,tag2,tag3" + v-model="tags" + :class="{'dirty': v$.Tags.$dirty, 'error': v$.Tags.$invalid}" + > + </fieldset> + <fieldset> + <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label> + <textarea type="text" id="description" rows="5" class="input" placeholder="This is a bookmark" + v-model="v$.Description.$model" + :class="{'dirty': v$.Description.$dirty, 'error': v$.Description.$invalid}" + /> + </fieldset> + + <div class="flex justify-end"> + <button type="submit" class="btn blue"> + Submit + </button> + </div> + </form> +</template> + +<style scoped lang="scss">input.search { + @apply ps-10 p-2.5 border block w-full text-sm rounded; + @apply bg-gray-50 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 border-gray-300 text-gray-900 focus:ring-blue-500 focus:border-blue-500; +} + +button.search { + @apply p-2.5 ms-2 text-sm font-medium text-white bg-blue-700 rounded border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 +} +</style>
\ No newline at end of file diff --git a/front-end/src/components/Boomarks/util.ts b/front-end/src/components/Boomarks/util.ts new file mode 100644 index 0000000..669be46 --- /dev/null +++ b/front-end/src/components/Boomarks/util.ts @@ -0,0 +1,61 @@ +// Copyright (C) 2024 Vaughn Nugent +// +// This program is free software: you can redistribute it and/or modify +// it under the terms of the GNU Affero General Public License as +// published by the Free Software Foundation, either version 3 of the +// License, or (at your option) any later version. +// +// This program is distributed in the hope that it will be useful, +// but WITHOUT ANY WARRANTY; without even the implied warranty of +// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +// GNU Affero General Public License for more details. +// +// You should have received a copy of the GNU Affero General Public License +// along with this program. If not, see <https://www.gnu.org/licenses/>. + +import type { Bookmark } from '../../store/bookmarks' +import { split, first, includes, map, filter, nth, isEmpty } from 'lodash-es' + +export const parseNetscapeBookmarkString = (bookmarkString: string) : Bookmark[] => { + const lines = split(bookmarkString, '\n'); + //remove any empty lines + const elements = filter(lines, l => l.length > 0) + + const header = first(elements); + if(!includes(header, 'NETSCAPE-Bookmark-file-1')) { + throw new Error('Invalid bookmark file'); + } + + const bookmarks = map(elements, (line, index): Partial<Bookmark> => { + + //Search for required html components in the line + const Url = line.match(/HREF="([^"]*)"/)?.[1]; + const tags = line.match(/TAGS="(.*)"/)?.[1]; + const Name = line.match(/">(.*)<\/A/)?.[1]; + const date = line.match(/ADD_DATE="([^"]*)"/)?.[1]; + //Next line should be the description + const descriptionEl = nth(elements, index + 1); + const Description = split(descriptionEl, '<DD>')?.[1]; + + const Tags = filter(split(tags, ','), t => !isEmpty(t)); + + const bookmark: Partial<Bookmark> = { + Name, + Url, + Description, + } + + //Only set tags if there are any + if(!isEmpty(Tags)) { + bookmark.Tags = Tags; + } + + if (date){ + bookmark.Created = new Date(parseInt(date) * 1000).toISOString(); + } + return bookmark; + }); + + //Filter any empty entires + return filter(bookmarks, b => b.Name && b.Url) as Bookmark[]; +}
\ No newline at end of file |