Backup card (#78)

* backup / import dialog

* upgrade to new tag method

* New import card

* rename settings.py to app_config.py

* migrate to poetry for development

* fix failing test

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/src/components/Settings/Backup/BackupCard.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <ImportDialog
+      :name="selectedName"
+      :date="selectedDate"
+      ref="import_dialog"
+      @import="importBackup"
+      @delete="deleteBackup"
+    />
+    <v-row>
+      <v-col
+        :sm="6"
+        :md="6"
+        :lg="4"
+        :xl="4"
+        v-for="backup in backups"
+        :key="backup.name"
+      >
+        <v-card @click="openDialog(backup)">
+          <v-card-text>
+            <v-row align="center">
+              <v-col cols="12" sm="2">
+                <v-icon color="primary"> mdi-backup-restore </v-icon>
+              </v-col>
+              <v-col cols="12" sm="10">
+                <div>
+                  <strong>{{ backup.name }}</strong>
+                </div>
+                <div>{{ readableTime(backup.date) }}</div>
+              </v-col>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </div>
+</template>
+
+<script>
+import ImportDialog from "./ImportDialog";
+import api from "../../../api";
+import utils from "../../../utils";
+export default {
+  props: {
+    backups: Array,
+  },
+  components: {
+    ImportDialog,
+  },
+  data() {
+    return {
+      selectedName: "",
+      selectedDate: "",
+      loading: false,
+    };
+  },
+  methods: {
+    openDialog(backup) {
+      this.selectedDate = this.readableTime(backup.date);
+      this.selectedName = backup.name;
+      this.$refs.import_dialog.open();
+    },
+    readableTime(timestamp) {
+      let date = new Date(timestamp);
+      return utils.getDateAsText(date);
+    },
+    async importBackup(data) {
+      this.$emit("loading");
+      let response = await api.backups.import(data.name, data);
+
+      let failed = response.data.failed;
+      let succesful = response.data.successful;
+
+      this.$emit("finished", succesful, failed);
+    },
+    deleteBackup(data) {
+      this.$emit("loading");
+
+      api.backups.delete(data.name);
+      this.selectedBackup = null;
+      this.backupLoading = false;
+
+      this.$emit("finished");
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Backup/ImportDialog.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="500">
+      <v-card>
+        <v-card-title> {{ name }} </v-card-title>
+        <v-card-subtitle class="mb-n3"> {{ date }} </v-card-subtitle>
+        <v-divider></v-divider>
+
+        <v-card-text>
+          <v-row>
+            <v-col>
+              <v-checkbox
+                class="mb-n4 mt-1"
+                dense
+                label="Import Recipes"
+                v-model="importRecipes"
+              ></v-checkbox>
+              <v-checkbox
+                class="my-n4"
+                dense
+                label="Import Themes"
+                v-model="importThemes"
+              ></v-checkbox>
+              <v-checkbox
+                class="my-n4"
+                dense
+                label="Import Settings"
+                v-model="importSettings"
+              ></v-checkbox>
+            </v-col>
+            <!-- <v-col>
+              <v-tooltip top>
+                <template v-slot:activator="{ on, attrs }">
+                  <span v-on="on" v-bind="attrs">
+                    <v-checkbox
+                      class="mb-n4 mt-1"
+                      dense
+                      label="Force"
+                      v-model="forceImport"
+                    ></v-checkbox>
+                  </span>
+                </template>
+                <span>Force update existing recipes</span>
+              </v-tooltip>
+              <v-tooltip top>
+                <template v-slot:activator="{ on, attrs }">
+                  <span v-on="on" v-bind="attrs">
+                    <v-checkbox
+                      class="mb-n4 mt-1"
+                      dense
+                      label="Rebase"
+                      v-model="rebaseImport"
+                    ></v-checkbox>
+                  </span>
+                </template>
+                <span
+                  >Removes all recipes, and then imports recipes from the
+                  backup</span
+                >
+              </v-tooltip>
+            </v-col> -->
+          </v-row>
+        </v-card-text>
+
+        <v-divider></v-divider>
+
+        <v-card-actions>
+          <v-btn disabled color="success" text @click="raiseEvent('download')">
+            Download
+          </v-btn>
+          <v-spacer></v-spacer>
+          <v-btn color="error" text @click="raiseEvent('delete')">
+            Delete
+          </v-btn>
+          <v-btn color="success" text @click="raiseEvent('import')">
+            Import
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: {
+    name: {
+      default: "Backup Name",
+    },
+    date: {
+      default: "Backup Date",
+    },
+  },
+  data() {
+    return {
+      dialog: false,
+      importRecipes: true,
+      forceImport: false,
+      rebaseImport: false,
+      importThemes: false,
+      importSettings: false,
+    };
+  },
+  methods: {
+    open() {
+      this.dialog = true;
+    },
+    close() {
+      this.dialog = false;
+    },
+    raiseEvent(event) {
+      let eventData = {
+        name: this.name,
+        recipes: this.importRecipes,
+        force: this.forceImport,
+        rebase: this.rebaseImport,
+        themes: this.importThemes,
+        settings: this.importSettings,
+      };
+      this.close();
+      this.$emit(event, eventData);
+    },
+  },
+};
+</script>
+
+<style>
+</style>

frontend/src/components/Settings/Backup/index.vue

@@ -26,36 +26,16 @@
           ></v-combobox>
         </v-col>
         <v-col dense cols="12" sm="12" md="2">
-          <v-btn block color="accent" @click="createBackup" width="165">
+          <v-btn block text color="accent" @click="createBackup" width="165">
             Backup Recipes
           </v-btn>
         </v-col>
       </v-row>
-
-      <v-row dense align="center">
-        <v-col dense cols="12" sm="12" md="4">
-          <v-form ref="form">
-            <v-combobox
-              auto-select-first
-              label="Select a Backup for Import"
-              :items="availableBackups"
-              v-model="selectedBackup"
-              :rules="[(v) => !!v || 'Backup Selection is Required']"
-              required
-            ></v-combobox>
-          </v-form>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="3" lg="2">
-          <v-btn block color="accent" @click="importBackup">
-            Import Backup
-          </v-btn>
-        </v-col>
-        <v-col dense cols="12" sm="12" md="2" lg="2">
-          <v-btn block color="error" @click="deleteBackup">
-            Delete Backup
-          </v-btn>
-        </v-col>
-      </v-row>
+      <BackupCard
+        @loading="backupLoading = true"
+        @finished="processFinished"
+        :backups="availableBackups"
+      />
       <SuccessFailureAlert
         success-header="Successfully Imported"
         :success="successfulImports"
@@ -69,10 +49,12 @@
 <script>
 import api from "../../../api";
 import SuccessFailureAlert from "../../UI/SuccessFailureAlert";
+import BackupCard from "./BackupCard";
 
 export default {
   components: {
     SuccessFailureAlert,
+    BackupCard,
   },
   data() {
     return {
@@ -95,18 +77,6 @@ export default {
       this.availableBackups = response.imports;
       this.availableTemplates = response.templates;
     },
-    async importBackup() {
-      if (this.$refs.form.validate()) {
-        this.backupLoading = true;
-
-        let response = await api.backups.import(this.selectedBackup);
-        console.log(response.data);
-        this.failedImports = response.data.failed;
-        this.successfulImports = response.data.successful;
-
-        this.backupLoading = false;
-      }
-    },
     deleteBackup() {
       if (this.$refs.form.validate()) {
         this.backupLoading = true;
@@ -129,6 +99,12 @@ export default {
         this.backupLoading = false;
       }
     },
+    processFinished(successful = null, failed = null) {
+      this.getAvailableBackups();
+      this.backupLoading = false;
+      this.successfulImports = successful;
+      this.failedImports = failed;
+    },
   },
 };
 </script>