Skip to content

Commit

Permalink
feat: add File System form page
Browse files Browse the repository at this point in the history
  • Loading branch information
Adelino Ngomacha committed Jun 29, 2024
1 parent 63ca73c commit b6cf2bb
Show file tree
Hide file tree
Showing 2 changed files with 248 additions and 0 deletions.
246 changes: 246 additions & 0 deletions libs/components/Dashboard/Settings/Forms/FileSystemForm.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,246 @@
<script setup lang="ts">
</script>

<template>
<form>
<main class="border-b border-gray-900/10">
<!-- Settings forms -->
<div class="divide-y divide-gray-900/10">
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
<div>
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
Default File System Settings
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your default File System settings
</p>
</div>

<div class="md:col-span-2">
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-3">
<label for="type" class="block text-sm font-medium leading-6 text-gray-900">Charset</label>
<div class="mt-2">
<select id="type" name="type" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
<option selected>
local
</option>
<option>public</option>
<option>private</option>
<option>efs</option>
<option>s3</option>
</select>
</div>
</div>
</div>
</div>
</div>

<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
<div>
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
Local Disk
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your local disk configurations
</p>
</div>

<div class="md:col-span-2">
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-3">
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Driver</label>
<div class="mt-2">
<input id="local-driver" type="text" name="local-driver" value="local" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>

<div class="sm:col-span-3">
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Root</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="storage" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
</div>
</div>
</div>

<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
<div>
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
Public Disk
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your public disk configurations
</p>
</div>

<div class="md:col-span-2">
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-3">
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Driver</label>
<div class="mt-2">
<input id="local-driver" type="text" name="local-driver" value="public" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>

<div class="sm:col-span-3">
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Root</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="storage/public" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>

<div class="sm:col-span-2">
<label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Visibility</label>
<div class="flex items-center gap-x-4">
<div class="mt-2">
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
<button
type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-indigo-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
role="switch" aria-checked="false"
>
<span class="sr-only">Enable Docs</span>
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
<span
aria-hidden="true"
class="pointer-events-none inline-block h-5 w-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
/>
</button>
</div>
<span class="text-sm font-medium leading-6 text-gray-900">Public</span>
</div>
</div>
</div>
</div>
</div>

<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
<div>
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
Private Disk
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your private disk configurations
</p>
</div>

<div class="md:col-span-2">
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-3">
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Driver</label>
<div class="mt-2">
<input id="local-driver" type="text" name="local-driver" value="private" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>

<div class="sm:col-span-3">
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Root</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="storage/private" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>

<div class="sm:col-span-2">
<label for="default-config" class="block text-sm font-medium leading-6 text-gray-900">Visibility</label>
<div class="flex items-center gap-x-4">
<div class="mt-2">
<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
<button
type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2"
role="switch" aria-checked="false"
>
<span class="sr-only">Enable Docs</span>
<!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
<span
aria-hidden="true"
class="pointer-events-none inline-block h-5 w-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
/>
</button>
</div>
<span class="text-sm font-medium leading-6 text-gray-900">Private</span>
</div>
</div>
</div>
</div>
</div>

<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
<div>
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
EFS Disk
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your EFS disk configurations
</p>
</div>

<div class="md:col-span-2">
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-3">
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Driver</label>
<div class="mt-2">
<input id="local-driver" type="text" name="local-driver" value="local" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>

<div class="sm:col-span-3">
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Root</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="/mnt/efs" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
</div>
</div>
</div>

<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
<div>
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
S3 Disk
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your S3 disk configurations
</p>
</div>

<div class="md:col-span-2">
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
<div class="sm:col-span-3">
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Driver</label>
<div class="mt-2">
<input id="local-driver" type="text" name="local-driver" value="s3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>

<div class="sm:col-span-3">
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Root</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="s3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<div class="mt-6 flex items-center justify-end gap-x-6">
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
Cancel
</button>
<Button
type="submit"
class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
>
Save
</Button>
</div>
</form>
</template>

<style scoped>
</style>
2 changes: 2 additions & 0 deletions libs/components/Dashboard/Settings/SettingsFormManager.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import CloudForm from './Forms/CloudForm.vue'
import DatabaseForm from './Forms/DatabaseForm.vue'
import DNSForm from './Forms/DNSForm.vue'
import EmailForm from './Forms/EmailForm.vue'
import FileSystemForm from './Forms/FileSystemForm.vue'
const props = defineProps({
name: String,
Expand Down Expand Up @@ -126,6 +127,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
<template v-else-if="name === 'database'"><DatabaseForm /></template>
<template v-else-if="name === 'dns'"><DNSForm /></template>
<template v-else-if="name === 'email'"><EmailForm /></template>
<template v-else-if="name === 'file-system'"><FileSystemForm /></template>
<template v-else>
<div class="text-center">
<div class="i-heroicons-cog-8-tooth text-gray-400 w-12 h-12 dark:text-gray-200 transition-all duration-150 ease-in-out" />
Expand Down

0 comments on commit b6cf2bb

Please sign in to comment.