fix(app): resolve Bucket A/C/D lint items (trivial / style / Vuetify class)

WS-3 session 1b-ii Task 4 (audit Buckets A, C, D — 26 items resolved this commit; 24 indent items in useTimeSlotDropdown.ts remain — see deviations). Bucket A — Trivial fixes (12 items resolved): - A.1: second-pass eslint --fix on App.vue resolved 4 multi-attribute warnings. AppKpiCard / PortalLayout / PublicLayout lines-around-comment items were attempted via blank-line addition, but that introduced an equal number of vue/block-tag-newline errors (the rules conflict at the SFC <script>-tag boundary). The blank-line additions were reverted; net-zero, the 3 items remain for a 1b-iii .eslintrc.cjs override decision. - A.3: 6 unused-imports / unused-vars manual deletes: * OrganisationSwitcher.vue: removed orphan toggleMenu() function * CreateShiftDialog.vue: removed unused 'scenario' from destructure * pages/events/[id]/time-slots/index.vue: removed unused 'event' slot scope binding (template <#default="{ event }"> → <#default>) * pages/organisation/companies.vue: removed unused authStore declaration + import * pages/platform/activity-log/index.vue: removed unused search/searchDebounced pair * PersonDetailPanel.vue:77: removed redundant single-statement if-braces (curly autofix that the original pass didn't reach) Bucket C — Style preference (8 items resolved): - DismissFailureDialog.vue:43: collapsed two consecutive `if cond return false` branches into `return !(cond)` - FormFailureDetail.vue:44: replaced `void clipboard.writeText(...)` with `clipboard.writeText(...).catch(() => {})` — fire-and-forget with silent rejection (the no-void rule wants the void operator gone; .catch() handles it semantically). - AssignShiftDialog.vue:40-46: hasOverlapWarning collapsed from always-false branching to `computed(() => false)` (the early-return was dead code; backend enforces the constraint). - SectionsShiftsPanel.vue:333 + registration-fields.vue:335: rewrote `:delay-on-touch-only="true"` to attribute-shorthand `delay-on-touch-only`. - AssignPersonDialog.vue:120-128: collapsed two `if outer { if inner ... }` pairs into single `if (outer && inner)` form (sonarjs/no-collapsible-if). - useImpersonationStore.ts:99-104: collapsed the same nested-if pattern into `if (!data.data.active && state.value)`. Bucket D — Vuetify utility class rename (5 items, 3 files): - ml-1 → ms-1 (PersonDetailPanel:271, SectionsShiftsPanel:357, AssignPersonDialog:496) - pl-4 → ps-4 (AssignPersonDialog:457) - ml-auto → ms-auto (AssignPersonDialog:471) LTR/RTL-aware Vuetify utilities, matching the Vuexy reference idiom. Tests + typecheck verified green. Lint baseline: 62 → 36. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-04-29 14:20:34 +02:00
parent d407cd17de
commit b4f5bbe7c2
14 changed files with 34 additions and 47 deletions
--- a/apps/app/src/App.vue
+++ b/apps/app/src/App.vue
@@ -31,8 +31,15 @@ authStore.initialize()
    <VApp :style="`--v-global-theme-primary: ${hexToRgb(global.current.value.colors.primary)}`">
      <!-- Show loading state while validating auth token -->
      <template v-if="!authStore.isInitialized">
-        <div class="d-flex align-center justify-center" style="min-height: 100vh;">
-          <VProgressCircular indeterminate color="primary" size="48" />
+        <div
+          class="d-flex align-center justify-center"
+          style="min-height: 100vh;"
+        >
+          <VProgressCircular
+            indeterminate
+            color="primary"
+            size="48"
+          />
        </div>
      </template>

@@ -53,7 +60,10 @@ authStore.initialize()
      {{ notificationStore.message }}

      <template #actions>
-        <VBtn variant="text" @click="notificationStore.hide()">
+        <VBtn
+          variant="text"
+          @click="notificationStore.hide()"
+        >
          Close
        </VBtn>
      </template>
--- a/apps/app/src/components/form-failures/DismissFailureDialog.vue
+++ b/apps/app/src/components/form-failures/DismissFailureDialog.vue
@@ -40,10 +40,8 @@ const noteRequired = computed(() => reason.value === 'other')
 const canSubmit = computed(() => {
  if (reason.value === null)
    return false
-  if (noteRequired.value && note.value.trim() === '')
-    return false

-  return true
+  return !(noteRequired.value && note.value.trim() === '')
 })

 watch(isDialogOpen, open => {
--- a/apps/app/src/components/form-failures/FormFailureDetail.vue
+++ b/apps/app/src/components/form-failures/FormFailureDetail.vue
@@ -41,7 +41,7 @@ const dismissDialogOpen = ref(false)

 function copyText(text: string): void {
  if (navigator?.clipboard)
-    void navigator.clipboard.writeText(text)
+    navigator.clipboard.writeText(text).catch(() => {})
 }

 const formattedContext = computed(() => {
--- a/apps/app/src/components/layout/OrganisationSwitcher.vue
+++ b/apps/app/src/components/layout/OrganisationSwitcher.vue
@@ -27,11 +27,6 @@ const roleColor = (role: string) => ({
  volunteer_coordinator: 'secondary',
 }[role] ?? 'default')

-function toggleMenu() {
-  if (hasMultiple.value)
-    isMenuOpen.value = !isMenuOpen.value
-}
-
 function selectOrg(id: string) {
  authStore.setActiveOrganisation(id)
  isMenuOpen.value = false
--- a/apps/app/src/components/persons/PersonDetailPanel.vue
+++ b/apps/app/src/components/persons/PersonDetailPanel.vue
@@ -74,9 +74,8 @@ function calculateAge(dateStr: string): number | null {
  let age = today.getFullYear() - birth.getFullYear()
  const monthDiff = today.getMonth() - birth.getMonth()
  const dayDiff = today.getDate() - birth.getDate()
-  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0)) {
+  if (monthDiff < 0 || (monthDiff === 0 && dayDiff < 0))
    age--
-  }
  if (age < 0 || age > 130)
    return null

@@ -269,7 +268,7 @@ function handleManualLink(userId: string) {
                Mogelijke match gevonden
                <VChip
                  size="x-small"
-                  class="ml-1"
+                  class="ms-1"
                  variant="outlined"
                >
                  {{ person.pending_identity_match.confidence_label }}
--- a/apps/app/src/components/sections/AssignShiftDialog.vue
+++ b/apps/app/src/components/sections/AssignShiftDialog.vue
@@ -37,13 +37,8 @@ const generalError = computed(() => {
 })

 // Check for overlap warning
-const hasOverlapWarning = computed(() => {
-  if (!selectedPersonId.value || !props.shift)
-    return false
-
-  // This is informational — the backend enforces the actual constraint
-  return false
-})
+// This is informational — the backend enforces the actual constraint
+const hasOverlapWarning = computed(() => false)

 const personItems = computed(() =>
  persons.value.map((p: Person) => ({
--- a/apps/app/src/components/sections/CreateShiftDialog.vue
+++ b/apps/app/src/components/sections/CreateShiftDialog.vue
@@ -37,7 +37,7 @@ const { data: eventDetail } = useEventDetail(orgIdRef, eventIdRef)
 const sectionRef = computed(() => props.section ?? null)

 // Determine dropdown scenario
-const { scenario, showInfoTooltip, hasGroups, tooltipText, fetchParams, sortedItems } = useTimeSlotDropdown(
+const { showInfoTooltip, hasGroups, tooltipText, fetchParams, sortedItems } = useTimeSlotDropdown(
  eventDetail,
  sectionRef,
 )
--- a/apps/app/src/components/sections/SectionsShiftsPanel.vue
+++ b/apps/app/src/components/sections/SectionsShiftsPanel.vue
@@ -330,7 +330,7 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
          drag-class="section-drag"
          :animation="200"
          :delay="100"
-          :delay-on-touch-only="true"
+          delay-on-touch-only
          direction="vertical"
          class="v-list v-list--nav v-list--density-compact"
          @end="onDragEnd"
@@ -354,7 +354,7 @@ function onSectionCreated(payload: { name: string; redirectedToParent: boolean;
                <span>{{ element.name }}</span>
                <span
                  v-if="element.type === 'cross_event' && parentEvent"
-                  class="text-caption text-medium-emphasis ml-1"
+                  class="text-caption text-medium-emphasis ms-1"
                >
                  · {{ parentEvent.name }}
                </span>
--- a/apps/app/src/components/shifts/AssignPersonDialog.vue
+++ b/apps/app/src/components/shifts/AssignPersonDialog.vue
@@ -117,15 +117,11 @@ const filteredPersons = computed(() => {
        return false
    }

-    if (selectedCrowdType.value) {
-      if (person.crowd_type?.system_type !== selectedCrowdType.value)
-        return false
-    }
+    if (selectedCrowdType.value && person.crowd_type?.system_type !== selectedCrowdType.value)
+      return false

-    if (showOnlyAvailable.value) {
-      if (!person.is_available || person.already_assigned)
-        return false
-    }
+    if (showOnlyAvailable.value && (!person.is_available || person.already_assigned))
+      return false

    if (showRecommendedOnly.value) {
      const hasPreference = person.section_preferences.some(
@@ -458,7 +454,7 @@ async function executeAssign(person: AssignablePerson) {
                </template>
                <div class="text-body-2 text-white">
                  <strong>Aanbevolen omdat:</strong>
-                  <ul class="pl-4 mt-1 mb-0">
+                  <ul class="ps-4 mt-1 mb-0">
                    <li
                      v-for="(reason, i) in getRecommendationReasons(person)"
                      :key="i"
@@ -472,7 +468,7 @@ async function executeAssign(person: AssignablePerson) {
                v-if="person.crowd_type"
                size="x-small"
                variant="tonal"
-                class="ml-auto"
+                class="ms-auto"
              >
                {{ person.crowd_type.name }}
              </VChip>
@@ -497,7 +493,7 @@ async function executeAssign(person: AssignablePerson) {
                  {{ tag.name }}
                  <span
                    v-if="tag.proficiency"
-                    class="ml-1 font-italic"
+                    class="ms-1 font-italic"
                  >
                    ({{ { beginner: 'beg.', experienced: 'erv.', expert: 'exp.' }[tag.proficiency] }})
                  </span>
--- a/apps/app/src/pages/events/[id]/settings/registration-fields.vue
+++ b/apps/app/src/pages/events/[id]/settings/registration-fields.vue
@@ -332,7 +332,7 @@ const settingsTab = computed(() => {
            handle=".drag-handle"
            :animation="200"
            :delay="100"
-            :delay-on-touch-only="true"
+            delay-on-touch-only
            direction="vertical"
            @end="onDragEnd"
          >
--- a/apps/app/src/pages/events/[id]/time-slots/index.vue
+++ b/apps/app/src/pages/events/[id]/time-slots/index.vue
@@ -239,7 +239,7 @@ function onDeleteExecute() {

 <template>
  <EventTabsNav>
-    <template #default="{ event }">
+    <template #default>
      <!-- Header -->
      <div class="d-flex align-center justify-space-between flex-wrap gap-2 mb-4">
        <div class="d-flex align-center gap-x-2">
--- a/apps/app/src/pages/organisation/companies.vue
+++ b/apps/app/src/pages/organisation/companies.vue
@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import { useCompanies, useDeleteCompany } from '@/composables/api/useCompanies'
-import { useAuthStore } from '@/stores/useAuthStore'
 import { useOrganisationStore } from '@/stores/useOrganisationStore'
 import CompanyDialog from '@/components/organisation/CompanyDialog.vue'
 import type { Company } from '@/types/organisation'

-const authStore = useAuthStore()
 const orgStore = useOrganisationStore()

 const orgId = computed(() => orgStore.activeOrganisationId ?? '')
--- a/apps/app/src/pages/platform/activity-log/index.vue
+++ b/apps/app/src/pages/platform/activity-log/index.vue
@@ -7,8 +7,6 @@ definePage({
  },
 })

-const search = ref('')
-const searchDebounced = refDebounced(search, 400)
 const logNameFilter = ref('')
 const page = ref(1)

--- a/apps/app/src/stores/useImpersonationStore.ts
+++ b/apps/app/src/stores/useImpersonationStore.ts
@@ -96,11 +96,9 @@ export const useImpersonationStore = defineStore('impersonation', () => {
        '/admin/impersonate/status',
      )

-      if (!data.data.active) {
-        if (state.value) {
-          clearState()
-          window.location.href = '/platform'
-        }
+      if (!data.data.active && state.value) {
+        clearState()
+        window.location.href = '/platform'
      }
      else if (data.data.session) {
        // Update expiry from server