Add the ability to unlink parent/child items [SCI-9712] (#6725)

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -147,16 +147,15 @@
                     <div v-if="parentsCount">
                       <details v-for="(parent) in parents" @toggle="updateOpenState(parent.code, $event.target.open)" :key="parent.code" class="flex flex-col font-normal gap-5 group cursor-default">
                         <summary class="flex flex-row gap-3 mb-3 items-center">
-                          <img :src="icons.delimiter_path" class="w-3 h-3 cursor-pointer" :class="{ 'rotate-90': relationshipDetailsState[parent.code] }" />
+                          <img :src="icons.delimiter_path" class="w-3 h-3 cursor-pointer"
+                               :class="{ 'rotate-90': relationshipDetailsState[parent.code] }" />
                           <span>
                             <span>{{ i18n.t('repositories.item_card.relationships.item') }}</span>
                             <a :href="parent.path" class="record-info-link btn-text-link !text-sn-science-blue">{{ parent.name }}</a>
-                            <a v-if="permissions.can_manage"
-                              href="/"
-                              class="opacity-0 group-hover:opacity-100 cursor-pointer"
-                            >
+                            <button v-if="permissions?.can_manage" @click="openUnlinkModal(parent)"
+                                    class=" ml-2 bg-transparent border-none opacity-0 group-hover:opacity-100 cursor-pointer">
                               <img :src="icons.unlink_path" />
-                            </a>
+                            </button>
                           </span>
                         </summary>
                         <p class="flex flex-col gap-3 mb-5 ml-6">
@@ -194,12 +193,10 @@
                           <span class="group/child">
                             <span>{{ i18n.t('repositories.item_card.relationships.item') }}</span>
                             <a :href="child.path" class="record-info-link btn-text-link !text-sn-science-blue">{{ child.name }}</a>
-                            <a v-if="permissions.can_manage"
-                              href="/"
-                              class="opacity-0 group-hover:opacity-100 cursor-pointer"
-                            >
+                            <button v-if="permissions?.can_manage" @click="openUnlinkModal(child)"
+                                    class="ml-2 bg-transparent border-none opacity-0 group-hover:opacity-100 cursor-pointer">
                               <img :src="icons.unlink_path" />
-                            </a>
+                            </button>
                           </span>
                         </summary>
                         <p class="flex flex-col gap-3 mb-5 ml-6">
@@ -309,6 +306,10 @@
       </div>
     </div>
   </transition>
+
+  <Teleport to="body">
+    <unlink-modal v-if="selectedToUnlink" @cancel="closeUnlinkModal" @unlink="unlinkItem" />
+  </Teleport>
 </template>
 
 <script>
@@ -316,6 +317,8 @@ import InlineEdit from '../shared/inline_edit.vue';
 import ScrollSpy from './repository_values/ScrollSpy.vue';
 import CustomColumns from './customColumns.vue';
 import RepositoryItemSidebarTitle from './Title.vue';
+import UnlinkModal from './unlink_modal.vue';
+import axios from '../../packs/custom_axios.js';
 
 export default {
   name: 'RepositoryItemSidebar',
@@ -324,6 +327,7 @@ export default {
     'repository-item-sidebar-title': RepositoryItemSidebarTitle,
     'inline-edit': InlineEdit,
     'scroll-spy': ScrollSpy,
+    'unlink-modal': UnlinkModal,
   },
   data() {
     return {
@@ -350,6 +354,7 @@ export default {
       notification: null,
       relationshipDetailsState: {},
       relationshipsEnabled: false,
+      selectedToUnlink: null,
       initialSectionId: null,
     };
   },
@@ -367,13 +372,13 @@ export default {
     },
   },
   watch: {
-    parents() {
-      this.parents.forEach((parent) => {
+    parents(newParents) {
+      newParents.forEach((parent) => {
         this.relationshipDetailsState[parent.code] = false;
       });
     },
-    children() {
-      this.children.forEach((child) => {
+    children(newChildren) {
+      newChildren.forEach((child) => {
         this.relationshipDetailsState[child.code] = false;
       });
     },
@@ -478,8 +483,8 @@ export default {
           this.assignedModules = result.assigned_modules;
           this.permissions = result.permissions;
           this.actions = result.actions;
-          this.dataLoading = false;
           this.icons = result.icons;
+          this.dataLoading = false;
           this.notification = result.notification;
           this.$nextTick(() => {
             this.generateBarCode(this.defaultColumns.code);
@@ -526,7 +531,19 @@ export default {
       });
     },
     updateOpenState(code, isOpen) {
-      this.$set(this.relationshipDetailsState, code, isOpen);
+      this.relationshipDetailsState[code] = isOpen;
+    },
+    openUnlinkModal(item) {
+      this.selectedToUnlink = item;
+    },
+    closeUnlinkModal() {
+      this.selectedToUnlink = null;
+    },
+    async unlinkItem() {
+      await axios.delete(this.selectedToUnlink.unlink_path);
+      this.loadRepositoryRow(this.currentItemUrl);
+      if ($('.dataTable')[0]) $('.dataTable').DataTable().ajax.reload(null, false);
+      this.selectedToUnlink = null;
     },
   },
 };

app/javascript/vue/repository_item_sidebar/unlink_modal.vue

@@ -0,0 +1,48 @@
+<template>
+  <div ref="modal" @keydown.esc="cancel" class="modal fade" tabindex="-1" role="dialog">
+    <div class="modal-dialog modal-sm" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" @click="cancel" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
+          <h4 class="modal-title">
+            {{ i18n.t('repositories.item_card.relationships.unlink_modal.title') }}
+          </h4>
+        </div>
+        <div class="modal-body">
+          <p>{{ i18n.t('repositories.item_card.relationships.unlink_modal.description') }}</p>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="cancel">{{ i18n.t('general.cancel') }}</button>
+          <button class="btn btn-primary" @click="confirm">{{ i18n.t('repositories.item_card.relationships.unlink_modal.unlink') }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'UnlinkModal',
+  mounted() {
+    $(this.$refs.modal).modal('show');
+  },
+  methods: {
+    cancel() {
+      this.hide(() => {
+        this.$emit('cancel');
+      });
+    },
+    confirm() {
+      this.hide(() => {
+        this.$emit('unlink');
+      })
+    },
+    hide(callback) {
+      $(this.$refs.modal).one('hidden.bs.modal', () => {
+        callback();
+      });
+      $(this.$refs.modal).modal('hide');
+    }
+  }
+}
+</script>

app/views/repository_rows/show.json.jbuilder

@@ -52,20 +52,30 @@ json.relationships do
   json.children_count @repository_row.child_connections_count
   json.parents do
     json.array! @repository_row.parent_repository_rows.preload(:repository).each do |parent|
+      json.id parent.id
       json.code parent.code
       json.name parent.name
       json.path repository_repository_row_path(parent.repository, parent)
       json.repository_name parent.repository.name
       json.repository_path repository_path(parent.repository)
+      json.unlink_path repository_repository_row_repository_row_connection_path(parent.repository,
+                                                                                parent,
+                                                                                @repository_row.parent_connections
+                                                                                               .find_by(parent: parent))
     end
   end
   json.children do
     json.array! @repository_row.child_repository_rows.preload(:repository).each do |child|
+      json.id child.id
       json.code child.code
       json.name child.name
       json.path repository_repository_row_path(child.repository, child)
       json.repository_name child.repository.name
       json.repository_path repository_path(child.repository)
+      json.unlink_path repository_repository_row_repository_row_connection_path(child.repository,
+                                                                                child,
+                                                                                @repository_row.child_connections
+                                                                                               .find_by(child: child))
     end
   end
 end

config/locales/en.yml

@@ -2268,6 +2268,10 @@ en:
         children:
           count: "Children (%{count})"
           empty: ""
+        unlink_modal:
+          title: "Unlink item"
+          description: "Are you sure you want to unlink the item? Reconnection is possible later if needed."
+          unlink: "Unlink"
       default_columns:
         repository_name: "Inventory"
         id: "Item ID"