add shared reports section in the frontend

solidtime-io · Nov 3, 2024 · e18ca79 · e18ca79
1 parent 875403b
commit e18ca79
Show file tree

Hide file tree

Showing 17 changed files with 1,153 additions and 29 deletions.
diff --git a/resources/js/Components/Common/Report/ReportCreateModal.vue b/resources/js/Components/Common/Report/ReportCreateModal.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import TextInput from '../../../packages/ui/src/Input/TextInput.vue';
+import SecondaryButton from '../../../packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import { ref } from 'vue';
+import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
+import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
+import type {
+    CreateReportBody,
+    CreateReportBodyProperties,
+} from '@/packages/api/src';
+import { useMutation } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api } from '@/packages/api/src';
+import { Checkbox } from '@/packages/ui/src';
+import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
+import { useNotificationsStore } from '@/utils/notification';
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+
+const createReportMutation = useMutation({
+    mutationFn: async (report: CreateReportBody) => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - create report');
+        }
+        return await api.createReport(report, {
+            params: {
+                organization: organizationId,
+            },
+        });
+    },
+});
+
+const props = defineProps<{
+    properties: CreateReportBodyProperties;
+}>();
+
+const report = ref<CreateReportBody>({
+    name: '',
+    description: '',
+    is_public: false,
+    public_until: null,
+    properties: {},
+});
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+async function submit() {
+    report.value.properties = { ...props.properties };
+    await handleApiRequestNotifications(
+        () => createReportMutation.mutateAsync(report.value),
+        'Success',
+        'Error',
+        () => {
+            report.value = {
+                name: '',
+                description: '',
+                is_public: false,
+                public_until: null,
+                properties: {},
+            };
+            show.value = false;
+        }
+    );
+}
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Report </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="items-center space-y-4 w-full">
+                <div class="w-full">
+                    <InputLabel for="name" value="Name" />
+                    <TextInput
+                        id="name"
+                        class="mt-1.5 w-full"
+                        v-model="report.name"></TextInput>
+                </div>
+                <div>
+                    <InputLabel for="description" value="Description" />
+                    <TextInput
+                        id="description"
+                        class="mt-1.5 w-full"
+                        v-model="report.description"></TextInput>
+                </div>
+                <InputLabel value="Visibility" />
+                <div class="flex items-center space-x-12">
+                    <div class="flex items-center space-x-2 px-2 py-3">
+                        <Checkbox
+                            v-model:checked="report.is_public"
+                            id="is_public"></Checkbox>
+                        <InputLabel for="is_public" value="Public" />
+                    </div>
+                    <div
+                        v-if="report.is_public"
+                        class="flex items-center space-x-4">
+                        <InputLabel for="public_until" value="Expires at" />
+                        <DatePicker id="public_until"></DatePicker>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Create Report
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Report/ReportEditModal.vue b/resources/js/Components/Common/Report/ReportEditModal.vue
@@ -0,0 +1,139 @@
+<script setup lang="ts">
+import TextInput from '../../../packages/ui/src/Input/TextInput.vue';
+import SecondaryButton from '../../../packages/ui/src/Buttons/SecondaryButton.vue';
+import DialogModal from '@/packages/ui/src/DialogModal.vue';
+import { ref, watch } from 'vue';
+import PrimaryButton from '../../../packages/ui/src/Buttons/PrimaryButton.vue';
+import InputLabel from '../../../packages/ui/src/Input/InputLabel.vue';
+import type { UpdateReportBody } from '@/packages/api/src';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import { api } from '@/packages/api/src';
+import { Checkbox } from '@/packages/ui/src';
+import DatePicker from '@/packages/ui/src/Input/DatePicker.vue';
+import { useNotificationsStore } from '@/utils/notification';
+import type { Report } from '@/packages/api/src';
+
+const show = defineModel('show', { default: false });
+const saving = ref(false);
+const queryClient = useQueryClient();
+
+const updateReportMutation = useMutation({
+    mutationFn: async (report: UpdateReportBody) => {
+        const organizationId = getCurrentOrganizationId();
+        if (organizationId === null) {
+            throw new Error('No current organization id - update report');
+        }
+        return await api.updateReport(report, {
+            params: {
+                organization: organizationId,
+                report: props.originalReport.id,
+            },
+        });
+    },
+    onSuccess: () => {
+        queryClient.invalidateQueries({
+            queryKey: ['reports'],
+        });
+    },
+});
+
+const props = defineProps<{
+    originalReport: Report;
+}>();
+
+const report = ref<UpdateReportBody>({
+    name: props.originalReport.name,
+    description: props.originalReport.description,
+    is_public: props.originalReport.is_public,
+    public_until: props.originalReport.public_until,
+});
+
+watch(
+    () => props.originalReport,
+    () => {
+        report.value = {
+            name: props.originalReport.name,
+            description: props.originalReport.description,
+            is_public: props.originalReport.is_public,
+            public_until: props.originalReport.public_until,
+        };
+    }
+);
+
+const { handleApiRequestNotifications } = useNotificationsStore();
+
+async function submit() {
+    await handleApiRequestNotifications(
+        () => updateReportMutation.mutateAsync(report.value),
+        'Success',
+        'Error',
+        () => {
+            report.value = {
+                name: '',
+                description: '',
+                is_public: false,
+                public_until: null,
+                properties: {},
+            };
+            show.value = false;
+        }
+    );
+}
+</script>
+
+<template>
+    <DialogModal closeable :show="show" @close="show = false">
+        <template #title>
+            <div class="flex space-x-2">
+                <span> Create Report </span>
+            </div>
+        </template>
+
+        <template #content>
+            <div class="items-center space-y-4 w-full">
+                <div class="w-full">
+                    <InputLabel for="name" value="Name" />
+                    <TextInput
+                        id="name"
+                        class="mt-1.5 w-full"
+                        v-model="report.name"></TextInput>
+                </div>
+                <div>
+                    <InputLabel for="description" value="Description" />
+                    <TextInput
+                        id="description"
+                        class="mt-1.5 w-full"
+                        v-model="report.description"></TextInput>
+                </div>
+                <InputLabel value="Visibility" />
+                <div class="flex items-center space-x-12">
+                    <div class="flex items-center space-x-2 px-2 py-3">
+                        <Checkbox
+                            v-model:checked="report.is_public"
+                            id="is_public"></Checkbox>
+                        <InputLabel for="is_public" value="Public" />
+                    </div>
+                    <div
+                        v-if="report.is_public"
+                        class="flex items-center space-x-4">
+                        <InputLabel for="public_until" value="Expires at" />
+                        <DatePicker id="public_until"></DatePicker>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <SecondaryButton @click="show = false"> Cancel</SecondaryButton>
+            <PrimaryButton
+                class="ms-3"
+                :class="{ 'opacity-25': saving }"
+                :disabled="saving"
+                @click="submit">
+                Update Report
+            </PrimaryButton>
+        </template>
+    </DialogModal>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Report/ReportMoreOptionsDropdown.vue b/resources/js/Components/Common/Report/ReportMoreOptionsDropdown.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
+import type { Report } from '@/packages/api/src';
+import MoreOptionsDropdown from '@/packages/ui/src/MoreOptionsDropdown.vue';
+import { canDeleteReport, canUpdateReport } from '@/utils/permissions';
+const emit = defineEmits<{
+    delete: [];
+    edit: [];
+    archive: [];
+}>();
+const props = defineProps<{
+    report: Report;
+}>();
+</script>
+
+<template>
+    <MoreOptionsDropdown :label="'Actions for Project ' + props.report.name">
+        <div class="min-w-[150px]">
+            <button
+                @click.prevent="emit('edit')"
+                v-if="canUpdateReport()"
+                :aria-label="'Edit Report ' + props.report.name"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
+            </button>
+            <button
+                @click.prevent="emit('delete')"
+                :aria-label="'Delete Report ' + props.report.name"
+                v-if="canDeleteReport()"
+                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </div>
+    </MoreOptionsDropdown>
+</template>
+
+<style scoped></style>
diff --git a/resources/js/Components/Common/Report/ReportTable.vue b/resources/js/Components/Common/Report/ReportTable.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import SecondaryButton from '@/packages/ui/src/Buttons/SecondaryButton.vue';
+import { FolderPlusIcon } from '@heroicons/vue/24/solid';
+import { PlusIcon } from '@heroicons/vue/16/solid';
+import { computed } from 'vue';
+import { canCreateProjects } from '@/utils/permissions';
+import type { Report } from '@/packages/api/src';
+import ReportTableHeading from '@/Components/Common/Report/ReportTableHeading.vue';
+import ReportTableRow from '@/Components/Common/Report/ReportTableRow.vue';
+import { router } from '@inertiajs/vue3';
+
+defineProps<{
+    reports: Report[];
+}>();
+
+const gridTemplate = computed(() => {
+    return `grid-template-columns: minmax(150px, auto) minmax(250px, 1fr) minmax(140px, auto) minmax(130px, auto) 80px;`;
+});
+</script>
+
+<template>
+    <div class="flow-root max-w-[100vw] overflow-x-auto">
+        <div class="inline-block min-w-full align-middle">
+            <div
+                data-testid="report_table"
+                class="grid min-w-full"
+                :style="gridTemplate">
+                <ReportTableHeading></ReportTableHeading>
+                <div
+                    class="col-span-5 py-24 text-center"
+                    v-if="reports.length === 0">
+                    <FolderPlusIcon
+                        class="w-8 text-icon-default inline pb-2"></FolderPlusIcon>
+                    <h3 class="text-white font-semibold">
+                        No shared reports found
+                    </h3>
+                    <p class="pb-5" v-if="canCreateProjects()">
+                        Create your first project now!
+                    </p>
+                    <SecondaryButton
+                        @click="router.visit(route('reporting'))"
+                        :icon="PlusIcon"
+                        >Go to the overview to create a report
+                    </SecondaryButton>
+                </div>
+                <template v-for="report in reports" :key="report.id">
+                    <ReportTableRow :report="report"></ReportTableRow>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Components/Common/Report/ReportTableHeading.vue b/resources/js/Components/Common/Report/ReportTableHeading.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import TableHeading from '@/Components/Common/TableHeading.vue';
+</script>
+
+<template>
+    <TableHeading>
+        <div
+            class="py-1.5 pr-3 text-left font-semibold text-white pl-4 sm:pl-6 lg:pl-8 3xl:pl-12">
+            Name
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Description
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Visibility
+        </div>
+        <div class="px-3 py-1.5 text-left font-semibold text-white">
+            Public URL
+        </div>
+        <div class="relative py-1.5 pl-3 pr-4 sm:pr-6 lg:pr-8 3xl:pr-12">
+            <span class="sr-only">Edit</span>
+        </div>
+    </TableHeading>
+</template>
+
+<style scoped></style>