mirror of
https://github.com/hay-kot/homebox.git
synced 2025-08-06 01:20:31 +00:00
run linter
This commit is contained in:
parent
27ed919a1c
commit
9178da7f0b
4 changed files with 31 additions and 38 deletions
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 = {
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue