feat: important date type in create important date (monicahq/chandler#73

)

app/Models/ContactImportantDate.php

@@ -36,6 +36,7 @@ class ContactImportantDate extends Model
         'day',
         'month',
         'year',
+        'contact_important_date_type_id',
     ];
 
     /**

domains/Contact/ManageContactImportantDates/Web/Controllers/ContactImportantDatesController.php

@@ -55,6 +55,7 @@ public function store(Request $request, int $vaultId, int $contactId)
             'author_id' => Auth::user()->id,
             'vault_id' => $vaultId,
             'contact_id' => $contactId,
+            'contact_important_date_type_id' => $request->input('contact_important_date_type_id'),
             'label' => $request->input('label'),
             'day' => $day,
             'month' => $month,
@@ -109,6 +110,7 @@ public function update(Request $request, int $vaultId, int $contactId, int $date
             'vault_id' => $vaultId,
             'contact_id' => $contactId,
             'contact_important_date_id' => $dateId,
+            'contact_important_date_type_id' => $request->input('contact_important_date_type_id'),
             'label' => $request->input('label'),
             'day' => $day,
             'month' => $month,

domains/Contact/ManageContactImportantDates/Web/ViewHelpers/ContactImportantDatesViewHelper.php

@@ -18,13 +18,23 @@ public static function data(Contact $contact, User $user): array
             return self::dto($contact, $date, $user);
         });
 
+        $dateTypesCollection = $contact->vault->contactImportantDateTypes()
+            ->get()
+            ->map(function ($type) {
+                return [
+                    'id' => $type->id,
+                    'name' => $type->label,
+                ];
+            });
+
         return [
             'contact' => [
                 'name' => $contact->getName($user),
             ],
             'dates' => $datesCollection,
             'months' => DateHelper::getMonths(),
             'days' => DateHelper::getDays(),
+            'date_types' => $dateTypesCollection,
             'url' => [
                 'store' => route('contact.date.store', [
                     'vault' => $contact->vault_id,
@@ -49,7 +59,10 @@ public static function dto(Contact $contact, ContactImportantDate $date, User $u
             'id' => $date->id,
             'label' => $date->label,
             'date' => ImportantDateHelper::formatDate($date, $user),
-            'type' => $date->contactImportantDateType ? $date->contactImportantDateType->label : null,
+            'type' => $date->contactImportantDateType ? [
+                'id' =>  $date->contactImportantDateType->id,
+                'label' =>  $date->contactImportantDateType->label,
+            ] : null,
             'age' => ImportantDateHelper::getAge($date),
             'choice' => ImportantDateHelper::determineType($date),
             'completeDate' => $completeDate,

resources/js/Pages/Vault/Contact/ImportantDates/Index.vue

@@ -109,6 +109,18 @@
                 @esc-key-pressed="createDateModalShown = false" />
             </div>
 
+            <!-- type -->
+            <div class="border-b border-gray-200 p-5">
+              <dropdown
+                v-model="form.contact_important_date_type_id"
+                :data="data.date_types"
+                :required="false"
+                :placeholder="'Choose a value'"
+                :dropdown-class="'block w-full'"
+                :help="'Some dates have a special type that we will use in the software to calculate an age.'"
+                :label="'Date type'" />
+            </div>
+
             <div class="p-5">
               <!-- case: I know the exact date -->
               <div class="mb-2 flex items-center">
@@ -251,6 +263,12 @@
             <div v-if="editedDateId !== date.id" class="flex items-center justify-between px-5 py-2">
               <span class="text-base">
                 {{ date.label }}: <span class="font-medium">{{ date.date }}</span>
+
+                <span
+                  v-if="date.type"
+                  class="ml-2 inline-block rounded bg-neutral-200 py-0 px-1 text-xs text-neutral-500 last:mr-0">
+                  {{ date.type.label }}
+                </span>
               </span>
 
               <!-- actions -->
@@ -282,6 +300,18 @@
                     @esc-key-pressed="createDateModalShown = false" />
                 </div>
 
+                <!-- type -->
+                <div class="border-b border-gray-200 p-5">
+                  <dropdown
+                    v-model="form.contact_important_date_type_id"
+                    :data="data.date_types"
+                    :required="false"
+                    :placeholder="'Choose a value'"
+                    :dropdown-class="'block w-full'"
+                    :help="'Some dates have a special type that we will use in the software to calculate an age.'"
+                    :label="'Date type'" />
+                </div>
+
                 <div class="p-5">
                   <!-- case: I know the exact date -->
                   <div class="mb-2 flex items-center">
@@ -440,6 +470,7 @@ export default {
         label: '',
         date: '',
         age: '',
+        contact_important_date_type_id: 0,
         reminder: false,
         reminderChoice: '',
         errors: [],
@@ -473,6 +504,7 @@ export default {
       this.form.month = date.month;
       this.form.date = date.completeDate;
       this.form.age = date.age;
+      this.form.contact_important_date_type_id = date.type ? date.type.id : 0;
       this.editedDateId = date.id;
     },
 

resources/js/Pages/Vault/Settings/Partials/ContactImportantDateTypes.vue

@@ -58,7 +58,7 @@
             {{ type.label }}
             <span
               v-if="type.internal_type"
-              class="mr-2 inline-block rounded bg-neutral-200 py-1 px-2 text-xs font-semibold text-neutral-800 last:mr-0"
+              class="mr-2 inline-block rounded bg-neutral-200 py-1 px-2 text-xs font-semibold text-neutral-500 last:mr-0"
               >{{ type.internal_type }}</span
             >
           </span>

resources/js/Shared/Form/Dropdown.vue

@@ -46,7 +46,7 @@ select {
       </select>
     </div>
 
-    <p v-if="help" class="mb-3 mt-1 text-xs">
+    <p v-if="help" class="mt-1 text-xs">
       {{ help }}
     </p>
   </div>

tests/Unit/Domains/Contact/ManageContactImportantDates/Web/ViewHelpers/ContactImportantDatesViewHelperTest.php

@@ -29,14 +29,15 @@ public function it_gets_the_data_needed_for_the_view(): void
         $array = ContactImportantDatesViewHelper::data($contact, $user);
 
         $this->assertEquals(
-            5,
+            6,
             count($array)
         );
 
         $this->assertArrayHasKey('contact', $array);
         $this->assertArrayHasKey('dates', $array);
         $this->assertArrayHasKey('months', $array);
         $this->assertArrayHasKey('days', $array);
+        $this->assertArrayHasKey('date_types', $array);
         $this->assertArrayHasKey('url', $array);
 
         $this->assertEquals(
@@ -75,7 +76,10 @@ public function it_gets_the_data_transfer_object(): void
                 'id' => $date->id,
                 'label' => $date->label,
                 'date' => 'Oct 29, 1981',
-                'type' => 'birthdate',
+                'type' => [
+                    'id' => $date->contactImportantDateType->id,
+                    'label' => 'birthdate',
+                ],
                 'age' => '40',
                 'choice' => 'full_date',
                 'completeDate' => '1981-10-29',