Release v3.0.4

package.json

@@ -53,25 +53,25 @@
     "svg-overlay": "github:openseadragon/svg-overlay",
     "uuid": "9.0.1",
     "vue": "3.4.30",
+    "vue-3-slider-component": "1.0.0",
     "vue-flatpickr-component": "11.0.5",
     "vue-i18n": "9.13.1",
     "vue-matomo": "^4.2.0",
     "vue-router": "4.3.2",
-    "vue-3-slider-component": "1.0.0",
     "webfontloader": "1.6.28"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.5.0",
     "@intlify/unplugin-vue-i18n": "4.0.0",
     "@rushstack/eslint-patch": "^1.8.0",
-    "@storybook/addon-actions": "^8.1.8",
+    "@storybook/addon-actions": "^8.3.5",
     "@storybook/addon-essentials": "^8.3.5",
-    "@storybook/addon-interactions": "^8.1.8",
-    "@storybook/addon-links": "^8.1.8",
+    "@storybook/addon-interactions": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
     "@storybook/blocks": "^8.3.5",
-    "@storybook/test": "^8.1.8",
-    "@storybook/vue3": "^8.1.8",
-    "@storybook/vue3-vite": "^8.1.8",
+    "@storybook/test": "^8.3.5",
+    "@storybook/vue3": "^8.3.5",
+    "@storybook/vue3-vite": "^8.3.5",
     "@tsconfig/node20": "^20.1.4",
     "@types/d3": "^5.7.2",
     "@types/jsdom": "^21.1.6",
@@ -85,6 +85,7 @@
     "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "10.4.19",
+    "buffer": "^6.0.3",
     "eslint": "^8.57.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.23.0",
@@ -96,7 +97,7 @@
     "prettier": "^3.2.5",
     "sass": "1.77.4",
     "start-server-and-test": "^2.0.3",
-    "storybook": "^8.1.8",
+    "storybook": "^8.3.5",
     "storybook-vue3-router": "^5.0.0",
     "typescript": "~5.4.0",
     "vite": "^5.3.1",

src/components/CollectionDetailPage.vue

@@ -76,7 +76,13 @@
           </b-dropdown>
         </section>
 
-        <Modal id="confirmDelete" :show="isConfirmDeleteModalVisible" @ok="remove(collection)">
+        <Modal
+          id="confirmDelete"
+          :title="$t('delete_collection_no_option')"
+          centered
+          :show="isConfirmDeleteModalVisible"
+          @ok="remove(collection)"
+        >
           {{ this.$t('confirm_delete', [collection.name]) }}
         </Modal>
       </b-navbar>
@@ -113,26 +119,15 @@
         "
       >
         <b-navbar-nav v-if="$route.params.collection_uid">
-          <li class="p-2 ml-3 form-inline">
-            <form class="form-inline">
-              <button
-                type="button"
-                class="btn btn-outline-primary btn-sm"
-                v-on:click="applyFilter()"
-              >
-                {{ $t('actions.addToCurrentFilters') }}
-              </button>
-            </form>
-          </li>
-          <li class="p-2 form-inline">
+          <b-navbar-item class="p-2 ml-3 form-inline">
             <form class="form-inline">
               <router-link class="btn btn-outline-primary btn-sm" :to="searchPageLink">
                 {{ $t('actions.searchMore') }}
               </router-link>
             </form>
-          </li>
+          </b-navbar-item>
         </b-navbar-nav>
-        <b-navbar-nav class="ml-3">
+        <b-navbar-nav>
           <b-button
             @click="handleExportCollection"
             size="sm"
@@ -675,6 +670,7 @@ export default {
     "edit_collection": "Settings",
     "update_collection": "Update Collection Note",
     "delete_collection": "Delete Collection [alt/option to bypass confirmation]",
+    "delete_collection_no_option": "Delete Collection",
     "compare_collection": "Compare with ...",
     "confirm_delete": "Are you sure you want to delete collection '{0}'?",
     "no_articles_in_collection": "No items in collection yet.",

src/components/IIIFFragment.vue

@@ -190,8 +190,8 @@ export default defineComponent({
           return 'success'
         })
         .catch(error => {
-          if (error.response.status !== 404) {
-            this.errorMessage = error.message + iiif
+          if (error?.response?.status !== 404) {
+            this.errorMessage = `${error.message}: ${iiif}`
             return 'error'
           }
           console.warn(

src/components/TheHeader.vue

@@ -139,39 +139,7 @@
       </b-navbar-nav>
       <!-- user area -->
       <b-navbar-nav v-if="user" class="TheHeader__userArea mx-2">
-        <b-nav-item-dropdown class="px-0" right>
-          <template v-slot:button-content>
-            <div class="d-flex px-2 py-1 align-items-center">
-              <div class="user-picture position-relative mr-2 me-2" :style="userPicture"></div>
-              <div class="user-label mr-4 me-4">
-                <div class="user-fullname">{{ userFullName }}</div>
-                <div class="user-role mt-1 small-caps">{{ userRole }}</div>
-              </div>
-            </div>
-          </template>
-          <b-dropdown-item :to="{ name: 'user' }">{{ $t('profile') }}</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'termsOfUse' }" active-class="active">
-            {{ $t('label_terms_of_use') }}
-          </b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'collections' }" active-class="active">{{
-            $t('collections')
-          }}</b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'logout' }">{{ $t('logout') }}</b-dropdown-item>
-          <b-dropdown-item v-if="user && user.isStaff" v-on:click="test()"
-            >send test job</b-dropdown-item
-          >
-          <b-dropdown-item
-            target="_blank"
-            href="https://join.slack.com/t/impresso-community/shared_invite/enQtNTg5MzY2NDg2NTAyLTdiMmI2ZWU5ZjliNGNjN2M4NTgxM2UzOTQyYTkxYWU4MTgwN2I1MzQxMzg3N2Y0NGU3OGFjMzFmMGIyNGRlZmQ"
-          >
-            <icon name="slack" />
-            <span v-html="$t('join_slack_channel')"></span>
-          </b-dropdown-item>
-
-          <b-dropdown-item>
-            <span v-html="$t('current_version', { version })"></span>
-          </b-dropdown-item>
-        </b-nav-item-dropdown>
+        <UserArea :user="user" />
       </b-navbar-nav>
       <!-- end of user area -->
       <!-- login area -->
@@ -202,7 +170,7 @@
           >
           <span v-else-if="error.name === 'BadRequest'">
             {{ $t(`errors.BadRequest`) }}
-            <span v-if="error.message === 'Login incorrect'">{{ error.message }}</span>
+            <span>{{ error.message }}</span>
           </span>
           <span v-else-if="error.name === 'GeneralError'">
             {{
@@ -237,6 +205,7 @@ import { useJobsStore } from '@/stores/jobs'
 import { useSettingsStore } from '@/stores/settings'
 import { useUserStore } from '@/stores/user'
 import { useNotificationsStore } from '@/stores/notifications'
+import UserArea from './UserArea.vue'
 
 export default defineComponent({
   // props: {
@@ -288,15 +257,15 @@ export default defineComponent({
       return {
         name: 'login',
         query: {
-          redirect: this.$route.path
+          redirect: this.$route.fullPath
         }
       }
     },
     registerRouteParams() {
       return {
         name: 'register',
         query: {
-          redirect: this.$route.path
+          redirect: this.$route.fullPath
         }
       }
     },
@@ -319,14 +288,15 @@ export default defineComponent({
       return this.settingsStore.language_code
     },
     showAlert() {
-      const messages = this.notificationsStore.errorMessages
-      if (messages.length && !this.user && messages[0].name === 'NotAuthenticated') {
-        return false
-      }
-      return messages.length > 0
+      return this.errorMessages.length > 0
     },
     errorMessages() {
-      return this.notificationsStore.errorMessages
+      return this.notificationsStore.errorMessages.filter(m => {
+        if (m.name === 'NotAuthenticated' && !this.user) {
+          return false
+        }
+        return true
+      })
     },
     processingStatus() {
       return this.notificationsStore.processingStatus
@@ -446,7 +416,8 @@ export default defineComponent({
     // Toast,
     JobItem,
     Pagination,
-    InfoButton
+    InfoButton,
+    UserArea
   }
 })
 </script>
@@ -458,21 +429,6 @@ export default defineComponent({
   height: 56px;
 }
 
-.TheHeader__userArea {
-  background-color: transparent;
-}
-.TheHeader__userArea .nav-item .nav-link.dropdown-toggle {
-  // padding: 0;
-  border-radius: var(--border-radius-sm);
-}
-.TheHeader__userArea .nav-item.show {
-  border-radius: var(--border-radius-sm);
-}
-.TheHeader__userArea .nav-item.show .nav-link.dropdown-toggle {
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-
 .TheHeader .navbar-nav .nav-link {
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -481,10 +437,6 @@ export default defineComponent({
   min-width: 50px;
 }
 
-#app-header .dropdown-toggle[aria-expanded='true'] {
-  border-bottom: 0px solid transparent !important;
-}
-
 #app-header {
   .Cookie--blood-orange {
     background: $clr-secondary;
@@ -679,27 +631,6 @@ export default defineComponent({
     line-height: 2.25rem;
     margin-top: -1rem;
   }
-
-  .user-picture {
-    background: $clr-primary;
-    width: 2em;
-    height: 2em;
-    border-radius: 2em;
-    border: 1px solid $clr-accent-light;
-  }
-
-  .user-fullname {
-    padding-bottom: 0.125rem;
-
-    line-height: 1em;
-    font-weight: bold;
-    color: white;
-  }
-
-  .user-role {
-    line-height: 1;
-    // font-size: 0.8em;
-  }
 }
 
 .jobs-list > .list {
@@ -733,6 +664,7 @@ export default defineComponent({
 
   .error-id {
     margin-left: 1rem;
+    white-space: nowrap;
   }
 }
 </style>
@@ -742,7 +674,7 @@ export default defineComponent({
   "en": {
     "login": "login",
     "register": "register",
-    "logout": "logout",
+    "logout": "Logout",
     "dashboard": "Dashboard",
     "collections": "Collections",
     "profile": "Profile",