implement control to bulk add entities

src/crate-builder/RenderEntity/Add.component.vue

@@ -11,6 +11,7 @@
             :types="types"
             :selected-type="data.addType"
             @add="add"
+            @bulkAdd="bulkAdd"
             @close="close"
         />
 
@@ -88,6 +89,13 @@
                 @save:property="createProperty"
             />
         </div>
+        <div v-else-if="data.addType === 'bulkAdd'">
+            <BulkAddComponent
+                :types="types"
+                :simple-types="data.simpleTypes"
+                @create:entity="createEntity"
+            ></BulkAddComponent>
+        </div>
         <div v-else class="describo-property-type-entity">
             <div
                 class="p-1 flex flex-row space-x-2 divide-y divide-gray-300 text-gray-600"
@@ -126,6 +134,7 @@ import SelectObjectComponent from "../primitives/SelectObject.component.vue";
 import GeoComponent from "../primitives/Geo.component.vue";
 import AutocompleteComponent from "./AutoComplete.component.vue";
 import BooleanComponent from "../primitives/Boolean.component.vue";
+import BulkAddComponent from "./BulkAdd.component.vue";
 import { reactive, computed, inject } from "vue";
 import { profileManagerKey } from "./keys.js";
 import { $t } from "../i18n";
@@ -187,6 +196,9 @@ function add({ type }) {
     data.addType = type;
     data.localisedAddType = pm.value?.getTypeLabel(type);
 }
+function bulkAdd() {
+    data.addType = "bulkAdd";
+}
 function createProperty(data) {
     // console.debug("Add Component : emit(create:property)", data);
     $emit("create:property", { ...data, propertyId: props.definition.id });

src/crate-builder/RenderEntity/AddControl.component.vue

@@ -15,12 +15,25 @@
                  {{ getTypeLabelFromProfile(type) }}
             </el-button>
         </div>
+        <el-button
+            @click="bulkAdd"
+            type="primary"
+            class="focus:outline-none focus:border-2 focus:border-green-600 m-1"
+        >
+            <div v-show="!selectedType || selectedType !== 'bulkAdd'">
+                <FontAwesomeIcon :icon="faAsterisk"></FontAwesomeIcon>
+            </div>
+            <div v-show="selectedType === 'bulkAdd'">
+                <FontAwesomeIcon :icon="faTimes"></FontAwesomeIcon>
+            </div>
+            &nbsp; Bulk Add
+        </el-button>
     </div>
 </template>
 
 <script setup>
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import { faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faTimes, faAsterisk } from "@fortawesome/free-solid-svg-icons";
 import { ElButton } from "element-plus";
 import { computed, inject } from "vue";
 import { profileManagerKey } from "./keys.js";
@@ -36,7 +49,7 @@ const props = defineProps({
     },
 });
 
-const emit = defineEmits(["add", "close"]);
+const $emit = defineEmits(["add", "bulkAdd", "close"]);
 let selectedType = computed(() => props.selectedType);
 let types = computed(() => props.types);
 
@@ -45,9 +58,16 @@ function getTypeLabelFromProfile(type) {
 }
 function toggle(type) {
     if (props.selectedType === type) {
-        emit("close");
+        $emit("close");
     } else {
-        emit("add", { type });
+        $emit("add", { type });
+    }
+}
+function bulkAdd() {
+    if (props.selectedType === "bulkAdd") {
+        $emit("close");
+    } else {
+        $emit("bulkAdd");
     }
 }
 </script>

src/crate-builder/RenderEntity/BulkAdd.component.vue

@@ -0,0 +1,99 @@
+<template>
+    <div class="flex flex-col space-y-2 m-1">
+        <div class="my-1 text-lg text-center">
+            Note beforehand: This does not lookup existing entities.
+        </div>
+        <div>
+            @type
+            <el-select v-model="selectedType" placeholder="Select a type" clearable>
+                <el-option
+                    v-for="type of props.types.filter(
+                        (t) => !props.simpleTypes.includes(t) && t !== 'ANY'
+                    )"
+                    :key="type"
+                    :label="type"
+                    :value="type"
+                ></el-option>
+            </el-select>
+        </div>
+        <div class="flex flex-row space-x-1">
+            <div class="w-1/2">@id</div>
+            <div class="w-1/2">name</div>
+            <div class="w-12"></div>
+        </div>
+        <div v-for="(row, idx) of data" class="flex flex-row space-x-1">
+            <el-input v-model="row.id"></el-input>
+            <el-input v-model="row.name"></el-input>
+            <div>
+                <el-button type="danger" @click="deleteRow(idx)">
+                    <FontAwesomeIcon :icon="faTrash"></FontAwesomeIcon>
+                </el-button>
+            </div>
+        </div>
+        <div class="flex flex-row place-content-between">
+            <div>
+                <el-button type="primary" @click="addRow">
+                    <FontAwesomeIcon :icon="faPlus"> </FontAwesomeIcon>&nbsp; Add row
+                </el-button>
+            </div>
+            <div>
+                <el-button type="primary" @click="createEntities" :disabled="!selectedType">
+                    Create these entities</el-button
+                >
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faTrash, faPlus } from "@fortawesome/free-solid-svg-icons";
+import { ElButton, ElInput, ElSelect, ElOption } from "element-plus";
+import { ref } from "vue";
+
+const props = defineProps({
+    types: {
+        type: [String, Array],
+        required: true,
+    },
+    simpleTypes: {
+        type: Array,
+        required: true,
+    },
+});
+const $emit = defineEmits(["create:entity"]);
+
+type DataRow = {
+    id: string;
+    name: string;
+};
+const selectedType = ref();
+const data = ref<DataRow[]>([
+    { id: "", name: "" },
+    { id: "", name: "" },
+    { id: "", name: "" },
+    { id: "", name: "" },
+    { id: "", name: "" },
+]);
+
+function addRow() {
+    data.value.push({ id: "", name: "" });
+}
+
+function deleteRow(n: number) {
+    data.value.splice(n, 1);
+}
+
+function createEntities() {
+    for (let entity of data.value) {
+        if (entity.id && entity.name)
+            $emit("create:entity", {
+                json: {
+                    "@id": entity.id,
+                    "@type": selectedType.value,
+                    name: entity.name,
+                },
+            });
+    }
+}
+</script>