site-settings work

frontend/src/App.vue

@@ -77,6 +77,7 @@ export default {
     this.$store.dispatch("initTheme");
     this.$store.dispatch("requestRecentRecipes");
     this.$store.dispatch("requestHomePageSettings");
+    this.$store.dispatch("requestSiteSettings");
     this.$store.dispatch("refreshToken");
     this.darkModeSystemCheck();
     this.darkModeAddEventListener();

frontend/src/api/index.js

@@ -10,9 +10,11 @@ import meta from "./meta";
 import users from "./users";
 import signUps from "./signUps";
 import groups from "./groups";
+import siteSettings from "./siteSettings";
 
 export default {
   recipes: recipe,
+  siteSettings: siteSettings,
   backups: backup,
   mealPlans: mealplan,
   settings: settings,

frontend/src/api/siteSettings.js

@@ -0,0 +1,22 @@
+import { baseURL } from "./api-utils";
+import { apiReq } from "./api-utils";
+
+const settingsBase = baseURL + "site-settings";
+
+const settingsURLs = {
+  siteSettings: `${settingsBase}`,
+  updateSiteSettings: `${settingsBase}`,
+  testWebhooks: `${settingsBase}/webhooks/test`,
+};
+
+export default {
+  async get() {
+    let response = await apiReq.get(settingsURLs.siteSettings);
+    return response.data;
+  },
+
+  async update(body) {
+    let response = await apiReq.put(settingsURLs.updateSiteSettings, body);
+    return response.data;
+  },
+};

frontend/src/components/Admin/General/HomePageSettings.vue

@@ -3,9 +3,12 @@
     <v-card-text>
       <h2 class="mt-1 mb-1">{{ $t("settings.homepage.home-page") }}</h2>
       <v-row align="center" justify="center" dense class="mb-n7 pb-n5">
+        <v-col cols="1">
+          <LanguageMenu @select-lang="writeLang" :site-settings="true" />
+        </v-col>
         <v-col cols="12" sm="3" md="2">
           <v-switch
-            v-model="showRecent"
+            v-model="settings.showRecent"
             :label="$t('settings.homepage.show-recent')"
           ></v-switch>
         </v-col>
@@ -13,7 +16,7 @@
           <v-slider
             class="pt-sm-4"
             :label="$t('settings.homepage.card-per-section')"
-            v-model="showLimit"
+            v-model="settings.cardsPerSection"
             max="30"
             dense
             color="primary"
@@ -43,14 +46,14 @@
             <v-list height="300" dense style="overflow:auto">
               <v-list-item-group>
                 <draggable
-                  v-model="homeCategories"
+                  v-model="settings.categories"
                   group="categories"
                   :style="{
                     minHeight: `150px`,
                   }"
                 >
                   <v-list-item
-                    v-for="(item, index) in homeCategories"
+                    v-for="(item, index) in settings.categories"
                     :key="`${item.name}-${index}`"
                   >
                     <v-list-item-icon>
@@ -85,14 +88,14 @@
             <v-list height="300" dense style="overflow:auto">
               <v-list-item-group>
                 <draggable
-                  v-model="categories"
+                  v-model="allCategories"
                   group="categories"
                   :style="{
                     minHeight: `150px`,
                   }"
                 >
                   <v-list-item
-                    v-for="(item, index) in categories"
+                    v-for="(item, index) in allCategories"
                     :key="`${item.name}-${index}`"
                   >
                     <v-list-item-icon>
@@ -127,47 +130,50 @@
 
 <script>
 import api from "@/api";
+import LanguageMenu from "@/components/UI/LanguageMenu";
 import draggable from "vuedraggable";
 
 export default {
   components: {
     draggable,
+    LanguageMenu,
   },
   data() {
     return {
-      homeCategories: null,
-      showLimit: null,
-      showRecent: true,
+      settings: {
+        language: "en",
+        showRecent: null,
+        cardsPerSection: null,
+        categories: [],
+      },
     };
   },
   mounted() {
     this.getOptions();
   },
   computed: {
-    categories() {
+    allCategories() {
       return this.$store.getters.getCategories;
     },
   },
+
   methods: {
+    writeLang(val) {
+      console.log(val);
+      this.settings.language = val;
+    },
     deleteCategoryfromDatabase(category) {
       api.categories.delete(category);
-      this.$store.dispatch("requestHomePageSettings");
     },
-    getOptions() {
-      this.showLimit = this.$store.getters.getShowLimit;
-      this.showRecent = this.$store.getters.getShowRecent;
-      this.homeCategories = this.$store.getters.getHomeCategories;
+    async getOptions() {
+      this.settings = await api.siteSettings.get();
     },
     deleteActiveCategory(index) {
-      this.homeCategories.splice(index, 1);
+      this.settings.categories.splice(index, 1);
     },
-    saveSettings() {
-      this.homeCategories.forEach((element, index) => {
-        element.position = index + 1;
-      });
-      this.$store.commit("setShowRecent", this.showRecent);
-      this.$store.commit("setShowLimit", this.showLimit);
-      this.$store.commit("setHomeCategories", this.homeCategories);
+    async saveSettings() {
+      await api.siteSettings.update(this.settings);
+      this.getOptions();
     },
   },
 };

frontend/src/components/UI/LanguageMenu.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="text-center">
-    <LoginDialog ref="loginDialog" />
     <v-menu
       transition="slide-x-transition"
       bottom
@@ -35,10 +34,12 @@
 </template>
 
 <script>
-import LoginDialog from "../Login/LoginDialog";
+const SELECT_EVENT = "select-lang";
 export default {
-  components: {
-    LoginDialog,
+  props: {
+    siteSettings: {
+      default: false,
+    },
   },
   data: function() {
     return {
@@ -68,7 +69,11 @@ export default {
 
   methods: {
     setLanguage(selectedLanguage) {
-      this.$store.commit("setLang", selectedLanguage);
+      if (this.siteSettings) {
+        this.$emit(SELECT_EVENT, selectedLanguage);
+      } else {
+        this.$store.commit("setLang", selectedLanguage);
+      }
     },
   },
 };

frontend/src/store/index.js

@@ -5,22 +5,23 @@ import createPersistedState from "vuex-persistedstate";
 import userSettings from "./modules/userSettings";
 import language from "./modules/language";
 import homePage from "./modules/homePage";
+import siteSettings from "./modules/siteSettings";
 
 Vue.use(Vuex);
 
 const store = new Vuex.Store({
   plugins: [
     createPersistedState({
-      paths: ["userSettings", "language", "homePage"],
+      paths: ["userSettings", "language", "homePage", "SideSettings"],
     }),
   ],
   modules: {
     userSettings,
     language,
     homePage,
+    siteSettings,
   },
   state: {
-
     // All Recipe Data Store
     recentRecipes: [],
     allRecipes: [],

frontend/src/store/modules/siteSettings.js

@@ -0,0 +1,34 @@
+import api from "@/api";
+
+const state = {
+  siteSettings: {
+    language: "en",
+    showRecent: true,
+    cardsPerSection: 9,
+    categories: [],
+  },
+};
+
+const mutations = {
+  setSettings(state, payload) {
+    state.settings = payload;
+  },
+};
+
+const actions = {
+  async requestSiteSettings() {
+    let settings = await api.siteSettings.get();
+    this.commit("setSettings", settings);
+  },
+};
+
+const getters = {
+  getSiteSettings: state => state.siteSettings,
+};
+
+export default {
+  state,
+  mutations,
+  actions,
+  getters,
+};