From d03bb63a9b4c94f91b9409ac33d9937ddf424b2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Tue, 18 Jun 2024 09:02:53 +0200
Subject: [PATCH 01/11] Allow for adding empty ID on hasComponent entries in
 items. This matches the current backend implementation which might be subject
 to change.

---
 .../src/components/inspector/item-local.vue   | 33 +++++++++++++++++++
 vue-client/src/resources/json/i18n.json       |  3 +-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 687af16be..77feada37 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -150,6 +150,12 @@ export default {
       }
       return false;
     },
+    canAddId() {
+      if (this.fieldKey === 'hasComponent' && this.isHolding && !this.item.hasOwnProperty('@id')) {
+        return true;
+      }
+      return false;
+    },
     getPath() {
       if (this.inArray) {
         return `${this.parentPath}[${this.index}]`;
@@ -352,6 +358,23 @@ export default {
         }
       });
     },
+    addId() {
+      if (this.canAddId) {
+        this.$store.dispatch('updateInspectorData', {
+          changeList: [
+            {
+              path: `${this.path}.@id`,
+              value: '',
+            },
+          ],
+          addToHistory: true,
+        });
+        this.$store.dispatch('setInspectorStatusValue', {
+          property: 'lastAdded',
+          value: `${this.path}.@id`,
+        });
+      }
+    },
   },
   watch: {
     'inspector.status.editing'(val) {
@@ -608,6 +631,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>
diff --git a/vue-client/src/resources/json/i18n.json b/vue-client/src/resources/json/i18n.json
index 5b7ef7cd4..254e7a43e 100644
--- a/vue-client/src/resources/json/i18n.json
+++ b/vue-client/src/resources/json/i18n.json
@@ -426,6 +426,7 @@
     "Activate change message feature": "Aktivera funktion för ändringsmeddelanden",
     "Hide handled:": "Dölj hanterade:",
     "links": "länkningar",
-    "link": "länkning"
+    "link": "länkning",
+    "Create id for entity": "Skapa id för entitet"
   }
 }

From a884a1907b4c5c85464be1949d1bb23e48d04c45 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Wed, 19 Jun 2024 15:00:26 +0200
Subject: [PATCH 02/11] Extract id visualization + copy functionality as a
 component

---
 .../src/components/shared/entity-summary.vue  |  82 ++-----------
 vue-client/src/components/shared/id-pill.vue  | 115 ++++++++++++++++++
 2 files changed, 123 insertions(+), 74 deletions(-)
 create mode 100644 vue-client/src/components/shared/id-pill.vue

diff --git a/vue-client/src/components/shared/entity-summary.vue b/vue-client/src/components/shared/entity-summary.vue
index dffc8da37..cba0b7df0 100644
--- a/vue-client/src/components/shared/entity-summary.vue
+++ b/vue-client/src/components/shared/entity-summary.vue
@@ -9,12 +9,14 @@ import OverflowMixin from '@/components/mixins/overflow-mixin.vue';
 import EncodingLevelIcon from '@/components/shared/encoding-level-icon.vue';
 import TypeIcon from '@/components/shared/type-icon.vue';
 import SummaryNode from '@/components/shared/summary-node.vue';
+import IdPill from '@/components/shared/id-pill.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
 
 export default {
   mixins: [LensMixin, OverflowMixin],
   name: 'entity-summary',
   components: {
+    IdPill,
     EncodingLevelIcon,
     SummaryNode,
     TypeIcon,
@@ -109,9 +111,6 @@ export default {
   },
   data() {
     return {
-      idHover: false,
-      recentlyCopiedId: false,
-      failedCopyId: false,
       defaultSettings: {
         show: false,
         styling: 'grey',
@@ -145,24 +144,9 @@ export default {
       }
       return false;
     },
-    idAsFnurgel() {
-      if (this.uri) {
-        const id = this.uri;
-        const fnurgel = RecordUtil.extractFnurgel(id);
-        if (fnurgel && this.isLibrisResource) {
-          return fnurgel;
-        }
-        const cleaned = id.replace('https://', '').replace('http://', '');
-        return cleaned;
-      }
-      return null;
-    },
     hiddenDetailsNumber() {
       return this.getSummary.info.length - this.keyDisplayLimit;
     },
-    idTooltipText() {
-      return StringUtil.getUiPhraseByLang('Copy ID', this.user.settings.language, this.resources.i18n);
-    },
     isReplacedBy() {
       const info = this.getSummary.info;
       const infoObj = {};
@@ -285,18 +269,6 @@ export default {
     labelByLang,
     convertResourceLink,
     capitalize,
-    copyFnurgel() {
-      const self = this;
-      this.$copyText(this.uri).then(() => {
-        self.recentlyCopiedId = true;
-        setTimeout(() => {
-          self.recentlyCopiedId = false;
-        }, 1000);
-      }, (e) => {
-        self.failedCopyId = true;
-        console.warn(e);
-      });
-    },
     importThis() {
       this.$emit('import-this');
     },
@@ -332,18 +304,11 @@ export default {
         {{ topBarInformation }} {{ isLocal ? '{lokal entitet}' : '' }}
         <span class="EntitySummary-sourceLabel" v-if="database">{{ database }}</span>
       </div>
-      <div
-        v-if="idAsFnurgel && excludeComponents.indexOf('id') < 0"
-        class="EntitySummary-id"
-        :class="{ 'recently-copied': recentlyCopiedId }"
-        @mouseover="idHover = true"
-        @mouseout="idHover = false">
-        <i
-          v-tooltip.top="idTooltipText"
-          class="fa fa-copy EntitySummary-idCopyIcon"
-          :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
-          @click.stop="copyFnurgel" />{{ idAsFnurgel }}
-      </div>
+      <id-pill
+        v-if="!excludeComponents.includes('id')"
+        :uri="this.recordId"
+        :isLibrisResource="this.isLibrisResource"
+      />
     </div>
 
     <div class="EntitySummary-info">
@@ -442,7 +407,7 @@ export default {
     display: flex;
   }
 
-  &-type, &-id {
+  &-type {
     display: block;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -461,37 +426,6 @@ export default {
     flex-grow: 2;
     flex-basis: 50%;
   }
-  &-id {
-    flex-grow: 0;
-    text-align: right;
-    text-transform: none;
-    color: @grey-very-dark-transparent;
-    background-color: @badge-color-transparent;
-    transition: background-color 0.5s ease;
-    letter-spacing: 0.5px;
-    font-size: 1.2rem;
-    font-weight: 400;
-    padding: 0 0.75em;
-    border-radius: 1em;
-
-    &.recently-copied {
-      background-color: @brand-success;
-      color: @white;
-    }
-  }
-  &-idCopyIcon {
-    transition: all 0.25s ease;
-    margin: 0 0.25em 0 -0.25em;
-    overflow: hidden;
-    width: 1.2em;
-    opacity: 1;
-    cursor: pointer;
-    &.collapsedIcon {
-      margin: 0 0 0 0;
-      width: 0;
-      opacity: 0;
-    }
-  }
 
   &-sourceLabel {
     border: 1px solid;
diff --git a/vue-client/src/components/shared/id-pill.vue b/vue-client/src/components/shared/id-pill.vue
new file mode 100644
index 000000000..cfba7f437
--- /dev/null
+++ b/vue-client/src/components/shared/id-pill.vue
@@ -0,0 +1,115 @@
+<script>
+import * as StringUtil from 'lxljs/string';
+import * as RecordUtil from '@/utils/record';
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'id-pill',
+  props: {
+    uri: {
+      type: String,
+      default: '',
+    },
+    isLibrisResource: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      idHover: false,
+      recentlyCopiedId: false,
+      failedCopyId: false,
+    };
+  },
+  methods: {
+    copyFnurgel() {
+      const self = this;
+      this.$copyText(this.uri).then(() => {
+        self.recentlyCopiedId = true;
+        setTimeout(() => {
+          self.recentlyCopiedId = false;
+        }, 1000);
+      }, (e) => {
+        self.failedCopyId = true;
+        console.warn(e);
+      });
+    },
+  },
+  computed: {
+    ...mapGetters([
+      'user',
+      'resources',
+    ]),
+    idAsFnurgel() {
+      if (this.uri) {
+        const id = this.uri;
+        const fnurgel = RecordUtil.extractFnurgel(id);
+        console.log('fnurgel', fnurgel);
+        if (fnurgel && this.isLibrisResource) {
+          return fnurgel;
+        }
+        const cleaned = id.replace('https://', '').replace('http://', '');
+        return cleaned;
+      }
+      return null;
+    },
+    idTooltipText() {
+      return StringUtil.getUiPhraseByLang('Copy ID', this.user.settings.language, this.resources.i18n);
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="IdPill">
+    <div
+      v-if="idAsFnurgel"
+      class="IdPill-id"
+      :class="{'recently-copied': recentlyCopiedId }"
+      @mouseover="idHover = true"
+      @mouseout="idHover = false">
+      <i
+        v-tooltip.top="idTooltipText"
+        class="fa fa-copy IdPill-idCopyIcon"
+        :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
+        @click.stop="copyFnurgel" />{{ idAsFnurgel }}
+    </div>
+  </div>
+</template>
+
+<style lang="less">
+.IdPill {
+  &-id {
+    flex-grow: 0;
+    text-align: right;
+    text-transform: none;
+    color: @grey-very-dark-transparent;
+    background-color: @badge-color-transparent;
+    transition: background-color 0.5s ease;
+    letter-spacing: 0.5px;
+    font-size: 1.2rem;
+    font-weight: 400;
+    padding: 0 0.75em;
+    border-radius: 1em;
+
+    &.recently-copied {
+      background-color: @brand-success;
+      color: @white;
+    }
+  }
+  &-idCopyIcon {
+    transition: all 0.25s ease;
+    margin: 0 0.25em 0 -0.25em;
+    overflow: hidden;
+    width: 1.2em;
+    opacity: 1;
+    cursor: pointer;
+    &.collapsedIcon {
+      margin: 0 0 0 0;
+      width: 0;
+      opacity: 0;
+    }
+  }
+}
+</style>

From 0325376202d31682ef11eba4dab39312cd77ffbc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Wed, 19 Jun 2024 15:54:12 +0200
Subject: [PATCH 03/11] Add id-label component to item-local

---
 vue-client/src/components/inspector/item-local.vue | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 77feada37..0ee1b5454 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -13,6 +13,7 @@ import SearchWindow from './search-window.vue';
 import ItemMixin from '../mixins/item-mixin.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
 import FormMixin from '../mixins/form-mixin.vue';
+import IdPill from "@/components/shared/id-pill.vue";
 
 export default {
   name: 'item-local',
@@ -151,11 +152,14 @@ export default {
       return false;
     },
     canAddId() {
-      if (this.fieldKey === 'hasComponent' && this.isHolding && !this.item.hasOwnProperty('@id')) {
+      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}]`;
@@ -475,6 +479,7 @@ export default {
   },
 
   components: {
+    IdPill,
     'property-adder': PropertyAdder,
     'search-window': SearchWindow,
     'entity-action': EntityAction,
@@ -543,6 +548,11 @@ export default {
           <i class="fa fa-plus-circle icon--sm icon-added" />
         </div>
       </div>
+      <id-pill
+        v-if="this.hasId"
+        :uri="this.recordId"
+        :isLibrisResource="this.isLibrisResource"
+      />
 
       <div class="ItemLocal-actions">
         <entity-action

From 7eeaf9fb433b5c40a0a7783153b2d746cc0e3224 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Wed, 19 Jun 2024 16:11:37 +0200
Subject: [PATCH 04/11] Naming things etc

---
 .../src/components/inspector/item-local.vue   |  8 +--
 .../src/components/shared/entity-summary.vue  |  4 +-
 .../shared/{id-pill.vue => id-label.vue}      | 57 +++++++++----------
 3 files changed, 32 insertions(+), 37 deletions(-)
 rename vue-client/src/components/shared/{id-pill.vue => id-label.vue} (64%)

diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 0ee1b5454..64103d4fe 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -9,11 +9,11 @@ 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 SearchWindow from './search-window.vue';
 import ItemMixin from '../mixins/item-mixin.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
 import FormMixin from '../mixins/form-mixin.vue';
-import IdPill from "@/components/shared/id-pill.vue";
 
 export default {
   name: 'item-local',
@@ -479,10 +479,10 @@ export default {
   },
 
   components: {
-    IdPill,
     'property-adder': PropertyAdder,
     'search-window': SearchWindow,
     'entity-action': EntityAction,
+    'id-label': IdLabel,
   },
 };
 </script>
@@ -548,7 +548,7 @@ export default {
           <i class="fa fa-plus-circle icon--sm icon-added" />
         </div>
       </div>
-      <id-pill
+      <id-label
         v-if="this.hasId"
         :uri="this.recordId"
         :isLibrisResource="this.isLibrisResource"
@@ -913,7 +913,7 @@ export default {
   &.is-extracting {
     background-color: @form-extracting !important;
     border: 1px dashed @brand-primary;
-    
+
     &.highlight-mark {
       border-color: @brand-primary !important;
     }
diff --git a/vue-client/src/components/shared/entity-summary.vue b/vue-client/src/components/shared/entity-summary.vue
index cba0b7df0..46130fb45 100644
--- a/vue-client/src/components/shared/entity-summary.vue
+++ b/vue-client/src/components/shared/entity-summary.vue
@@ -9,7 +9,7 @@ import OverflowMixin from '@/components/mixins/overflow-mixin.vue';
 import EncodingLevelIcon from '@/components/shared/encoding-level-icon.vue';
 import TypeIcon from '@/components/shared/type-icon.vue';
 import SummaryNode from '@/components/shared/summary-node.vue';
-import IdPill from '@/components/shared/id-pill.vue';
+import IdPill from '@/components/shared/id-label.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
 
 export default {
@@ -304,7 +304,7 @@ export default {
         {{ topBarInformation }} {{ isLocal ? '{lokal entitet}' : '' }}
         <span class="EntitySummary-sourceLabel" v-if="database">{{ database }}</span>
       </div>
-      <id-pill
+      <id-label
         v-if="!excludeComponents.includes('id')"
         :uri="this.recordId"
         :isLibrisResource="this.isLibrisResource"
diff --git a/vue-client/src/components/shared/id-pill.vue b/vue-client/src/components/shared/id-label.vue
similarity index 64%
rename from vue-client/src/components/shared/id-pill.vue
rename to vue-client/src/components/shared/id-label.vue
index cfba7f437..7c8e4692c 100644
--- a/vue-client/src/components/shared/id-pill.vue
+++ b/vue-client/src/components/shared/id-label.vue
@@ -4,7 +4,7 @@ import * as RecordUtil from '@/utils/record';
 import { mapGetters } from 'vuex';
 
 export default {
-  name: 'id-pill',
+  name: 'id-label',
   props: {
     uri: {
       type: String,
@@ -45,7 +45,6 @@ export default {
       if (this.uri) {
         const id = this.uri;
         const fnurgel = RecordUtil.extractFnurgel(id);
-        console.log('fnurgel', fnurgel);
         if (fnurgel && this.isLibrisResource) {
           return fnurgel;
         }
@@ -62,41 +61,37 @@ export default {
 </script>
 
 <template>
-  <div class="IdPill">
-    <div
-      v-if="idAsFnurgel"
-      class="IdPill-id"
-      :class="{'recently-copied': recentlyCopiedId }"
-      @mouseover="idHover = true"
-      @mouseout="idHover = false">
-      <i
-        v-tooltip.top="idTooltipText"
-        class="fa fa-copy IdPill-idCopyIcon"
-        :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
-        @click.stop="copyFnurgel" />{{ idAsFnurgel }}
-    </div>
+  <div
+    v-if="idAsFnurgel"
+    class="IdPill"
+    :class="{ 'recently-copied': recentlyCopiedId }"
+    @mouseover="idHover = true"
+    @mouseout="idHover = false">
+    <i
+      v-tooltip.top="idTooltipText"
+      class="fa fa-copy IdPill-idCopyIcon"
+      :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
+      @click.stop="copyFnurgel" />{{ idAsFnurgel }}
   </div>
 </template>
 
 <style lang="less">
 .IdPill {
-  &-id {
-    flex-grow: 0;
-    text-align: right;
-    text-transform: none;
-    color: @grey-very-dark-transparent;
-    background-color: @badge-color-transparent;
-    transition: background-color 0.5s ease;
-    letter-spacing: 0.5px;
-    font-size: 1.2rem;
-    font-weight: 400;
-    padding: 0 0.75em;
-    border-radius: 1em;
+  flex-grow: 0;
+  text-align: right;
+  text-transform: none;
+  color: @grey-very-dark-transparent;
+  background-color: @badge-color-transparent;
+  transition: background-color 0.5s ease;
+  letter-spacing: 0.5px;
+  font-size: 1.2rem;
+  font-weight: 400;
+  padding: 0 0.75em;
+  border-radius: 1em;
 
-    &.recently-copied {
-      background-color: @brand-success;
-      color: @white;
-    }
+  &.recently-copied {
+    background-color: @brand-success;
+    color: @white;
   }
   &-idCopyIcon {
     transition: all 0.25s ease;

From 89219852b9533e390f98b8ea4d83fa74baf8ae03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Wed, 19 Jun 2024 16:18:25 +0200
Subject: [PATCH 05/11] Show ID as a property

---
 vue-client/src/components/mixins/form-mixin.vue | 6 +++++-
 vue-client/src/settings.js                      | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/vue-client/src/components/mixins/form-mixin.vue b/vue-client/src/components/mixins/form-mixin.vue
index a3edc6819..9b72a65a1 100644
--- a/vue-client/src/components/mixins/form-mixin.vue
+++ b/vue-client/src/components/mixins/form-mixin.vue
@@ -99,7 +99,11 @@ export default {
       if (this.showTypeChanger === false) {
         delete fItem['@type'];
       }
-      delete fItem['@id'];
+
+      const keepId = this.settings.showIdsForProps.includes(this.fieldKey);
+      if (!keepId) {
+        delete fItem['@id'];
+      }
       delete fItem['@reverse'];
       delete fItem._uid;
 
diff --git a/vue-client/src/settings.js b/vue-client/src/settings.js
index 96f83f792..d6c3d89bb 100644
--- a/vue-client/src/settings.js
+++ b/vue-client/src/settings.js
@@ -38,6 +38,9 @@ export default {
     'CacheRecord',
     'ComplexSubject.termComponentList',
   ],
+  showIdsForProps: [
+    'hasComponent',
+  ],
   keysToClear: {
     duplication: [
       'record.bibliography',
@@ -75,12 +78,12 @@ export default {
     'unstable',
   ],
   hiddenProperties: [
-    '@id',
     'created',
     'modified',
     'mainEntity',
   ],
   lockedProperties: [
+    '@id',
     'sameAs',
     'controlNumber',
     'systemNumber',

From add76283d0953b54b379c44b078521c244b7f27e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Wed, 19 Jun 2024 16:18:39 +0200
Subject: [PATCH 06/11] Revert "Show ID as a property"

This reverts commit 89219852b9533e390f98b8ea4d83fa74baf8ae03.
---
 vue-client/src/components/mixins/form-mixin.vue | 6 +-----
 vue-client/src/settings.js                      | 5 +----
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/vue-client/src/components/mixins/form-mixin.vue b/vue-client/src/components/mixins/form-mixin.vue
index 9b72a65a1..a3edc6819 100644
--- a/vue-client/src/components/mixins/form-mixin.vue
+++ b/vue-client/src/components/mixins/form-mixin.vue
@@ -99,11 +99,7 @@ export default {
       if (this.showTypeChanger === false) {
         delete fItem['@type'];
       }
-
-      const keepId = this.settings.showIdsForProps.includes(this.fieldKey);
-      if (!keepId) {
-        delete fItem['@id'];
-      }
+      delete fItem['@id'];
       delete fItem['@reverse'];
       delete fItem._uid;
 
diff --git a/vue-client/src/settings.js b/vue-client/src/settings.js
index d6c3d89bb..96f83f792 100644
--- a/vue-client/src/settings.js
+++ b/vue-client/src/settings.js
@@ -38,9 +38,6 @@ export default {
     'CacheRecord',
     'ComplexSubject.termComponentList',
   ],
-  showIdsForProps: [
-    'hasComponent',
-  ],
   keysToClear: {
     duplication: [
       'record.bibliography',
@@ -78,12 +75,12 @@ export default {
     'unstable',
   ],
   hiddenProperties: [
+    '@id',
     'created',
     'modified',
     'mainEntity',
   ],
   lockedProperties: [
-    '@id',
     'sameAs',
     'controlNumber',
     'systemNumber',

From e059664a59c17d127ce8c00878a6e6678e9854ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Thu, 20 Jun 2024 11:17:25 +0200
Subject: [PATCH 07/11] Use TEMPID instead of empty string to create an id for
 a copy

---
 vue-client/src/components/inspector/item-local.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 64103d4fe..cb5d0aed1 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -368,7 +368,7 @@ export default {
           changeList: [
             {
               path: `${this.path}.@id`,
-              value: '',
+              value: 'https://libris.kb.se/TEMPID',
             },
           ],
           addToHistory: true,

From 2311e75a8dc5bd92470bee0511f9b9ede184e203 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Thu, 20 Jun 2024 12:56:39 +0200
Subject: [PATCH 08/11] Fix component name

---
 vue-client/src/components/shared/entity-summary.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/vue-client/src/components/shared/entity-summary.vue b/vue-client/src/components/shared/entity-summary.vue
index 46130fb45..398aea6d3 100644
--- a/vue-client/src/components/shared/entity-summary.vue
+++ b/vue-client/src/components/shared/entity-summary.vue
@@ -9,14 +9,14 @@ import OverflowMixin from '@/components/mixins/overflow-mixin.vue';
 import EncodingLevelIcon from '@/components/shared/encoding-level-icon.vue';
 import TypeIcon from '@/components/shared/type-icon.vue';
 import SummaryNode from '@/components/shared/summary-node.vue';
-import IdPill from '@/components/shared/id-label.vue';
+import IdLabel from '@/components/shared/id-label.vue';
 import LensMixin from '../mixins/lens-mixin.vue';
 
 export default {
   mixins: [LensMixin, OverflowMixin],
   name: 'entity-summary',
   components: {
-    IdPill,
+    IdLabel,
     EncodingLevelIcon,
     SummaryNode,
     TypeIcon,

From 0450f519c1bb66d60ab7f9c8b6a7e58cee4fde34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Mon, 24 Jun 2024 10:09:43 +0200
Subject: [PATCH 09/11] Extract duplicate css for history view

---
 vue-client/src/App.vue                        |  20 ++++
 vue-client/src/components/inspector/field.vue |  21 ----
 .../src/components/inspector/item-entity.vue  |  16 +--
 .../src/components/inspector/item-local.vue   |  11 --
 .../src/components/inspector/item-value.vue   |  22 +---
 .../components/inspector/language-entry.vue   | 102 +++++++-----------
 6 files changed, 59 insertions(+), 133 deletions(-)

diff --git a/vue-client/src/App.vue b/vue-client/src/App.vue
index 68b579bbd..bb710ee10 100644
--- a/vue-client/src/App.vue
+++ b/vue-client/src/App.vue
@@ -1138,4 +1138,24 @@ 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;
+}
 </style>
diff --git a/vue-client/src/components/inspector/field.vue b/vue-client/src/components/inspector/field.vue
index a84b28e0a..997658601 100644
--- a/vue-client/src/components/inspector/field.vue
+++ b/vue-client/src/components/inspector/field.vue
@@ -1130,27 +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;
diff --git a/vue-client/src/components/inspector/item-entity.vue b/vue-client/src/components/inspector/item-entity.vue
index 419cdc5d6..60c4ae33f 100644
--- a/vue-client/src/components/inspector/item-entity.vue
+++ b/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;
   }
diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index cb5d0aed1..5149c8b13 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -886,17 +886,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 >
diff --git a/vue-client/src/components/inspector/item-value.vue b/vue-client/src/components/inspector/item-value.vue
index 896d952d5..877fc9c16 100644
--- a/vue-client/src/components/inspector/item-value.vue
+++ b/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;
   }
 
diff --git a/vue-client/src/components/inspector/language-entry.vue b/vue-client/src/components/inspector/language-entry.vue
index 63725b076..64457a29b 100644
--- a/vue-client/src/components/inspector/language-entry.vue
+++ b/vue-client/src/components/inspector/language-entry.vue
@@ -284,51 +284,51 @@ export default {
     </div>
 
     <div
+      class="LanguageEntry-textcontainer"
       v-if="isLocked"
       v-bind:class="{
-        'LanguageEntry-is-diff-removed': diffRemoved && !diffAdded,
-        'LanguageEntry-is-diff-added': diffAdded && !diffRemoved,
-        'LanguageEntry-is-diff-modified': diffModified,
-      }">
-      <div class="LanguageEntry-textcontainer">
-        <div class="LanguageEntry-key">
-          <div class="LanguageEntry-text">
-            {{ modelValue }}
-          </div>
+        'is-diff-removed': diffRemoved && !diffAdded,
+        'is-diff-added': diffAdded && !diffRemoved,
+        'is-diff-modified': diffModified,
+      }"
+    >
+      <div class="LanguageEntry-key">
+        <div class="LanguageEntry-text">
+          {{ modelValue }}
         </div>
+      </div>
 
-        <span class="LanguageEntry-tags">
-          <span class="LanguageEntry-pill" v-if="tag !== 'none'">
-            <Menu
-              v-if="this.isLinked"
-              class="LanguageEntry-popover"
-              placement="bottom-start"
-              :delay="{ show: 200, hide: 0 }"
-              :popperHideTriggers="['hover']"
-              @apply-show="$refs.previewCard.populateData()">
-              <span class="LanguageEntry-pill-label LanguageEntry-pill-link">
-                <router-link :to="routerPath">{{ this.label }}</router-link>
-              </span>
-
-              <template #popper>
-                <PreviewCard ref="previewCard" :focus-data="data" :record-id="this.recordId" />
-              </template>
-            </Menu>
-
-            <span v-if="!this.isLinked" class="LanguageEntry-pill-label">
-              {{ this.label }}
+      <span class="LanguageEntry-tags">
+        <span class="LanguageEntry-pill" v-if="tag !== 'none'">
+          <Menu
+            v-if="this.isLinked"
+            class="LanguageEntry-popover"
+            placement="bottom-start"
+            :delay="{ show: 200, hide: 0 }"
+            :popperHideTriggers="['hover']"
+            @apply-show="$refs.previewCard.populateData()">
+            <span class="LanguageEntry-pill-label LanguageEntry-pill-link">
+              <router-link :to="routerPath">{{ this.label }}</router-link>
             </span>
-          </span>
 
-          <span class="LanguageEntry-tags-history-icon" v-if="diffRemoved && !diffAdded">
-            <i class="fa fa-trash-o icon--sm icon-removed" />
-          </span>
+            <template #popper>
+              <PreviewCard ref="previewCard" :focus-data="data" :record-id="this.recordId" />
+            </template>
+          </Menu>
 
-          <span class="LanguageEntry-tags-history-icon" v-if="diffAdded && !diffRemoved">
-            <i class="fa fa-plus-circle icon--sm icon-added" />
+          <span v-if="!this.isLinked" class="LanguageEntry-pill-label">
+            {{ this.label }}
           </span>
         </span>
-      </div>
+
+        <span class="LanguageEntry-tags-history-icon" v-if="diffRemoved && !diffAdded">
+          <i class="fa fa-trash-o icon--sm icon-removed" />
+        </span>
+
+        <span class="LanguageEntry-tags-history-icon" v-if="diffAdded && !diffRemoved">
+          <i class="fa fa-plus-circle icon--sm icon-added" />
+        </span>
+      </span>
     </div>
   </div>
 </template>
@@ -369,36 +369,6 @@ export default {
     margin-bottom: 7px;
   }
 
-  &-is-diff-added {
-    @base-color: @form-add;
-    border: 1px solid;
-    border-radius: 4px;
-    padding: 0px 5px 0 5px;
-    border-color: @brand-primary;
-    background-color: @base-color;
-    margin-bottom: 3px;
-  }
-
-  &-is-diff-removed {
-    @base-color: @remove;
-    border: 1px dashed;
-    border-radius: 4px;
-    padding: 0px 5px 0 5px;
-    border-color: @base-color;
-    background-color: @form-remove;
-    margin-bottom: 3px;
-  }
-
-  &-is-diff-modified {
-    @base-color: @brand-primary-orange;
-    border: 1px dashed;
-    border-radius: 4px;
-    padding: 0px 5px 0 5px;
-    border-color: @base-color;
-    background-color: @form-modified;
-    margin-bottom: 3px;
-  }
-
   &-text {
     position: relative;
   }

From 5c7db1526dfb4339f59d0f463a76a6ccb8b192d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Mon, 24 Jun 2024 12:56:17 +0200
Subject: [PATCH 10/11] History support for id-label component

---
 vue-client/src/App.vue                        | 10 ++++++++
 vue-client/src/components/inspector/field.vue | 10 --------
 .../src/components/inspector/item-local.vue   | 12 +++++++++-
 vue-client/src/components/shared/id-label.vue | 23 ++++++++++++++++++-
 4 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/vue-client/src/App.vue b/vue-client/src/App.vue
index bb710ee10..3bd32d71b 100644
--- a/vue-client/src/App.vue
+++ b/vue-client/src/App.vue
@@ -1158,4 +1158,14 @@ h1 {
   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>
diff --git a/vue-client/src/components/inspector/field.vue b/vue-client/src/components/inspector/field.vue
index 997658601..aacf76824 100644
--- a/vue-client/src/components/inspector/field.vue
+++ b/vue-client/src/components/inspector/field.vue
@@ -1130,16 +1130,6 @@ export default {
     background-color: hsl(hue(@base-color), 50%, 95%);
   }
 
-  .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;
   }
diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 5149c8b13..624ef67b3 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -191,6 +191,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,
@@ -551,7 +559,9 @@ export default {
       <id-label
         v-if="this.hasId"
         :uri="this.recordId"
-        :isLibrisResource="this.isLibrisResource"
+        :is-libris-resource="this.isLibrisResource"
+        :diff-added="this.diffIdAdded"
+        :diff-removed="this.diffIdRemoved"
       />
 
       <div class="ItemLocal-actions">
diff --git a/vue-client/src/components/shared/id-label.vue b/vue-client/src/components/shared/id-label.vue
index 7c8e4692c..2858a6f61 100644
--- a/vue-client/src/components/shared/id-label.vue
+++ b/vue-client/src/components/shared/id-label.vue
@@ -14,6 +14,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    diffAdded: {
+      type: Boolean,
+      default: false,
+    },
+    diffRemoved: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -64,7 +72,11 @@ export default {
   <div
     v-if="idAsFnurgel"
     class="IdPill"
-    :class="{ 'recently-copied': recentlyCopiedId }"
+    v-bind:class="{
+      'recently-copied': recentlyCopiedId,
+      'is-diff-added': diffAdded,
+      'is-diff-removed': diffRemoved,
+    }"
     @mouseover="idHover = true"
     @mouseout="idHover = false">
     <i
@@ -72,6 +84,12 @@ export default {
       class="fa fa-copy IdPill-idCopyIcon"
       :class="{ collapsedIcon: !idHover || recentlyCopiedId }"
       @click.stop="copyFnurgel" />{{ idAsFnurgel }}
+    <span v-if="diffRemoved">
+      <i class="fa fa-trash-o icon--sm icon-removed historyIcon" />
+    </span>
+    <span v-if="diffAdded">
+      <i class="fa fa-plus-circle icon--sm icon-added historyIcon" />
+    </span>
   </div>
 </template>
 
@@ -107,4 +125,7 @@ export default {
     }
   }
 }
+.historyIcon {
+  padding-top: 3px;
+}
 </style>

From e803690c11ec54fef74606a395aba50d3ed28322 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lars=20Rosenstr=C3=B6m?= <lars.rosenstrom@kb.se>
Date: Tue, 25 Jun 2024 13:09:14 +0200
Subject: [PATCH 11/11] Wrapper for copy attributes (id + reverse relations)

---
 .../components/inspector/copy-attributes.vue  | 71 +++++++++++++++++++
 .../src/components/inspector/item-local.vue   | 11 +--
 vue-client/src/components/shared/id-label.vue |  2 +-
 3 files changed, 78 insertions(+), 6 deletions(-)
 create mode 100644 vue-client/src/components/inspector/copy-attributes.vue

diff --git a/vue-client/src/components/inspector/copy-attributes.vue b/vue-client/src/components/inspector/copy-attributes.vue
new file mode 100644
index 000000000..a65a2b239
--- /dev/null
+++ b/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>
diff --git a/vue-client/src/components/inspector/item-local.vue b/vue-client/src/components/inspector/item-local.vue
index 624ef67b3..61422e808 100644
--- a/vue-client/src/components/inspector/item-local.vue
+++ b/vue-client/src/components/inspector/item-local.vue
@@ -10,6 +10,7 @@ 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';
@@ -487,10 +488,10 @@ export default {
   },
 
   components: {
+    'copy-attributes': CopyAttributes,
     'property-adder': PropertyAdder,
     'search-window': SearchWindow,
     'entity-action': EntityAction,
-    'id-label': IdLabel,
   },
 };
 </script>
@@ -556,14 +557,14 @@ export default {
           <i class="fa fa-plus-circle icon--sm icon-added" />
         </div>
       </div>
-      <id-label
+      <copy-attributes
         v-if="this.hasId"
         :uri="this.recordId"
+        :focus-data="this.focusData"
         :is-libris-resource="this.isLibrisResource"
-        :diff-added="this.diffIdAdded"
-        :diff-removed="this.diffIdRemoved"
+        :diff-id-added="this.diffIdAdded"
+        :diff-id-removed="this.diffIdRemoved"
       />
-
       <div class="ItemLocal-actions">
         <entity-action
           v-if="isExtracting"
diff --git a/vue-client/src/components/shared/id-label.vue b/vue-client/src/components/shared/id-label.vue
index 2858a6f61..b46f97a0a 100644
--- a/vue-client/src/components/shared/id-label.vue
+++ b/vue-client/src/components/shared/id-label.vue
@@ -126,6 +126,6 @@ export default {
   }
 }
 .historyIcon {
-  padding-top: 3px;
+  padding-top: 4px;
 }
 </style>