Added checkbox UI component to change required props in Schema Diagram (#899)

* Changes made in the parent files

* apply formatting changes

* css changed , console removed and targeted just the required field

* apply formatting changes

* final comit

* final comit

* apply formatting changes

* adjust style to avoid linebreak

* apply formatting changes

---------

Co-authored-by: Devesh0129 <[email protected]>
Co-authored-by: Felix Neubauer <[email protected]>
Co-authored-by: Logende <[email protected]>

Author: Devesh0129

meta_configurator/src/components/panels/schema-diagram/SchemaObjectAttribute.vue

@@ -37,9 +37,18 @@ const emit = defineEmits<{
     attributeData: SchemaObjectAttributeData,
     newType: AttributeTypeChoice
   ): void;
+  (
+    e: 'update_attribute_required',
+    attributeData: SchemaObjectAttributeData,
+    required: boolean
+  ): void;
   (e: 'delete_element', objectData: SchemaElementData): void;
 }>();
 
+function updateRequired() {
+  emit('update_attribute_required', props.data, props.data.required);
+}
+
 const attrName = ref(props.data.name);
 const selectedType: Ref<AttributeTypeChoice | undefined> = ref(
   determineTypeChoiceBySchema(props.typeChoices, props.data.schema)
@@ -98,7 +107,7 @@ function getHandleTop() {
       <span class="vue-flow__node-schemaattribute-type">: {{ props.data.typeDescription }}</span>
     </div>
 
-    <div v-else>
+    <div v-else class="vue-flow-attribute-edit-row">
       <InputText
         type="text"
         class="vue-flow-attribute-input-dimensions"
@@ -109,29 +118,40 @@ function getHandleTop() {
         @dblclick.stop
         @keydown.stop
         @keyup.enter="updateAttributeName" />
-      <span class="text-red-600">{{ props.data.required ? '*' : '' }}</span>
-
-      <Select
-        class="vue-flow-attribute-dropdown"
-        v-model="selectedType"
-        :options="typeChoices"
-        optionLabel="label"
-        @mousedown.stop
-        @keydown.stop
-        @click.stop
-        @dblclick.stop
-        placeholder="Select Type" />
 
-      <Button
-        class="vue-flow-attribute-button vue-flow-attribute-input-dimensions"
-        size="small"
-        v-tooltip.bottom="'Delete Property'"
-        @mousedown.stop
-        @click.stop
-        @dblclick.stop
-        @click="_ => deleteAttribute()">
-        <FontAwesomeIcon :icon="'fa-trash fa-solid'" />
-      </Button>
+      <div class="vue-flow-attribute-inline">
+        <input
+          type="checkbox"
+          class="vue-flow-required-checkbox"
+          v-model="props.data.required"
+          @change="updateRequired"
+          @mousedown.stop
+          @click.stop
+          @dblclick.stop
+          @keydown.stop />
+
+        <Select
+          class="vue-flow-attribute-dropdown"
+          v-model="selectedType"
+          :options="typeChoices"
+          optionLabel="label"
+          @mousedown.stop
+          @keydown.stop
+          @click.stop
+          @dblclick.stop
+          placeholder="Select Type" />
+
+        <Button
+          class="vue-flow-attribute-button vue-flow-attribute-input-dimensions"
+          size="small"
+          v-tooltip.bottom="'Delete Property'"
+          @mousedown.stop
+          @click.stop
+          @dblclick.stop
+          @click="_ => deleteAttribute()">
+          <FontAwesomeIcon :icon="'fa-trash fa-solid'" />
+        </Button>
+      </div>
     </div>
 
     <Handle
@@ -144,6 +164,22 @@ function getHandleTop() {
 </template>
 
 <style>
+.vue-flow-required-checkbox {
+  margin: 0 4px;
+  transform: scale(0.8);
+}
+
+.vue-flow-attribute-edit-row {
+  display: flex;
+  align-items: center;
+}
+
+.vue-flow-attribute-inline {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+}
+
 .vue-flow__node-schemaattribute {
   padding: 0;
 }

meta_configurator/src/components/panels/schema-diagram/SchemaObjectNode.vue

@@ -47,12 +47,21 @@ const emit = defineEmits<{
     newType: AttributeTypeChoice
   ): void;
   (e: 'add_attribute', objectData: SchemaObjectNodeData): void;
+  (
+    e: 'update_attribute_required',
+    attributeData: SchemaObjectAttributeData,
+    required: boolean
+  ): void;
 }>();
 
 const objectName = ref(props.data.name || '');
 
 const settings = useSettings();
 
+function updateAttributeRequired(attributeData: SchemaObjectAttributeData, required: boolean) {
+  emit('update_attribute_required', attributeData, required);
+}
+
 function isObjectEditable() {
   return (isHighlighted() || isAttributeHighlighted()) && settings.value.schemaDiagram.editMode;
 }
@@ -212,6 +221,7 @@ function isAttributeHighlighted() {
       @select_element="clickedAttribute"
       @update_attribute_name="updateAttributeName"
       @update_attribute_type="updateAttributeType"
+      @update_attribute_required="updateAttributeRequired"
       @delete_element="deleteElement" />
 
     <div v-if="isObjectEditable()">

meta_configurator/src/components/panels/schema-diagram/VueFlowPanel.vue

@@ -313,6 +313,32 @@ function updateAttributeName(attributeData: SchemaNodeData, oldName: string, new
   // TODO: when renaming happens, also force update in the GUI
 }
 
+function updateAttributeRequired(attributeData: SchemaObjectAttributeData, required: boolean) {
+  const attributePath = attributeData.absolutePath;
+  const attributeName = attributeData.name;
+
+  const parentObjectPath = attributePath.slice(0, -2);
+  const parentObject = structuredClone(schemaData.dataAt(parentObjectPath));
+
+  if (!parentObject.required) {
+    parentObject.required = [];
+  }
+
+  const requiredList = parentObject.required;
+
+  const index = requiredList.indexOf(attributeName);
+
+  if (required && index === -1) {
+    requiredList.push(attributeName);
+  }
+
+  if (!required && index !== -1) {
+    requiredList.splice(index, 1);
+  }
+
+  schemaData.setDataAt(parentObjectPath, parentObject);
+}
+
 function updateAttributeType(
   attributeData: SchemaObjectAttributeData,
   newType: AttributeTypeChoice
@@ -428,6 +454,7 @@ function updateExternalReferenceValue(
           @update_object_name="updateObjectOrEnumName"
           @update_attribute_name="updateAttributeName"
           @update_attribute_type="updateAttributeType"
+          @update_attribute_required="updateAttributeRequired"
           @delete_element="deleteElement"
           @add_attribute="addAttribute"
           @extract_inlined_element="extractInlinedElement"