Skip to content

Commit

Permalink
assets and more
Browse files Browse the repository at this point in the history
  • Loading branch information
DecDuck committed Mar 29, 2024
1 parent 960d393 commit 79e4e71
Show file tree
Hide file tree
Showing 17 changed files with 419 additions and 107 deletions.
100 changes: 100 additions & 0 deletions components/AssetDropdownMenu.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
<template>
<Listbox
as="div"
:modelValue="props.modelValue"
@update:modelValue="(v: AssetType) => emit('update:modelValue', v)"
>
<ListboxLabel class="block text-sm font-medium leading-6 text-zinc-100"
>Asset type</ListboxLabel
>
<div class="relative mt-2">
<div
class="relative inline-flex overflow-hidden w-full cursor-default rounded-md bg-zinc-800/40 text-left text-zinc-200 shadow-sm ring-1 ring-inset ring-zinc-700 focus:outline-none focus:ring-2 focus:ring-orange-600 sm:text-sm sm:leading-6"
>
<ListboxButton class="py-1.5 pl-3 inline-flex justify-between grow">
<span class="text-zinc-200 block truncate">{{
AssetTypeIDToPretty[props.modelValue]
}}</span>
<span class="pointer-events-none flex items-center pr-2">
<ChevronUpDownIcon
class="h-5 w-5 text-gray-400"
aria-hidden="true"
/>
</span>
</ListboxButton>
</div>

<transition
leave-active-class="transition ease-in duration-100"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<ListboxOptions
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-zinc-800/80 backdrop-blur py-1 text-base shadow-lg ring-1 ring-zinc-700 ring-opacity-5 focus:outline-none sm:text-sm"
>
<ListboxOption
as="template"
v-for="entry in Object.entries(AssetTypePrettyToID)"
:value="entry[1]"
v-slot="{ active, selected }"
>
<li
:class="[
active ? 'bg-orange-600 text-white' : 'text-zinc-200',
'relative cursor-default select-none py-2 pl-3 pr-9',
]"
>
<span
:class="[
selected ? 'font-bold' : 'font-normal',
'block truncate',
]"
>{{ entry[0] }}</span
>

<span
v-if="selected"
:class="[
active ? 'text-white' : 'text-orange-600',
'absolute inset-y-0 right-0 flex items-center pr-4',
]"
>
<CheckIcon class="h-5 w-5" aria-hidden="true" />
</span>
</li>
</ListboxOption>
</ListboxOptions>
</transition>
</div>
<!--
<p class="mt-2 text-sm text-zinc-400" :id="`${componentID}-desc`">
{{ props.schema.description ?? "No description provided." }}
</p>
-->
</Listbox>
</template>

<script setup lang="ts">
import {
Listbox,
ListboxButton,
ListboxLabel,
ListboxOption,
ListboxOptions,
} from "@headlessui/vue";
import { CheckIcon, ChevronUpDownIcon } from "@heroicons/vue/24/outline";
import {
AssetType,
AssetTypeIDToPretty,
AssetTypePrettyToID,
} from "~/scripts/project";
const props = defineProps<{
modelValue: AssetType;
}>();
const emit = defineEmits<{
(e: "update:modelValue", value: AssetType): void;
}>();
</script>
16 changes: 10 additions & 6 deletions components/AssetSelector.vue
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,16 @@ import { computed, ref } from "vue";
import { MagnifyingGlassIcon } from "@heroicons/vue/20/solid";
import { ChevronRightIcon, UsersIcon } from "@heroicons/vue/24/outline";
import {
Combobox,
ComboboxInput,
ComboboxOptions,
ComboboxOption,
Dialog,
DialogPanel,
TransitionChild,
TransitionRoot,
} from "@headlessui/vue";
import { type Asset, type FullyLoadedProject } from "~/scripts/project";
import {
AssetTypePrettyToID,
type Asset,
type FullyLoadedProject,
} from "~/scripts/project";
const assetSelectData = useAssetSelectorData();
Expand All @@ -127,9 +127,13 @@ const assets = ref<Asset[]>([]);
const currentAsset = ref<Asset | undefined>();
async function generateAssetLists() {
if (!assetSelectData.value) {
return;
}
assets.value = [];
const rawAssets = await project.value.projectSource.fetchAssets();
assets.value = rawAssets;
const assetTypeID = AssetTypePrettyToID[assetSelectData.value.assetType];
assets.value = rawAssets.filter((e) => e.type === assetTypeID);
}
await generateAssetLists();
Expand Down
20 changes: 5 additions & 15 deletions components/AssetUploadModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -75,22 +75,14 @@
type="text"
name="name"
id="name"
class="block w-full rounded-md border-0 py-1.5 bg-zinc-700 text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-orange-600 sm:text-sm sm:leading-6"
class="block w-full rounded-md border-0 py-1.5 bg-zinc-800/40 text-zinc-100 shadow-sm ring-1 ring-inset ring-zinc-700 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-orange-600 sm:text-sm sm:leading-6"
placeholder="my-asset.png"
/>
</div>
</div>
</div>
<div class="mt-2">
<SchemaString
:schema="{
type: 'string',
name: 'Asset type',
description: 'Control what your asset can be used for.',
enum: AssetTypeOptions,
}"
v-model="type"
/>
<AssetDropdownMenu v-model="type" />
</div>
</div>
<div
Expand All @@ -104,9 +96,8 @@
</button>
<button
type="button"
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-700 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-zinc-600 hover:bg-zinc-600 sm:col-start-1 sm:mt-0"
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-zinc-600 hover:bg-zinc-600 sm:col-start-1 sm:mt-0"
@click="open = false"
ref="cancelButtonRef"
>
Cancel
</button>
Expand Down Expand Up @@ -143,7 +134,6 @@ import {
import { CheckIcon, FolderPlusIcon } from "@heroicons/vue/24/outline";
import {
AssetType,
AssetTypeOptions,
type Asset,
type FullyLoadedProject,
} from "~/scripts/project";
Expand All @@ -167,7 +157,7 @@ const project = useState<FullyLoadedProject>("project");
const fileOpener = ref();
const selectedFile = ref();
const filename = ref("");
const type = ref<string>(AssetType[AssetType.Other]);
const type = ref(AssetType.Other);
const loadingProgress: Ref<number | undefined> = ref(undefined);
Expand All @@ -194,7 +184,7 @@ async function upload() {
id: randomUUID(),
name: filename.value,
filename: selectedFile.value.split("\\").at(-1),
type: type.value as unknown as AssetType,
type: type.value,
data: new Blob([ab], { type: file.type }),
};
await project.value.projectSource.createAsset(asset);
Expand Down
34 changes: 19 additions & 15 deletions components/CreateConfigModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,23 +32,27 @@
class="relative w-full transform overflow-hidden rounded-lg bg-zinc-900 px-4 pb-4 pt-5 text-left transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
>
<form @submit.prevent="createConfig">
<div
class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-orange-500/5"
>
<FolderPlusIcon
class="h-6 w-6 text-orange-500"
aria-hidden="true"
/>
<div class="flex flex-row justify-between">
<div>
<DialogTitle
as="h3"
class="text-base text-left font-semibold leading-6 text-zinc-100"
>New Config</DialogTitle
>
<p class="text-left text-zinc-400 text-sm mt-1">
{{ props.schemaid }}
</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-orange-500/5"
>
<FolderPlusIcon
class="h-5 w-5 text-orange-500"
aria-hidden="true"
/>
</div>
</div>
<div class="mt-3 sm:mt-5">
<DialogTitle
as="h3"
class="text-base text-center font-semibold leading-6 text-zinc-100"
>New Config</DialogTitle
>
<p class="text-center text-zinc-400 text-sm mt-1">
{{ props.schemaid }}
</p>
<div class="mt-2">
<div>
<label
Expand Down
3 changes: 1 addition & 2 deletions components/CreateProjectModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -159,9 +159,8 @@
</button>
<button
type="button"
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-700 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-zinc-600 hover:bg-zinc-600 sm:col-start-1 sm:mt-0"
class="mt-3 inline-flex w-full justify-center rounded-md bg-zinc-800 px-3 py-2 text-sm font-semibold text-white shadow-sm ring-1 ring-inset ring-zinc-600 hover:bg-zinc-600 sm:col-start-1 sm:mt-0"
@click="open = false"
ref="cancelButtonRef"
>
Cancel
</button>
Expand Down
34 changes: 18 additions & 16 deletions components/DeleteAssetModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,23 +32,25 @@
class="relative w-full transform overflow-hidden rounded-lg bg-zinc-900 px-4 pb-4 pt-5 text-left transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
>
<form @submit.prevent="() => emits('delete')">
<div
class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-orange-500/5"
>
<TrashIcon
class="h-6 w-6 text-orange-500"
aria-hidden="true"
/>
</div>
<div class="mt-3 sm:mt-5">
<DialogTitle
as="h3"
class="text-base text-center font-semibold leading-6 text-zinc-100"
>Delete Asset</DialogTitle
<div class="flex flex-row justify-between items-center">
<div>
<DialogTitle
as="h3"
class="text-base text-left font-semibold leading-6 text-zinc-100"
>Delete Asset</DialogTitle
>
<p class="text-zinc-400 text-left">
Delete asset {{ id }}?
</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-orange-500/5"
>
<p class="text-zinc-200 mt-4 text-center">
Delete asset {{ id }}?
</p>
<TrashIcon
class="h-5 w-5 text-orange-500"
aria-hidden="true"
/>
</div>
</div>
<div
class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
Expand Down
34 changes: 18 additions & 16 deletions components/DeleteConfigModal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -32,23 +32,25 @@
class="relative w-full transform overflow-hidden rounded-lg bg-zinc-900 px-4 pb-4 pt-5 text-left transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
>
<form @submit.prevent="deleteConfig">
<div
class="mx-auto flex h-14 w-14 items-center justify-center rounded-full bg-orange-500/5"
>
<TrashIcon
class="h-6 w-6 text-orange-500"
aria-hidden="true"
/>
</div>
<div class="mt-3 sm:mt-5">
<DialogTitle
as="h3"
class="text-base text-center font-semibold leading-6 text-zinc-100"
>Delete Config</DialogTitle
<div class="flex flex-row justify-between items-center">
<div>
<DialogTitle
as="h3"
class="text-base text-left font-semibold leading-6 text-zinc-100"
>Delete Config</DialogTitle
>
<p class="text-zinc-400 text-left">
Delete config {{ id }}?
</p>
</div>
<div
class="flex h-10 w-10 items-center justify-center rounded-full bg-orange-500/5"
>
<p class="text-zinc-200 mt-4 text-center">
Delete config {{ id }}?
</p>
<TrashIcon
class="h-5 w-5 text-orange-500"
aria-hidden="true"
/>
</div>
</div>
<div
class="mt-5 sm:mt-6 sm:grid sm:grid-flow-row-dense sm:grid-cols-2 sm:gap-3"
Expand Down
29 changes: 28 additions & 1 deletion components/SchemaArray.vue
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,13 @@
:key="itemIdx"
:required="true"
:schema="
Object.assign({ title: `Entry #${itemIdx + 1}`, }, properties)
Object.assign(
{},
{
title: indexSubname[itemIdx] ?? `Entry #${itemIdx + 1}`,
},
properties
)
"
v-model="model[itemIdx]"
:element-config="{
Expand Down Expand Up @@ -64,6 +70,10 @@ const model = computed({
},
});
const indexSubname = computed(() =>
model.value.map((e: any) => calculateSubmodelName(e))
);
const properties = computed(
() => props.schema.properties ?? props.schema.items
);
Expand All @@ -82,4 +92,21 @@ const allowedRemove = computed(() =>
const allowedAdd = computed(() =>
maximum.value != undefined ? model.value?.length < maximum.value : true
);
const calculateSubmodelName = (data: any) => {
if (properties.value.type !== "object") {
return;
}
if (!data) {
return;
}
const firstKey = Object.entries(properties.value.properties).filter(
(e) => e[1].type === "string" && !e[1]._swb_asset_type
)[0][0];
const name = data[firstKey];
if (!name) {
return;
}
return name;
};
</script>
Loading

0 comments on commit 79e4e71

Please sign in to comment.