Merge pull request #1128 from libris/feature/bulk-changes-id-list

Feature/bulk changes id list
libris · Oct 21, 2024 · 1648386 · 1648386
2 parents 5a07be8 + 37f326e
commit 1648386
Show file tree

Hide file tree

Showing 7 changed files with 213 additions and 11 deletions.
diff --git a/cataloging/src/components/care/bulk-changes.vue b/cataloging/src/components/care/bulk-changes.vue
@@ -65,6 +65,8 @@ export default {
         'next': false,
         'previous': false
       },
+      showIdListModal: false,
+      idListUri: '',
     };
   },
   computed: {
@@ -92,13 +94,13 @@ export default {
       return this.isActive('targetForm') ? this.inspector.data.mainEntity : this.currentSpec.targetForm;
     },
     formTitle() {
-      return `${this.steps.indexOf('form') + 1}. ${translatePhrase('Form builder')}`
+      return `${this.steps.indexOf('form') + 1}. ${translatePhrase('Selection')}`
     },
     changesTitle() {
       return `${this.steps.indexOf('targetForm') + 1}. ${translatePhrase('Changes')}`
     },
     previewTitle() {
-      return `${this.steps.indexOf('preview') + 1}. ${translatePhrase('Preview')}`
+      return `${this.steps.indexOf('preview') + 1}. ${translatePhrase('Preview ')}`
     },
     hasNext() {
       return !isEmpty(this.nextPreviewLink);
@@ -231,6 +233,7 @@ export default {
               value: 'start-edit',
             });
           }
+          this.initIdListUri();
           DataUtil.fetchMissingLinkedToQuoted(this.currentBulkChange, this.$store);
           this.getPreview(fnurgel);
         }
@@ -239,7 +242,7 @@ export default {
     setInspectorData(formData) {
       // Piggy-backing on inspector.data for direct use of entity adder, undo history etc.
       if (typeof formData === 'undefined') {
-        return
+        return;
       }
       this.$store.dispatch('updateInspectorData', {
         changeList: [
@@ -422,6 +425,29 @@ export default {
     setAsDraft() {
       this.setRunStatus('DraftBulkChange');
     },
+    openIdListModal() {
+      this.showIdListModal = true;
+    },
+    setIdListUri() {
+      this.showIdListModal = false;
+      const matchForm = cloneDeep(this.inspector.data.mainEntity);
+      matchForm._idList = {
+        '@type': 'AnyOf',
+        'valuesFrom': { '@id': this.idListUri }
+      };
+      this.setInspectorData(matchForm);
+    },
+    removeIdList() {
+      const matchForm = cloneDeep(this.inspector.data.mainEntity);
+      delete matchForm['_idList'];
+      this.idListUri = '';
+      this.setInspectorData(matchForm);
+    },
+    initIdListUri() {
+      if (this.currentSpec.matchForm._idList) {
+        this.idListUri = this.currentSpec.matchForm._idList.valuesFrom['@id'];
+      }
+    },
     nextPreview() {
       this.loadingPreview.next = true;
       this.getPreviewFromUrl(`${this.settings.apiPath}${this.nextPreviewLink['@id']}`);
@@ -632,8 +658,11 @@ export default {
           tabindex="0"
           :is-active="isActive('form') && isDraft"
           :form-data="formObj"
+          :id-list-link="idListUri"
+          :first-item-active="isFirstActive"
           @onInactive="onInactiveForm"
           @onActive="focusMatchForm"
+          @removeIdList="removeIdList"
         />
       </div>
       <div ref="targetForm">
@@ -724,9 +753,38 @@ export default {
           @previousPreview="previousPreview"
           @save="save"
           @setAsDraft="setAsDraft"
+          @openIdListModal="openIdListModal"
         />
       </div>
     </div>
+    <modal-component
+      class="ImportFromIdListModal"
+      :title="'Import selection from ID list'"
+      v-if="showIdListModal"
+      @close="showIdListModal = false">
+      <template #modal-body>
+        <div class="ImportFromIdListModal-body">
+          <div class="ImportFromIdListModal-infoText">
+            Ange en länk till en lista med Libris-ID:n (ett ID per rad).
+          </div>
+          <div class="input-group ImportFromIdListModal-form">
+            <label class="input-group-addon ImportFromIdListModal-label" for="id">{{ translatePhrase('URL') }}/{{ translatePhrase('Link') }}</label>
+            <input
+              name="id"
+              class="ImportFromIdListModal-input form-control"
+              ref="ImportFromIdListModalInput"
+              v-model="idListUri"
+              @keyup.enter="setIdListUri" />
+            <span class="input-group-btn">
+              <button
+                class="btn btn-primary btn--md ImportFromIdListModal-confirmButton"
+                @click="setIdListUri"
+                @keyup.enter="setIdListUri">{{ translatePhrase('Continue') }}</button>
+            </span>
+          </div>
+        </div>
+      </template>
+    </modal-component>
     <modal-component
       :title="'Overwrite warning'"
       :width="'600px'"
@@ -812,6 +870,29 @@ export default {
   }
 }
 
+.ImportFromIdListModal {
+  .ModalComponent-container {
+    width: 650px;
+    top: 40%;
+  }
+  &-body {
+    padding: 1em;
+    width: 100%;
+  }
+  &-label {
+    color: @black;
+  }
+  &-infoText {
+    margin-bottom: 1em;
+  }
+  &-input {
+    //width: 50%;
+    color: @black;
+  }
+  &-confirmButton {
+    box-shadow: none;
+  }
+}
 .Modal {
   &-body {
     height: 80%;

diff --git a/cataloging/src/components/care/form-builder.vue b/cataloging/src/components/care/form-builder.vue
@@ -2,13 +2,15 @@
 import EntityForm from '@/components/inspector/entity-form.vue';
 import FieldAdder from '@/components/inspector/field-adder.vue';
 import { mapGetters } from 'vuex';
+import {convertResourceLink, translatePhrase} from "../../utils/filters.js";
 
 export default {
   name: 'form-builder.vue',
   components: { FieldAdder, EntityForm },
   data() {
     return {
       selected: true,
+      showIdListLink: false,
     };
   },
   props: {
@@ -21,6 +23,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    idListLink: {
+      type: String,
+      default: ''
+    },
+    firstItemActive: {
+      type: Boolean,
+      default: false,
+    },
   },
   watch: {
     isActive(newValue, oldValue) {
@@ -38,16 +48,23 @@ export default {
     formTab() {
       return { id: 'form', text: 'test' };
     },
-
+    showIdList() {
+      return this.idListLink !== '';
+    }
   },
-  emits: ['onInactive', 'onActive'],
+  emits: ['onInactive', 'onActive', 'removeIdList'],
   methods: {
+    convertResourceLink,
+    translatePhrase,
     onInactive() {
       this.$emit('onInactive');
     },
     onActive() {
       this.$emit('onActive');
     },
+    removeIdList() {
+      this.$emit('removeIdList');
+    }
   },
 };
 </script>
@@ -59,6 +76,17 @@ export default {
       {{ this.title }}
     </div>
     <div class="FormBuilder-body" :class="{ 'has-selection': isActive }">
+      <div class="FormBuilder-idLabel" v-if="showIdList">
+        {{translatePhrase("Selection from ID list")}}
+      </div>
+      <div class="FormBuilder-idList" v-if="showIdList">
+        <a class="FormBuilder-link" :href="convertResourceLink(this.idListLink)" target="_blank">{{this.idListLink}}</a>
+        <i v-if="firstItemActive"
+          @click="removeIdList"
+          role="button"
+          tabindex="0"
+          class="FormBuilder-closeButton fa fa-close icon--md" />
+      </div>
       <div>
         <entity-form
           :editing-object="'mainEntity'"
@@ -87,6 +115,32 @@ export default {
     }
   }
 
+  &-idList {
+    align-items: center;
+    display: flex;
+    border: 1px solid @grey-lighter;
+    margin-bottom: 20px;
+    width: 100%;
+  }
+
+  &-idLabel {
+    width: fit-content;
+    font-size: 12px;
+    padding-bottom: 4px;
+  }
+
+  &-link {
+    padding: 10px 20px;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &-closeButton {
+    padding-right: 20px;
+  }
+
   &-body {
     height: 100%;
     background-color: @white;

diff --git a/cataloging/src/components/care/preview.vue b/cataloging/src/components/care/preview.vue
@@ -71,11 +71,11 @@ export default {
     },
     noHitsLabel() {
       if (this.hasUnsaved)  {
-        return 'Spara massändring för att förhandsgranska'
+        return translatePhrase('Save bulk change to preview');
       } else if (this.totalItems !== 0 ) {
         return `${this.offset + 1} ${translatePhrase('of')} ${this.totalItems}`
       } else if (this.totalItems === 0) {
-        return 'Inga matchande poster'
+        return translatePhrase('No matching records');
       }
     },
     completedLabel() {

diff --git a/cataloging/src/components/care/target-form-builder.vue b/cataloging/src/components/care/target-form-builder.vue
@@ -3,6 +3,7 @@ import EntityForm from '@/components/inspector/entity-form.vue';
 import FieldAdder from '@/components/inspector/field-adder.vue';
 import { mapGetters } from 'vuex';
 import {isEmpty} from 'lodash-es';
+import {translatePhrase} from "../../utils/filters.js";
 
 export default {
   name: 'target-form-builder.vue',
@@ -58,6 +59,7 @@ export default {
   },
   emits: ['onInactive', 'onActive'],
   methods: {
+    translatePhrase,
     onInactive() {
       this.$emit('onInactive');
     },
@@ -95,8 +97,8 @@ export default {
       </div>
       <div
         v-if="showPreview" v-bind:class="{'TargetFormBuilder-gap': isDraft}">
-      <div v-if="isDraft">
-        Ändringar
+      <div class="TargetFormBuilder-idLabel" v-if="isDraft">
+        {{ translatePhrase('Preview ')}}
       </div>
         <entity-form
           :editing-object="'mainEntity'"
@@ -127,6 +129,12 @@ export default {
     }
   }
 
+  &-idLabel {
+    width: fit-content;
+    font-size: 12px;
+    padding-bottom: 4px;
+  }
+
   &-body {
     height: 100%;
     background-color: @white;

diff --git a/cataloging/src/components/inspector/bulkchange-toolbar.vue b/cataloging/src/components/inspector/bulkchange-toolbar.vue
@@ -64,6 +64,8 @@ export default {
   data() {
     return {
       fieldAdderActive: false,
+      toolsMenuActive: false,
+      showTools: false,
     };
   },
   watch: {
@@ -109,6 +111,12 @@ export default {
         this.fieldAdderActive = false;
       }
     },
+    hideToolsMenu() {
+      this.toolsMenuActive = false;
+    },
+    showToolsMenu() {
+      this.toolsMenuActive = !this.toolsMenuActive;
+    },
     formControl(control) {
       this.$store.dispatch('pushInspectorEvent', {
         name: 'form-control',
@@ -163,6 +171,10 @@ export default {
     cancel() {
       this.$emit('setAsDraft');
     },
+    importFromIdList() {
+      this.hideToolsMenu();
+      this.$emit('openIdListModal');
+    },
   },
   computed: {
     ...mapGetters([
@@ -204,6 +216,44 @@ export default {
 
 <template>
   <div class="Toolbar" id="editor-container">
+    <div
+      class="dropdown Toolbar-menu ToolsMenu"
+      v-on-click-outside="hideToolsMenu">
+      <button
+        class="Toolbar-btn btn btn-default ToolsMenu-button"
+        @click="showToolsMenu"
+        aria-haspopup="true"
+        aria-expanded="true"
+        v-tooltip.left="translatePhrase('Tools')"
+        @mouseover="showTools = true"
+        @mouseout="showTools = false"
+        :aria-label="translatePhrase('Tools')">
+        <i class="fa fa-fw fa-wrench" aria-hidden="true"/>
+        <span class="Toolbar-caret caret"/>
+      </button>
+      <ul
+        class="dropdown-menu Toolbar-menuList ToolsMenu-menu"
+        v-show="toolsMenuActive">
+        <li class="Toolbar-menuItem">
+          <a class="Toolbar-menuLink" @click="formControl('expand-item'), hideToolsMenu()">
+            <i class="fa fa-fw fa-expand" aria-hidden="true" />
+            {{ translatePhrase("Expand all") }}{{ getKeybindText('expand-item') ? ` (${getKeybindText('expand-item')})` : ''}}
+          </a>
+        </li>
+        <li class="Toolbar-menuItem">
+          <a class="Toolbar-menuLink" @click="formControl('collapse-item'), hideToolsMenu()">
+            <i class="fa fa-fw fa-compress" aria-hidden="true" />
+            {{ translatePhrase("Collapse all") }}{{ getKeybindText('collapse-item') ? ` (${getKeybindText('collapse-item')})` : ''}}
+          </a>
+        </li>
+        <li class="Toolbar-menuItem">
+          <a class="Toolbar-menuLink" @click="importFromIdList" v-if="firstItemActive">
+            <i class="fa fa-fw fa-chain" />
+            {{ translatePhrase('Import selection from ID list') }}
+          </a>
+        </li>
+      </ul>
+    </div>
     <button
       v-if="isDraft"
       class="Toolbar-btn btn btn-default toolbar-button"