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')