baiscs of space edit page

vue/src/apps/SpaceManageView/SpaceManageView.vue

@@ -0,0 +1,90 @@
+<template>
+    <div id="app">
+
+        <div class="row  mt-2">
+            <div class="col col-12">
+                <div v-if="space !== undefined">
+                    Recipes {{ space.recipe_count }} / {{ space.max_recipes }}
+                    Users {{ space.user_count }} / {{ space.max_users }}
+                    Files {{ space.file_size_mb }} / {{ space.max_file_storage_mb }}
+                </div>
+            </div>
+        </div>
+
+        <div class="row mt-2">
+            <div class="col col-12">
+                <div v-if="user_spaces !== undefined">
+                    <table class="table">
+                        <thead>
+                        <tr>
+                            <th>{{ $t('User') }}</th>
+                            <th>{{ $t('Groups') }}</th>
+                            <th></th>
+                        </tr>
+                        </thead>
+                        <tr v-for="us in user_spaces" :key="us.id">
+                            <td>{{ us.user.username }}</td>
+                            <td>
+                                <generic-multiselect
+                                    class="input-group-text m-0 p-0"
+                                    @change="us.groups = $event.val"
+                                    label="name"
+                                    :initial_selection="us.groups"
+                                    :model="Models.GROUP"
+                                    style="flex-grow: 1; flex-shrink: 1; flex-basis: 0"
+                                    :limit="10"
+                                    :multiple="true"
+                                />
+                            </td>
+                            <td>
+                                <button @click="alert('')">{{ $t('Delete') }}</button>
+                            </td>
+                        </tr>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+</template>
+
+<script>
+import Vue from "vue"
+import {BootstrapVue} from "bootstrap-vue"
+
+import "bootstrap-vue/dist/bootstrap-vue.css"
+
+import {ApiMixin, ResolveUrlMixin, ToastMixin} from "@/utils/utils"
+
+import {ApiApiFactory} from "@/utils/openapi/api.ts"
+import GenericMultiselect from "@/components/GenericMultiselect";
+
+Vue.use(BootstrapVue)
+
+export default {
+    name: "SupermarketView",
+    mixins: [ResolveUrlMixin, ToastMixin, ApiMixin],
+    components: {GenericMultiselect},
+    data() {
+        return {
+            space: undefined,
+            user_spaces: []
+        }
+    },
+    mounted() {
+        this.$i18n.locale = window.CUSTOM_LOCALE
+
+        let apiFactory = new ApiApiFactory()
+        apiFactory.retrieveSpace(window.ACTIVE_SPACE_ID).then(r => {
+            this.space = r.data
+        })
+        apiFactory.listUserSpaces().then(r => {
+            this.user_spaces = r.data
+        })
+    },
+    methods: {},
+}
+</script>
+
+<style></style>

vue/src/apps/SpaceManageView/main.js

@@ -0,0 +1,18 @@
+import Vue from 'vue'
+import App from './SpaceManageView.vue'
+import i18n from '@/i18n'
+
+Vue.config.productionTip = false
+
+// TODO move this and other default stuff to centralized JS file (verify nothing breaks)
+let publicPath = localStorage.STATIC_URL + 'vue/'
+if (process.env.NODE_ENV === 'development') {
+    publicPath = 'http://localhost:8080/'
+}
+export default __webpack_public_path__ = publicPath // eslint-disable-line
+
+
+new Vue({
+    i18n,
+    render: h => h(App),
+}).$mount('#app')