Skip to content

Commit 2fec05d

Browse files
aminnausinaminnausin
committed
feat: update dashboard ui to use cedar-ui
1 parent c1a4d34 commit 2fec05d

11 files changed

Lines changed: 97 additions & 80 deletions

‎resources/js/components/cards/data/LibraryCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { useQueryClient } from '@tanstack/vue-query';
88
import { updateCategory } from '@/service/mediaAPI.ts';
99
import { toast } from '@aminnausin/cedar-ui';
1010
11-
import LibraryCardMenu from '@/components/cards/LibraryCardMenu.vue';
11+
import LibraryCardMenu from '@/components/menus/LibraryCardMenu.vue';
1212
import BasePopover from '@/components/pinesUI/BasePopover.vue';
1313
1414
import ProiconsMoreVertical from '~icons/proicons/more-vertical';

‎resources/js/components/cards/data/LibraryFolderCard.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { type FolderResource } from '@/types/resources';
44
import { formatFileSize, handleStorageURL, toFormattedDate } from '@/service/util';
55
import { useTemplateRef } from 'vue';
66
7-
import LibraryFolderCardMenu from '@/components/cards/LibraryFolderCardMenu.vue';
7+
import LibraryFolderCardMenu from '@/components/menus/LibraryFolderCardMenu.vue';
88
import BasePopover from '@/components/pinesUI/BasePopover.vue';
99
import ButtonIcon from '@/components/inputs/ButtonIcon.vue';
1010

‎resources/js/components/dashboard/DashboardAnalytics.vue‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@ import { computed, ref, useTemplateRef, watch } from 'vue';
66
import { useGetPulse, useGetSiteAnalytics } from '@/service/queries';
77
import { handleStartTask } from '@/service/taskService';
88
import { periodForHumans } from '@/service/pulseUtil';
9+
import { ButtonText } from '@/components/cedar-ui/button';
910
1011
import PulseSlowOutgoingRequests from '@/components/pulseCards/PulseSlowOutgoingRequests.vue';
1112
import LucideChartNoAxesCombined from '~icons/lucide/chart-no-axes-combined';
1213
import PulseSlowRequests from '@/components/pulseCards/PulseSlowRequests.vue';
13-
import DashboardTaskMenu from '@/components/dashboard/DashboardTaskMenu.vue';
14+
import DashboardTaskMenu from '@/components/menus/DashboardTaskMenu.vue';
1415
import PulseSlowQueries from '@/components/pulseCards/PulseSlowQueries.vue';
1516
import PulseExceptions from '@/components/pulseCards/PulseExceptions.vue';
1617
import PulseRequests from '@/components/pulseCards/PulseRequests.vue';
@@ -21,7 +22,6 @@ import PulseQueues from '@/components/pulseCards/PulseQueues.vue';
2122
import BreadCrumbs from '@/components/pinesUI/BreadCrumbs.vue';
2223
import BasePopover from '@/components/pinesUI/BasePopover.vue';
2324
import PulseUsage from '@/components/pulseCards/PulseUsage.vue';
24-
import ButtonText from '@/components/inputs/ButtonText.vue';
2525
import PulseCache from '@/components/pulseCards/PulseCache.vue';
2626
2727
import ProiconsArrowSync from '~icons/proicons/arrow-sync';
@@ -81,18 +81,24 @@ watch(
8181
</button>
8282
</div>
8383
<div class="xs:*:h-8 flex w-full flex-wrap items-center gap-2 *:h-fit">
84-
<ButtonText @click.stop.prevent="handleStartTask('scan')" :text="'Run Full Scan'" title="Scan All Files" class="xs:flex-initial flex-1">
84+
<ButtonText @click.stop.prevent="handleStartTask('scan')" text="Run Full Scan" title="Scan All Files" class="xs:flex-initial flex-1">
8585
<template #icon><ProiconsArrowSync /></template>
8686
</ButtonText>
87-
<BasePopover popoverClass="w-52! rounded-lg mt-10 " :button-attributes="{ title: 'Start New Task', text: 'New Task', class: 'h-full' }" ref="taskPopover" class="">
87+
<BasePopover
88+
:button-attributes="{ title: 'Start New Task', text: 'New Task', class: 'h-full xs:flex-initial flex-1' }"
89+
:button-component="ButtonText"
90+
popoverClass="w-52! rounded-lg mt-10 "
91+
class="xs:flex-initial flex-1"
92+
ref="taskPopover"
93+
>
8894
<template #buttonIcon>
8995
<ProiconsAdd />
9096
</template>
9197
<template #content>
9298
<DashboardTaskMenu @handle-close="taskPopover?.handleClose" :show-scan-all="false" />
9399
</template>
94100
</BasePopover>
95-
<ButtonText :to="'/pulse'" text="Pulse" title="Detailed Analytics" class="xs:flex-initial flex-1">
101+
<ButtonText to="/pulse" text="Pulse" title="Detailed Analytics" class="xs:flex-initial flex-1">
96102
<template #icon><ProiconsBolt /></template>
97103
</ButtonText>
98104
</div>

‎resources/js/components/dashboard/DashboardLibraries.vue‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ import { useQueryClient } from '@tanstack/vue-query';
1111
import { useAppStore } from '@/stores/AppStore';
1212
import { storeToRefs } from 'pinia';
1313
import { sortObject } from '@/service/sort/baseSort';
14+
import { ButtonText } from '@/components/cedar-ui/button';
1415
import { TableBase } from '@/components/cedar-ui/table';
1516
import { toast } from '@aminnausin/cedar-ui';
1617
1718
import LibraryFolderCard from '@/components/cards/data/LibraryFolderCard.vue';
1819
import LibraryCard from '@/components/cards/data/LibraryCard.vue';
1920
import BreadCrumbs from '@/components/pinesUI/BreadCrumbs.vue';
20-
import ButtonText from '@/components/inputs/ButtonText.vue';
2121
import EditFolder from '@/components/forms/EditFolder.vue';
2222
import ModalBase from '@/components/pinesUI/ModalBase.vue';
2323
import useModal from '@/composables/useModal';
@@ -225,12 +225,10 @@ watchEffect(() => {
225225
<p class="font-medium capitalize">Videos: {{ stateLibraryFolders?.reduce((total: number, folder: FolderResource) => total + Number(folder.file_count), 0) }}</p>
226226
</span>
227227
<div class="xs:*:h-8 flex w-full flex-wrap items-center gap-2 *:h-fit">
228-
<ButtonText title="Add New Library" disabled class="hidden">
229-
<template #text>New Library</template>
228+
<ButtonText title="Add New Library" disabled text="New Library" class="xs:flex-initial hidden flex-1">
230229
<template #icon><ProiconsAdd /></template>
231230
</ButtonText>
232-
<ButtonText @click="handleStartScan" :title="'Index Files'">
233-
<template #text>Scan For Changes</template>
231+
<ButtonText @click="handleStartScan" title="Index Files" text="Scan For Changes" class="xs:flex-initial flex-1">
234232
<template #icon><ProiconsSearch /></template>
235233
</ButtonText>
236234
</div>

‎resources/js/components/dashboard/DashboardTaskMenu.vue‎

Lines changed: 0 additions & 48 deletions
This file was deleted.

‎resources/js/components/dashboard/DashboardTasks.vue‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<script setup lang="ts">
22
import type { BreadCrumbItem, TaskStatsResponse } from '@/types/types';
33
import type { TaskResource } from '@/types/resources';
4+
import type { Ref } from 'vue';
45
5-
import { computed, onMounted, onUnmounted, ref, useTemplateRef, type Ref } from 'vue';
6+
import { computed, onMounted, onUnmounted, ref, useTemplateRef } from 'vue';
67
import { cancelTask, deleteSubTask, deleteTask } from '@/service/siteAPI';
78
import { subscribeToDaskboardTasks } from '@/service/wsService';
89
import { useDashboardStore } from '@/stores/DashboardStore';
910
import { useQueryClient } from '@tanstack/vue-query';
1011
import { useAppStore } from '@/stores/AppStore';
1112
import { storeToRefs } from 'pinia';
1213
import { sortObject } from '@/service/sort/baseSort';
14+
import { ButtonText } from '@/components/cedar-ui/button';
1315
import { TableBase } from '@/components/cedar-ui/table';
1416
import { toast } from '@aminnausin/cedar-ui';
1517
16-
import DashboardTaskMenu from '@/components/dashboard/DashboardTaskMenu.vue';
18+
import DashboardTaskMenu from '@/components/menus/DashboardTaskMenu.vue';
1719
import BasePopover from '@/components/pinesUI/BasePopover.vue';
1820
import IconHorizon from '@/components/icons/IconHorizon.vue';
1921
import BreadCrumbs from '@/components/pinesUI/BreadCrumbs.vue';
20-
import ButtonText from '@/components/inputs/ButtonText.vue';
2122
import ModalBase from '@/components/pinesUI/ModalBase.vue';
2223
import TaskCard from '@/components/cards/data/TaskCard.vue';
2324
import useModal from '@/composables/useModal';
@@ -214,21 +215,25 @@ onUnmounted(async () => {
214215
<p class="">Total Tasks: {{ stateTasks.length ?? stateTaskStats?.count_tasks }}</p>
215216
</span>
216217
<div class="xs:*:h-8 flex w-full flex-wrap items-center gap-2 *:h-fit">
217-
<BasePopover popoverClass="w-52! rounded-lg mt-10" :button-attributes="{ title: 'Start New Task' }" ref="taskPopover">
218-
<template #buttonText>New Task</template>
218+
<BasePopover
219+
class="xs:flex-initial flex-1"
220+
popoverClass="w-52! rounded-lg mt-10 "
221+
:button-attributes="{ title: 'Start New Task', text: 'New Task', class: 'xs:flex-initial flex-1 h-full' }"
222+
:button-component="ButtonText"
223+
ref="taskPopover"
224+
>
219225
<template #buttonIcon>
220226
<ProiconsAdd />
221227
</template>
222228
<template #content>
223229
<DashboardTaskMenu @handle-close="taskPopover?.handleClose" />
224230
</template>
225231
</BasePopover>
226-
<ButtonText @click="loadData(true)" title="Refresh Task List">
227-
<template #text>Refresh</template>
228-
<template #icon><ProiconsArrowSync /></template>
232+
<ButtonText @click="loadData(true)" text="Refresh" title="Refresh Task List" class="xs:flex-initial flex-1">
233+
<template #icon><ProiconsArrowSync class="size-4" /></template>
229234
</ButtonText>
230-
<ButtonText :to="'/horizon'" text="Horizon" class="xs:flex-initial flex-1" :title="'Redis task management (Linux/Docker Only)'">
231-
<template #icon><IconHorizon class="aspect-1 h-full" /></template>
235+
<ButtonText :to="'/horizon'" text="Horizon" class="xs:flex-initial flex-1" title="Redis task management (Linux/Docker Only)">
236+
<template #icon><IconHorizon class="size-4" /></template>
232237
</ButtonText>
233238
</div>
234239
</div>

‎resources/js/components/dashboard/DashboardUsers.vue‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,11 @@ import { computed, ref } from 'vue';
88
import { storeToRefs } from 'pinia';
99
import { deleteUser } from '@/service/siteAPI';
1010
import { sortObject } from '@/service/sort/baseSort';
11+
import { ButtonText } from '@/components/cedar-ui/button';
1112
import { TableBase } from '@/components/cedar-ui/table';
1213
import { toast } from '@aminnausin/cedar-ui';
1314
1415
import BreadCrumbs from '@/components/pinesUI/BreadCrumbs.vue';
15-
import ButtonText from '@/components/inputs/ButtonText.vue';
1616
import ModalBase from '@/components/pinesUI/ModalBase.vue';
1717
import UserCard from '@/components/cards/data/UserCard.vue';
1818
import useModal from '@/composables/useModal';
@@ -119,17 +119,21 @@ const loadData = async (refresh: boolean = false) => {
119119
<div class="flex flex-wrap items-center justify-between gap-2">
120120
<BreadCrumbs :bread-crumbs="breadCrumbs" />
121121

122-
<span class="flex gap-2 overflow-clip">
123-
<p class="font-medium capitalize">Users: {{ stateUsers.length }}</p>
124-
<p class="font-medium capitalize">Active: {{ stateActiveSessions ?? 0 }}</p>
122+
<span class="flex gap-2 overflow-clip font-medium capitalize">
123+
<p>Users: {{ stateUsers.length }}</p>
124+
<p>Active: {{ stateActiveSessions ?? 0 }}</p>
125125
</span>
126126
<div class="xs:*:h-8 flex w-full flex-wrap items-center gap-2 *:h-fit">
127-
<ButtonText title="Create new user" @click="toast.add('Success', { type: 'success', description: 'User Created!', life: 3000 })" disabled>
128-
<template #text>New User</template>
127+
<ButtonText
128+
title="Create new user"
129+
@click="toast.add('Success', { type: 'success', description: 'User Created!', life: 3000 })"
130+
class="xs:flex-initial flex-1"
131+
text="New User"
132+
disabled
133+
>
129134
<template #icon><ProiconsAdd /></template>
130135
</ButtonText>
131-
<ButtonText @click="loadData" title="Refresh User List">
132-
<template #text>Refresh</template>
136+
<ButtonText @click="loadData" title="Refresh User List" text="Refresh" class="xs:flex-initial flex-1">
133137
<template #icon><ProiconsArrowSync /></template>
134138
</ButtonText>
135139
</div>

‎resources/js/components/menus/DashboardTaskMenu.vue‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script setup lang="ts">
2+
import { handleStartTask } from '@/service/taskService';
3+
4+
import { ButtonText } from '@/components/cedar-ui/button';
5+
6+
import LucideFolderSearch from '~icons/lucide/folder-search';
7+
import LucideFolderCheck from '~icons/lucide/folder-check';
8+
import LucideFolderTree from '~icons/lucide/folder-tree';
9+
import LucideFolderSync from '~icons/lucide/folder-sync';
10+
11+
withDefaults(defineProps<{ showScanAll?: boolean }>(), { showScanAll: true });
12+
13+
const emit = defineEmits({
14+
handleClose: () => true,
15+
});
16+
17+
const handleClose = (job: 'index' | 'sync' | 'verify' | 'scan' | 'verifyFolders') => {
18+
handleStartTask(job).then(() => emit('handleClose'));
19+
};
20+
</script>
21+
22+
<template>
23+
<section class="grid gap-4">
24+
<h4 class="leading-none font-medium">Start Server Task</h4>
25+
26+
<div class="grid gap-2 *:h-8 dark:*:bg-neutral-900">
27+
<ButtonText title="Scan for Folder Changes" text="Index Files" @click="handleClose('index')">
28+
<template #icon> <LucideFolderSearch class="size-4" /></template>
29+
</ButtonText>
30+
<ButtonText title="Sync Folder With Database" text="Sync Files" @click="handleClose('sync')">
31+
<template #icon> <LucideFolderSync class="size-4" /></template>
32+
</ButtonText>
33+
<ButtonText title="Scan for New Metadata" text="Verify Metadata" @click="handleClose('verify')">
34+
<template #icon> <LucideFolderCheck class="size-4" /></template>
35+
</ButtonText>
36+
37+
<ButtonText title="Scan for New Metadata" text="Verify Folders" @click="handleClose('verifyFolders')">
38+
<template #icon> <LucideFolderCheck class="size-4" /></template>
39+
</ButtonText>
40+
41+
<ButtonText
42+
v-if="showScanAll"
43+
class="text-danger dark:text-foreground-0 dark:bg-danger-3! dark:hocus:bg-danger!"
44+
title="Scan and Index All Files For Metadata"
45+
text="Scan All Files"
46+
@click="handleClose('scan')"
47+
>
48+
<template #icon> <LucideFolderTree class="size-4" /></template>
49+
</ButtonText>
50+
</div>
51+
</section>
52+
</template>

resources/js/components/cards/LibraryCardMenu.vue renamed to resources/js/components/menus/LibraryCardMenu.vue

File renamed without changes.

resources/js/components/cards/LibraryFolderCardMenu.vue renamed to resources/js/components/menus/LibraryFolderCardMenu.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ const props = withDefaults(defineProps<{ handleClosePopover?: () => void }>(), {
3232
<p class="flex-1 text-start">Manage Metadata</p>
3333
<template #icon> <ProiconsLock class="size-4" /></template>
3434
</ButtonText>
35-
<ButtonText class="text-danger dark:text-foreground-0 dark:bg-danger-3! dark:hocus:bg-danger! justify-between" title="Remove From Server" disabled>
35+
<ButtonText class="text-danger dark:text-foreground-0 dark:bg-danger-3! dark:hocus:bg-danger!" title="Remove From Server" disabled>
3636
<p class="flex-1 text-start">Remove Folder</p>
3737
<template #icon> <ProiconsDelete class="size-4" /></template>
3838
</ButtonText>

0 commit comments

Comments
 (0)