fix: fix vue refs targets (#6675)

monicahq · Jun 12, 2023 · 133e426 · 133e426
1 parent cecc0f7
commit 133e426
Show file tree

Hide file tree

Showing 19 changed files with 318 additions and 278 deletions.
diff --git a/app/Domains/Contact/ManageTasks/Web/ViewHelpers/ModuleContactTasksViewHelper.php b/app/Domains/Contact/ManageTasks/Web/ViewHelpers/ModuleContactTasksViewHelper.php
@@ -12,15 +12,15 @@ class ModuleContactTasksViewHelper
 {
     public static function data(Contact $contact, User $user): array
     {
-        $tasks = $contact->tasks()->where('completed', false)
+        $tasks = $contact->tasks()
+            ->notCompleted()
             ->orderBy('id', 'desc')
             ->get();
 
-        $tasksCollection = $tasks->map(function ($task) use ($contact, $user) {
-            return self::dtoTask($contact, $task, $user);
-        });
+        $tasksCollection = $tasks->map(fn ($task) => self::dtoTask($contact, $task, $user));
 
-        $completedTasksCount = $contact->tasks()->where('completed', true)
+        $completedTasksCount = $contact->tasks()
+            ->completed()
             ->count();
 
         return [
@@ -41,12 +41,11 @@ public static function data(Contact $contact, User $user): array
 
     public static function completed(Contact $contact, User $user): Collection
     {
-        return $contact->tasks()->where('completed', true)
+        return $contact->tasks()
+            ->completed()
             ->orderBy('completed_at', 'desc')
             ->get()
-            ->map(function ($task) use ($contact, $user) {
-                return self::dtoTask($contact, $task, $user);
-            });
+            ->map(fn ($task) => self::dtoTask($contact, $task, $user));
     }
 
     public static function dtoTask(Contact $contact, ContactTask $task, User $user): array
@@ -56,9 +55,12 @@ public static function dtoTask(Contact $contact, ContactTask $task, User $user):
             'label' => $task->label,
             'description' => $task->description,
             'completed' => $task->completed,
-            'completed_at' => $task->completed_at ? DateHelper::format($task->completed_at, $user) : null,
-            'due_at' => $task->due_at ? DateHelper::format($task->due_at, $user) : null,
-            'due_at_late' => optional($task->due_at)->isPast() ?? false,
+            'completed_at' => $task->completed_at !== null ? DateHelper::format($task->completed_at, $user) : null,
+            'due_at' => $task->due_at ? [
+                'formatted' => DateHelper::format($task->due_at, $user),
+                'value' => $task->due_at->format('Y-m-d'),
+                'is_late' => $task->due_at->isPast(),
+            ] : null,
             'url' => [
                 'update' => route('contact.task.update', [
                     'vault' => $contact->vault_id,

diff --git a/app/Domains/Vault/ManageTasks/Web/ViewHelpers/VaultTasksIndexViewHelper.php b/app/Domains/Vault/ManageTasks/Web/ViewHelpers/VaultTasksIndexViewHelper.php
@@ -3,35 +3,34 @@
 namespace App\Domains\Vault\ManageTasks\Web\ViewHelpers;
 
 use App\Helpers\DateHelper;
+use App\Models\ContactTask;
 use App\Models\User;
 use App\Models\Vault;
-use Carbon\Carbon;
 use Illuminate\Support\Collection;
-use Illuminate\Support\Facades\DB;
 
 class VaultTasksIndexViewHelper
 {
     public static function data(Vault $vault, User $user): Collection
     {
         $contacts = $vault->contacts()
+            ->with('tasks')
             ->get()
             ->sortByCollator('last_name');
 
         $contactsCollection = collect();
         foreach ($contacts as $contact) {
-            $tasks = DB::table('contact_tasks')
-                ->where('completed', false)
-                ->where('contact_id', $contact->id)
+            $tasksCollection = $contact->tasks()
+                ->notCompleted()
                 ->orderBy('due_at', 'asc')
-                ->get();
-
-            $tasksCollection = collect();
-            foreach ($tasks as $task) {
-                $tasksCollection->push([
+                ->get()
+                ->map(fn (ContactTask $task) => [
                     'id' => $task->id,
                     'label' => $task->label,
-                    'due_at' => $task->due_at ? DateHelper::format(Carbon::parse($task->due_at), $user) : null,
-                    'due_at_late' => optional(Carbon::parse($task->due_at))->isPast() ?? false,
+                    'due_at' => $task->due_at !== null ? [
+                        'formatted' => DateHelper::format($task->due_at, $user),
+                        'value' => $task->due_at->format('Y-m-d'),
+                        'is_late' => $task->due_at->isPast(),
+                    ] : null,
                     'url' => [
                         'toggle' => route('contact.task.toggle', [
                             'vault' => $contact->vault_id,
@@ -40,7 +39,6 @@ public static function data(Vault $vault, User $user): Collection
                         ]),
                     ],
                 ]);
-            }
 
             if ($tasksCollection->count() <= 0) {
                 continue;

diff --git a/app/Models/ContactTask.php b/app/Models/ContactTask.php
@@ -54,4 +54,14 @@ public function author(): BelongsTo
     {
         return $this->belongsTo(User::class);
     }
+
+    public function scopeNotCompleted($query)
+    {
+        return $query->where('completed', false);
+    }
+
+    public function scopeCompleted($query)
+    {
+        return $query->where('completed', true);
+    }
 }
diff --git a/resources/js/Components/Jetstream/ConfirmsPassword.vue b/resources/js/Components/Jetstream/ConfirmsPassword.vue
@@ -41,7 +41,7 @@ const startConfirmingPassword = () => {
     } else {
       confirmingPassword.value = true;
 
-      setTimeout(() => passwordInput.value.focus(), 250);
+      nextTick(() => passwordInput.value.focus());
     }
   });
 };
@@ -62,7 +62,7 @@ const confirmPassword = () => {
     .catch((error) => {
       form.processing = false;
       form.error = error.response.data.errors.password[0];
-      passwordInput.value.focus();
+      nextTick(() => passwordInput.value.focus());
     });
 };
 

diff --git a/resources/js/Components/Jetstream/Select.vue b/resources/js/Components/Jetstream/Select.vue
@@ -82,10 +82,10 @@ const close = () => {
 onMounted(() => {
   document.addEventListener('keydown', onKeydown);
   if (_.find(useAttrs(), (item, key) => key === 'autofocus') > -1) {
-    setTimeout(() => {
+    nextTick(() => {
       select.value.focus();
       open.value = true;
-    }, 100);
+    });
   }
 });
 onUnmounted(() => document.removeEventListener('keydown', onKeydown));

diff --git a/resources/js/Pages/Profile/Partials/DeleteUserForm.vue b/resources/js/Pages/Profile/Partials/DeleteUserForm.vue
@@ -18,14 +18,14 @@ const form = useForm({
 const confirmUserDeletion = () => {
   confirmingUserDeletion.value = true;
 
-  setTimeout(() => passwordInput.value.focus(), 250);
+  nextTick(() => passwordInput.value.focus());
 };
 
 const deleteUser = () => {
   form.delete(route('current-user.destroy'), {
     preserveScroll: true,
     onSuccess: () => closeModal(),
-    onError: () => passwordInput.value.focus(),
+    onError: () => nextTick(() => passwordInput.value.focus()),
     onFinish: () => form.reset(),
   });
 };

diff --git a/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue b/resources/js/Pages/Profile/Partials/LogoutOtherBrowserSessionsForm.vue
@@ -23,14 +23,14 @@ const form = useForm({
 const confirmLogout = () => {
   confirmingLogout.value = true;
 
-  setTimeout(() => passwordInput.value.focus(), 250);
+  nextTick(() => passwordInput.value.focus());
 };
 
 const logoutOtherBrowserSessions = () => {
   form.delete(route('other-browser-sessions.destroy'), {
     preserveScroll: true,
     onSuccess: () => closeModal(),
-    onError: () => passwordInput.value.focus(),
+    onError: () => nextTick(() => passwordInput.value.focus()),
     onFinish: () => form.reset(),
   });
 };

diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Index.vue
@@ -9,14 +9,8 @@ import CreateOrEditImportantDate from './Partials/CreateOrEditImportantDate.vue'
 import Errors from '@/Shared/Form/Errors.vue';
 
 const props = defineProps({
-  layoutData: {
-    type: Object,
-    default: null,
-  },
-  data: {
-    type: Object,
-    default: null,
-  },
+  layoutData: Object,
+  data: Object,
 });
 
 const editedDateId = ref(0);
@@ -32,12 +26,10 @@ const showCreateModal = () => {
   nextTick(() => createForm.value.reset());
 };
 
-const updateDateModal = (date) => {
+const updateDateModal = (date, i) => {
   editedDateId.value = date.id;
 
-  nextTick(() => {
-    editForm.value[0].reset();
-  });
+  nextTick(() => editForm.value[i].reset());
 };
 
 const created = (date) => {
@@ -142,7 +134,7 @@ const destroy = (date) => {
             v-if="localDates.length > 0"
             class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
             <li
-              v-for="date in localDates"
+              v-for="(date, i) in localDates"
               :key="date.id"
               class="item-list border-b border-gray-200 hover:bg-slate-50 dark:border-gray-700 dark:bg-slate-900 hover:dark:bg-slate-800">
               <!-- detail of the important date -->
@@ -159,7 +151,7 @@ const destroy = (date) => {
 
                 <!-- actions -->
                 <ul class="text-sm">
-                  <li class="me-4 inline cursor-pointer" @click="updateDateModal(date)">
+                  <li class="me-4 inline cursor-pointer" @click="updateDateModal(date, i)">
                     <span class="text-blue-500 hover:underline">{{ $t('Edit') }}</span>
                   </li>
                   <li class="inline cursor-pointer text-red-500 hover:text-red-900" @click="destroy(date)">
@@ -172,7 +164,7 @@ const destroy = (date) => {
               <CreateOrEditImportantDate
                 :ref="'editForm'"
                 :date="date"
-                v-if="editedDateId === date.id"
+                v-show="editedDateId === date.id"
                 :data="data"
                 @close="editedDateId = 0"
                 @update:date="updated" />

diff --git a/resources/js/Pages/Vault/Contact/ImportantDates/Partials/CreateOrEditImportantDate.vue b/resources/js/Pages/Vault/Contact/ImportantDates/Partials/CreateOrEditImportantDate.vue
@@ -10,7 +10,7 @@ import TextInput from '@/Shared/Form/TextInput.vue';
 import Dropdown from '@/Shared/Form/Dropdown.vue';
 import Errors from '@/Shared/Form/Errors.vue';
 
-const emit = defineEmits(['close', 'update:date']);
+const emit = defineEmits(['close', 'created', 'update:date']);
 
 const props = defineProps({
   date: Object,
@@ -62,20 +62,14 @@ const reset = () => {
     form.reminderChoice = 'recurring_year';
   }
 
-  setTimeout(() => {
-    nextTick(() => label.value.focus());
-  }, 150);
+  nextTick(() => label.value.focus());
 };
 
 const showAge = () => {
-  setTimeout(() => {
-    nextTick(() => age.value.focus());
-  }, 150);
+  nextTick(() => age.value.focus());
 };
 const showMonth = () => {
-  setTimeout(() => {
-    nextTick(() => month.value.focus());
-  }, 150);
+  nextTick(() => month.value.focus());
 };
 
 const submit = () => {
@@ -161,7 +155,7 @@ defineExpose({
             {{ $t('I know the exact date, including the year') }}
           </label>
         </div>
-        <div v-if="form.choice === 'full_date'" class="mb-4 ms-6">
+        <div v-show="form.choice === 'full_date'" class="mb-4 ms-6">
           <DatePicker
             v-model.string="form.date"
             class="inline-block h-full"
@@ -192,7 +186,7 @@ defineExpose({
             {{ $t('I only know the day and month, not the year') }}
           </label>
         </div>
-        <div v-if="form.choice === 'month_day'" class="ms-6 flex">
+        <div v-show="form.choice === 'month_day'" class="ms-6 flex">
           <Dropdown
             :ref="'month'"
             v-model.number="form.month"
@@ -227,7 +221,7 @@ defineExpose({
             {{ $t('I only know a number of years (an age, for example)') }}
           </label>
         </div>
-        <div v-if="form.choice === 'year'" class="ms-6">
+        <div v-show="form.choice === 'year'" class="ms-6">
           <TextInput
             :ref="'age'"
             v-model.number="form.age"

diff --git a/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue b/resources/js/Pages/Vault/Dashboard/Partials/DueTasks.vue
@@ -42,9 +42,9 @@
             <div class="flex items-center text-sm">
               <!-- due date -->
               <span
-                v-if="task.due_at"
+                v-if="task.due_at !== null"
                 :class="
-                  task.due_at_late
+                  task.due_at.is_late
                     ? 'bg-red-400/10 text-red-600 dark:bg-red-600/10 dark:text-red-400'
                     : 'bg-sky-400/10 text-sky-600 dark:bg-sky-600/10 dark:text-sky-400'
                 "
@@ -61,7 +61,7 @@
                     stroke-linejoin="round"
                     d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                 </svg>
-                <span class="">{{ task.due_at }}</span>
+                <span class="">{{ task.due_at.formatted }}</span>
               </span>
 
               <!-- contact -->

diff --git a/resources/js/Pages/Vault/Dashboard/Task/Index.vue b/resources/js/Pages/Vault/Dashboard/Task/Index.vue
@@ -56,9 +56,9 @@
 
                   <!-- due date -->
                   <span
-                    v-if="currentTask.due_at"
+                    v-if="currentTask.due_at !== null"
                     :class="
-                      currentTask.due_at_late
+                      currentTask.due_at.is_late
                         ? 'bg-red-400/10 text-red-600 dark:bg-red-600/10 dark:text-red-400'
                         : 'bg-sky-400/10 text-sky-600 dark:bg-sky-600/10 dark:text-sky-400'
                     "
@@ -76,7 +76,7 @@
                         d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                     </svg>
 
-                    <span class="">{{ currentTask.due_at }}</span>
+                    <span class="">{{ currentTask.due_at.formatted }}</span>
                   </span>
                 </label>
               </div>

diff --git a/resources/js/Pages/Webauthn/Partials/UpdateKey.vue b/resources/js/Pages/Webauthn/Partials/UpdateKey.vue
@@ -35,7 +35,7 @@ watch(
   () => props.nameUpdate,
   (value) => {
     form.name = value;
-    setTimeout(() => (nameInput.value ? nameInput.value.focus() : null), 200);
+    nextTick(() => (nameInput.value ? nameInput.value.focus() : null));
   },
   {
     immediate: true,

diff --git a/resources/js/Shared/Form/ContactSelector.vue b/resources/js/Shared/Form/ContactSelector.vue
@@ -76,9 +76,8 @@ watch(
 
 const showAddContactMode = () => {
   addContactMode.value = true;
-  setTimeout(() => {
-    nextTick(() => searchInput.value.focus());
-  }, 100);
+  form.searchTerm = '';
+  nextTick(() => searchInput.value.focus());
 };
 
 const sendEscKey = () => {
@@ -172,7 +171,7 @@ const search = _.debounce(() => {
     </div>
 
     <!-- mode to add a contact -->
-    <div v-if="addContactMode">
+    <div v-show="addContactMode">
       <div class="relative mb-3">
         <svg
           xmlns="http://www.w3.org/2000/svg"

diff --git a/resources/js/Shared/Modules/Loans.vue b/resources/js/Shared/Modules/Loans.vue
@@ -51,9 +51,7 @@ const showCreateLoanModal = () => {
   form.currency_id = '';
   createLoanModalShown.value = true;
 
-  setTimeout(() => {
-    nextTick(() => nameInput.value.focus());
-  }, 2500);
+  nextTick(() => nameInput.value.focus());
 };
 
 const showEditLoanModal = (loan) => {
@@ -178,7 +176,7 @@ const toggle = (loan) => {
     <div>
       <!-- add a loan modal -->
       <form
-        v-if="createLoanModalShown"
+        v-show="createLoanModalShown"
         class="mb-6 rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-900"
         @submit.prevent="submit()">
         <div class="border-b border-gray-200 dark:border-gray-700">