1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-12-20 05:46:31 +00:00

refactor: refactor item page UI ()

* fix generated types

* fix tailwind auto-complete

* force lowercase buttons

* add title and change style for items page

* add copy button support for item details

* empty state for log

* fix duplicate padding

* add option for create without closing the current dialog.

* hide purchase price is not set

* invert toggle for edit mode

* update styles on item cards

* add edit support for maintenance logs
This commit is contained in:
Hayden 2023-01-21 21:15:23 -09:00 committed by GitHub
parent c19fe94c08
commit 91d0c588d9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 197 additions and 68 deletions
.vscode
frontend

View file

@ -21,4 +21,13 @@
"editor.defaultFormatter": "dbaeumer.vscode-eslint" "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}, },
"eslint.format.enable": true, "eslint.format.enable": true,
"css.validate": false,
"tailwindCSS.includeLanguages": {
"vue": "html",
"vue-html": "html"
},
"editor.quickSuggestions": {
"strings": true
},
"tailwindCSS.experimental.configFile": "./frontend/tailwind.config.js"
} }

View file

@ -1,3 +1,7 @@
.text-no-transform { .text-no-transform {
text-transform: none !important; text-transform: none !important;
}
.btn {
text-transform: none !important;
} }

View file

@ -1,22 +1,18 @@
<template> <template>
<NuxtLink class="group card rounded-md" :to="`/item/${item.id}`"> <NuxtLink class="group card rounded-md" :to="`/item/${item.id}`">
<div class="rounded-t flex flex-col justify-center bg-neutral text-neutral-content p-5"> <div class="rounded-t flex flex-col justify-center bg-neutral text-neutral-content p-5">
<h2 class="text-base mb-2 last:mb-0 font-bold two-line">{{ item.name }}</h2> <h2 class="text-lg mb-1 last:mb-0 font-bold two-line">{{ item.name }}</h2>
<NuxtLink <div>
v-if="item.location" <NuxtLink v-if="item.location" class="text-sm hover:link" :to="`/location/${item.location.id}`">
class="inline-flex text-sm items-center hover:link"
:to="`/location/${item.location.id}`"
>
<Icon name="heroicons-map-pin" class="mr-1 h-4 w-4"></Icon>
<span>
{{ item.location.name }} {{ item.location.name }}
</span> </NuxtLink>
</NuxtLink> <span class="flex-1"></span>
</div>
</div> </div>
<div class="rounded-b p-4 pt-2 flex-grow col-span-4 flex flex-col gap-y-2 bg-base-100"> <div class="rounded-b p-4 pt-2 flex-grow col-span-4 flex flex-col gap-y-2 bg-base-100">
<div class="flex justify-between gap-2"> <div class="flex justify-between gap-2">
<div class="mr-auto tooltip tooltip-tip" data-tip="Purchase Price"> <div class="mr-auto tooltip tooltip-tip" data-tip="Purchase Price">
<span class="badge badge-sm badge-ghost h-5"> <span v-if="item.purchasePrice != '0'" class="badge badge-sm badge-ghost h-5">
<Currency :amount="item.purchasePrice" /> <Currency :amount="item.purchasePrice" />
</span> </span>
</div> </div>

View file

@ -1,7 +1,7 @@
<template> <template>
<BaseModal v-model="modal"> <BaseModal v-model="modal">
<template #title> Create Item </template> <template #title> Create Item </template>
<form @submit.prevent="create"> <form @submit.prevent="create(true)">
<FormSelect v-model="form.location" label="Location" :items="locations ?? []" /> <FormSelect v-model="form.location" label="Location" :items="locations ?? []" />
<FormTextField <FormTextField
ref="locationNameRef" ref="locationNameRef"
@ -13,13 +13,23 @@
<FormTextArea v-model="form.description" label="Item Description" /> <FormTextArea v-model="form.description" label="Item Description" />
<FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" /> <FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
<div class="modal-action"> <div class="modal-action">
<BaseButton ref="submitBtn" type="submit" :loading="loading"> <div class="flex justify-center">
<template #icon> <BaseButton ref="submitBtn" type="submit" class="rounded-r-none" :loading="loading">
<Icon name="mdi-package-variant" class="swap-off" /> <template #icon>
<Icon name="mdi-package-variant-closed" class="swap-on" /> <Icon name="mdi-package-variant" class="swap-off h-5 w-5" />
</template> <Icon name="mdi-package-variant-closed" class="swap-on h-5 w-5" />
Create </template>
</BaseButton> Create
</BaseButton>
<div class="dropdown dropdown-top">
<label tabindex="0" class="btn rounded-l-none rounded-r-xl">
<Icon class="h-5 w-5" name="mdi-chevron-down" />
</label>
<ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-64">
<li><button @click.prevent="create(false)">Create and Add Another</button></li>
</ul>
</div>
</div>
</div> </div>
</form> </form>
</BaseModal> </BaseModal>
@ -75,15 +85,6 @@
labels: [], labels: [],
}); });
function reset() {
form.name = "";
form.description = "";
form.color = "";
focused.value = false;
modal.value = false;
loading.value = false;
}
whenever( whenever(
() => modal.value, () => modal.value,
() => { () => {
@ -99,7 +100,7 @@
} }
); );
async function create() { async function create(close = false) {
if (!form.location) { if (!form.location) {
return; return;
} }
@ -119,7 +120,17 @@
} }
toast.success("Item created"); toast.success("Item created");
reset();
navigateTo(`/item/${data.id}`); // Reset
form.name = "";
form.description = "";
form.color = "";
focused.value = false;
loading.value = false;
if (close) {
modal.value = false;
navigateTo(`/item/${data.id}`);
}
} }
</script> </script>

View file

@ -1,13 +1,27 @@
<template> <template>
<button class="btn btn-outline btn-square btn-sm" @click="copyText"> <button class="" @click="copyText">
<label <label
class="swap swap-rotate" class="swap swap-rotate"
:class="{ :class="{
'swap-active': copied, 'swap-active': copied,
}" }"
> >
<Icon class="swap-off h-5 w-5" name="mdi-content-copy" /> <Icon
<Icon class="swap-on h-5 w-5" name="mdi-clipboard" /> class="swap-off"
name="mdi-content-copy"
:style="{
height: `${iconSize}px`,
width: `${iconSize}px`,
}"
/>
<Icon
class="swap-on"
name="mdi-clipboard"
:style="{
height: `${iconSize}px`,
width: `${iconSize}px`,
}"
/>
</label> </label>
</button> </button>
</template> </template>
@ -18,6 +32,10 @@
type: String as () => string, type: String as () => string,
default: "", default: "",
}, },
iconSize: {
type: Number as () => number,
default: 20,
},
}); });
const copied = ref(false); const copied = ref(false);

View file

@ -1,11 +1,11 @@
<template> <template>
<div class="border-t border-gray-300 px-4 py-5 sm:p-0"> <div class="border-t border-gray-300 px-4 py-5 sm:p-0">
<dl class="sm:divide-y sm:divide-gray-300"> <dl class="sm:divide-y sm:divide-gray-300">
<div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <div v-for="(detail, i) in details" :key="i" class="py-4 sm:grid group sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm font-medium text-base-content"> <dt class="text-sm font-medium text-base-content">
{{ detail.name }} {{ detail.name }}
</dt> </dt>
<dd class="mt-1 text-sm text-base-content sm:col-span-2 sm:mt-0"> <dd class="text-sm text-base-content text-start sm:col-span-2">
<slot :name="detail.slot || detail.name" v-bind="{ detail }"> <slot :name="detail.slot || detail.name" v-bind="{ detail }">
<DateTime v-if="detail.type == 'date'" :date="detail.text" /> <DateTime v-if="detail.type == 'date'" :date="detail.text" />
<Currency v-else-if="detail.type == 'currency'" :amount="detail.text" /> <Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
@ -23,7 +23,15 @@
</ClientOnly> </ClientOnly>
</template> </template>
<template v-else> <template v-else>
{{ detail.text }} <span class="flex items-center">
{{ detail.text }}
<span
v-if="detail.copyable"
class="opacity-0 group-hover:opacity-100 ml-4 my-0 duration-75 transition-opacity"
>
<CopyText :text="detail.text.toString()" :icon-size="16" class="btn btn-xs btn-ghost btn-circle" />
</span>
</span>
</template> </template>
</slot> </slot>
</dd> </dd>

View file

@ -29,6 +29,7 @@ type MarkdownDetail = BaseDetail & {
export type Detail = BaseDetail & { export type Detail = BaseDetail & {
text: StringLike; text: StringLike;
type?: "text"; type?: "text";
copyable?: boolean;
}; };
export type AnyDetail = DateDetail | CurrencyDetail | LinkDetail | MarkdownDetail | Detail; export type AnyDetail = DateDetail | CurrencyDetail | LinkDetail | MarkdownDetail | Detail;

View file

@ -4,7 +4,7 @@ import { DaisyTheme } from "~~/lib/data/themes";
export type LocationViewPreferences = { export type LocationViewPreferences = {
showDetails: boolean; showDetails: boolean;
showEmpty: boolean; showEmpty: boolean;
editorSimpleView: boolean; editorAdvancedView: boolean;
theme: DaisyTheme; theme: DaisyTheme;
}; };
@ -18,8 +18,8 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
{ {
showDetails: true, showDetails: true,
showEmpty: true, showEmpty: true,
editorSimpleView: true, editorAdvancedView: false,
theme: "garden", theme: "homebox",
}, },
{ mergeDefaults: true } { mergeDefaults: true }
); );

View file

@ -96,7 +96,7 @@ export interface ItemOut {
/** @example "0" */ /** @example "0" */
purchasePrice: string; purchasePrice: string;
/** Purchase */ /** Purchase */
purchaseTime: string; purchaseTime: Date;
quantity: number; quantity: number;
serialNumber: string; serialNumber: string;
soldNotes: string; soldNotes: string;
@ -148,7 +148,7 @@ export interface ItemUpdate {
/** @example "0" */ /** @example "0" */
purchasePrice: string; purchasePrice: string;
/** Purchase */ /** Purchase */
purchaseTime: string; purchaseTime: Date;
quantity: number; quantity: number;
/** Identifications */ /** Identifications */
serialNumber: string; serialNumber: string;
@ -228,7 +228,7 @@ export interface LocationUpdate {
export interface MaintenanceEntry { export interface MaintenanceEntry {
/** @example "0" */ /** @example "0" */
cost: string; cost: string;
date: string; date: Date;
description: string; description: string;
id: string; id: string;
name: string; name: string;
@ -237,7 +237,7 @@ export interface MaintenanceEntry {
export interface MaintenanceEntryCreate { export interface MaintenanceEntryCreate {
/** @example "0" */ /** @example "0" */
cost: string; cost: string;
date: string; date: Date;
description: string; description: string;
name: string; name: string;
} }
@ -245,7 +245,7 @@ export interface MaintenanceEntryCreate {
export interface MaintenanceEntryUpdate { export interface MaintenanceEntryUpdate {
/** @example "0" */ /** @example "0" */
cost: string; cost: string;
date: string; date: Date;
description: string; description: string;
name: string; name: string;
} }
@ -257,7 +257,7 @@ export interface MaintenanceLog {
itemId: string; itemId: string;
} }
export interface PaginationResultItemSummary { export interface PaginationResultRepoItemSummary {
items: ItemSummary[]; items: ItemSummary[];
page: number; page: number;
pageSize: number; pageSize: number;
@ -294,7 +294,7 @@ export interface ValueOverTime {
} }
export interface ValueOverTimeEntry { export interface ValueOverTimeEntry {
date: string; date: Date;
name: string; name: string;
value: number; value: number;
} }

View file

@ -55,6 +55,7 @@
item.value?.attachments.reduce((acc, cur) => { item.value?.attachments.reduce((acc, cur) => {
if (cur.type === "photo") { if (cur.type === "photo") {
acc.push({ acc.push({
// @ts-expect-error - it's impossible for this to be null at this point
src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`), src: api.authURL(`/items/${item.value.id}/attachments/${cur.id}`),
}); });
} }
@ -99,6 +100,10 @@
}); });
const assetID = computed<Details>(() => { const assetID = computed<Details>(() => {
if (!item.value) {
return [];
}
if (item.value?.assetId === "000-000") { if (item.value?.assetId === "000-000") {
return []; return [];
} }
@ -112,6 +117,10 @@
}); });
const itemDetails = computed<Details>(() => { const itemDetails = computed<Details>(() => {
if (!item.value) {
return [];
}
return [ return [
{ {
name: "Description", name: "Description",
@ -125,14 +134,17 @@
{ {
name: "Serial Number", name: "Serial Number",
text: item.value?.serialNumber, text: item.value?.serialNumber,
copyable: true,
}, },
{ {
name: "Model Number", name: "Model Number",
text: item.value?.modelNumber, text: item.value?.modelNumber,
copyable: true,
}, },
{ {
name: "Manufacturer", name: "Manufacturer",
text: item.value?.manufacturer, text: item.value?.manufacturer,
copyable: true,
}, },
{ {
name: "Insured", name: "Insured",
@ -362,6 +374,7 @@
<template> <template>
<BaseContainer v-if="item" class="pb-8"> <BaseContainer v-if="item" class="pb-8">
<Title>{{ item.name }}</Title>
<dialog ref="refDialog" class="z-[999] fixed bg-transparent"> <dialog ref="refDialog" class="z-[999] fixed bg-transparent">
<div ref="refDialogBody" class="relative"> <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">
@ -383,6 +396,7 @@
<span class="text-base-content"> <span class="text-base-content">
{{ item ? item.name : "" }} {{ item ? item.name : "" }}
</span> </span>
<div v-if="item.parent" class="text-sm breadcrumbs pb-0"> <div v-if="item.parent" class="text-sm breadcrumbs pb-0">
<ul class="text-base-content/70"> <ul class="text-base-content/70">
<li> <li>
@ -392,6 +406,9 @@
</ul> </ul>
</div> </div>
<template #description> <template #description>
<p class="text-lg">
{{ item ? item.description : "" }}
</p>
<div class="flex flex-wrap gap-2 mt-3"> <div class="flex flex-wrap gap-2 mt-3">
<NuxtLink ref="badge" class="badge p-3" :to="`/location/${item.location.id}`"> <NuxtLink ref="badge" class="badge p-3" :to="`/location/${item.location.id}`">
<Icon name="heroicons-map-pin" class="mr-2 swap-on"></Icon> <Icon name="heroicons-map-pin" class="mr-2 swap-on"></Icon>
@ -403,14 +420,14 @@
</div> </div>
</template> </template>
</BaseSectionHeader> </BaseSectionHeader>
<div class="flex flex-wrap items-center justify-between mb-6"> <div class="flex flex-wrap items-center justify-between mb-6 mt-3">
<div class="tabs"> <div class="btn-group">
<NuxtLink <NuxtLink
v-for="t in tabs" v-for="t in tabs"
:key="t.id" :key="t.id"
:to="t.to" :to="t.to"
class="tab tab-bordered lg:tab-lg" class="btn btn-sm"
:class="`${t.to === currentPath ? 'tab-active' : ''}`" :class="`${t.to === currentPath ? 'btn-active' : ''}`"
> >
{{ t.name }} {{ t.name }}
</NuxtLink> </NuxtLink>
@ -503,7 +520,7 @@
</div> </div>
</section> </section>
<section v-if="!hasNested" class="my-6 px-3"> <section v-if="!hasNested" class="my-6">
<BaseSectionHeader v-if="item && item.children && item.children.length > 0"> Child Items </BaseSectionHeader> <BaseSectionHeader v-if="item && item.children && item.children.length > 0"> Child Items </BaseSectionHeader>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<ItemCard v-for="child in item.children" :key="child.id" :item="child" /> <ItemCard v-for="child in item.children" :key="child.id" :item="child" />

View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ItemAttachment, ItemField, ItemUpdate } from "~~/lib/api/types/data-contracts"; import { ItemAttachment, ItemField, ItemOut, ItemUpdate } from "~~/lib/api/types/data-contracts";
import { AttachmentTypes } from "~~/lib/api/types/non-generated"; import { AttachmentTypes } from "~~/lib/api/types/non-generated";
import { useLabelStore } from "~~/stores/labels"; import { useLabelStore } from "~~/stores/labels";
import { useLocationStore } from "~~/stores/locations"; import { useLocationStore } from "~~/stores/locations";
@ -71,7 +71,7 @@
type FormField = { type FormField = {
type: "text" | "textarea" | "select" | "date" | "label" | "location" | "number" | "checkbox"; type: "text" | "textarea" | "select" | "date" | "label" | "location" | "number" | "checkbox";
label: string; label: string;
ref: string; ref: keyof ItemOut;
}; };
const mainFields: FormField[] = [ const mainFields: FormField[] = [
@ -342,10 +342,10 @@
<span class="text-base-content"> Edit </span> <span class="text-base-content"> Edit </span>
<template #after> <template #after>
<div class="modal-action mt-3"> <div class="modal-action mt-3">
<div class="mr-auto tooltip" data-tip="Hide the cruft! "> <div class="mr-auto tooltip" data-tip="Show Advanced Options">
<label class="label cursor-pointer mr-auto"> <label class="label cursor-pointer mr-auto">
<input v-model="preferences.editorSimpleView" type="checkbox" class="toggle toggle-primary" /> <input v-model="preferences.editorAdvancedView" type="checkbox" class="toggle toggle-primary" />
<span class="label-text ml-4"> Simple View </span> <span class="label-text ml-4"> Advanced </span>
</label> </label>
</div> </div>
<BaseButton size="sm" @click="saveItem"> <BaseButton size="sm" @click="saveItem">
@ -368,7 +368,7 @@
<FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" /> <FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
<Autocomplete <Autocomplete
v-if="!preferences.editorSimpleView" v-if="preferences.editorAdvancedView"
v-model="parent" v-model="parent"
v-model:search="query" v-model:search="query"
:items="results" :items="results"
@ -438,7 +438,7 @@
</BaseCard> </BaseCard>
<div <div
v-if="!preferences.editorSimpleView" v-if="preferences.editorAdvancedView"
ref="attDropZone" ref="attDropZone"
class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg"
> >
@ -494,7 +494,7 @@
</div> </div>
</div> </div>
<div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg"> <div v-if="preferences.editorAdvancedView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6"> <div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6">Purchase Details</h3> <h3 class="text-lg font-medium leading-6">Purchase Details</h3>
</div> </div>
@ -536,7 +536,7 @@
</div> </div>
</div> </div>
<div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg"> <div v-if="preferences.editorAdvancedView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6"> <div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6">Warranty Details</h3> <h3 class="text-lg font-medium leading-6">Warranty Details</h3>
</div> </div>
@ -578,7 +578,7 @@
</div> </div>
</div> </div>
<div v-if="!preferences.editorSimpleView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg"> <div v-if="preferences.editorAdvancedView" class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg">
<div class="px-4 py-5 sm:px-6"> <div class="px-4 py-5 sm:px-6">
<h3 class="text-lg font-medium leading-6">Sold Details</h3> <h3 class="text-lg font-medium leading-6">Sold Details</h3>
</div> </div>

View file

@ -1,7 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import DatePicker from "~~/components/Form/DatePicker.vue"; import DatePicker from "~~/components/Form/DatePicker.vue";
import { StatsFormat } from "~~/components/global/StatCard/types"; import { StatsFormat } from "~~/components/global/StatCard/types";
import { ItemOut } from "~~/lib/api/types/data-contracts"; import { ItemOut, MaintenanceEntry } from "~~/lib/api/types/data-contracts";
const props = defineProps<{ const props = defineProps<{
item: ItemOut; item: ItemOut;
@ -45,6 +45,7 @@
}); });
const entry = reactive({ const entry = reactive({
id: null as string | null,
modal: false, modal: false,
name: "", name: "",
date: new Date(), date: new Date(),
@ -56,7 +57,21 @@
entry.modal = true; entry.modal = true;
} }
function resetEntry() {
entry.id = null;
entry.name = "";
entry.date = new Date();
entry.description = "";
entry.cost = "";
}
async function createEntry() { async function createEntry() {
if (entry.id) {
editEntry();
resetEntry();
return;
}
const { error } = await api.items.maintenance.create(props.item.id, { const { error } = await api.items.maintenance.create(props.item.id, {
name: entry.name, name: entry.name,
date: entry.date, date: entry.date,
@ -72,6 +87,7 @@
entry.modal = false; entry.modal = false;
refreshLog(); refreshLog();
resetEntry();
} }
const confirm = useConfirm(); const confirm = useConfirm();
@ -90,6 +106,39 @@
} }
refreshLog(); refreshLog();
} }
function openEditDialog(e: MaintenanceEntry) {
entry.modal = true;
entry.id = e.id;
entry.name = e.name;
entry.date = new Date(e.date);
entry.description = e.description;
entry.cost = e.cost;
console.log(e);
}
async function editEntry() {
if (!entry.id) {
return;
}
const { error } = await api.items.maintenance.update(props.item.id, entry.id, {
name: entry.name,
date: entry.date,
description: entry.description,
cost: entry.cost,
});
if (error) {
toast.error("Failed to update entry");
return;
}
entry.modal = false;
refreshLog();
}
</script> </script>
<template> <template>
@ -102,11 +151,11 @@
<FormTextArea v-model="entry.description" label="Notes" /> <FormTextArea v-model="entry.description" label="Notes" />
<FormTextField v-model="entry.cost" autofocus label="Cost" /> <FormTextField v-model="entry.cost" autofocus label="Cost" />
<div class="py-2 flex justify-end"> <div class="py-2 flex justify-end">
<BaseButton type="submit" class="ml-2"> <BaseButton type="submit" class="ml-2 mt-2">
<template #icon> <template #icon>
<Icon name="mdi-post" /> <Icon name="mdi-post" />
</template> </template>
Create {{ entry.id ? "Update" : "Create" }}
</BaseButton> </BaseButton>
</div> </div>
</form> </form>
@ -154,7 +203,13 @@
<div class="p-6"> <div class="p-6">
<Markdown :source="e.description" /> <Markdown :source="e.description" />
</div> </div>
<div class="flex justify-end p-4"> <div class="flex justify-end p-4 gap-1">
<BaseButton size="sm" @click="openEditDialog(e)">
<template #icon>
<Icon name="mdi-edit" />
</template>
Edit
</BaseButton>
<BaseButton size="sm" @click="deleteEntry(e.id)"> <BaseButton size="sm" @click="deleteEntry(e.id)">
<template #icon> <template #icon>
<Icon name="mdi-delete" /> <Icon name="mdi-delete" />
@ -163,6 +218,16 @@
</BaseButton> </BaseButton>
</div> </div>
</BaseCard> </BaseCard>
<div class="hidden first:block">
<button
type="button"
class="relative block w-full rounded-lg border-2 border-dashed border-base-content p-12 text-center"
@click="newEntry()"
>
<Icon name="mdi-wrench-clock" class="h-16 w-16"></Icon>
<span class="mt-2 block text-sm font-medium text-gray-900"> Create Your First Entry </span>
</button>
</div>
</div> </div>
</section> </section>
</div> </div>

View file

@ -221,11 +221,11 @@
<BaseButton size="sm" @click="generateToken"> Generate Invite Link </BaseButton> <BaseButton size="sm" @click="generateToken"> Generate Invite Link </BaseButton>
</div> </div>
<div v-if="token" class="pt-4 flex items-center pl-1"> <div v-if="token" class="pt-4 flex items-center pl-1">
<CopyText class="mr-2 btn-primary" :text="tokenUrl" /> <CopyText class="mr-2 btn-primary btn btn-outline btn-square btn-sm" :text="tokenUrl" />
{{ tokenUrl }} {{ tokenUrl }}
</div> </div>
<div v-if="token" class="pt-4 flex items-center pl-1"> <div v-if="token" class="pt-4 flex items-center pl-1">
<CopyText class="mr-2 btn-primary" :text="token" /> <CopyText class="mr-2 btn-primary btn btn-outline btn-square btn-sm" :text="token" />
{{ token }} {{ token }}
</div> </div>
</div> </div>