Feature/lxl 4504 cataloguing items

vue-client/src/App.vue

@@ -1138,4 +1138,34 @@ h1 {
   }
 }
 
+// ------------ HISTORY --------------
+
+.is-diff-added {
+  @base-color: @form-add;
+  background-color: @base-color !important;
+}
+
+.is-diff-removed {
+  @base-color: @remove;
+  border: 1px dashed !important;
+  border-color: @base-color !important;
+  background-color: @form-remove !important;
+}
+
+.is-diff-modified {
+  @base-color: @brand-primary-orange;
+  border: 1px dashed !important;
+  border-color: @base-color !important;
+  background-color: @form-modified !important;
+}
+
+.icon-removed {
+  transform: translateY(-5%);
+  color: @remove;
+}
+
+.icon-added {
+  position: relative;
+  color: #428BCAFF; // @brand-primary base.
+}
 </style>

vue-client/src/components/inspector/copy-attributes.vue

@@ -0,0 +1,71 @@
+<script>
+import ReverseRelations from '@/components/inspector/reverse-relations.vue';
+import IdLabel from '@/components/shared/id-label.vue';
+
+export default {
+  name: 'copy-attributes',
+  props: {
+    uri: {
+      type: String,
+      default: '',
+    },
+    focusData: {
+      type: Object,
+      default: null,
+    },
+    isLibrisResource: {
+      type: Boolean,
+      default: false,
+    },
+    diffIdAdded: {
+      type: Boolean,
+      default: false,
+    },
+    diffIdRemoved: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    'id-label': IdLabel,
+    'reverse-relations': ReverseRelations,
+  },
+  data() {
+    return {
+      totalReverseCount: -1,
+    };
+  },
+  methods: {
+    allCount(value) {
+      this.totalReverseCount = value;
+    },
+  },
+};
+
+</script>
+
+<template>
+  <div class="Attributes">
+    <id-label
+      :uri="this.uri"
+      :is-libris-resource="this.isLibrisResource"
+      :diff-added="this.diffIdAdded"
+      :diff-removed="this.diffIdRemoved"
+    />
+    <div class="Attributes-relationsContainer">
+      <!--TODO: Make this work when it is possible to link to copies from the cat. client.-->
+      <reverse-relations
+        @numberOfRelations="allCount"
+        :main-entity="focusData"
+        :compact="false" />
+    </div>
+  </div>
+</template>
+<style lang="less">
+  .Attributes {
+    display: flex;
+    &-relationsContainer {
+      justify-content: flex-end;
+    }
+  }
+</style>

vue-client/src/components/inspector/field.vue

@@ -1130,37 +1130,6 @@ export default {
     background-color: hsl(hue(@base-color), 50%, 95%);
   }
 
-  &.is-diff-added {
-    @base-color: @form-add;
-    border: 1px solid;
-    border-color: @brand-primary;
-    background-color: @base-color;
-  }
-
-  &.is-diff-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-remove;
-  }
-
-  &.is-diff-modified {
-    @base-color: @brand-primary-orange;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-modified;
-  }
-
-  .icon-removed {
-    transform: translateY(-5%);
-    color: @remove;
-  }
-
-  .icon-added {
-    position: relative;
-    color: #428BCAFF; // @brand-primary base.
-  }
-
   &.is-highlighted { // replace 'is-lastadded' & 'is-marked' with this class
     background-color: @form-highlight;
   }

vue-client/src/components/inspector/item-entity.vue

@@ -211,8 +211,8 @@ export default {
             'is-cache': recordType === 'CacheRecord',
             'is-placeholder': recordType === 'PlaceholderRecord',
             'is-ext-link': !isLibrisResource,
-            'is-removed': diffRemoved,
-            'is-added': diffAdded,
+            'is-diff-removed': diffRemoved,
+            'is-diff-added': diffAdded,
           }">
           <span class="ItemEntity-history-icon" v-if="diffRemoved">
             <i class="fa fa-trash-o icon--sm icon-removed" />
@@ -346,18 +346,6 @@ export default {
     animation-name: pulse;
   }
 
-  &.is-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-remove;
-  }
-
-  &.is-added {
-    @base-color: @form-add;
-    background-color: @base-color;
-  }
-
   &.expanded {
     margin: 0 0 2em 0;
   }

vue-client/src/components/inspector/item-local.vue

@@ -9,6 +9,8 @@ import * as LayoutUtil from '@/utils/layout';
 import { translatePhrase, labelByLang, capitalize } from '@/utils/filters';
 import PropertyAdder from '@/components/inspector/property-adder.vue';
 import EntityAction from '@/components/inspector/entity-action.vue';
+import IdLabel from '@/components/shared/id-label.vue';
+import CopyAttributes from '@/components/inspector/copy-attributes.vue';
 import SearchWindow from './search-window.vue';
 import ItemMixin from '../mixins/item-mixin.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
@@ -150,6 +152,15 @@ export default {
       }
       return false;
     },
+    canAddId() {
+      if (this.fieldKey === 'hasComponent' && this.isHolding && !this.hasId) {
+        return true;
+      }
+      return false;
+    },
+    hasId() {
+      return this.item.hasOwnProperty('@id');
+    },
     getPath() {
       if (this.inArray) {
         return `${this.parentPath}[${this.index}]`;
@@ -181,6 +192,14 @@ export default {
       }
       return false;
     },
+    diffIdAdded() {
+      if (this.diff == null) return false;
+      return this.diff.added.includes(`${this.getPath}.@id`);
+    },
+    diffIdRemoved() {
+      if (this.diff == null) return false;
+      return this.diff.removed.includes(`${this.getPath}.@id`);
+    },
   },
   methods: {
     translatePhrase,
@@ -352,6 +371,23 @@ export default {
         }
       });
     },
+    addId() {
+      if (this.canAddId) {
+        this.$store.dispatch('updateInspectorData', {
+          changeList: [
+            {
+              path: `${this.path}.@id`,
+              value: 'https://libris.kb.se/TEMPID',
+            },
+          ],
+          addToHistory: true,
+        });
+        this.$store.dispatch('setInspectorStatusValue', {
+          property: 'lastAdded',
+          value: `${this.path}.@id`,
+        });
+      }
+    },
   },
   watch: {
     'inspector.status.editing'(val) {
@@ -452,6 +488,7 @@ export default {
   },
 
   components: {
+    'copy-attributes': CopyAttributes,
     'property-adder': PropertyAdder,
     'search-window': SearchWindow,
     'entity-action': EntityAction,
@@ -520,7 +557,14 @@ export default {
           <i class="fa fa-plus-circle icon--sm icon-added" />
         </div>
       </div>
-
+      <copy-attributes
+        v-if="this.hasId"
+        :uri="this.recordId"
+        :focus-data="this.focusData"
+        :is-libris-resource="this.isLibrisResource"
+        :diff-id-added="this.diffIdAdded"
+        :diff-id-removed="this.diffIdRemoved"
+      />
       <div class="ItemLocal-actions">
         <entity-action
           v-if="isExtracting"
@@ -608,6 +652,16 @@ export default {
                 {{ translatePhrase("Duplicate entity") }}
               </a>
             </li>
+            <li class="ManagerMenu-menuItem" v-if="canAddId">
+              <a
+                tabindex="0"
+                class="ManagerMenu-menuLink"
+                @keyup.enter="addId(), closeManagerMenu()"
+                @click="addId(), closeManagerMenu()">
+                <i class="fa fa-fw fa-plus" aria-hidden="true" />
+                {{ translatePhrase("Create id for entity") }}
+              </a>
+            </li>
           </ul>
         </div>
       </div>
@@ -843,17 +897,6 @@ export default {
     box-shadow: 0 2px 5px rgba(0,0,0,.16);
     margin: 1rem 0 1rem 0;
   }
-  &.is-diff-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-remove;
-  }
-
-  &.is-diff-added {
-    @base-color: @form-add;
-    background-color: @base-color;
-  }
 
   &.is-expanded >
   .ItemLocal-heading >
@@ -870,7 +913,7 @@ export default {
   &.is-extracting {
     background-color: @form-extracting !important;
     border: 1px dashed @brand-primary;
-    
+
     &.highlight-mark {
       border-color: @brand-primary !important;
     }

vue-client/src/components/inspector/item-value.vue

@@ -267,27 +267,7 @@ export default {
     overflow: hidden;
   }
 
-  &.is-diff-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-remove;
-    margin-bottom: 2px;
-  }
-
-  &.is-diff-added {
-    @base-color: @form-add;
-    border: 1px solid;
-    border-color: @brand-primary;
-    background-color: @base-color;
-    margin-bottom: 2px
-  }
-
-  &.is-diff-modified {
-    @base-color: @brand-primary-orange;
-    border: 1px dashed;
-    border-color: @base-color;
-    background-color: @form-modified;
+  &.is-diff-removed, &.is-diff-added, &.is-diff-modified {
     margin-bottom: 2px;
   }