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,106 @@
+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 empty(folderPath.value) || 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 empty(value);
+ }
+
+ return value === undefined;
+ };
+
+ const setStringProperty = (property: string, value: string): void => {
+ moduleProperties.value.set(property, value);
+ };
+
+ const setNumberProperty = (property: string, value: string): void => {
+ if (empty(value)) {
+ moduleProperties.value.delete(property);
+ } else {
+ 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,
+ };
+ },
+});
+
+const empty = (value: string): boolean => {
+ return value.trim().length === 0;
+};

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>