🔨 Get setting form server

.env.development

@@ -1,6 +1,6 @@
 VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=238351507634913280&redirect_uri=http%3A%2F%2Flocalhost%3A3000%2Foauth2%2Fcallback&response_type=code&scope=identify"
-VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
-
+# VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
+VITE_API_BASE_URL="http://localhost:8080/api/v2/"
 VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
 
 VITE_APP_TITLE="Claptrap DEV"

.env.staging

@@ -0,0 +1,5 @@
+VITE_OAUTH_REDIRECT_URL="https://discord.com/api/oauth2/authorize?client_id=986632811207348294&redirect_uri=https%3A%2F%2Fnext.claptrapbot.com%2Foauth2%2Fcallback&response_type=code&scope=identify"
+VITE_API_BASE_URL="https://next.api.claptrapbot.com/api/v2/"
+VITE_DISCORD_USER_AVATAR_URL="https://cdn.discordapp.com/avatars/"
+
+VITE_APP_TITLE="Claptrap NEXT"

src/App.vue

@@ -19,6 +19,6 @@ import HeaderComponent from "./components/Header/HeaderComponent.vue";
 
 <style>
 html {
-  overflow: auto;
+  overflow: auto !important;
 }
 </style>

src/components/guild/GuildHeaderComponent.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <v-card>
+      <v-card-title class="d-flex">
+        <v-avatar :color="guild?.iconUrl ? '' : 'grey-darken-3'" class="mr-3">
+          <v-img v-if="guild?.iconUrl" :src="guild.iconUrl"></v-img>
+          <template v-if="!guild?.iconUrl">{{ guild?.name[1] }}</template>
+        </v-avatar>
+        <span class="mr-auto">{{ guild?.name }}</span>
+        <v-icon
+          icon="mdi-account-wrench"
+          color="green"
+          v-if="guild?.canManage"
+        ></v-icon>
+      </v-card-title>
+    </v-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Guild } from "@/data/guild/Guild";
+
+defineProps<{ guild: Guild }>();
+</script>
+
+<style scoped></style>

src/components/guild/Settings/SettingGroupComponent.vue

@@ -2,39 +2,41 @@
   <div>
     <v-card>
       <v-card-title>{{ props.descriptor.name }}</v-card-title>
-      <v-card-content>
-        <v-row v-if="props.descriptor.mainField">
-          <v-col>
-            <bool-field-component
-              v-if="props.descriptor.mainField.type == 'BOOL'"
-              :fieldDescription="props.descriptor.mainField"
-            ></bool-field-component>
-          </v-col>
-        </v-row>
-        <template
-          v-if="
-            !!props.descriptor.mainField
-              ? settingStoreRef.values.value[props.descriptor.mainField.id]
-              : true
-          "
-        >
-          <v-row v-for="item of props.descriptor.fields" :key="item.id">
+      <v-card-content class="pt-1">
+        <v-container class="py-0">
+          <v-row v-if="props.descriptor.mainField" class="mb-4">
             <v-col>
               <bool-field-component
-                v-if="item.type == 'BOOL'"
-                :fieldDescription="item"
+                v-if="props.descriptor.mainField.type == 'BOOL'"
+                :fieldDescription="props.descriptor.mainField"
               ></bool-field-component>
-              <select-field-component
-                :fieldDescription="item"
-                v-if="isSelect(item.type)"
-              ></select-field-component>
-              <text-field-component
-                :fieldDescription="item"
-                v-if="item.type == 'STRING'"
-              ></text-field-component>
             </v-col>
           </v-row>
-        </template>
+          <template
+            v-if="
+              !!props.descriptor.mainField
+                ? settingStoreRef.values.value[props.descriptor.mainField.id]
+                : true
+            "
+          >
+            <v-row v-for="item of props.descriptor.fields" :key="item.id">
+              <v-col>
+                <bool-field-component
+                  v-if="item.type == 'BOOL'"
+                  :fieldDescription="item"
+                ></bool-field-component>
+                <select-field-component
+                  :fieldDescription="item"
+                  v-if="isSelect(item.type)"
+                ></select-field-component>
+                <text-field-component
+                  :fieldDescription="item"
+                  v-if="item.type == 'STRING'"
+                ></text-field-component>
+              </v-col>
+            </v-row>
+          </template>
+        </v-container>
       </v-card-content>
     </v-card>
   </div>

src/components/guild/Settings/SettingListComponent.vue

@@ -30,12 +30,16 @@
 <script setup lang="ts">
 import type { Guild } from "@/data/guild/Guild";
 import type { SettingDescrition } from "@/data/Setting/SettingDescription";
+import type { SettingValue } from "@/data/Setting/SettingValue";
 import {
   getRoles,
   getTextChannels,
   getVoiceChannels,
 } from "@/services/guildService";
-import { getSettingDescrition } from "@/services/settingsService";
+import {
+  getSettingDescrition,
+  getSettingValues,
+} from "@/services/settingsService";
 import { useSettingStore } from "@/stores/setting";
 import { storeToRefs } from "pinia";
 import { ref } from "vue";
@@ -72,13 +76,21 @@ function loadVoiceChannels() {
 function loadRoles() {
   getRoles(props.guild.id).then((value) => {
     roles.value = value;
+    loadSettings();
+  });
+}
+
+function loadSettings() {
+  getSettingValues(props.guild.id).then((value) => {
+    let temp = {} as SettingValue;
+    for (let item of value) {
+      temp[item.id] = item.value;
+    }
+
+    values.value = temp;
     loading.value = false;
   });
 }
 </script>
 
-<style>
-.v-input__details {
-  margin-bottom: 0;
-}
-</style>
+<style scoped></style>

src/data/Setting/RawSettingValue.ts

@@ -0,0 +1,6 @@
+type RawSettingValue = {
+  id: string;
+  value: string | boolean;
+};
+
+export type { RawSettingValue };

src/services/settingsService.ts

@@ -1,8 +1,10 @@
+import type { RawSettingValue } from "@/data/Setting/RawSettingValue";
 import type { SettingDescrition } from "@/data/Setting/SettingDescription";
+import { useEventQueuStore } from "@/stores/eventQueu";
 import { useUserStore } from "@/stores/user";
 import axios from "axios";
 
-export function getSettingDescrition() {
+function getSettingDescrition() {
   return new Promise<SettingDescrition[]>((resole, reject) => {
     const userStore = useUserStore();
 
@@ -17,3 +19,31 @@ export function getSettingDescrition() {
       });
   });
 }
+
+function getSettingValues(guildId: string): Promise<RawSettingValue[]> {
+  return new Promise((resolve, reject) => {
+    const userStore = useUserStore();
+    axios
+      .get<RawSettingValue[]>(`/setting/${guildId}/values`, {
+        headers: {
+          authorization: `Bearer ${userStore.token}`,
+        },
+      })
+      .then((value) => {
+        resolve(value.data);
+      })
+      .catch((reason) => {
+        console.error(`Fail to get settings !`);
+        console.log(reason);
+        const eventQueuStore = useEventQueuStore();
+        eventQueuStore.push({
+          uuid: undefined,
+          type: "error",
+          text: "Fail to retrive current settings!",
+        });
+        reject(reason);
+      });
+  });
+}
+
+export { getSettingDescrition, getSettingValues };

src/views/GuildHomeView.vue

@@ -2,23 +2,7 @@
   <div v-if="guild">
     <v-row>
       <v-col>
-        <v-card>
-          <v-card-title class="d-flex">
-            <v-avatar
-              :color="guild?.iconUrl ? '' : 'grey-darken-3'"
-              class="mr-3"
-            >
-              <v-img v-if="guild?.iconUrl" :src="guild.iconUrl"></v-img>
-              <template v-if="!guild?.iconUrl">{{ guild?.name[1] }}</template>
-            </v-avatar>
-            <span class="mr-auto">{{ guild?.name }}</span>
-            <v-icon
-              icon="mdi-account-wrench"
-              color="green"
-              v-if="guild?.canManage"
-            ></v-icon>
-          </v-card-title>
-        </v-card>
+        <GuildHeaderComponent :guild="guild" />
       </v-col>
     </v-row>
     <v-row>
@@ -47,6 +31,7 @@ import { useRoute, useRouter } from "vue-router";
 import MusicPreviewComponent from "../components/guild/home/MusicPreviewComponent.vue";
 import SettingPreviewComponent from "../components/guild/home/SettingPreviewComponent.vue";
 import StatsPreviewComponent from "../components/guild/home/StatsPreviewComponent.vue";
+import GuildHeaderComponent from "@/components/guild/GuildHeaderComponent.vue";
 
 const guildStore = useMutualGuildsStore();
 const route = useRoute();

src/views/GuildSettingView.vue

@@ -1,6 +1,11 @@
 <template>
-  <div>
-    <SettingListComponent :guild="guild" v-if="guild" />
+  <div v-if="guild">
+    <v-row>
+      <v-col>
+        <GuildHeaderComponent :guild="guild" />
+      </v-col>
+    </v-row>
+    <SettingListComponent :guild="guild" />
   </div>
 </template>
 
@@ -10,7 +15,7 @@ import { redirectIfNoGuild } from "@/tools/GuildTools";
 import { ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import SettingListComponent from "../components/guild/Settings/SettingListComponent.vue";
-
+import GuildHeaderComponent from "@/components/guild/GuildHeaderComponent.vue";
 const guildStore = useMutualGuildsStore();
 const route = useRoute();
 const router = useRouter();