make app name changable and move settings parameter to settings close #19

package.json

@@ -2,7 +2,7 @@
   "name": "lightcontrol",
   "version": "1.0.8",
   "description": "A Tecamino App",
-  "productName": "Member Database",
+  "productName": "Attendence Records",
   "author": "A. Zuercher",
   "type": "module",
   "private": true,

src/boot/quasar-global.ts

@@ -1,8 +1,7 @@
 import { boot } from 'quasar/wrappers';
 import { setQuasarInstance } from 'src/vueLib/utils/globalQ';
 import { setRouterInstance } from 'src/vueLib/utils/globalRouter';
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
+import { databaseName, logo, appName } from 'src/vueLib/models/settings';
-import { Logo } from 'src/vueLib/models/logo';
 import { Dark } from 'quasar';
 
 export default boot(({ app, router }) => {
@@ -10,11 +9,10 @@ export default boot(({ app, router }) => {
   const $q = app.config.globalProperties.$q;
   setQuasarInstance($q);
 
-  console.log(99, localStorage.getItem('mode'));
-
   Dark.set(localStorage.getItem('mode') === 'true');
 
-  Logo.value = localStorage.getItem('icon') ?? Logo.value;
+  logo.value = localStorage.getItem('icon') ?? logo.value;
+  appName.value = localStorage.getItem('appName') ?? appName.value;
   databaseName.value = localStorage.getItem('databaseName') ?? databaseName.value;
   let primaryColor = localStorage.getItem('primaryColor');
   if (primaryColor == null || primaryColor === 'undefined' || primaryColor.trim() === '') {

src/pages/SettingsPage.vue

@@ -7,6 +7,18 @@
         <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('appName')"
+              v-model="settings.appName"
+            ></q-input>
             <q-input
               :readonly="!user.isPermittedTo('settings', 'write')"
               :class="[
@@ -133,8 +145,7 @@
 </template>
 
 <script setup lang="ts">
-import { databaseName } from 'src/vueLib/tables/members/MembersTable';
+import { logo, appName, databaseName } from 'src/vueLib/models/settings';
-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';
@@ -146,7 +157,8 @@ const colorGroup = ref(false);
 const user = useUserStore();
 
 const settings = reactive<Settings>({
-  icon: Logo.value,
+  appName: appName.value,
+  icon: logo.value,
   databaseName: databaseName.value,
   primaryColor: document.documentElement.style.getPropertyValue('--q-primary'),
   primaryColorText: document.documentElement.style.getPropertyValue('--q-primary-text'),
@@ -155,7 +167,8 @@ const settings = reactive<Settings>({
 });
 
 watch(settings, (newSettings) => {
-  Logo.value = newSettings.icon;
+  logo.value = newSettings.icon;
+  appName.value = newSettings.appName;
   databaseName.value = newSettings.databaseName;
 });
 
@@ -175,8 +188,10 @@ function save() {
   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;
+  appName.value = settings.appName;
+  logo.value = settings.icon;
   localStorage.setItem('icon', settings.icon);
+  localStorage.setItem('appName', settings.appName);
   localStorage.setItem('databaseName', settings.databaseName);
   localStorage.setItem('primaryColor', settings.primaryColor);
   localStorage.setItem('primaryColorText', settings.primaryColorText);

src/vueLib/login/LoginForm.vue

@@ -3,7 +3,7 @@
   <q-form ref="refForm">
     <q-item-section class="q-gutter-md q-pa-md">
       <q-card :class="['q-gutter-xs q-items-center q-pa-lg', { shake: shake }]">
-        <div class="text-h5 text-primary text-center">{{ productName }}</div>
+        <div class="text-h5 text-primary text-center">{{ appName }}</div>
         <q-input
           ref="refUserInput"
           dense
@@ -47,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { productName } from '../../../package.json';
+import { appName } from '../models/settings';
 import { ref } from 'vue';
 import { useNotify } from '../general/useNotify';
 import { useLogin } from './useLogin';

src/vueLib/login/useLogin.ts

@@ -2,7 +2,7 @@ import { appApi } from 'src/boot/axios';
 import { useUserStore } from './userStore';
 import { useNotify } from '../general/useNotify';
 import type { Settings } from '../models/settings';
-import { Logo } from '../models/logo';
+import { appName, logo } from '../models/settings';
 
 const refreshTime = 10000;
 let intervalId: ReturnType<typeof setInterval> | null = null;
@@ -16,7 +16,8 @@ export function useLogin() {
       await appApi.post('/login', { user, password }).then((resp) => {
         const sets = resp.data.settings as Settings;
 
-        Logo.value = sets.icon;
+        logo.value = sets.icon;
+        appName.value = sets.appName;
         document.documentElement.style.setProperty('--q-primary', sets.primaryColor);
         document.documentElement.style.setProperty('--q-primary-text', sets.primaryColorText);
         document.documentElement.style.setProperty('--q-secondary', sets.secondaryColor);

src/vueLib/models/logo.ts

@@ -1,3 +0,0 @@
-import { ref } from 'vue';
-
-export const Logo = ref('');

src/vueLib/models/settings.ts

@@ -1,4 +1,11 @@
+import { ref } from 'vue';
+
+export const logo = ref('');
+export const appName = ref('Attendance Records');
+export const databaseName = ref('members.dba');
+
 export type Settings = {
+  appName: string;
   icon: string;
   databaseName: string;
   primaryColor: string;
@@ -9,6 +16,7 @@ export type Settings = {
 
 export function DefaultSettings(): Settings {
   return {
+    appName: 'Attendance Records',
     icon: '',
     databaseName: 'members.dba',
     primaryColor: document.documentElement.style.getPropertyValue('--q-primary-text'),

src/vueLib/tables/events/EventsTable.vue

@@ -153,7 +153,7 @@ import EditAllDialog from 'src/components/EventEditAllDialog.vue';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useEventTable } from './EventsTable';
-import { databaseName } from '../members/MembersTable';
+import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import AttendeesTable from '../attendees/AttendeesTable.vue';
 import type { Members } from 'src/vueLib/models/member';

src/vueLib/tables/members/MembersTable.ts

@@ -5,8 +5,6 @@ import { useNotify } from 'src/vueLib/general/useNotify';
 import { i18n } from 'boot/lang';
 import { useResponsibleTable } from '../responsible/ResponsibleTable';
 
-export const databaseName = ref('members.dba');
-
 export function useMemberTable() {
   const members = ref<Members>([]);
   const { responsibles, updateResponsibles } = useResponsibleTable();

src/vueLib/tables/members/MembersTable.vue

@@ -201,7 +201,7 @@ import { useNotify } from 'src/vueLib/general/useNotify';
 import { useMemberTable } from './MembersTable';
 import UploadDialog from 'src/components/UploadDialog.vue';
 import AddToEvent from 'src/components/AddToEvent.vue';
-import { databaseName } from './MembersTable';
+import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';
 

src/vueLib/tables/responsible/ResponsibleTable.vue

@@ -136,7 +136,7 @@ import type { Member, Members } from 'src/vueLib/models/member';
 import OkDialog from 'src/components/dialog/OkDialog.vue';
 import { useNotify } from 'src/vueLib/general/useNotify';
 import { useResponsibleTable } from './ResponsibleTable';
-import { databaseName } from '../members/MembersTable';
+import { databaseName } from 'src/vueLib/models/settings';
 import { useUserStore } from 'src/vueLib/login/userStore';
 import { i18n } from 'src/boot/lang';