feat(backup): add restore form to ui

web/src/App.vue

@@ -81,6 +81,23 @@
       </template>
     </EditDialog>
 
+    <EditDialog
+      v-model="restoreProjectDialog"
+      save-button-text="Restore"
+      :title="$t('restoreProject')"
+      event-name="i-project"
+    >
+      <template v-slot:form="{ onSave, onError, needSave, needReset }">
+        <RestoreProjectForm
+          item-id="new"
+          @save="onSave"
+          @error="onError"
+          :need-save="needSave"
+          :need-reset="needReset"
+        />
+      </template>
+    </EditDialog>
+
     <v-snackbar
       v-model="snackbar"
       :color="snackbarColor"
@@ -170,7 +187,7 @@
             </v-list-item-content>
           </v-list-item>
 
-          <v-list-item @click="restoreProject" v-if="user.can_create_project">
+          <v-list-item @click="restoreProjectDialog = true" v-if="user.can_create_project">
             <v-list-item-icon>
               <v-icon>mdi-backup-restore</v-icon>
             </v-list-item-icon>
@@ -194,6 +211,18 @@
         </v-list-item>
       </v-list>
 
+      <v-list class="pt-0" v-if="!project">
+        <v-list-item key="new_project" :to="`/project/restore`">
+          <v-list-item-icon>
+            <v-icon>mdi-plus</v-icon>
+          </v-list-item-icon>
+
+          <v-list-item-content>
+            <v-list-item-title>{{ $t('restoreProject') }}</v-list-item-title>
+          </v-list-item-content>
+        </v-list-item>
+      </v-list>
+
       <v-list class="pt-0" v-if="project">
 
         <v-list-item key="dashboard" :to="`/project/${projectId}/history`">
@@ -639,6 +668,7 @@ import UserForm from '@/components/UserForm.vue';
 import ChangePasswordForm from '@/components/ChangePasswordForm.vue';
 import EventBus from '@/event-bus';
 import socket from '@/socket';
+import RestoreProjectForm from '@/components/RestoreProjectForm.vue';
 
 const PROJECT_COLORS = [
   'red',
@@ -718,6 +748,7 @@ function getSystemLang() {
 export default {
   name: 'App',
   components: {
+    RestoreProjectForm,
     ChangePasswordForm,
     UserForm,
     EditDialog,
@@ -739,6 +770,7 @@ export default {
       newProjectType: '',
       userDialog: null,
       passwordDialog: null,
+      restoreProjectDialog: null,
 
       taskLogDialog: null,
       task: null,

web/src/components/RestoreProjectForm.vue

@@ -0,0 +1,62 @@
+<template>
+  <v-form
+    ref="form"
+    lazy-validation
+    v-model="formValid"
+    v-if="item != null"
+  >
+    <v-alert
+      :value="formError"
+      color="error"
+      class="pb-2"
+    >{{ formError }}</v-alert>
+
+    <v-text-field
+      v-model="projectName"
+      :label="$t('projectName')"
+      :rules="[v => !!v || $t('project_name_required')]"
+      required
+      :disabled="formSaving"
+    ></v-text-field>
+
+    <v-file-input
+      show-size
+      truncate-length="15"
+      placeholder="Backup file"
+      @change="setFile"
+    ></v-file-input>
+  </v-form>
+</template>
+<script>
+import ItemFormBase from '@/components/ItemFormBase';
+
+export default {
+  mixins: [ItemFormBase],
+  data() {
+    return {
+      projectName: null,
+    };
+  },
+  methods: {
+
+    beforeSave() {
+      this.item.meta.name = this.projectName;
+    },
+
+    /**
+     * @param file {File}
+     */
+    async setFile(file) {
+      if (file == null) {
+        this.item = {};
+        return;
+      }
+      this.item = JSON.parse(await file.text());
+    },
+
+    getItemsUrl() {
+      return '/api/projects/restore';
+    },
+  },
+};
+</script>

web/src/router/index.js

@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
+import RestoreProject from '@/views/project/RestoreProject.vue';
 import Schedule from '../views/project/Schedule.vue';
 import History from '../views/project/History.vue';
 import Activity from '../views/project/Activity.vue';
@@ -26,6 +27,10 @@ const routes = [
     path: '/project/new',
     component: New,
   },
+  {
+    path: '/project/restore',
+    component: RestoreProject,
+  },
   {
     path: '/project/:projectId',
     redirect: '/project/:projectId/history',

web/src/views/project/RestoreProject.vue

@@ -0,0 +1,52 @@
+<template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
+  <div>
+    <v-toolbar flat >
+      <v-app-bar-nav-icon @click="showDrawer()"></v-app-bar-nav-icon>
+      <v-toolbar-title>{{ $t('restoreProject') }}</v-toolbar-title>
+      <v-spacer></v-spacer>
+    </v-toolbar>
+
+    <div class="project-settings-form">
+      <div style="height: 300px;">
+        <RestoreProjectForm item-id="new" ref="editForm" @save="onSave" />
+      </div>
+
+      <div class="text-right">
+        <v-btn color="primary" @click="restoreProject()">{{ $t('restore') }}</v-btn>
+      </div>
+    </div>
+
+  </div>
+</template>
+<style lang="scss">
+
+</style>
+<script>
+import EventBus from '@/event-bus';
+import RestoreProjectForm from '@/components/RestoreProjectForm.vue';
+
+export default {
+  components: { RestoreProjectForm },
+  data() {
+    return {
+    };
+  },
+
+  methods: {
+    onSave(e) {
+      EventBus.$emit('i-project', {
+        action: 'new',
+        item: e.item,
+      });
+    },
+
+    showDrawer() {
+      EventBus.$emit('i-show-drawer');
+    },
+
+    async restoreProject() {
+      await this.$refs.editForm.save();
+    },
+  },
+};
+</script>