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');
     },
   },
 };