@konfuzio/document-validation-ui 0.1.6-pre-release-1 → 0.1.6-pre-release

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konfuzio/document-validation-ui",
-  "version": "0.1.6-pre-release-1",
+  "version": "0.1.6-pre-release",
   "repository": "git://github.com:konfuzio-ai/document-validation-ui.git",
   "main": "dist/app.js",
   "scripts": {
@@ -39,6 +39,7 @@
     "vue-i18n": "^8.27.1",
     "vue-i18n-bridge": "^9.2.2",
     "vue-konva": "^2.1.7",
+    "vue-observe-visibility": "^1.0.0",
     "vue-template-compiler": "^2.6.10",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"

package/src/assets/images/DraggableIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.5 4.94922C4.30222 4.94922 4.10888 5.00787 3.94443 5.11775C3.77998 5.22763 3.65181 5.38381 3.57612 5.56654C3.50043 5.74926 3.48063 5.95033 3.51922 6.14431C3.5578 6.33829 3.65304 6.51647 3.79289 6.65633C3.93275 6.79618 4.11093 6.89142 4.30491 6.93C4.49889 6.96859 4.69996 6.94879 4.88268 6.8731C5.06541 6.79741 5.22159 6.66924 5.33147 6.50479C5.44135 6.34034 5.5 6.147 5.5 5.94922C5.5 5.684 5.39464 5.42965 5.20711 5.24211C5.01957 5.05458 4.76522 4.94922 4.5 4.94922ZM4.5 8.44922C4.30222 8.44922 4.10888 8.50787 3.94443 8.61775C3.77998 8.72763 3.65181 8.88381 3.57612 9.06654C3.50043 9.24926 3.48063 9.45033 3.51922 9.64431C3.5578 9.83829 3.65304 10.0165 3.79289 10.1563C3.93275 10.2962 4.11093 10.3914 4.30491 10.43C4.49889 10.4686 4.69996 10.4488 4.88268 10.3731C5.06541 10.2974 5.22159 10.1692 5.33147 10.0048C5.44135 9.84034 5.5 9.647 5.5 9.44922C5.5 9.184 5.39464 8.92965 5.20711 8.74211C5.01957 8.55458 4.76522 8.44922 4.5 8.44922ZM8 3.44922C8.19778 3.44922 8.39112 3.39057 8.55557 3.28069C8.72002 3.17081 8.84819 3.01463 8.92388 2.8319C8.99957 2.64918 9.01937 2.44811 8.98079 2.25413C8.9422 2.06015 8.84696 1.88196 8.70711 1.74211C8.56725 1.60226 8.38907 1.50702 8.19509 1.46843C8.00111 1.42985 7.80004 1.44965 7.61732 1.52534C7.43459 1.60103 7.27841 1.7292 7.16853 1.89365C7.05865 2.0581 7 2.25144 7 2.44922C7 2.71444 7.10536 2.96879 7.29289 3.15633C7.48043 3.34386 7.73478 3.44922 8 3.44922ZM4.5 1.44922C4.30222 1.44922 4.10888 1.50787 3.94443 1.61775C3.77998 1.72763 3.65181 1.88381 3.57612 2.06654C3.50043 2.24926 3.48063 2.45033 3.51922 2.64431C3.5578 2.83829 3.65304 3.01647 3.79289 3.15633C3.93275 3.29618 4.11093 3.39142 4.30491 3.43C4.49889 3.46859 4.69996 3.44879 4.88268 3.3731C5.06541 3.29741 5.22159 3.16924 5.33147 3.00479C5.44135 2.84034 5.5 2.647 5.5 2.44922C5.5 2.184 5.39464 1.92965 5.20711 1.74211C5.01957 1.55458 4.76522 1.44922 4.5 1.44922ZM8 8.44922C7.80222 8.44922 7.60888 8.50787 7.44443 8.61775C7.27998 8.72763 7.15181 8.88381 7.07612 9.06654C7.00043 9.24926 6.98063 9.45033 7.01922 9.64431C7.0578 9.83829 7.15304 10.0165 7.29289 10.1563C7.43275 10.2962 7.61093 10.3914 7.80491 10.43C7.99889 10.4686 8.19996 10.4488 8.38268 10.3731C8.56541 10.2974 8.72159 10.1692 8.83147 10.0048C8.94135 9.84034 9 9.647 9 9.44922C9 9.184 8.89464 8.92965 8.70711 8.74211C8.51957 8.55458 8.26522 8.44922 8 8.44922ZM8 4.94922C7.80222 4.94922 7.60888 5.00787 7.44443 5.11775C7.27998 5.22763 7.15181 5.38381 7.07612 5.56654C7.00043 5.74926 6.98063 5.95033 7.01922 6.14431C7.0578 6.33829 7.15304 6.51647 7.29289 6.65633C7.43275 6.79618 7.61093 6.89142 7.80491 6.93C7.99889 6.96859 8.19996 6.94879 8.38268 6.8731C8.56541 6.79741 8.72159 6.66924 8.83147 6.50479C8.94135 6.34034 9 6.147 9 5.94922C9 5.684 8.89464 5.42965 8.70711 5.24211C8.51957 5.05458 8.26522 4.94922 8 4.94922Z"
+      fill="white"
+    />
+  </svg>
+</template>

package/src/assets/images/GridIcon.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.33203 1.9987C1.33203 1.63051 1.63051 1.33203 1.9987 1.33203H6.66537C7.03356 1.33203 7.33203 1.63051 7.33203 1.9987V6.66537C7.33203 7.03356 7.03356 7.33203 6.66537 7.33203H1.9987C1.63051 7.33203 1.33203 7.03356 1.33203 6.66537V1.9987ZM2.66536 2.66536V5.9987H5.9987V2.66536H2.66536ZM8.66537 1.9987C8.66537 1.63051 8.96384 1.33203 9.33203 1.33203H13.9987C14.3669 1.33203 14.6654 1.63051 14.6654 1.9987V6.66537C14.6654 7.03356 14.3669 7.33203 13.9987 7.33203H9.33203C8.96384 7.33203 8.66537 7.03356 8.66537 6.66537V1.9987ZM9.9987 2.66536V5.9987H13.332V2.66536H9.9987ZM1.33203 9.33203C1.33203 8.96384 1.63051 8.66537 1.9987 8.66537H6.66537C7.03356 8.66537 7.33203 8.96384 7.33203 9.33203V13.9987C7.33203 14.3669 7.03356 14.6654 6.66537 14.6654H1.9987C1.63051 14.6654 1.33203 14.3669 1.33203 13.9987V9.33203ZM2.66536 9.9987V13.332H5.9987V9.9987H2.66536ZM8.66537 9.33203C8.66537 8.96384 8.96384 8.66537 9.33203 8.66537H13.9987C14.3669 8.66537 14.6654 8.96384 14.6654 9.33203V13.9987C14.6654 14.3669 14.3669 14.6654 13.9987 14.6654H9.33203C8.96384 14.6654 8.66537 14.3669 8.66537 13.9987V9.33203ZM9.9987 9.9987V13.332H13.332V9.9987H9.9987Z"
+      fill="#7B61FF"
+    />
+  </svg>
+</template>

package/src/assets/images/ServerImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="display: flex">
+  <div v-observe-visibility="visibilityChanged" style="display: flex">
     <img v-show="loaded" ref="imgTag" :height="height" />
     <slot v-if="!loaded" />
   </div>
@@ -27,16 +27,16 @@ export default {
   data() {
     return {
       loaded: false,
+      isVisible: false,
     };
   },
   watch: {
     imageUrl() {
-      this.loadImage();
+      if (this.isVisible) {
+        this.loadImage();
+      }
     },
   },
-  mounted() {
-    this.loadImage();
-  },
   methods: {
     loadImage() {
       if (!this.imageUrl) return;
@@ -56,6 +56,12 @@ export default {
           this.loaded = false;
         });
     },
+    visibilityChanged(isVisible) {
+      if (!this.isVisible && isVisible) {
+        this.isVisible = isVisible;
+        this.loadImage();
+      }
+    },
   },
 };
 </script>

package/src/assets/images/SettingsIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M13.361 8.4396C13.2541 8.31795 13.1952 8.16154 13.1952 7.9996C13.1952 7.83767 13.2541 7.68126 13.361 7.55961L14.2143 6.5996C14.3084 6.49472 14.3668 6.36274 14.3811 6.22261C14.3955 6.08248 14.3651 5.9414 14.2943 5.8196L12.961 3.51294C12.8909 3.39129 12.7843 3.29486 12.6562 3.2374C12.5281 3.17993 12.3851 3.16438 12.2477 3.19294L10.9943 3.44627C10.8349 3.47922 10.6688 3.45266 10.5276 3.3716C10.3864 3.29055 10.2797 3.16059 10.2277 3.00627L9.821 1.78627C9.77627 1.65386 9.69107 1.53885 9.57742 1.4575C9.46377 1.37615 9.32743 1.33258 9.18766 1.33294H6.521C6.37562 1.32535 6.23175 1.36556 6.11138 1.44741C5.991 1.52927 5.90072 1.64828 5.85433 1.78627L5.481 3.00627C5.429 3.16059 5.32231 3.29055 5.18107 3.3716C5.03983 3.45266 4.87381 3.47922 4.71433 3.44627L3.42767 3.19294C3.29737 3.17453 3.16453 3.19509 3.0459 3.25203C2.92726 3.30898 2.82813 3.39976 2.761 3.51294L1.42767 5.8196C1.35511 5.94004 1.32248 6.08033 1.33445 6.22042C1.34643 6.36051 1.40239 6.49323 1.49433 6.5996L2.341 7.55961C2.44788 7.68126 2.50682 7.83767 2.50682 7.9996C2.50682 8.16154 2.44788 8.31795 2.341 8.4396L1.49433 9.39961C1.40239 9.50598 1.34643 9.6387 1.33445 9.77879C1.32248 9.91888 1.35511 10.0592 1.42767 10.1796L2.761 12.4863C2.83106 12.6079 2.93774 12.7044 3.06583 12.7618C3.19392 12.8193 3.33688 12.8348 3.47433 12.8063L4.72766 12.5529C4.88714 12.52 5.05317 12.5465 5.19441 12.6276C5.33565 12.7087 5.44233 12.8386 5.49433 12.9929L5.901 14.2129C5.94738 14.3509 6.03766 14.4699 6.15804 14.5518C6.27842 14.6337 6.42229 14.6739 6.56766 14.6663H9.23433C9.37409 14.6666 9.51044 14.6231 9.62408 14.5417C9.73773 14.4604 9.82294 14.3454 9.86766 14.2129L10.2743 12.9929C10.3263 12.8386 10.433 12.7087 10.5743 12.6276C10.7155 12.5465 10.8815 12.52 11.041 12.5529L12.2943 12.8063C12.4318 12.8348 12.5747 12.8193 12.7028 12.7618C12.8309 12.7044 12.9376 12.6079 13.0077 12.4863L14.341 10.1796C14.4118 10.0578 14.4422 9.91673 14.4278 9.7766C14.4134 9.63647 14.355 9.50449 14.261 9.39961L13.361 8.4396ZM12.3677 9.33294L12.901 9.93294L12.0477 11.4129L11.261 11.2529C10.7809 11.1548 10.2814 11.2364 9.85739 11.4821C9.43341 11.7279 9.11443 12.1208 8.961 12.5863L8.70767 13.3329H7.001L6.761 12.5729C6.60757 12.1075 6.28859 11.7146 5.8646 11.4688C5.44062 11.223 4.94115 11.1415 4.461 11.2396L3.67433 11.3996L2.80767 9.92627L3.341 9.32627C3.66897 8.95959 3.85029 8.48489 3.85029 7.99294C3.85029 7.50098 3.66897 7.02629 3.341 6.6596L2.80767 6.0596L3.661 4.59294L4.44767 4.75294C4.92781 4.85109 5.42728 4.76953 5.85127 4.52374C6.27525 4.27795 6.59423 3.88504 6.74766 3.4196L7.001 2.66627H8.70767L8.961 3.42627C9.11443 3.89171 9.43341 4.28462 9.85739 4.5304C10.2814 4.77619 10.7809 4.85775 11.261 4.7596L12.0477 4.5996L12.901 6.0796L12.3677 6.67961C12.0434 7.04545 11.8643 7.51739 11.8643 8.00627C11.8643 8.49515 12.0434 8.9671 12.3677 9.33294ZM7.85433 5.33294C7.32691 5.33294 6.81134 5.48934 6.37281 5.78235C5.93428 6.07537 5.59249 6.49185 5.39065 6.97912C5.18882 7.46638 5.13601 8.00256 5.2389 8.51985C5.3418 9.03713 5.59577 9.51228 5.96871 9.88522C6.34165 10.2582 6.81681 10.5121 7.33409 10.615C7.85137 10.7179 8.38755 10.6651 8.87482 10.4633C9.36209 10.2615 9.77857 9.91966 10.0716 9.48113C10.3646 9.04259 10.521 8.52702 10.521 7.9996C10.521 7.29236 10.24 6.61408 9.73995 6.11399C9.23985 5.61389 8.56158 5.33294 7.85433 5.33294ZM7.85433 9.33294C7.59062 9.33294 7.33284 9.25474 7.11357 9.10823C6.89431 8.96172 6.72341 8.75348 6.62249 8.50985C6.52158 8.26621 6.49517 7.99813 6.54662 7.73948C6.59807 7.48084 6.72505 7.24327 6.91152 7.0568C7.09799 6.87033 7.33557 6.74334 7.59421 6.69189C7.85285 6.64044 8.12094 6.66685 8.36458 6.76777C8.60821 6.86868 8.81645 7.03958 8.96296 7.25884C9.10947 7.47811 9.18766 7.7359 9.18766 7.9996C9.18766 8.35323 9.04719 8.69237 8.79714 8.94241C8.54709 9.19246 8.20795 9.33294 7.85433 9.33294Z"
+      fill="white"
+    />
+  </svg>
+</template>

package/src/assets/scss/ann_set_table_options.scss

@@ -0,0 +1,26 @@
+@import "./imports.scss";
+
+.ann-set-table-header {
+  position: absolute;
+  background-color: $purple;
+  color: $white;
+  font-size: 14px;
+  padding: 4px;
+  z-index: 9;
+  border-radius: 2px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+
+  .ann-set-table-header-dropdown {
+    cursor: pointer;
+    .ann-set-label-set-name {
+      margin-right: 4px;
+    }
+
+    .delete-action {
+      color: $red;
+    }
+  }
+}

package/src/assets/scss/annotation_details.scss

@@ -1,99 +1,111 @@
 @import "./imports.scss";
 
-.label-icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 40px;
-
-  .annotation-details-icon {
+.annotation-details {
+  .label-icon {
     display: flex;
-    padding: 0 15px;
+    align-items: center;
+    justify-content: center;
 
-    &.animated-ripple {
-      animation: bounce 0.4s 0.1s;
-      transform: scale(1);
-    }
+    .annotation-details-icon {
+      display: flex;
 
-    svg {
-      width: 25px;
-    }
+      &.animated-ripple {
+        animation: bounce 0.4s 0.1s;
+        transform: scale(1);
+      }
 
-    &.user-icon {
-      padding: 0 18px;
       svg {
-        width: 20px;
+        width: 25px;
       }
-    }
-  }
-}
-
-.label-details {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  min-width: 100px;
 
-  .label-description {
-    opacity: 0.7;
-    color: $white;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    border-bottom: 1px solid $low-opacity-white;
-    padding-bottom: 8px;
-    word-wrap: break-all;
-    white-space: normal;
-    width: 216px;
-  }
-
-  .confidence {
-    color: $white;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    border-bottom: 1px solid $low-opacity-white;
-    padding-bottom: 8px;
-
-    .value {
-      color: $green;
-
-      &.yellow {
-        color: $yellow;
+      &.user-icon {
+        padding: 0 3px;
+        svg {
+          width: 20px;
+        }
       }
-
-      &.red {
-        color: $red;
+    }
+    &.is-small {
+      .annotation-details-icon {
+        svg {
+          width: 16px;
+        }
+        &.user-icon {
+          svg {
+            width: 12px;
+          }
+        }
       }
     }
   }
 
-  .revision {
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    color: $white;
+  .label-details {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    min-width: 100px;
+
+    .label-description {
+      opacity: 0.7;
+      color: $white;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      border-bottom: 1px solid $low-opacity-white;
+      padding-bottom: 8px;
+      word-wrap: break-all;
+      white-space: normal;
+      width: 216px;
+    }
 
-    > div {
+    .confidence {
+      color: $white;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
       display: flex;
-      align-items: center;
+      flex-direction: row;
+      justify-content: space-between;
+      border-bottom: 1px solid $low-opacity-white;
+      padding-bottom: 8px;
+
+      .value {
+        color: $green;
+
+        &.yellow {
+          color: $yellow;
+        }
+
+        &.red {
+          color: $red;
+        }
+      }
     }
 
-    .annotation-details-icon {
-      display: flex;
+    .revision {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 18px;
+      color: $white;
 
-      svg {
-        width: 25px;
+      > div {
+        display: flex;
+        align-items: center;
       }
 
-      &.user-icon {
-        padding-right: 5px;
+      .annotation-details-icon {
+        display: flex;
 
         svg {
-          width: 20px;
+          width: 25px;
+        }
+
+        &.user-icon {
+          padding-right: 5px;
+
+          svg {
+            width: 20px;
+          }
         }
       }
     }

package/src/assets/scss/document_annotations.scss

@@ -68,6 +68,37 @@
           color: $text;
         }
       }
+
+      .ann-set-table {
+        display: flex;
+        align-items: center;
+        width: fit-content;
+        cursor: pointer;
+        &:not(:last-child) {
+          padding-bottom: 12px;
+        }
+
+        .ann-set-table-icon {
+          padding: 4px 8px;
+          border-radius: 32px;
+          margin-left: 14px;
+          background: $purple-low-opacity;
+          display: flex;
+          width: fit-content;
+          align-items: center;
+          .ann-set-number {
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            margin-left: 4px;
+          }
+        }
+        .ann-set-table-label-set-name {
+          margin-left: 8px;
+          font-size: 14px;
+          line-height: 20px;
+        }
+      }
     }
 
     .labels {
@@ -149,6 +180,11 @@
             display: flex;
             align-items: center;
 
+            .annotation-icon {
+              height: 40px;
+              padding: 0 15px;
+            }
+
             .label-name {
               padding: 10px 0;
               padding-right: 4px;
@@ -397,6 +433,17 @@
   }
 }
 
+.annotation-row {
+  display: flex;
+  align-items: center;
+  .annotation-icon {
+    display: flex;
+  }
+  .annotation-value {
+    outline: none;
+  }
+}
+
 .message {
   .message-container {
     display: flex;

package/src/assets/scss/document_dashboard.scss

@@ -17,8 +17,7 @@
 
     .dashboard-document {
       height: 100%;
-      overflow-y: auto;
-      overflow-x: hidden;
+      overflow: visible;
       position: relative;
       flex: 1;
       background-image: radial-gradient(#bfc1c9 0.8px, #ededed 0.1px);

package/src/assets/scss/document_edit.scss

@@ -26,15 +26,14 @@
       gap: 20px;
 
       .image-section {
+        cursor: grab;
         width: 138px;
         height: 138px;
         display: flex;
         align-items: center;
 
         .img-container {
-          &:hover {
-            cursor: pointer;
-          }
+          cursor: pointer;
 
           .img-thumbnail {
             border: $component-border;

package/src/assets/scss/main.scss

@@ -251,6 +251,10 @@ body {
         background-color: $primary;
       }
 
+      a.dropdown-item.is-disabled {
+        color: $grey-blue !important;
+      }
+
       &.dropdown-menu-animation {
         a.navbar-item {
           color: $text-color;
@@ -405,7 +409,7 @@ body {
       }
     }
 
-    .invisible-parent-modal {
+    &.invisible-parent-modal {
       background-color: transparent;
 
       .modal-content {
@@ -462,6 +466,8 @@ body {
     }
 
     .b-tooltip {
+      height: 100%;
+      align-items: center;
       .tooltip-content {
         background-color: $text-color !important;
 
@@ -470,11 +476,14 @@ body {
           text-decoration: underline;
           font-weight: 500;
         }
+        &:before {
+          border-bottom-color: $text-color !important;
+        }
       }
 
       &.left-aligned {
         .tooltip-content {
-          left: 10px !important;
+          left: -3px !important;
           transform: none !important;
           padding: 8px 10px !important;
 
@@ -629,6 +638,9 @@ body {
     }
 
     .b-table {
+      .table-wrapper {
+        overflow: visible !important;
+      }
       &.full-height {
         height: 100%;
         .table-wrapper {
@@ -638,10 +650,34 @@ body {
           }
         }
       }
-      .table {
+
+      &.dark-header {
+        .table {
+          thead {
+            background-color: $black !important;
+            th {
+              font-weight: 400;
+              background-color: $black !important;
+            }
+          }
+        }
+      }
+
+      &.header-32 {
+        thead {
+          height: 32px;
+        }
+      }
+
+      .table,
+      .table-wrapper {
+        &.has-sticky-header {
+          max-height: 200px;
+          height: fit-content;
+        }
         cursor: text;
         thead {
-          background-color: #7b61ff;
+          background-color: $purple !important;
           font-weight: 500;
           font-size: 10px;
           line-height: 18px;
@@ -652,8 +688,8 @@ body {
                 margin: 0;
               }
             }
-            background-color: #7b61ff;
-            color: white;
+            background-color: $purple !important;
+            color: white !important;
             vertical-align: middle;
             &[draggable="true"] {
               cursor: move;

package/src/assets/scss/multi_ann_table_overlay.scss

@@ -0,0 +1,38 @@
+@import "./imports.scss";
+
+.multi-ann-table-overlay {
+  position: absolute;
+  bottom: 0;
+  height: fit-content;
+  z-index: 40;
+  width: 100%;
+  background-color: $background;
+
+  .multi-ann-set-table {
+    padding-bottom: 6px;
+
+    .table-wrapper {
+      overflow: visible;
+      .header-dropdown {
+        cursor: pointer;
+
+        .icon.arrow {
+          margin-left: 4px;
+        }
+        .draggable {
+          margin-right: 4px;
+          cursor: move;
+        }
+
+        .delete-action {
+          color: $red;
+        }
+      }
+
+      .annotations-table {
+        min-height: 22px;
+        display: flex;
+      }
+    }
+  }
+}

package/src/assets/scss/variables.scss

@@ -37,6 +37,8 @@ $yellow: #ffd600;
 $warning-yellow: #fec84b;
 
 $blue: #2f80ed;
+$purple: #7b61ff;
+$purple-low-opacity: rgba(123, 97, 255, 0.08);
 $text-color: #1a1a1a;
 
 :root {

package/src/components/App.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="dv-ui-app-container dv-ui-theme">
-    <DocumentsList />
+    <DocumentsList v-if="showDocumentsList" />
     <DocumentDashboard />
   </div>
 </template>
 <script>
 import DocumentDashboard from "./DocumentDashboard";
 import { DocumentsList } from "./DocumentsList";
-import { getURLQueryParam } from "../utils/utils";
+import { getURLQueryParam, getURLPath } from "../utils/utils";
 import API from "../api";
 
 export default {
@@ -49,6 +49,8 @@ export default {
     documentId() {
       if (getURLQueryParam("document")) {
         return getURLQueryParam("document");
+      } else if (getURLPath("docs")) {
+        return getURLPath("docs");
       } else if (process.env.VUE_APP_DOCUMENT_ID) {
         return process.env.VUE_APP_DOCUMENT_ID;
       } else if (this.document) {
@@ -86,6 +88,9 @@ export default {
         return true;
       }
     },
+    showDocumentsList() {
+      return process.env.VUE_APP_SHOW_DOCUMENTS_LIST;
+    },
   },
   created() {
     // locale config