mirror of
https://github.com/sysadminsmedia/homebox.git
synced 2025-12-21 21:33:02 +01:00
ec5b6bb8ff
* chore: get front end tests passing * chore: add @vue/runtime-core to fix types for $t * chore: sort lockfile * Discard changes to frontend/pnpm-lock.yaml * chore: sort lockfile * chore: fix some type errors * chore: switch from nuxi typecheck to vue-tsc to force a known good version * chore: linting * chore: update pnpm version in frontend test * feat: add proper pagination type (need to sort why it still doesn't work) * chore: format imports and initialize totalPrice in label page to null when no label is present * chore: update pnpm to v9.12.2, merge ItemSummaryPaginationResult with PaginationResult, and handle error in label generator more gracefully * chore: lint --------- Co-authored-by: Matt Kilgore <matthew@kilgore.dev>
64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<template>
|
|
<FormAutocomplete2
|
|
v-if="locations"
|
|
v-model="value"
|
|
:items="locations"
|
|
display="name"
|
|
:label="$t('components.location.selector.parent_location')"
|
|
>
|
|
<template #display="{ item, selected, active }">
|
|
<div>
|
|
<div class="flex w-full">
|
|
{{ cast(item.value).name }}
|
|
<span
|
|
v-if="selected"
|
|
:class="['absolute inset-y-0 right-0 flex items-center pr-4', active ? 'text-white' : 'text-primary']"
|
|
>
|
|
<MdiCheck class="size-5" aria-hidden="true" />
|
|
</span>
|
|
</div>
|
|
<div v-if="cast(item.value).name != cast(item.value).treeString" class="mt-1 text-xs">
|
|
{{ cast(item.value).treeString }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</FormAutocomplete2>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import type { FlatTreeItem } from "~~/composables/use-location-helpers";
|
|
import { useFlatLocations } from "~~/composables/use-location-helpers";
|
|
import type { LocationSummary } from "~~/lib/api/types/data-contracts";
|
|
import MdiCheck from "~icons/mdi/check";
|
|
|
|
type Props = {
|
|
modelValue?: LocationSummary | null;
|
|
};
|
|
|
|
// Cast the type of the item to a FlatTreeItem so we can get type "safety" in the template
|
|
// Note that this does not actually change the type of the item, it just tells the compiler
|
|
// that the type is FlatTreeItem. We must keep this in sync with the type of the items
|
|
function cast(value: any): FlatTreeItem {
|
|
return value as FlatTreeItem;
|
|
}
|
|
|
|
const props = defineProps<Props>();
|
|
const value = useVModel(props, "modelValue");
|
|
|
|
const locations = useFlatLocations();
|
|
const form = ref({
|
|
parent: null as LocationSummary | null,
|
|
search: "",
|
|
});
|
|
|
|
// Whenever parent goes from value to null reset search
|
|
watch(
|
|
() => value.value,
|
|
() => {
|
|
if (!value.value) {
|
|
form.value.search = "";
|
|
}
|
|
}
|
|
);
|
|
</script>
|