Modules screen

src/main/webapp/app/module/domain/Module.ts

@@ -1,8 +1,10 @@
+import { ModuleProperty } from './ModuleProperty';
 import { ModuleSlug } from './ModuleSlug';
 
 type ModuleDescription = string;
 
 export interface Module {
   slug: ModuleSlug;
   description: ModuleDescription;
+  properties: ModuleProperty[];
 }

src/main/webapp/app/module/domain/ModuleToApply.ts

@@ -0,0 +1,7 @@
+export type ProjectFolder = string;
+export type ModulePropertiesToApply = Map<string, string | number | boolean>;
+
+export interface ModuleToApply {
+  projectFolder: ProjectFolder;
+  properties: ModulePropertiesToApply;
+}

src/main/webapp/app/module/domain/ModulesRepository.ts

@@ -1,8 +1,9 @@
-import { ModuleProperties } from './ModuleProperties';
+import { ModuleToApply } from './ModuleToApply';
 import { Modules } from './Modules';
 import { ModuleSlug } from './ModuleSlug';
 
 export interface ModulesRepository {
   list(): Promise<Modules>;
-  get(slug: ModuleSlug): Promise<ModuleProperties>;
+
+  apply(module: ModuleSlug, moduleToApply: ModuleToApply): Promise<void>;
 }

src/main/webapp/app/module/primary/modules/Modules.component.ts

@@ -0,0 +1,100 @@
+import { Loader } from '@/loader/primary/Loader';
+import { Module } from '@/module/domain/Module';
+import { ModuleProperty } from '@/module/domain/ModuleProperty';
+import { Modules } from '@/module/domain/Modules';
+import { ModulesRepository } from '@/module/domain/ModulesRepository';
+import { defineComponent, inject, onMounted, reactive, ref } from 'vue';
+
+export default defineComponent({
+  name: 'ModulesVue',
+  setup() {
+    const modules = inject('modules') as ModulesRepository;
+
+    const modulesContent = reactive({
+      content: Loader.loading<Modules>(),
+    });
+
+    const folderPath = ref('');
+    const selectedModule = ref();
+    const moduleProperties = ref(new Map<string, string | number | boolean>());
+
+    onMounted(() => {
+      modules.list().then(response => modulesContent.content.loaded(response));
+    });
+
+    const applyModule = (module: string): Promise<void> => {
+      return modules.apply(module, {
+        projectFolder: folderPath.value,
+        properties: moduleProperties.value,
+      });
+    };
+
+    const selectModule = (slug: string): void => {
+      selectedModule.value = getModule(slug);
+    };
+
+    const disabledApplication = (slug: string): boolean => {
+      return (
+        folderPath.value.trim().length === 0 || getModule(slug).properties.some(property => property.mandatory && isNotSet(property.key))
+      );
+    };
+
+    const isNotSet = (propertyKey: string): boolean => {
+      const value = moduleProperties.value.get(propertyKey);
+
+      if (typeof value === 'string') {
+        return value.trim().length === 0;
+      }
+
+      return value === undefined;
+    };
+
+    const setStringProperty = (property: string, value: string): void => {
+      moduleProperties.value.set(property, value);
+    };
+
+    const setNumberProperty = (property: string, value: string): void => {
+      moduleProperties.value.set(property, +value);
+    };
+
+    const setBooleanProperty = (property: string, value: string): void => {
+      if (value === 'false') {
+        moduleProperties.value.set(property, false);
+      } else if (value === 'true') {
+        moduleProperties.value.set(property, true);
+      } else {
+        moduleProperties.value.delete(property);
+      }
+    };
+
+    const mandatoryProperties = (module: string): ModuleProperty[] => {
+      return getModule(module).properties.filter(property => property.mandatory);
+    };
+
+    const optionalProperties = (module: string): ModuleProperty[] => {
+      return getModule(module).properties.filter(property => !property.mandatory);
+    };
+
+    const getModule = (slug: string): Module => {
+      return modulesContent.content
+        .value()
+        .categories.flatMap(category => category.modules)
+        .find(module => module.slug === slug)!;
+    };
+
+    return {
+      content: modulesContent.content,
+      folderPath,
+      applyModule,
+      selectModule,
+      selectedModule,
+      setStringProperty,
+      setNumberProperty,
+      setBooleanProperty,
+      disabledApplication,
+      mandatoryProperties,
+      optionalProperties,
+      moduleProperties,
+    };
+  },
+});

src/main/webapp/app/module/primary/modules/Modules.html

@@ -0,0 +1,94 @@
+<div class="jhipster-modules" v-if="content.isLoading()" data-selector="modules-loader">Loading</div>
+<div class="jhipster-modules" v-else data-selector="modules-list">
+  <aside class="jhipster-modules-form">
+    <h2>Modules</h2>
+
+    <div class="jhipster-modules-form--field-line">
+      <label for="folder-path" class="jhipster-modules-form--field-label"> Project folder </label>
+
+      <input type="text" id="folder-path" v-model="folderPath" class="jhipster-modules-form--field" data-selector="folder-path-field" />
+    </div>
+
+    <div class="jhipster-modules-form--field-line" v-if="selectedModule" v-for="property in selectedModule.properties">
+      <label :for="`module-property-${property.key}`" class="jhipster-modules-form--field-label">
+        <span class="jhipster-modules-form--field-description">{{ property.description }}</span>
+        <span class="jhipster-modules-form--field-key"> -&nbsp;{{ property.key }}</span>
+      </label>
+
+      <input
+        type="text"
+        class="jhipster-modules-form--field"
+        :id="`module-property-${property.key}`"
+        :placeholder="property.example"
+        @input="setStringProperty(property.key, $event.target.value)"
+        :value="moduleProperties.get(property.key)"
+        :data-selector="`property-${property.key}-field`"
+        v-if="property.type === 'STRING'"
+      />
+
+      <input
+        type="number"
+        class="jhipster-modules-form--field"
+        :id="`module-property-${property.key}`"
+        :placeholder="property.example"
+        @input="setNumberProperty(property.key, $event.target.value)"
+        :value="moduleProperties.get(property.key)"
+        :data-selector="`property-${property.key}-field`"
+        v-if="property.type === 'INTEGER'"
+      />
+
+      <select
+        class="jhipster-modules-form--field"
+        :id="`module-property-${property.key}`"
+        @change="setBooleanProperty(property.key, $event.target.value)"
+        :data-selector="`property-${property.key}-field`"
+        v-if="property.type === 'BOOLEAN'"
+      >
+        <option value="" :selected="moduleProperties.get(property.key) === undefined"></option>
+        <option value="true" :selected="moduleProperties.get(property.key) === true">Yes</option>
+        <option value="false" :selected="moduleProperties.get(property.key) === false">No</option>
+      </select>
+    </div>
+  </aside>
+
+  <div class="jhipster-modules-list">
+    <div v-for="category in content.value().categories">
+      <div>
+        <h2 class="jhipster-module-category--name">{{ category.name }}</h2>
+        <div v-for="module in category.modules" class="jhipster-module">
+          <div class="jhipster-module--content" @click="selectModule(module.slug)" :data-selector="`${module.slug}-module-content`">
+            <div class="jhipster-module--slug">{{ module.slug }}</div>
+            <div class="jhipster-module--description">{{ module.description}}</div>
+
+            <div class="jhipster-module--properties">
+              <div v-for="property in mandatoryProperties(module.slug)" class="jhipster-module--property">
+                <div class="jhipster-module--property-key">{{ property.key }}</div>
+                <div class="jhipster-module--property-value" :data-selector="`module-${module.slug}-${property.key}-property-value`">
+                  {{ moduleProperties.get(property.key) }}
+                </div>
+              </div>
+            </div>
+
+            <div class="jhipster-module--properties">
+              <div v-for="property in optionalProperties(module.slug)" class="jhipster-module--property">
+                <div class="jhipster-module--property-key">{{ property.key }}</div>
+                <div class="jhipster-module--property-value" :data-selector="`module-${module.slug}-${property.key}-property-value`">
+                  {{ moduleProperties.get(property.key) }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <button
+            class="jhipster-module--apply-button"
+            :disabled="disabledApplication(module.slug)"
+            @click="applyModule(module.slug)"
+            :data-selector="`module-${module.slug}-application-button`"
+          >
+            Apply
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>