From 11987f0f48928ae6160c62220ecb621a2b49c118 Mon Sep 17 00:00:00 2001 From: jnzioka <nziokajohn254@gmail.com> Date: Fri, 12 Jan 2024 20:58:19 +0300 Subject: [PATCH] cleanup --- .../Dashboard/BallotController.php | 3 +- .../Dashboard/Questions/Partials/Create.vue | 6 +- .../Partials/CreateUpdateQuestionForm.vue | 4 +- main/resources/js/Pages/Nav.vue | 64 +++++++++++++++++++ 4 files changed, 71 insertions(+), 6 deletions(-) create mode 100644 main/resources/js/Pages/Nav.vue diff --git a/main/app/Http/Controllers/Dashboard/BallotController.php b/main/app/Http/Controllers/Dashboard/BallotController.php index 21f3f0d..5961e69 100755 --- a/main/app/Http/Controllers/Dashboard/BallotController.php +++ b/main/app/Http/Controllers/Dashboard/BallotController.php @@ -275,7 +275,8 @@ public function createQuestion(Request $request, Ballot $ballot) $response = Gate::inspect('create', Question::class); if ($response->allowed()) { $crumbs = [ - ['label' => 'Questions', 'link' => route('dashboard.ballots.index')], + ['label' => 'Ballot', 'link' => route('dashboard.ballots.index',['ballot'=> $ballot->hash])], + ['label' => 'View Ballot', 'link' => route('dashboard.ballots.view',['ballot'=> $ballot->hash])], ['label' => 'Create Question', 'link' => route('dashboard.ballots.questions.create', ['ballot' => $ballot->hash])], ]; return Inertia::modal('Dashboard/Questions/Partials/Create') diff --git a/main/resources/js/Pages/Dashboard/Questions/Partials/Create.vue b/main/resources/js/Pages/Dashboard/Questions/Partials/Create.vue index 2bf8cb0..e0e0bf9 100644 --- a/main/resources/js/Pages/Dashboard/Questions/Partials/Create.vue +++ b/main/resources/js/Pages/Dashboard/Questions/Partials/Create.vue @@ -2,7 +2,7 @@ import BallotData = App.DataTransferObjects.BallotData; import ModalRoute from "@/Components/ModalRoute.vue"; import CreateUpdateQuestionForm from "@/Pages/Dashboard/Questions/Partials/CreateUpdateQuestionForm.vue"; -//import Nav from "@/Pages/Nav.vue"; +import Nav from "@/Pages/Nav.vue"; const props = defineProps<{ ballot: BallotData; @@ -15,9 +15,9 @@ const props = defineProps<{ <template> <ModalRoute> <div class="flex flex-col"> - <!-- <div class="bg-gray-50 p-6 dark:bg-gray-900"> + <div class="bg-gray-50 p-6 dark:bg-gray-900"> <Nav :crumbs="props.crumbs"/> - </div> --> + </div> <div class="max-w-7xl space-y-6 p-6"> <CreateUpdateQuestionForm diff --git a/main/resources/js/Pages/Dashboard/Questions/Partials/CreateUpdateQuestionForm.vue b/main/resources/js/Pages/Dashboard/Questions/Partials/CreateUpdateQuestionForm.vue index f01b788..acea293 100644 --- a/main/resources/js/Pages/Dashboard/Questions/Partials/CreateUpdateQuestionForm.vue +++ b/main/resources/js/Pages/Dashboard/Questions/Partials/CreateUpdateQuestionForm.vue @@ -24,8 +24,8 @@ </ListboxLabel> <div class="relative flex flex-1 mt-2"> <ListboxButton - class="relative w-full cursor-default rounded-md bg-primary-50 dark:bg-gray-900 py-1.5 pl-3 pr-10 text-left text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus:ring-2 focus:ring-sky-600 dark:focus:ring-sky-700 sm:text-sm sm:leading-6"> - <span class="block truncate">{{ ballot.title }}</span> + class="relative w-full cursor-default rounded-md bg-primary-50 dark:bg-gray-900 py-1.5 pl-3 pr-10 text-left text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:outline-none focus:ring-2 focus:ring-sky-600 dark:focus:ring-sky-700 sm:text-sm sm:leading-6"> + <span class="">{{ ballot.title }}</span> <span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> <ChevronUpDownIcon class="w-5 h-5 text-gray-400" aria-hidden="true"/> </span> diff --git a/main/resources/js/Pages/Nav.vue b/main/resources/js/Pages/Nav.vue new file mode 100644 index 0000000..5c9eac1 --- /dev/null +++ b/main/resources/js/Pages/Nav.vue @@ -0,0 +1,64 @@ +<template> + <div class="top-0 z-30 lg:border-teal-light-300"> + <div class='container relative'> + <div class="flex flex-row justify-between gap-4 flex-nowrap"> + <nav class="flex overflow-x-auto" aria-label="Breadcrumb"> + <ol role="list" class="flex space-x-0"> + <li class="flex"> + <div class="flex items-center"> + <Link :href="route('dashboard.home')" + class="flex flex-row items-center text-white hover:text-yellow-400"> + Dashboard + </Link> + </div> + </li> + <li v-show="(crumbsLength >= 1)" + v-for="(crumb, key) in crumbs" + class="flex"> + <div v-if="!(crumbsLength-1 == key)" class="flex items-center"> + <svg class="flex-shrink-0 w-6 h-full text-gray-700" viewBox="0 0 24 44" + preserveAspectRatio="none" fill="currentColor" + xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> + <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"/> + </svg> + <a :href="crumb.link" v-if="crumb.external === true" + class="inline-block ml-4 text-lg font-medium text-white hover:text-yellow-400 whitespace-nowrap"> + {{ crumb.label }} + </a> + <Link :href="crumb.link" v-else + class="inline-block ml-4 text-lg font-medium text-white hover:text-yellow-400 whitespace-nowrap"> + {{ crumb.label }} + </Link> + </div> + <div v-if="(crumbsLength-1 == key)" class="flex items-center"> + <svg class="flex-shrink-0 w-6 h-full text-gray-700" viewBox="0 0 24 44" + preserveAspectRatio="none" fill="currentColor" + xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> + <path d="M.293 0l22 22-22 22h1.414l22-22-22-22H.293z"/> + </svg> + <span + class="inline-block ml-4 text-lg font-medium text-teal-200 whitespace-nowrap"> + {{ crumb.label }} + </span> + </div> + </li> + </ol> + </nav> + </div> + </div> + + </div> +</template> + +<script lang="ts" setup> +import {Link} from '@inertiajs/vue3'; +import {computed} from "vue"; + + +const props = withDefaults( + defineProps<{ + crumbs: [] + }>(), {}); +let crumbsLength = computed<number>(() => props.crumbs?.length); + +</script> -- GitLab