From 284f66345b57c2622107bf0db40fb21afb9eb7c4 Mon Sep 17 00:00:00 2001
From: clonbg <clonbg@gmail.com>
Date: Tue, 10 Sep 2024 13:09:53 +0200
Subject: [PATCH] crear listas y scroll

---
 src/views/ListasView.vue | 280 +++++++++++++++++++++++++++++++++++----
 1 file changed, 254 insertions(+), 26 deletions(-)

diff --git a/src/views/ListasView.vue b/src/views/ListasView.vue
index 84d0040..b3a2048 100644
--- a/src/views/ListasView.vue
+++ b/src/views/ListasView.vue
@@ -1,41 +1,269 @@
 <template>
+  <div
+    class="bg-emerald-700 flex flex-col gap-4 h-screen items-center justify-center"
+  >
+    <div id="fijo" class="absolute top-0 my-6 flex flex-col gap-4">
+      <h1 class="text-2xl font-bold mb-2 text-gray-900 mx-10">
+        Las listas de {{ storeUser.user.name }}
+      </h1>
+      <!-- input -->
+      <div class="relative mx-auto">
+        <label for="newListaName" class="sr-only"> Nueva lista </label>
 
-  <div class="bg-gray-400 flex flex-col gap-4 h-screen items-center justify-center">
-    <h1 class="text-2xl font-bold mb-6">
-      Las listas de {{ storeUser.user.name }}
-    </h1>
+        <input
+          type="text"
+          id="newListaName"
+          placeholder="Nueva Lista"
+          class="w-full rounded-md border-gray-200 py-2.5 pe-10 shadow-sm sm:text-sm"
+          v-model="newListaName"
+        />
+
+        <span class="absolute inset-y-0 end-0 grid w-10 place-content-center">
+          <button
+            type="button"
+            class="text-gray-600 hover:text-gray-700"
+            @click="createList"
+          >
+            <span class="sr-only">Search</span>
+
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="size-6"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 4.5v15m7.5-7.5h-15"
+              />
+            </svg>
+          </button>
+        </span>
+      </div>
+    </div>
     <!-- Card 1 -->
-     <template v-for="lista in listas">
-    <router-link :to="`/lista/${lista.id}`" class="rounded-sm w-1/2 grid grid-cols-12 bg-white shadow p-3 gap-2 items-center hover:shadow-lg transition delay-150 duration-300 ease-in-out hover:scale-105 transform">
-      <!-- Title -->
-      <div class="col-span-11 xl:-ml-5">
-        <p class="text-blue-600 font-semibold">{{ lista.nombre }}</p>
-      </div>
+    <div
+      class="bg-emerald-700 overflow-auto w-full absolute my-6 flex flex-col top-40"
+    >
+      <template v-for="lista in listas">
+        <router-link
+          :to="`/lista/${lista.id}`"
+          class="my-2 mx-auto rounded-md w-3/4 max-w-lg grid grid-cols-12 bg-emerald-100 shadow p-3 items-center hover:shadow-lg transition delay-150 duration-300 ease-in-out hover:scale-105 transform"
+        >
+          <!-- Title -->
+          <div class="col-span-11 xl:-ml-5">
+            <p class="text-indigo-500 hover:text-indigo-700 font-semibold">
+              {{ lista.nombre }}
+            </p>
+          </div>
 
-      <!-- Description -->
-      <div class="md:col-start-2 col-span-11 xl:-ml-5">
-        <p class="text-sm text-gray-800 font-light">{{lista.descripcion}}</p>
-      </div>
-    </router-link>
-  </template>
+          <!-- Description -->
+          <div class="md:col-start-2 col-span-11 xl:-ml-5">
+            <p class="text-sm text-gray-800 font-light">
+              {{ lista.descripcion }}
+            </p>
+          </div>
+        </router-link>
+      </template>
+    </div>
   </div>
+  <!-- Modal de nueva lista no puede estar vacía -->
+  <TransitionRoot appear :show="isOpenModalEmptyList" as="template">
+    <Dialog
+      as="div"
+      @close="isOpenModalEmptyList = false"
+      class="relative z-10"
+    >
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-black/25" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all"
+            >
+              <DialogTitle
+                as="h3"
+                class="text-lg font-medium leading-6 text-red-600"
+              >
+                Error
+              </DialogTitle>
+              <div class="mt-2">
+                <p class="text-gray-500 text-md">
+                  No puede estar el nombre de la lista vacía
+                </p>
+              </div>
+
+              <div class="mt-4">
+                <button
+                  type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                  @click="isOpenModalEmptyList = false"
+                >
+                  Aceptar
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
+  <!-- Modal de pedir descripción -->
+  <TransitionRoot appear :show="isOpenModalDescription" as="template">
+    <Dialog
+      as="div"
+      @close="isOpenModalDescription = false"
+      class="relative z-10"
+    >
+      <TransitionChild
+        as="template"
+        enter="duration-300 ease-out"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="duration-200 ease-in"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 bg-black/25" />
+      </TransitionChild>
+
+      <div class="fixed inset-0 overflow-y-auto">
+        <div
+          class="flex min-h-full items-center justify-center p-4 text-center"
+        >
+          <TransitionChild
+            as="template"
+            enter="duration-300 ease-out"
+            enter-from="opacity-0 scale-95"
+            enter-to="opacity-100 scale-100"
+            leave="duration-200 ease-in"
+            leave-from="opacity-100 scale-100"
+            leave-to="opacity-0 scale-95"
+          >
+            <DialogPanel
+              class="w-full max-w-md transform overflow-hidden rounded-2xl bg-emerald-300 p-6 text-left align-middle shadow-xl transition-all"
+            >
+              <DialogTitle
+                as="h3"
+                class="text-lg font-medium leading-6 text-gray-900"
+              >
+                Descripción de la lista
+              </DialogTitle>
+              <div class="mt-2">
+                <input
+                  class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline mb-2"
+                  id="descripción"
+                  type="text"
+                  placeholder="Breve descripción"
+                  v-model="descripcion"
+                />
+              </div>
+
+              <div class="mt-4 justify-between flex">
+                <button
+                  type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-red-100 px-4 py-2 text-sm font-medium text-red-900 hover:bg-red-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:ring-offset-2"
+                  @click="isOpenModalDescription = false"
+                >
+                  Cancelar
+                </button>
+                <button
+                  type="button"
+                  class="inline-flex justify-center rounded-md border border-transparent bg-blue-100 px-4 py-2 text-sm font-medium text-blue-900 hover:bg-blue-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
+                  @click="guardarLista"
+                >
+                  Aceptar
+                </button>
+              </div>
+            </DialogPanel>
+          </TransitionChild>
+        </div>
+      </div>
+    </Dialog>
+  </TransitionRoot>
 </template>
 
 <script setup>
-import { useUserStore } from '@/stores/user'
-import { onMounted, ref } from 'vue'
-import PocketBase from 'pocketbase';
+import { useUserStore } from "@/stores/user";
+import { onMounted, ref } from "vue";
+import PocketBase from "pocketbase";
+import {
+  TransitionRoot,
+  TransitionChild,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/vue";
 
 // access the `store` variable anywhere in the component ✨
-const storeUser = useUserStore()
+const storeUser = useUserStore();
 
-let pb = ref()
-let listas = ref()
+let pb = ref();
+let listas = ref();
+let newListaName = ref();
+let isOpenModalEmptyList = ref(false);
+let isOpenModalDescription = ref(false);
+let descripcion = ref();
 
 onMounted(async () => {
   pb = new PocketBase(storeUser.urlPocketbase);
-  listas.value = await pb.collection('listas').getFullList({
-    sort: '-created',
+  listas.value = await pb.collection("listas").getFullList({
+    sort: "-created",
   });
-})
-</script>
\ No newline at end of file
+});
+
+const createList = () => {
+  if (newListaName.value) {
+    isOpenModalDescription.value = true;
+    // modal pidiendo descripción
+  } else {
+    isOpenModalEmptyList.value = true;
+    // modal no puede estar vacío
+  }
+};
+
+const guardarLista = async () => {
+  isOpenModalDescription.value = false;
+  const newLista = {
+    nombre: newListaName.value,
+    descripcion: descripcion.value,
+    field: storeUser.user.id,
+  };
+  const record = await pb
+    .collection("listas")
+    .create(newLista)
+    .then(function (record) {
+      console.log(record);
+      listas.value.unshift(record);
+      newListaName.value = "";
+      descripcion.value = "";
+    })
+    .catch(function (error) {
+      console.log(error);
+    });
+};
+</script>