connorabbas · connorabbas · Sep 13, 2024 · Sep 13, 2024
diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -1,35 +1,37 @@
 // https://aka.ms/devcontainer.json
 {
-	"name": "PrimeVue Inertia",
-	"dockerComposeFile": [
-		"../docker-compose.yml"
-	],
-	"service": "primevue_inertia",
-	"workspaceFolder": "/var/www/html",
-	"customizations": {
-		"vscode": {
-			"extensions": [
-				"absszero.vscode-laravel-goto",
-				"amiralizadeh9480.laravel-extra-intellisense",
-				"bmewburn.vscode-intelephense-client",
-				"codingyu.laravel-goto-view",
-				"eamodio.gitlens",
-				"esbenp.prettier-vscode",
-				"mikestead.dotenv",
-				"recca0120.vscode-phpunit",
-				"streetsidesoftware.code-spell-checker",
-				"MehediDracula.php-namespace-resolver",
-				"onecentlin.laravel-blade",
-				"hollowtree.vue-snippets",
-				"Vue.volar",
-				"shd101wyy.markdown-preview-enhanced"
-			],
-			"settings": {}
-		}
-	},
-	"remoteUser": "sail",
-	"postCreateCommand": "chown -R 1000:1000 /var/www/html 2>/dev/null || true"
-	// "forwardPorts": [],
-	// "runServices": [],
-	// "shutdownAction": "none",
+    "name": "PrimeVue Inertia",
+    "dockerComposeFile": [
+        "../docker-compose.yml"
+    ],
+    "service": "primevue_inertia",
+    "workspaceFolder": "/var/www/html",
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "absszero.vscode-laravel-goto",
+                "amiralizadeh9480.laravel-extra-intellisense",
+                "bmewburn.vscode-intelephense-client",
+                "codingyu.laravel-goto-view",
+                "eamodio.gitlens",
+                "esbenp.prettier-vscode",
+                "mikestead.dotenv",
+                "streetsidesoftware.code-spell-checker",
+                "MehediDracula.php-namespace-resolver",
+                "hbenl.vscode-test-explorer",
+                "ms-vscode.test-adapter-converter",
+                "recca0120.vscode-phpunit",
+                "onecentlin.laravel-blade",
+                "hollowtree.vue-snippets",
+                "Vue.volar",
+                "shd101wyy.markdown-preview-enhanced"
+            ],
+            "settings": {}
+        }
+    },
+    "remoteUser": "sail",
+    "postCreateCommand": "chown -R 1000:1000 /var/www/html 2>/dev/null || true"
+    // "forwardPorts": [],
+    // "runServices": [],
+    // "shutdownAction": "none",
 }
diff --git a/app/Http/Controllers/Auth/ConfirmablePasswordController.php b/app/Http/Controllers/Auth/ConfirmablePasswordController.php
diff --git a/docker/8.3/README.md b/docker/8.3/README.md
@@ -59,4 +59,9 @@ networks:
   database:
     name: mariadb_network
 
+```
+```sql
+# init.sql
+GRANT ALL PRIVILEGES ON *.* TO 'docker_mariadb'@'%';
+FLUSH PRIVILEGES;
 ```
diff --git a/package-lock.json b/package-lock.json
diff --git a/resources/js/Components/LinksMenu.vue b/resources/js/Components/LinksMenu.vue
@@ -18,17 +18,25 @@ defineExpose({
                 class="p-menu-item-link"
                 custom
             >
-                <span v-show="item.icon" :class="item.icon" class="mr-1" />
-                <span>{{ item.label }}</span>
+                <span
+                    v-show="item.icon"
+                    :class="item.icon"
+                    class="p-menu-item-icon"
+                />
+                <span class="p-menu-item-label">{{ item.label }}</span>
             </Link>
             <a
                 v-else
                 :href="item.url"
                 :target="item.target"
                 v-bind="props.action"
             >
-                <span v-show="item.icon" :class="item.icon" class="mr-1" />
-                <span>{{ item.label }}</span>
+                <span
+                    v-show="item.icon"
+                    :class="item.icon"
+                    class="p-menu-item-icon"
+                />
+                <span class="p-menu-item-label">{{ item.label }}</span>
             </a>
         </template>
     </Menu>

diff --git a/resources/js/Components/LinksMenuBar.vue b/resources/js/Components/LinksMenuBar.vue
@@ -19,15 +19,18 @@ defineExpose({
                 v-if="item.route"
                 :href="item.route"
                 class="p-menubar-item-link"
-                :class="
-                    item.active
-                        ? 'text-primary'
-                        : 'text-surface-700 dark:text-surface-0'
-                "
+                :class="{
+                    'font-bold text-primary dark:text-primary-300 bg-primary-50 dark:bg-primary-950 rounded-lg':
+                        item.active,
+                }"
                 custom
             >
-                <span v-show="item.icon" :class="item.icon" class="mr-1" />
-                <span>{{ item.label }}</span>
+                <span
+                    v-show="item.icon"
+                    :class="item.icon"
+                    class="p-menu-item-icon"
+                />
+                <span class="p-menu-item-label">{{ item.label }}</span>
             </Link>
             <a
                 v-else
@@ -36,8 +39,12 @@ defineExpose({
                 v-bind="props.action"
                 class="p-menubar-item-link"
             >
-                <span v-show="item.icon" :class="item.icon" class="mr-1" />
-                <span>{{ item.label }}</span>
+                <span
+                    v-show="item.icon"
+                    :class="item.icon"
+                    class="p-menu-item-icon"
+                />
+                <span class="p-menu-item-label">{{ item.label }}</span>
                 <i
                     v-if="hasSubmenu"
                     :class="[

diff --git a/resources/js/Components/NestedLinksMenu.vue b/resources/js/Components/NestedLinksMenu.vue
@@ -31,7 +31,11 @@ import PanelMenu from 'primevue/panelmenu';
                         : 'text-surface-700 dark:text-surface-0'
                 "
             >
-                <span v-show="item.icon" :class="item.icon" class="mr-2" />
+                <span
+                    v-show="item.icon"
+                    :class="item.icon"
+                    class="p-panelmenu-item-icon mr-2"
+                />
                 <span>{{ item.label }}</span>
             </Link>
             <a
@@ -40,7 +44,11 @@ import PanelMenu from 'primevue/panelmenu';
                 :href="item.url"
                 :target="item.target"
             >
-                <span v-show="item.icon" :class="item.icon" class="mr-2" />
+                <span
+                    v-show="item.icon"
+                    :class="item.icon"
+                    class="p-panelmenu-item-icon mr-2"
+                />
                 <span>{{ item.label }}</span>
                 <span v-if="item.items" class="pi pi-angle-down ml-auto" />
             </a>

diff --git a/resources/js/Composables/useDataTable.js b/resources/js/Composables/useDataTable.js
@@ -0,0 +1,106 @@
+import { ref, computed } from 'vue';
+import { router } from '@inertiajs/vue3';
+
+export function useDataTable(defaultFilters = {}, only = ['urlParams']) {
+    const dataTableDefaults = {
+        filters: defaultFilters,
+        sortField: '',
+        sortOrder: 1,
+        currentPage: 1,
+        rowsPerPage: 20,
+    };
+
+    const filters = ref(dataTableDefaults.filters);
+    const sortField = ref(dataTableDefaults.sortField);
+    const sortOrder = ref(dataTableDefaults.sortOrder);
+    const currentPage = ref(dataTableDefaults.currentPage);
+    const rowsPerPage = ref(dataTableDefaults.rowsPerPage);
+
+    const firstDatasetIndex = computed(() => {
+        return (currentPage.value - 1) * rowsPerPage.value;
+    });
+
+    function fetchData() {
+        return new Promise((resolve, reject) => {
+            router.reload({
+                only,
+                data: {
+                    filters: filters.value,
+                    sortField: sortField.value,
+                    sortOrder: sortOrder.value,
+                    page: currentPage.value,
+                    rows: rowsPerPage.value,
+                },
+                preserveState: true,
+                onSuccess: (page) => {
+                    resolve(page);
+                },
+                onError: (errors) => {
+                    reject(errors);
+                },
+            });
+        });
+    }
+
+    function onPage(event) {
+        currentPage.value = event.page + 1;
+        rowsPerPage.value = event.rows;
+        fetchData().then(() => {
+            scrollToTop();
+        });
+    }
+
+    function onSort(event) {
+        sortField.value = event.sortField;
+        sortOrder.value = event.sortOrder;
+        fetchData();
+    }
+
+    function onFilter(event) {
+        currentPage.value = 1;
+        filters.value = event.filters;
+        fetchData();
+    }
+
+    function scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: 'smooth',
+        });
+    }
+
+    function reset() {
+        filters.value = dataTableDefaults.filters;
+        sortField.value = dataTableDefaults.sortField;
+        sortOrder.value = dataTableDefaults.sortOrder;
+        currentPage.value = dataTableDefaults.currentPage;
+        rowsPerPage.value = dataTableDefaults.rowsPerPage;
+        fetchData();
+    }
+
+    function parseUrlParams(urlParams) {
+        filters.value = urlParams?.filters || dataTableDefaults.filters;
+        sortField.value = urlParams?.sortField || dataTableDefaults.sortField;
+        sortOrder.value =
+            parseInt(urlParams?.sortOrder) || dataTableDefaults.sortOrder;
+        currentPage.value =
+            parseInt(urlParams?.page) || dataTableDefaults.currentPage;
+        rowsPerPage.value =
+            parseInt(urlParams?.rows) || dataTableDefaults.rowsPerPage;
+    }
+
+    return {
+        filters,
+        sortField,
+        sortOrder,
+        currentPage,
+        rowsPerPage,
+        firstDatasetIndex,
+        onPage,
+        onSort,
+        onFilter,
+        reset,
+        fetchData,
+        parseUrlParams,
+    };
+}