Added: Press create button only if mandatory fields are not empty

samply · Dec 19, 2024 · 719dc51 · 719dc51
1 parent 4a8a194
commit 719dc51
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,7 +4,7 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## [1.1.0 - 2024-12-13]
+## [1.1.0 - 2024-12-19]
 ### Added
 - Dockerfile
 - Single Spa
@@ -80,6 +80,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - Cancel Reject button
 - Archive button requires message too
 - Current User in Project View
+- Press create button only if mandatory fields are not empty
 
 ### Changed
 - Rename accept and reject bridgehead state buttons (authorize/revoke)

diff --git a/src/components/ProjectManagerButton.vue b/src/components/ProjectManagerButton.vue
@@ -22,9 +22,11 @@ export default class ProjectManagerButton extends Vue {
   @Prop() readonly buttonClass!: string;
   @Prop() readonly withMessage!: boolean;
   @Prop() readonly visibility?: boolean;
+  @Prop({ type: Boolean, default: false }) readonly isDisabled!: boolean;
   @Prop() readonly context!: ProjectManagerContext;
   @Prop() readonly params: Map<string, string> = new Map();
   @Prop({type: Function, required: true}) readonly callRefrehContext!: () => void;
+  @Prop({ type: String, default: '' }) readonly tooltipText!: string;
 
   isActive = false;
   inputText = '';
@@ -71,16 +73,20 @@ export default class ProjectManagerButton extends Vue {
 <template>
   <span v-if="isActive && withMessage" class="pm-button">
     <input type="text" v-model="inputText" :class="{ 'hidden': hideInput }" class="inputfield" placeholder="optional message">
-    <button :class="[buttonClass, 'button-spacing', {'hidden': !hideInput }]" @click="toggleVisibility">{{ text }}</button>
-    <button :class="[buttonClass, 'button-spacing', {'hidden': hideInput }]" @click="handleButtonClick">Submit</button>
-    <button v-if="!hideInput" :class="[buttonClass, 'button-spacing']" @click="handleCancelClick">Cancel</button>
+    <div :title="tooltipText">
+      <button :class="[buttonClass, 'button-spacing', {'hidden': !hideInput }]" @click="toggleVisibility" :disabled="isDisabled" >{{ text }}</button>
+    </div>
+    <button :class="[buttonClass, 'button-spacing', {'hidden': hideInput }]" @click="handleButtonClick" :disabled="isDisabled">Submit</button>
+    <button v-if="!hideInput" :class="[buttonClass, 'button-spacing']" @click="handleCancelClick" :disabled="isDisabled" >Cancel</button>
     <label v-if="action2" class="pm-checkbox">
       <input type="checkbox" v-model="checkboxChecked" />
       {{ text2 }}
     </label>
   </span>
   <span v-if="isActive && !withMessage" class="pm-button">
-    <button :class="buttonClass" @click="handleButtonClick">{{ text }}</button>
+    <div :title="tooltipText">
+      <button :class="buttonClass" @click="handleButtonClick" :disabled="isDisabled" >{{ text }}</button>
+    </div>
     <label v-if="action2" class="pm-checkbox">
       <br>
       <input type="checkbox" v-model="checkboxChecked" />

diff --git a/src/components/ProjectView.vue b/src/components/ProjectView.vue
@@ -167,6 +167,8 @@
                                             :context="context" :call-refreh-context="refreshContext" text="Create"
                                             button-class="btn btn-success mr-2"
                                             :with-message="false"
+                                            :is-disabled="!hasProjectAllMandatoryFields"
+                                            :tooltip-text="tooltipTextForCreateButton"
                                             :project-manager-backend-service="projectManagerBackendService"/>
                       <ProjectManagerButton v-if="project?.state === 'DRAFT' "
                                             :module="Module.PROJECT_STATE_MODULE"
@@ -391,7 +393,9 @@ export default defineComponent({
       buttonGroups: [] as boolean[],
       isButtonGroupVisible: false,
       actionButtons: [] as ActionButtonGroup[],
-      currentUser: undefined as User | undefined
+      currentUser: undefined as User | undefined,
+      hasProjectAllMandatoryFields: false,
+      tooltipTextForCreateButton: ''
     };
   },
   watch: {
@@ -417,6 +421,8 @@ export default defineComponent({
     },
     existsApplicationForm(newValue, oldValue){
       this.extendedExplanations = this.fetchExtendedExplanations();
+      this.hasProjectAllMandatoryFields = this.fetchIfProjectHasAllMandatoryFields();
+      this.tooltipTextForCreateButton = this.fetchTooltipTextForCreateButton();
     },
     existsVotum(newValue, oldValue){
       this.extendedExplanations = this.fetchExtendedExplanations();
@@ -500,7 +506,31 @@ export default defineComponent({
       // TODO: Control page size
       params.set('page', '' + 0);
       params.set('page-size', '' + 10);
-      this.initializeData(Module.PROJECT_BRIDGEHEAD_MODULE, Action.FETCH_PROJECT_ACTION, params, 'project');
+      await this.initializeData(Module.PROJECT_BRIDGEHEAD_MODULE, Action.FETCH_PROJECT_ACTION, params, 'project');
+    },
+
+    fetchIfProjectHasAllMandatoryFields(): boolean {
+      return Boolean(this.project && this.project.label && this.project.query && this.bridgeheads && this.project.type &&
+          this.project.queryFormat && this.project.outputFormat && this.project.templateId && this.existsApplicationForm);
+    },
+
+    fetchTooltipTextForCreateButton() {
+      let result = '';
+      if (this.project){
+        result = this.addMissingField(result, 'title', this.project.label);
+        result = this.addMissingField(result, 'query', this.project.query);
+        result = this.addMissingField(result, 'bridgeheads', this.bridgeheads);
+        result = this.addMissingField(result, 'type', this.project.type);
+        result = this.addMissingField(result, 'query format', this.project.queryFormat);
+        result = this.addMissingField(result, 'output format', this.project.outputFormat);
+        result = this.addMissingField(result, 'template id', this.project.templateId);
+        result = this.addMissingField(result, 'application form', this.existsApplicationForm);
+      }
+      return (result.length > 0) ? 'Missing fields: ' + result : result;
+    },
+
+    addMissingField(result: string, field: string, value: any): string{
+      return (!value) ? ((result.length > 0) ? ', ' : '') + field : result;
     },
 
     convertDate(date: Date) {
@@ -509,6 +539,8 @@ export default defineComponent({
 
     async initializeProjectRelatedData() {
       if (this.project) {
+        this.hasProjectAllMandatoryFields = this.fetchIfProjectHasAllMandatoryFields();
+        this.tooltipTextForCreateButton = this.fetchTooltipTextForCreateButton();
         this.existsDraftDialog = (this.project.state === 'DRAFT' && keycloak.getEmail() === this.project.creatorEmail);
         await Promise.all([
           this.initializeDataInCallback(Module.PROJECT_BRIDGEHEAD_MODULE, Action.FETCH_PROJECT_BRIDGEHEADS_ACTION, new Map(), async (result: Bridgehead[]) => {