Skip to content

Commit

Permalink
added translations, some styling
Browse files Browse the repository at this point in the history
  • Loading branch information
Robin Kaggl committed Mar 12, 2024
1 parent 0872ddd commit 27d6931
Show file tree
Hide file tree
Showing 6 changed files with 108 additions and 37 deletions.
32 changes: 23 additions & 9 deletions components/autocomplete.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
<script lang="ts" setup>
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/vue";
import {
Combobox,
ComboboxButton,
ComboboxInput,
ComboboxOption,
ComboboxOptions,
} from "@headlessui/vue";
import { useQuery } from "@tanstack/vue-query";
import { Search } from "lucide-vue-next";
import type { ModelRef } from "vue";
import type { HierarchyNode } from "@/lib/types";
Expand Down Expand Up @@ -43,15 +50,22 @@ defineEmits(["change", "input"]);
class="relative"
@update:model-value="$emit('change', selection)"
>
<ComboboxInput
<div
v-if="!query.isFetching"
class="m-2 h-11 w-96 rounded border p-2 shadow-lg"
:display-value="(entity) => (entity as HierarchyNode)?.label"
@change="
input = $event.target.value;
$emit('input', $event.target.value);
"
/>
class="relative m-2 cursor-default overflow-hidden rounded border bg-white text-left shadow-lg"
>
<ComboboxInput
class="w-96 p-2"
:display-value="(entity) => (entity as HierarchyNode)?.label"
@change="
input = $event.target.value;
$emit('input', $event.target.value);
"
/>
<ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500">
<Search class="h-5 w-5" />
</ComboboxButton>
</div>
<div v-else class="m-2 h-11 w-96 animate-pulse rounded bg-gray-300 shadow-lg"></div>
<MenuTransition>
<ComboboxOptions
Expand Down
20 changes: 13 additions & 7 deletions components/generic-listbox.vue
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headless
import { ChevronsUpDown } from "lucide-vue-next";
import type { ModelRef } from "vue";
const model: ModelRef<string | null> = defineModel({
const model: ModelRef<{ label: string; value: string } | null> = defineModel({
default: null,
});
defineProps<{
items: Array<string>;
items: Array<{ label: string; value: string }>;
}>();
defineEmits(["change"]);
</script>
Expand All @@ -21,19 +21,25 @@ defineEmits(["change"]);
@update:model-value="(to) => $emit('change', to)"
>
<ListboxButton
class="m-2 flex h-11 min-w-24 items-center justify-between gap-2 rounded border bg-white p-2 shadow-lg"
class="flex h-11 w-full items-center justify-between gap-2 rounded border bg-white p-2 shadow-lg"
as="button"
>
<span>{{ model }}</span>
<span>{{ model?.label || model }}</span>
<ChevronsUpDown class="h-5 w-5 text-gray-500" />
</ListboxButton>
<MenuTransition>
<ListboxOptions
v-if="items.length != 0"
as="div"
class="absolute ml-2 flex w-full flex-col divide-y rounded border bg-white shadow-xl"
class="absolute mt-2 flex w-full flex-col divide-y rounded border bg-white shadow-xl"
>
<ListboxOption v-for="item in items" :key="item" class="list-none p-2" :value="item">
<span>{{ item }}</span>
<ListboxOption
v-for="item in items"
:key="item.value"
class="cursor-pointer list-none p-2 first-of-type:rounded-t last-of-type:rounded-b ui-active:bg-primary-300"
:value="item"
>
<span>{{ item.label }}</span>
</ListboxOption>
</ListboxOptions>
</MenuTransition>
Expand Down
2 changes: 1 addition & 1 deletion lib/get-tree-data.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
interface TreeQuery {
direction?: "down" | "up";
direction?: string;
show?: string;
model: string;
id: string;
Expand Down
12 changes: 11 additions & 1 deletion locales/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,17 @@
},
"hierarchy": {
"title": "Hierarchie",
"label": "Hierarchie"
"label": "Hierarchie",
"options": {
"up": "Nach Oben",
"down": "Nach Unten",
"normal": "Normal",
"show only institutions": "Institutionen",
"add functions": "Institutionen + Funktionen",
"add functions and persons": "Institutionen + Funktionen + Personen",
"show institution hierarchy": "Institutionshierarchie",
"show amt and persons": "Amt und Personen"
}
},
"documentation": {
"title": "Dokumentation",
Expand Down
12 changes: 11 additions & 1 deletion locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,17 @@
},
"hierarchy": {
"title": "Hierarchy",
"label": "Hierarchy"
"label": "Hierarchy",
"options": {
"up": "Up",
"down": "Down",
"normal": "Normal",
"show only institutions": "Institutions only",
"add functions": "Institutions and functions",
"add functions and persons": "Institutions, functions and persons",
"show institution hierarchy": "Institutions hierarchy",
"show amt and persons": "Amt and persons"
}
},
"documentation": {
"title": "Documentation",
Expand Down
67 changes: 49 additions & 18 deletions pages/hierarchy.vue
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ import type { HierarchyNode } from "@/lib/types";
const router = useRouter();
const route = useRoute();
const t = useTranslations();
const comQuery = computed(() => {
const { label, id, model } = route.query;
Expand All @@ -20,16 +22,23 @@ const comQuery = computed(() => {
};
});
const comOptions = computed<{ show: string; direction: "down" | "up" }>(() => {
const { direction, mode } = route.query;
const comOptions = computed(() => {
const { direction, show } = route.query;
return {
direction: String(direction ?? "down") as "down" | "up",
show: String(mode ?? "normal"),
direction: direction
? { value: String(direction), label: t(`pages.hierarchy.options.${String(direction)}`) }
: { label: t("pages.hierarchy.options.down"), value: "down" },
show: show
? { value: String(show), label: t(`pages.hierarchy.options.${String(show)}`) }
: { label: "Normal", value: "normal" },
};
});
const autocomplete = ref<HierarchyNode | null>(comQuery.value);
const options = ref<{ show: string; direction: "down" | "up" }>(comOptions.value);
const options = ref<{
show: { label: string; value: string };
direction: { label: string; value: string };
}>(comOptions.value);
const query = ref(
useQuery({
Expand All @@ -40,8 +49,8 @@ const query = ref(
if (!auto) return null;
const data = await getTreeData({
show: q.show,
direction: q.direction,
show: String(q.show.value),
direction: String(q.direction.value),
model: auto.group,
id: String(auto.pk),
});
Expand All @@ -54,18 +63,36 @@ const query = ref(
const showArgs = computed(() => {
switch (autocomplete.value?.group) {
case "Institution": {
const instArgs = ["show only institutions", "add functions", "add functions and persons"];
if (!instArgs.includes(options.value.show)) options.value.show = String(instArgs[0]);
const instArgs = [
{
value: "show only institutions",
label: t("pages.hierarchy.options.show only institutions"),
},
{ value: "add functions", label: t("pages.hierarchy.options.add functions") },
{
value: "add functions and persons",
label: t("pages.hierarchy.options.add functions and persons"),
},
];
if (!instArgs.map((arg) => arg.label).includes(options.value.show.value) && instArgs[0])
options.value.show = instArgs[0];
return instArgs;
}
case "Funktion": {
const funcArgs = ["show institution hierarchy", "show amt and persons"];
if (!funcArgs.includes(options.value.show)) options.value.show = String(funcArgs[0]);
const funcArgs = [
{
value: "show institution hierarchy",
label: t("pages.hierarchy.options.show institution hierarchy"),
},
{ value: "show amt and persons", label: t("pages.hierarchy.options.show amt and persons") },
];
if (!funcArgs.map((arg) => arg.value).includes(options.value.show.value) && funcArgs[0])
options.value.show = funcArgs[0];
return funcArgs;
}
default: {
options.value.show = "normal";
return ["normal"];
options.value.show = { value: "normal", label: t("pages.hierarchy.options.normal") };
return [{ value: "normal", label: t("pages.hierarchy.options.normal") }];
}
}
});
Expand Down Expand Up @@ -96,18 +123,22 @@ definePageMeta({
<ClientOnly>
<GenericListbox
v-model="options.direction"
:items="['down', 'up']"
class="m-2 min-w-48"
:items="[
{ value: 'down', label: t('pages.hierarchy.options.down') },
{ value: 'up', label: t('pages.hierarchy.options.up') },
]"
@change="
(direction) => {
console.log(direction);
router.push({ query: { ...route.query, direction } });
({ value }) => {
router.push({ query: { ...route.query, direction: value } });
}
"
/>
<GenericListbox
v-model="options.show"
class="m-2 min-w-48"
:items="showArgs"
@change="(mode) => router.push({ query: { ...route.query, mode } })"
@change="({ value }) => router.push({ query: { ...route.query, show: value } })"
/>
</ClientOnly>
</div>
Expand Down

0 comments on commit 27d6931

Please sign in to comment.