change name and sort list

src/pages/IndexPage.vue

@@ -10,7 +10,9 @@
                 {{ lista.items ? lista.items.filter(i => !i.is_done).length : '0' }}/{{ lista.items ?
                   lista.items?.length : '0' }}
               </q-badge>
-              <div class="text-h5">{{ lista.nombre }}</div>
+              <div class="text-h5">{{ lista.nombre }}
+                <q-icon name="edit" @click="openDialogChangeNameList(lista.id)" class="cursor-pointer" />
+              </div>
               <div class="text-subtitle1">{{ lista.email_owner }}</div>
             </q-card-section>
 
@@ -38,19 +40,41 @@
       </template>
     </q-infinite-scroll>
   </div>
+  <q-dialog v-model="dialogChangeNameList" persistent>
+    <q-card style="min-width: 350px">
+      <q-card-section>
+        <div class="text-h6">Nuevo nombre</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none">
+        <q-input dense v-model="newNameList" autofocus @keyup.enter="dialogChangeNameList = false" />
+      </q-card-section>
+
+      <q-card-actions align="right" class="text-primary">
+        <q-btn flat label="Cancel" v-close-popup />
+        <q-btn flat label="Crear" v-close-popup @click="changeNameList(lista_id)" :disable="newNameList.length < 4" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup>
 import useSupabase from '../boot/supabase'
 import { useQuasar } from 'quasar'
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { supabaseStore } from '../stores/supabaseStore'
 
 const { supabase } = useSupabase()
 const $q = useQuasar()
 const store = supabaseStore()
 
+const dialogChangeNameList = ref(false)
+const newNameList = ref('')
+const lista_id = ref(0)
 
+const ordenarArray = (array) => {
+  array.sort((a, b) => new Date(b.updated_at) - new Date(a.updated_at));
+}
 const getListas = async () => {
   try {
     let { data: listas, error } = await supabase
@@ -59,6 +83,7 @@ const getListas = async () => {
     if (error) throw error
     console.log('listas', listas)
     store.listas = listas
+    ordenarArray(store.listas)
   } catch (error) {
     if (error instanceof Error) {
       $q.notify({
@@ -76,6 +101,33 @@ const onLoad = (index, done) => {
   }, 1000)
 }
 
+const changeNameList = async (id) => {
+  try {
+    const ahora = new Date()
+    const { error } = await supabase
+      .from('listas')
+      .update({ nombre: newNameList.value, updated_at: ahora })
+      .eq('id', id)
+      .select()
+    if (error) throw error
+    store.listas.filter(l => l.id === id)[0].nombre = newNameList.value
+    store.listas.filter(l => l.id === id)[0].updated_at = ahora
+    ordenarArray(store.listas)
+  } catch (error) {
+    if (error instanceof Error) {
+      $q.notify({
+        type: 'negative',
+        message: error.message
+      })
+    }
+  }
+}
+
+const openDialogChangeNameList = (id) => {
+  dialogChangeNameList.value = true
+  lista_id.value = id
+}
+
 onMounted(() => {
   getListas()
 })