feat: InputRefList add button with text (#3203)

* feat: InputRefList add button with text

Co-authored-by: Joris de Keijser <[email protected]>

apps/molgenis-components/src/components/forms/InputRefList.vue

@@ -57,29 +57,27 @@
           </label>
         </div>
       </div>
-      <div v-if="canEdit">
-        <Tooltip value="New entry">
-          <RowButtonAdd
-            id="add-entry"
-            :tableId="tableId"
-            :schemaId="schemaId"
-            @update:newRow="selectNew"
-          />
-        </Tooltip>
-      </div>
-      <div>
-        <ButtonAlt
-          class="pl-0"
+      <div class="m-1">
+        <RowButtonAdd
+          id="add-entry"
+          v-if="canEdit"
+          :label="`Add new ${label}`"
+          :tableId="tableId"
+          :schemaId="schemaId"
+          @update:newRow="selectNew"
+          class="mr-1"
+        />
+        <ButtonOutline
           :class="showMultipleColumns ? 'col-12 col-md-6 col-lg-4' : ''"
           icon="fa fa-search"
           @click="openSelect"
         >
           {{
             count > maxNum
-              ? `show all ${count} options with details`
-              : "more details"
+              ? `Show all ${count} options with details `
+              : "More details "
           }}
-        </ButtonAlt>
+        </ButtonOutline>
       </div>
       <LayoutModal v-if="showSelect" :title="title" @close="closeSelect">
         <template v-slot:body>
@@ -119,7 +117,7 @@ import {
   deepClone,
   deepEqual,
 } from "../utils";
-import ButtonAlt from "./ButtonAlt.vue";
+import ButtonOutline from "./ButtonOutline.vue";
 import FormGroup from "./FormGroup.vue";
 import Tooltip from "./Tooltip.vue";
 import BaseInput from "./baseInputs/BaseInput.vue";
@@ -142,7 +140,7 @@ export default {
     TableSearch,
     LayoutModal,
     FormGroup,
-    ButtonAlt,
+    ButtonOutline,
     Spinner,
     RowButtonAdd,
     Tooltip,

apps/molgenis-components/src/components/tables/RowButtonAdd.vue

@@ -1,6 +1,9 @@
 <template>
   <span>
-    <RowButton type="add" @add="isModalShown = true" />
+    <ButtonOutline v-if="label !== ''" @click="isModalShown = true">
+      {{ label }}
+    </ButtonOutline>
+    <RowButton v-else type="add" @add="isModalShown = true" />
     <EditModal
       v-if="isModalShown"
       :id="id + 'add-modal'"
@@ -11,67 +14,57 @@
       :visibleColumns="visibleColumns"
       :applyDefaultValues="true"
       @close="handleClose"
-      @update:newRow="(event) => $emit('update:newRow', event)"
+      @update:newRow="(event:any) => $emit('update:newRow', event)"
     />
   </span>
 </template>
 
-<script>
+<script setup lang="ts">
 import RowButton from "./RowButton.vue";
-import { defineAsyncComponent } from "vue";
+import ButtonOutline from "../forms/ButtonOutline.vue";
+import { ref } from "vue";
 
-export default {
-  name: "RowButtonAdd",
-  components: {
-    RowButton,
-    EditModal: defineAsyncComponent(() => import("../forms/EditModal.vue")),
-  },
-  props: {
-    id: {
-      type: String,
-      required: true,
-    },
-    tableId: {
-      type: String,
-      required: true,
-    },
-    schemaId: {
-      type: String,
-      required: false,
-    },
-    defaultValue: {
-      type: Object,
-      required: false,
-    },
-    visibleColumns: {
-      type: Array,
-      required: false,
-      default: () => null,
-    },
-  },
-  data() {
-    return {
-      isModalShown: false,
-    };
-  },
-  methods: {
-    handleClose() {
-      this.isModalShown = false;
-      this.$emit("close");
-    },
-  },
-};
+withDefaults(
+  defineProps<{
+    id: string;
+    tableId: string;
+    schemaId: string;
+    label?: string;
+    defaultValue?: Record<string, any>;
+    visibleColumns?: any[] | null;
+  }>(),
+  { label: "", visibleColumns: null }
+);
+
+let isModalShown = ref(false);
+
+const emit = defineEmits(["close", "update:newRow"]);
+
+function handleClose() {
+  isModalShown.value = false;
+  emit("close");
+}
 </script>
 
 <docs>
 <template>
   <div>
-    <label for="row-add-btn-sample">composition of RowButton and EditModal configured for row add/insert</label>
+    <label for="row-add-btn-sample"
+      >composition of RowButton and EditModal configured for row
+      add/insert</label
+    >
     <div>
       <RowButtonAdd
-          id="row-add-btn-sample"
-          tableId="Pet"
-          schemaId="pet store"
+        id="row-add-btn-sample"
+        tableId="Pet"
+        schemaId="pet store"
+      />
+      <br />
+      <RowButtonAdd
+        id="row-add-btn-sample"
+        tableId="Pet"
+        label="Add a new pet"
+        schemaId="pet store"
       />
     </div>
   </div>