first commit

src/pages/ErrorNotFound.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+//
+</script>

src/pages/LoginPage.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flex flex-center">
+    <LoginForm v-on:update-close="forwardToPage" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LoginForm from 'src/vueLib/login/LoginForm.vue';
+import { useUserStore } from 'src/vueLib/login/userStore';
+import { onMounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+const userStore = useUserStore();
+
+onMounted(() => {
+  const user = userStore.getUser();
+  if (user?.username !== '' && user?.role !== '') {
+    forwardToPage().catch((err) => console.error(err));
+  }
+});
+
+const forwardToPage = () => router.push('/members');
+</script>

src/pages/MembersTable.vue

@@ -0,0 +1,34 @@
+<template>
+  <q-page>
+    <MembersTable />
+    <DialogFrame ref="dialog" header-title="Test Frame">
+      <MembersTable ref="memberDialog" />
+      <q-btn @click="getSelection">Get Selected</q-btn>
+    </DialogFrame>
+    <DialogFrame ref="uploadDialog" header-title="Test Frame">
+      <MembersTable ref="memberDialog" />
+      <q-btn @click="getSelection">Get Selected</q-btn>
+    </DialogFrame>
+    <div class="row">
+      <q-btn @click="open">Click Me</q-btn>
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+import MembersTable from 'src/vueLib/tables/members/MembersTable.vue';
+import DialogFrame from 'src/vueLib/dialog/DialogFrame.vue';
+import { ref } from 'vue';
+import type { MemberDialog } from 'src/vueLib/tables/members/MembersTable.vue';
+
+const dialog = ref();
+const memberDialog = ref<MemberDialog>();
+
+const open = () => dialog.value?.open();
+
+function getSelection() {
+  const selected = memberDialog.value?.getSelected();
+  if (selected === undefined) return;
+  console.log(65, selected[0]?.id);
+}
+</script>

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>

src/pages/UserSettings.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="q-pa-md">
+    <div class="q-gutter-y-md">
+      <q-card>
+        <q-tabs
+          v-model="tab"
+          dense
+          class="taxt-grey"
+          active-color="primary"
+          indicator-color="primary"
+          align="justify"
+          narrow-indicator
+        >
+          <q-tab name="users" no-caps :label="$t('users')" />
+          <q-tab name="roles" no-caps :label="$t('roles')" />
+        </q-tabs>
+        <q-seperator />
+
+        <q-tab-panels v-model="tab" animated>
+          <q-tab-panel name="users">
+            <q-table :rows="users" :columns="columns"> </q-table>
+          </q-tab-panel>
+          <q-tab-panel name="roles">
+            <q-table :rows="users" :columns="columns"> </q-table>
+          </q-tab-panel>
+        </q-tab-panels>
+      </q-card>
+    </div>
+  </div>
+
+  <q-btn no-caps color="primary" @click="console.log('save')">{{ $t('save') }}</q-btn>
+</template>
+
+<script setup lang="ts">
+import type { Users } from 'src/vueLib/models/users';
+import { computed, ref } from 'vue';
+
+const tab = ref('users');
+
+const columns = computed(() => [
+  { name: 'name', align: 'center' as const, label: 'Name', field: 'name' },
+]);
+
+const users = ref<Users>([]);
+</script>