run linter

This commit is contained in:
Hayden 2022-12-03 10:41:10 -09:00
parent 27ed919a1c
commit 9178da7f0b
No known key found for this signature in database
GPG key ID: 17CF79474E257545
4 changed files with 31 additions and 38 deletions

View file

@ -11,10 +11,10 @@
</div> </div>
<div class="ml-4 flex-shrink-0"> <div class="ml-4 flex-shrink-0">
<a class="tooltip mr-2" data-tip="Download" :href="attachmentURL(attachment.id)" target="_blank"> <a class="tooltip mr-2" data-tip="Download" :href="attachmentURL(attachment.id)" target="_blank">
<Icon class="h-5 w-5" name="mdi-download"/> <Icon class="h-5 w-5" name="mdi-download" />
</a> </a>
<a class="tooltip" data-tip="Open" :href="attachmentURL(attachment.id)" target="_blank"> <a class="tooltip" data-tip="Open" :href="attachmentURL(attachment.id)" target="_blank">
<Icon class="h-5 w-5" name="mdi-open-in-new"/> <Icon class="h-5 w-5" name="mdi-open-in-new" />
</a> </a>
</div> </div>
</li> </li>
@ -37,11 +37,9 @@
const api = useUserApi(); const api = useUserApi();
function attachmentURL(attachmentId : string) { function attachmentURL(attachmentId: string) {
return api.authURL(`/items/${props.itemId}/attachments/${attachmentId}`); return api.authURL(`/items/${props.itemId}/attachments/${attachmentId}`);
} }
</script> </script>
<style scoped></style> <style scoped></style>

View file

@ -27,9 +27,9 @@ export function parseDate<T>(obj: T, keys: Array<keyof T> = []): T {
export class BaseAPI { export class BaseAPI {
http: Requests; http: Requests;
attachmentToken: string attachmentToken: string;
constructor(requests: Requests, attachmentToken: string = "") { constructor(requests: Requests, attachmentToken = "") {
this.http = requests; this.http = requests;
this.attachmentToken = attachmentToken; this.attachmentToken = attachmentToken;
} }

View file

@ -1,12 +1,6 @@
import { BaseAPI, route } from "../base"; import { BaseAPI, route } from "../base";
import { parseDate } from "../base/base-api"; import { parseDate } from "../base/base-api";
import { import { ItemAttachmentUpdate, ItemCreate, ItemOut, ItemSummary, ItemUpdate } from "../types/data-contracts";
ItemAttachmentUpdate,
ItemCreate,
ItemOut,
ItemSummary,
ItemUpdate,
} from "../types/data-contracts";
import { AttachmentTypes, PaginationResult } from "../types/non-generated"; import { AttachmentTypes, PaginationResult } from "../types/non-generated";
export type ItemsQuery = { export type ItemsQuery = {

View file

@ -35,17 +35,19 @@
type Photo = { type Photo = {
src: string; src: string;
} };
const photos = computed<Photo[]>(() => { const photos = computed<Photo[]>(() => {
return item.value?.attachments.reduce((acc, cur) => { return (
if (cur.type === "photo") { item.value?.attachments.reduce((acc, cur) => {
acc.push({ if (cur.type === "photo") {
src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`), acc.push({
}) src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`),
} });
return acc; }
}, [] as Photo[]) || []; return acc;
}, [] as Photo[]) || []
);
}); });
const attachments = computed<FilteredAttachments>(() => { const attachments = computed<FilteredAttachments>(() => {
@ -304,7 +306,7 @@
const refDialog = ref<HTMLDialogElement>(); const refDialog = ref<HTMLDialogElement>();
const dialoged = reactive({ const dialoged = reactive({
src: "", src: "",
}) });
function openDialog(img: Photo) { function openDialog(img: Photo) {
refDialog.value.showModal(); refDialog.value.showModal();
@ -319,30 +321,22 @@
onClickOutside(refDialogBody, () => { onClickOutside(refDialogBody, () => {
closeDialog(); closeDialog();
}); });
</script> </script>
<style>
/* Style dialog background */
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
</style>
<template> <template>
<BaseContainer v-if="item" class="pb-8"> <BaseContainer v-if="item" class="pb-8">
<dialog ref="refDialog" class="z-[999] fixed bg-transparent"> <dialog ref="refDialog" class="z-[999] fixed bg-transparent">
<div class="relative" ref="refDialogBody"> <div ref="refDialogBody" class="relative">
<div class="absolute right-0 -mt-3 -mr-3 sm:-mt-4 sm:-mr-4 space-x-1"> <div class="absolute right-0 -mt-3 -mr-3 sm:-mt-4 sm:-mr-4 space-x-1">
<a class="btn btn-sm sm:btn-md btn-primary btn-circle" :href="dialoged.src" download> <a class="btn btn-sm sm:btn-md btn-primary btn-circle" :href="dialoged.src" download>
<Icon class="h-5 w-5" name="mdi-download"/> <Icon class="h-5 w-5" name="mdi-download" />
</a> </a>
<button class="btn btn-sm sm:btn-md btn-primary btn-circle" @click="closeDialog()"> <button class="btn btn-sm sm:btn-md btn-primary btn-circle" @click="closeDialog()">
<Icon class="h-5 w-5" name="mdi-close" /> <Icon class="h-5 w-5" name="mdi-close" />
</button> </button>
</div> </div>
<img class="max-w-[80vw] max-h-[80vh]" :src="dialoged.src"/> <img class="max-w-[80vw] max-h-[80vh]" :src="dialoged.src" />
</div> </div>
</dialog> </dialog>
<section class="px-3"> <section class="px-3">
@ -405,8 +399,8 @@
<BaseCard> <BaseCard>
<template #title> Photos </template> <template #title> Photos </template>
<div class="container p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-scroll"> <div class="container p-4 flex flex-wrap gap-2 mx-auto max-h-[500px] overflow-scroll">
<button v-for="img in photos" @click="openDialog(img)"> <button v-for="(img, i) in photos" :key="i" @click="openDialog(img)">
<img class="rounded max-h-[200px]" :src="img.src"/> <img class="rounded max-h-[200px]" :src="img.src" />
</button> </button>
</div> </div>
</BaseCard> </BaseCard>
@ -470,3 +464,10 @@
</section> </section>
</BaseContainer> </BaseContainer>
</template> </template>
<style>
/* Style dialog background */
dialog::backdrop {
background: rgba(0, 0, 0, 0.5);
}
</style>