memberApp/src/pages/SettingsPage.vue

<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
              :readonly="!user.isPermittedTo('settings', 'write')"
              :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
              :readonly="!user.isPermittedTo('settings', 'write')"
              :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
                  :disable="!user.isPermittedTo('settings', 'write')"
                  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-primary-text',
                    settings.primaryColorText === '#ffffff' ? 'bg-black' : '',
                  ]"
                  :style="settings.primaryColorText === '#ffffff' ? 'opacity: 0.2;' : ''"
                >
                  {{ $t('primaryColorText') }}
                </p>
                <q-color
                  :disable="!user.isPermittedTo('settings', 'write')"
                  bordered
                  class="q-mx-md"
                  v-model="settings.primaryColorText"
                ></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
                  :disable="!user.isPermittedTo('settings', 'write')"
                  class="q-mx-md"
                  v-model="settings.secondaryColor"
                ></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-text',
                    settings.secondaryColorText === '#ffffff' ? 'bg-black' : '',
                  ]"
                  :style="settings.secondaryColorText === '#ffffff' ? 'opacity: 0.2;' : ''"
                >
                  {{ $t('secondaryColorText') }}
                </p>
                <q-color
                  :disable="!user.isPermittedTo('settings', 'write')"
                  class="q-mx-md"
                  v-model="settings.secondaryColorText"
                ></q-color>
              </div>
            </div>
            <q-btn
              :disable="!user.isPermittedTo('settings', 'write')"
              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';
import { useUserStore } from 'src/vueLib/login/userStore';

const { NotifyResponse } = useNotify();
const colorGroup = ref(false);
const user = useUserStore();

const settings = reactive<Settings>({
  icon: Logo.value,
  databaseName: databaseName.value,
  primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
  primaryColorText: document.documentElement.style.getPropertyValue('--q-primary-text'),
  secondaryColor: document.documentElement.style.getPropertyValue('--q-secondary'),
  secondaryColorText: document.documentElement.style.getPropertyValue('--q-secondary-text'),
});

watch(settings, (newSettings) => {
  Logo.value = newSettings.icon;
  databaseName.value = newSettings.databaseName;
});

function resetColors() {
  document.documentElement.style.setProperty('--q-primary', '#1976d2');
  settings.primaryColor = '#1976d2';
  document.documentElement.style.setProperty('--q-primary-text', '#ffffff');
  settings.primaryColorText = '#ffffff';
  document.documentElement.style.setProperty('--q-secondary', '#26a69a');
  settings.secondaryColor = '#26a69a';
  document.documentElement.style.setProperty('--q-secondary-text', '#ffffff');
  settings.secondaryColorText = '#ffffff';
}

function save() {
  document.documentElement.style.setProperty('--q-primary', settings.primaryColor);
  document.documentElement.style.setProperty('--q-primary-text', settings.primaryColorText);
  document.documentElement.style.setProperty('--q-secondary', settings.secondaryColor);
  document.documentElement.style.setProperty('--q-secondary-text', settings.secondaryColorText);
  Logo.value = settings.icon;
  localStorage.setItem('icon', settings.icon);
  localStorage.setItem('databaseName', settings.databaseName);
  localStorage.setItem('primaryColor', settings.primaryColor);
  localStorage.setItem('primaryColorText', settings.primaryColorText);
  localStorage.setItem('secondaryColor', settings.secondaryColor);
  localStorage.setItem('secondaryColorText', settings.secondaryColorText);

  const tempuser = user.user;
  if (tempuser) {
    tempuser.settings = settings;
  }
  appApi
    .post('users/update', tempuser)
    .then((resp) => NotifyResponse(resp.data.message))
    .catch((err) => NotifyResponse(err, 'error'));
}
</script>