From f58f69b84cbaf88a25e53fa25b3ce10e3ed450c6 Mon Sep 17 00:00:00 2001
From: Clonbg <clonbg@gmail.com>
Date: Wed, 11 Sep 2024 16:40:22 +0200
Subject: [PATCH] icons

---
 src/views/ListasView.vue | 188 ++++++++++++++-------------------------
 1 file changed, 69 insertions(+), 119 deletions(-)

diff --git a/src/views/ListasView.vue b/src/views/ListasView.vue
index b3a2048..b295f5a 100644
--- a/src/views/ListasView.vue
+++ b/src/views/ListasView.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="bg-emerald-700 flex flex-col gap-4 h-screen items-center justify-center"
-  >
+  <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 }}
@@ -10,105 +8,84 @@
       <div class="relative mx-auto">
         <label for="newListaName" class="sr-only"> Nueva lista </label>
 
-        <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"
-        />
+        <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"
-          >
+          <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 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 -->
-    <div
-      class="bg-emerald-700 overflow-auto w-full absolute my-6 flex flex-col top-40"
-    >
+    <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"
-        >
+        <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">
+          <div class="col-span-11 xl:-ml-1">
             <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">
+          <div class="md:col-start-1 col-span-11 xl:-ml-0">
             <p class="text-sm text-gray-800 font-light">
               {{ lista.descripcion }}
             </p>
           </div>
+          <div class="grid grid-rows-3 grid-flow-col gap-4">
+            <div class="row-span-3 ...">01</div>
+            <div class="col-span-2 ...">02</div>
+            <div class="row-span-2 col-span-2 ...">03</div>
+          </div>
+          <div class="row">
+            <p class="text-sm text-gray-800 font-light">
+              <!-- edit -->
+            <div class="col">
+              <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" />
+              </svg>
+            </div>
+            <!-- delete -->
+            <div class="col">
+              <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="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+              </svg>
+            </div>
+            </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"
-      >
+    <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"
-          >
+        <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"
-              >
+              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">
@@ -118,11 +95,9 @@
               </div>
 
               <div class="mt-4">
-                <button
-                  type="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="isOpenModalEmptyList = false"
-                >
+                  @click="isOpenModalEmptyList = false">
                   Aceptar
                 </button>
               </div>
@@ -134,68 +109,37 @@
   </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"
-      >
+    <Dialog as="div" @close="cancelarLista" 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"
-          >
+        <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"
-              >
+              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"
-                />
+                  id="descripción" type="text" placeholder="Breve descripción" v-model="descripcion" />
               </div>
 
               <div class="mt-4 justify-between flex">
-                <button
-                  type="button"
+                <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"
-                >
+                  @click="cancelarLista">
                   Cancelar
                 </button>
-                <button
-                  type="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"
-                >
+                  @click="guardarLista">
                   Aceptar
                 </button>
               </div>
@@ -225,9 +169,9 @@ const storeUser = useUserStore();
 let pb = ref();
 let listas = ref();
 let newListaName = ref();
+let descripcion = ref();
 let isOpenModalEmptyList = ref(false);
 let isOpenModalDescription = ref(false);
-let descripcion = ref();
 
 onMounted(async () => {
   pb = new PocketBase(storeUser.urlPocketbase);
@@ -266,4 +210,10 @@ const guardarLista = async () => {
       console.log(error);
     });
 };
+
+const cancelarLista = (() => {
+  isOpenModalDescription.value = false
+  descripcion.value = ""
+  newListaName.value = ""
+})
 </script>