adminforth 1.0.27 → 1.0.29

package/dist/spa/spa/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "spa",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check \"build-only {@}\" --",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --build --force",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "@iconify-prerendered/vue-flowbite": "^0.23.1714023977",
+    "dayjs": "^1.11.11",
+    "flowbite": "^2.3.0",
+    "flowbite-datepicker": "^1.2.6",
+    "pinia": "^2.1.7",
+    "vue": "^3.4.21",
+    "vue-router": "^4.3.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.8.0",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/node": "^20.12.5",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-vue": "^9.23.0",
+    "npm-run-all2": "^6.1.2",
+    "postcss": "^8.4.38",
+    "sass": "^1.77.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "~5.4.0",
+    "vite": "^5.2.12",
+    "vue-tsc": "^2.0.11"
+  }
+}

package/dist/spa/spa/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/dist/spa/spa/src/App.vue

@@ -0,0 +1,172 @@
+<template>
+  <nav 
+    v-if="loggedIn"
+
+    class="fixed h-14 top-0 z-50 w-full bg-white border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+    <div class="px-3 py-3 lg:px-5 lg:pl-3">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center justify-start rtl:justify-end">
+          <button data-drawer-target="logo-sidebar" data-drawer-toggle="logo-sidebar" aria-controls="logo-sidebar" type="button" class="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg sm:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
+              <span class="sr-only">Open sidebar</span>
+              <svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                <path clip-rule="evenodd" fill-rule="evenodd" d="M2 4.75A.75.75 0 012.75 4h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 4.75zm0 10.5a.75.75 0 01.75-.75h7.5a.75.75 0 010 1.5h-7.5a.75.75 0 01-.75-.75zM2 10a.75.75 0 01.75-.75h14.5a.75.75 0 010 1.5H2.75A.75.75 0 012 10z"></path>
+              </svg>
+          </button>
+          <div  class="flex ms-2 md:me-24">
+            <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 me-3" alt="FlowBite Logo" />
+            <span class="self-center text-xl font-semibold sm:text-2xl whitespace-nowrap dark:text-white">
+              {{ coreStore.config?.brandName }}
+            </span>
+          </div>
+        </div>
+        <div class="flex items-center">
+          
+
+            <div class="flex items-center ms-3">
+              <div>
+                <button type="button" class="flex text-sm bg-gray-100 rounded-full focus:ring-4 focus:ring-gray-300 dark:focus:ring-gray-600 dark:bg-gray-700" aria-expanded="false" data-dropdown-toggle="dropdown-user">
+                  <span class="sr-only">Open user menu</span>
+                  <svg class="w-8 h-8 text-gray-400 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                    <path fill-rule="evenodd" d="M12 20a7.966 7.966 0 0 1-5.002-1.756l.002.001v-.683c0-1.794 1.492-3.25 3.333-3.25h3.334c1.84 0 3.333 1.456 3.333 3.25v.683A7.966 7.966 0 0 1 12 20ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10c0 5.5-4.44 9.963-9.932 10h-.138C6.438 21.962 2 17.5 2 12Zm10-5c-1.84 0-3.333 1.455-3.333 3.25S10.159 13.5 12 13.5c1.84 0 3.333-1.455 3.333-3.25S13.841 7 12 7Z" clip-rule="evenodd"/>
+                  </svg>
+
+                </button>
+              </div>
+              <div class="z-50 hidden my-4 text-base list-none bg-white divide-y divide-gray-100 rounded shadow dark:bg-gray-700 dark:divide-gray-600 dark:shadow-xl" id="dropdown-user">
+                <div class="px-4 py-3" role="none">
+                  <p class="text-sm text-gray-900 dark:text-white" role="none" v-if="coreStore.userFullname">
+                    {{ coreStore.userFullname }}
+                  </p>
+                  <p class="text-sm font-medium text-gray-900 truncate dark:text-gray-300" role="none">
+                    {{ coreStore.username }}
+                  </p>
+                </div>
+                <ul class="py-1" role="none">
+                  <li>
+                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Dashboard</a>
+                  </li>
+                  <li >
+                    <span @click="toggleTheme" class=" cursor-pointer flex items-center	 gap-1 block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">
+                      {{ theme === 'dark' ? 'Light' : 'Dark' }}
+                      <IconMoonSolid class="w-5 h-5 text-blue-300
+                      " v-if="theme !== 'dark'"/>
+                      <IconSunSolid class="w-5 h-5 text-yellow-300
+                      " v-else/>
+                      mode
+                    </span>
+                  </li>
+                  
+                  <li>
+                    <button @click="logout" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-600 dark:hover:text-white" role="menuitem">Sign out</button>
+                </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+  </nav>
+
+  <aside 
+    v-if="loggedIn"
+
+    id="logo-sidebar" class="fixed top-0 left-0 z-10 w-64 h-screen pt-20 transition-transform -translate-x-full bg-white border-r border-gray-200 sm:translate-x-0 dark:bg-gray-800 dark:border-gray-700" aria-label="Sidebar">
+    <div class="h-full px-3 pb-4 overflow-y-auto bg-white dark:bg-gray-800">
+        <ul class="space-y-2 font-medium">
+          <template v-for="(item, i) in coreStore.menu" :key="`menu-${i}`">
+            <div v-if="item.type === 'divider'" class="border-t border-gray-200 dark:border-gray-700"></div>
+            <div v-else-if="item.type === 'gap'" class="flex items-center justify-center h-8"></div>
+            
+            <li v-else-if="item.children">
+              <button  type="button" class="flex items-center w-full p-2 text-base text-gray-900 transition duration-75 rounded-lg group hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700" 
+                  :aria-controls="`dropdown-example${i}`"
+                  :data-collapse-toggle="`dropdown-example${i}`"
+              >
+                <component v-if="item.icon" :is="getIcon(item.icon)" class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" ></component>
+
+                <span class="flex-1 ms-3 text-left rtl:text-right whitespace-nowrap">{{ item.label }}</span>
+                <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
+                </svg>
+              </button>
+
+              <ul :id="`dropdown-example${i}`" role="none" class="py-2 space-y-2" :class="{ 'hidden': !item.open }">
+                <template v-for="(child, j) in item.children" :key="`menu-${i}-${j}`">
+                  <li>
+                    <MenuLink :item="child" isChild="true" />
+                  </li>
+                </template>
+              </ul> 
+            </li>
+            <li v-else>
+              <MenuLink :item="item" />
+            </li>
+          </template>
+        </ul>
+    </div>
+  </aside>
+    
+  <div class="p-4 sm:ml-64 dark:bg-gray-800" v-if="loggedIn">
+    <div class="p-0 dark:border-gray-700 mt-14">
+        <RouterView/>     
+    </div>
+  </div> 
+
+  <div v-else>
+    <RouterView/>
+  </div>
+  <AcceptModal />
+</template>
+
+<style scoped>
+</style>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch, defineComponent } from 'vue';
+import { RouterLink, RouterView } from 'vue-router';
+import { initFlowbite } from 'flowbite'
+import './index.scss'
+import { useCoreStore } from '@/stores/core';
+import { IconMoonSolid, IconSunSolid } from '@iconify-prerendered/vue-flowbite';
+import AcceptModal from './components/AcceptModal.vue';
+import MenuLink from './components/MenuLink.vue';
+import { useRoute, useRouter } from 'vue-router';
+import { getIcon } from '@/utils';
+
+
+const route = useRoute();
+const router = useRouter();
+
+const routerIsReady = ref(false);
+
+const loggedIn = computed(() => route.name !== 'login' && routerIsReady.value);
+
+const theme = ref('light');
+
+function toggleTheme() {
+  theme.value = theme.value === 'light' ? 'dark' : 'light';
+  document.documentElement.classList.toggle('dark');
+}
+
+async function logout() {
+  await coreStore.logout();
+  router.push({ name: 'login' });
+}
+
+const coreStore = useCoreStore();
+
+
+
+async function initRouter() {
+  await router.isReady();
+  routerIsReady.value = true;
+}
+
+// initialize components based on data attribute selectors
+onMounted(async () => {
+  initRouter();
+  initFlowbite();
+  await coreStore.fetchMenuAndResource();
+})
+
+</script>

package/dist/spa/spa/src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

package/dist/spa/spa/src/components/AcceptModal.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { ref,onMounted } from 'vue'
+import { useModalStore } from '@/stores/modal';
+
+const modalStore = useModalStore();
+
+
+
+
+
+
+        
+</script>
+
+<template>
+  <Teleport to="body">
+    <div  v-if="modalStore.isOpened"  class="bg-gray-900/50 dark:bg-gray-900/80  overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+        <div class="relative p-4 w-full max-w-md max-h-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 " >
+            <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
+                <button type="button"@click="modalStore.togleModal" class="absolute top-3 end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" >
+                    <svg class="w-3 h-3"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+                    </svg>
+                    <span class="sr-only">Close modal</span>
+                </button>
+                <div class="p-4 md:p-5 text-center">
+                    <svg class="mx-auto mb-4 text-gray-400 w-12 h-12 dark:text-gray-200"  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 11V6m0 8h.01M19 10a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"/>
+                    </svg>
+                    <h3 class="mb-5 text-lg font-normal text-gray-500 dark:text-gray-400">{{ modalStore?.modalContent?.content }}</h3>
+                    <button @click="()=>{modalStore.onAcceptFunction();modalStore.togleModal()}" type="button" class="text-white bg-red-600 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-sm inline-flex items-center px-5 py-2.5 text-center">
+                        {{ modalStore?.modalContent?.acceptText }}
+                    </button>
+                    <button @click="modalStore.togleModal"  type="button" class="py-2.5 px-5 ms-3 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">{{ modalStore?.modalContent?.cancelText }}</button>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</Teleport>
+</template>
+
+<style scoped>
+.modal {
+  position: fixed;
+  z-index: 999;
+  top: 20%;
+  left: 50%;
+  width: 300px;
+  margin-left: -150px;
+}
+</style>

package/dist/spa/spa/src/components/Breadcrumbs.vue

@@ -0,0 +1,40 @@
+<template>
+  <nav class="flex" aria-label="Breadcrumb">
+      <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
+        <li class="inline-flex items-center">
+          <RouterLink :to="{name: 'home'}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
+            <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+              <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
+            </svg>
+            Home
+          </RouterLink>
+        </li>
+        <li>
+          <div class="flex items-center">
+            <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+            </svg>
+            <RouterLink :to="{name: 'resource-list', params: { resourceId: $route.params.resourceId }}" class="text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">{{ coreStore.resourceById[$route.params.resourceId]?.label }}</RouterLink>
+          </div>
+        </li>
+
+        <li v-if="$route.params.primaryKey">
+          <div class="flex items-center">
+            <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
+            </svg>
+            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">
+              {{ $route.name === 'resource-edit' ? 'Edit' : 'Show' }} {{ coreStore.record?._label }}</span>
+          </div>
+        </li>
+
+       
+      </ol>
+    </nav>
+</template>
+
+<script setup>
+import { useCoreStore } from '@/stores/core';
+
+const coreStore = useCoreStore()
+</script>

package/dist/spa/spa/src/components/BreadcrumbsWithButtons.vue

@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2">
+      <Breadcrumbs />
+      <div class="flex items-center space-x-1">
+        <slot></slot>
+      </div>
+    </div>
+    <div class="flex items-center justify-between mb-3 flex-wrap gap-y-2">
+      <div class="p-4 mb-4 text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400" role="alert"
+        v-if="coreStore.resourceColumnsError">
+        <span class="font-medium">Error!</span> {{ coreStore.resourceColumnsError }}
+      </div>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import Breadcrumbs from '@/components/Breadcrumbs.vue';
+
+import { useCoreStore } from '@/stores/core';
+
+const coreStore = useCoreStore();
+
+</script>

package/dist/spa/spa/src/components/CustomDatePicker.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <div class="mx-auto grid grid-cols-2 gap-4 mb-2">
+      <div>
+        <label for="start-time" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ label }}</label>
+
+        <div class="relative">
+          <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5">
+            <IconCalendar class="w-4 h-4 text-gray-500 dark:text-gray-400"/>
+          </div>
+
+          <input ref="datepickerStartEl" type="text"
+                 class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                 placeholder="Start date">
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <div class="mx-auto grid grid-cols-2 gap-4 mb-2" :class="{hidden: !showTimeInputs}">
+        <div>
+          <div class="relative">
+            <div class="absolute inset-y-0 end-0 top-0 flex items-center pe-3.5 pointer-events-none">
+              <IconTime class="w-4 h-4 text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-700"/>
+            </div>
+
+            <input v-model="startTime" type="time" id="start-time" onfocus="this.showPicker()" onclick="this.showPicker()" step="1"
+                   class="bg-gray-50 border leading-none border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                   value="00:00" required/>
+          </div>
+        </div>
+      </div>
+
+      <button type="button"
+              class="text-blue-700 dark:text-blue-500 text-base font-medium hover:underline p-0 inline-flex items-center mb-2"
+              @click="toggleTimeInputs">{{ showTimeInputs ? 'Hide time' : 'Show time' }}
+        <svg class="w-8 h-8 ms-0.5" :class="{'rotate-180': showTimeInputs}" aria-hidden="true"
+             xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+             fill="none" viewBox="0 0 24 24">
+          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                d="m8 10 4 4 4-4"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+<script setup>
+import {ref, computed, onMounted, watch, onBeforeUnmount} from 'vue';
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+
+import {useCoreStore} from '@/stores/core';
+
+import Datepicker from "flowbite-datepicker/Datepicker";
+import IconCalendar from "@/components/icons/IconCalendar.vue";
+import IconTime from "@/components/icons/IconTime.vue";
+
+const coreStore = useCoreStore();
+dayjs.extend(utc)
+
+const props = defineProps({
+  valueStart: {
+    default: undefined
+  },
+  column: {
+    type: Object,
+  },
+  label: {
+    type: String,
+  }
+});
+
+const emit = defineEmits(['update:valueStart']);
+
+const datepickerStartEl = ref();
+
+const showTimeInputs = ref(false);
+
+const startDate = ref('');
+
+const startTime = ref('');
+
+const datepickerObject = ref('')
+
+const start = computed(() => {
+  if (!startDate.value) {
+    return;
+  }
+
+  let date = dayjs(startDate.value);
+
+  if (startTime.value) {
+    date = addTimeToDate(formatTime(startTime.value), date)
+  }
+
+  return date.utc().toISOString();
+})
+
+function updateFromProps() {
+  if (props.valueStart === undefined) {
+    datepickerStartEl.value.value = '';
+    startTime.value = '';
+  }
+  else {
+    datepickerObject.value.setDate(dayjs(props.valueStart).format('DD MMM YYYY'));
+    startTime.value = dayjs(props.valueStart).format('HH:mm:ss')
+  }
+}
+
+onMounted(() => {
+  updateFromProps();
+
+  watch(() => [props.valueStart], (value) => {
+    updateFromProps();
+  });
+})
+
+watch(start, () => {
+  //console.log('⚡ emit', start.value)
+  emit('update:valueStart', start.value)
+})
+
+function initDatepickers() {
+  datepickerObject.value = new Datepicker(datepickerStartEl.value, { format: 'dd M yyyy' });
+
+  addChangeDateListener();
+}
+
+function addChangeDateListener() {
+  datepickerStartEl.value.addEventListener('changeDate', setStartDate)
+}
+
+function removeChangeDateListener() {
+  datepickerStartEl.value.removeEventListener('changeDate', setStartDate);
+}
+
+function setStartDate(event) {
+  startDate.value = event.detail.date
+}
+
+function formatTime(time) {
+  return time.split(':').map(Number).length === 2 ? time + ':00' : time;
+}
+
+function addTimeToDate(time, date) {
+  const [hours, minutes, seconds] = time.split(':').map(Number)
+  return date.hour(hours).minute(minutes).second(seconds)
+}
+
+const toggleTimeInputs = () => {
+  showTimeInputs.value = !showTimeInputs.value
+}
+
+onMounted(() => {
+  initDatepickers();
+});
+
+onBeforeUnmount(() => {
+  removeChangeDateListener();
+})
+</script>