-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Add more object (Customer & Product)
- Loading branch information
Showing
23 changed files
with
750 additions
and
347 deletions.
There are no files selected for viewing
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,72 @@ | ||
| <template> | ||
| <div> | ||
| <UButton @click="ticketsModalOpen = true" | ||
| class="block rounded-md bg-indigo-600 px-3 py-2 text-center 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"> | ||
| Add customer | ||
| </UButton> | ||
|
|
||
| <UModal v-model="ticketsModalOpen" prevent-close> | ||
| <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> | ||
| <template #header> | ||
| <div class="flex items-center justify-between"> | ||
| <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> | ||
| Create a new customer | ||
| </h3> | ||
| <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="ticketsModalOpen = false" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <template #default> | ||
| <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit"> | ||
| <UFormGroup label="Name of Customer" name="name"> | ||
| <UInput v-model="state.name" /> | ||
| </UFormGroup> | ||
|
|
||
| <UButton type="submit" class="bg-indigo-600 hover:bg-indigo-900"> | ||
| Submit | ||
| </UButton> | ||
| </UForm> | ||
| </template> | ||
| </UCard> | ||
| </UModal> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const toast = useToast(); | ||
| const ticketsModalOpen = ref(false); | ||
| defineShortcuts({ | ||
| escape: { | ||
| usingInput: true, | ||
| whenever: [ticketsModalOpen], | ||
| handler: () => { | ||
| ticketsModalOpen.value = false; | ||
| }, | ||
| }, | ||
| }); | ||
| import { z } from 'zod'; | ||
| import type { FormSubmitEvent } from '#ui/types'; | ||
| const schema = z.object({ | ||
| name: z.string().min(3, 'Must be at least 3 characters'), | ||
| }); | ||
| type Schema = z.output<typeof schema>; | ||
| const state = reactive({ | ||
| name: undefined, | ||
| }); | ||
| async function onSubmit(event: FormSubmitEvent<Schema>) { | ||
| const { $client } = useNuxtApp(); | ||
| const add = await $client.customer.add.mutate(event.data); | ||
| ticketsModalOpen.value = false; | ||
| toast.add({ | ||
| title: 'Customer created', | ||
| }); | ||
| await refreshNuxtData(); | ||
| } | ||
| </script> |
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,84 @@ | ||
| <template> | ||
| <div class="relative isolate"> | ||
| <div class="mx-auto max-w-7xl py-10"> | ||
| <div class="px-4 sm:px-6 lg:px-8"> | ||
| <div class="sm:flex sm:items-center"> | ||
| <div class="sm:flex-auto"> | ||
| <h1 class="text-base font-semibold leading-6 text-gray-900">Customers</h1> | ||
| <p class="mt-2 text-sm text-gray-700">You can create, modify or delete a customer.</p> | ||
| </div> | ||
| <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none"> | ||
| <CustomerModal /> | ||
| </div> | ||
| </div> | ||
| <div class="mt-8 flow-root"> | ||
| <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> | ||
| <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> | ||
| <table class="min-w-full divide-y divide-gray-300"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"> | ||
| <a href="#" class="group inline-flex"> | ||
| Name | ||
| <span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"> | ||
| <ChevronDownIcon class="h-5 w-5" aria-hidden="true" /> | ||
| </span> | ||
| </a> | ||
| </th> | ||
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"> | ||
| <a href="#" class="group inline-flex"> | ||
| Created At | ||
| <span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"> | ||
| <ChevronDownIcon class="invisible ml-2 h-5 w-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" aria-hidden="true" /> | ||
| </span> | ||
| </a> | ||
| </th> | ||
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"> | ||
| <a href="#" class="group inline-flex"> | ||
| Updated At | ||
| <span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"> | ||
| <ChevronDownIcon class="invisible ml-2 h-5 w-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" aria-hidden="true" /> | ||
| </span> | ||
| </a> | ||
| </th> | ||
| <th scope="col" class="relative py-3.5 pl-3 pr-0"> | ||
| <span class="sr-only">Edit</span> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody class="divide-y divide-gray-200 bg-white"> | ||
| <tr v-for="token of customer" :key="token.id"> | ||
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">{{ token.name }}</td> | ||
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ token.createdAt }}</td> | ||
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ token.updatedAt }}</td> | ||
| <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm sm:pr-0"> | ||
| <UButton @click="deleteToken(token.id)" class="bg-red-600 hover:bg-red-500"> | ||
| Delete | ||
| </UButton> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ChevronDownIcon } from '@heroicons/vue/20/solid'; | ||
| const toast = useToast(); | ||
| const { $client } = useNuxtApp(); | ||
| const { data: customer } = await $client.customer.all.useQuery(); | ||
| async function deleteToken(id) { | ||
| console.log('deleteToken', id); | ||
| await $client.customer.delete.mutate({ id }); | ||
| toast.add({ title: 'Customer deleted', timeout: 5000, color: 'red' }); | ||
| await refreshNuxtData(); | ||
| } | ||
| </script> |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,72 @@ | ||
| <template> | ||
| <div> | ||
| <UButton @click="ticketsModalOpen = true" | ||
| class="block rounded-md bg-indigo-600 px-3 py-2 text-center 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"> | ||
| Add product | ||
| </UButton> | ||
|
|
||
| <UModal v-model="ticketsModalOpen" prevent-close> | ||
| <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }"> | ||
| <template #header> | ||
| <div class="flex items-center justify-between"> | ||
| <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white"> | ||
| Create a new product | ||
| </h3> | ||
| <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="ticketsModalOpen = false" /> | ||
| </div> | ||
| </template> | ||
|
|
||
| <template #default> | ||
| <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit"> | ||
| <UFormGroup label="Name of Product" name="name"> | ||
| <UInput v-model="state.name" /> | ||
| </UFormGroup> | ||
|
|
||
| <UButton type="submit" class="bg-indigo-600 hover:bg-indigo-900"> | ||
| Submit | ||
| </UButton> | ||
| </UForm> | ||
| </template> | ||
| </UCard> | ||
| </UModal> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const toast = useToast(); | ||
| const ticketsModalOpen = ref(false); | ||
| defineShortcuts({ | ||
| escape: { | ||
| usingInput: true, | ||
| whenever: [ticketsModalOpen], | ||
| handler: () => { | ||
| ticketsModalOpen.value = false; | ||
| }, | ||
| }, | ||
| }); | ||
| import { z } from 'zod'; | ||
| import type { FormSubmitEvent } from '#ui/types'; | ||
| const schema = z.object({ | ||
| name: z.string().min(3, 'Must be at least 3 characters'), | ||
| }); | ||
| type Schema = z.output<typeof schema>; | ||
| const state = reactive({ | ||
| name: undefined, | ||
| }); | ||
| async function onSubmit(event: FormSubmitEvent<Schema>) { | ||
| const { $client } = useNuxtApp(); | ||
| const add = await $client.product.add.mutate(event.data); | ||
| ticketsModalOpen.value = false; | ||
| toast.add({ | ||
| title: 'Product created', | ||
| }); | ||
| await refreshNuxtData(); | ||
| } | ||
| </script> |
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,84 @@ | ||
| <template> | ||
| <div class="relative isolate"> | ||
| <div class="mx-auto max-w-7xl py-10"> | ||
| <div class="px-4 sm:px-6 lg:px-8"> | ||
| <div class="sm:flex sm:items-center"> | ||
| <div class="sm:flex-auto"> | ||
| <h1 class="text-base font-semibold leading-6 text-gray-900">Products</h1> | ||
| <p class="mt-2 text-sm text-gray-700">You can create, modify or delete a product.</p> | ||
| </div> | ||
| <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none"> | ||
| <ProductModal /> | ||
| </div> | ||
| </div> | ||
| <div class="mt-8 flow-root"> | ||
| <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8"> | ||
| <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8"> | ||
| <table class="min-w-full divide-y divide-gray-300"> | ||
| <thead> | ||
| <tr> | ||
| <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0"> | ||
| <a href="#" class="group inline-flex"> | ||
| Name | ||
| <span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"> | ||
| <ChevronDownIcon class="h-5 w-5" aria-hidden="true" /> | ||
| </span> | ||
| </a> | ||
| </th> | ||
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"> | ||
| <a href="#" class="group inline-flex"> | ||
| Created At | ||
| <span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"> | ||
| <ChevronDownIcon class="invisible ml-2 h-5 w-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" aria-hidden="true" /> | ||
| </span> | ||
| </a> | ||
| </th> | ||
| <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"> | ||
| <a href="#" class="group inline-flex"> | ||
| Updated At | ||
| <span class="invisible ml-2 flex-none rounded text-gray-400 group-hover:visible group-focus:visible"> | ||
| <ChevronDownIcon class="invisible ml-2 h-5 w-5 flex-none rounded text-gray-400 group-hover:visible group-focus:visible" aria-hidden="true" /> | ||
| </span> | ||
| </a> | ||
| </th> | ||
| <th scope="col" class="relative py-3.5 pl-3 pr-0"> | ||
| <span class="sr-only">Edit</span> | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody class="divide-y divide-gray-200 bg-white"> | ||
| <tr v-for="token of product" :key="token.id"> | ||
| <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">{{ token.name }}</td> | ||
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ token.createdAt }}</td> | ||
| <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ token.updatedAt }}</td> | ||
| <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm sm:pr-0"> | ||
| <UButton @click="deleteToken(token.id)" class="bg-red-600 hover:bg-red-500"> | ||
| Delete | ||
| </UButton> | ||
| </td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ChevronDownIcon } from '@heroicons/vue/20/solid'; | ||
| const toast = useToast(); | ||
| const { $client } = useNuxtApp(); | ||
| const { data: product } = await $client.product.all.useQuery(); | ||
| async function deleteToken(id) { | ||
| console.log('deleteToken', id); | ||
| await $client.product.delete.mutate({ id }); | ||
| toast.add({ title: 'Product deleted', timeout: 5000, color: 'red' }); | ||
| await refreshNuxtData(); | ||
| } | ||
| </script> |
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.