feat(db): Switch Drizzle to Prisma

flemzord · Apr 30, 2024 · b943759 · b943759
1 parent 3d83ee3
commit b943759
Show file tree

Hide file tree

Showing 37 changed files with 1,049 additions and 1,547 deletions.
diff --git a/apps/web/components/ArticlesModal.vue b/apps/web/components/ArticlesModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <UButton @click="articlesModalOpen = 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 article
+    </UButton>
+
+    <UModal v-model="articlesModalOpen" 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 article
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="articlesModalOpen = false" />
+          </div>
+        </template>
+
+        <template #default>
+          <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+            <UFormGroup label="Name of Article" 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 articlesModalOpen = ref(false);
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [articlesModalOpen],
+    handler: () => {
+      articlesModalOpen.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.articles.add.mutate(event.data);
+  articlesModalOpen.value = false;
+  toast.add({
+    title: 'Article created',
+  });
+  await refreshNuxtData();
+}
+</script>
diff --git a/apps/web/components/ArticlesTable.vue b/apps/web/components/ArticlesTable.vue
@@ -0,0 +1,77 @@
+<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">Articles</h1>
+            <p class="mt-2 text-sm text-gray-700">You can create, modify or delete a article.</p>
+          </div>
+          <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
+            <ArticlesModal />
+          </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="article of articles" :key="article.id">
+                  <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">{{ article.name }}</td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ article.createdAt }}</td>
+                  <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ article.updatedAt }}</td>
+                  <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm sm:pr-0">
+                    <!--                      <UButton @click="deletearticle(article.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: articles } = await $client.articles.all.useQuery();
+</script>
diff --git a/apps/web/components/CustomersModal.vue b/apps/web/components/CustomersModal.vue
@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <UButton @click="customersModalOpen = 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="customersModalOpen" 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="customersModalOpen = 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 customersModalOpen = ref(false);
+
+defineShortcuts({
+  escape: {
+    usingInput: true,
+    whenever: [customersModalOpen],
+    handler: () => {
+      customersModalOpen.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();
+
+  await $client.customers.add.mutate(event.data);
+  customersModalOpen.value = false;
+  toast.add({
+    title: 'Customer created',
+  });
+  await refreshNuxtData();
+}
+</script>
diff --git a/apps/web/components/CustomersTable.vue b/apps/web/components/CustomersTable.vue
@@ -0,0 +1,77 @@
+<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">
+            <CustomersModal />
+          </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="customer of customers" :key="customer.id">
+                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-0">{{ customer.name }}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ customer.createdAt }}</td>
+                    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{{ customer.updatedAt }}</td>
+                    <td class="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm sm:pr-0">
+<!--                      <UButton @click="deletecustomer(customer.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: customers } = await $client.customers.all.useQuery();
+</script>
diff --git a/apps/web/components/TokensModal.vue b/apps/web/components/TokensModal.vue
@@ -18,6 +18,15 @@
 
         <template #default>
           <UForm :schema="schema" :state="state" class="space-y-4" @submit="onSubmit">
+            <UFormGroup label="Select your Article" name="article_id">
+              <USelect v-model="state.article_id" :options="articles" option-attribute="name" value-attribute="id" required>
+              </USelect>
+            </UFormGroup>
+
+            <UFormGroup label="Select your Customer" name="customer_id">
+              <USelect v-model="state.customer_id" :options="customers" option-attribute="name" value-attribute="id" required />
+            </UFormGroup>
+
             <UFormGroup label="Name of License" name="name">
               <UInput v-model="state.name" />
             </UFormGroup>
@@ -49,25 +58,30 @@ defineShortcuts({
 import { z } from 'zod';
 import type { FormSubmitEvent } from '#ui/types';
 
+const { $client } = useNuxtApp();
+const { data: articles } = await $client.articles.all.useQuery();
+const { data: customers } = await $client.customers.all.useQuery();
+
 const schema = z.object({
   name: z.string().min(3, 'Must be at least 3 characters'),
+  article_id: z.string(),
+  customer_id: z.string(),
 });
 
 type Schema = z.output<typeof schema>;
 
 const state = reactive({
   name: undefined,
+  article_id: undefined,
+  customer_id: undefined,
 });
 
 async function onSubmit(event: FormSubmitEvent<Schema>) {
-  const { $client } = useNuxtApp();
-
-  const add = await $client.tokens.add.mutate(event.data);
-  console.log('add', add[0].token);
+  const add = await $client.licenses.add.mutate(event.data);
   ticketsModalOpen.value = false;
   toast.add({
     title: 'License created',
-    description: add[0].token,
+    description: add.token,
     timeout: 50000,
   });
   await refreshNuxtData();

diff --git a/apps/web/components/TokensTable.vue b/apps/web/components/TokensTable.vue
@@ -73,11 +73,10 @@ const toast = useToast();
 
 const { $client } = useNuxtApp();
 
-const { data: tokens } = await $client.tokens.all.useQuery();
+const { data: tokens } = await $client.licenses.all.useQuery();
 
 async function deleteToken(id) {
-  console.log('deleteToken', id);
-  await $client.tokens.delete.mutate({ id });
+  await $client.licenses.delete.mutate({ id });
   toast.add({ title: 'License deleted', timeout: 5000, color: 'red' });
   await refreshNuxtData();
 }

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -23,16 +23,16 @@
     "@tailwindcss/forms": "^0.5.7",
     "@trpc/client": "^10.45.2",
     "@trpc/server": "^10.45.2",
-    "drizzle-orm": "^0.30.9",
     "h3-zod": "^0.5.3",
     "nuxt": "^3.11.2",
     "nuxt-auth-utils": "^0.0.24",
     "nuxt-cloudflare-analytics": "^1.0.8",
     "superjson": "^2.2.1",
     "trpc-nuxt": "^0.10.21",
-    "vue": "^3.4.26",
+    "uuid": "^9.0.1",
+    "vue": "^3.4.21",
     "vue-router": "^4.3.0",
-    "zod": "^3.23.5"
+    "zod": "^3.23.4"
   },
   "devDependencies": {
     "@cloudflare/workers-types": "^4.20240419.0",