feat(ui): form with calendar ui

RustLangES · Aug 12, 2024 · 23b1a6f · 23b1a6f
1 parent 14260a8
commit 23b1a6f
Show file tree

Hide file tree

Showing 3 changed files with 132 additions and 51 deletions.
diff --git a/app.vue b/app.vue
@@ -2,7 +2,9 @@
   <NuxtPage />
 </template>
 
-<style>
+<style >
+@import url('primeicons/primeicons.css');
+
 html, body, ul {
   border: 0;
   margin: 0;
@@ -48,13 +50,26 @@ ul {
   grid-template-columns: repeat(2, 1fr);
   gap: 1.2em;
 }
+
 .title { color: var(--p-orange-500) }
+.bold { font-weight: bold }
+.flex { display: flex; }
+.gap { gap: 8px; }
 .text-center { text-align: center }
 .content-center {
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
+.column {
+  display: flex;
+  flex-direction: column;
+}
+.row {
+  display: flex;
+  flex-direction: row;
+}
+
 @media (min-width: 750px) { ul { grid-template-columns: repeat(3, 1fr); } }
 </style>
diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -1,6 +1,62 @@
 import { definePreset } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 
+const text = {
+  color: '#000',
+  hoverColor: '#000',
+  mutedColor: '#000',
+  hoverMutedColor: '#000'
+}
+const content = {
+  background: '{orange.0}',
+  hoverBackground: '{orange.100}',
+  borderColor: '{orange.200}',
+  color: '#000',
+  hoverColor: '#000'
+}
+
+const base = {
+  50: '{orange.50}',
+  100: '{orange.100}',
+  200: '{orange.200}',
+  300: '{orange.300}',
+  400: '{orange.400}',
+  500: '{orange.500}',
+  600: '{orange.600}',
+  700: '{orange.700}',
+  800: '{orange.800}',
+  900: '{orange.900}',
+  950: '{orange.950}'
+}
+
+
+const button = {
+  root: {
+    text: { secondary: { color: '#000', }, },
+    primary: {
+      background: '{orange.100}',
+      hoverBackground: '{orange.100}',
+      activeBackground: '{orange.100}',
+      borderColor: '#000',
+      hoverBorderColor: '#000',
+      activeBorderColor: '#000',
+      color: '#000',
+      hoverColor: '#000',
+      activeColor: '#000',
+      focusRing: {
+        color: '{primary.color}',
+        shadow: 'none'
+      }
+    },
+  },
+}
+
+const panel = {
+  background: '#fdba744d',
+  borderRadius: 0,
+  color: '#000',
+}
+
 const RustLangESPreset = definePreset(Aura, {
   primitive: {
     borderRadius: {
@@ -13,18 +69,18 @@ const RustLangESPreset = definePreset(Aura, {
     },
   },
   semantic: {
-    primary: {
-      50: '{orange.50}',
-      100: '{orange.100}',
-      200: '{orange.200}',
-      300: '{orange.300}',
-      400: '{orange.400}',
-      500: '{orange.500}',
-      600: '{orange.600}',
-      700: '{orange.700}',
-      800: '{orange.800}',
-      900: '{orange.900}',
-      950: '{orange.950}'
+    primary: base,
+  },
+  colorScheme: {
+    light: {
+      text,
+      content,
+      surface: base,
+    },
+    dark: {
+      text,
+      content,
+      surface: base,
     },
   },
   components: {
@@ -35,33 +91,18 @@ const RustLangESPreset = definePreset(Aura, {
         color: '#000',
       },
     },
+    datepicker: {
+      panel,
+      header: panel,
+      selectMonth: { color: '#000', },
+      selectYear: { color: '#000', },
+      weekDay: { color: '#000', },
+      date: { color: '#000', },
+    },
     button: {
-      border: { radius: 0, },
-      primary: {
-        color: '#000',
-        background: '{orange.100}',
-        hover: { background: '{orange.100}' }
-      },
       colorScheme: {
-        light: {
-          root: {
-            primary: {
-              background: '{orange.100}',
-              hoverBackground: '{orange.100}',
-              activeBackground: '{orange.100}',
-              borderColor: '{primary.color}',
-              hoverBorderColor: '{primary.hover.color}',
-              activeBorderColor: '{primary.active.color}',
-              color: '#000',
-              hoverColor: '#000',
-              activeColor: '#000',
-              focusRing: {
-                color: '{primary.color}',
-                shadow: 'none'
-              }
-            },
-          },
-        },
+        dark: button,
+        light: button,
       },
     },
   },

diff --git a/pages/form/[id].vue b/pages/form/[id].vue
@@ -2,9 +2,27 @@
   <section class="container">
     <Card class="card">
     <template #title>
-      <h1 v-if="data && data.form" class="text-center">
-        {{data.form.title}}
-      </h1>
+      <section v-if="data && data.form" class="column">
+        <h1 class="text-center">
+          {{data.form.title}}
+        </h1>
+        <section class="form">
+          <div class="column gap details">
+            <span class="text-center" style="margin-bottom:2em">{{data.form.description}}</span>
+            <div class="flex gap bold">
+              <i class="flex content-center pi pi-clock" style="color:#3F3F46" />
+              <span class="bold" style="color:#3F3F46">45 min</span>
+            </div>
+            <div class="flex gap bold">
+              <i class="flex content-center pi pi-video" style="color:#3F3F46" />
+              <span class="bold" style="color:#3F3F46">Los detalles de la reunion se revelaran cuando aceptes la invitacion</span>
+            </div>
+          </div>
+          <Divider layout="vertical" />
+          <Divider layout="horizontal" />
+          <DatePicker inline :minDate="tomorrow"/>
+        </section>
+      </section>
       <h1 v-else class="text-center">No se encontro ningun Calendario</h1>
     </template>
     <template #content>
@@ -17,26 +35,22 @@
 </template>
 
 <script setup>
-const route = useRoute();
-const { id } = route.params;
+const route = useRoute()
+const { id } = route.params
 const { data, status } = await useAsyncData('getFormId', async () => await $fetch(`/api/availability/${id}`))
+const today = new Date()
+const tomorrow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1)
 </script>
 
 <style>
-html, body {
-  border: 0;
-  margin: 0;
-}
-
-* { color: black; }
-
+.p-datepicker-select-month, .p-datepicker-select-year { pointer-events: none; }
 .container {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100vw;
   height: 100vh;
-  background: #FFEDD5;
+  background: #fed7aa;
 }
 
 .card {
@@ -46,6 +60,13 @@ html, body {
   min-width: 100%;
 }
 
+.form {
+  display: flex;
+  flex-direction: row;
+}
+.form .p-divider-horizontal { display: none; }
+
+.details { max-width: 400px; }
 .ferris { max-width: 500px; }
 
 @media (min-width: 1024px) {
@@ -58,6 +79,10 @@ html, body {
 @media not all and (min-width: 640px) {
   .card { max-width: 680px; }
   .ferris { width: 100%; }
+  .details { max-width: 100%; }
+  .form { flex-direction: column; }
+  .form .p-divider-vertical { display: none; }
+  .form .p-divider-horizontal { display: flex; }
 }
 
 /*