ROCKS-30 Fix active tab style on composition list page

unb-libraries · Sep 26, 2024 · 8200c2c · 8200c2c
1 parent b298fd6
commit 8200c2c
Showing 1 changed file with 64 additions and 16 deletions.
diff --git a/app/pages/dashboard/composition/index.vue b/app/pages/dashboard/composition/index.vue
@@ -1,25 +1,45 @@
 <template>
   <NuxtLayout name="dashboard-page">
     <template #actions>
-      <NuxtLink v-if="hasPermission(/^create:term(:composition)?/)" to="/dashboard/composition/create" class="button button-lg button-accent-mid hover:button-accent-light">
+      <NuxtLink
+        v-if="hasPermission(/^create:term(:composition)?/)"
+        to="/dashboard/composition/create"
+        class="button button-lg button-accent-mid hover:button-accent-light"
+      >
         Add term
       </NuxtLink>
     </template>
 
     <div class="space-y-12">
       <nav class="flex flex-row">
-        <NuxtLink :to="`${$route.path}?type=fossil`" class="dark:bg-accent-dark/10 hover:dark:bg-accent-dark/20 w-1/2 py-4 text-center text-lg" :class="{ 'border-accent-mid dark:bg-accent-dark/20 border-b-4': type === `fossil` }">
+        <NuxtLink
+          :to="`${$route.path}?type=fossil`"
+          class="dark:bg-accent-dark/10 hover:dark:bg-accent-dark/20 w-1/2 py-4 text-center text-lg"
+          :class="{ 'border-accent-mid dark:bg-accent-dark/20 border-b-4': type === `fossil` }"
+        >
           Fossil
         </NuxtLink>
-        <NuxtLink :to="`${$route.path}?type=rock`" class="dark:bg-accent-dark/10 hover:dark:bg-accent-dark/20 w-1/2 py-4 text-center text-lg" :class="{ 'border-accent-mid dark:bg-accent-dark/20 border-b-4': type === `details` }">
+        <NuxtLink
+          :to="`${$route.path}?type=rock`"
+          class="dark:bg-accent-dark/10 hover:dark:bg-accent-dark/20 w-1/2 py-4 text-center text-lg"
+          :class="{ 'border-accent-mid dark:bg-accent-dark/20 border-b-4': type === `rock` }"
+        >
           Rock
         </NuxtLink>
       </nav>
     </div>
 
     <div class="relative flex flex-row">
-      <TwFormField label="Search" label-class="sr-only" class="w-full">
-        <TwInputSearch v-model="search" class="input input-text-md w-full" text-wrapper-class="w-full" />
+      <TwFormField
+        label="Search"
+        label-class="sr-only"
+        class="w-full"
+      >
+        <TwInputSearch
+          v-model="search"
+          class="input input-text-md w-full"
+          text-wrapper-class="w-full"
+        />
       </TwFormField>
     </div>
 
@@ -32,28 +52,56 @@
       row-class="table-row"
       selected-row-class="active"
     >
-      <template #label="{ entity: { label, slug} }">
-        <NuxtLink v-if="hasPermission(/^update:term(:composition)?:/)" :to="`/dashboard/composition/${slug}`" class="hover:underline">
+      <template #label="{ entity: { label, slug } }">
+        <NuxtLink
+          v-if="hasPermission(/^update:term(:composition)?:/)"
+          :to="`/dashboard/composition/${slug}`"
+          class="hover:underline"
+        >
           {{ label }}
         </NuxtLink>
       </template>
     </EntityTable>
     <div class="flex w-full flex-row justify-between px-4">
-      <span v-if="list?.total" class="italic">
+      <span
+        v-if="list?.total"
+        class="italic"
+      >
         {{ (page - 1) * pageSize + 1 }} - {{ Math.min(list?.total ?? 0, page * pageSize) }} of {{ pluralize(list?.total ?? 0, `term`, `terms`) }}
       </span>
-      <TwPageIndex :page="page" :total="Math.ceil((list?.total ?? 0) / pageSize)" :size="5" @change="(index) => { page = index }" />
+      <TwPageIndex
+        :page="page"
+        :total="Math.ceil((list?.total ?? 0) / pageSize)"
+        :size="5"
+        @change="(index) => { page = index }"
+      />
     </div>
 
     <template #sidebar>
-      <EntityAdminSidebar v-if="selection.length" :entities="selection">
-        <PvEntityDetails v-if="selection.length === 1" :entity="selection[0]" :fields="schema.map(({ id, label }) => [id, label])" class="space-y-4" label-class="font-bold italic" />
+      <EntityAdminSidebar
+        v-if="selection.length"
+        :entities="selection"
+      >
+        <PvEntityDetails
+          v-if="selection.length === 1"
+          :entity="selection[0]"
+          :fields="schema.map(({ id, label }) => [id, label])"
+          class="space-y-4"
+          label-class="font-bold italic"
+        />
         <template #actions>
           <div class="space-y-2">
-            <button v-if="hasPermission(/^update:term(:composition(:fossil|rock)?)?:/) && selection.length === 1" class="button button-lg button-outline-yellow-light hover:button-yellow-light hover:text-primary w-full">
+            <button
+              v-if="hasPermission(/^update:term(:composition(:fossil|rock)?)?:/) && selection.length === 1"
+              class="button button-lg button-outline-yellow-light hover:button-yellow-light hover:text-primary w-full"
+            >
               Edit{{ selection.length > 1 ? ` ${selection.length} terms` : `` }}
             </button>
-            <button v-if="hasPermission(/^delete:term(:composition(:fossil|rock)?)?:/)" class="button button-lg button-outline-red-dark hover:button-red-dark w-full" @click.stop.prevent="onClickDelete">
+            <button
+              v-if="hasPermission(/^delete:term(:composition(:fossil|rock)?)?:/)"
+              class="button button-lg button-outline-red-dark hover:button-red-dark w-full"
+              @click.stop.prevent="onClickDelete"
+            >
               Delete{{ selection.length > 1 ? ` ${selection.length} terms` : `` }}
             </button>
           </div>
@@ -66,7 +114,7 @@
 
 <script setup lang="tsx">
 import { FilterOperator } from '@unb-libraries/nuxt-layer-entity'
-import { type Composition } from '~/types/composition'
+import type { Composition } from '~/types/composition'
 import { PvEntityDeleteConfirm } from '#components'
 
 definePageMeta({
@@ -111,11 +159,11 @@ const onClickDelete = () => {
 const onRemove = async () => {
   if (selection.value.length === 1) {
     await remove(selection.value[0])
-  } else {
+  }
+  else {
     await removeMany(selection.value)
   }
   selection.value = []
   closeModal()
 }
-
 </script>