- small adaptions for AsideMenuItem.vue, AsideMenuLayer.vue

- new routes editor.dataset.list and editor.dataset.update
- fir functionalities for editor role, suche as listing and receiving released datasets
- npm updates

resources/js/Components/AsideMenuItem.vue

@@ -37,18 +37,13 @@ const styleService = StyleService();
 
 const hasColor = computed(() => props.item && props.item.color);
 
-const isDropdownOpen = ref(false);
+// const isDropdownOpen = ref(false);
 
-const isChildSelected = computed(() => {
-    if (props.item.children && props.item.children.length > 0) {
-        return children.value.some(childItem => stardust.isCurrent(childItem.route));
-    }
-    return false;
-});
-
-// const value = computed({
-//     get: () => props.modelValue,
-//     set: (value) => emit('update:modelValue', value),
+// const isChildSelected = computed(() => {
+//     if (props.item.children && props.item.children.length > 0) {
+//         return children.value.some(childItem => stardust.isCurrent(childItem.route));
+//     }
+//     return false;
 // });
 
 
@@ -154,7 +149,7 @@ const hasRoles = computed(() => {
                 <!-- <li v-for="( child, index ) in  children " :key="index">
                 <AsideMenuItem :item="child" :key="index"> </AsideMenuItem>
             </li> -->
-                <AsideMenuItem v-for="(childItem, index) in props.item.children" :key="index" :item="childItem" />
+                <AsideMenuItem v-for="(childItem, index) in children" :key="index" :item="childItem" />
             </ul>
         </div>
         <!-- <AsideMenuList v-if="hasChildren" :items="item.children"
@@ -171,17 +166,18 @@ const hasRoles = computed(() => {
     cursor: pointer;
 }
 
-/* .menu-item-icon {
-  font-size: 1.5rem;
-  margin-right: 10px;
+.menu-item-icon {
+  font-size: 2.5rem;
+  /* margin-right: 10px; */
 }
 
-.menu-item-label {
+/* .menu-item-label {
   font-size: 1.2rem;
   font-weight: bold;
-}
+} */
 
 .menu-item-dropdown {
-  margin-left: 10px;
-} */
+  /* margin-left: 10px; */
+  padding-left: 0.75rem;
+}
 </style>

resources/js/Components/AsideMenuLayer.vue

@@ -12,7 +12,7 @@ import BaseIcon from '@/Components/BaseIcon.vue';
 
 defineProps({
     menu: {
-        type: Array,
+        type: Array<Object>,
         default: () => [],
     },
 });

resources/js/Pages/Editor/Dataset/Index.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
+import { Head, usePage } from '@inertiajs/vue3';
+import { ComputedRef } from 'vue';
+import { mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline, mdiLockOpen } from '@mdi/js';
+import { computed } from 'vue';
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
+import SectionMain from '@/Components/SectionMain.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import CardBox from '@/Components/CardBox.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import NotificationBar from '@/Components/NotificationBar.vue';
+import Pagination from '@/Components/Admin/Pagination.vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
+
+const props = defineProps({
+    datasets: {
+        type: Object,
+        default: () => ({}),
+    },
+    filters: {
+        type: Object,
+        default: () => ({}),
+    },
+    can: {
+        type: Object,
+        default: () => ({}),
+    },
+    // user: {
+    //     type: Object,
+    //     default: () => ({}),
+    // }
+});
+
+const flash: ComputedRef<any> = computed(() => {
+    // let test = usePage();
+    // console.log(test);
+    return usePage().props.flash;
+});
+
+const validStates = ['inprogress', 'rejected_editor'];
+
+const getRowClass = (dataset) => {
+    // (props.options ? 'select' : props.type)
+    let rowclass = '';
+    if (dataset.server_state == 'editor_accepted') {
+        rowclass = 'editor_accepted';
+    } else if (dataset.server_state == 'rejected_reviewer') {
+        rowclass = 'rejected_reviewer';
+    } else if (dataset.server_state == 'reviewed') {
+        rowclass = 'reviewed';
+    } else if (dataset.server_state == 'released') {
+        rowclass = 'released';
+    } else if (dataset.server_state == 'published') {
+        rowclass = 'released';
+    } else {
+        rowclass = '';
+    }
+    return rowclass;
+};
+
+
+</script>
+
+<template>
+    <LayoutAuthenticated>
+
+        <Head title="Dataset List" />
+        <SectionMain>
+            <!-- <FormValidationErrors v-bind:errors="errors" /> -->
+            <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
+                {{ flash.message }}
+            </NotificationBar>
+            <NotificationBar v-if="flash.warning" color="warning" :icon="mdiAlertBoxOutline">
+                {{ flash.warning }}
+            </NotificationBar>
+
+            <!-- table -->
+            <CardBox class="mb-6" has-table>
+                <table class="pure-table">
+                    <thead>
+                        <tr>
+                            <th>
+                                <!-- <Sort label="Dataset Title" attribute="title" :search="form.search" /> -->
+                                Dataset Title
+                            </th>
+                            <th>Submitter</th>
+                            <th>
+                                <!-- <Sort label="Email" attribute="email" :search="form.search" /> -->
+                            <th>Server State</th>
+                            </th>
+                            <th>Editor</th>
+                            <th>Date of last modification</th>
+                            <th v-if="can.edit || can.delete">Actions</th>
+                        </tr>
+                    </thead>
+
+                    <!-- <th>Dataset Title</th>
+                <th>ID</th>
+                <th>Server State</th>               
+                <th>Editor</th> 
+                <th>Date of last modification</th>             
+                <th></th> -->
+
+                    <tbody>
+                        <tr v-for="dataset in props.datasets.data" :key="dataset.id" :class="getRowClass(dataset)">
+                            <td data-label="Login">
+                                <!-- <Link v-bind:href="stardust.route('user.show', [user.id])"
+                                    class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
+                                {{ user.login }}
+                                </Link> -->
+                                <!-- {{ user.id }} -->
+                                {{ dataset.main_title }}
+                            </td>
+                            <td> {{ dataset.user.login }} </td>
+                            <td>
+                                {{ dataset.server_state }}
+                            </td>
+
+                            <td v-if="dataset.server_state === 'released'">
+                                <small class="text-gray-500 dark:text-slate-400" :title="dataset.server_date_modified">
+                                    Preferred reviewer: {{ dataset.preferred_reviewer }}
+                                </small>
+                            </td>
+                            <td
+                                v-else-if="dataset.server_state === 'editor_accepted' || dataset.server_state === 'rejected_reviewer'">
+                                <small class="text-gray-500 dark:text-slate-400" :title="dataset.server_date_modified">
+                                    In approval by: {{ dataset.editor?.login }}
+                                </small>
+                            </td>
+
+                            <td v-else>
+                                {{ dataset.editor?.login }}
+                            </td>
+
+
+                            <td data-label="Created" class="lg:w-1 whitespace-nowrap">
+                                <small class="text-gray-500 dark:text-slate-400" :title="dataset.server_date_modified">
+                                    {{ dataset.server_date_modified }}
+                                </small>
+                            </td>
+                            <td class="before:hidden lg:w-1 whitespace-nowrap">
+                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                                    <BaseButton
+                                        v-if="can.receive && (dataset.server_state == 'released')"
+                                        :route-name="stardust.route('editor.dataset.receive', [dataset.id])" color="info"
+                                        :icon="mdiSquareEditOutline" :label="'Receive task'" small />   
+                                    <!-- <BaseButton
+                                        v-if="can.edit && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
+                                        :route-name="stardust.route('editor.dataset.edit', [dataset.id])" color="info"
+                                        :icon="mdiSquareEditOutline" :label="'Edit'" small />                                    -->
+                                </BaseButtons>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+                <div class="py-4">
+                    <Pagination v-bind:data="datasets.meta" />
+
+                </div>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>
+
+<style scoped>
+.pure-table tr.released {
+    background-color: greenyellow;
+    color: gray;
+}
+
+.pure-table tr.editor_accepted {
+    padding: 0.8em;
+    background-color: lightblue;
+    color: gray;
+}
+
+.pure-table tr.rejected_reviewer {
+    padding: 0.8em;
+    background-color: orange;
+    color: gray;
+}
+
+.pure-table tr.reviewed {
+    /* padding: 0.8em; */
+    background-color: yellow;
+    color: gray;
+}
+</style>

resources/js/Pages/Editor/Dataset/Receive.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
+import SectionMain from '@/Components/SectionMain.vue';
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+import { useForm, Head, usePage } from '@inertiajs/vue3';
+import { computed, Ref } from 'vue';
+import CardBox from '@/Components/CardBox.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
+import { mdiArrowLeftBoldOutline, mdiLockOpen } from '@mdi/js';
+import FormValidationErrors from '@/Components/FormValidationErrors.vue';
+
+defineProps({
+    dataset: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const flash: Ref<any> = computed(() => {
+    return usePage().props.flash;
+});
+const errors: Ref<any> = computed(() => {
+    return usePage().props.errors;
+});
+
+const form = useForm({
+    preferred_reviewer: '',
+    preferred_reviewer_email: '',
+    preferation: 'yes_preferation',
+
+    // preferation: '',
+    // isPreferationRequired: false,
+});
+
+
+// const isPreferationRequired = computed(() => form.preferation === 'yes_preferation');
+
+const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    // await form.put(stardust.route('dataset.releaseUpdate', [props.dataset.id]));
+    // // await form.put(stardust.route('editor.dataset.update', [props.dataset.id]));
+};
+</script>
+
+<template>
+    <LayoutAuthenticated>
+
+        <Head title="Receive dataset" />
+        <SectionMain>
+            <SectionTitleLineWithButton :icon="mdiLockOpen" title="Receive released dataset" main>
+                <BaseButton :route-name="stardust.route('editor.dataset.list')" :icon="mdiArrowLeftBoldOutline" label="Back"
+                    color="white" rounded-full small />
+            </SectionTitleLineWithButton>
+            <CardBox form @submit.prevent="handleSubmit">
+                <FormValidationErrors v-bind:errors="errors" />
+
+
+
+
+                <!-- <div class="flex flex-col md:flex-row items-center"> -->
+                    <div class="w-full">
+                        <label class="block font-bold mb-2" for="owner">Submitter:</label>
+                        <div class="w-full p-2 rounded-md">{{ dataset.user.login }}</div>
+                    </div>
+                    <div class="w-full">
+                        <label class="block font-bold mb-2" for="title">Dataset title:</label>
+                        <div class="w-full p-2 rounded-md" v-if="dataset.main_title">
+                            {{ dataset.main_title }}
+                        </div>
+                        <div class="w-full p-2 rounded-md" v-else>
+                            No title available
+                        </div>
+                    </div>
+                    <div class="w-full">
+                        <label class="block font-bold mb-2" for="title">Dataset abstract:</label>
+                        <div class="w-full p-2 rounded-md" v-if="dataset.main_abstract">
+                            {{ dataset.main_abstract }}
+                        </div>
+                        <div class="w-full p-2 rounded-md" v-else>
+                            No abstract available
+                        </div>
+                    </div>
+                <!-- </div> -->
+
+
+                <div v-if="flash && flash.warning" class="flex flex-col mt-6 animate-fade-in">
+                    <div class="bg-yellow-500 border-l-4 border-orange-400 text-white p-4" role="alert">
+                        <p class="font-bold">Be Warned</p>
+                        <p>{{ flash.warning }}</p>
+                    </div>
+                </div>
+
+                <template #footer>
+                    <BaseButtons>
+                        <!-- <BaseButton type="submit" color="info" label="Receive"
+                            :class="{ 'opacity-25': form.processing }" :disabled="form.processing" /> -->
+                    </BaseButtons>
+                </template>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>

resources/js/Pages/Submitter/Dataset/Index.vue

@@ -6,13 +6,11 @@ import { mdiSquareEditOutline, mdiTrashCan, mdiAlertBoxOutline, mdiLockOpen } fr
 import { computed } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
-// import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
 import BaseButton from '@/Components/BaseButton.vue';
 import CardBox from '@/Components/CardBox.vue';
 import BaseButtons from '@/Components/BaseButtons.vue';
 import NotificationBar from '@/Components/NotificationBar.vue';
 import Pagination from '@/Components/Admin/Pagination.vue';
-// import Sort from '@/Components/Admin/Sort.vue';
 import { stardust } from '@eidellev/adonis-stardust/client';
 
 const props = defineProps({
@@ -34,38 +32,41 @@ const props = defineProps({
     // }
 });
 
-// const search = computed(() => {
-// 	return props.filters.search;
-// });
-
 const flash: ComputedRef<any> = computed(() => {
     // let test = usePage();
     // console.log(test);
     return usePage().props.flash;
 });
 
-// const errors: ComputedRef<any> = computed(() => {
-//     return usePage().props.errors;
-// });
+const validStates = ['inprogress', 'rejected_editor'];
 
-// const form = useForm({
-//     search: props.filters.search,
-// });
+const getRowClass = (dataset) => {
+    // (props.options ? 'select' : props.type)
+    let rowclass = '';
+    if (dataset.server_state == 'inprogress') {
+        rowclass = 'inprogress';
+    } else if (dataset.server_state == 'released') {
+        rowclass = 'released';
+    } else if (dataset.server_state == 'editor_accepted' || dataset.server_state == 'ejected_reviewer') {
+        rowclass = 'editor_accepted';
+    } else if (dataset.server_state == 'approved') {
+        rowclass = 'approved';
+    } else if (dataset.server_state == 'eviewed') {
+        rowclass = 'eviewed';
+    } else if (dataset.server_state == 'ejected_editor') {
+        rowclass = 'ejected_editor';
+    } else {
+        rowclass = '';
+    }
+    return rowclass;
+};
 
-// const formDelete = useForm({});
-
-// async function destroy(id) {
-// const destroy = async (id) => {
-//     // if (confirm('Are you sure you want to delete?')) {
-//     //     await formDelete.delete(stardust.route('dataset.destroy', [id]));
-//     // }
-// };
 </script>
 
 <template>
     <LayoutAuthenticated>
 
-        <Head title="Submit Dataset" />
+        <Head title="Dataset List" />
         <SectionMain>
             <!-- <FormValidationErrors v-bind:errors="errors" /> -->
             <NotificationBar v-if="flash.message" color="success" :icon="mdiAlertBoxOutline">
@@ -77,7 +78,7 @@ const flash: ComputedRef<any> = computed(() => {
 
             <!-- table -->
             <CardBox class="mb-6" has-table>
-                <table>
+                <table class="pure-table">
                     <thead>
                         <tr>
                             <th>
@@ -94,7 +95,7 @@ const flash: ComputedRef<any> = computed(() => {
                     </thead>
 
                     <tbody>
-                        <tr v-for="dataset in props.datasets.data" :key="dataset.id">
+                        <tr v-for="dataset in props.datasets.data" :key="dataset.id" :class="getRowClass(dataset)">
                             <td data-label="Login">
                                 <!-- <Link v-bind:href="stardust.route('user.show', [user.id])"
                                     class="no-underline hover:underline text-cyan-600 dark:text-cyan-400">
@@ -108,19 +109,19 @@ const flash: ComputedRef<any> = computed(() => {
                             </td>
 
                             <td data-label="Created" class="lg:w-1 whitespace-nowrap">
-                                <small class="text-gray-500 dark:text-slate-400" :title="dataset.server_date_modified">{{
-                                    dataset.updated_at }}</small>
+                                <small class="text-gray-500 dark:text-slate-400" :title="dataset.server_date_modified">
+                                    {{ dataset.server_date_modified }}
+                                </small>
                             </td>
-                            <td v-if="can.edit || can.delete" class="before:hidden lg:w-1 whitespace-nowrap">
-                                <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                            <td class="before:hidden lg:w-1 whitespace-nowrap">
+                                <BaseButtons v-if="validStates.includes(dataset.server_state)"
+                                    type="justify-start lg:justify-end" no-wrap>
                                     <!-- release created dataset -->
                                     <BaseButton v-if="can.edit"
                                         :route-name="stardust.route('dataset.release', [dataset.id])" color="info"
                                         :icon="mdiLockOpen" :label="'Release'" small />
-                                    <!-- && (dataset.server_state === 'inprogress' || dataset.server_state === 'rejected_editor')"   -->
-                                    <BaseButton :route-name="stardust.route('dataset.edit', [dataset.id])"
+                                    <BaseButton v-if="can.edit" :route-name="stardust.route('dataset.edit', [dataset.id])"
                                         color="info" :icon="mdiSquareEditOutline" :label="'Edit'" small />
-                                    <!-- @click="destroy(dataset.id)" -->
                                     <BaseButton v-if="can.delete" color="danger"
                                         :route-name="stardust.route('dataset.delete', [dataset.id])" :icon="mdiTrashCan"
                                         small />
@@ -149,3 +150,51 @@ const flash: ComputedRef<any> = computed(() => {
         </SectionMain>
     </LayoutAuthenticated>
 </template>
+
+<style scoped>
+.pure-table tr.inprogress {
+    padding: 0.8em;
+    background-color: paleturquoise;
+    color: gray;
+}
+
+.pure-table tr.released {
+    background-color: greenyellow;
+    color: gray;
+}
+
+.pure-table tr.editor_accepted {
+    padding: 0.8em;
+    background-color: lightblue;
+    color: gray;
+}
+
+.pure-table tr.rejected_reviewer {
+    padding: 0.8em;
+    background-color: orange;
+    color: gray;
+}
+
+.pure-table tr.rejected_editor {
+    /* padding: 0.8em; */
+    background-color: orange;
+    color: gray;
+}
+
+.pure-table tr.reviewed {
+    /* padding: 0.8em; */
+    background-color: yellow;
+    color: gray;
+}
+
+.pure-table tr.approved {
+    /* padding: 0.8em; */
+    background-color: rgb(86, 86, 241);
+    color: whitesmoke;
+
+}
+
+.pure-table tr.reviewed {
+    /* padding: 0.8em; */
+    background-color: #ffed4a;
+}</style>

resources/js/menu.ts

@@ -1,4 +1,13 @@
-import { mdiMonitor, mdiGithub, mdiAccountEye, mdiAccountGroup, mdiDatabasePlus } from '@mdi/js';
+import {
+    mdiMonitor,
+    mdiGithub,
+    mdiAccountEye,
+    mdiAccountGroup,
+    mdiAccountEdit,
+    mdiPublish,
+    mdiAccountArrowUp,
+    mdiFormatListNumbered,
+} from '@mdi/js';
 
 export default [
     {
@@ -36,23 +45,42 @@ export default [
     },
     {
         // route: 'dataset.create',
-        icon: mdiDatabasePlus,
+        icon: mdiAccountArrowUp,
         label: 'Submitter',
         roles: ['submitter'],
         isOpen: false,
         children: [
             {
                 route: 'dataset.list',
-                icon: mdiDatabasePlus,
+                icon: mdiFormatListNumbered,
                 label: 'All my datasets',
             },
             {
                 route: 'dataset.create',
-                icon: mdiDatabasePlus,
+                icon: mdiPublish,
                 label: 'Create Dataset',
             },
         ],
     },
+    {
+        // route: 'dataset.create',
+        icon: mdiAccountEdit,
+        label: 'Editor',
+        roles: ['editor'],
+        isOpen: false,
+        children: [
+            {
+                route: 'editor.dataset.list',
+                icon: mdiFormatListNumbered,
+                label: 'All my datasets',
+            },
+            // {
+            //     route: 'dataset.create',
+            //     icon: mdiPublish,
+            //     label: 'Create Dataset',
+            // },
+        ],
+    },
     // {
     //     route: 'dataset.create',
     //     icon: mdiDatabasePlus,