mirror of
				https://github.com/mealie-recipes/mealie.git
				synced 2025-10-31 10:13:32 -04:00 
			
		
		
		
	* automated docs update * recipe rating component * recipe partial updates - closes #25 * use Vue.delete to update store * format * arrow functions * fix tests * format * initial context menu * localize * add confirmation dialog * context menu * fix bare exception * update line length * format all file with prettier * update changelog * download as json * update python dependencies * update javascript dependencies Co-authored-by: hay-kot <hay-kot@pm.me>
		
			
				
	
	
		
			113 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			113 lines
		
	
	
		
			2.9 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
| <template>
 | |
|   <div class="text-center">
 | |
|     <v-dialog v-model="dialog" width="500" :fullscreen="$vuetify.breakpoint.xsOnly">
 | |
|       <v-card>
 | |
|         <v-toolbar dark color="primary" v-show="$vuetify.breakpoint.xsOnly">
 | |
|           <v-btn icon dark @click="dialog = false">
 | |
|             <v-icon>mdi-close</v-icon>
 | |
|           </v-btn>
 | |
|           <v-toolbar-title></v-toolbar-title>
 | |
|           <v-spacer></v-spacer>
 | |
|           <v-toolbar-items>
 | |
|             <v-btn dark text @click="raiseEvent('import')">
 | |
|               {{ $t("general.import") }}
 | |
|             </v-btn>
 | |
|           </v-toolbar-items>
 | |
|         </v-toolbar>
 | |
|         <v-card-title> {{ name }} </v-card-title>
 | |
|         <v-card-subtitle class="mb-n3"> {{ $d(new Date(date), "medium") }} </v-card-subtitle>
 | |
|         <v-divider></v-divider>
 | |
| 
 | |
|         <v-card-text>
 | |
|           <ImportOptions @update-options="updateOptions" class="mt-5 mb-2" />
 | |
| 
 | |
|           <v-divider></v-divider>
 | |
| 
 | |
|           <v-checkbox
 | |
|             dense
 | |
|             :label="$t('settings.remove-existing-entries-matching-imported-entries')"
 | |
|             v-model="forceImport"
 | |
|           ></v-checkbox>
 | |
|         </v-card-text>
 | |
| 
 | |
|         <v-divider></v-divider>
 | |
| 
 | |
|         <v-card-actions>
 | |
|           <TheDownloadBtn :download-url="downloadUrl" />
 | |
|           <v-spacer></v-spacer>
 | |
|           <v-btn color="error" text @click="raiseEvent('delete')">
 | |
|             {{ $t("general.delete") }}
 | |
|           </v-btn>
 | |
|           <v-btn color="success" outlined @click="raiseEvent('import')" v-show="$vuetify.breakpoint.smAndUp">
 | |
|             {{ $t("general.import") }}
 | |
|           </v-btn>
 | |
|         </v-card-actions>
 | |
|       </v-card>
 | |
|     </v-dialog>
 | |
|   </div>
 | |
| </template>
 | |
| 
 | |
| <script>
 | |
| import ImportOptions from "./ImportOptions";
 | |
| import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn.vue";
 | |
| import { backupURLs } from "@/api/backup";
 | |
| export default {
 | |
|   components: { ImportOptions, TheDownloadBtn },
 | |
|   props: {
 | |
|     name: {
 | |
|       default: "Backup Name",
 | |
|     },
 | |
|     date: {
 | |
|       default: "Backup Date",
 | |
|     },
 | |
|   },
 | |
|   data() {
 | |
|     return {
 | |
|       options: {
 | |
|         recipes: true,
 | |
|         settings: true,
 | |
|         themes: true,
 | |
|         users: true,
 | |
|         groups: true,
 | |
|       },
 | |
|       dialog: false,
 | |
|       forceImport: false,
 | |
|       rebaseImport: false,
 | |
|       downloading: false,
 | |
|     };
 | |
|   },
 | |
|   computed: {
 | |
|     downloadUrl() {
 | |
|       return backupURLs.downloadBackup(this.name);
 | |
|     },
 | |
|   },
 | |
|   methods: {
 | |
|     updateOptions(options) {
 | |
|       this.options = options;
 | |
|     },
 | |
|     open() {
 | |
|       this.dialog = true;
 | |
|     },
 | |
|     close() {
 | |
|       this.dialog = false;
 | |
|     },
 | |
|     raiseEvent(event) {
 | |
|       let eventData = {
 | |
|         name: this.name,
 | |
|         force: this.forceImport,
 | |
|         rebase: this.rebaseImport,
 | |
|         recipes: this.options.recipes,
 | |
|         settings: this.options.settings,
 | |
|         themes: this.options.themes,
 | |
|         users: this.options.users,
 | |
|         groups: this.options.groups,
 | |
|       };
 | |
|       this.close();
 | |
|       this.$emit(event, eventData);
 | |
|     },
 | |
|   },
 | |
| };
 | |
| </script>
 | |
| 
 | |
| <style></style>
 |