Merge pull request #336 from Breeding-Insight/feature/BI-1805-2

BI-1805 - Conditionally Hide Edit Form and Buttons
Breeding-Insight · Oct 5, 2023 · 79659a0 · 79659a0
2 parents 664e6be + b0e2a7e
commit 79659a0
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 49 deletions.
diff --git a/src/components/forms/DataForm.vue b/src/components/forms/DataForm.vue
@@ -24,6 +24,7 @@
     <div class="columns">
       <div class="column is-whole has-text-centered buttons">
         <button
+            v-if="showSaveButton"
             data-testid="save"
             type="button"
             class="button is-primary"
@@ -65,6 +66,8 @@ export default class DataForm extends Vue {
   @Prop({default: "Save"})
   saveButtonLabel?: string
   @Prop({default: true})
+  showSaveButton?: boolean
+  @Prop({default: true})
   showCancelButton?: boolean
 
   protected record!: Object;

diff --git a/src/components/tables/expandableTable/ExpandableTable.vue b/src/components/tables/expandableTable/ExpandableTable.vue
@@ -79,11 +79,14 @@
       </template>
 
       <template v-slot:detail="props">
-        <EditDataRowForm class="mb-0"
-                         v-if="editable"
-                         v-bind:data-form-state="dataFormState"
-                         v-on:submit="validateAndSubmit(props.row)"
-                         v-on:cancel="cancelEditClicked(props.row)"
+        <EditDataRowForm
+          v-if="editable"
+          class="mb-0"
+          v-bind:data-form-state="dataFormState"
+          v-bind:show-save-button="isSaveButtonVisible(props.row)"
+          v-bind:show-cancel-button="isCancelButtonVisible(props.row)"
+          v-on:submit="validateAndSubmit(props.row)"
+          v-on:cancel="cancelEditClicked(props.row)"
         >
           <slot
               v-bind:editData="props.row.editData"
@@ -134,6 +137,10 @@ export default class ExpandableTable extends Mixins(ValidationMixin) {
   @Prop()
   rowArchivable!: Function;
   @Prop()
+  saveButtonVisible?: Function;
+  @Prop()
+  cancelButtonVisible?: Function;
+  @Prop()
   archivable!: boolean;
   @Prop()
   pagination!: PaginationController;
@@ -248,6 +255,16 @@ export default class ExpandableTable extends Mixins(ValidationMixin) {
     return ((typeof this.rowArchivable === "function") ? this.rowArchivable(row) : true) && this.archivable;
   }
 
+  isSaveButtonVisible(row: any) {
+    // Visible by default, evaluate saveButtonVisible on row if provided.
+    return ((typeof this.saveButtonVisible === "function") ? this.saveButtonVisible(row) : true);
+  }
+
+  isCancelButtonVisible(row: any) {
+    // Visible by default, evaluate cancelButtonVisible on row if provided.
+    return ((typeof this.cancelButtonVisible === "function") ? this.cancelButtonVisible(row) : true);
+  }
+
   paginate(event: any) {
     this.pagination.updatePage(event);
   }

diff --git a/src/views/germplasm/BreedingMethods.vue b/src/views/germplasm/BreedingMethods.vue
@@ -133,6 +133,8 @@
       v-bind:row-validations="newMethodValidations"
       v-bind:archivable="$ability.can('update', 'ProgramConfiguration')"
       v-bind:row-archivable="isRowArchivable"
+      v-bind:save-button-visible="showButtons"
+      v-bind:cancel-button-visible="showButtons"
       v-bind:deactivate-link-text="'Delete'"
       v-on:submit="updateMethod($event)"
       v-on:show-error-notification="$emit('show-error-notification', $event)"
@@ -264,54 +266,55 @@
               <AlertTriangleIcon
                 size="1.2x"
                 class="has-vertical-align-middle"
-              /> Breeding method is in use. Deletion disabled.
+              /> Breeding method is in use. Editing disabled.
             </div>
           </div>
         </div>
-
-        <div class="columns">
-          <div class="column is-one-fourth">
-            <BasicInputField
-              v-model="editData.name"
-              v-bind:validations="validations.name"
-              v-bind:field-name="'Name'"
-              v-bind:field-help="''"
-            />
-          </div>
-          <div class="column is-one-fourth">
-            <BasicInputField
-              v-model="editData.abbreviation"
-              v-bind:validations="validations.abbreviation"
-              v-bind:field-name="'Abbreviation'"
-              v-bind:field-help="'No more than 3 characters'"
-            />
-          </div>
-          <div class="column is-one-fourth">
-            <BasicInputField
-              v-model="editData.description"
-              v-bind:validations="validations.description"
-              v-bind:field-name="'Description'"
-            />
-          </div>
-        </div>
-        <div class="columns">
-          <div class="column is-one-fourth">
-            <BasicSelectField
-              v-model="editData.category"
-              v-bind:selected-id="editData.category"
-              v-bind:validations="validations.category"
-              v-bind:options="categories"
-              v-bind:field-name="'Category'"
-            />
+        <div v-else>
+          <div class="columns">
+            <div class="column is-one-fourth">
+              <BasicInputField
+                v-model="editData.name"
+                v-bind:validations="validations.name"
+                v-bind:field-name="'Name'"
+                v-bind:field-help="''"
+              />
+            </div>
+            <div class="column is-one-fourth">
+              <BasicInputField
+                v-model="editData.abbreviation"
+                v-bind:validations="validations.abbreviation"
+                v-bind:field-name="'Abbreviation'"
+                v-bind:field-help="'No more than 3 characters'"
+              />
+            </div>
+            <div class="column is-one-fourth">
+              <BasicInputField
+                v-model="editData.description"
+                v-bind:validations="validations.description"
+                v-bind:field-name="'Description'"
+              />
+            </div>
           </div>
-          <div class="column is-one-fourth">
-            <BasicSelectField
-              v-model="editData.geneticDiversity"
-              v-bind:selected-id="editData.geneticDiversity"
-              v-bind:validations="validations.geneticDiversity"
-              v-bind:options="diversities"
-              v-bind:field-name="'Genetic Diversity'"
-            />
+          <div class="columns">
+            <div class="column is-one-fourth">
+              <BasicSelectField
+                v-model="editData.category"
+                v-bind:selected-id="editData.category"
+                v-bind:validations="validations.category"
+                v-bind:options="categories"
+                v-bind:field-name="'Category'"
+              />
+            </div>
+            <div class="column is-one-fourth">
+              <BasicSelectField
+                v-model="editData.geneticDiversity"
+                v-bind:selected-id="editData.geneticDiversity"
+                v-bind:validations="validations.geneticDiversity"
+                v-bind:options="diversities"
+                v-bind:field-name="'Genetic Diversity'"
+              />
+            </div>
           </div>
         </div>
       </template>
@@ -615,6 +618,10 @@ export default class BreedingMethods extends ProgramsBase {
     return false;
   }
 
+  showButtons(row: TableRow<BreedingMethod>) {
+    return !this.isMethodInUse(row.data);
+  }
+
   filterByScope(row: TableRow<BreedingMethod>, input: string) {
     if(input === 'SYSTEM') {
       return row.data.programId === undefined;