nuxt init

frontend.old/src/store/index.js

@@ -0,0 +1,80 @@
+import Vue from "vue";
+import Vuex from "vuex";
+import { api } from "@/api";
+import createPersistedState from "vuex-persistedstate";
+import userSettings from "./modules/userSettings";
+import language from "./modules/language";
+import siteSettings from "./modules/siteSettings";
+import recipes from "./modules/recipes";
+import groups from "./modules/groups";
+import snackbar from "./modules/snackbar";
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  plugins: [
+    createPersistedState({
+      paths: ["userSettings", "siteSettings"],
+    }),
+  ],
+  modules: {
+    userSettings,
+    language,
+    siteSettings,
+    groups,
+    recipes,
+    snackbar,
+  },
+  state: {
+    // All Recipe Data Store
+    recentRecipes: [],
+    allRecipes: [],
+    mealPlanCategories: [],
+    allCategories: [],
+    allTags: [],
+    appInfo: {
+      version: "",
+      demoStatus: false,
+    },
+  },
+
+  mutations: {
+    setMealPlanCategories(state, payload) {
+      state.mealPlanCategories = payload;
+    },
+    setAllCategories(state, payload) {
+      state.allCategories = payload;
+    },
+    setAllTags(state, payload) {
+      state.allTags = payload;
+    },
+    setAppInfo(state, payload) {
+      state.appInfo = payload;
+    },
+  },
+
+  actions: {
+    async requestCategories({ commit }) {
+      const categories = await api.categories.getAll();
+      commit("setAllCategories", categories);
+    },
+    async requestTags({ commit }) {
+      const tags = await api.tags.getAll();
+      commit("setAllTags", tags);
+    },
+    async requestAppInfo({ commit }) {
+      const response = await api.meta.getAppInfo();
+      commit("setAppInfo", response);
+    },
+  },
+
+  getters: {
+    getMealPlanCategories: state => state.mealPlanCategories,
+    getAllCategories: state => state.allCategories.sort((a, b) => (a.slug > b.slug ? 1 : -1)),
+    getAllTags: state => state.allTags.sort((a, b) => (a.slug > b.slug ? 1 : -1)),
+    getAppInfo: state => state.appInfo,
+  },
+});
+
+export default store;
+export { store };

frontend.old/src/store/modules/groups.js

@@ -0,0 +1,39 @@
+import { api } from "@/api";
+
+const state = {
+  groups: [],
+  currentGroup: {},
+};
+
+const mutations = {
+  setGroups(state, payload) {
+    state.groups = payload;
+  },
+  setCurrentGroup(state, payload) {
+    state.currentGroup = payload;
+  },
+};
+
+const actions = {
+  async requestAllGroups({ commit }) {
+    const groups = await api.groups.allGroups();
+    commit("setGroups", groups);
+  },
+  async requestCurrentGroup({ commit }) {
+    const group = await api.groups.current();
+    commit("setCurrentGroup", group);
+  },
+};
+
+const getters = {
+  getGroups: state => state.groups,
+  getGroupNames: state => Array.from(state.groups, x => x.name),
+  getCurrentGroup: state => state.currentGroup,
+};
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters,
+};

frontend.old/src/store/modules/homePage.js

@@ -0,0 +1,44 @@
+import { api } from "@/api";
+
+const state = {
+  showRecent: true,
+  showLimit: 9,
+  categories: [],
+  homeCategories: [],
+};
+
+const mutations = {
+  setShowRecent(state, payload) {
+    state.showRecent = payload;
+  },
+  setShowLimit(state, payload) {
+    state.showLimit = payload;
+  },
+  setCategories(state, payload) {
+    state.categories = payload.sort((a, b) => (a.name > b.name ? 1 : -1));
+  },
+  setHomeCategories(state, payload) {
+    state.homeCategories = payload;
+  },
+};
+
+const actions = {
+  async requestHomePageSettings() {
+    let categories = await api.categories.get_all();
+    this.commit("setCategories", categories);
+  },
+};
+
+const getters = {
+  getShowRecent: state => state.showRecent,
+  getShowLimit: state => state.showLimit,
+  getCategories: state => state.categories,
+  getHomeCategories: state => state.homeCategories,
+};
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters,
+};

frontend.old/src/store/modules/language.js

@@ -0,0 +1,54 @@
+// This is the data store for the options for language selection. Property is reference only, you cannot set this property.
+const state = {
+  allLangs: [
+    {
+      name: "American English",
+      value: "en-US",
+    },
+    {
+      name: "British English",
+      value: "en-GB",
+    },
+    {
+      name: "Deutsch (German)",
+      value: "de-DE",
+    },
+    {
+      name: "Español (Spanish)",
+      value: "es-ES",
+    },
+    {
+      name: "Français (French)",
+      value: "fr-FR",
+    },
+    {
+      name: "Italiano (Italian)",
+      value: "it-IT",
+    },
+    {
+      name: "Nederlands (Dutch)",
+      value: "nl-NL",
+    },
+    {
+      name: "Polski (Polish)",
+      value: "pl-PL",
+    },
+    {
+      name: "Svenska (Swedish)",
+      value: "sv-SE",
+    },
+    {
+      name: "简体中文 (Chinese simplified)",
+      value: "zh-CN",
+    },
+  ],
+};
+
+const getters = {
+  getAllLangs: state => state.allLangs,
+};
+
+export default {
+  state,
+  getters,
+};

frontend.old/src/store/modules/recipes.js

@@ -0,0 +1,76 @@
+import { api } from "@/api";
+import Vue from "vue";
+import { recipe } from "@/utils/recipe";
+
+const state = {
+  recentRecipes: [],
+  allRecipes: [],
+};
+
+const mutations = {
+  setRecentRecipes(state, payload) {
+    state.recentRecipes = payload;
+  },
+  patchRecentRecipes(state, payload) {
+    if (state.recentRecipes[payload.id]) {
+      state.recentRecipes[payload.id] = payload;
+    }
+  },
+  dropRecentRecipes(state, payload) {
+    if (state.recentRecipes[payload.id]) {
+      Vue.delete(state.recentRecipes, payload.id);
+    }
+  },
+  setAllRecipes(state, payload) {
+    state.allRecipes = payload;
+  },
+  patchAllRecipes(state, payload) {
+    state.allRecipes[payload.id] = payload;
+  },
+  dropAllRecipes(state, payload) {
+    if (state.allRecipes[payload.id]) {
+      Vue.delete(state.allRecipes, payload.id);
+    }
+  },
+};
+
+const actions = {
+  async requestRecentRecipes() {
+    const payload = await api.recipes.allSummary(0, 30);
+    const hash = Object.fromEntries(payload.map(e => [e.id, e]));
+    this.commit("setRecentRecipes", hash);
+  },
+  async requestAllRecipes({ getters }) {
+    const all = getters.getAllRecipes;
+    const payload = await api.recipes.allSummary(all.length, 9999);
+    const hash = Object.fromEntries([...all, ...payload].map(e => [e.id, e]));
+
+    this.commit("setAllRecipes", hash);
+  },
+  patchRecipe({ commit }, payload) {
+    commit("patchAllRecipes", payload);
+    commit("patchRecentRecipes", payload);
+  },
+  dropRecipe({ commit }, payload) {
+    commit("dropAllRecipes", payload);
+    commit("dropRecentRecipes", payload);
+  },
+};
+
+const getters = {
+  getAllRecipes: state => Object.values(state.allRecipes),
+  getAllRecipesHash: state => state.allRecipes,
+  getRecentRecipes: state => {
+    let list = Object.values(state.recentRecipes);
+    recipe.sortByUpdated(list);
+    return list;
+  },
+  getRecentRecipesHash: state => state.recentRecipes,
+};
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters,
+};

frontend.old/src/store/modules/siteSettings.js

@@ -0,0 +1,47 @@
+import { api } from "@/api";
+import { loadLanguageAsync } from "@/i18n"
+
+const state = {
+  siteSettings: {
+    language: "en-US",
+    firstDayOfWeek: 0,
+    showRecent: true,
+    cardsPerSection: 9,
+    categories: [],
+  },
+  customPages: [],
+};
+
+const mutations = {
+  setSettings(state, payload) {
+    state.siteSettings = payload;
+    loadLanguageAsync(payload.language);
+  },
+  setCustomPages(state, payload) {
+    state.customPages = payload;
+  },
+};
+
+const actions = {
+  async requestSiteSettings({ commit }) {
+    let settings = await api.siteSettings.get();
+    commit("setSettings", settings);
+  },
+  async requestCustomPages({ commit }) {
+    const customPages = await api.siteSettings.getPages();
+    commit("setCustomPages", customPages);
+  },
+};
+
+const getters = {
+  getActiveLang: state => state.siteSettings.language,
+  getSiteSettings: state => state.siteSettings,
+  getCustomPages: state => state.customPages,
+};
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters,
+};

frontend.old/src/store/modules/snackbar.js

@@ -0,0 +1,23 @@
+const state = {
+  snackbar: {
+    open: false,
+    text: "Hello From The Store",
+    color: "info",
+  },
+};
+
+const mutations = {
+  setSnackbar(state, payload) {
+    state.snackbar = payload;
+  },
+};
+
+const getters = {
+  getSnackbar: state => state.snackbar,
+};
+
+export default {
+  state,
+  mutations,
+  getters,
+};

frontend.old/src/store/modules/userSettings.js

@@ -0,0 +1,121 @@
+import { api } from "@/api";
+import Vuetify from "@/plugins/vuetify";
+import axios from "axios";
+
+function inDarkMode(payload) {
+  let isDark;
+
+  if (payload === "system") {
+    //Get System Preference from browser
+    const darkMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    isDark = darkMediaQuery.matches;
+  } else if (payload === "dark") isDark = true;
+  else if (payload === "light") isDark = false;
+
+  return isDark;
+}
+
+const state = {
+  activeTheme: {},
+  darkMode: "light", // light, dark, system
+  isDark: false,
+  isLoggedIn: false,
+  token: "",
+  userData: {},
+};
+
+const mutations = {
+  setTheme(state, payload) {
+    Vuetify.framework.theme.themes.dark = payload.colors;
+    Vuetify.framework.theme.themes.light = payload.colors;
+    state.activeTheme = payload;
+  },
+  setDarkMode(state, payload) {
+    let isDark = inDarkMode(payload);
+
+    if (isDark !== null) {
+      Vuetify.framework.theme.dark = isDark;
+      state.isDark = isDark;
+      state.darkMode = payload;
+    }
+  },
+  setIsLoggedIn(state, payload) {
+    state.isLoggedIn = payload;
+  },
+  setToken(state, payload) {
+    state.isLoggedIn = true;
+    axios.defaults.headers.common["Authorization"] = `Bearer ${payload}`;
+    state.token = payload;
+  },
+
+  setUserData(state, payload) {
+    state.userData = payload;
+  },
+};
+
+const actions = {
+  async requestUserData({ getters, commit }) {
+    if (getters.getIsLoggedIn) {
+      const [response, err] = await api.users.self();
+
+      if (err) {
+        return; // TODO: Log or Notifty User of Error
+      }
+
+      commit("setUserData", response.data);
+    }
+  },
+
+  async resetTheme({ commit }) {
+    const defaultTheme = await api.themes.requestByName(1);
+    if (defaultTheme.colors) {
+      Vuetify.framework.theme.themes.dark = defaultTheme.colors;
+      Vuetify.framework.theme.themes.light = defaultTheme.colors;
+      commit("setTheme", defaultTheme);
+    }
+  },
+
+  async refreshToken({ commit, getters }) {
+    if (!getters.getIsLoggedIn) {
+      commit("setIsLoggedIn", false); // This has to be here... for some reasons?  ¯\_(ツ)_/¯
+      console.log("Not Logged In");
+      return;
+    }
+
+    const [response, err] = await api.users.refresh();
+
+    if (err) {
+      console.log("Failed Token Refresh, Logging Out...");
+      commit("setIsLoggedIn", false);
+    }
+
+    commit("setToken", response.data.access_token);
+  },
+
+  async initTheme({ dispatch, getters }) {
+    //If theme is empty resetTheme
+    if (Object.keys(getters.getActiveTheme).length === 0) {
+      await dispatch("resetTheme");
+    } else {
+      Vuetify.framework.theme.dark = inDarkMode(getters.getDarkMode);
+      Vuetify.framework.theme.themes.dark = getters.getActiveTheme.colors;
+      Vuetify.framework.theme.themes.light = getters.getActiveTheme.colors;
+    }
+  },
+};
+
+const getters = {
+  getActiveTheme: state => state.activeTheme,
+  getDarkMode: state => state.darkMode,
+  getIsDark: state => state.isDark,
+  getIsLoggedIn: state => state.isLoggedIn,
+  getToken: state => state.token,
+  getUserData: state => state.userData,
+};
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters,
+};