unshare

src/pages/IndexPage.vue

@@ -11,7 +11,8 @@
                   lista.items?.length : '0' }}
               </q-badge>
               <div class="text-h5">{{ lista.nombre }}
-                <q-icon name="edit" @click="openDialogChangeNameList(lista.id)" class="cursor-pointer" />
+                <q-icon name="edit" @click="changeNameList(lista.id)" class="cursor-pointer"
+                  v-if="store.user?.email === lista.email_owner" />
               </div>
               <div class="text-subtitle1">{{ lista.email_owner }}</div>
             </q-card-section>
@@ -20,8 +21,9 @@
               Compartido con:
               <span v-if="!lista.profiles || lista.profiles.length === 0">Nadie</span>
               <span v-for="(profile, index) in lista.profiles" :key="index">
-                <br>- {{ profile.email }} <q-icon name="delete" @click="console.log(profile.email)"
+                <br>- {{ profile.email }} <q-icon name="delete"
-                  class="cursor-pointer" />
+                  @click="unShareUser(profile.id, lista.id, profile.email)" class="cursor-pointer"
+                  v-if="store.user?.email === lista.email_owner" />
               </span>
             </q-card-section>
 
@@ -43,39 +45,18 @@
       </template>
     </q-infinite-scroll>
   </div>
-  <q-dialog v-model="dialogChangeNameList" persistent enterConfirm>
-    <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="changeNameList(lista_id); 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 { ref, onMounted } from 'vue'
+import { 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));
 }
@@ -107,16 +88,41 @@ const onLoad = (index, done) => {
 
 const changeNameList = async (id) => {
   try {
-    const ahora = new Date()
+    $q.dialog({
-    const { error } = await supabase
+      title: 'Escriba',
-      .from('listas')
+      message: 'Nuevo nombre de la lista',
-      .update({ nombre: newNameList.value, updated_at: ahora })
+      html: true,
-      .eq('id', id)
+      prompt: {
-      .select()
+        model: '',
-    if (error) throw error
+        isValid: val => val.length > 4, // << here is the magic
-    store.listas.filter(l => l.id === id)[0].nombre = newNameList.value
+        type: 'text'
-    store.listas.filter(l => l.id === id)[0].updated_at = ahora
+      },
-    ordenarArray(store.listas)
+      ok: {
+        push: true,
+
+      },
+      cancel: {
+        push: true,
+      },
+      persistent: true
+    }).onOk(async (data) => {
+      const ahora = new Date()
+      const { error } = await supabase
+        .from('listas')
+        .update({ nombre: data, updated_at: ahora })
+        .eq('id', id)
+        .select()
+      if (error) {
+        $q.notify({
+          type: 'negative',
+          message: error.message
+        })
+        throw error
+      }
+      store.listas.filter(l => l.id === id)[0].nombre = data
+      store.listas.filter(l => l.id === id)[0].updated_at = ahora
+      ordenarArray(store.listas)
+    })
   } catch (error) {
     if (error instanceof Error) {
       $q.notify({
@@ -127,10 +133,45 @@ const changeNameList = async (id) => {
   }
 }
 
-const openDialogChangeNameList = (id) => {
+const unShareUser = async (user_id, lista_id, email) => {
-  dialogChangeNameList.value = true
+  try {
-  lista_id.value = id
+    $q.dialog({
-  newNameList.value = ''
+      title: 'Confirm',
+      message: 'Está seguro que quiere dejar de compartir esta lista con <span class="text-negative">' + email + '</span>?',
+      html: true,
+      ok: {
+        push: true,
+        color: 'negative'
+      },
+      cancel: {
+        push: true,
+        color: 'positive'
+      },
+      persistent: true
+    }).onOk(async () => {
+      const { error } = await supabase
+        .from('share')
+        .delete()
+        .eq('user_id', user_id)
+        .eq('lista_id', lista_id)
+      if (error) {
+        $q.notify({
+          type: 'negative',
+          message: error.message
+        })
+        throw error
+      }
+      store.listas.filter(l => l.id === lista_id)[0].profiles = store.listas.filter(l => l.id === lista_id)[0].profiles.filter(p => p.id !== user_id)
+    })
+
+  } catch (error) {
+    if (error instanceof Error) {
+      $q.notify({
+        type: 'negative',
+        message: error.message
+      })
+    }
+  }
 }
 
 onMounted(() => {