- npm updates

- added views and controller coder for reviewer role
- added program logic for publishing a dataset by editor
- added reviewer menu
- adapted routes.ts for additional routes

resources/js/Components/Map/SearchMap.vue

@@ -271,18 +271,14 @@ const handleDrawEventCreated = async (event) => {
 </script>
 
 <template>
-    <SectionMain>
-        <!-- <div class="dark:bg-slate-900 bg-white"> -->
-
+    <SectionMain>        
             <div id="map" class="map-container mt-6 mb-6 rounded-2xl py-12 px-6 text-center dark:bg-slate-900 bg-white">
                 <ZoomControlComponent ref="zoomControl" :mapId="mapId"></ZoomControlComponent>
                 <DrawControlComponent ref="drawControl" :preserve="false" :mapId="mapId" :southWest="southWest"
                     :northEast="northEast">
                 </DrawControlComponent>
-            </div>
-        <!-- </div> -->
-    </SectionMain>
-    <!-- </section> -->
+            </div>   
+    </SectionMain>   
 </template>
 
 

resources/js/Components/NavBar.vue

@@ -20,7 +20,7 @@ import {
     mdiCloud,
     mdiCrop,
     mdiAccountCog,
-    mdiFormatListGroup ,
+    mdiFormatListGroup,
     mdiFormatListNumbered,
     // mdiEmail,
     mdiLogout,
@@ -29,6 +29,7 @@ import {
     mdiViewDashboard,
     mdiMapSearch,
     mdiInformationVariant,
+    mdiGlasses,
 } from '@mdi/js';
 import NavBarItem from '@/Components/NavBarItem.vue';
 import NavBarItemLabel from '@/Components/NavBarItemLabel.vue';
@@ -100,10 +101,9 @@ const showAbout = async () => {
 </script>
 
 <template>
-   
     <nav class="text-base top-0 left-0 right-0 fixed bg-gray-50 h-14 z-40 w-screen transition-position lg:w-auto dark:bg-slate-800"
         :class="{ 'xl:pl-60': props.showBurger == true }">
-        <FirstrunWizard  ref="about"></FirstrunWizard>
+        <FirstrunWizard ref="about"></FirstrunWizard>
         <div class="flex lg:items-stretch" :class="containerMaxW">
             <div class="flex-1 items-stretch flex h-14">
                 <NavBarItem type="flex lg:hidden" @click.prevent="layoutStore.asideMobileToggle()" v-if="props.showBurger">
@@ -113,10 +113,11 @@ const showAbout = async () => {
                     <BaseIcon :path="mdiMenu" size="24" />
                 </NavBarItem>
                 <NavBarItem route-name="apps.dashboard">
-                    <NavBarItemLabel :icon="mdiViewDashboard" label="Dashboard" size="22" is-hover-label-only route-name="apps.dashboard" />
+                    <NavBarItemLabel :icon="mdiViewDashboard" label="Dashboard" size="22" is-hover-label-only
+                        route-name="apps.dashboard" />
                 </NavBarItem>
                 <NavBarItem route-name="apps.map">
-                    <NavBarItemLabel :icon="mdiMapSearch" label="Map" size="22" is-hover-label-only route-name="apps.map" />                    
+                    <NavBarItemLabel :icon="mdiMapSearch" label="Map" size="22" is-hover-label-only route-name="apps.map" />
                 </NavBarItem>
                 <!-- <NavBarItem>
                     <NavBarSearch />
@@ -131,7 +132,7 @@ const showAbout = async () => {
                 :class="[isMenuNavBarActive ? 'block' : 'hidden']">
                 <div
                     class="max-h-screen-menu overflow-y-auto lg:overflow-visible lg:flex lg:items-stretch lg:justify-end lg:ml-auto">
-                    
+
                     <!-- help menu -->
                     <NavBarMenu>
                         <NavBarItemLabel :icon="mdiMenu" label="Help menu" />
@@ -165,13 +166,16 @@ const showAbout = async () => {
                             </NavBarItem>
                             <NavBarItem v-if="userHasRoles(['administrator'])" :route-name="'settings.overview'">
                                 <NavBarItemLabel :icon="mdiFormatListGroup" label="Administration" />
-                            </NavBarItem>  
+                            </NavBarItem>
                             <NavBarItem v-if="userHasRoles(['submitter'])" :route-name="'dataset.list'">
-                                <NavBarItemLabel :icon="mdiFormatListNumbered" label="Submitter Setup" />
-                            </NavBarItem>   
+                                <NavBarItemLabel :icon="mdiFormatListNumbered" label="Submitter Menu" />
+                            </NavBarItem>
                             <NavBarItem v-if="userHasRoles(['editor'])" :route-name="'editor.dataset.list'">
-                                <NavBarItemLabel :icon="mdiFormatListNumbered" label="Editor Setup" />
-                            </NavBarItem>                          
+                                <NavBarItemLabel :icon="mdiFormatListNumbered" label="Editor Menu" />
+                            </NavBarItem>
+                            <NavBarItem v-if="userHasRoles(['reviewer'])" :route-name="'reviewer.dataset.list'">
+                                <NavBarItemLabel :icon="mdiGlasses" label="Reviewer Menu" />
+                            </NavBarItem>
                             <!-- <NavBarItem>
                                 <NavBarItemLabel :icon="mdiEmail" label="Messages" />
                             </NavBarItem> -->
@@ -196,7 +200,7 @@ const showAbout = async () => {
                     </NavBarItem>
                     <NavBarItem is-desktop-icon-only @click="logout">
                         <NavBarItemLabel v-bind:icon="mdiLogout" label="Log out" is-desktop-icon-only />
-                    </NavBarItem>                    
+                    </NavBarItem>
                 </div>
             </div>
         </div>

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

@@ -2,7 +2,7 @@
 // import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
 import { Head, usePage } from '@inertiajs/vue3';
 import { ComputedRef } from 'vue';
-import { mdiSquareEditOutline, mdiAlertBoxOutline, mdiShareVariant } from '@mdi/js';
+import { mdiSquareEditOutline, mdiAlertBoxOutline, mdiShareVariant, mdiBookEdit } from '@mdi/js';
 import { computed } from 'vue';
 import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
 import SectionMain from '@/Components/SectionMain.vue';
@@ -42,16 +42,16 @@ const flash: ComputedRef<any> = computed(() => {
 const getRowClass = (dataset) => {
     // (props.options ? 'select' : props.type)
     let rowclass = '';
-    if (dataset.server_state == 'editor_accepted') {
-        rowclass = 'editor_accepted';
+    if (dataset.server_state == 'accepted') {
+        rowclass = 'bg-accepted';
     } else if (dataset.server_state == 'rejected_reviewer') {
-        rowclass = 'rejected_reviewer';
+        rowclass = 'bg-rejected-reviewer';
     } else if (dataset.server_state == 'reviewed') {
-        rowclass = 'reviewed';
+        rowclass = 'bg-reviewed';
     } else if (dataset.server_state == 'released') {
-        rowclass = 'released';
+        rowclass = 'bg-released';
     } else if (dataset.server_state == 'published') {
-        rowclass = 'released';
+        rowclass = 'bg-published';
     } else {
         rowclass = '';
     }
@@ -77,7 +77,7 @@ const getRowClass = (dataset) => {
             <!-- table -->
             <CardBox class="mb-6" has-table>
                 <div v-if="props.datasets.data.length > 0">
-                    <table class="pure-table">
+                    <table>
                         <thead>
                             <tr>
                                 <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider">
@@ -152,6 +152,12 @@ const getRowClass = (dataset) => {
                                             v-if="can.approve && (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer')"
                                             :route-name="stardust.route('editor.dataset.approve', [dataset.id])"
                                             color="info" :icon="mdiShareVariant" :label="'Approve'" small />
+                                        
+                                        <BaseButton
+                                            v-if="can.publish && (dataset.server_state == 'reviewed')"
+                                            :route-name="stardust.route('editor.dataset.publish', [dataset.id])"
+                                            color="info" :icon="mdiBookEdit" :label="'Publish'" small /> 
+
                                     </BaseButtons>
                                 </td>
                             </tr>
@@ -179,27 +185,3 @@ const getRowClass = (dataset) => {
         </SectionMain>
     </LayoutAuthenticated>
 </template>
-
-<style scoped>
-.pure-table tr.released {
-    /* background-color: greenyellow;    */
-    background-color: rgb(52 211 153);
-    color: gray;
-}
-
-.pure-table tr.editor_accepted {
-    /* background-color: lightblue; */
-    background-color: rgb(125 211 252);
-    color: gray;
-}
-
-.pure-table tr.rejected_reviewer {
-    background-color: orange;
-    color: gray;
-}
-
-.pure-table tr.reviewed {
-    background-color: yellow;
-    color: gray;
-}
-</style>

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

@@ -0,0 +1,102 @@
+<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 FormField from '@/Components/FormField.vue';
+import FormControl from '@/Components/FormControl.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
+import { mdiArrowLeftBoldOutline, mdiReiterate } from '@mdi/js';
+import FormValidationErrors from '@/Components/FormValidationErrors.vue';
+
+const props = 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({
+    server_state: 'published',
+    publisher_name: 'GeoSphere Austria',
+});
+
+const handleSubmit = async (e) => {
+    e.preventDefault();
+    await form.put(stardust.route('editor.dataset.publishUpdate', [props.dataset.id]));
+    // await form.put(stardust.route('editor.dataset.update', [props.dataset.id]));
+};
+</script>
+
+<template>
+    <LayoutAuthenticated>
+
+        <Head title="Publish reviewed dataset" />
+        <SectionMain>
+            <SectionTitleLineWithButton :icon="mdiReiterate" title="Publish reviewed 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="title font-bold">
+                    Title: {{ dataset.main_title }}
+                </div>
+                <!-- <div class="authors">
+                    <span v-for="person in dataset.authors" :key="person.id">
+                        {{ person.name }}
+                    </span>
+                </div> -->
+
+
+                <FormField label="server state" :class="{ 'text-red-400': form.errors.server_state }">
+                    <FormControl v-model="form.server_state" type="text" placeholder="-- server state --"
+                        :is-read-only="true" :error="form.errors.server_state">
+                        <div class="text-red-400 text-sm" v-if="form.errors.server_state">
+                            {{ form.errors.server_state }}
+                        </div>
+                    </FormControl>
+                </FormField>
+                <FormField label="Publisher Name" :class="{ 'text-red-400': form.errors.publisher_name }">
+                    <FormControl v-model="form.publisher_name" placeholder="--publisher name --"
+                        :error="form.errors.publisher_name" is-read-only>
+                        <div class="text-red-400 text-sm" v-if="form.errors.publisher_name">
+                            {{ form.errors.publisher_name }}
+                        </div>
+                    </FormControl>
+                </FormField>
+
+                <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>
+                    <p class="text-lg font-medium mb-2">
+                        Are you sure you want to publish the selected dataset?
+                    </p>
+                    <BaseButtons>
+                        <BaseButton type="submit" color="info" label="Set published"
+                            :class="{ 'opacity-25': form.processing }" :disabled="form.processing" />
+                    </BaseButtons>
+                </template>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>

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

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// import { Head, Link, useForm, usePage } from '@inertiajs/inertia-vue3';
+import { Head, usePage } from '@inertiajs/vue3';
+import { ComputedRef } from 'vue';
+import { mdiAlertBoxOutline, mdiGlasses, mdiReiterate } 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 getRowClass = (dataset) => {
+    // (props.options ? 'select' : props.type)
+    let rowclass = '';
+    if (dataset.server_state == 'approved') {
+        rowclass = 'bg-approved';
+    } else if (dataset.server_state == 'rejected_reviewer') {
+        rowclass = 'bg-rejected-reviewer';
+    } else if (dataset.server_state == 'reviewed') {
+        rowclass = 'bg-reviewed';
+    } else if (dataset.server_state == 'released') {
+        rowclass = 'bg-released';
+    } else if (dataset.server_state == 'published') {
+        rowclass = 'bg-published';
+    } 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>
+                <div v-if="props.datasets.data.length > 0">
+                    <table>
+                        <thead>
+                            <tr>
+                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider">
+                                    <!-- <Sort label="Dataset Title" attribute="title" :search="form.search" /> -->
+                                    Title
+                                </th>
+                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider">
+                                    ID
+                                </th>
+                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider">
+                                    <!-- <Sort label="Email" attribute="email" :search="form.search" /> -->
+                                    State
+                                </th>
+
+                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider">
+                                    Editor
+                                </th>
+                                <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider">
+                                   Remaining Time
+                                </th>
+                                <th scope="col" class="relative px-6 py-3" v-if="can.edit || can.delete">
+                                    <span class="sr-only">Actions</span>
+                                </th>
+                            </tr>
+                        </thead>
+
+                        <tbody>
+                            <tr v-for="dataset in props.datasets.data" :key="dataset.id" :class="[getRowClass(dataset)]">
+                                <td data-label="Login" class="py-4 whitespace-nowrap text-gray-700 dark:text-white">
+                                    <!-- <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> -->
+                                    <div class="text-sm font-medium">{{ dataset.main_title }}</div>
+                                </td>
+                                <td class="py-4 whitespace-nowrap text-gray-700 dark:text-white">
+                                    <div class="text-sm">{{ dataset.id }}</div>
+                                </td>
+                                <td class="py-4 whitespace-nowrap text-gray-700 dark:text-white">
+                                    <div class="text-sm">{{ dataset.server_state }}</div>
+                                </td>
+                              
+                               
+                                <td class="py-4 whitespace-nowrap text-gray-700 dark:text-white">
+                                    <div class="text-sm">{{ dataset.editor?.login }}</div>
+                                </td>
+
+                                <td data-label="modified" class="py-4 whitespace-nowrap text-gray-700 dark:text-white">
+                                    <div class="text-sm" :title="dataset.remaining_time">
+                                        {{ dataset.remaining_time + ' days' }}
+                                    </div>
+                                </td>
+                                <td
+                                    class="py-4 whitespace-nowrap text-right text-sm font-medium text-gray-700 dark:text-white">
+                                    <BaseButtons type="justify-start lg:justify-end" no-wrap>
+                                        <BaseButton v-if="can.review && (dataset.server_state == 'approved')"
+                                            :route-name="stardust.route('reviewer.dataset.review', [dataset.id])"
+                                            color="info" :icon="mdiGlasses" :label="'Review'" small />
+                                        
+                                        <BaseButton
+                                            v-if="can.reject && (dataset.server_state == 'approved')"
+                                            :route-name="stardust.route('reviewer.dataset.reject', [dataset.id])"
+                                            color="info" :icon="mdiReiterate" :label="'Reject'" small />
+                                    </BaseButtons>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+                <div v-else>
+                    <!-- Show warning message if datasets are not defined or empty -->
+                    <div class="bg-yellow-200 text-yellow-800 rounded-md p-4">
+                        <p>No datasets defined.</p>
+                        <!-- You can add more descriptive text here -->
+                    </div>
+                </div>
+
+
+                <!-- <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 />  -->
+                <div class="py-4">
+                    <Pagination v-bind:data="datasets.meta" />
+
+                </div>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>
+

resources/js/Pages/Reviewer/Dataset/Reject.vue

@@ -0,0 +1,94 @@
+<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 FormField from '@/Components/FormField.vue';
+import FormControl from '@/Components/FormControl.vue';
+import BaseButton from '@/Components/BaseButton.vue';
+import BaseButtons from '@/Components/BaseButtons.vue';
+import { stardust } from '@eidellev/adonis-stardust/client';
+import { mdiArrowLeftBoldOutline, mdiReiterate } from '@mdi/js';
+import FormValidationErrors from '@/Components/FormValidationErrors.vue';
+
+const props = 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({
+    server_state: 'rejected_reviewer',
+    reject_reviewer_note: '',
+});
+
+const handleSubmit = async (e) => {
+    e.preventDefault();
+    await form.put(stardust.route('reviewer.dataset.rejectUpdate', [props.dataset.id]));
+    // await form.put(stardust.route('editor.dataset.update', [props.dataset.id]));
+};
+</script>
+
+<template>
+    <LayoutAuthenticated>
+
+        <Head title="Reject approved dataset" />
+        <SectionMain>
+            <SectionTitleLineWithButton :icon="mdiReiterate" title="Reject approved dataset" main>
+                <BaseButton :route-name="stardust.route('reviewer.dataset.list')" :icon="mdiArrowLeftBoldOutline"
+                    label="Back" color="white" rounded-full small />
+            </SectionTitleLineWithButton>
+
+            <CardBox form @submit.prevent="handleSubmit">
+                <FormValidationErrors v-bind:errors="errors" />
+
+
+                <FormField label="server state" :class="{ 'text-red-400': form.errors.server_state }">
+                    <FormControl v-model="form.server_state" type="text" placeholder="-- server state --"
+                        :is-read-only="true" :error="form.errors.server_state">
+                        <div class="text-red-400 text-sm" v-if="form.errors.server_state">
+                            {{ form.errors.server_state }}
+                        </div>
+                    </FormControl>
+                </FormField>
+                <FormField label="reject note" :class="{ 'text-red-400': form.errors.reject_reviewer_note }">
+                    <FormControl v-model="form.reject_reviewer_note" type="textarea"
+                        placeholder="-- reject note for editor --" :error="form.errors.reject_reviewer_note">
+                        <div class="text-red-400 text-sm" v-if="form.errors.reject_reviewer_note">
+                            {{ form.errors.reject_reviewer_note }}
+                        </div>
+                    </FormControl>
+                </FormField>
+
+
+                <!-- <NotificationBar v-if="flash && flash.message" color="warning" :icon="mdiAlertBoxOutline">
+					{{ flash.message }}
+					class="bg-orange-100 border-l-4 border-orange-500 text-orange-700 p-4"
+				</NotificationBar> -->
+                <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="Reject to editor"
+                            :class="{ 'opacity-25': form.processing }" :disabled="form.processing" />
+                    </BaseButtons>
+                </template>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>

resources/js/Pages/Reviewer/Dataset/Review.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
+import SectionMain from '@/Components/SectionMain.vue';
+import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
+import { router, 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, mdiGlasses } from '@mdi/js';
+import FormValidationErrors from '@/Components/FormValidationErrors.vue';
+
+const props = defineProps({
+    dataset: {
+        type: Object,
+        default: () => ({}),
+    },
+    fields: {
+        type: Object,
+        required: true,
+    },
+});
+
+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 router.put(stardust.route('reviewer.dataset.reviewUpdate', [props.dataset.id]));
+    // 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="Review dataset" />
+        <SectionMain>
+            <SectionTitleLineWithButton :icon="mdiGlasses" title="Review approved dataset" main>
+                <BaseButton :route-name="stardust.route('reviewer.dataset.list')" :icon="mdiArrowLeftBoldOutline" label="Back"
+                    color="white" rounded-full small />
+            </SectionTitleLineWithButton>
+            <CardBox form @submit.prevent="handleSubmit">
+                <FormValidationErrors v-bind:errors="errors" />
+
+                <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>
+
+
+                <div class="flex flex-col">
+                    <div class="flex flex-row items-center justify-between  dark:bg-slate-900 bg-gray-200 p-2 mb-2"
+                        v-for="(fieldValue, field) in fields" :key="field">
+
+                        <label :for="field" class="font-bold h-6 mt-3 text-xs leading-8 uppercase">{{ field }}</label>                      
+                        <span class="text-sm text-gray-600" v-html="fieldValue"></span>
+                    </div>
+                </div>
+
+
+               
+
+                <template #footer>
+                    <BaseButtons>
+                        <!-- <BaseButton type="submit" color="info" label="Receive"
+                            :class="{ 'opacity-25': router.processing }" :disabled="form.processing" /> -->
+                        <BaseButton type="submit" color="info" label="Review" />
+                    </BaseButtons>
+                </template>
+            </CardBox>
+        </SectionMain>
+    </LayoutAuthenticated>
+</template>

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

@@ -44,17 +44,17 @@ const getRowClass = (dataset) => {
     // (props.options ? 'select' : props.type)
     let rowclass = '';
     if (dataset.server_state == 'inprogress') {
-        rowclass = 'inprogress';
+        rowclass = 'bg-inprogress';
     } else if (dataset.server_state == 'released') {
-        rowclass = 'released';
-    } else if (dataset.server_state == 'editor_accepted' || dataset.server_state == 'ejected_reviewer') {
-        rowclass = 'editor_accepted';
+        rowclass = 'bg-released';
+    } else if (dataset.server_state == 'editor_accepted' || dataset.server_state == 'rejected_reviewer') {
+        rowclass = 'bg-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';
+        rowclass = 'bg-approved';
+    } else if (dataset.server_state == 'reviewed') {
+        rowclass = 'bg-reviewed';
+    } else if (dataset.server_state == 'rejected_editor') {
+        rowclass = 'bg-rejected-editor';
     } else {
         rowclass = '';
     }
@@ -78,7 +78,7 @@ const getRowClass = (dataset) => {
 
             <!-- table -->
             <CardBox class="mb-6" has-table>
-                <table class="pure-table">
+                <table class="">
                     <thead>
                         <tr>
                             <th scope="col" class="py-3 text-left text-xs font-medium uppercase tracking-wider">
@@ -155,7 +155,7 @@ const getRowClass = (dataset) => {
     </LayoutAuthenticated>
 </template>
 
-<style scoped>
+<style scoped lang="css">
 .pure-table tr.released {
     /* background-color: greenyellow;    */
     background-color: rgb(52 211 153);
@@ -200,7 +200,5 @@ const getRowClass = (dataset) => {
 
 }
 
-.pure-table tr.reviewed {
-    /* padding: 0.8em; */
-    background-color: #ffed4a;
-}</style>
+
+</style>

resources/js/menu.ts

@@ -113,6 +113,25 @@ export default [
             // },
         ],
     },
+    {
+        // route: 'dataset.create',
+        icon: mdiAccountEdit,
+        label: 'Reviewer',
+        roles: ['reviewer'],
+        isOpen: false,
+        children: [
+            {
+                route: 'reviewer.dataset.list',
+                icon: mdiFormatListNumbered,
+                label: 'All my datasets',
+            },
+            // {
+            //     route: 'dataset.create',
+            //     icon: mdiPublish,
+            //     label: 'Create Dataset',
+            // },
+        ],
+    },
     // {
     //     route: 'dataset.create',
     //     icon: mdiDatabasePlus,