Skip to content

Commit

Permalink
feat: add services form page
Browse files Browse the repository at this point in the history
  • Loading branch information
Adelino Ngomacha committed Jun 29, 2024
1 parent 24c1dc4 commit 7bd0b4c
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 322 deletions.
186 changes: 186 additions & 0 deletions libs/components/Dashboard/Settings/Forms/ServicesForm.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<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">
AWS Settings
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your AWS 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="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Account ID</label>
<div class="mt-2">
<input id="local-driver" type="text" name="local-driver" value="" 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">App ID</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">App Key</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">App Region</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="us-east-1" 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">
Algolia Settings
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your Algolia 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="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">App Key</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">
Meili Search Settings
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your Meili Search 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="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">App Key</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">
Lemon Squeezy Settings
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your Lemon Squeezy 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="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">App Key</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">
Stripe Settings
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your Stripe 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="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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">App Key</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="" 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 @@ -14,6 +14,7 @@ import LibraryForm from './Forms/LibraryForm.vue'
import QueueForm from './Forms/QueueForm.vue'
import SearchEngineForm from './Forms/SearchEngineForm.vue'
import SecurityForm from './Forms/SecurityForm.vue'
import ServicesForm from './Forms/ServicesForm.vue'
const props = defineProps({
name: String,
Expand Down Expand Up @@ -138,6 +139,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
<template v-else-if="name === 'queue'"><QueueForm /></template>
<template v-else-if="name === 'search-engine'"><SearchEngineForm /></template>
<template v-else-if="name === 'security'"><SecurityForm /></template>
<template v-else-if="name === 'services'"><ServicesForm /></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
4 changes: 2 additions & 2 deletions libs/components/Dashboard/SettingsSidebar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,10 +177,10 @@
</RouterLink>
</li>
<li>
<RouterLink to="service" class="sidebar-links group flex items-center justify-between">
<RouterLink to="services" class="sidebar-links group flex items-center justify-between">
<div class="flex items-center gap-x-2">
<div class="i-heroicons-briefcase text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out" />
Service
Services
</div>
<div class="i-heroicons-chevron-right text-gray-500 w-5 h-5 dark:text-gray-200 group-hover:text-gray-700 transition duration-150 ease-in-out self-end" />
</RouterLink>
Expand Down
Loading

0 comments on commit 7bd0b4c

Please sign in to comment.