New customizable admin dashboard

app/assets/javascripts/stash_engine/combobox.js

@@ -0,0 +1,108 @@
+'use strict';
+
+class ComboboxAutocomplete {
+  constructor(combobox, textbox, list, fill, selection) {
+    this.combobox = combobox
+    this.textbox = textbox
+    this.list = list
+    this.fill = fill
+    this.selection = selection
+
+    this.textbox.addEventListener('beforeinput', this.open.bind(this))
+    this.textbox.addEventListener('input', this.enter.bind(this))
+
+    this.textbox.addEventListener('blur', this.unFocus.bind(this), true)
+    this.list.addEventListener('blur', this.unFocus.bind(this), true)
+    this.combobox.addEventListener('blur', this.unFocus.bind(this), true)
+
+    this.textbox.addEventListener('keydown', this.keyPressed.bind(this))
+    this.list.addEventListener('keydown', this.listPressed.bind(this), true)
+
+    this.list.addEventListener('click', this.saveOption.bind(this), true)
+  }
+  open() {
+    this.fill()
+    this.list.removeAttribute('hidden')
+    this.textbox.setAttribute('aria-expanded', true)
+  }
+  enter() {
+    this.fill()
+    if (this.textbox.value.length == 0) {
+      this.selection({value: '', label: ''})
+    }
+  }
+  close(){
+    this.list.setAttribute('hidden', true)
+    this.textbox.setAttribute('aria-expanded', false)
+  }
+  unFocus(e) {
+    if (!this.combobox.contains(e.relatedTarget)) {
+      this.close()
+    }
+  }
+  selectOption({value, label}) {
+    const [prev] = this.list.getElementsByClassName('selected-option')
+    if (prev) {
+      prev.classList.remove('selected-option')
+      prev.setAttribute('aria-selected', false)
+    }
+    const selected = this.list.querySelector(`[data-value="${value}"]`)
+    selected.classList.add('selected-option')
+    selected.setAttribute('aria-selected', true)
+    this.selection({value, label})
+    this.textbox.value = label
+  }
+  saveOption(e) {
+    e.preventDefault()
+    e.stopPropagation()
+    this.selectOption(e.target.dataset)    
+    this.textbox.focus()
+    this.close()
+  }
+  listPressed(e) {
+    this.keyPressed(e)
+  }
+  keyPressed(e, option) {
+    switch (e.key) {
+      case 'Enter':
+        if (e.target.hasAttribute('data-value')) this.saveOption(e)
+        else if (e.target.id === this.textbox.id) {
+          this.open()
+          e.preventDefault()
+        }
+        break
+      case 'ArrowDown':
+      case 'ArrowRight':
+        if (e.target.id === this.textbox.id) {
+          if (this.list.hasAttribute('hidden')) this.open()
+          this.list.firstChild.focus()
+          e.preventDefault()
+        } else if (e.target.nextSibling) {
+          e.target.nextSibling.focus()
+          e.preventDefault()
+        }
+        break
+      case 'ArrowUp':
+        if (e.target.id !== this.textbox.id && e.target.previousSibling) {
+          e.target.previousSibling.focus()
+          e.preventDefault()
+        }
+        break
+      case 'Home':
+        if (e.target.id !== this.textbox.id) {
+          this.list.firstChild.focus()
+          e.preventDefault()
+        }
+        break
+      case 'End':
+        if (e.target.id !== this.textbox.id) {
+          this.list.lastChild.focus()
+          e.preventDefault()
+        }
+        break
+      default:
+        break
+    }
+  }
+
+}

app/assets/stylesheets/scss/_admin-layout.scss

@@ -96,3 +96,138 @@
     margin-right: .5ch;
   }
 }
+
+button.c-admin-edit-icon {
+  border: none;
+  color: $design-medium-blue-color;
+  background-color: transparent;
+
+  &:hover {
+    color: $design-orange-color;
+  }
+}
+
+.admin-dashboard-form {
+  margin-bottom: 2rem;
+
+  #edit_fields-form,
+  #edit_filters-form {
+    border: none;
+    background-color: $design-lightest-blue-color;
+    padding: 20px;
+    max-width: 100%;
+    margin-bottom: 1.5rem;
+  }
+
+  #edit_fields-form {
+    columns: 6;
+
+    &.extra-column {
+      columns: 7;
+      @media (max-width: 1070px) { columns: 5 }
+    }
+
+    div {
+      margin-bottom: 4px;
+    }
+
+    &.show-help {
+      columns: 3;
+      @media (max-width: 620px) { columns: 2 }
+      div {
+        display: table;
+
+      }
+      .help {
+        margin: .2rem 0 1rem 1.1rem;
+      }
+    }
+  }
+
+  #edit_fields-form, #edit_fields-form.extra-column {
+    @media (max-width: 920px) { columns: 3 }
+    @media (max-width: 480px) { columns: 2 }
+  }
+
+  #edit_filters-form {
+    display: flex;
+    flex-wrap: wrap;
+    row-gap: 2ch;
+    column-gap: 2ch;
+
+    .help {
+      margin: .5rem auto 1rem;
+    }
+  }
+
+  .help {
+    display: none;
+    font-size: .9em;
+  }
+
+  .show-help .help {
+    display: block;
+  }
+
+  .field-pair {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: nowrap;
+    gap: .5ch;
+  }
+
+  select{
+    max-width: 80vw;
+    text-overflow: ellipsis;
+  }
+
+  .c-input__select {
+    background-color: $design-white-color;
+  }
+}
+
+.admin-dashboard-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  column-gap: 1ch;
+  row-gap: .5ch;
+  flex-wrap: wrap;
+  margin-bottom: 1.1rem;
+
+  h1 {
+    margin-bottom: 0;
+  }
+}
+
+.admin-dashboard-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  column-gap: 1ch;
+  row-gap: .5ch;
+  flex-wrap: wrap;
+  margin: .8rem auto .2rem;
+
+  *[role='heading'] {
+    &[aria-level='2'] {
+      font-size: 1.35em;
+    }
+    &[aria-level='3'] {
+      font-size: 1.1em;
+    }
+  }
+
+  button i {
+    margin-right: .5ch;
+  }
+}
+
+.admin-dashboard-results {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: flex-start;
+  column-gap: 2ch;
+  row-gap: 1ch;
+}

app/assets/stylesheets/scss/_footer.scss

@@ -1,9 +1,14 @@
 // ##### Footer Component ##### //
 
+#maincontent {
+  min-height: 79vh;
+  @media (max-width: 1060px) { min-height: 75vh; } 
+  @media (max-width: 900px) { min-height: 70vh; } 
+}
+
 .c-footer {
   @extend %pull-borders;
   margin-top: 2em;
-  margin-bottom: $spacing-md;
   padding-top: 10px;
   clear: both;
   border-top: thin solid $design-dark-gray-color;

app/assets/stylesheets/scss/_list.scss

@@ -26,3 +26,61 @@
 	}
 
 }
+
+.saved_searches_list {
+	counter-reset: li;
+	padding-left: 0;
+	display: grid;
+	grid-template-columns: 16px 20px 1fr 3fr 40px 40px;
+
+	&.with_form {
+		grid-template-columns: 16px 60px 2fr 3fr 40px 40px;
+	}
+
+	li:before {
+		counter-increment: li;
+		content: counter(li);
+		padding: 5px 0 5px 3px;
+	}
+
+	li {
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-column-start: 1;
+		grid-column-end: 7;
+
+		&:nth-child(odd) {
+		  background-color: #f6f6f6;
+		}
+
+		& > * {
+			padding: 5px;
+		}
+
+		& > *:nth-child(1):not(.saved_search_form) {
+			grid-column: 2; padding: 5px 0; text-align: center;
+		}
+		& > *:nth-child(2) { grid-column: 3}
+		& > *:nth-child(3) { grid-column: 4}
+		& > *:nth-child(4) { grid-column: 5}
+		& > *:nth-child(5) { grid-column: 6}
+	}
+
+	.saved_search_form {
+		margin-top: -2.5rem;
+		display: grid;
+		grid-template-columns: subgrid;
+		grid-column-start: 1;
+		grid-column-end: 7;
+
+		& > * {
+			padding: 5px 10px;
+		}
+
+		& > *:nth-child(3) { grid-column: 2; padding: 5px; text-align: center;}
+		& > *:nth-child(4) { grid-column: 3}
+		& > *:nth-child(5) { grid-column: 4}
+		& > *:nth-child(6) { grid-column: 5}
+		& > *:nth-child(7) { grid-column: 6}
+	}
+}

app/assets/stylesheets/scss/_select.scss

@@ -3,3 +3,54 @@
 .o-select {
 	margin: 0 0 20px;
 }
+
+.searchselect {
+	position: relative;
+	flex-grow: 2;
+
+	& > input {
+		width: 100%;
+	}
+
+	&:focus-within input {
+		outline: 2px solid $design-medium-blue-color;
+	}
+
+	ul {
+		margin: 0;
+		padding: 2px 0;
+		list-style-type: none;
+		position: absolute;		
+		top: 32px;
+		right: -2px;
+		left: -2px;
+		z-index: 10;
+		width: calc(100% + 4px);
+		max-height: 50vh;
+		overflow-y: auto;
+		background-color: $design-extra-light-gray-color;
+
+		li {
+			padding: 6px 10px;
+			cursor: default;
+			&[role='option'] {
+				padding-left: 3ch;
+				&:before {
+					content: '';
+					display: inline-block;
+					width: 2.5ch;
+					margin-left: -2.5ch;
+					font-family: FontAwesome;
+				}
+				&.selected-option:before {
+					content: '\f00c';
+				}
+			  &:hover,
+			  &:focus {
+			  	color: $design-white-color;
+			    background-color: $design-dark-blue-color;
+			  }		 
+			} 
+		}
+	}
+}

app/assets/stylesheets/scss/_table.scss

@@ -107,16 +107,6 @@ td, th {
   & > *:first-child {
     margin-bottom: $spacing-base;
   }
-
-  button {
-    border: none;
-    color: $design-medium-blue-color;
-    background-color: transparent;
-
-    &:hover {
-      color: $design-orange-color;
-    }
-  }
 }
 
 .c-user-datasets-table {