Merge pull request #812 from jhipster/entity-create-update-part4

feat: Support create and update flows for enum data type
jhipster · Nov 29, 2021 · f975865 · f975865
2 parents d0a7418 + 00f7d1a
commit f975865
Show file tree

Hide file tree

Showing 12 changed files with 111 additions and 23 deletions.
diff --git a/.github/workflows/application-lighthouse.yml b/.github/workflows/application-lighthouse.yml
@@ -74,7 +74,7 @@ jobs:
               run: |
                   cd "$HOME/svelte-app"
                   npm install -g @lhci/cli@0.7.x
-                  npm install --save puppeteer
+                  npm install --save puppeteer@11.0.0
                   docker-compose -f src/main/docker/app.yml up -d
                   timeout 180 bash -c 'while [[ "$(curl -s -o /dev/null -w ''%{http_code}'' localhost:8080/api/authenticate)" != "200" ]]; do sleep 5; done' || false
             - name: Run Lighthouse tests - Unauthenticated Pages

diff --git a/.github/workflows/scripts/monolithic-jwt-maven-mongodb-prod.jdl b/.github/workflows/scripts/monolithic-jwt-maven-mongodb-prod.jdl
@@ -11,9 +11,9 @@ application {
     entities *
 }
 
-// enum EntityStatus {
-//    DUMMY, APP, SVELTE
-// }
+ enum EntityStatus {
+    DUMMY, APP, SVELTE
+ }
 
 entity SampleDomainEntity {
   stringData String required minlength(5) maxlength(50)
@@ -28,7 +28,7 @@ entity SampleDomainEntity {
   instantData Instant
   durationData Duration
   uuidData UUID
-//  enumData EntityStatus
+  enumData EntityStatus
 }
 
 entity SampleBlobEntity {

diff --git a/.github/workflows/scripts/monolithic-oidc-maven-postgres-prod.jdl b/.github/workflows/scripts/monolithic-oidc-maven-postgres-prod.jdl
@@ -12,9 +12,9 @@ application {
     entities *
 }
 
-// enum EntityStatus {
-//    DUMMY, APP, SVELTE
-// }
+ enum EntityStatus {
+    DUMMY, APP, SVELTE
+ }
 
 entity SampleDomainEntity {
   stringData String required minlength(5) maxlength(50)
@@ -29,7 +29,7 @@ entity SampleDomainEntity {
   instantData Instant
   durationData Duration
   uuidData UUID
-//  enumData EntityStatus
+  enumData EntityStatus
 }
 
 entity SampleBlobEntity {

diff --git a/.github/workflows/scripts/monolithic-session-maven.jdl b/.github/workflows/scripts/monolithic-session-maven.jdl
@@ -11,9 +11,9 @@ application {
     entities *
 }
 
-// enum EntityStatus {
-//    DUMMY, APP, SVELTE
-// }
+ enum EntityStatus {
+    DUMMY, APP, SVELTE
+ }
 
 entity SampleDomainEntity {
   stringData String required minlength(5) maxlength(50)
@@ -28,7 +28,7 @@ entity SampleDomainEntity {
   instantData Instant
   durationData Duration
   uuidData UUID
-//  enumData EntityStatus
+  enumData EntityStatus
 }
 
 entity SampleBlobEntity {

diff --git a/.github/workflows/scripts/svelte-app-session-lighthouse.jdl b/.github/workflows/scripts/svelte-app-session-lighthouse.jdl
@@ -12,9 +12,9 @@ application {
 	entities *
 }
 
-// enum EntityStatus {
-//    DUMMY, APP, SVELTE
-// }
+ enum EntityStatus {
+    DUMMY, APP, SVELTE
+ }
 
 entity SampleDomainEntity {
   stringData String required minlength(5) maxlength(50)
@@ -33,7 +33,7 @@ entity SampleDomainEntity {
 //  anyBlobData AnyBlob
 //  imageBlobData ImageBlob
   textBlobData TextBlob
-//  enumData EntityStatus
+  enumData EntityStatus
 }
 
 paginate SampleDomainEntity with pagination
diff --git a/generators/client/templates/svelte/package.json b/generators/client/templates/svelte/package.json
@@ -30,7 +30,6 @@
 		"rimraf": "3.0.2",
 		"svelte": "3.44.2",
 		"svelte-jester": "1.8.2",
-		"tailwindcss": "2.2.19",
-		"@cypress/request": "2.88.7"
+		"tailwindcss": "2.2.19"
 	}
 }
diff --git a/generators/client/templates/svelte/src/main/webapp/app/lib/SelectControl.svelte.ejs b/generators/client/templates/svelte/src/main/webapp/app/lib/SelectControl.svelte.ejs
@@ -11,6 +11,7 @@
 	export let label = ''
 	export let options = []
 	export let validations = []
+	export let multiple = false
 
 	const dispatch = createEventDispatcher()
 	const randomSuffix = Date.now()
@@ -34,13 +35,25 @@
 	function selectOption(event) {
 		dirty = true
 		if (event.target.checked) {
-			value = [...value, event.target.value]
+			if (multiple) {
+				value = [...value, event.target.value]
+			} else {
+				value =  [event.target.value]
+			}
 		} else {
-			value = value.filter(val => val !== event.target.value)
+			if (multiple) {
+				value = value.filter(val => val !== event.target.value)
+			} else {
+				value = []
+			}
 		}
 
 		validateRequired()
-		dispatch('select', { value: value })
+		const valueToDispatch = multiple ? value : (value.length > 0 ? value[0] : null)
+		console.log(valueToDispatch, value)
+		dispatch('select', {
+			value: valueToDispatch
+		})
 	}
 
 	afterUpdate(() => validateRequired())
@@ -57,6 +70,8 @@
 
 		dispatch('validate', { valid, message })
 	}
+
+	$: console.log(value)
 </script>
 
 <style>

diff --git a/...client/templates/svelte/src/main/webapp/app/lib/admin/user-management/UserForm.svelte.ejs b/...client/templates/svelte/src/main/webapp/app/lib/admin/user-management/UserForm.svelte.ejs
@@ -161,6 +161,7 @@
 	<SelectControl
 		name="roles"
 		label="Roles"
+		multiple="true"
 		value="{user.authorities}"
 		options="{authorities.map(authority => ({
 			name: authority,

diff --git a/generators/entity-client/files.js b/generators/entity-client/files.js
@@ -1,4 +1,5 @@
 const constants = require('generator-jhipster/generators/generator-constants');
+const generatorUtils = require('generator-jhipster/generators/utils');
 const util = require('../util');
 
 const FRONTEND_APP_DIR = constants.ANGULAR_DIR;
@@ -96,7 +97,32 @@ const svelteFiles = {
 	],
 };
 
+function addEnumerationFiles(generator) {
+	generator.fields.forEach(field => {
+		if (field.fieldIsEnum === true) {
+			const enumInfo = {
+				...generatorUtils.getEnumInfo(field, generator.clientRootFolder),
+				frontendAppName: generator.frontendAppName,
+				packageName: generator.packageName,
+			};
+			if (!generator.skipClient) {
+				const destinationFile = generator.destinationPath(
+					`${FRONTEND_COMPONENTS_DIR}enums/${field.fieldType}.js`
+				);
+				generator.template(
+					`svelte/${FRONTEND_COMPONENTS_DIR}enums/enum.js.ejs`,
+					destinationFile,
+					generator,
+					{},
+					enumInfo
+				);
+			}
+		}
+	});
+}
+
 function writeFiles() {
+	addEnumerationFiles(this);
 	this.writeFilesToDisk(svelteFiles, this, false, `${CLIENT_TEMPLATES_DIR}`);
 
 	util.addEntityToMenu(this, this.entityFolderName, this.entityAngularName, this.entityAngularName);

diff --git a/...ity-client/templates/svelte/cypress/integration/entities/entity/entity-update.spec.js.ejs b/...ity-client/templates/svelte/cypress/integration/entities/entity/entity-update.spec.js.ejs
@@ -214,6 +214,16 @@ _%>
 				<%_ } else { _%>
 		.getByName('<%= field.fieldName %>').check()
 				<%_ } _%>
+			<%_ } else if (field.fieldIsEnum) { _%>
+		.getByName('<%= field.fieldName %>')
+		.click()
+		.getBySel('<%= field.fieldName %>-options')
+		.within(() => {
+			cy.root().get("input[type='checkbox']").eq(0).check()
+			cy.root().get("input[type='checkbox']").eq(1).check()
+		})
+		.getBySel('<%= field.fieldName %>-bg')
+		.click()
 			<%_ } else { _%>
 		.getByName('<%= field.fieldName %>').clear().type('<%= fieldValue %>')
 			<%_ } _%>

diff --git a/...ity-client/templates/svelte/src/main/webapp/app/lib/entities/entity/EntityForm.svelte.ejs b/...ity-client/templates/svelte/src/main/webapp/app/lib/entities/entity/EntityForm.svelte.ejs
@@ -1,5 +1,6 @@
 <%_
 	const containsBooleanField = fields.find(field => field.fieldTypeBoolean);
+	const containsEnumField = fields.find(field => field.fieldIsEnum);
 _%>
 <script>
 	import { createEventDispatcher } from 'svelte'
@@ -11,9 +12,15 @@ _%>
 	import InputControl from '$lib/InputControl.svelte'
 <%_ if (containsBooleanField) { _%>
 	import CheckboxControl from '$lib/CheckboxControl.svelte'
+<%_ } _%>
+<%_ if (containsEnumField) { _%>
+	import SelectControl from '$lib/SelectControl.svelte'
 <%_ } _%>
 	import Form from '$lib/page/Form.svelte'
-		import {
+	<%_	for (field of fields.filter(field => field.fieldIsEnum)) { _%>
+	import <%= field.fieldType %> from '$lib/entities/enums/<%= field.fieldType %>'
+	<%_ } _%>
+	import {
 		formatToDatetimeLocalInput,
 		parseFromDatetimeLocalInput
 	} from '$lib/utils/date'
@@ -37,6 +44,8 @@ _%>
 		<%= entityInstance %>.<%= field.fieldName %> = parseFromDatetimeLocalInput(event.target.value)
 		<%_ } else if (field.fieldTypeBoolean) { _%>
 		<%= entityInstance %>.<%= field.fieldName %> = event.target.checked
+		<%_ } else if (field.fieldIsEnum) { _%>
+		<%= entityInstance %>.<%= field.fieldName %> = event.detail.value
 		<%_ } else { _%>
 		<%= entityInstance %>.<%= field.fieldName %> = event.target.value
 		<%_ } _%>
@@ -133,6 +142,25 @@ _%>
 			><%= field.fieldNameHumanized %></CheckboxControl
 		>
 	</div>
+<%_ } else if (field.fieldIsEnum) { _%>
+	<SelectControl
+		name="<%= field.fieldName %>"
+		label="<%= field.fieldNameHumanized %>"
+		value="{<%= entityInstance %>.<%= field.fieldName %> ? [<%= entityInstance %>.<%= field.fieldName %>] : []}"
+		options="{Object.keys(<%= field.fieldType %>).map(<%= field.fieldName %> => ({
+			name: <%= field.fieldName %>,
+			value: <%= field.fieldName %>,
+		}))}"
+		on:validate="{event => {
+			valid<%= field.fieldNameCapitalized %> = event.detail.valid
+		}}"
+		validations="{[
+		<%_ if (field.fieldValidationRequired) { _%>
+			{ type: 'required', message: 'Select at least one <%= field.fieldNameHumanized %>' },
+		<%_ } _%>
+		]}"
+		on:select="{event => update<%= field.fieldNameCapitalized %>(event)}"
+	/>
 <%_ } _%>
 <%_ } _%>
 	<div class="w-full p-4 flex flex-row justify-center items-center">

diff --git a/generators/entity-client/templates/svelte/src/main/webapp/app/lib/entities/enums/enum.js.ejs b/generators/entity-client/templates/svelte/src/main/webapp/app/lib/entities/enums/enum.js.ejs
@@ -0,0 +1,9 @@
+const <%= enumName %> = {
+<%_ enumValues.forEach((enumValue, index) => { _%>
+	<%= enumValue.name %> : '<%= enumValue.value %>'<% if (index < enumValues.length - 1) { %>,<% } %>
+<%_ }); _%>
+}
+
+Object.freeze(<%= enumName %>)
+
+export default <%= enumName %>