Merge pull request #1766 from FAIRsharing/status_in_editing_1763

Added a status icon for records in the edit form.  #1763

Author: knirirr

src/components/Editor/EditRelationships.vue

@@ -97,6 +97,11 @@
                       </span>
                     </v-list-item-content>
                     <v-list-item-icon>
+                      <record-status
+                        :record="record"
+                        show-only-status="true"
+                        in-edit-form="true"
+                      />
                       <v-btn
                         icon
                         class="blue white--text mr-2"
@@ -398,14 +403,15 @@
     import { isEqual, capitalize } from "lodash"
     import stringUtils from '@/utils/stringUtils';
     import Record from "@/views/Records/Record";
+    import RecordStatus from "@/components/Records/Shared/RecordStatus";
     import Loaders from "../Navigation/Loaders";
     import Icon from "@/components/Icon";
     import Alerts from "./Alerts";
     import { isRequired } from "@/utils/rules.js"
 
     export default {
         name: "EditRelationships",
-        components: {Alerts, Icon, Loaders, Record},
+        components: {Alerts, Icon, Loaders, Record, RecordStatus},
         mixins: [stringUtils],
         data(){
           return {

src/components/Records/Shared/RecordStatus.vue

@@ -41,7 +41,7 @@
     <!-- if only shows status and nothing else   -->
     <div
       v-if="showOnlyStatus && showStatus"
-      class="circle-holder"
+      :class="inEditForm ? 'circle-holder-editing' : 'circle-holder'"
     >
       <v-tooltip
         v-if="showStatus"
@@ -74,6 +74,7 @@ export default {
     record: {default: null, type: Object},
     showStatus: {default: true, type: Boolean},
     showOnlyStatus: {default: false, type: Boolean},
+    inEditForm: {default: false, type: Boolean},
   },
   data() {
     return {
@@ -189,4 +190,19 @@ export default {
   }
 }
 
+.circle-holder-editing {
+  padding-right: 8px;
+  border-radius: 50%;
+  -moz-border-radius: 50%;
+  -webkit-border-radius: 50%;
+  .circle {
+    height: 36px;
+    width: 36px;
+    border-radius: 36px;
+    -moz-border-radius: 36px;
+    -webkit-border-radius: 36px;
+  }
+}
+
+
 </style>