feat: add delete and cancel functionality for service form

apps/service-catalog/app/actions/public-services/actions.ts

@@ -1,6 +1,10 @@
 'use server';
 
-import { createPublicService, getAllPublicServices } from '@catalog-frontend/data-access';
+import {
+  handleCreatePublicService,
+  handleDeletePublicService,
+  handleGetAllPublicServices,
+} from '@catalog-frontend/data-access';
 import { ServiceToBeCreated } from '@catalog-frontend/types';
 import { authOptions, validateSession } from '@catalog-frontend/utils';
 import { getServerSession } from 'next-auth';
@@ -11,7 +15,7 @@ export async function getPublicServices(catalogId: string) {
   const session = await getServerSession(authOptions);
   await validateSession(session);
   try {
-    const response = await getAllPublicServices(catalogId, `${session?.accessToken}`);
+    const response = await handleGetAllPublicServices(catalogId, `${session?.accessToken}`);
     if (response.status !== 200) {
       throw new Error();
     }
@@ -22,7 +26,7 @@ export async function getPublicServices(catalogId: string) {
   }
 }
 
-export async function createNewPublicService(catalogId: string, formData: FormData) {
+export async function createPublicService(catalogId: string, formData: FormData) {
   const newPublicService: ServiceToBeCreated = {
     catalogId: catalogId,
     title: {
@@ -37,7 +41,7 @@ export async function createNewPublicService(catalogId: string, formData: FormDa
   await validateSession(session);
   let success = false;
   try {
-    const response = await createPublicService(newPublicService, catalogId, `${session?.accessToken}`);
+    const response = await handleCreatePublicService(newPublicService, catalogId, `${session?.accessToken}`);
     if (response.status !== 201) {
       throw new Error();
     }
@@ -51,3 +55,23 @@ export async function createNewPublicService(catalogId: string, formData: FormDa
     }
   }
 }
+
+export async function deletePublicService(catalogId: string, serviceId: string) {
+  const session = await getServerSession(authOptions);
+  await validateSession(session);
+  let success = false;
+  try {
+    const response = await handleDeletePublicService(catalogId, serviceId, `${session?.accessToken}`);
+    if (response.status !== 204) {
+      throw new Error();
+    }
+    success = true;
+  } catch (error) {
+    throw new Error('Noe feil');
+  } finally {
+    if (success) {
+      revalidatePath(`/catalogs/${catalogId}/public-services`);
+      redirect(`/catalogs/${catalogId}/public-services`);
+    }
+  }
+}

apps/service-catalog/app/catalogs/[catalogId]/public-services/[serviceId]/edit/page.tsx

@@ -1,7 +1,28 @@
-export default async function EditPublicServicePage() {
+import { getOrganization } from '@catalog-frontend/data-access';
+import { Organization, Service } from '@catalog-frontend/types';
+import { Breadcrumbs, PageBanner } from '@catalog-frontend/ui';
+import { getTranslateText, localization } from '@catalog-frontend/utils';
+import { getPublicServices } from 'apps/service-catalog/app/actions/public-services/actions';
+import ServiceForm from 'apps/service-catalog/app/components/service-form';
+import { Params } from 'next/dist/shared/lib/router/utils/route-matcher';
+
+export default async function EditPublicServicePage({ params }: Params) {
+  const { catalogId, serviceId } = params;
+  const services: Service[] = await getPublicServices(catalogId);
+  const service: Service | undefined = services.find((s) => s.id === serviceId);
+  const organization: Organization = await getOrganization(catalogId).then((res) => res.json());
+
   return (
     <div>
-      <h1>Rediger offentlig tjeneste</h1>
+      <Breadcrumbs />
+      <PageBanner
+        title={localization.catalogType.service}
+        subtitle={getTranslateText(organization?.prefLabel).toString()}
+      />
+      <ServiceForm
+        catalogId={catalogId}
+        service={service}
+      />
     </div>
   );
 }

apps/service-catalog/app/catalogs/[catalogId]/public-services/page.tsx

@@ -29,6 +29,7 @@ export default async function PublicServiceSearchHitsPage({ params }: Params) {
                 <SearchHit
                   title={getTranslateText(service.title)}
                   description={getTranslateText(service.description)}
+                  titleHref={`/catalogs/${catalogId}/public-services/${service.id}/edit`}
                 />
               </div>
             ))

apps/service-catalog/app/components/service-form/index.tsx

@@ -2,83 +2,89 @@
 
 import { Tag, Textarea, Textfield } from '@digdir/design-system-react';
 import { Button, FormFieldCard } from '@catalog-frontend/ui';
-
 import { localization } from '@catalog-frontend/utils';
-
-import { Service } from '@catalog-frontend/types';
-
+import { Organization, Service } from '@catalog-frontend/types';
 import styles from './service-form.module.css';
-
 import { TrashIcon } from '@navikt/aksel-icons';
-import { createNewPublicService } from '../../actions/public-services/actions';
+import { createPublicService, deletePublicService } from '../../actions/public-services/actions';
+import { useRouter } from 'next/navigation';
 
 type ServiceFormProps = {
   catalogId: string;
   service?: Service;
 };
 
 export const ServiceForm = ({ catalogId, service }: ServiceFormProps) => {
-  const createPublicService = createNewPublicService.bind(null, catalogId);
+  const createNewPublicService = createPublicService.bind(null, catalogId);
+  const router = useRouter();
+
+  const handleDelete = () => {
+    if (service) {
+      if (window.confirm(localization.serviceCatalog.form.confirmDelete)) {
+        deletePublicService(catalogId, service.id);
+      }
+    }
+  };
 
   return (
     <>
       <div className='container'>
-        <div className={styles.pageContainer}>
-          <form action={createPublicService}>
-            <div className={styles.formContainer}>
-              <FormFieldCard
-                title={localization.title}
-                subtitle='Egenskapen brukes å til oppgi navn til en tjeneste'
+        <form action={createNewPublicService}>
+          <div className={styles.formCard}>
+            <FormFieldCard
+              title={localization.title}
+              subtitle={localization.serviceCatalog.form.titleSubtitle}
+            >
+              <div>
+                <Textfield
+                  defaultValue={service?.title.nb}
+                  label={
+                    <div>
+                      <p>{localization.serviceCatalog.form.titleLabel}</p>
+                      <Tag
+                        variant='secondary'
+                        color='first'
+                        size='small'
+                      >
+                        Må fylles ut
+                      </Tag>
+                    </div>
+                  }
+                  type='text'
+                  name='title.nb'
+                />
+              </div>
+            </FormFieldCard>
+          </div>
+          <FormFieldCard
+            title={localization.description}
+            subtitle={localization.serviceCatalog.form.descriptionSubtitle}
+          >
+            <Textarea name='description.nb' />
+          </FormFieldCard>
+
+          <div className={styles.buttonRow}>
+            <Button type='submit'>{localization.serviceCatalog.form.save}</Button>
+            {service ? (
+              <Button
+                color='danger'
+                variant='secondary'
+                onClick={() => handleDelete()}
               >
-                <div>
-                  <Textfield
-                    defaultValue={service?.title.nb}
-                    label={
-                      <div>
-                        <p>Tekst på bokmål</p>
-                        <Tag
-                          variant='secondary'
-                          color='first'
-                          size='small'
-                        >
-                          Må fylles ut
-                        </Tag>
-                      </div>
-                    }
-                    type='text'
-                    name='title.nb'
-                  />
-                </div>
-              </FormFieldCard>
-              <FormFieldCard
-                title={localization.description}
-                subtitle='Egenskapen brukes til å oppgi en tekstlig beskrivelse av tjenesten'
+                <TrashIcon fontSize='1.5rem' />
+                {localization.serviceCatalog.form.delete}
+              </Button>
+            ) : (
+              <Button
+                color='danger'
+                variant='secondary'
+                onClick={() => router.push(`/catalogs/${catalogId}/public-services`)}
               >
-                <Textarea name='description.nb' />
-              </FormFieldCard>
-            </div>
-
-            <div>
-              <Button type='submit'>Lagre tjeneste</Button>
-              {service ? (
-                <Button
-                  color='danger'
-                  variant='secondary'
-                >
-                  <TrashIcon fontSize='1.5rem' />
-                  Slett tjeneste
-                </Button>
-              ) : (
-                <Button
-                  color='danger'
-                  variant='secondary'
-                >
-                  Avbryt
-                </Button>
-              )}
-            </div>
-          </form>
-        </div>
+                {localization.button.cancel}
+              </Button>
+            )}
+          </div>
+        </form>
       </div>
     </>
   );

apps/service-catalog/app/components/service-form/service-form.module.css

@@ -0,0 +1,15 @@
+.cancelLink {
+  text-decoration: none;
+}
+
+.formCard {
+  padding-top: 50px;
+  padding-bottom: 20px;
+}
+
+.buttonRow {
+  display: flex;
+  gap: 15px;
+  padding-top: 40px;
+  padding-bottom: 40px;
+}

libs/data-access/src/lib/public-services/api/index.tsx

@@ -2,7 +2,7 @@ import { Service } from '@catalog-frontend/types';
 
 const path = `${process.env.SERVICE_CATALOG_BASE_URI}`;
 
-export const getAllPublicServices = async (catalogId: string, accessToken: string) => {
+export const handleGetAllPublicServices = async (catalogId: string, accessToken: string) => {
   const resource = `${path}/catalogs/${catalogId}/public-services`;
   const options = {
     headers: {
@@ -13,7 +13,11 @@ export const getAllPublicServices = async (catalogId: string, accessToken: strin
   return await fetch(resource, options);
 };
 
-export const createPublicService = async (publicService: Partial<Service>, catalogId: string, accessToken: string) => {
+export const handleCreatePublicService = async (
+  publicService: Partial<Service>,
+  catalogId: string,
+  accessToken: string,
+) => {
   const resource = `${path}/catalogs/${catalogId}/public-services`;
   const options = {
     headers: {
@@ -25,3 +29,15 @@ export const createPublicService = async (publicService: Partial<Service>, catal
   };
   return await fetch(resource, options);
 };
+
+export const handleDeletePublicService = async (catalogId: string, serviceId: string, accessToken: string) => {
+  const resource = `${path}/catalogs/${catalogId}/public-services/${serviceId}`;
+  const options = {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'DELETE',
+  };
+  return await fetch(resource, options);
+};

libs/utils/src/lib/language/nb.ts

@@ -312,4 +312,15 @@ export const nb = {
   validation: {
     invalidValue: 'Ugyldig verdi',
   },
+
+  serviceCatalog: {
+    form: {
+      titleLabel: 'Tekst på bokmål',
+      titleSubtitle: 'Egenskapen brukes å til oppgi navn til en tjeneste',
+      descriptionSubtitle: 'Egenskapen brukes til å oppgi en tekstlig beskrivelse av tjenesten',
+      save: 'Lagre tjeneste',
+      delete: 'Slett tjeneste',
+      confirmDelete: 'Er du sikker på at du vil slette tjenesten?',
+    },
+  },
 };