primary key fixes

Author: NomadRazor

README.md

@@ -31,7 +31,8 @@ An Open Source alternative to dbdiagram.io, aiming to have the same basic featur
 + 17. Added import json files
 + 18. Added actions for refs control points (add, reset, delete)
 + 19. Added diagram fit function
-
++ 20. Fix key icon positioning
++ 21. Show key icon for columns in composite PK
 
 ## Architecture - Solution
 

web/src/components/VDbChart/VDbField.vue

@@ -6,7 +6,7 @@
       'db-field':true,
       'db-field__highlight': highlight,
       'db-field__dragging': dragging,
-      'db-field__pk': pk,
+      'db-field__pk': pk || props.indexPk,
       'db-field__unique': unique,
       'db-field__not_null': not_null,
       'db-field__increment': increment,
@@ -29,13 +29,13 @@
           :y="size.height/2">
       {{ name }}
     </text>
-    <svg v-if="pk" class="db-field__pk-icon" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="16"
-    :x="state.name_width"
+    <svg v-if="pk || props.indexPk" class="db-field__pk-icon" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 -960 960 960" width="16"
+    :x="state.name_width+3"
           :y="size.height/4" >
       <path d="M280-400q-33 0-56.5-23.5T200-480q0-33 23.5-56.5T280-560q33 0 56.5 23.5T360-480q0 33-23.5 56.5T280-400Zm0 160q-100 0-170-70T40-480q0-100 70-170t170-70q67 0 121.5 33t86.5 87h352l120 120-180 180-80-60-80 60-85-60h-47q-32 54-86.5 87T280-240Zm0-80q56 0 98.5-34t56.5-86h125l58 41 82-61 71 55 75-75-40-40H435q-14-52-56.5-86T280-640q-66 0-113 47t-47 113q0 66 47 113t113 47Z"/>
     </svg>
     <svg v-if="_enum || note || dbdefault" xmlns="http://www.w3.org/2000/svg" class="db-field__note-icon" height="16" viewBox="0 -960 960 960" width="16" 
-          :x="pk ? state.name_width + 20 : state.name_width"
+          :x="pk || props.indexPk ? state.name_width + 20 : state.name_width+2"
           :y="size.height/4">
 	      <path d="M200-200h360v-200h200v-360H200v560Zm0 80q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v400L600-120H200Zm80-280v-80h200v80H280Zm0-160v-80h400v80H280Zm-80 360v-560 560Z"/>
   </svg>
@@ -84,6 +84,7 @@ import { useChartStore } from '../../store/chart';
     table: Object,
     endpoints: Array,
     _enum: Object,
+    indexPk:Boolean
   })
   const root = ref(null)
 
@@ -112,11 +113,11 @@ import { useChartStore } from '../../store/chart';
     let shift_rect_enum = 0;
     let shift_rect_nn = 0;
     if (props._enum){
-      shift += 12;
+      shift += 13;
       shift_rect_enum += 8;
     } 
     if (props.not_null){
-      shift += 22;
+      shift += 23;
       shift_rect_enum +=30;
       shift_rect_nn += 18;
     } 

web/src/components/VDbChart/VDbTable.vue

@@ -45,6 +45,7 @@
     <g class="db-table-fields">
       <v-db-field v-for="field of fields"
                   v-bind="field"
+                  :indexPk="checkIndexPK(field)"
                   :key="field.id"
                   :width="state.width"
                   @click.passive="onFieldClick($event, field)"
@@ -111,6 +112,12 @@
     state.value.height = 35 + (30 * props.fields.length);
   }
 
+  const checkIndexPK = (field) => {
+    console.log(props.indexes, field) 
+    console.log(props.indexes.filter((x)=> x.columns.filter((y)=> y.type == 'column' && y.value == field.name)))
+    return props.indexes.filter((x)=> x.columns.filter((y)=> y.type == 'column' && y.value == field.name).length > 0 && x.pk).length > 0
+  }
+
   watch(() => props.useSchema, value => {
     updateWidth();
   });

web/src/components/VDbChart/VDbTableTooltip.vue

@@ -11,11 +11,16 @@
     <div class="text-caption"><b>Indexes</b></div>
     <q-list>
       <div v-for="index of table.indexes" class="db-tip-highlights">
-        <span>({{ index.id }}) {{index.name}} </span>
-        <span v-if="index.type" class="enum-value_name">:[{{index.type}}]</span>
-        <br/>
+        <div v-if="index.name || index.type">
+          <span v-if="index.name">{{index.name}} </span>
+          <span v-if="index.type" class="enum-value_name">:[{{index.type}}]</span>
+        </div>
+        
+        
         <div v-if="index.pk || index.unique" class="db-tip-highlights">
-          <span class="enum-class">spec: </span>
+          <span class="enum-class">ID: </span>
+          <span v-if="index.id">{{ index.id }}</span>
+          <span class="enum-class"> spec: </span>
           <span v-if="index.pk">PK</span>
           <span v-if="index.pk && index.unique">|</span>
           <span v-if="index.unique">UNIQUE</span>
@@ -34,7 +39,8 @@
           <span class="enum-class">note: </span>
           <span>{{ index.note }}</span>
         </div>
-      </div>
+    </div>
+    
     </q-list>
   </q-card-section>
 

web/src/css/VDbChart/_tooltips.scss

@@ -48,6 +48,11 @@
   pointer-events: none;
   display: block;
 
+  .db-index-tip{
+    display: flex;
+    flex-direction: row;
+  }
+  
   .enum-value{
     display: block;