enhancement: Shift + click to select multiples variables (#501)

Author: HugoRCD

apps/shelve/app/components/variable/Create.vue

@@ -9,12 +9,6 @@ const { createLoading, createVariables } = useVariablesService()
 
 const route = useRoute()
 const projectId = route.params.projectId as string
-/*const project = useProject(projectId)
-
-const { data: secrets, status, refresh, error } = await useFetch('/api/github/secrets', {
-  method: 'GET',
-  query: { repository: sanitizeGithubUrl(project.value?.repository) },
-})*/
 
 const {
   variablesInput,

apps/shelve/app/components/variable/Item.vue

@@ -39,15 +39,19 @@ const variableToUpdate = computed(() => ({
 }))
 
 const showEdit = ref(false)
+
+const handleClick = (event: MouseEvent) => {
+  emit('toggleSelected', event)
+}
 </script>
 
 <template>
   <UCard variant="subtle" :ui="{ root: isSelected && !showEdit ? 'bg-(--ui-bg-accented)/60' : '' }">
-    <div class="flex w-full items-start justify-between">
+    <div class="flex w-full select-none items-start justify-between">
       <div
         class="flex w-full flex-col gap-1"
         :class="{ 'cursor-pointer': !showEdit }"
-        @click="showEdit ? null : emit('toggleSelected')"
+        @click="showEdit ? null : handleClick($event)"
       >
         <h3 class="flex items-center gap-1 text-sm font-semibold sm:text-base">
           <span class="lg:hidden">

apps/shelve/app/components/variable/Selector.vue

@@ -2,15 +2,22 @@
 import type { Variable } from '@types'
 import { ConfirmModal } from '#components'
 
+const props = defineProps<{
+  variables: Variable[]
+}>()
+
 const selectedVariables = defineModel<Variable[]>({ required: true })
 
 const { deleteVariables } = useVariablesService()
 
 const loading = ref(false)
 const modal = useModal()
-const route = useRoute()
 const teamEnv = useEnvironments()
 
+function selectAllVisible() {
+  selectedVariables.value = [...props.variables]
+}
+
 async function deleteSelectedVariables() {
   loading.value = true
   const ids = selectedVariables.value.map((v: Variable) => v.id)
@@ -57,12 +64,16 @@ function openDeleteModal() {
                 </UCard>
               </template>
             </UPopover>
-            <UTooltip text="Delete selected variables">
-              <UButton color="error" variant="ghost" icon="heroicons:trash" :loading @click="openDeleteModal" />
+            <UTooltip text="Select all visible variables">
+              <UButton variant="ghost" icon="lucide:text-select" @click="selectAllVisible" />
             </UTooltip>
             <UTooltip text="Clear selection">
               <UButton variant="ghost" icon="lucide:x" @click="selectedVariables = []" />
             </UTooltip>
+            <USeparator orientation="vertical" class="h-auto" />
+            <UTooltip text="Delete selected variables">
+              <UButton color="error" variant="ghost" icon="heroicons:trash" :loading @click="openDeleteModal" />
+            </UTooltip>
           </div>
         </div>
       </div>

apps/shelve/app/pages/[teamSlug]/projects/[projectId]/index/variables.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { TeamRole, type Variable } from '@types'
+import type { Variable } from '@types'
 
 const route = useRoute()
 const projectId = route.params.projectId as string
@@ -10,6 +10,7 @@ const { loading, fetchVariables } = useVariablesService()
 if (!variables.value) fetchVariables()
 
 const selectedVariables = ref<Variable[]>([])
+const lastSelectedIndex = ref<number | null>(null)
 const searchTerm = ref('')
 const selectedEnvironment = ref([])
 const order = ref('desc')
@@ -50,11 +51,25 @@ const filteredVariables = computed(() => {
   return filtered
 })
 
-const toggleVariable = (variable: Variable) => {
-  if (!isVariableSelected(variable)) {
-    selectedVariables.value.push(variable)
+const toggleVariable = (variable: Variable, event?: MouseEvent) => {
+  const filteredIndex = filteredVariables.value.findIndex(v => v.id === variable.id)
+
+  if (event?.shiftKey && lastSelectedIndex.value !== null) {
+    const startIndex = Math.min(lastSelectedIndex.value, filteredIndex)
+    const endIndex = Math.max(lastSelectedIndex.value, filteredIndex)
+    const newSelection = filteredVariables.value.slice(startIndex, endIndex + 1)
+    selectedVariables.value = Array.from(
+      new Map(
+        [...selectedVariables.value, ...newSelection].map(item => [item.id, item])
+      ).values()
+    )
   } else {
-    selectedVariables.value = selectedVariables.value.filter((v) => v.id !== variable.id)
+    if (!isVariableSelected(variable)) {
+      selectedVariables.value.push(variable)
+    } else {
+      selectedVariables.value = selectedVariables.value.filter((v) => v.id !== variable.id)
+    }
+    lastSelectedIndex.value = filteredIndex
   }
 }
 
@@ -70,6 +85,7 @@ const isVariableSelected = (variable: Variable) => {
       <UInput
         v-model="searchTerm"
         placeholder="Search variables..."
+        icon="lucide:search"
         class="w-1/3"
       />
       <div class="flex gap-1">
@@ -84,14 +100,14 @@ const isVariableSelected = (variable: Variable) => {
         <USelectMenu v-model="selectedEnvironment" multiple :items class="w-full" placeholder="Select environment" />
       </div>
     </div>
-    <LazyVariableSelector v-model="selectedVariables" />
+    <LazyVariableSelector v-model="selectedVariables" :variables="filteredVariables" />
     <div v-if="!loading" class="flex flex-col gap-4">
       <div v-for="variable in filteredVariables" :key="variable.id">
         <VariableItem
           :variable
           :environments
           :is-selected="isVariableSelected(variable)"
-          @toggle-selected="toggleVariable(variable)"
+          @toggle-selected="(e) => toggleVariable(variable, e)"
         />
       </div>
     </div>