Search

src/lib/components/PointListModal.svelte

@@ -27,11 +27,9 @@
     let isAlertVisible = $state(false);
     let alertText = $state('');
 
-    // Derived state
-    let modalTitle = $derived(isEditing ? 'Редактирование точки' : 'Сохраненные точки');
-
     // Table handler
     let table = $derived(new TableHandler($SavedPointsStore, { rowsPerPage: 10 }));
+    let search = $derived(table.createSearch(['name']));
 
     $effect(() => {
         onChange();
@@ -126,10 +124,29 @@
 
 <Modal {isOpen} toggle={closeModal} size="lg" fade={false} backdrop={true} scrollable>
     <div class="modal-header">
-        <h5 class="modal-title">{modalTitle}</h5>
+        <h5 class="modal-title">Сохраненные точки</h5>
         <button type="button" class="btn-close" onclick={closeModal} aria-label="Close"></button>
     </div>
     <div class="modal-body">
+        <div class="position-relative mb-2">
+            <Input
+            type="text"
+            class="form-control-sm pe-5"
+            placeholder="Поиск по названию..."
+            bind:value={search.value} 
+            oninput={() => search.set()}
+            />
+            <Button
+            size="sm"
+            color="white"
+            class="position-absolute top-50 end-0 translate-middle-y me-2 rounded-circle d-flex align-items-center justify-content-center"
+            style="width: 16px; height: 16px; border: none; background: var(--bs-secondary); color: var(--bs-white);"
+            onclick={() => { search.value = ''; search.set(); }}
+            disabled={!search.value}
+            >
+            <Icon name="x" style="font-size: 16px;" />
+            </Button>
+        </div>
         <div bind:this={table.element} class="table-responsive">
             <table class="table table-sm">
                 <thead>
@@ -207,16 +224,13 @@
                         <span class="form-text">Метры над ур. моря</span>
                     </FormGroup>
                 </div>
-                <Button type="submit" color="success">
+                <Button type="submit" color="success" size="sm">
                     {isEditing ? 'Обновить точку' : 'Сохранить точку'}
                 </Button>
                 {#if isEditing}
-                <Button type="button" color="secondary" onclick={resetForm} class="ms-2">Отмена</Button>
+                    <Button size="sm" type="button" color="secondary" onclick={resetForm}>Отмена</Button>
                 {/if}
             </form>
         </div>
     </div>
-    <div class="modal-footer">
-        <Button color="secondary" onclick={closeModal}>Закрыть</Button>
-    </div>
 </Modal>