ui: New button to display generated records

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

@@ -3,11 +3,14 @@
 
  import {
      Button,
+     Icon,
      ModalFooter,
      Spinner,
  } from 'sveltestrap';
 
+ import { getServiceRecords } from '$lib/api/zone';
  import HelpButton from '$lib/components/Help.svelte';
+ import TableRecords from '$lib/components/domains/TableRecords.svelte';
  import type { ServiceCombined } from '$lib/model/service';
  import { locale, t } from '$lib/translations';
 
@@ -17,7 +20,9 @@
  export let step: number;
  export let service: ServiceCombined | null = null;
  export let form = "addSvcForm";
+ export let origin: Domain | DomainInList | undefined;
  export let update = false;
+ export let zoneId: number | undefined;
  export let canDelete = false;
  export let canContinue = false;
 
@@ -46,9 +51,31 @@
      }
      helpHref = "https://help.happydomain.org/" + $locale + "/" + helpHref;
  }
+
+ let showRecords = false;
 </script>
 
+{#if showRecords}
+    <ModalFooter class="p-0 border-top border-dark border-2 d-flex justify-content-center">
+        {#await getServiceRecords(origin, zoneId, service)}
+            <Spinner class="my-1" />
+        {:then serviceRecords}
+            <TableRecords {serviceRecords} />
+        {/await}
+    </ModalFooter>
+{/if}
 <ModalFooter>
+    {#if origin && zoneId}
+        <Button
+            color="dark"
+            outline={!showRecords}
+            title={$t('domains.see-records')}
+            on:click={() => showRecords = !showRecords}
+        >
+            <Icon name="code-square" />
+        </Button>
+    {/if}
+    <div class="ms-auto"></div>
     {#if step === 2}
         <HelpButton
             href={helpHref}

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

@@ -17,8 +17,8 @@
 
  import { deleteZoneService, getServiceRecords, updateZoneService } from '$lib/api/zone';
  import { nsrrtype } from '$lib/dns';
- import Record from '$lib/components/domains/Record.svelte';
  import ResourceInput from '$lib/components/ResourceInput.svelte';
+ import TableRecords from '$lib/components/domains/TableRecords.svelte';
  import type { Domain, DomainInList } from '$lib/model/domain';
  import type { ServiceCombined } from '$lib/model/service';
  import { ZoneViewGrid, ZoneViewList, ZoneViewRecords } from '$lib/model/usersettings';
@@ -166,18 +166,7 @@
         {:else if $userSession.settings.zoneview === ZoneViewRecords}
             {#if serviceRecords}
                 <ListGroupItem class="p-0">
-                    <Table
-                        class="m-0"
-                        hover
-                        size="sm"
-                        striped
-                    >
-                        <tbody>
-                            {#each serviceRecords as record}
-                                <Record {record} />
-                            {/each}
-                        </tbody>
-                    </Table>
+                    <TableRecords {serviceRecords} />
                 </ListGroupItem>
             {:else}
                 <ListGroupItem class="py-3 d-flex justify-content-center">

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

@@ -112,15 +112,19 @@
             {/if}
         </form>
     </ModalBody>
+    {#if zone}
     <ModalFooter
         step={2}
         {addServiceInProgress}
         canDelete={service._svctype !== 'abstract.Origin' && service._svctype !== 'abstract.NSOnlyOrigin'}
         {deleteServiceInProgress}
+        {origin}
         {service}
         {toggle}
         update={service._id != undefined}
+        zoneId={zone.id}
         on:delete-service={deleteService}
     />
+    {/if}
 </Modal>
 {/if}

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+ import {
+     Badge,
+     Card,
+     CardBody,
+     CardText,
+     CardTitle,
+     CardSubtitle,
+     Icon,
+     ListGroup,
+     ListGroupItem,
+     Table,
+     Spinner,
+ } from 'sveltestrap';
+
+ import Record from '$lib/components/domains/Record.svelte';
+
+ export let serviceRecords: Array<ServiceRecord>|null = null;
+</script>
+
+{#if serviceRecords}
+    <Table
+        class="m-0"
+        hover
+        size="sm"
+        striped
+    >
+        <tbody>
+            {#each serviceRecords as record}
+                <Record {record} />
+            {/each}
+        </tbody>
+    </Table>
+{/if}

ui/src/lib/locales/en.json

@@ -120,6 +120,7 @@
             "provider": "Zone hosted on",
             "title": "View zone"
         },
+        "see-records": "See corresponding records",
         "alias-creation": "Add an alias pointing to {{domain}}:",
         "alias-creation-sample": "This will create the alias:",
         "placeholder-new": "my.new.domain.",

ui/src/lib/locales/fr.json

@@ -120,6 +120,7 @@
             "title": "Voir la zone",
             "provider": "Zone hébergée par"
         },
+        "see-records": "Voir les enregistrements correspondants",
         "alias-creation": "Ajouter un alias pointant sur {{domain}} :",
         "alias-creation-sample": "Cela va créer cet alias :",
         "placeholder-new": "mon.nouveau.domaine.",