Skip to content

Commit

Permalink
feat: add queue form page
Browse files Browse the repository at this point in the history
  • Loading branch information
Adelino Ngomacha committed Jun 29, 2024
1 parent 9224115 commit 2e6141c
Show file tree
Hide file tree
Showing 5 changed files with 225 additions and 72 deletions.
219 changes: 219 additions & 0 deletions libs/components/Dashboard/Settings/Forms/QueueForm.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,219 @@
<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 Queue Settings
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your default Queue 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">Default</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>
sync
</option>
<option>database</option>
<option>redis</option>
<option>sqs</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">
Sync Queue
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your Sync Queue 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="driver" type="text" name="driver" value="sync" disabled class="cursor-not-allowed bg-blue-gray-50 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">
Database Queue
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your database queue 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="driver" type="text" name="driver" value="database" disabled class="cursor-not-allowed bg-blue-gray-50 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">Table</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="jobs" 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">Queue</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="default" 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">
Redis Queue
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your redis queue 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="driver" type="text" name="driver" value="redis" disabled class="cursor-not-allowed bg-blue-gray-50 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">Connection</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="default" 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">Queue</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="default" 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">
SQS Queue
</h2>
<p class="mt-1 text-sm leading-6 text-gray-600">
Update your sqs queue 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="driver" type="text" name="driver" value="sqs" disabled class="cursor-not-allowed bg-blue-gray-50 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">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">Secret</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">Prefix</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">Suffix</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">Queue</label>
<div class="mt-2">
<input id="local-root" type="text" name="local-root" value="default" 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">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>
</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
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import EmailForm from './Forms/EmailForm.vue'
import FileSystemForm from './Forms/FileSystemForm.vue'
import HashingForm from './Forms/HashingForm.vue'
import LibraryForm from './Forms/LibraryForm.vue'
import QueueForm from './Forms/QueueForm.vue'
const props = defineProps({
name: String,
Expand Down Expand Up @@ -132,6 +133,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
<template v-else-if="name === 'file-system'"><FileSystemForm /></template>
<template v-else-if="name === 'hashing'"><HashingForm /></template>
<template v-else-if="name === 'library'"><LibraryForm /></template>
<template v-else-if="name === 'queue'"><QueueForm /></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
71 changes: 0 additions & 71 deletions resources/views/dashboard/settings/queue.vue

This file was deleted.

4 changes: 4 additions & 0 deletions storage/framework/types/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,12 +33,15 @@ declare module 'vue' {
Faqs: typeof import('./../../../libs/components/Marketing/Faqs.vue')['default']
Feature: typeof import('./../../../libs/components/Marketing/Feature.vue')['default']
Fields: typeof import('./../../../libs/components/Marketing/Fields.vue')['default']
FileSystemForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/FileSystemForm.vue')['default']
Footer: typeof import('./../../../libs/components/Marketing/Footer.vue')['default']
HashingForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/HashingForm.vue')['default']
Header: typeof import('./../../../libs/components/Marketing/Header.vue')['default']
HelloWorld: typeof import('./../../../libs/components/HelloWorld.vue')['default']
Hero: typeof import('./../../../libs/components/Marketing/Hero.vue')['default']
Hero2: typeof import('./../../../resources/components/Marketing/Hero2.vue')['default']
Layout: typeof import('./../../../libs/components/Marketing/Layout.vue')['default']
LibraryForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/LibraryForm.vue')['default']
LiveTerminalOutput: typeof import('./../../../libs/components/Dashboard/Deployments/LiveTerminalOutput.vue')['default']
Logo: typeof import('./../../../libs/components/Logo.vue')['default']
MobileSidebar: typeof import('./../../../libs/components/Dashboard/MobileSidebar.vue')['default']
Expand All @@ -50,6 +53,7 @@ declare module 'vue' {
Pricing: typeof import('./../../../libs/components/Marketing/Pricing.vue')['default']
PrimaryFeatures: typeof import('./../../../libs/components/Marketing/PrimaryFeatures.vue')['default']
PrimaryFeatures2: typeof import('./../../../libs/components/Marketing/PrimaryFeatures2.vue')['default']
QueueForm: typeof import('./../../../libs/components/Dashboard/Settings/Forms/QueueForm.vue')['default']
README: typeof import('./../../../libs/components/README.md')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Expand Down
1 change: 0 additions & 1 deletion storage/framework/types/dashboard-router.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ declare module 'vue-router/auto-routes' {
'/settings/[name]': RouteRecordInfo<'/settings/[name]', '/settings/:name', { name: ParamValue<true> }, { name: ParamValue<false> }>,
'/settings/billing': RouteRecordInfo<'/settings/billing', '/settings/billing', Record<never, never>, Record<never, never>>,
'/settings/mail': RouteRecordInfo<'/settings/mail', '/settings/mail', Record<never, never>, Record<never, never>>,
'/settings/queue': RouteRecordInfo<'/settings/queue', '/settings/queue', Record<never, never>, Record<never, never>>,
'/settings/services': RouteRecordInfo<'/settings/services', '/settings/services', Record<never, never>, Record<never, never>>,
'/settings/storage': RouteRecordInfo<'/settings/storage', '/settings/storage', Record<never, never>, Record<never, never>>,
'/teams/[id]': RouteRecordInfo<'/teams/[id]', '/teams/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
Expand Down

0 comments on commit 2e6141c

Please sign in to comment.