Admin page updates

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -335,10 +335,31 @@
  let cleanedData = { ...data };
  Object.keys(cleanedData).forEach(key => {
  // Trim text fields
- if (typeof cleanedData[key] === 'string') {
+ if (key === 'source') {
+ if (cleanedData[key] === sources.ORGANIZATION) {
+ cleanedData[key] = `${cleanedData.organization} (organization)`;
+ } else if (cleanedData[key] === sources.CONFERENCE) {
+ cleanedData[key] = `${cleanedData.conference} (conference)`;
+ } else if (cleanedData[key] === sources.OTHER) {
+ cleanedData[key] = `${cleanedData.other_source} (other)`;
+ } else {
+ cleanedData[key] = cleanedData[key].trim();
+ }
+ } else if (typeof cleanedData[key] === 'string') {
  cleanedData[key] = cleanedData[key].trim();
- } else if (key === 'uses' || key === 'locations') {
+ } else if (key === 'locations') {
  cleanedData[key] = cleanedData[key].join('|');
+ } else if (key === 'uses') {
+ cleanedData[key] = cleanedData[key]
+ .map(use => {
+ if (use === uses.OTHER) {
+ return `${cleanedData.other_use} (other)`;
+ } else if (use === uses.STORING) {
+ return `storage (${cleanedData.storage})`;
+ }
+ return use;
+ })
+ .join('|');
  }
  });
  return cleanedData;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -1,15 +1,15 @@
 <template>
 
  <div>
- <VChip label>
+ <VChip label class="ml-0">
  <div class="label">
  {{ value }}
  </div>
  </VChip>
  <VBtn icon small right @click="copyToClipboard">
- <VIcon small>
+ <Icon small>
  content_copy
- </VIcon>
+ </Icon>
  </VBtn>
  </div>
 

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,8 +6,8 @@
  :text="text"
  >
  <template #buttons="{close}">
- <VBtn color="primary" flat @click="close">
- {{ $tr('cancel') }}
+ <VBtn flat @click="close">
+ {{ cancelButtonText }}
  </VBtn>
  <VBtn color="primary" dark @click="confirmHandler">
  {{ confirmButtonText }}
@@ -26,11 +26,30 @@
  name: 'ConfirmationDialog',
  components: { MessageDialog },
  props: {
- value: Boolean,
- title: String,
- text: String,
- confirmButtonText: String,
- confirmHandler: Function,
+ value: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ required: true,
+ },
+ text: {
+ type: String,
+ required: true,
+ },
+ confirmButtonText: {
+ type: String,
+ required: true,
+ },
+ confirmHandler: {
+ type: Function,
+ required: true,
+ },
+ cancelButtonText: {
+ type: String,
+ default: 'Cancel',
+ },
  },
  computed: {
  show: {
@@ -42,9 +61,6 @@
  },
  },
  },
- $trs: {
- cancel: 'Cancel',
- },
  };
 
 </script>

contentcuration/contentcuration/frontend/administration/constants.js

@@ -5,42 +5,4 @@ export const RouterNames = {
  USER: 'USER',
 };
 
-export function defaultPagination(routeName) {
- let defaults = {
- descending: false,
- page: 1,
- rowsPerPage: 4,
- sortBy: 'name',
- rowsPerPageItems: [1, 2, 4, 8, 16],
- filter: 'all',
- };
-
- if (routeName == RouterNames.CHANNELS) {
- Object.assign(defaults, {
- filter: 'allchannels',
- });
- } else if (routeName == RouterNames.USERS) {
- Object.assign(defaults, {
- sortBy: 'last_name',
- });
- }
-
- return defaults;
-}
-
-export const userFilterTypes = [
- { key: 'all', label: 'All', backendParams: {} },
- { key: 'active', label: 'Active', backendParams: { is_active: 'True' } },
- { key: 'inactive', label: 'Inactive', backendParams: { is_active: 'False' } },
- { key: 'administrator', label: 'Administrator', backendParams: { is_admin: 'True' } },
- { key: 'sushichef', label: 'Sushi Chef', backendParams: { chef_channels_count__gt: '0' } },
-];
-
-export const channelFilterTypes = [
- { key: 'allchannels', label: 'All', backendParams: { all: 'True' } },
-];
-
-export const filterTypes = [...userFilterTypes, ...channelFilterTypes].reduce((prev, current) => {
- prev[current.key] = current;
- return prev;
-}, {});
+export const rowsPerPageItems = [25, 50, 75, 100];

contentcuration/contentcuration/frontend/administration/mixins.js

@@ -1,24 +1,168 @@
-export const filterMixin = {
- methods: {
- updateQueryParams(params) {
- let query = Object.assign({}, this.$route.query);
- for (let [key, value] of Object.entries(params)) {
- if (value != null) {
- query[key] = value;
- } else {
- delete query[key];
+import debounce from 'lodash/debounce';
+import difference from 'lodash/difference';
+import findKey from 'lodash/findKey';
+import intersection from 'lodash/intersection';
+import transform from 'lodash/transform';
+
+function _getBooleanVal(value) {
+ return typeof value === 'string' ? value === 'true' : value;
+}
+
+export function generateFilterMixin(filterMap) {
+ const paramKeys = Object.values(filterMap).flatMap(f => Object.keys(f.params));
+ return {
+ data() {
+ return {
+ filterKey: '',
+ keywordInput: '',
+ };
+ },
+ computed: {
+ keywords: {
+ get() {
+ return this.$route.query.keywords;
+ },
+ set(value) {
+ let params = { ...this.$route.query, page: 1 };
+ if (value) {
+ params.keywords = value;
+ } else {
+ delete params['keywords'];
+ }
+ this.updateQueryParams(params);
+ },
+ },
+ filter: {
+ get() {
+ // Return filter where all param conditions are met
+ const filterKeys = intersection(Object.keys(this.$route.query), paramKeys);
+ let key = findKey(filterMap, value => {
+ return filterKeys.every(field => {
+ return value.params[field] === _getBooleanVal(this.$route.query[field]);
+ });
+ });
+ return key;
+ },
+ set(value) {
+ // Get params that aren't part of the filterMap
+ const otherFilters = difference(Object.keys(this.$route.query), paramKeys).reduce(
+ (result, key) => {
+ result[key] = this.$route.query[key];
+ return result;
+ },
+ {}
+ );
+
+ // Set the router with the params from the filterMap and current route
+ this.updateQueryParams({
+ ...otherFilters,
+ ...filterMap[value].params,
+ page: 1,
+ });
+ },
+ },
+ filters() {
+ return Object.entries(filterMap).map(([key, value]) => {
+ return { key, label: value.label };
+ });
+ },
+ setKeywords() {
+ return debounce(this.updateKeywords, 500);
+ },
+ },
+ watch: {
+ keywords() {
+ this.keywordInput = this.keywords;
+ },
+ },
+ beforeMount() {
+ this.keywordInput = this.$route.query.keywords;
+ },
+ methods: {
+ updateQueryParams(params) {
+ const query = transform(
+ params,
+ (result, value, key) => {
+ if (value != null) {
+ result[key] = value;
+ }
+ },
+ {}
+ );
+ this.$router.push({ query }).catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
+ clearSearch: function() {
+ this.keywords = '';
+ },
+ updateKeywords() {
+ this.keywords = this.keywordInput;
+ },
+ },
+ };
+}
+
+export const tableMixin = {
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {
+ pagination: {
+ get() {
+ let params = {
+ rowsPerPage: Number(this.$route.query.page_size) || 25,
+ page: Number(this.$route.query.page) || 1,
+ };
+ // Add descending if it's in the route query params
+ if (this.$route.query.descending !== undefined && this.$route.query.descending !== null) {
+ params.descending = this.$route.query.descending.toString() === 'true';
+ }
+ // Add sortBy if it's in the route query params
+ if (this.$route.query.sortBy) {
+ params.sortBy = this.$route.query.sortBy;
  }
- }
- this.$router.push({ query });
+
+ return params;
+ },
+ set(pagination) {
+ this.$router
+ .replace({
+ ...this.$route,
+ query: {
+ ...this.$route.query,
+ ...pagination,
+ },
+ })
+ .catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
  },
- search: function(search) {
- this.updateQueryParams({ search, page: 1 });
+ },
+ watch: {
+ '$route.query'() {
+ this._loadItems();
  },
- filter: function(filter) {
- this.updateQueryParams({ filter, page: 1 });
+ },
+ mounted() {
+ this._loadItems();
+ },
+ methods: {
+ _loadItems() {
+ this.loading = true;
+ this.fetch(this.$route.query).then(() => {
+ this.loading = false;
+ });
  },
-clearSearch: function() {
-this.updateQueryParams({ search: null });
+fetch() {
+throw Error('Must implement fetch method if using tableMixin');
  },
  },
 };

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -335,10 +335,31 @@
  let cleanedData = { ...data };
  Object.keys(cleanedData).forEach(key => {
  // Trim text fields
- if (typeof cleanedData[key] === 'string') {
+ if (key === 'source') {
+ if (cleanedData[key] === sources.ORGANIZATION) {
+ cleanedData[key] = `${cleanedData.organization} (organization)`;
+ } else if (cleanedData[key] === sources.CONFERENCE) {
+ cleanedData[key] = `${cleanedData.conference} (conference)`;
+ } else if (cleanedData[key] === sources.OTHER) {
+ cleanedData[key] = `${cleanedData.other_source} (other)`;
+ } else {
+ cleanedData[key] = cleanedData[key].trim();
+ }
+ } else if (typeof cleanedData[key] === 'string') {
  cleanedData[key] = cleanedData[key].trim();
- } else if (key === 'uses' || key === 'locations') {
+ } else if (key === 'locations') {
  cleanedData[key] = cleanedData[key].join('|');
+ } else if (key === 'uses') {
+ cleanedData[key] = cleanedData[key]
+ .map(use => {
+ if (use === uses.OTHER) {
+ return `${cleanedData.other_use} (other)`;
+ } else if (use === uses.STORING) {
+ return `storage (${cleanedData.storage})`;
+ }
+ return use;
+ })
+ .join('|');
  }
  });
  return cleanedData;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -1,15 +1,15 @@
 <template>
 
  <div>
- <VChip label>
+ <VChip label class="ml-0">
  <div class="label">
  {{ value }}
  </div>
  </VChip>
  <VBtn icon small right @click="copyToClipboard">
- <VIcon small>
+ <Icon small>
  content_copy
- </VIcon>
+ </Icon>
  </VBtn>
  </div>
 

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,8 +6,8 @@
  :text="text"
  >
  <template #buttons="{close}">
- <VBtn color="primary" flat @click="close">
- {{ $tr('cancel') }}
+ <VBtn flat @click="close">
+ {{ cancelButtonText }}
  </VBtn>
  <VBtn color="primary" dark @click="confirmHandler">
  {{ confirmButtonText }}
@@ -26,11 +26,30 @@
  name: 'ConfirmationDialog',
  components: { MessageDialog },
  props: {
- value: Boolean,
- title: String,
- text: String,
- confirmButtonText: String,
- confirmHandler: Function,
+ value: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ required: true,
+ },
+ text: {
+ type: String,
+ required: true,
+ },
+ confirmButtonText: {
+ type: String,
+ required: true,
+ },
+ confirmHandler: {
+ type: Function,
+ required: true,
+ },
+ cancelButtonText: {
+ type: String,
+ default: 'Cancel',
+ },
  },
  computed: {
  show: {
@@ -42,9 +61,6 @@
  },
  },
  },
- $trs: {
- cancel: 'Cancel',
- },
  };
 
 </script>

contentcuration/contentcuration/frontend/administration/constants.js

@@ -5,42 +5,4 @@ export const RouterNames = {
  USER: 'USER',
 };
 
-export function defaultPagination(routeName) {
- let defaults = {
- descending: false,
- page: 1,
- rowsPerPage: 4,
- sortBy: 'name',
- rowsPerPageItems: [1, 2, 4, 8, 16],
- filter: 'all',
- };
-
- if (routeName == RouterNames.CHANNELS) {
- Object.assign(defaults, {
- filter: 'allchannels',
- });
- } else if (routeName == RouterNames.USERS) {
- Object.assign(defaults, {
- sortBy: 'last_name',
- });
- }
-
- return defaults;
-}
-
-export const userFilterTypes = [
- { key: 'all', label: 'All', backendParams: {} },
- { key: 'active', label: 'Active', backendParams: { is_active: 'True' } },
- { key: 'inactive', label: 'Inactive', backendParams: { is_active: 'False' } },
- { key: 'administrator', label: 'Administrator', backendParams: { is_admin: 'True' } },
- { key: 'sushichef', label: 'Sushi Chef', backendParams: { chef_channels_count__gt: '0' } },
-];
-
-export const channelFilterTypes = [
- { key: 'allchannels', label: 'All', backendParams: { all: 'True' } },
-];
-
-export const filterTypes = [...userFilterTypes, ...channelFilterTypes].reduce((prev, current) => {
- prev[current.key] = current;
- return prev;
-}, {});
+export const rowsPerPageItems = [25, 50, 75, 100];

contentcuration/contentcuration/frontend/administration/mixins.js

@@ -1,24 +1,168 @@
-export const filterMixin = {
- methods: {
- updateQueryParams(params) {
- let query = Object.assign({}, this.$route.query);
- for (let [key, value] of Object.entries(params)) {
- if (value != null) {
- query[key] = value;
- } else {
- delete query[key];
+import debounce from 'lodash/debounce';
+import difference from 'lodash/difference';
+import findKey from 'lodash/findKey';
+import intersection from 'lodash/intersection';
+import transform from 'lodash/transform';
+
+function _getBooleanVal(value) {
+ return typeof value === 'string' ? value === 'true' : value;
+}
+
+export function generateFilterMixin(filterMap) {
+ const paramKeys = Object.values(filterMap).flatMap(f => Object.keys(f.params));
+ return {
+ data() {
+ return {
+ filterKey: '',
+ keywordInput: '',
+ };
+ },
+ computed: {
+ keywords: {
+ get() {
+ return this.$route.query.keywords;
+ },
+ set(value) {
+ let params = { ...this.$route.query, page: 1 };
+ if (value) {
+ params.keywords = value;
+ } else {
+ delete params['keywords'];
+ }
+ this.updateQueryParams(params);
+ },
+ },
+ filter: {
+ get() {
+ // Return filter where all param conditions are met
+ const filterKeys = intersection(Object.keys(this.$route.query), paramKeys);
+ let key = findKey(filterMap, value => {
+ return filterKeys.every(field => {
+ return value.params[field] === _getBooleanVal(this.$route.query[field]);
+ });
+ });
+ return key;
+ },
+ set(value) {
+ // Get params that aren't part of the filterMap
+ const otherFilters = difference(Object.keys(this.$route.query), paramKeys).reduce(
+ (result, key) => {
+ result[key] = this.$route.query[key];
+ return result;
+ },
+ {}
+ );
+
+ // Set the router with the params from the filterMap and current route
+ this.updateQueryParams({
+ ...otherFilters,
+ ...filterMap[value].params,
+ page: 1,
+ });
+ },
+ },
+ filters() {
+ return Object.entries(filterMap).map(([key, value]) => {
+ return { key, label: value.label };
+ });
+ },
+ setKeywords() {
+ return debounce(this.updateKeywords, 500);
+ },
+ },
+ watch: {
+ keywords() {
+ this.keywordInput = this.keywords;
+ },
+ },
+ beforeMount() {
+ this.keywordInput = this.$route.query.keywords;
+ },
+ methods: {
+ updateQueryParams(params) {
+ const query = transform(
+ params,
+ (result, value, key) => {
+ if (value != null) {
+ result[key] = value;
+ }
+ },
+ {}
+ );
+ this.$router.push({ query }).catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
+ clearSearch: function() {
+ this.keywords = '';
+ },
+ updateKeywords() {
+ this.keywords = this.keywordInput;
+ },
+ },
+ };
+}
+
+export const tableMixin = {
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {
+ pagination: {
+ get() {
+ let params = {
+ rowsPerPage: Number(this.$route.query.page_size) || 25,
+ page: Number(this.$route.query.page) || 1,
+ };
+ // Add descending if it's in the route query params
+ if (this.$route.query.descending !== undefined && this.$route.query.descending !== null) {
+ params.descending = this.$route.query.descending.toString() === 'true';
+ }
+ // Add sortBy if it's in the route query params
+ if (this.$route.query.sortBy) {
+ params.sortBy = this.$route.query.sortBy;
  }
- }
- this.$router.push({ query });
+
+ return params;
+ },
+ set(pagination) {
+ this.$router
+ .replace({
+ ...this.$route,
+ query: {
+ ...this.$route.query,
+ ...pagination,
+ },
+ })
+ .catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
  },
- search: function(search) {
- this.updateQueryParams({ search, page: 1 });
+ },
+ watch: {
+ '$route.query'() {
+ this._loadItems();
  },
- filter: function(filter) {
- this.updateQueryParams({ filter, page: 1 });
+ },
+ mounted() {
+ this._loadItems();
+ },
+ methods: {
+ _loadItems() {
+ this.loading = true;
+ this.fetch(this.$route.query).then(() => {
+ this.loading = false;
+ });
  },
-clearSearch: function() {
-this.updateQueryParams({ search: null });
+fetch() {
+throw Error('Must implement fetch method if using tableMixin');
  },
  },
 };

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -335,10 +335,31 @@
  let cleanedData = { ...data };
  Object.keys(cleanedData).forEach(key => {
  // Trim text fields
- if (typeof cleanedData[key] === 'string') {
+ if (key === 'source') {
+ if (cleanedData[key] === sources.ORGANIZATION) {
+ cleanedData[key] = `${cleanedData.organization} (organization)`;
+ } else if (cleanedData[key] === sources.CONFERENCE) {
+ cleanedData[key] = `${cleanedData.conference} (conference)`;
+ } else if (cleanedData[key] === sources.OTHER) {
+ cleanedData[key] = `${cleanedData.other_source} (other)`;
+ } else {
+ cleanedData[key] = cleanedData[key].trim();
+ }
+ } else if (typeof cleanedData[key] === 'string') {
  cleanedData[key] = cleanedData[key].trim();
- } else if (key === 'uses' || key === 'locations') {
+ } else if (key === 'locations') {
  cleanedData[key] = cleanedData[key].join('|');
+ } else if (key === 'uses') {
+ cleanedData[key] = cleanedData[key]
+ .map(use => {
+ if (use === uses.OTHER) {
+ return `${cleanedData.other_use} (other)`;
+ } else if (use === uses.STORING) {
+ return `storage (${cleanedData.storage})`;
+ }
+ return use;
+ })
+ .join('|');
  }
  });
  return cleanedData;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -1,15 +1,15 @@
 <template>
 
  <div>
- <VChip label>
+ <VChip label class="ml-0">
  <div class="label">
  {{ value }}
  </div>
  </VChip>
  <VBtn icon small right @click="copyToClipboard">
- <VIcon small>
+ <Icon small>
  content_copy
- </VIcon>
+ </Icon>
  </VBtn>
  </div>
 

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,8 +6,8 @@
  :text="text"
  >
  <template #buttons="{close}">
- <VBtn color="primary" flat @click="close">
- {{ $tr('cancel') }}
+ <VBtn flat @click="close">
+ {{ cancelButtonText }}
  </VBtn>
  <VBtn color="primary" dark @click="confirmHandler">
  {{ confirmButtonText }}
@@ -26,11 +26,30 @@
  name: 'ConfirmationDialog',
  components: { MessageDialog },
  props: {
- value: Boolean,
- title: String,
- text: String,
- confirmButtonText: String,
- confirmHandler: Function,
+ value: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ required: true,
+ },
+ text: {
+ type: String,
+ required: true,
+ },
+ confirmButtonText: {
+ type: String,
+ required: true,
+ },
+ confirmHandler: {
+ type: Function,
+ required: true,
+ },
+ cancelButtonText: {
+ type: String,
+ default: 'Cancel',
+ },
  },
  computed: {
  show: {
@@ -42,9 +61,6 @@
  },
  },
  },
- $trs: {
- cancel: 'Cancel',
- },
  };
 
 </script>

contentcuration/contentcuration/frontend/administration/constants.js

@@ -5,42 +5,4 @@ export const RouterNames = {
  USER: 'USER',
 };
 
-export function defaultPagination(routeName) {
- let defaults = {
- descending: false,
- page: 1,
- rowsPerPage: 4,
- sortBy: 'name',
- rowsPerPageItems: [1, 2, 4, 8, 16],
- filter: 'all',
- };
-
- if (routeName == RouterNames.CHANNELS) {
- Object.assign(defaults, {
- filter: 'allchannels',
- });
- } else if (routeName == RouterNames.USERS) {
- Object.assign(defaults, {
- sortBy: 'last_name',
- });
- }
-
- return defaults;
-}
-
-export const userFilterTypes = [
- { key: 'all', label: 'All', backendParams: {} },
- { key: 'active', label: 'Active', backendParams: { is_active: 'True' } },
- { key: 'inactive', label: 'Inactive', backendParams: { is_active: 'False' } },
- { key: 'administrator', label: 'Administrator', backendParams: { is_admin: 'True' } },
- { key: 'sushichef', label: 'Sushi Chef', backendParams: { chef_channels_count__gt: '0' } },
-];
-
-export const channelFilterTypes = [
- { key: 'allchannels', label: 'All', backendParams: { all: 'True' } },
-];
-
-export const filterTypes = [...userFilterTypes, ...channelFilterTypes].reduce((prev, current) => {
- prev[current.key] = current;
- return prev;
-}, {});
+export const rowsPerPageItems = [25, 50, 75, 100];

contentcuration/contentcuration/frontend/administration/mixins.js

@@ -1,24 +1,168 @@
-export const filterMixin = {
- methods: {
- updateQueryParams(params) {
- let query = Object.assign({}, this.$route.query);
- for (let [key, value] of Object.entries(params)) {
- if (value != null) {
- query[key] = value;
- } else {
- delete query[key];
+import debounce from 'lodash/debounce';
+import difference from 'lodash/difference';
+import findKey from 'lodash/findKey';
+import intersection from 'lodash/intersection';
+import transform from 'lodash/transform';
+
+function _getBooleanVal(value) {
+ return typeof value === 'string' ? value === 'true' : value;
+}
+
+export function generateFilterMixin(filterMap) {
+ const paramKeys = Object.values(filterMap).flatMap(f => Object.keys(f.params));
+ return {
+ data() {
+ return {
+ filterKey: '',
+ keywordInput: '',
+ };
+ },
+ computed: {
+ keywords: {
+ get() {
+ return this.$route.query.keywords;
+ },
+ set(value) {
+ let params = { ...this.$route.query, page: 1 };
+ if (value) {
+ params.keywords = value;
+ } else {
+ delete params['keywords'];
+ }
+ this.updateQueryParams(params);
+ },
+ },
+ filter: {
+ get() {
+ // Return filter where all param conditions are met
+ const filterKeys = intersection(Object.keys(this.$route.query), paramKeys);
+ let key = findKey(filterMap, value => {
+ return filterKeys.every(field => {
+ return value.params[field] === _getBooleanVal(this.$route.query[field]);
+ });
+ });
+ return key;
+ },
+ set(value) {
+ // Get params that aren't part of the filterMap
+ const otherFilters = difference(Object.keys(this.$route.query), paramKeys).reduce(
+ (result, key) => {
+ result[key] = this.$route.query[key];
+ return result;
+ },
+ {}
+ );
+
+ // Set the router with the params from the filterMap and current route
+ this.updateQueryParams({
+ ...otherFilters,
+ ...filterMap[value].params,
+ page: 1,
+ });
+ },
+ },
+ filters() {
+ return Object.entries(filterMap).map(([key, value]) => {
+ return { key, label: value.label };
+ });
+ },
+ setKeywords() {
+ return debounce(this.updateKeywords, 500);
+ },
+ },
+ watch: {
+ keywords() {
+ this.keywordInput = this.keywords;
+ },
+ },
+ beforeMount() {
+ this.keywordInput = this.$route.query.keywords;
+ },
+ methods: {
+ updateQueryParams(params) {
+ const query = transform(
+ params,
+ (result, value, key) => {
+ if (value != null) {
+ result[key] = value;
+ }
+ },
+ {}
+ );
+ this.$router.push({ query }).catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
+ clearSearch: function() {
+ this.keywords = '';
+ },
+ updateKeywords() {
+ this.keywords = this.keywordInput;
+ },
+ },
+ };
+}
+
+export const tableMixin = {
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {
+ pagination: {
+ get() {
+ let params = {
+ rowsPerPage: Number(this.$route.query.page_size) || 25,
+ page: Number(this.$route.query.page) || 1,
+ };
+ // Add descending if it's in the route query params
+ if (this.$route.query.descending !== undefined && this.$route.query.descending !== null) {
+ params.descending = this.$route.query.descending.toString() === 'true';
+ }
+ // Add sortBy if it's in the route query params
+ if (this.$route.query.sortBy) {
+ params.sortBy = this.$route.query.sortBy;
  }
- }
- this.$router.push({ query });
+
+ return params;
+ },
+ set(pagination) {
+ this.$router
+ .replace({
+ ...this.$route,
+ query: {
+ ...this.$route.query,
+ ...pagination,
+ },
+ })
+ .catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
  },
- search: function(search) {
- this.updateQueryParams({ search, page: 1 });
+ },
+ watch: {
+ '$route.query'() {
+ this._loadItems();
  },
- filter: function(filter) {
- this.updateQueryParams({ filter, page: 1 });
+ },
+ mounted() {
+ this._loadItems();
+ },
+ methods: {
+ _loadItems() {
+ this.loading = true;
+ this.fetch(this.$route.query).then(() => {
+ this.loading = false;
+ });
  },
-clearSearch: function() {
-this.updateQueryParams({ search: null });
+fetch() {
+throw Error('Must implement fetch method if using tableMixin');
  },
  },
 };

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -335,10 +335,31 @@
  let cleanedData = { ...data };
  Object.keys(cleanedData).forEach(key => {
  // Trim text fields
- if (typeof cleanedData[key] === 'string') {
+ if (key === 'source') {
+ if (cleanedData[key] === sources.ORGANIZATION) {
+ cleanedData[key] = `${cleanedData.organization} (organization)`;
+ } else if (cleanedData[key] === sources.CONFERENCE) {
+ cleanedData[key] = `${cleanedData.conference} (conference)`;
+ } else if (cleanedData[key] === sources.OTHER) {
+ cleanedData[key] = `${cleanedData.other_source} (other)`;
+ } else {
+ cleanedData[key] = cleanedData[key].trim();
+ }
+ } else if (typeof cleanedData[key] === 'string') {
  cleanedData[key] = cleanedData[key].trim();
- } else if (key === 'uses' || key === 'locations') {
+ } else if (key === 'locations') {
  cleanedData[key] = cleanedData[key].join('|');
+ } else if (key === 'uses') {
+ cleanedData[key] = cleanedData[key]
+ .map(use => {
+ if (use === uses.OTHER) {
+ return `${cleanedData.other_use} (other)`;
+ } else if (use === uses.STORING) {
+ return `storage (${cleanedData.storage})`;
+ }
+ return use;
+ })
+ .join('|');
  }
  });
  return cleanedData;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -1,15 +1,15 @@
 <template>
 
  <div>
- <VChip label>
+ <VChip label class="ml-0">
  <div class="label">
  {{ value }}
  </div>
  </VChip>
  <VBtn icon small right @click="copyToClipboard">
- <VIcon small>
+ <Icon small>
  content_copy
- </VIcon>
+ </Icon>
  </VBtn>
  </div>
 

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,8 +6,8 @@
  :text="text"
  >
  <template #buttons="{close}">
- <VBtn color="primary" flat @click="close">
- {{ $tr('cancel') }}
+ <VBtn flat @click="close">
+ {{ cancelButtonText }}
  </VBtn>
  <VBtn color="primary" dark @click="confirmHandler">
  {{ confirmButtonText }}
@@ -26,11 +26,30 @@
  name: 'ConfirmationDialog',
  components: { MessageDialog },
  props: {
- value: Boolean,
- title: String,
- text: String,
- confirmButtonText: String,
- confirmHandler: Function,
+ value: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ required: true,
+ },
+ text: {
+ type: String,
+ required: true,
+ },
+ confirmButtonText: {
+ type: String,
+ required: true,
+ },
+ confirmHandler: {
+ type: Function,
+ required: true,
+ },
+ cancelButtonText: {
+ type: String,
+ default: 'Cancel',
+ },
  },
  computed: {
  show: {
@@ -42,9 +61,6 @@
  },
  },
  },
- $trs: {
- cancel: 'Cancel',
- },
  };
 
 </script>

contentcuration/contentcuration/frontend/administration/constants.js

@@ -5,42 +5,4 @@ export const RouterNames = {
  USER: 'USER',
 };
 
-export function defaultPagination(routeName) {
- let defaults = {
- descending: false,
- page: 1,
- rowsPerPage: 4,
- sortBy: 'name',
- rowsPerPageItems: [1, 2, 4, 8, 16],
- filter: 'all',
- };
-
- if (routeName == RouterNames.CHANNELS) {
- Object.assign(defaults, {
- filter: 'allchannels',
- });
- } else if (routeName == RouterNames.USERS) {
- Object.assign(defaults, {
- sortBy: 'last_name',
- });
- }
-
- return defaults;
-}
-
-export const userFilterTypes = [
- { key: 'all', label: 'All', backendParams: {} },
- { key: 'active', label: 'Active', backendParams: { is_active: 'True' } },
- { key: 'inactive', label: 'Inactive', backendParams: { is_active: 'False' } },
- { key: 'administrator', label: 'Administrator', backendParams: { is_admin: 'True' } },
- { key: 'sushichef', label: 'Sushi Chef', backendParams: { chef_channels_count__gt: '0' } },
-];
-
-export const channelFilterTypes = [
- { key: 'allchannels', label: 'All', backendParams: { all: 'True' } },
-];
-
-export const filterTypes = [...userFilterTypes, ...channelFilterTypes].reduce((prev, current) => {
- prev[current.key] = current;
- return prev;
-}, {});
+export const rowsPerPageItems = [25, 50, 75, 100];

contentcuration/contentcuration/frontend/administration/mixins.js

@@ -1,24 +1,168 @@
-export const filterMixin = {
- methods: {
- updateQueryParams(params) {
- let query = Object.assign({}, this.$route.query);
- for (let [key, value] of Object.entries(params)) {
- if (value != null) {
- query[key] = value;
- } else {
- delete query[key];
+import debounce from 'lodash/debounce';
+import difference from 'lodash/difference';
+import findKey from 'lodash/findKey';
+import intersection from 'lodash/intersection';
+import transform from 'lodash/transform';
+
+function _getBooleanVal(value) {
+ return typeof value === 'string' ? value === 'true' : value;
+}
+
+export function generateFilterMixin(filterMap) {
+ const paramKeys = Object.values(filterMap).flatMap(f => Object.keys(f.params));
+ return {
+ data() {
+ return {
+ filterKey: '',
+ keywordInput: '',
+ };
+ },
+ computed: {
+ keywords: {
+ get() {
+ return this.$route.query.keywords;
+ },
+ set(value) {
+ let params = { ...this.$route.query, page: 1 };
+ if (value) {
+ params.keywords = value;
+ } else {
+ delete params['keywords'];
+ }
+ this.updateQueryParams(params);
+ },
+ },
+ filter: {
+ get() {
+ // Return filter where all param conditions are met
+ const filterKeys = intersection(Object.keys(this.$route.query), paramKeys);
+ let key = findKey(filterMap, value => {
+ return filterKeys.every(field => {
+ return value.params[field] === _getBooleanVal(this.$route.query[field]);
+ });
+ });
+ return key;
+ },
+ set(value) {
+ // Get params that aren't part of the filterMap
+ const otherFilters = difference(Object.keys(this.$route.query), paramKeys).reduce(
+ (result, key) => {
+ result[key] = this.$route.query[key];
+ return result;
+ },
+ {}
+ );
+
+ // Set the router with the params from the filterMap and current route
+ this.updateQueryParams({
+ ...otherFilters,
+ ...filterMap[value].params,
+ page: 1,
+ });
+ },
+ },
+ filters() {
+ return Object.entries(filterMap).map(([key, value]) => {
+ return { key, label: value.label };
+ });
+ },
+ setKeywords() {
+ return debounce(this.updateKeywords, 500);
+ },
+ },
+ watch: {
+ keywords() {
+ this.keywordInput = this.keywords;
+ },
+ },
+ beforeMount() {
+ this.keywordInput = this.$route.query.keywords;
+ },
+ methods: {
+ updateQueryParams(params) {
+ const query = transform(
+ params,
+ (result, value, key) => {
+ if (value != null) {
+ result[key] = value;
+ }
+ },
+ {}
+ );
+ this.$router.push({ query }).catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
+ clearSearch: function() {
+ this.keywords = '';
+ },
+ updateKeywords() {
+ this.keywords = this.keywordInput;
+ },
+ },
+ };
+}
+
+export const tableMixin = {
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {
+ pagination: {
+ get() {
+ let params = {
+ rowsPerPage: Number(this.$route.query.page_size) || 25,
+ page: Number(this.$route.query.page) || 1,
+ };
+ // Add descending if it's in the route query params
+ if (this.$route.query.descending !== undefined && this.$route.query.descending !== null) {
+ params.descending = this.$route.query.descending.toString() === 'true';
+ }
+ // Add sortBy if it's in the route query params
+ if (this.$route.query.sortBy) {
+ params.sortBy = this.$route.query.sortBy;
  }
- }
- this.$router.push({ query });
+
+ return params;
+ },
+ set(pagination) {
+ this.$router
+ .replace({
+ ...this.$route,
+ query: {
+ ...this.$route.query,
+ ...pagination,
+ },
+ })
+ .catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
  },
- search: function(search) {
- this.updateQueryParams({ search, page: 1 });
+ },
+ watch: {
+ '$route.query'() {
+ this._loadItems();
  },
- filter: function(filter) {
- this.updateQueryParams({ filter, page: 1 });
+ },
+ mounted() {
+ this._loadItems();
+ },
+ methods: {
+ _loadItems() {
+ this.loading = true;
+ this.fetch(this.$route.query).then(() => {
+ this.loading = false;
+ });
  },
-clearSearch: function() {
-this.updateQueryParams({ search: null });
+fetch() {
+throw Error('Must implement fetch method if using tableMixin');
  },
  },
 };

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -335,10 +335,31 @@
  let cleanedData = { ...data };
  Object.keys(cleanedData).forEach(key => {
  // Trim text fields
- if (typeof cleanedData[key] === 'string') {
+ if (key === 'source') {
+ if (cleanedData[key] === sources.ORGANIZATION) {
+ cleanedData[key] = `${cleanedData.organization} (organization)`;
+ } else if (cleanedData[key] === sources.CONFERENCE) {
+ cleanedData[key] = `${cleanedData.conference} (conference)`;
+ } else if (cleanedData[key] === sources.OTHER) {
+ cleanedData[key] = `${cleanedData.other_source} (other)`;
+ } else {
+ cleanedData[key] = cleanedData[key].trim();
+ }
+ } else if (typeof cleanedData[key] === 'string') {
  cleanedData[key] = cleanedData[key].trim();
- } else if (key === 'uses' || key === 'locations') {
+ } else if (key === 'locations') {
  cleanedData[key] = cleanedData[key].join('|');
+ } else if (key === 'uses') {
+ cleanedData[key] = cleanedData[key]
+ .map(use => {
+ if (use === uses.OTHER) {
+ return `${cleanedData.other_use} (other)`;
+ } else if (use === uses.STORING) {
+ return `storage (${cleanedData.storage})`;
+ }
+ return use;
+ })
+ .join('|');
  }
  });
  return cleanedData;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -1,15 +1,15 @@
 <template>
 
  <div>
- <VChip label>
+ <VChip label class="ml-0">
  <div class="label">
  {{ value }}
  </div>
  </VChip>
  <VBtn icon small right @click="copyToClipboard">
- <VIcon small>
+ <Icon small>
  content_copy
- </VIcon>
+ </Icon>
  </VBtn>
  </div>
 

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,8 +6,8 @@
  :text="text"
  >
  <template #buttons="{close}">
- <VBtn color="primary" flat @click="close">
- {{ $tr('cancel') }}
+ <VBtn flat @click="close">
+ {{ cancelButtonText }}
  </VBtn>
  <VBtn color="primary" dark @click="confirmHandler">
  {{ confirmButtonText }}
@@ -26,11 +26,30 @@
  name: 'ConfirmationDialog',
  components: { MessageDialog },
  props: {
- value: Boolean,
- title: String,
- text: String,
- confirmButtonText: String,
- confirmHandler: Function,
+ value: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ required: true,
+ },
+ text: {
+ type: String,
+ required: true,
+ },
+ confirmButtonText: {
+ type: String,
+ required: true,
+ },
+ confirmHandler: {
+ type: Function,
+ required: true,
+ },
+ cancelButtonText: {
+ type: String,
+ default: 'Cancel',
+ },
  },
  computed: {
  show: {
@@ -42,9 +61,6 @@
  },
  },
  },
- $trs: {
- cancel: 'Cancel',
- },
  };
 
 </script>

contentcuration/contentcuration/frontend/administration/constants.js

@@ -5,42 +5,4 @@ export const RouterNames = {
  USER: 'USER',
 };
 
-export function defaultPagination(routeName) {
- let defaults = {
- descending: false,
- page: 1,
- rowsPerPage: 4,
- sortBy: 'name',
- rowsPerPageItems: [1, 2, 4, 8, 16],
- filter: 'all',
- };
-
- if (routeName == RouterNames.CHANNELS) {
- Object.assign(defaults, {
- filter: 'allchannels',
- });
- } else if (routeName == RouterNames.USERS) {
- Object.assign(defaults, {
- sortBy: 'last_name',
- });
- }
-
- return defaults;
-}
-
-export const userFilterTypes = [
- { key: 'all', label: 'All', backendParams: {} },
- { key: 'active', label: 'Active', backendParams: { is_active: 'True' } },
- { key: 'inactive', label: 'Inactive', backendParams: { is_active: 'False' } },
- { key: 'administrator', label: 'Administrator', backendParams: { is_admin: 'True' } },
- { key: 'sushichef', label: 'Sushi Chef', backendParams: { chef_channels_count__gt: '0' } },
-];
-
-export const channelFilterTypes = [
- { key: 'allchannels', label: 'All', backendParams: { all: 'True' } },
-];
-
-export const filterTypes = [...userFilterTypes, ...channelFilterTypes].reduce((prev, current) => {
- prev[current.key] = current;
- return prev;
-}, {});
+export const rowsPerPageItems = [25, 50, 75, 100];

contentcuration/contentcuration/frontend/administration/mixins.js

@@ -1,24 +1,168 @@
-export const filterMixin = {
- methods: {
- updateQueryParams(params) {
- let query = Object.assign({}, this.$route.query);
- for (let [key, value] of Object.entries(params)) {
- if (value != null) {
- query[key] = value;
- } else {
- delete query[key];
+import debounce from 'lodash/debounce';
+import difference from 'lodash/difference';
+import findKey from 'lodash/findKey';
+import intersection from 'lodash/intersection';
+import transform from 'lodash/transform';
+
+function _getBooleanVal(value) {
+ return typeof value === 'string' ? value === 'true' : value;
+}
+
+export function generateFilterMixin(filterMap) {
+ const paramKeys = Object.values(filterMap).flatMap(f => Object.keys(f.params));
+ return {
+ data() {
+ return {
+ filterKey: '',
+ keywordInput: '',
+ };
+ },
+ computed: {
+ keywords: {
+ get() {
+ return this.$route.query.keywords;
+ },
+ set(value) {
+ let params = { ...this.$route.query, page: 1 };
+ if (value) {
+ params.keywords = value;
+ } else {
+ delete params['keywords'];
+ }
+ this.updateQueryParams(params);
+ },
+ },
+ filter: {
+ get() {
+ // Return filter where all param conditions are met
+ const filterKeys = intersection(Object.keys(this.$route.query), paramKeys);
+ let key = findKey(filterMap, value => {
+ return filterKeys.every(field => {
+ return value.params[field] === _getBooleanVal(this.$route.query[field]);
+ });
+ });
+ return key;
+ },
+ set(value) {
+ // Get params that aren't part of the filterMap
+ const otherFilters = difference(Object.keys(this.$route.query), paramKeys).reduce(
+ (result, key) => {
+ result[key] = this.$route.query[key];
+ return result;
+ },
+ {}
+ );
+
+ // Set the router with the params from the filterMap and current route
+ this.updateQueryParams({
+ ...otherFilters,
+ ...filterMap[value].params,
+ page: 1,
+ });
+ },
+ },
+ filters() {
+ return Object.entries(filterMap).map(([key, value]) => {
+ return { key, label: value.label };
+ });
+ },
+ setKeywords() {
+ return debounce(this.updateKeywords, 500);
+ },
+ },
+ watch: {
+ keywords() {
+ this.keywordInput = this.keywords;
+ },
+ },
+ beforeMount() {
+ this.keywordInput = this.$route.query.keywords;
+ },
+ methods: {
+ updateQueryParams(params) {
+ const query = transform(
+ params,
+ (result, value, key) => {
+ if (value != null) {
+ result[key] = value;
+ }
+ },
+ {}
+ );
+ this.$router.push({ query }).catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
+ clearSearch: function() {
+ this.keywords = '';
+ },
+ updateKeywords() {
+ this.keywords = this.keywordInput;
+ },
+ },
+ };
+}
+
+export const tableMixin = {
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {
+ pagination: {
+ get() {
+ let params = {
+ rowsPerPage: Number(this.$route.query.page_size) || 25,
+ page: Number(this.$route.query.page) || 1,
+ };
+ // Add descending if it's in the route query params
+ if (this.$route.query.descending !== undefined && this.$route.query.descending !== null) {
+ params.descending = this.$route.query.descending.toString() === 'true';
+ }
+ // Add sortBy if it's in the route query params
+ if (this.$route.query.sortBy) {
+ params.sortBy = this.$route.query.sortBy;
  }
- }
- this.$router.push({ query });
+
+ return params;
+ },
+ set(pagination) {
+ this.$router
+ .replace({
+ ...this.$route,
+ query: {
+ ...this.$route.query,
+ ...pagination,
+ },
+ })
+ .catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
  },
- search: function(search) {
- this.updateQueryParams({ search, page: 1 });
+ },
+ watch: {
+ '$route.query'() {
+ this._loadItems();
  },
- filter: function(filter) {
- this.updateQueryParams({ filter, page: 1 });
+ },
+ mounted() {
+ this._loadItems();
+ },
+ methods: {
+ _loadItems() {
+ this.loading = true;
+ this.fetch(this.$route.query).then(() => {
+ this.loading = false;
+ });
  },
-clearSearch: function() {
-this.updateQueryParams({ search: null });
+fetch() {
+throw Error('Must implement fetch method if using tableMixin');
  },
  },
 };

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -335,10 +335,31 @@
  let cleanedData = { ...data };
  Object.keys(cleanedData).forEach(key => {
  // Trim text fields
- if (typeof cleanedData[key] === 'string') {
+ if (key === 'source') {
+ if (cleanedData[key] === sources.ORGANIZATION) {
+ cleanedData[key] = `${cleanedData.organization} (organization)`;
+ } else if (cleanedData[key] === sources.CONFERENCE) {
+ cleanedData[key] = `${cleanedData.conference} (conference)`;
+ } else if (cleanedData[key] === sources.OTHER) {
+ cleanedData[key] = `${cleanedData.other_source} (other)`;
+ } else {
+ cleanedData[key] = cleanedData[key].trim();
+ }
+ } else if (typeof cleanedData[key] === 'string') {
  cleanedData[key] = cleanedData[key].trim();
- } else if (key === 'uses' || key === 'locations') {
+ } else if (key === 'locations') {
  cleanedData[key] = cleanedData[key].join('|');
+ } else if (key === 'uses') {
+ cleanedData[key] = cleanedData[key]
+ .map(use => {
+ if (use === uses.OTHER) {
+ return `${cleanedData.other_use} (other)`;
+ } else if (use === uses.STORING) {
+ return `storage (${cleanedData.storage})`;
+ }
+ return use;
+ })
+ .join('|');
  }
  });
  return cleanedData;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -1,15 +1,15 @@
 <template>
 
  <div>
- <VChip label>
+ <VChip label class="ml-0">
  <div class="label">
  {{ value }}
  </div>
  </VChip>
  <VBtn icon small right @click="copyToClipboard">
- <VIcon small>
+ <Icon small>
  content_copy
- </VIcon>
+ </Icon>
  </VBtn>
  </div>
 

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,8 +6,8 @@
  :text="text"
  >
  <template #buttons="{close}">
- <VBtn color="primary" flat @click="close">
- {{ $tr('cancel') }}
+ <VBtn flat @click="close">
+ {{ cancelButtonText }}
  </VBtn>
  <VBtn color="primary" dark @click="confirmHandler">
  {{ confirmButtonText }}
@@ -26,11 +26,30 @@
  name: 'ConfirmationDialog',
  components: { MessageDialog },
  props: {
- value: Boolean,
- title: String,
- text: String,
- confirmButtonText: String,
- confirmHandler: Function,
+ value: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ required: true,
+ },
+ text: {
+ type: String,
+ required: true,
+ },
+ confirmButtonText: {
+ type: String,
+ required: true,
+ },
+ confirmHandler: {
+ type: Function,
+ required: true,
+ },
+ cancelButtonText: {
+ type: String,
+ default: 'Cancel',
+ },
  },
  computed: {
  show: {
@@ -42,9 +61,6 @@
  },
  },
  },
- $trs: {
- cancel: 'Cancel',
- },
  };
 
 </script>

contentcuration/contentcuration/frontend/administration/constants.js

@@ -5,42 +5,4 @@ export const RouterNames = {
  USER: 'USER',
 };
 
-export function defaultPagination(routeName) {
- let defaults = {
- descending: false,
- page: 1,
- rowsPerPage: 4,
- sortBy: 'name',
- rowsPerPageItems: [1, 2, 4, 8, 16],
- filter: 'all',
- };
-
- if (routeName == RouterNames.CHANNELS) {
- Object.assign(defaults, {
- filter: 'allchannels',
- });
- } else if (routeName == RouterNames.USERS) {
- Object.assign(defaults, {
- sortBy: 'last_name',
- });
- }
-
- return defaults;
-}
-
-export const userFilterTypes = [
- { key: 'all', label: 'All', backendParams: {} },
- { key: 'active', label: 'Active', backendParams: { is_active: 'True' } },
- { key: 'inactive', label: 'Inactive', backendParams: { is_active: 'False' } },
- { key: 'administrator', label: 'Administrator', backendParams: { is_admin: 'True' } },
- { key: 'sushichef', label: 'Sushi Chef', backendParams: { chef_channels_count__gt: '0' } },
-];
-
-export const channelFilterTypes = [
- { key: 'allchannels', label: 'All', backendParams: { all: 'True' } },
-];
-
-export const filterTypes = [...userFilterTypes, ...channelFilterTypes].reduce((prev, current) => {
- prev[current.key] = current;
- return prev;
-}, {});
+export const rowsPerPageItems = [25, 50, 75, 100];

contentcuration/contentcuration/frontend/administration/mixins.js

@@ -1,24 +1,168 @@
-export const filterMixin = {
- methods: {
- updateQueryParams(params) {
- let query = Object.assign({}, this.$route.query);
- for (let [key, value] of Object.entries(params)) {
- if (value != null) {
- query[key] = value;
- } else {
- delete query[key];
+import debounce from 'lodash/debounce';
+import difference from 'lodash/difference';
+import findKey from 'lodash/findKey';
+import intersection from 'lodash/intersection';
+import transform from 'lodash/transform';
+
+function _getBooleanVal(value) {
+ return typeof value === 'string' ? value === 'true' : value;
+}
+
+export function generateFilterMixin(filterMap) {
+ const paramKeys = Object.values(filterMap).flatMap(f => Object.keys(f.params));
+ return {
+ data() {
+ return {
+ filterKey: '',
+ keywordInput: '',
+ };
+ },
+ computed: {
+ keywords: {
+ get() {
+ return this.$route.query.keywords;
+ },
+ set(value) {
+ let params = { ...this.$route.query, page: 1 };
+ if (value) {
+ params.keywords = value;
+ } else {
+ delete params['keywords'];
+ }
+ this.updateQueryParams(params);
+ },
+ },
+ filter: {
+ get() {
+ // Return filter where all param conditions are met
+ const filterKeys = intersection(Object.keys(this.$route.query), paramKeys);
+ let key = findKey(filterMap, value => {
+ return filterKeys.every(field => {
+ return value.params[field] === _getBooleanVal(this.$route.query[field]);
+ });
+ });
+ return key;
+ },
+ set(value) {
+ // Get params that aren't part of the filterMap
+ const otherFilters = difference(Object.keys(this.$route.query), paramKeys).reduce(
+ (result, key) => {
+ result[key] = this.$route.query[key];
+ return result;
+ },
+ {}
+ );
+
+ // Set the router with the params from the filterMap and current route
+ this.updateQueryParams({
+ ...otherFilters,
+ ...filterMap[value].params,
+ page: 1,
+ });
+ },
+ },
+ filters() {
+ return Object.entries(filterMap).map(([key, value]) => {
+ return { key, label: value.label };
+ });
+ },
+ setKeywords() {
+ return debounce(this.updateKeywords, 500);
+ },
+ },
+ watch: {
+ keywords() {
+ this.keywordInput = this.keywords;
+ },
+ },
+ beforeMount() {
+ this.keywordInput = this.$route.query.keywords;
+ },
+ methods: {
+ updateQueryParams(params) {
+ const query = transform(
+ params,
+ (result, value, key) => {
+ if (value != null) {
+ result[key] = value;
+ }
+ },
+ {}
+ );
+ this.$router.push({ query }).catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
+ clearSearch: function() {
+ this.keywords = '';
+ },
+ updateKeywords() {
+ this.keywords = this.keywordInput;
+ },
+ },
+ };
+}
+
+export const tableMixin = {
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {
+ pagination: {
+ get() {
+ let params = {
+ rowsPerPage: Number(this.$route.query.page_size) || 25,
+ page: Number(this.$route.query.page) || 1,
+ };
+ // Add descending if it's in the route query params
+ if (this.$route.query.descending !== undefined && this.$route.query.descending !== null) {
+ params.descending = this.$route.query.descending.toString() === 'true';
+ }
+ // Add sortBy if it's in the route query params
+ if (this.$route.query.sortBy) {
+ params.sortBy = this.$route.query.sortBy;
  }
- }
- this.$router.push({ query });
+
+ return params;
+ },
+ set(pagination) {
+ this.$router
+ .replace({
+ ...this.$route,
+ query: {
+ ...this.$route.query,
+ ...pagination,
+ },
+ })
+ .catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
  },
- search: function(search) {
- this.updateQueryParams({ search, page: 1 });
+ },
+ watch: {
+ '$route.query'() {
+ this._loadItems();
  },
- filter: function(filter) {
- this.updateQueryParams({ filter, page: 1 });
+ },
+ mounted() {
+ this._loadItems();
+ },
+ methods: {
+ _loadItems() {
+ this.loading = true;
+ this.fetch(this.$route.query).then(() => {
+ this.loading = false;
+ });
  },
-clearSearch: function() {
-this.updateQueryParams({ search: null });
+fetch() {
+throw Error('Must implement fetch method if using tableMixin');
  },
  },
 };

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -335,10 +335,31 @@
  let cleanedData = { ...data };
  Object.keys(cleanedData).forEach(key => {
  // Trim text fields
- if (typeof cleanedData[key] === 'string') {
+ if (key === 'source') {
+ if (cleanedData[key] === sources.ORGANIZATION) {
+ cleanedData[key] = `${cleanedData.organization} (organization)`;
+ } else if (cleanedData[key] === sources.CONFERENCE) {
+ cleanedData[key] = `${cleanedData.conference} (conference)`;
+ } else if (cleanedData[key] === sources.OTHER) {
+ cleanedData[key] = `${cleanedData.other_source} (other)`;
+ } else {
+ cleanedData[key] = cleanedData[key].trim();
+ }
+ } else if (typeof cleanedData[key] === 'string') {
  cleanedData[key] = cleanedData[key].trim();
- } else if (key === 'uses' || key === 'locations') {
+ } else if (key === 'locations') {
  cleanedData[key] = cleanedData[key].join('|');
+ } else if (key === 'uses') {
+ cleanedData[key] = cleanedData[key]
+ .map(use => {
+ if (use === uses.OTHER) {
+ return `${cleanedData.other_use} (other)`;
+ } else if (use === uses.STORING) {
+ return `storage (${cleanedData.storage})`;
+ }
+ return use;
+ })
+ .join('|');
  }
  });
  return cleanedData;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -1,15 +1,15 @@
 <template>
 
  <div>
- <VChip label>
+ <VChip label class="ml-0">
  <div class="label">
  {{ value }}
  </div>
  </VChip>
  <VBtn icon small right @click="copyToClipboard">
- <VIcon small>
+ <Icon small>
  content_copy
- </VIcon>
+ </Icon>
  </VBtn>
  </div>
 

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,8 +6,8 @@
  :text="text"
  >
  <template #buttons="{close}">
- <VBtn color="primary" flat @click="close">
- {{ $tr('cancel') }}
+ <VBtn flat @click="close">
+ {{ cancelButtonText }}
  </VBtn>
  <VBtn color="primary" dark @click="confirmHandler">
  {{ confirmButtonText }}
@@ -26,11 +26,30 @@
  name: 'ConfirmationDialog',
  components: { MessageDialog },
  props: {
- value: Boolean,
- title: String,
- text: String,
- confirmButtonText: String,
- confirmHandler: Function,
+ value: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ required: true,
+ },
+ text: {
+ type: String,
+ required: true,
+ },
+ confirmButtonText: {
+ type: String,
+ required: true,
+ },
+ confirmHandler: {
+ type: Function,
+ required: true,
+ },
+ cancelButtonText: {
+ type: String,
+ default: 'Cancel',
+ },
  },
  computed: {
  show: {
@@ -42,9 +61,6 @@
  },
  },
  },
- $trs: {
- cancel: 'Cancel',
- },
  };
 
 </script>

contentcuration/contentcuration/frontend/administration/constants.js

@@ -5,42 +5,4 @@ export const RouterNames = {
  USER: 'USER',
 };
 
-export function defaultPagination(routeName) {
- let defaults = {
- descending: false,
- page: 1,
- rowsPerPage: 4,
- sortBy: 'name',
- rowsPerPageItems: [1, 2, 4, 8, 16],
- filter: 'all',
- };
-
- if (routeName == RouterNames.CHANNELS) {
- Object.assign(defaults, {
- filter: 'allchannels',
- });
- } else if (routeName == RouterNames.USERS) {
- Object.assign(defaults, {
- sortBy: 'last_name',
- });
- }
-
- return defaults;
-}
-
-export const userFilterTypes = [
- { key: 'all', label: 'All', backendParams: {} },
- { key: 'active', label: 'Active', backendParams: { is_active: 'True' } },
- { key: 'inactive', label: 'Inactive', backendParams: { is_active: 'False' } },
- { key: 'administrator', label: 'Administrator', backendParams: { is_admin: 'True' } },
- { key: 'sushichef', label: 'Sushi Chef', backendParams: { chef_channels_count__gt: '0' } },
-];
-
-export const channelFilterTypes = [
- { key: 'allchannels', label: 'All', backendParams: { all: 'True' } },
-];
-
-export const filterTypes = [...userFilterTypes, ...channelFilterTypes].reduce((prev, current) => {
- prev[current.key] = current;
- return prev;
-}, {});
+export const rowsPerPageItems = [25, 50, 75, 100];

contentcuration/contentcuration/frontend/administration/mixins.js

@@ -1,24 +1,168 @@
-export const filterMixin = {
- methods: {
- updateQueryParams(params) {
- let query = Object.assign({}, this.$route.query);
- for (let [key, value] of Object.entries(params)) {
- if (value != null) {
- query[key] = value;
- } else {
- delete query[key];
+import debounce from 'lodash/debounce';
+import difference from 'lodash/difference';
+import findKey from 'lodash/findKey';
+import intersection from 'lodash/intersection';
+import transform from 'lodash/transform';
+
+function _getBooleanVal(value) {
+ return typeof value === 'string' ? value === 'true' : value;
+}
+
+export function generateFilterMixin(filterMap) {
+ const paramKeys = Object.values(filterMap).flatMap(f => Object.keys(f.params));
+ return {
+ data() {
+ return {
+ filterKey: '',
+ keywordInput: '',
+ };
+ },
+ computed: {
+ keywords: {
+ get() {
+ return this.$route.query.keywords;
+ },
+ set(value) {
+ let params = { ...this.$route.query, page: 1 };
+ if (value) {
+ params.keywords = value;
+ } else {
+ delete params['keywords'];
+ }
+ this.updateQueryParams(params);
+ },
+ },
+ filter: {
+ get() {
+ // Return filter where all param conditions are met
+ const filterKeys = intersection(Object.keys(this.$route.query), paramKeys);
+ let key = findKey(filterMap, value => {
+ return filterKeys.every(field => {
+ return value.params[field] === _getBooleanVal(this.$route.query[field]);
+ });
+ });
+ return key;
+ },
+ set(value) {
+ // Get params that aren't part of the filterMap
+ const otherFilters = difference(Object.keys(this.$route.query), paramKeys).reduce(
+ (result, key) => {
+ result[key] = this.$route.query[key];
+ return result;
+ },
+ {}
+ );
+
+ // Set the router with the params from the filterMap and current route
+ this.updateQueryParams({
+ ...otherFilters,
+ ...filterMap[value].params,
+ page: 1,
+ });
+ },
+ },
+ filters() {
+ return Object.entries(filterMap).map(([key, value]) => {
+ return { key, label: value.label };
+ });
+ },
+ setKeywords() {
+ return debounce(this.updateKeywords, 500);
+ },
+ },
+ watch: {
+ keywords() {
+ this.keywordInput = this.keywords;
+ },
+ },
+ beforeMount() {
+ this.keywordInput = this.$route.query.keywords;
+ },
+ methods: {
+ updateQueryParams(params) {
+ const query = transform(
+ params,
+ (result, value, key) => {
+ if (value != null) {
+ result[key] = value;
+ }
+ },
+ {}
+ );
+ this.$router.push({ query }).catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
+ clearSearch: function() {
+ this.keywords = '';
+ },
+ updateKeywords() {
+ this.keywords = this.keywordInput;
+ },
+ },
+ };
+}
+
+export const tableMixin = {
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {
+ pagination: {
+ get() {
+ let params = {
+ rowsPerPage: Number(this.$route.query.page_size) || 25,
+ page: Number(this.$route.query.page) || 1,
+ };
+ // Add descending if it's in the route query params
+ if (this.$route.query.descending !== undefined && this.$route.query.descending !== null) {
+ params.descending = this.$route.query.descending.toString() === 'true';
+ }
+ // Add sortBy if it's in the route query params
+ if (this.$route.query.sortBy) {
+ params.sortBy = this.$route.query.sortBy;
  }
- }
- this.$router.push({ query });
+
+ return params;
+ },
+ set(pagination) {
+ this.$router
+ .replace({
+ ...this.$route,
+ query: {
+ ...this.$route.query,
+ ...pagination,
+ },
+ })
+ .catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
  },
- search: function(search) {
- this.updateQueryParams({ search, page: 1 });
+ },
+ watch: {
+ '$route.query'() {
+ this._loadItems();
  },
- filter: function(filter) {
- this.updateQueryParams({ filter, page: 1 });
+ },
+ mounted() {
+ this._loadItems();
+ },
+ methods: {
+ _loadItems() {
+ this.loading = true;
+ this.fetch(this.$route.query).then(() => {
+ this.loading = false;
+ });
  },
-clearSearch: function() {
-this.updateQueryParams({ search: null });
+fetch() {
+throw Error('Must implement fetch method if using tableMixin');
  },
  },
 };

contentcuration/contentcuration/frontend/accounts/pages/Create.vue

@@ -335,10 +335,31 @@
  let cleanedData = { ...data };
  Object.keys(cleanedData).forEach(key => {
  // Trim text fields
- if (typeof cleanedData[key] === 'string') {
+ if (key === 'source') {
+ if (cleanedData[key] === sources.ORGANIZATION) {
+ cleanedData[key] = `${cleanedData.organization} (organization)`;
+ } else if (cleanedData[key] === sources.CONFERENCE) {
+ cleanedData[key] = `${cleanedData.conference} (conference)`;
+ } else if (cleanedData[key] === sources.OTHER) {
+ cleanedData[key] = `${cleanedData.other_source} (other)`;
+ } else {
+ cleanedData[key] = cleanedData[key].trim();
+ }
+ } else if (typeof cleanedData[key] === 'string') {
  cleanedData[key] = cleanedData[key].trim();
- } else if (key === 'uses' || key === 'locations') {
+ } else if (key === 'locations') {
  cleanedData[key] = cleanedData[key].join('|');
+ } else if (key === 'uses') {
+ cleanedData[key] = cleanedData[key]
+ .map(use => {
+ if (use === uses.OTHER) {
+ return `${cleanedData.other_use} (other)`;
+ } else if (use === uses.STORING) {
+ return `storage (${cleanedData.storage})`;
+ }
+ return use;
+ })
+ .join('|');
  }
  });
  return cleanedData;

contentcuration/contentcuration/frontend/administration/components/ClipboardChip.vue

@@ -1,15 +1,15 @@
 <template>
 
  <div>
- <VChip label>
+ <VChip label class="ml-0">
  <div class="label">
  {{ value }}
  </div>
  </VChip>
  <VBtn icon small right @click="copyToClipboard">
- <VIcon small>
+ <Icon small>
  content_copy
- </VIcon>
+ </Icon>
  </VBtn>
  </div>
 

contentcuration/contentcuration/frontend/administration/components/ConfirmationDialog.vue

@@ -6,8 +6,8 @@
  :text="text"
  >
  <template #buttons="{close}">
- <VBtn color="primary" flat @click="close">
- {{ $tr('cancel') }}
+ <VBtn flat @click="close">
+ {{ cancelButtonText }}
  </VBtn>
  <VBtn color="primary" dark @click="confirmHandler">
  {{ confirmButtonText }}
@@ -26,11 +26,30 @@
  name: 'ConfirmationDialog',
  components: { MessageDialog },
  props: {
- value: Boolean,
- title: String,
- text: String,
- confirmButtonText: String,
- confirmHandler: Function,
+ value: {
+ type: Boolean,
+ default: false,
+ },
+ title: {
+ type: String,
+ required: true,
+ },
+ text: {
+ type: String,
+ required: true,
+ },
+ confirmButtonText: {
+ type: String,
+ required: true,
+ },
+ confirmHandler: {
+ type: Function,
+ required: true,
+ },
+ cancelButtonText: {
+ type: String,
+ default: 'Cancel',
+ },
  },
  computed: {
  show: {
@@ -42,9 +61,6 @@
  },
  },
  },
- $trs: {
- cancel: 'Cancel',
- },
  };
 
 </script>

contentcuration/contentcuration/frontend/administration/constants.js

@@ -5,42 +5,4 @@ export const RouterNames = {
  USER: 'USER',
 };
 
-export function defaultPagination(routeName) {
- let defaults = {
- descending: false,
- page: 1,
- rowsPerPage: 4,
- sortBy: 'name',
- rowsPerPageItems: [1, 2, 4, 8, 16],
- filter: 'all',
- };
-
- if (routeName == RouterNames.CHANNELS) {
- Object.assign(defaults, {
- filter: 'allchannels',
- });
- } else if (routeName == RouterNames.USERS) {
- Object.assign(defaults, {
- sortBy: 'last_name',
- });
- }
-
- return defaults;
-}
-
-export const userFilterTypes = [
- { key: 'all', label: 'All', backendParams: {} },
- { key: 'active', label: 'Active', backendParams: { is_active: 'True' } },
- { key: 'inactive', label: 'Inactive', backendParams: { is_active: 'False' } },
- { key: 'administrator', label: 'Administrator', backendParams: { is_admin: 'True' } },
- { key: 'sushichef', label: 'Sushi Chef', backendParams: { chef_channels_count__gt: '0' } },
-];
-
-export const channelFilterTypes = [
- { key: 'allchannels', label: 'All', backendParams: { all: 'True' } },
-];
-
-export const filterTypes = [...userFilterTypes, ...channelFilterTypes].reduce((prev, current) => {
- prev[current.key] = current;
- return prev;
-}, {});
+export const rowsPerPageItems = [25, 50, 75, 100];

contentcuration/contentcuration/frontend/administration/mixins.js

@@ -1,24 +1,168 @@
-export const filterMixin = {
- methods: {
- updateQueryParams(params) {
- let query = Object.assign({}, this.$route.query);
- for (let [key, value] of Object.entries(params)) {
- if (value != null) {
- query[key] = value;
- } else {
- delete query[key];
+import debounce from 'lodash/debounce';
+import difference from 'lodash/difference';
+import findKey from 'lodash/findKey';
+import intersection from 'lodash/intersection';
+import transform from 'lodash/transform';
+
+function _getBooleanVal(value) {
+ return typeof value === 'string' ? value === 'true' : value;
+}
+
+export function generateFilterMixin(filterMap) {
+ const paramKeys = Object.values(filterMap).flatMap(f => Object.keys(f.params));
+ return {
+ data() {
+ return {
+ filterKey: '',
+ keywordInput: '',
+ };
+ },
+ computed: {
+ keywords: {
+ get() {
+ return this.$route.query.keywords;
+ },
+ set(value) {
+ let params = { ...this.$route.query, page: 1 };
+ if (value) {
+ params.keywords = value;
+ } else {
+ delete params['keywords'];
+ }
+ this.updateQueryParams(params);
+ },
+ },
+ filter: {
+ get() {
+ // Return filter where all param conditions are met
+ const filterKeys = intersection(Object.keys(this.$route.query), paramKeys);
+ let key = findKey(filterMap, value => {
+ return filterKeys.every(field => {
+ return value.params[field] === _getBooleanVal(this.$route.query[field]);
+ });
+ });
+ return key;
+ },
+ set(value) {
+ // Get params that aren't part of the filterMap
+ const otherFilters = difference(Object.keys(this.$route.query), paramKeys).reduce(
+ (result, key) => {
+ result[key] = this.$route.query[key];
+ return result;
+ },
+ {}
+ );
+
+ // Set the router with the params from the filterMap and current route
+ this.updateQueryParams({
+ ...otherFilters,
+ ...filterMap[value].params,
+ page: 1,
+ });
+ },
+ },
+ filters() {
+ return Object.entries(filterMap).map(([key, value]) => {
+ return { key, label: value.label };
+ });
+ },
+ setKeywords() {
+ return debounce(this.updateKeywords, 500);
+ },
+ },
+ watch: {
+ keywords() {
+ this.keywordInput = this.keywords;
+ },
+ },
+ beforeMount() {
+ this.keywordInput = this.$route.query.keywords;
+ },
+ methods: {
+ updateQueryParams(params) {
+ const query = transform(
+ params,
+ (result, value, key) => {
+ if (value != null) {
+ result[key] = value;
+ }
+ },
+ {}
+ );
+ this.$router.push({ query }).catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
+ clearSearch: function() {
+ this.keywords = '';
+ },
+ updateKeywords() {
+ this.keywords = this.keywordInput;
+ },
+ },
+ };
+}
+
+export const tableMixin = {
+ data() {
+ return {
+ loading: false,
+ };
+ },
+ computed: {
+ pagination: {
+ get() {
+ let params = {
+ rowsPerPage: Number(this.$route.query.page_size) || 25,
+ page: Number(this.$route.query.page) || 1,
+ };
+ // Add descending if it's in the route query params
+ if (this.$route.query.descending !== undefined && this.$route.query.descending !== null) {
+ params.descending = this.$route.query.descending.toString() === 'true';
+ }
+ // Add sortBy if it's in the route query params
+ if (this.$route.query.sortBy) {
+ params.sortBy = this.$route.query.sortBy;
  }
- }
- this.$router.push({ query });
+
+ return params;
+ },
+ set(pagination) {
+ this.$router
+ .replace({
+ ...this.$route,
+ query: {
+ ...this.$route.query,
+ ...pagination,
+ },
+ })
+ .catch(error => {
+ if (error && error.name != 'NavigationDuplicated') {
+ throw error;
+ }
+ });
+ },
  },
- search: function(search) {
- this.updateQueryParams({ search, page: 1 });
+ },
+ watch: {
+ '$route.query'() {
+ this._loadItems();
  },
- filter: function(filter) {
- this.updateQueryParams({ filter, page: 1 });
+ },
+ mounted() {
+ this._loadItems();
+ },
+ methods: {
+ _loadItems() {
+ this.loading = true;
+ this.fetch(this.$route.query).then(() => {
+ this.loading = false;
+ });
  },
-clearSearch: function() {
-this.updateQueryParams({ search: null });
+fetch() {
+throw Error('Must implement fetch method if using tableMixin');
  },
  },
 };