refactor: move event select popup to a modal

src/app/modules/data/chips/edit-event-selection.html

@@ -0,0 +1,86 @@
+<!--
+  ~ Copyright (C) 2022 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<ion-item
+  (click)="modified.emit(); selection.click()"
+  class="list-header"
+  lines="none"
+>
+  <ion-list-header>
+    <ion-label>{{ 'data.chips.add_events.popover.ALL' | translate }}</ion-label>
+  </ion-list-header>
+  <ion-checkbox
+    slot="end"
+    [checked]="selection.checked"
+    [indeterminate]="selection.indeterminate"
+  >
+  </ion-checkbox>
+</ion-item>
+<ng-container *ngFor="let frequency of selection.children">
+  <ion-list inset="true" lines="full">
+    <ion-item
+      lines="none"
+      (click)="modified.emit(); frequency.click()"
+      class="list-header"
+    >
+      <ion-list-header>
+        <ion-label>{{
+          frequency.children[0].item.repeatFrequency
+            ? (frequency.children[0].item.repeatFrequency
+              | durationLocalized: true
+              | sentencecase)
+            : ('data.chips.add_events.popover.SINGLE' | translate | titlecase)
+        }}</ion-label>
+        <ion-button></ion-button>
+      </ion-list-header>
+      <ion-checkbox
+        slot="end"
+        [checked]="frequency.checked"
+        [indeterminate]="frequency.indeterminate"
+      >
+      </ion-checkbox>
+    </ion-item>
+    <ion-item
+      *ngFor="let date of frequency.children"
+      (click)="
+        modified.emit();
+        date.selected = !date.selected;
+        frequency.notifyChildChanged()
+      "
+    >
+      <ion-label
+        *ngIf="date.item.dates.length > 1; else single_event"
+        class="ion-text-wrap"
+      >
+        {{ date.item.duration | amDuration: 'hours' }}
+        {{ 'data.chips.add_events.popover.AT' | translate }}
+        {{ date.item.dates[0] | amDateFormat: 'HH:mm ddd' }}
+        {{ 'data.chips.add_events.popover.UNTIL' | translate }}
+        {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'll' }}
+      </ion-label>
+      <ng-template #single_event>
+        <ion-label class="ion-text-wrap">
+          {{ date.item.duration | amDuration: 'hours' }}
+          {{ 'data.chips.add_events.popover.AT' | translate }}
+          {{
+            date.item.dates[date.item.dates.length - 1]
+              | amDateFormat: 'll, HH:mm'
+          }}
+        </ion-label>
+      </ng-template>
+      <ion-checkbox slot="end" [checked]="date.selected"> </ion-checkbox>
+    </ion-item>
+  </ion-list>
+</ng-container>