Skip to content

Commit 7bd0b4c

Browse files
author
Adelino Ngomacha
committed
feat: add services form page
1 parent 24c1dc4 commit 7bd0b4c

File tree

6 files changed

+193
-322
lines changed

6 files changed

+193
-322
lines changed

‎libs/components/Dashboard/Settings/Forms/ServicesForm.vue

+186
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<form>
7+
<main class="border-b border-gray-900/10">
8+
<!-- Settings forms -->
9+
<div class="divide-y divide-gray-900/10">
10+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
11+
<div>
12+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
13+
AWS Settings
14+
</h2>
15+
<p class="mt-1 text-sm leading-6 text-gray-600">
16+
Update your AWS settings
17+
</p>
18+
</div>
19+
20+
<div class="md:col-span-2">
21+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
22+
<div class="sm:col-span-3">
23+
<label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Account ID</label>
24+
<div class="mt-2">
25+
<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">
26+
</div>
27+
</div>
28+
29+
<div class="sm:col-span-3">
30+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
31+
<div class="mt-2">
32+
<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">
33+
</div>
34+
</div>
35+
36+
<div class="sm:col-span-3">
37+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
38+
<div class="mt-2">
39+
<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">
40+
</div>
41+
</div>
42+
43+
<div class="sm:col-span-3">
44+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Region</label>
45+
<div class="mt-2">
46+
<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">
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
54+
<div>
55+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
56+
Algolia Settings
57+
</h2>
58+
<p class="mt-1 text-sm leading-6 text-gray-600">
59+
Update your Algolia settings
60+
</p>
61+
</div>
62+
63+
<div class="md:col-span-2">
64+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
65+
<div class="sm:col-span-3">
66+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
67+
<div class="mt-2">
68+
<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">
69+
</div>
70+
</div>
71+
72+
<div class="sm:col-span-3">
73+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
74+
<div class="mt-2">
75+
<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">
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
</div>
81+
82+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
83+
<div>
84+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
85+
Meili Search Settings
86+
</h2>
87+
<p class="mt-1 text-sm leading-6 text-gray-600">
88+
Update your Meili Search settings
89+
</p>
90+
</div>
91+
92+
<div class="md:col-span-2">
93+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
94+
<div class="sm:col-span-3">
95+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
96+
<div class="mt-2">
97+
<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">
98+
</div>
99+
</div>
100+
101+
<div class="sm:col-span-3">
102+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
103+
<div class="mt-2">
104+
<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">
105+
</div>
106+
</div>
107+
</div>
108+
</div>
109+
</div>
110+
111+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
112+
<div>
113+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
114+
Lemon Squeezy Settings
115+
</h2>
116+
<p class="mt-1 text-sm leading-6 text-gray-600">
117+
Update your Lemon Squeezy settings
118+
</p>
119+
</div>
120+
121+
<div class="md:col-span-2">
122+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
123+
<div class="sm:col-span-3">
124+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
125+
<div class="mt-2">
126+
<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">
127+
</div>
128+
</div>
129+
130+
<div class="sm:col-span-3">
131+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
132+
<div class="mt-2">
133+
<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">
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
</div>
139+
140+
<div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
141+
<div>
142+
<h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
143+
Stripe Settings
144+
</h2>
145+
<p class="mt-1 text-sm leading-6 text-gray-600">
146+
Update your Stripe settings
147+
</p>
148+
</div>
149+
150+
<div class="md:col-span-2">
151+
<div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
152+
<div class="sm:col-span-3">
153+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App ID</label>
154+
<div class="mt-2">
155+
<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">
156+
</div>
157+
</div>
158+
159+
<div class="sm:col-span-3">
160+
<label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">App Key</label>
161+
<div class="mt-2">
162+
<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">
163+
</div>
164+
</div>
165+
</div>
166+
</div>
167+
</div>
168+
</div>
169+
</main>
170+
<div class="mt-6 flex items-center justify-end gap-x-6">
171+
<button type="button" class="text-sm font-semibold leading-6 text-gray-900">
172+
Cancel
173+
</button>
174+
<Button
175+
type="submit"
176+
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"
177+
>
178+
Save
179+
</Button>
180+
</div>
181+
</form>
182+
</template>
183+
184+
<style scoped>
185+
186+
</style>

‎libs/components/Dashboard/Settings/SettingsFormManager.vue

+2
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import LibraryForm from './Forms/LibraryForm.vue'
1414
import QueueForm from './Forms/QueueForm.vue'
1515
import SearchEngineForm from './Forms/SearchEngineForm.vue'
1616
import SecurityForm from './Forms/SecurityForm.vue'
17+
import ServicesForm from './Forms/ServicesForm.vue'
1718
1819
const props = defineProps({
1920
name: String,
@@ -138,6 +139,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
138139
<template v-else-if="name === 'queue'"><QueueForm /></template>
139140
<template v-else-if="name === 'search-engine'"><SearchEngineForm /></template>
140141
<template v-else-if="name === 'security'"><SecurityForm /></template>
142+
<template v-else-if="name === 'services'"><ServicesForm /></template>
141143
<template v-else>
142144
<div class="text-center">
143145
<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" />

‎libs/components/Dashboard/SettingsSidebar.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -177,10 +177,10 @@
177177
</RouterLink>
178178
</li>
179179
<li>
180-
<RouterLink to="service" class="sidebar-links group flex items-center justify-between">
180+
<RouterLink to="services" class="sidebar-links group flex items-center justify-between">
181181
<div class="flex items-center gap-x-2">
182182
<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" />
183-
Service
183+
Services
184184
</div>
185185
<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" />
186186
</RouterLink>

0 commit comments

Comments
 (0)