add builders filtering by predefined list, mainnet only wip

src/graphql/BuildersQueries.graphql

@@ -141,3 +141,33 @@ query combinedBuildersList(
     totalSubnets
   }
 }
+
+# TEMP: To filter by name
+query combinedBuildersListFilteredByPredefinedBuilders(
+  $orderBy: BuildersProject_orderBy
+  $orderDirection: OrderDirection
+  $name_in: [String!] = ""
+  $address: Bytes = ""
+) {
+  buildersProjects(
+    orderBy: $orderBy
+    orderDirection: $orderDirection
+    where: {name_in: $name_in}
+  ) {
+    ...BuilderProject
+  }
+
+
+  buildersUsers(where: {
+    address: $address
+    buildersProject_: {name_in: $name_in}
+  }) {
+    address
+    id
+    lastStake
+    staked
+    buildersProject {
+      ...BuilderProject
+    }
+  }
+}

src/pages/Builders/pages/BuildersList/components/BuildersTable/components/SortingIconButton.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { BuildersProject_OrderBy, OrderDirection } from '@/types/graphql'
+import { AppIcon } from '@/common'
+import { cn } from '@/theme/utils'
+
+const orderByModel = defineModel<BuildersProject_OrderBy>('orderByModel')
+const orderDirectionModel = defineModel<OrderDirection>('orderDirectionModel')
+
+const props = withDefaults(
+  defineProps<{
+    label: string
+    orderBy: BuildersProject_OrderBy
+  }>(),
+  {},
+)
+
+const handleClick = () => {
+  orderByModel.value = props.orderBy
+
+  if (orderDirectionModel.value === OrderDirection.Asc) {
+    orderDirectionModel.value = OrderDirection.Desc
+
+    return
+  }
+
+  orderDirectionModel.value = OrderDirection.Asc
+}
+</script>
+
+<template>
+  <button class="flex items-center gap-2" @click="handleClick">
+    <span class="line-clamp-1 text-[16px] leading-[24px] text-textTertiaryMain">
+      {{ label }}
+    </span>
+    <div class="flex flex-col">
+      <app-icon
+        class="size-[10px]"
+        :class="
+          cn(
+            orderByModel === orderBy &&
+              orderDirectionModel === OrderDirection.Asc &&
+              'text-primaryMain',
+          )
+        "
+        :name="$icons.triangleTop"
+      />
+      <app-icon
+        class="size-[10px] rotate-180"
+        :class="
+          cn(
+            orderByModel === orderBy &&
+              orderDirectionModel === OrderDirection.Desc &&
+              'text-primaryMain',
+          )
+        "
+        :name="$icons.triangleTop"
+      />
+    </div>
+  </button>
+</template>
+
+<style scoped lang="scss"></style>

src/pages/Builders/pages/BuildersList/components/BuildersTable/index.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="flex w-full flex-col gap-2">
+    <div
+      :class="
+        cn(
+          'hidden',
+          'grid-cols-[max(216px),max(160px),max(190px),1fr,1fr,max(100px)] items-center md:grid',
+          'gap-2 px-8',
+        )
+      "
+    >
+      <div class="flex items-center gap-2">
+        <span
+          class="line-clamp-1 text-[16px] leading-[24px] text-textTertiaryMain"
+        >
+          {{ $t('builders-table.name-th') }}
+        </span>
+      </div>
+      <sorting-icon-button
+        class="justify-self-end"
+        :label="$t('builders-table.starts-time-th')"
+        :order-by="BuildersProject_OrderBy.StartsAt"
+        v-model:order-by-model="orderByModel"
+        v-model:order-direction-model="orderDirectionModel"
+      />
+      <sorting-icon-button
+        class="justify-self-end"
+        :label="$t('builders-table.min-deposit-th')"
+        :order-by="BuildersProject_OrderBy.MinimalDeposit"
+        v-model:order-by-model="orderByModel"
+        v-model:order-direction-model="orderDirectionModel"
+      />
+      <sorting-icon-button
+        class="justify-self-end"
+        :label="$t('builders-table.total-staked-th')"
+        :order-by="BuildersProject_OrderBy.TotalStaked"
+        v-model:order-by-model="orderByModel"
+        v-model:order-direction-model="orderDirectionModel"
+      />
+      <sorting-icon-button
+        class="justify-self-end"
+        :label="$t('builders-table.withdraw-lock-period-th')"
+        :order-by="BuildersProject_OrderBy.WithdrawLockPeriodAfterDeposit"
+        v-model:order-by-model="orderByModel"
+        v-model:order-direction-model="orderDirectionModel"
+      />
+      <div class=""></div>
+    </div>
+    <builders-table-item
+      v-for="el in buildersProjects"
+      :key="el.id"
+      :builder-project="el"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import BuildersTableItem from '../BuildersTableItem.vue'
+import {
+  BuilderProjectFragment,
+  BuildersProject_OrderBy,
+  OrderDirection,
+} from '@/types/graphql'
+import { cn } from '@/theme/utils'
+import SortingIconButton from '@/pages/Builders/pages/BuildersList/components/BuildersTable/components/SortingIconButton.vue'
+
+const orderByModel = defineModel<BuildersProject_OrderBy>('orderByModel')
+const orderDirectionModel = defineModel<OrderDirection>('orderDirectionModel')
+
+withDefaults(
+  defineProps<{
+    buildersProjects: BuilderProjectFragment[]
+  }>(),
+  {},
+)
+</script>
+
+<style scoped lang="scss"></style>