mirror of
https://github.com/hay-kot/homebox.git
synced 2024-12-18 04:56:30 +00:00
refactor: refactor item page UI (#235)
* 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
GitHub
parent
c19fe94c08
commit
91d0c588d9
13 changed files with 197 additions and 68 deletions
9
.vscode/settings.json
vendored
9
.vscode/settings.json
vendored
|
|
@ -21,4 +21,13 @@
|
|||
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
|
||||
},
|
||||
"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"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.text-no-transform {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
||||
.btn {
|
||||
text-transform: none !important;
|
||||
}
|
||||
|
|
@ -1,22 +1,18 @@
|
|||
<template>
|
||||
<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">
|
||||
<h2 class="text-base mb-2 last:mb-0 font-bold two-line">{{ item.name }}</h2>
|
||||
<NuxtLink
|
||||
v-if="item.location"
|
||||
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>
|
||||
<h2 class="text-lg mb-1 last:mb-0 font-bold two-line">{{ item.name }}</h2>
|
||||
<div>
|
||||
<NuxtLink v-if="item.location" class="text-sm hover:link" :to="`/location/${item.location.id}`">
|
||||
{{ item.location.name }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
</NuxtLink>
|
||||
<span class="flex-1"></span>
|
||||
</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="flex justify-between gap-2">
|
||||
<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" />
|
||||
</span>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<BaseModal v-model="modal">
|
||||
<template #title> Create Item </template>
|
||||
<form @submit.prevent="create">
|
||||
<form @submit.prevent="create(true)">
|
||||
<FormSelect v-model="form.location" label="Location" :items="locations ?? []" />
|
||||
<FormTextField
|
||||
ref="locationNameRef"
|
||||
|
|
@ -13,13 +13,23 @@
|
|||
<FormTextArea v-model="form.description" label="Item Description" />
|
||||
<FormMultiselect v-model="form.labels" label="Labels" :items="labels ?? []" />
|
||||
<div class="modal-action">
|
||||
<BaseButton ref="submitBtn" type="submit" :loading="loading">
|
||||
<template #icon>
|
||||
<Icon name="mdi-package-variant" class="swap-off" />
|
||||
<Icon name="mdi-package-variant-closed" class="swap-on" />
|
||||
</template>
|
||||
Create
|
||||
</BaseButton>
|
||||
<div class="flex justify-center">
|
||||
<BaseButton ref="submitBtn" type="submit" class="rounded-r-none" :loading="loading">
|
||||
<template #icon>
|
||||
<Icon name="mdi-package-variant" class="swap-off h-5 w-5" />
|
||||
<Icon name="mdi-package-variant-closed" class="swap-on h-5 w-5" />
|
||||
</template>
|
||||
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>
|
||||
</form>
|
||||
</BaseModal>
|
||||
|
|
@ -75,15 +85,6 @@
|
|||
labels: [],
|
||||
});
|
||||
|
||||
function reset() {
|
||||
form.name = "";
|
||||
form.description = "";
|
||||
form.color = "";
|
||||
focused.value = false;
|
||||
modal.value = false;
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
whenever(
|
||||
() => modal.value,
|
||||
() => {
|
||||
|
|
@ -99,7 +100,7 @@
|
|||
}
|
||||
);
|
||||
|
||||
async function create() {
|
||||
async function create(close = false) {
|
||||
if (!form.location) {
|
||||
return;
|
||||
}
|
||||
|
|
@ -119,7 +120,17 @@
|
|||
}
|
||||
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,27 @@
|
|||
<template>
|
||||
<button class="btn btn-outline btn-square btn-sm" @click="copyText">
|
||||
<button class="" @click="copyText">
|
||||
<label
|
||||
class="swap swap-rotate"
|
||||
:class="{
|
||||
'swap-active': copied,
|
||||
}"
|
||||
>
|
||||
<Icon class="swap-off h-5 w-5" name="mdi-content-copy" />
|
||||
<Icon class="swap-on h-5 w-5" name="mdi-clipboard" />
|
||||
<Icon
|
||||
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>
|
||||
</button>
|
||||
</template>
|
||||
|
|
@ -18,6 +32,10 @@
|
|||
type: String as () => string,
|
||||
default: "",
|
||||
},
|
||||
iconSize: {
|
||||
type: Number as () => number,
|
||||
default: 20,
|
||||
},
|
||||
});
|
||||
|
||||
const copied = ref(false);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<div class="border-t border-gray-300 px-4 py-5 sm:p-0">
|
||||
<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">
|
||||
{{ detail.name }}
|
||||
</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 }">
|
||||
<DateTime v-if="detail.type == 'date'" :date="detail.text" />
|
||||
<Currency v-else-if="detail.type == 'currency'" :amount="detail.text" />
|
||||
|
|
@ -23,7 +23,15 @@
|
|||
</ClientOnly>
|
||||
</template>
|
||||
<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>
|
||||
</slot>
|
||||
</dd>
|
||||
|
|
|
|||
|
|
@ -29,6 +29,7 @@ type MarkdownDetail = BaseDetail & {
|
|||
export type Detail = BaseDetail & {
|
||||
text: StringLike;
|
||||
type?: "text";
|
||||
copyable?: boolean;
|
||||
};
|
||||
|
||||
export type AnyDetail = DateDetail | CurrencyDetail | LinkDetail | MarkdownDetail | Detail;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { DaisyTheme } from "~~/lib/data/themes";
|
|||
export type LocationViewPreferences = {
|
||||
showDetails: boolean;
|
||||
showEmpty: boolean;
|
||||
editorSimpleView: boolean;
|
||||
editorAdvancedView: boolean;
|
||||
theme: DaisyTheme;
|
||||
};
|
||||
|
||||
|
|
@ -18,8 +18,8 @@ export function useViewPreferences(): Ref<LocationViewPreferences> {
|
|||
{
|
||||
showDetails: true,
|
||||
showEmpty: true,
|
||||
editorSimpleView: true,
|
||||
theme: "garden",
|
||||
editorAdvancedView: false,
|
||||
theme: "homebox",
|
||||
},
|
||||
{ mergeDefaults: true }
|
||||
);
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ export interface ItemOut {
|
|||
/** @example "0" */
|
||||
purchasePrice: string;
|
||||
/** Purchase */
|
||||
purchaseTime: string;
|
||||
purchaseTime: Date;
|
||||
quantity: number;
|
||||
serialNumber: string;
|
||||
soldNotes: string;
|
||||
|
|
@ -148,7 +148,7 @@ export interface ItemUpdate {
|
|||
/** @example "0" */
|
||||
purchasePrice: string;
|
||||
/** Purchase */
|
||||
purchaseTime: string;
|
||||
purchaseTime: Date;
|
||||
quantity: number;
|
||||
/** Identifications */
|
||||
serialNumber: string;
|
||||
|
|
@ -228,7 +228,7 @@ export interface LocationUpdate {
|
|||
export interface MaintenanceEntry {
|
||||
/** @example "0" */
|
||||
cost: string;
|
||||
date: string;
|
||||
date: Date;
|
||||
description: string;
|
||||
id: string;
|
||||
name: string;
|
||||
|
|
@ -237,7 +237,7 @@ export interface MaintenanceEntry {
|
|||
export interface MaintenanceEntryCreate {
|
||||
/** @example "0" */
|
||||
cost: string;
|
||||
date: string;
|
||||
date: Date;
|
||||
description: string;
|
||||
name: string;
|
||||
}
|
||||
|
|
@ -245,7 +245,7 @@ export interface MaintenanceEntryCreate {
|
|||
export interface MaintenanceEntryUpdate {
|
||||
/** @example "0" */
|
||||
cost: string;
|
||||
date: string;
|
||||
date: Date;
|
||||
description: string;
|
||||
name: string;
|
||||
}
|
||||
|
|
@ -257,7 +257,7 @@ export interface MaintenanceLog {
|
|||
itemId: string;
|
||||
}
|
||||
|
||||
export interface PaginationResultItemSummary {
|
||||
export interface PaginationResultRepoItemSummary {
|
||||
items: ItemSummary[];
|
||||
page: number;
|
||||
pageSize: number;
|
||||
|
|
@ -294,7 +294,7 @@ export interface ValueOverTime {
|
|||
}
|
||||
|
||||
export interface ValueOverTimeEntry {
|
||||
date: string;
|
||||
date: Date;
|
||||
name: string;
|
||||
value: number;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@
|
|||
item.value?.attachments.reduce((acc, cur) => {
|
||||
if (cur.type === "photo") {
|
||||
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}`),
|
||||
});
|
||||
}
|
||||
|
|
@ -99,6 +100,10 @@
|
|||
});
|
||||
|
||||
const assetID = computed<Details>(() => {
|
||||
if (!item.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
if (item.value?.assetId === "000-000") {
|
||||
return [];
|
||||
}
|
||||
|
|
@ -112,6 +117,10 @@
|
|||
});
|
||||
|
||||
const itemDetails = computed<Details>(() => {
|
||||
if (!item.value) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return [
|
||||
{
|
||||
name: "Description",
|
||||
|
|
@ -125,14 +134,17 @@
|
|||
{
|
||||
name: "Serial Number",
|
||||
text: item.value?.serialNumber,
|
||||
copyable: true,
|
||||
},
|
||||
{
|
||||
name: "Model Number",
|
||||
text: item.value?.modelNumber,
|
||||
copyable: true,
|
||||
},
|
||||
{
|
||||
name: "Manufacturer",
|
||||
text: item.value?.manufacturer,
|
||||
copyable: true,
|
||||
},
|
||||
{
|
||||
name: "Insured",
|
||||
|
|
@ -362,6 +374,7 @@
|
|||
|
||||
<template>
|
||||
<BaseContainer v-if="item" class="pb-8">
|
||||
<Title>{{ item.name }}</Title>
|
||||
<dialog ref="refDialog" class="z-[999] fixed bg-transparent">
|
||||
<div ref="refDialogBody" class="relative">
|
||||
<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">
|
||||
{{ item ? item.name : "" }}
|
||||
</span>
|
||||
|
||||
<div v-if="item.parent" class="text-sm breadcrumbs pb-0">
|
||||
<ul class="text-base-content/70">
|
||||
<li>
|
||||
|
|
@ -392,6 +406,9 @@
|
|||
</ul>
|
||||
</div>
|
||||
<template #description>
|
||||
<p class="text-lg">
|
||||
{{ item ? item.description : "" }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mt-3">
|
||||
<NuxtLink ref="badge" class="badge p-3" :to="`/location/${item.location.id}`">
|
||||
<Icon name="heroicons-map-pin" class="mr-2 swap-on"></Icon>
|
||||
|
|
@ -403,14 +420,14 @@
|
|||
</div>
|
||||
</template>
|
||||
</BaseSectionHeader>
|
||||
<div class="flex flex-wrap items-center justify-between mb-6">
|
||||
<div class="tabs">
|
||||
<div class="flex flex-wrap items-center justify-between mb-6 mt-3">
|
||||
<div class="btn-group">
|
||||
<NuxtLink
|
||||
v-for="t in tabs"
|
||||
:key="t.id"
|
||||
:to="t.to"
|
||||
class="tab tab-bordered lg:tab-lg"
|
||||
:class="`${t.to === currentPath ? 'tab-active' : ''}`"
|
||||
class="btn btn-sm"
|
||||
:class="`${t.to === currentPath ? 'btn-active' : ''}`"
|
||||
>
|
||||
{{ t.name }}
|
||||
</NuxtLink>
|
||||
|
|
@ -503,7 +520,7 @@
|
|||
</div>
|
||||
</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>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<ItemCard v-for="child in item.children" :key="child.id" :item="child" />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<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 { useLabelStore } from "~~/stores/labels";
|
||||
import { useLocationStore } from "~~/stores/locations";
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
type FormField = {
|
||||
type: "text" | "textarea" | "select" | "date" | "label" | "location" | "number" | "checkbox";
|
||||
label: string;
|
||||
ref: string;
|
||||
ref: keyof ItemOut;
|
||||
};
|
||||
|
||||
const mainFields: FormField[] = [
|
||||
|
|
@ -342,10 +342,10 @@
|
|||
<span class="text-base-content"> Edit </span>
|
||||
<template #after>
|
||||
<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">
|
||||
<input v-model="preferences.editorSimpleView" type="checkbox" class="toggle toggle-primary" />
|
||||
<span class="label-text ml-4"> Simple View </span>
|
||||
<input v-model="preferences.editorAdvancedView" type="checkbox" class="toggle toggle-primary" />
|
||||
<span class="label-text ml-4"> Advanced </span>
|
||||
</label>
|
||||
</div>
|
||||
<BaseButton size="sm" @click="saveItem">
|
||||
|
|
@ -368,7 +368,7 @@
|
|||
<FormMultiselect v-model="item.labels" label="Labels" :items="labels ?? []" />
|
||||
|
||||
<Autocomplete
|
||||
v-if="!preferences.editorSimpleView"
|
||||
v-if="preferences.editorAdvancedView"
|
||||
v-model="parent"
|
||||
v-model:search="query"
|
||||
:items="results"
|
||||
|
|
@ -438,7 +438,7 @@
|
|||
</BaseCard>
|
||||
|
||||
<div
|
||||
v-if="!preferences.editorSimpleView"
|
||||
v-if="preferences.editorAdvancedView"
|
||||
ref="attDropZone"
|
||||
class="overflow-visible card bg-base-100 shadow-xl sm:rounded-lg"
|
||||
>
|
||||
|
|
@ -494,7 +494,7 @@
|
|||
</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">
|
||||
<h3 class="text-lg font-medium leading-6">Purchase Details</h3>
|
||||
</div>
|
||||
|
|
@ -536,7 +536,7 @@
|
|||
</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">
|
||||
<h3 class="text-lg font-medium leading-6">Warranty Details</h3>
|
||||
</div>
|
||||
|
|
@ -578,7 +578,7 @@
|
|||
</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">
|
||||
<h3 class="text-lg font-medium leading-6">Sold Details</h3>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import DatePicker from "~~/components/Form/DatePicker.vue";
|
||||
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<{
|
||||
item: ItemOut;
|
||||
|
|
@ -45,6 +45,7 @@
|
|||
});
|
||||
|
||||
const entry = reactive({
|
||||
id: null as string | null,
|
||||
modal: false,
|
||||
name: "",
|
||||
date: new Date(),
|
||||
|
|
@ -56,7 +57,21 @@
|
|||
entry.modal = true;
|
||||
}
|
||||
|
||||
function resetEntry() {
|
||||
entry.id = null;
|
||||
entry.name = "";
|
||||
entry.date = new Date();
|
||||
entry.description = "";
|
||||
entry.cost = "";
|
||||
}
|
||||
|
||||
async function createEntry() {
|
||||
if (entry.id) {
|
||||
editEntry();
|
||||
resetEntry();
|
||||
return;
|
||||
}
|
||||
|
||||
const { error } = await api.items.maintenance.create(props.item.id, {
|
||||
name: entry.name,
|
||||
date: entry.date,
|
||||
|
|
@ -72,6 +87,7 @@
|
|||
entry.modal = false;
|
||||
|
||||
refreshLog();
|
||||
resetEntry();
|
||||
}
|
||||
|
||||
const confirm = useConfirm();
|
||||
|
|
@ -90,6 +106,39 @@
|
|||
}
|
||||
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>
|
||||
|
||||
<template>
|
||||
|
|
@ -102,11 +151,11 @@
|
|||
<FormTextArea v-model="entry.description" label="Notes" />
|
||||
<FormTextField v-model="entry.cost" autofocus label="Cost" />
|
||||
<div class="py-2 flex justify-end">
|
||||
<BaseButton type="submit" class="ml-2">
|
||||
<BaseButton type="submit" class="ml-2 mt-2">
|
||||
<template #icon>
|
||||
<Icon name="mdi-post" />
|
||||
</template>
|
||||
Create
|
||||
{{ entry.id ? "Update" : "Create" }}
|
||||
</BaseButton>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -154,7 +203,13 @@
|
|||
<div class="p-6">
|
||||
<Markdown :source="e.description" />
|
||||
</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)">
|
||||
<template #icon>
|
||||
<Icon name="mdi-delete" />
|
||||
|
|
@ -163,6 +218,16 @@
|
|||
</BaseButton>
|
||||
</div>
|
||||
</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>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -221,11 +221,11 @@
|
|||
<BaseButton size="sm" @click="generateToken"> Generate Invite Link </BaseButton>
|
||||
</div>
|
||||
<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 }}
|
||||
</div>
|
||||
<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 }}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue