ui: Can update TTL in modal footer

ui/src/lib/components/domains/ModalFooter.svelte

@@ -27,6 +27,8 @@
  import {
      Button,
      Icon,
+     Input,
+     Label,
      ModalFooter,
      Spinner,
  } from '@sveltestrap/sveltestrap';
@@ -76,10 +78,18 @@
  }
 
  let showRecords = false;
+ let recordsHeight = 120;
 </script>
 
 {#if showRecords}
-    <ModalFooter class="p-0 border-top border-dark border-2 d-flex justify-content-center">
+    <ModalFooter
+        class="p-0 d-flex justify-content-center"
+        style={"overflow-y: auto; max-height: " + recordsHeight + "px"}
+    >
+        <div
+            class="m-0 border-top border-dark border-2 w-100"
+        >
+        </div>
         {#await getServiceRecords(origin, zoneId, service)}
             <Spinner class="my-1" />
         {:then serviceRecords}
@@ -99,22 +109,35 @@
         </Button>
     {/if}
     <div class="ms-auto"></div>
-    {#if step === 2}
+    {#if origin && zoneId && showRecords}
+        <Label for="svc_ttl" title={$t('service.ttl-long')}>{$t('service.ttl')}</Label>
+        <Input
+            id="svc_ttl"
+            min="0"
+            type="number"
+            style="width: 12%"
+            title={$t('service.ttl-tip')}
+            bind:value={service._ttl}
+        />
+    {:else if step === 2}
         <HelpButton
-            href={helpHref}
             color="info"
+            href={helpHref}
+            title={$t('common.help')}
         />
     {/if}
     {#if update}
         <Button
-            disabled={addServiceInProgress || deleteServiceInProgress || !canDelete}
             color="danger"
+            disabled={addServiceInProgress || deleteServiceInProgress || !canDelete}
+            title={$t('service.delete')}
             on:click={() => dispatch("delete-service")}
         >
             {#if deleteServiceInProgress}
                 <Spinner size="sm" />
+            {:else}
+                <Icon name="trash" />
             {/if}
-            {$t('service.delete')}
         </Button>
     {/if}
     <Button

ui/src/lib/locales/en.json

@@ -282,7 +282,10 @@
         "update": "Update this service",
         "form-new": "Add a new service to {{domain}}",
         "new": "New service",
-        "new-description": "Click here to add a new service to this subdomain."
+        "new-description": "Click here to add a new service to this subdomain.",
+        "ttl": "TTL",
+        "ttl-long": "Time-To-Live",
+        "ttl-tip": "0 means default TTL, others values are exprimed in seconds"
     },
     "provider": {
         "another": "Use another provider",

ui/src/lib/locales/fr.json

@@ -276,7 +276,10 @@
         "update": "Mettre à jour ce service",
         "form-new": "Ajout d'un service sur {{domain}}",
         "new": "Nouveau service",
-        "new-description": "Cliquez ici pour ajouter un nouveau service à ce sous-domaine."
+        "new-description": "Cliquez ici pour ajouter un nouveau service à ce sous-domaine.",
+        "ttl": "TTL",
+        "ttl-long": "Time-To-Live",
+        "ttl-tip": "0 correspond au TTL par défaut, les autres valeurs sont exprimées en secondes"
     },
     "upgrade": {
         "title": "Une mise à jour est disponible !",