Update Vue and various components, and consolidate common CSS

modules/admin/app/assets/css/admin/_admin.scss

@@ -470,16 +470,14 @@ body.spa-app {
 }
 
 .app-content {
-  @include make-container();
-  @include make-container-max-widths();
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  margin-top: $margin-md;
+  @extend %expanding-column;
 }
 
 .app-content-inner {
+  @include make-container();
+  @include make-container-max-widths();
   @extend %expanding-column;
+  margin-top: $margin-md;
 }
 
 .priority-badge {

modules/admin/app/assets/css/apps.scss

@@ -0,0 +1,85 @@
+@import "lib/docview-portal/css/portal.scss";
+
+//Admin
+@import "./admin/admin";
+@import "./admin/forms";
+
+// Styling common to docview VueJS applications
+
+#app-error-notice {
+  position: absolute;
+  bottom: $margin-sm;
+  right: $margin-sm;
+  padding: $margin-xs $margin-sm;
+  z-index: 100;
+
+  .close {
+    margin-left: $margin-xs;
+    margin-top: -3px;
+    cursor: pointer;
+  }
+}
+
+.modal {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.modal-alert {
+  z-index: 1000;
+  display: flex !important;
+
+  .modal-content {
+    box-shadow: $box-shadow-lg;
+  }
+}
+
+.modal-content.resizable {
+  min-height: 30rem;
+}
+
+.modal-content.resizable > .modal-body {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.modal-resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: inline;
+  width: 1rem;
+  height: 1rem;
+  cursor: nwse-resize;
+}
+
+.modal-resize-handle:after {
+  content:'';
+  display:block;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid $ehri-border-gray;
+  width: 2px;
+  height: 5px;
+  position: absolute;
+  pointer-events: none;
+  right: -1px;
+  bottom: 1px;
+  transform: rotate(135deg);
+}
+
+.options-form {
+  padding: $margin-md;
+  input:invalid {
+    background-color: lighten($danger, 40%);
+  }
+}
+
+.resizable .options-form {
+  flex: 1;
+}
+
+.options-form .small.form-text {
+  color: $text-muted;
+}
+

modules/admin/app/assets/css/datasets.scss

@@ -1,8 +1,4 @@
-@import "lib/docview-portal/css/portal.scss";
-
-//Admin
-@import "./admin/admin";
-@import "./admin/forms";
+@import "apps";
 
 $active-table-row: #e7f1ff;
 
@@ -165,60 +161,6 @@ $active-table-row: #e7f1ff;
   flex: 1;
   justify-content: flex-end;
 }
-
-#app-error-notice {
-  position: absolute;
-  bottom: $margin-sm;
-  right: $margin-sm;
-  padding: $margin-xs $margin-sm;
-  z-index: 100;
-
-  .close {
-    margin-left: $margin-xs;
-    margin-top: -3px;
-    cursor: pointer;
-  }
-}
-
-.modal {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.modal-content.resizable {
-  min-height: 30rem;
-}
-
-.modal-content.resizable > .modal-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-
-.modal-resize-handle {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  display: inline;
-  width: 1rem;
-  height: 1rem;
-  cursor: nwse-resize;
-}
-
-.modal-resize-handle:after {
-  content:'';
-  display:block;
-  border-left: 5px solid transparent;
-  border-right: 5px solid transparent;
-  border-bottom: 5px solid $ehri-border-gray;
-  width: 2px;
-  height: 5px;
-  position: absolute;
-  pointer-events: none;
-  right: -1px;
-  bottom: 1px;
-  transform: rotate(135deg);
-}
-
 #stage-tabs,
 #dataset-manager-tabs
 {
@@ -236,15 +178,6 @@ $active-table-row: #e7f1ff;
   margin-bottom: $margin-sm;
 }
 
-.modal-alert {
-  z-index: 1000;
-  display: flex !important;
-
-  .modal-content {
-    box-shadow: $box-shadow-lg;
-  }
-}
-
 .file-picker {
   display: flex;
   align-items: center;
@@ -676,6 +609,7 @@ $active-table-row: #e7f1ff;
     // strange gaps.
     border-collapse: separate;
     border-spacing: 0;
+    border: none; // table doesn't need a double border, however cells do have one
   }
 
   // Sticky headers. Note: applying `position: sticky` to `thead`
@@ -985,21 +919,6 @@ $active-table-row: #e7f1ff;
   background-color: $gray-100;
 }
 
-.options-form {
-  padding: $margin-md;
-  input:invalid {
-    background-color: lighten($danger, 40%);
-  }
-}
-
-.resizable .options-form {
-  flex: 1;
-}
-
-.options-form .small.form-text {
-  color: $text-muted;
-}
-
 .data-manager-form-item {
   margin-bottom: $margin-xs;
   @include make-row();

modules/admin/app/assets/css/dmeditor.scss

@@ -1,39 +1,14 @@
-@import "lib/docview-portal/css/portal.scss";
-
-//Admin
-@import "./admin/admin";
-@import "./admin/forms";
+@import "apps";
 
 $active-table-row: #e7f1ff;
 
 .app-wrapper {
   background-color: $white;
 }
-// TODO: de-dup from dataset manager
-.options-form {
-  padding: $margin-md;
-  input:invalid {
-    background-color: lighten($danger, 40%);
-  }
-}
 
-.resizable .options-form {
-  flex: 1;
+// Make content area scrollable, this prevents
+// weird behaviour with modal popups
+.app-content {
+  overflow: auto;
+  flex-basis: 0;
 }
-
-// TODO: de-dup from dataset manager
-#app-error-notice {
-  position: absolute;
-  bottom: $margin-sm;
-  right: $margin-sm;
-  padding: $margin-xs $margin-sm;
-  z-index: 2000; // higher than modal
-
-  .close {
-    margin-left: $margin-xs;
-    margin-top: -3px;
-    cursor: pointer;
-  }
-}
-
-

modules/admin/app/assets/css/vocabeditor.scss

@@ -3,6 +3,7 @@
 //Admin
 @import "./admin/admin";
 @import "./admin/forms";
+//@import "apps"; // import this after compat check
 
 .footer-buttons {
   margin-top: $margin-sm;

modules/admin/app/assets/js/dmeditor/components/_list-et.vue

@@ -168,11 +168,10 @@ export default {
                          v-on:error="(...args) => $emit('error', ...args)">
         </modal-et-editor>
         <modal-alert v-if="confirmDelete !== null"
-                     title="Delete Field Metadata"
-                     clst="confirm-delete-field-metadata"
-                     cls="danger"
-                     accept="Delete"
-                     cancel="Cancel"
+                     v-bind:title="'Delete Field Metadata'"
+                     v-bind:cls="'danger confirm-delete-field-metadata'"
+                     v-bind:accept="'Delete'"
+                     v-bind:cancel="'Cancel'"
                      v-on:accept="deleteFieldMetadata(confirmDelete.entityType, confirmDelete.id); confirmDelete = null"
                      v-on:close="confirmDelete = null">
             <p>Are you sure you want to delete this field?</p>

modules/admin/app/assets/js/dmeditor/components/_modal-fm-editor.vue

@@ -51,6 +51,9 @@ export default {
       }
       return null;
     },
+    idsForCategory: function(entityType, category) {
+      return this.templates[entityType][category];
+    },
     unusedIds: function (entityType) {
       let used = new Set();
       let items = this.fieldMetadata[entityType] as FieldMetadata[];
@@ -120,8 +123,8 @@ export default {
                 <label for="fm-id">Field ID</label>
                 <select id="fm-id" v-model="id" class="form-control"
                         v-bind:readonly="!Boolean(et) || (hasCategories && !Boolean(category))">
-                    <template v-if="et" v-for="([cat, fields], idx) in templates[et]">
-                        <option v-if="!hasCategories || category === cat " v-for="field in fields" v-bind:value="field">{{ field }}</option>
+                    <template v-if="et" v-for="field in idsForCategory(et, category)">
+                        <option v-bind:value="field">{{ field }}</option>
                     </template>
                 </select>
             </div>
@@ -138,7 +141,7 @@ export default {
                 <label for="fm-usage">Usage</label>
                 <select id="fm-usage" v-model.trim="usage" class="form-control">
                     <option v-for="usage in [null, 'desirable', 'mandatory']" v-bind:value="usage">
-                        {{ usage === null ? '' : usage.toUpperCase() }}
+                        {{ usage === null ? 'optional' : usage }}
                     </option>
                 </select>
             </div>