-
Notifications
You must be signed in to change notification settings - Fork 1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
26 changed files
with
1,310 additions
and
35 deletions.
There are no files selected for viewing
54 changes: 54 additions & 0 deletions
54
client/src/components/ObjectStore/Templates/CreateForm.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
<script lang="ts" setup> | ||
import { computed } from "vue"; | ||
import type { ObjectStoreTemplateSummary } from "../services"; | ||
import FormCard from "@/components/Form/FormCard.vue"; | ||
import FormDisplay from "@/components/Form/FormDisplay.vue"; | ||
interface CreateFormProps { | ||
template: ObjectStoreTemplateSummary; | ||
} | ||
const props = defineProps<CreateFormProps>(); | ||
const title = "Create new object store for your data"; | ||
const submitTitle = "Submit"; | ||
const inputs = computed(() => { | ||
const form = []; | ||
const variables = props.template.variables ?? []; | ||
const secrets = props.template.secrets ?? []; | ||
for (const variable of variables) { | ||
// TODO: markdown on help | ||
form.push({ | ||
name: variable.name, | ||
type: "text", | ||
help: variable.help, | ||
}); | ||
} | ||
for (const secret of secrets) { | ||
// TODO: markdown on help | ||
form.push({ | ||
name: secret.name, | ||
type: "password", | ||
help: secret.help, | ||
}); | ||
} | ||
return form; | ||
}); | ||
async function onSubmit() { | ||
console.log("Submitted!"); | ||
} | ||
</script> | ||
<template> | ||
<div> | ||
<FormCard :title="title"> | ||
<template v-slot:body> | ||
<FormDisplay :inputs="inputs" /> | ||
</template> | ||
</FormCard> | ||
<div class="mt-3"> | ||
<b-button id="submit" variant="primary" class="mr-1" @click="onSubmit()"> | ||
{{ submitTitle }} | ||
</b-button> | ||
</div> | ||
</div> | ||
</template> |
65 changes: 65 additions & 0 deletions
65
client/src/components/ObjectStore/Templates/CreateUserObjectStore.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
<script lang="ts" setup> | ||
import { computed, ref, onMounted } from "vue"; | ||
import SelectTemplate from "./SelectTemplate.vue"; | ||
import CreateForm from "./CreateForm.vue"; | ||
import { type ObjectStoreTemplateSummaries, type ObjectStoreTemplateSummary, getTemplates } from "../services"; | ||
import LoadingSpan from "@/components/LoadingSpan.vue"; | ||
import { errorMessageAsString } from "@/utils/simple-error"; | ||
const loadingTemplatesInfoMessage = "Loading object store templates"; | ||
const templateId = ref<string | null>(null); | ||
const templates = ref<ObjectStoreTemplateSummaries>([]); | ||
const currentTemplate = computed<ObjectStoreTemplateSummary | null>(() => { | ||
const tId = templateId.value; | ||
if (tId) { | ||
for (const template of templates.value) { | ||
if (template.id == tId) { | ||
return template; | ||
} | ||
} | ||
} | ||
return null; | ||
}); | ||
const loading = ref(true); | ||
const error = ref<string | null>(null); | ||
function handleError(e: unknown) { | ||
const errorMessage = errorMessageAsString(e); | ||
error.value = errorMessage; | ||
} | ||
onMounted(async () => { | ||
try { | ||
const data = await getTemplates(); | ||
templates.value = data; | ||
loading.value = false; | ||
} catch (e) { | ||
handleError(e); | ||
} | ||
}); | ||
async function chooseTemplate(selectTemplateId: string) { | ||
templateId.value = selectTemplateId; | ||
} | ||
</script> | ||
<template> | ||
<b-container fluid class="p-0"> | ||
<loading-span v-if="loading" :message="loadingTemplatesInfoMessage" /> | ||
<div v-else> | ||
<b-alert v-if="error" variant="danger" class="object-store-selection-error" show> | ||
{{ error }} | ||
</b-alert> | ||
|
||
<div v-if="currentTemplate == null"> | ||
<select-template :templates="templates" @onSubmit="chooseTemplate" /> | ||
</div> | ||
|
||
<div v-else> | ||
<create-form :template="currentTemplate" /> | ||
</div> | ||
</div> | ||
</b-container> | ||
</template> |
52 changes: 52 additions & 0 deletions
52
client/src/components/ObjectStore/Templates/SelectTemplate.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
<script lang="ts" setup> | ||
import type { ObjectStoreTemplateSummaries } from "../services"; | ||
interface SelectTemplateProps { | ||
templates: ObjectStoreTemplateSummaries; | ||
} | ||
withDefaults(defineProps<SelectTemplateProps>(), {}); | ||
const popoverPlacement = "rightbottom"; | ||
const emit = defineEmits<{ | ||
(e: "onSubmit", id: string): void; | ||
}>(); | ||
async function handleSubmit(templateId: string) { | ||
emit("onSubmit", templateId); | ||
} | ||
</script> | ||
|
||
<template> | ||
<div> | ||
<b-row> | ||
<b-col cols="7"> | ||
<b-button-group vertical size="lg" style="width: 100%"> | ||
<b-button | ||
v-for="template in templates" | ||
:id="`object-store-template-button-${template.id}`" | ||
:key="template.id" | ||
class="object-store-template-select-button" | ||
:data-template-id="template.id" | ||
@click="handleSubmit(template.id)" | ||
>{{ template.name }} | ||
</b-button> | ||
</b-button-group> | ||
</b-col> | ||
<b-col cols="5"> | ||
<p v-localize style="float: right">Some cool text will go here or maybe it will be bigger!</p> | ||
</b-col> | ||
</b-row> | ||
<b-popover | ||
v-for="template in templates" | ||
:key="template.id" | ||
:target="`object-store-template-button-${template.id}`" | ||
triggers="hover" | ||
boundary="window" | ||
:placement="popoverPlacement"> | ||
<template v-slot:title>{{ template.name }}</template> | ||
TODO: put interesting information in this popup. | ||
</b-popover> | ||
</div> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,18 @@ | ||
import type { components } from "@/schema"; | ||
import { fetcher } from "@/schema/fetcher"; | ||
|
||
const getObjectStores = fetcher.path("/api/object_stores").method("get").create(); | ||
const getObjectStoreTemplates = fetcher.path("/api/object_store_templates").method("get").create(); | ||
|
||
export type ObjectStoreTemplateSummaries = components["schemas"]["ObjectStoreTemplateSummaries"]; | ||
export type ObjectStoreTemplateSummary = components["schemas"]["ObjectStoreTemplateSummary"]; | ||
|
||
export async function getSelectableObjectStores() { | ||
const { data } = await getObjectStores({ selectable: true }); | ||
return data; | ||
} | ||
|
||
export async function getTemplates(): Promise<ObjectStoreTemplateSummaries> { | ||
const { data } = await getObjectStoreTemplates({}); | ||
return data; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.