refactor/page specific components to page folder

This commit is contained in:
hay-kot 2021-04-21 15:38:39 -08:00
commit aec8abfd65
43 changed files with 67 additions and 235 deletions

View file

@ -9,7 +9,7 @@
>
<v-slide-x-reverse-transition>
<AddRecipeFab v-if="loggedIn" />
<TheRecipeFab v-if="loggedIn" />
</v-slide-x-reverse-transition>
<router-view></router-view>
</v-main>
@ -19,7 +19,7 @@
<script>
import TheAppBar from "@/components/UI/TheAppBar";
import AddRecipeFab from "@/components/UI/AddRecipeFab";
import TheRecipeFab from "@/components/UI/TheRecipeFab";
import Vuetify from "./plugins/vuetify";
import { user } from "@/mixins/user";
@ -28,7 +28,7 @@ export default {
components: {
TheAppBar,
AddRecipeFab,
TheRecipeFab,
},
mixins: [user],

View file

@ -1,38 +0,0 @@
<template>
<v-card>
<v-card-title>Last Scrapped JSON Data</v-card-title>
<v-card-text>
<VJsoneditor
@error="logError()"
v-model="lastRecipeJson"
height="1500px"
:options="jsonEditorOptions"
/>
</v-card-text>
</v-card>
</template>
<script>
import VJsoneditor from "v-jsoneditor";
import { api } from "@/api";
export default {
components: { VJsoneditor },
data() {
return {
lastRecipeJson: {},
jsonEditorOptions: {
mode: "code",
search: false,
mainMenuBar: false,
},
};
},
async mounted() {
this.lastRecipeJson = await api.meta.getLastJson();
},
};
</script>
<style>
</style>

View file

@ -1,37 +0,0 @@
<template>
<v-card>
<v-card-title>Last Scrapped JSON Data</v-card-title>
<v-card-text>
<VJsoneditor
@error="logError()"
v-model="lastRecipeJson"
height="1500px"
:options="jsonEditorOptions"
/>
</v-card-text>
</v-card>
</template>
<script>
import VJsoneditor from "v-jsoneditor";
export default {
components: { VJsoneditor },
data() {
return {
lastRecipeJson: "",
jsonEditorOptions: {
mode: "code",
search: false,
mainMenuBar: false,
},
};
},
async mounted() {
this.lastRecipeJson = "Hello \n 123 \n 567"
},
};
</script>
<style>
</style>

View file

@ -45,7 +45,7 @@
</template>
<script>
import DataTable from "@/components/Admin/Backup/ImportSummaryDialog/DataTable";
import DataTable from "@/components/ImportSummaryDialog";
export default {
components: {
DataTable,

View file

@ -31,11 +31,7 @@
v-on="on"
></v-text-field>
</template>
<DatePicker
v-model="startDate"
no-title
@input="menu2 = false"
/>
<DatePicker v-model="startDate" no-title @input="menu2 = false" />
</v-menu>
</v-col>
<v-col cols="12" lg="6" md="6" sm="12">
@ -59,11 +55,7 @@
v-on="on"
></v-text-field>
</template>
<DatePicker
v-model="endDate"
no-title
@input="menu2 = false"
/>
<DatePicker v-model="endDate" no-title @input="menu2 = false" />
</v-menu>
</v-col>
</v-row>
@ -87,7 +79,7 @@
<script>
const CREATE_EVENT = "created";
import DatePicker from "../UI/DatePicker";
import DatePicker from "@/components/FormHelpers/DatePicker";
import { api } from "@/api";
import utils from "@/utils";
import MealPlanCard from "./MealPlanCard";

View file

@ -7,9 +7,9 @@
:extension-height="isSticky ? '20' : '0'"
color="rgb(255, 0, 0, 0.0)"
>
<Confirmation
<ConfirmationDialog
:title="$t('recipe.delete-recipe')"
:message="$t('recipe.delete-confirmation')"
:message="$t('recipe.delete-ConfirmationDialog')"
color="error"
icon="mdi-alert-circle"
ref="deleteRecipieConfirm"
@ -45,7 +45,7 @@
</template>
<script>
import Confirmation from "@/components/UI/Confirmation.vue";
import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog.vue";
export default {
props: {
@ -56,7 +56,7 @@ export default {
},
components: {
Confirmation,
ConfirmationDialog,
},
data() {
return {

View file

@ -11,7 +11,7 @@
<div>
Recipe Image
</div>
<UploadBtn
<TheUploadBtn
class="ml-auto"
url="none"
file-name="image"
@ -44,12 +44,12 @@
<script>
const REFRESH_EVENT = "refresh";
const UPLOAD_EVENT = "upload";
import UploadBtn from "@/components/UI/UploadBtn";
import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
import { api } from "@/api";
// import axios from "axios";
export default {
components: {
UploadBtn,
TheUploadBtn,
},
props: {
slug: String,

View file

@ -8,7 +8,7 @@
@keydown.esc="cancel"
>
<v-card>
<v-app-bar v-if="Boolean(title)" :color="color" dense flat dark>
<v-app-bar v-if="Boolean(title)" :color="color" dense dark>
<v-icon v-if="Boolean(icon)" left> {{ icon }}</v-icon>
<v-toolbar-title v-text="title" />
</v-app-bar>
@ -36,13 +36,13 @@
const CLOSE_EVENT = "close";
const OPEN_EVENT = "open";
/**
* Confirmation Component used to add a second validaion step to an action.
* ConfirmationDialog Component used to add a second validaion step to an action.
* @version 1.0.1
* @author [zackbcom](https://github.com/zackbcom)
* @since Version 1.0.0
*/
export default {
name: "Confirmation",
name: "ConfirmationDialog",
props: {
/**
* Message to be in body.

View file

@ -1,66 +0,0 @@
<template>
<v-dialog
v-model="dialog"
max-width="900px"
: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>{{ title }}</v-toolbar-title>
<v-spacer></v-spacer>
<v-toolbar-items></v-toolbar-items>
</v-toolbar>
<v-card-title v-show="$vuetify.breakpoint.smAndUp">
{{ title }}
</v-card-title>
<v-card-text class="mt-3">
<v-row>
<v-col>
<v-alert outlined dense type="success">
<h4>{{ successHeader }}</h4>
<p v-for="success in this.success" :key="success" class="my-1">
- {{ success }}
</p>
</v-alert>
</v-col>
<v-col>
<v-alert v-if="failed[0]" outlined dense type="error">
<h4>{{ failedHeader }}</h4>
<p v-for="fail in this.failed" :key="fail" class="my-1">
- {{ fail }}
</p>
</v-alert>
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-dialog>
</template>
<script>
export default {
props: {
title: String,
successHeader: String,
success: Array,
failedHeader: String,
failed: Array,
},
data() {
return {
dialog: false,
};
},
methods: {
open() {
this.dialog = true;
},
},
};
</script>
<style>
</style>

View file

@ -35,7 +35,7 @@
<v-icon>mdi-magnify</v-icon>
</v-btn>
<SiteMenu />
<TheSiteMenu />
</v-app-bar>
<v-app-bar
v-else
@ -67,13 +67,13 @@
<v-icon>mdi-magnify</v-icon>
</v-btn>
<SiteMenu />
<TheSiteMenu />
</v-app-bar>
</div>
</template>
<script>
import SiteMenu from "@/components/UI/SiteMenu";
import TheSiteMenu from "@/components/UI/TheSiteMenu";
import SearchBar from "@/components/UI/Search/SearchBar";
import SearchDialog from "@/components/UI/Search/SearchDialog";
import { user } from "@/mixins/user";
@ -82,7 +82,7 @@ export default {
mixins: [user],
components: {
SiteMenu,
TheSiteMenu,
SearchBar,
SearchDialog,
},

View file

@ -38,7 +38,7 @@
<script>
import { api } from "@/api";
import TheDownloadBtn from "@/components/UI/TheDownloadBtn";
import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn";
export default {
components: { TheDownloadBtn },
data() {

View file

@ -58,8 +58,8 @@
<script>
import ImportOptions from "@/components/Admin/Backup/ImportOptions";
import TheDownloadBtn from "@/components/UI/TheDownloadBtn.vue";
import ImportOptions from "./ImportOptions";
import TheDownloadBtn from "@/components/UI/Buttons/TheDownloadBtn.vue";
import { backupURLs } from "@/api/backup";
export default {
components: { ImportOptions, TheDownloadBtn },

View file

@ -42,7 +42,7 @@
</template>
<script>
import ImportOptions from "@/components/Admin/Backup/ImportOptions";
import ImportOptions from "./ImportOptions";
import { api } from "@/api";
export default {
components: { ImportOptions },

View file

@ -20,7 +20,7 @@
<v-card-title class="mt-n6">
{{ $t("settings.available-backups") }}
<span>
<UploadBtn
<TheUploadBtn
class="mt-1"
url="/api/backups/upload"
@uploaded="getAvailableBackups"
@ -33,14 +33,7 @@
@finished="processFinished"
:backups="availableBackups"
/>
<SuccessFailureAlert
ref="report"
:title="$t('settings.backup.backup-restore-report')"
:success-header="$t('settings.backup.successfully-imported')"
:success="successfulImports"
:failed-header="$t('settings.backup.failed-imports')"
:failed="failedImports"
/>
<ImportSummaryDialog ref="report" :import-data="importData" />
</v-card-text>
</v-card>
@ -48,16 +41,14 @@
<script>
import { api } from "@/api";
import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
import ImportSummaryDialog from "@/components/Admin/Backup/ImportSummaryDialog";
import UploadBtn from "@/components/UI/UploadBtn";
import AvailableBackupCard from "@/components/Admin/Backup/AvailableBackupCard";
import NewBackupCard from "@/components/Admin/Backup/NewBackupCard";
import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
import ImportSummaryDialog from "@/components/ImportSummaryDialog";
import AvailableBackupCard from "@/pages/Admin/Backup/AvailableBackupCard";
import NewBackupCard from "@/pages/Admin/Backup/NewBackupCard";
export default {
components: {
SuccessFailureAlert,
UploadBtn,
TheUploadBtn,
AvailableBackupCard,
NewBackupCard,
ImportSummaryDialog,

View file

@ -1,6 +1,6 @@
<template>
<div>
<Confirmation
<ConfirmationDialog
ref="deleteGroupConfirm"
:title="$t('user.confirm-group-deletion')"
:message="
@ -55,10 +55,10 @@
<script>
const RENDER_EVENT = "update";
import Confirmation from "@/components/UI/Confirmation";
import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
import { api } from "@/api";
export default {
components: { Confirmation },
components: { ConfirmationDialog },
props: {
group: {
default: {

View file

@ -85,7 +85,7 @@
<script>
import { validators } from "@/mixins/validators";
import { api } from "@/api";
import GroupCard from "@/components/Admin/ManageUsers/GroupCard";
import GroupCard from "./GroupCard";
export default {
components: { GroupCard },
mixins: [validators],

View file

@ -1,6 +1,6 @@
<template>
<v-card outlined class="mt-n1">
<Confirmation
<ConfirmationDialog
ref="deleteUserDialog"
:title="$t('user.confirm-link-deletion')"
:message="
@ -107,11 +107,11 @@
</template>
<script>
import Confirmation from "@/components/UI/Confirmation";
import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
import { api } from "@/api";
import { validators } from "@/mixins/validators";
export default {
components: { Confirmation },
components: { ConfirmationDialog },
mixins: [validators],
data() {
return {

View file

@ -1,6 +1,6 @@
<template>
<v-card outlined class="mt-n1">
<Confirmation
<ConfirmationDialog
ref="deleteUserDialog"
:title="$t('user.confirm-user-deletion')"
:message="
@ -144,11 +144,11 @@
</template>
<script>
import Confirmation from "@/components/UI/Confirmation";
import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
import { api } from "@/api";
import { validators } from "@/mixins/validators";
export default {
components: { Confirmation },
components: { ConfirmationDialog },
mixins: [validators],
data() {
return {

View file

@ -11,17 +11,17 @@
<v-tabs-slider></v-tabs-slider>
<v-tab>
{{$t('user.users')}}
{{ $t("user.users") }}
<v-icon>mdi-account</v-icon>
</v-tab>
<v-tab>
{{$t('user.sign-up-links')}}
{{ $t("user.sign-up-links") }}
<v-icon>mdi-account-plus-outline</v-icon>
</v-tab>
<v-tab>
{{$t('user.groups')}}
{{ $t("user.groups") }}
<v-icon>mdi-account-group</v-icon>
</v-tab>
</v-tabs>
@ -42,9 +42,9 @@
</template>
<script>
import TheUserTable from "@/components/Admin/ManageUsers/TheUserTable";
import GroupDashboard from "@/components/Admin/ManageUsers/GroupDashboard";
import TheSignUpTable from "@/components/Admin/ManageUsers/TheSignUpTable";
import TheUserTable from "./TheUserTable";
import GroupDashboard from "./GroupDashboard";
import TheSignUpTable from "./TheSignUpTable";
export default {
components: { TheUserTable, GroupDashboard, TheSignUpTable },
data() {

View file

@ -82,7 +82,7 @@
<script>
import { api } from "@/api";
import TimePickerDialog from "@/components/Admin/MealPlanner/TimePickerDialog";
import TimePickerDialog from "@/components/FormHelpers/TimePickerDialog";
import CategoryTagSelector from "@/components/FormHelpers/CategoryTagSelector";
export default {
components: {

View file

@ -5,7 +5,7 @@
{{ title }}
<v-spacer></v-spacer>
<span>
<UploadBtn
<TheUploadBtn
class="mt-1"
:url="`/api/migrations/${folder}/upload`"
fileName="archive"
@ -66,10 +66,10 @@
</template>
<script>
import UploadBtn from "../../UI/UploadBtn";
import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
import utils from "@/utils";
import { api } from "@/api";
import MigrationDialog from "@/components/Admin/Migration/MigrationDialog.vue";
import MigrationDialog from "./MigrationDialog";
export default {
props: {
folder: String,
@ -78,7 +78,7 @@ export default {
available: Array,
},
components: {
UploadBtn,
TheUploadBtn,
MigrationDialog,
},
data() {

View file

@ -42,7 +42,7 @@
</template>
<script>
import DataTable from "@/components/Admin/Backup/ImportSummaryDialog/DataTable";
import DataTable from "@/components/ImportSummaryDialog";
export default {
components: {
DataTable,

View file

@ -1,13 +1,5 @@
<template>
<div>
<SuccessFailureAlert
:title="$t('migration.migration-report')"
ref="report"
:failedHeader="$t('migration.failed-imports')"
:failed="failed"
:successHeader="$t('migration.successful-imports')"
:success="success"
/>
<v-card :loading="loading">
<v-card-title class="headline">
{{ $t("migration.recipe-migration") }}
@ -42,13 +34,11 @@
<script>
import MigrationCard from "@/components/Admin/Migration/MigrationCard";
import SuccessFailureAlert from "@/components/UI/SuccessFailureAlert";
import MigrationCard from "./MigrationCard";
import { api } from "@/api";
export default {
components: {
MigrationCard,
SuccessFailureAlert,
},
data() {
return {

View file

@ -68,7 +68,7 @@
</v-card-text>
<v-card-actions>
<UploadBtn
<TheUploadBtn
icon="mdi-image-area"
:text="$t('user.upload-photo')"
:url="userProfileImage"
@ -145,13 +145,13 @@
<script>
// import AvatarPicker from '@/components/AvatarPicker'
import UploadBtn from "@/components/UI/UploadBtn";
import TheUploadBtn from "@/components/UI/Buttons/TheUploadBtn";
import { api } from "@/api";
import { validators } from "@/mixins/validators";
import { initials } from "@/mixins/initials";
export default {
components: {
UploadBtn,
TheUploadBtn,
},
mixins: [validators, initials],
data() {

View file

@ -63,7 +63,7 @@
<script>
import draggable from "vuedraggable";
import CreatePageDialog from "@/components/Admin/General/CreatePageDialog";
import CreatePageDialog from "./CreatePageDialog";
import { api } from "@/api";
export default {
components: {

View file

@ -20,8 +20,8 @@
</template>
<script>
import HomePageSettings from "@/components/Admin/General/HomePageSettings";
import CustomPageCreator from "@/components/Admin/General/CustomPageCreator";
import HomePageSettings from "./HomePageSettings";
import CustomPageCreator from "./CustomPageCreator";
export default {
components: {

View file

@ -1,6 +1,6 @@
<template>
<div>
<Confirmation
<ConfirmationDialog
:title="$t('settings.theme.delete-theme')"
:message="$t('settings.theme.are-you-sure-you-want-to-delete-this-theme')"
color="error"
@ -44,7 +44,7 @@
</template>
<script>
import Confirmation from "@/components/UI/Confirmation";
import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
import { api } from "@/api";
const DELETE_EVENT = "delete";
@ -52,7 +52,7 @@ const APPLY_EVENT = "apply";
const EDIT_EVENT = "edit";
export default {
components: {
Confirmation,
ConfirmationDialog,
},
props: {
theme: Object,

View file

@ -135,9 +135,9 @@
<script>
import { api } from "@/api";
import ColorPickerDialog from "@/components/Admin/Theme/ColorPickerDialog";
import NewThemeDialog from "@/components/Admin/Theme/NewThemeDialog";
import ThemeCard from "@/components/Admin/Theme/ThemeCard";
import ColorPickerDialog from "@/components/FormHelpers/ColorPickerDialog";
import NewThemeDialog from "./NewThemeDialog";
import ThemeCard from "./ThemeCard";
export default {
components: {