completed migration of file view to generic model list

vue/src/apps/ModelListView/ModelListView.vue

@@ -15,12 +15,10 @@
       <div class="col-xl-8 col-12">
         <div class="container-fluid d-flex flex-column flex-grow-1">
 
-          <div class="row" v-if="this_model === Models.AUTOMATION">
+          <!-- dynamically loaded header components -->
+          <div class="row" v-if="header_component_name !== ''">
             <div class="col-md-12">
-              <b-alert show variant="warning">
-                <b-badge>BETA</b-badge>
-                {{ $t('warning_feature_beta') }}
-              </b-alert>
+              <component :is="headerComponent"></component>
             </div>
           </div>
 
@@ -109,6 +107,7 @@ import GenericHorizontalCard from "@/components/GenericHorizontalCard";
 import GenericModalForm from "@/components/Modals/GenericModalForm";
 import ModelMenu from "@/components/ModelMenu";
 import {ApiApiFactory} from "@/utils/openapi/api";
+//import StorageQuota from "@/components/StorageQuota";
 
 Vue.use(BootstrapVue)
 
@@ -117,7 +116,9 @@ export default {
   // or i'm capturing it incorrectly
   name: 'ModelListView',
   mixins: [CardMixin, ApiMixin, ToastMixin],
-  components: {GenericHorizontalCard, GenericModalForm, GenericInfiniteCards, ModelMenu},
+  components: {
+     GenericHorizontalCard, GenericModalForm, GenericInfiniteCards, ModelMenu,
+  },
   data() {
     return {
       // this.Models and this.Actions inherited from ApiMixin
@@ -134,6 +135,12 @@ export default {
       show_modal: false,
       show_split: false,
       paginated: false,
+      header_component_name: undefined,
+    }
+  },
+  computed: {
+    headerComponent() {
+      return () => import(`@/components/${this.header_component_name}`)
     }
   },
   mounted() {
@@ -142,6 +149,7 @@ export default {
     this.this_model = this.Models[model_config?.model]
     this.this_recipe_param = model_config?.recipe_param
     this.paginated = this.this_model?.paginated ?? false
+    this.header_component_name = this.this_model?.list?.header_component?.name ?? undefined
     this.$nextTick(() => {
       if (!this.paginated) {
         this.getItems({page:1},'left')

vue/src/apps/UserFileView/UserFileView.vue

@@ -1,111 +0,0 @@
-<template>
-
-  <div id="app">
-
-
-    <div class="row">
-      <div class="col col-md-12">
-        <h3>{{ $t('Files') }} <span class="float-right"><file-editor @change="loadInitial()"></file-editor></span>
-        </h3>
-      </div>
-
-    </div>
-
-    <div class="row" style="margin-top: 2vh">
-      <div class="col col-md-12">
-        <b-progress :max="max_file_size_mb">
-          <b-progress-bar :value="current_file_size_mb">
-            <span><strong class="text-dark ">{{ current_file_size_mb.toFixed(2) }} / {{ max_file_size_mb }} MB</strong></span>
-          </b-progress-bar>
-        </b-progress>
-      </div>
-
-    </div>
-
-    <div class="row" style="margin-top: 2vh">
-      <div class="col col-md-12">
-        <table class="table">
-          <thead>
-          <tr>
-            <th>{{ $t('Name') }}</th>
-            <th>{{ $t('Size') }} (MB)</th>
-            <th>{{ $t('Download') }}</th>
-            <th>{{ $t('Edit') }}</th>
-          </tr>
-          </thead>
-          <tr v-for="f in files" v-bind:key="f.id">
-            <td>{{ f.name }}</td>
-            <td>{{ f.file_size_kb / 1000 }}</td>
-            <td><a :href="f.file" target="_blank" rel="noreferrer nofollow">{{ $t('Download') }}</a></td>
-            <td>
-
-              <file-editor @change="loadInitial()" :file_id="f.id"></file-editor>
-
-            </td>
-          </tr>
-        </table>
-      </div>
-
-    </div>
-
-  </div>
-</template>
-
-<script>
-import Vue from 'vue'
-import {BootstrapVue} from 'bootstrap-vue'
-
-import 'bootstrap-vue/dist/bootstrap-vue.css'
-
-import {ResolveUrlMixin, ToastMixin} from "@/utils/utils";
-
-
-import {ApiApiFactory} from "@/utils/openapi/api.ts";
-
-Vue.use(BootstrapVue)
-// import draggable from 'vuedraggable'
-
-import axios from 'axios'
-import FileEditor from "@/components/FileEditor";
-// import Multiselect from "vue-multiselect";
-
-axios.defaults.xsrfHeaderName = 'X-CSRFToken'
-axios.defaults.xsrfCookieName = 'csrftoken'
-
-export default {
-  name: 'UserFileView',
-  mixins: [
-    ResolveUrlMixin,
-    ToastMixin,
-  ],
-  components: {
-    FileEditor
-  },
-  data() {
-    return {
-      files: [],
-
-      current_file_size_mb: window.CURRENT_FILE_SIZE_MB,
-      max_file_size_mb: window.MAX_FILE_SIZE_MB
-    }
-  },
-  mounted() {
-    this.$i18n.locale = window.CUSTOM_LOCALE
-    this.loadInitial()
-  },
-  methods: {
-    loadInitial: function () {
-      let apiClient = new ApiApiFactory()
-      apiClient.listUserFiles().then(results => {
-        this.files = results.data
-      })
-    },
-  }
-}
-
-</script>
-
-<style>
-
-
-</style>

vue/src/apps/UserFileView/main.js

@@ -1,10 +0,0 @@
-import Vue from 'vue'
-import App from './UserFileView.vue'
-import i18n from '@/i18n'
-
-Vue.config.productionTip = false
-
-new Vue({
-    i18n,
-    render: h => h(App),
-}).$mount('#app')

vue/src/components/BetaWarning.vue

@@ -0,0 +1,16 @@
+<template>
+  <b-alert show variant="warning">
+    <b-badge>BETA</b-badge>
+    {{ $t('warning_feature_beta') }}
+  </b-alert>
+</template>
+
+<script>
+export default {
+  name: "BetaWarning"
+}
+</script>
+
+<style scoped>
+
+</style>

vue/src/components/ModelMenu.vue

@@ -28,7 +28,11 @@
 
           <b-dropdown-item :href="resolveDjangoUrl('list_automation')">
             <i class="fas fa-robot fa-fw"></i> {{ Models['AUTOMATION'].name }}
-        </b-dropdown-item>
+          </b-dropdown-item>
+
+          <b-dropdown-item :href="resolveDjangoUrl('list_user_file')">
+            <i class="fas fa-file fa-fw"></i> {{ Models['USERFILE'].name }}
+          </b-dropdown-item>
 
         </b-dropdown>
     </span>

vue/src/components/StorageQuota.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+
+    <div v-if="max_file_size_mb === -1">
+      <b-alert show variant="warning">
+        {{ $t('file_upload_disabled') }}
+      </b-alert>
+    </div>
+
+    <b-progress :max="progress_max" v-else>
+      <b-progress-bar :value="current_file_size_mb" style="text-align: center">
+        <span><strong class="text-dark ">{{ current_file_size_mb.toFixed(2) }} / {{ display_max }} MB</strong></span>
+      </b-progress-bar>
+    </b-progress>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "StorageQuota",
+  props: {},
+  computed: {
+    progress_max() {
+      if (this.max_file_size_mb === 0) {
+        return this.current_file_size_mb * 4
+      }
+      return this.max_file_size_mb
+    },
+    display_max(){
+      if (this.max_file_size_mb === 0) {
+        return '∞'
+      }
+      return this.max_file_size_mb
+    }
+  },
+  data: function () {
+    return {
+      current_file_size_mb: window.CURRENT_FILE_SIZE_MB,
+      max_file_size_mb: window.MAX_FILE_SIZE_MB
+    }
+  },
+  mounted() {
+
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

vue/src/locales/en.json

@@ -8,6 +8,7 @@
   "success_creating_resource": "Successfully created a resource!",
   "success_updating_resource": "Successfully updated a resource!",
   "success_deleting_resource": "Successfully deleted a resource!",
+  "file_upload_disabled": "File upload is not enabled for your space.",
   "step_time_minutes": "Step time in minutes",
   "confirm_delete": "Are you sure you want to delete this {object}?",
   "import_running": "Import running, please wait!",

vue/src/utils/models.js

@@ -308,6 +308,11 @@ export class Models {
         'name': i18n.t('Automation'),
         'apiName': 'Automation',
         'paginated': true,
+        'list': {
+            'header_component': {
+                'name': 'BetaWarning'
+            },
+        },
         'create': {
             'params': [['name', 'description', 'type', 'param_1', 'param_2', 'param_3']],
             'form': {
@@ -407,6 +412,11 @@ export class Models {
         'name': i18n.t('File'),
         'apiName': 'UserFile',
         'paginated': false,
+        'list': {
+            'header_component': {
+                'name': 'StorageQuota'
+            },
+        },
         'create': {
             'params': ['name', 'file',],
             'form': {