ui: Fix bunch of typescript errors

2023-01-10 17:43:20 +01:00 · 2023-01-10 17:43:20 +01:00 · 2b83559c95
commit 2b83559c95
parent 0ea2f2cf82
10 changed files with 57 additions and 71 deletions
--- a/ui/src/lib/api/zone.ts
+++ b/ui/src/lib/api/zone.ts
@ -1,6 +1,6 @@
 import { handleApiResponse } from '$lib/errors';
 import type { Domain } from '$lib/model/domain';
-import type { ServiceMeta } from '$lib/model/service';
+import type { ServiceCombined, ServiceMeta } from '$lib/model/service';
 import type { ServiceRecord, Zone, ZoneMeta } from '$lib/model/zone';

 export async function getZone(domain: Domain, id: string): Promise<Zone> {
@ -51,7 +51,7 @@ export async function diffZone(domain: Domain, id1: string, id2: string): Promis
    return await handleApiResponse<Array<string>>(res);
 }

-export async function addZoneService(domain: Domain, id: string, service: ServiceMeta): Promise<Zone> {
+export async function addZoneService(domain: Domain, id: string, service: ServiceCombined): Promise<Zone> {
    let subdomain = service._domain;
    if (subdomain === '') subdomain = '@';

@ -67,7 +67,7 @@ export async function addZoneService(domain: Domain, id: string, service: Servic
    return await handleApiResponse<Zone>(res);
 }

-export async function updateZoneService(domain: Domain, id: string, service: ServiceMeta): Promise<Zone> {
+export async function updateZoneService(domain: Domain, id: string, service: ServiceCombined): Promise<Zone> {
    const dnid = encodeURIComponent(domain.id);
    id = encodeURIComponent(id);

@ -86,7 +86,7 @@ export async function deleteZoneService(domain: Domain, id: string, service: Ser
    const dnid = encodeURIComponent(domain.id);
    id = encodeURIComponent(id);
    subdomain = encodeURIComponent(subdomain);
-    const svcid = encodeURIComponent(service._id);
+    const svcid = service._id?encodeURIComponent(service._id):undefined;

    const res = await fetch(`/api/domains/${dnid}/zone/${id}/${subdomain}/services/${svcid}`, {
        method: 'DELETE',
@ -101,7 +101,7 @@ export async function getServiceRecords(domain: Domain, id: string, service: Ser

    const dnid = encodeURIComponent(domain.id);
    id = encodeURIComponent(id);
-    const svcid = encodeURIComponent(service._id);
+    const svcid = service._id?encodeURIComponent(service._id):undefined;

    const res = await fetch(`/api/domains/${dnid}/zone/${id}/${subdomain}/services/${svcid}/records`, {
        headers: {'Accept': 'application/json'}
--- a/ui/src/lib/components/Onboarding.svelte
+++ b/ui/src/lib/components/Onboarding.svelte
@ -2,16 +2,10 @@
 import { goto } from '$app/navigation';

 import {
-     Badge,
-     Button,
     Card,
     CardBody,
     CardGroup,
-     Col,
     Container,
-     Icon,
-     Row,
-     Spinner,
 } from 'sveltestrap';

 import Logo from '$lib/components/Logo.svelte';
--- a/ui/src/lib/components/domains/AliasModal.svelte
+++ b/ui/src/lib/components/domains/AliasModal.svelte
@ -1,7 +1,9 @@
 <script lang="ts">
 import { createEventDispatcher } from 'svelte';

+ // @ts-ignore
 import { escape } from 'html-escaper';
+
 import {
     Button,
     Icon,
@ -78,7 +80,7 @@
 function submitAliasForm() {
     if (validateNewSubdomain(value)) {
         addAliasInProgress = true;
-         addZoneService(origin, zoneId, {_domain: value, _svctype: "svcs.CNAME", Service: {Target: dn?dn:"@"}}).then(
+         addZoneService(origin, zone.id, {_domain: value, _svctype: "svcs.CNAME", Service: {Target: dn?dn:"@"}}).then(
             (z) => {
                 dispatch("update-zone-services", z);
                 addAliasInProgress = false;
--- a/ui/src/lib/components/domains/NewSubdomainModal.svelte
+++ b/ui/src/lib/components/domains/NewSubdomainModal.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 import { createEventDispatcher } from 'svelte';

- import { escape } from 'html-escaper';
+ import { escape } from 'html-escaper'; // @ts-ignore
 import {
     Input,
     InputGroup,
--- a/ui/src/lib/components/domains/Service.svelte
+++ b/ui/src/lib/components/domains/Service.svelte
@ -38,7 +38,7 @@
 } else {
     component = Card;
 }
- $: if ($userSession && $userSession.settings.zoneview === ZoneViewRecords) {
+ $: if ($userSession && $userSession.settings.zoneview === ZoneViewRecords && service) {
     getServiceRecords(origin, zoneId, service).then(
         (sr) => serviceRecords = sr
     )
@ -56,6 +56,8 @@
 }

 function deleteService() {
+     if (service == null) return;
+
     deleteZoneService(origin, zoneId, service).then(
         (z) => {
             dispatch("update-zone-services", z);
@ -64,6 +66,8 @@
 }

 function saveService() {
+     if (service == null) return;
+
     updateZoneService(origin, zoneId, service).then(
         (z) => {
             dispatch("update-zone-services", z);
--- a/ui/src/lib/components/domains/ServiceSelectorModal.svelte
+++ b/ui/src/lib/components/domains/ServiceSelectorModal.svelte
@ -49,7 +49,6 @@
            on:submit|preventDefault={submitSelectorForm}
        >
            <ServiceSelector
-                class="mb-2"
                {dn}
                {origin}
                bind:value={value}
--- a/ui/src/lib/components/providers/CardImportableDomains.svelte
+++ b/ui/src/lib/components/providers/CardImportableDomains.svelte
@ -1,5 +1,5 @@
 <script lang="ts">
- import { escape } from 'html-escaper';
+ import { escape } from 'html-escaper'; // @ts-ignore
 import {
     Badge,
     Button,
@ -44,8 +44,8 @@
     );
 }

- function haveDomain(name: string) {
-     let domain = undefined;
+ function haveDomain($domains_idx: Record<string, Domain>, name: string) {
+     let domain: Domain | undefined = undefined;
     if (name[name.length-1] == ".") {
         domain = $domains_idx[name];
     } else {
@ -54,39 +54,42 @@
     return domain !== undefined && domain.id_provider == provider._id;
 }

- async function importDomain(name: string) {
-     addDomain(name, provider)
+ async function importDomain(domain: {domain: string; wait: boolean}) {
+     domain.wait = true;
+     addDomain(domain.domain, provider)
     .then(
-         (domain) => {
+         (mydomain) => {
+             domain.wait = false;
             toasts.addToast({
                 title: $t('domains.attached-new'),
-                 message: $t('domains.added-success', { domain: domain.domain }),
-                 href: '/domains/' + domain.domain,
+                 message: $t('domains.added-success', { domain: mydomain.domain }),
+                 href: '/domains/' + mydomain.domain,
                 color: 'success',
                 timeout: 5000,
             });

-             refreshDomains();
+             if (!allImportInProgress) refreshDomains();
         },
         (error) => {
+             domain.wait = false;
             throw error;
         }
     );
 }

+ let allImportInProgress = false;
 async function importAllDomains() {
     if (importableDomainsList) {
+         allImportInProgress = true;
         for (const d of importableDomainsList) {
-             if (!haveDomain(d)) {
-                 await importDomain(d);
+             if (!haveDomain($domains_idx, d)) {
+                 await importDomain({domain: d, wait: false});
             }
         }
+         allImportInProgress = false;
+         refreshDomains();
     }
 }
-
- function doDomainAction(dn: Domain) {
-
- }
 </script>

 <Card {...$$restProps}>
@ -100,9 +103,13 @@
                    <Button
                        type="button"
                        color="secondary"
+                        disabled={allImportInProgress}
                        size="sm"
                        on:click={importAllDomains}
                    >
+                        {#if allImportInProgress}
+                            <Spinner size="sm" />
+                        {/if}
                        {$t('provider.import-domains')}
                    </Button>
                {/if}
@ -116,23 +123,10 @@
    {:else}
        <ZoneList
            flush
-            domains={importableDomainsList.map((dn) => ({domain: dn, id_provider: provider._id}))}
+            domains={importableDomainsList.map((dn) => ({domain: dn, id_provider: provider._id, wait: false}))}
        >
            <div slot="badges" let:item={domain}>
-                {#if domain.state}
-                    <Badge class="ml-1" color={domain.state}>
-                        {#if domain.state === 'success'}
-                            <Icon name="check" />
-                        {:else if domain.state === 'info'}
-                            <Icon name="exclamation-circle" />
-                        {:else if domain.state === 'warning'}
-                            <Icon name="exclamation-triangle" />
-                        {:else if domain.state === 'danger'}
-                            <Icon name="exclamation-octagon" />
-                        {/if}
-                        {domain.message}
-                    </Badge>
-                {:else if haveDomain(domain.domain)}
+                {#if haveDomain($domains_idx, domain.domain)}
                    <Badge class="ml-1" color="success">
                        <Icon name="check" />
                        {$t('service.already')}
@ -143,23 +137,15 @@
                        class="ml-1"
                        color="primary"
                        size="sm"
-                        disabled={domain.wait}
-                        on:click={() => importDomain(domain.domain)}
+                        disabled={domain.wait || allImportInProgress}
+                        on:click={() => importDomain(domain)}
                    >
+                        {#if domain.wait}
+                            <Spinner size="sm" />
+                        {/if}
                        {$t('domains.add-now')}
                    </Button>
                {/if}
-                {#if domain.btn}
-                    <Button
-                        type="button"
-                        class="ms-1"
-                        color={domain.state}
-                        size="sm"
-                        on:click={() => doDomainAction(domain)}
-                    >
-                        {$t(domain.btn)}
-                    </Button>
-                {/if}
            </div>
            <svelte:fragment slot="no-domain">
                {#if discoveryError}
--- a/ui/src/lib/components/resources/object.svelte
+++ b/ui/src/lib/components/resources/object.svelte
@ -10,7 +10,6 @@
 } from 'sveltestrap';

 import { getServiceSpec } from '$lib/api/service_specs';
- import { deleteZoneService } from '$lib/api/zone';
 import ResourceInput from '$lib/components/ResourceInput.svelte';
 import type { Field } from '$lib/model/custom_form';
 import type { ServiceInfos } from '$lib/model/service_specs';
--- a/ui/src/lib/model/service.ts
+++ b/ui/src/lib/model/service.ts
@ -1,13 +1,13 @@
 export interface ServiceMeta {
    _svctype: string;
-    _id: string;
-    _ownerid: string;
+    _id?: string;
+    _ownerid?: string;
    _domain: string;
-    _ttl: number;
-    _comment: string;
-    _mycomment: string;
-    _aliases: Array<string>;
-    _tmp_hint_nb: number;
+    _ttl?: number;
+    _comment?: string;
+    _mycomment?: string;
+    _aliases?: Array<string>;
+    _tmp_hint_nb?: number;
 };

 export interface ServiceCombined extends ServiceMeta {
--- a/ui/src/routes/domains/[dn]/[[historyid]]/+layout.svelte
+++ b/ui/src/routes/domains/[dn]/[[historyid]]/+layout.svelte
@ -1,7 +1,7 @@
 <script lang="ts">
 import { goto } from '$app/navigation';

- import { escape } from 'html-escaper';
+ import { escape } from 'html-escaper'; // @ts-ignore
 import {
     Button,
     ButtonGroup,
@ -202,7 +202,7 @@
             refreshDomains().then(() => {
                 deleteInProgress = false;
                 goto('/domains');
-             }, (err: any) => {
+             }, () => {
                 deleteInProgress = false;
                 goto('/domains');
             });
@ -424,9 +424,11 @@
    size="lg"
    scrollable
 >
-    <ModalHeader toggle={() => applyZoneModalIsOpen = false}>
-        {@html $t('domains.view.description', {"domain": `<span class="font-monospace">${escape(domain.domain)}</span>`})}
-    </ModalHeader>
+    {#if domain}
+        <ModalHeader toggle={() => applyZoneModalIsOpen = false}>
+            {@html $t('domains.view.description', {"domain": `<span class="font-monospace">${escape(domain.domain)}</span>`})}
+        </ModalHeader>
+    {/if}
    <ModalBody>
        {#if !zoneDiff}
            <div class="my-2 text-center">