first commit

src/pages/SettingsPage.vue

@@ -0,0 +1,121 @@
+<template>
+  <div class="text-h2 flex flex-center">
+    <q-card class="q-gutter-md">
+      <p class="text-center text-bold text-h3 text-primary q-pt-md">{{ $t('settings') }}</p>
+
+      <div>
+        <q-card class="q-ma-lg">
+          <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('general') }}</p>
+          <div class="row">
+            <q-input
+              :class="[
+                colorGroup ? 'col-md-4' : 'col-md-3',
+                colorGroup ? 'col-md-6' : 'col-md-6',
+                colorGroup ? 'col-md-4' : 'col-md-12',
+                'q-pa-md',
+              ]"
+              filled
+              :label="$t('icon')"
+              v-model="settings.icon"
+            ></q-input>
+          </div>
+        </q-card>
+        <q-card class="q-ma-lg">
+          <p class="text-bold text-h6 text-primary q-pa-md">{{ $t('database') }}</p>
+          <div class="row">
+            <q-input
+              :class="[
+                colorGroup ? 'col-md-4' : 'col-md-3',
+                colorGroup ? 'col-md-6' : 'col-md-6',
+                colorGroup ? 'col-md-4' : 'col-md-12',
+                'q-pa-md',
+              ]"
+              filled
+              :label="$t('databaseName')"
+              v-model="settings.databaseName"
+            ></q-input>
+          </div>
+        </q-card>
+        <q-card class="q-ma-lg">
+          <q-btn
+            class="q-pa-md"
+            :icon="colorGroup ? 'remove' : 'add'"
+            size="md"
+            dense
+            no-caps
+            color="primary"
+            flat
+            @click="colorGroup = !colorGroup"
+            >{{ $t('colors') }}</q-btn
+          >
+          <div v-if="colorGroup" class="colum">
+            <div class="row">
+              <div class="col-12 col-sm-6 col-md-3 q-px-md">
+                <p class="text-center text-bold text-h6 text-primary">{{ $t('primaryColor') }}</p>
+                <q-color bordered class="q-mx-md" v-model="settings.primaryColor"></q-color>
+              </div>
+              <div class="col-12 col-sm-6 col-md-3 q-px-md">
+                <p class="text-center text-bold text-h6 text-secondary">
+                  {{ $t('secondaryColor') }}
+                </p>
+                <q-color class="q-mx-md" v-model="settings.secondaryColor"></q-color>
+              </div>
+            </div>
+            <q-btn class="q-my-md q-mx-md" color="secondary" dense no-caps @click="resetColors">{{
+              $t('resetColors')
+            }}</q-btn>
+          </div>
+        </q-card>
+        <div class="row justify-end">
+          <div class="q-my-lg q-mr-xl">
+            <q-btn no-caps color="primary" @click="save">{{ $t('save') }}</q-btn>
+          </div>
+        </div>
+      </div>
+    </q-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { databaseName } from 'src/vueLib/tables/members/MembersTable';
+import { Logo } from 'src/vueLib/models/logo';
+import { reactive, ref, watch } from 'vue';
+import { appApi } from 'src/boot/axios';
+import { useNotify } from 'src/vueLib/general/useNotify';
+import { type Settings } from 'src/vueLib/models/settings';
+
+const { NotifyResponse } = useNotify();
+const colorGroup = ref(false);
+
+const settings = reactive<Settings>({
+  icon: Logo.value,
+  databaseName: databaseName.value,
+  primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
+  secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),
+});
+
+watch(settings, (newSettings) => {
+  Logo.value = newSettings.icon;
+  databaseName.value = newSettings.databaseName;
+});
+
+function resetColors() {
+  document.documentElement.style.setProperty('--q-primary', '#1976d2');
+  document.documentElement.style.setProperty('--q-secondary', '#26a69a');
+}
+
+function save() {
+  document.documentElement.style.setProperty('--q-primary', settings.primaryColor);
+  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor);
+  Logo.value = settings.icon;
+  localStorage.setItem('icon', settings.icon);
+  localStorage.setItem('databaseName', settings.databaseName);
+  localStorage.setItem('primaryColor', settings.primaryColor);
+  localStorage.setItem('secondaryColor', settings.secondaryColor);
+
+  appApi
+    .post('secure/settings/update', { user: 'admin', settings })
+    .then((resp) => NotifyResponse(resp.data.message))
+    .catch((err) => NotifyResponse(err, 'error'));
+}
+</script>