feat: add module and env edition pages

modules/ui/src/lib/assets/lang/en/environment.json

@@ -0,0 +1,8 @@
+{
+  "page": {
+    "creation": "Create environment",
+    "edition": "Edit environment {{environment.name}} of project {{projectName}}"
+  },
+  "name": "Name",
+  "smallName": "Small name"
+}

modules/ui/src/lib/assets/lang/en/module.json

@@ -0,0 +1,7 @@
+{
+  "page": {
+    "creation": "Create module",
+    "edition": "Edit module {{module.name}} of project {{projectName}}"
+  },
+  "name": "Name"
+}

modules/ui/src/lib/assets/lang/fr/environment.json

@@ -0,0 +1,8 @@
+{
+  "page": {
+    "creation": "Création d'un environnement",
+    "edition": "Édition de l'environnement {{environment.name}} du projet {{projectName}}"
+  },
+  "name": "Nom",
+  "smallName": "Nom court"
+}

modules/ui/src/lib/assets/lang/fr/module.json

@@ -0,0 +1,7 @@
+{
+  "page": {
+    "creation": "Création d'un module",
+    "edition": "Édition du module {{module.name}} du projet {{projectName}}"
+  },
+  "name": "Nom"
+}

modules/ui/src/lib/components/organisms/O_environment/O_environmentEdition.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import M_inputText from "$lib/components/molecules/M_inputText.svelte";
+    import A_button from "$lib/components/atoms/A_button.svelte";
+    import {t} from "$lib/services/I18nService";
+    import type {Env} from "$lib/domain/Env";
+    import {EnvService} from "$lib/services/EnvService";
+
+    export let environment: Env = {} as Env;
+    export let projectRef;
+
+    function save() {
+        if (environment.id) {
+            EnvService.updateName(environment);
+        } else {
+            EnvService.create(projectRef, environment);
+        }
+    }
+</script>
+
+<form on:submit|preventDefault={save}>
+    <M_inputText label="{$t('environment.name')}" bind:value={environment.name} required="true" placeholder="{$t('environment.name')}"/>
+    <M_inputText label="{$t('project.smallName')}" bind:value={environment.smallName} required="true" placeholder="{$t('environment.smallName')}"/>
+
+    <A_button label="{$t('common.actions.save')}" type="submit"/>
+</form>
+
+<style>
+</style>

modules/ui/src/lib/components/organisms/O_module/O_moduleEdition.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import M_inputText from "$lib/components/molecules/M_inputText.svelte";
+    import A_button from "$lib/components/atoms/A_button.svelte";
+    import {t} from "$lib/services/I18nService";
+    import type {Module} from "$lib/domain/Module";
+    import {ModuleService} from "$lib/services/ModuleService";
+
+    export let module: Module = {} as Module;
+    export let projectRef;
+
+    function save() {
+        if (module.id) {
+            ModuleService.updateName(module);
+        } else {
+            ModuleService.create(projectRef, module);
+        }
+    }
+</script>
+
+<form on:submit|preventDefault={save}>
+    <M_inputText label="{$t('module.name')}" bind:value={module.name} required="true" placeholder="{$t('module.name')}"/>
+
+    <A_button label="{$t('common.actions.save')}" type="submit"/>
+</form>
+
+<style>
+</style>

modules/ui/src/lib/services/EnvService.ts

@@ -1,4 +1,5 @@
 import type {Env} from "$lib/domain/Env";
+import {Http} from "$lib/services/utils/HttpService";
 
 
 export class EnvService {
@@ -8,4 +9,20 @@ export class EnvService {
         const res = await fetch(`${EnvService.baseUrl}/${id}`);
         return (await res.json()) as Env;
     }
+
+
+    public static create = async (projectRef: string, env: Env) => {
+        return Http.post(`${EnvService.baseUrl}`, {
+            name: env.name,
+            smallName: env.smallName,
+            projectRef
+        });
+    }
+
+    public static updateName = async (env: Env): Promise<Env> => {
+        return Http.put(`${EnvService.baseUrl}/${env.id}/name`, {
+            name: env.name,
+            smallName: env.smallName
+        });
+    }
 }

modules/ui/src/lib/services/I18nService.ts

@@ -1,7 +1,7 @@
 import i18n from 'sveltekit-i18n';
 
 const languages = ['en', 'fr'];
-const i18nFiles = ['common', 'app', 'project'];
+const i18nFiles = ['common', 'app', 'project', 'module', 'environment'];
 
 const langFilePairs: any[] = languages
     .flatMap(lang => i18nFiles.map(i18nFile => ({lang, i18nFile})));

modules/ui/src/lib/services/ModuleService.ts

@@ -1,4 +1,5 @@
 import type {Module} from "$lib/domain/Module";
+import {Http} from "$lib/services/utils/HttpService";
 
 
 export class ModuleService {
@@ -8,4 +9,17 @@ export class ModuleService {
         const res = await fetch(`${ModuleService.baseUrl}/${id}`);
         return (await res.json()) as Module;
     }
+
+    public static create = async (projectRef: string, module: Module) => {
+        return Http.post(`${ModuleService.baseUrl}`, {
+            name: module.name,
+            projectRef
+        });
+    }
+
+    public static updateName = async (module: Module): Promise<Module> => {
+        return Http.put(`${ModuleService.baseUrl}/${module.id}/name`, {
+            name: module.name
+        });
+    }
 }

modules/ui/src/routes/projects/[project]/envs/+page.svelte

@@ -1 +1,16 @@
-Page de creation d'un environnement
+<script lang="ts">
+    import { t } from '$lib/services/I18nService';
+    import {page} from "$app/stores";
+    import O_environmentEdition from "$lib/components/organisms/O_environment/O_environmentEdition.svelte";
+
+    let environment = {};
+    let projectRef;
+
+    $: if($page.params?.project) {
+        projectRef = $page.params.project;
+    }
+</script>
+
+{$t('environment.page.creation')}
+
+<O_environmentEdition {projectRef} {environment} />

modules/ui/src/routes/projects/[project]/envs/[env]/edit/+page.svelte

@@ -3,6 +3,8 @@
     import {page} from "$app/stores";
     import {ProjectService} from "$lib/services/ProjectService";
     import M_error from "$lib/components/molecules/M_error.svelte";
+    import {t} from "$lib/services/I18nService";
+    import O_environmentEdition from "$lib/components/organisms/O_environment/O_environmentEdition.svelte";
 
     let project
     let envPromise
@@ -20,8 +22,10 @@
 
 {#await envPromise}
     <p>...waiting</p>
-{:then env}
-    Edition de l'environnement {env.name} du projet {project.name}
+{:then environment}
+    {$t('environment.page.edition', {name: environment.name, projectName: project.name})}
+
+    <O_environmentEdition projectRef="{project.id}" {environment}/>
 {:catch error}
     <M_error>
         Env not found !

modules/ui/src/routes/projects/[project]/modules/+page.svelte

@@ -1 +1,16 @@
-Page de creation d'un module
+<script lang="ts">
+    import { t } from '$lib/services/I18nService';
+    import O_moduleEdition from "$lib/components/organisms/O_module/O_moduleEdition.svelte";
+    import {page} from "$app/stores";
+
+    let module = {};
+    let projectRef;
+
+    $: if($page.params?.project) {
+        projectRef = $page.params.project;
+    }
+</script>
+
+{$t('module.page.creation')}
+
+<O_moduleEdition {projectRef} {module} />

modules/ui/src/routes/projects/[project]/modules/[module]/edit/+page.svelte

@@ -5,6 +5,8 @@
     import {EnvService} from "$lib/services/EnvService";
     import {ExecutionMock} from "$lib/mocks/ExecutionMock";
     import M_error from "$lib/components/molecules/M_error.svelte";
+    import {t} from "$lib/services/I18nService";
+    import O_moduleEdition from "$lib/components/organisms/O_module/O_moduleEdition.svelte";
 
     let project
     let env
@@ -35,7 +37,9 @@
 {#await modulePromise}
     <p>...waiting</p>
 {:then module}
-    Edition du module {module.name} du projet {project.name}
+    {$t('module.page.edition', {name: module.name, projectName: project.name})}
+
+    <O_moduleEdition projectRef="{project.id}" {module}/>
 {:catch error}
     <M_error>
         Module not found !