geo/apps/admin-web/src/components/ImageLibraryPicker.vue

<script setup lang="ts">
import { SearchOutlined } from "@ant-design/icons-vue";
import { useQuery } from "@tanstack/vue-query";
import { computed, ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { imagesApi } from "@/lib/api";
import { formatBytes } from "@/lib/display";
import type { ImageAssetItem } from "@geo/shared-types";

const props = withDefaults(defineProps<{
  singleSelect?: boolean;
}>(), {
  singleSelect: true,
});

const emit = defineEmits<{
  select: [image: ImageAssetItem];
}>();

const { t } = useI18n();

// State
const selectedFolderId = ref<number | null>(null);
const searchKeyword = ref("");
const debouncedSearch = ref("");
const currentPage = ref(1);
const pageSize = ref(12);
const selectedId = ref<number | null>(null);

// Queries
const foldersQuery = useQuery({
  queryKey: ["images", "folders"],
  queryFn: () => imagesApi.listFolders(),
});

const imagesQuery = useQuery({
  queryKey: computed(() => ["images", "list", "picker", {
    folder_id: selectedFolderId.value,
    q: debouncedSearch.value,
    page: currentPage.value,
    page_size: pageSize.value,
  }]),
  queryFn: () => imagesApi.list({
    folder_id: selectedFolderId.value ?? undefined,
    q: debouncedSearch.value,
    page: currentPage.value,
    page_size: pageSize.value,
  }),
});

const storageQuery = useQuery({
  queryKey: ["images", "storage-usage", "picker"],
  queryFn: () => imagesApi.storageUsage(),
});

// Computed
const folders = computed(() => foldersQuery.data.value ?? []);
const images = computed(() => imagesQuery.data.value?.items ?? []);
const totalImages = computed(() => imagesQuery.data.value?.total ?? 0);
const storageUsage = computed(() => storageQuery.data.value);

// Actions
let searchTimer: ReturnType<typeof setTimeout> | null = null;
watch(searchKeyword, () => {
  if (searchTimer) clearTimeout(searchTimer);
  searchTimer = setTimeout(() => {
    debouncedSearch.value = searchKeyword.value;
    currentPage.value = 1;
  }, 300);
});

function handleSelect(image: ImageAssetItem) {
  selectedId.value = image.id;
  emit("select", image);
}

function getSelectPopupContainer(triggerNode: HTMLElement) {
  return triggerNode.parentElement ?? triggerNode;
}
</script>

<template>
  <div class="image-library-picker">
    <div class="picker-toolbar">
      <a-select
        v-model:value="selectedFolderId"
        style="width: 160px"
        :placeholder="t('images.allFolders')"
        allow-clear
        :get-popup-container="getSelectPopupContainer"
        @change="currentPage = 1"
      >
        <a-select-option :value="null">{{ t("images.allFolders") }}</a-select-option>
        <a-select-option v-for="f in folders" :key="f.id" :value="f.id">
          {{ f.name }}
        </a-select-option>
      </a-select>

      <a-input-search
        v-model:value="searchKeyword"
        :placeholder="t('images.searchPlaceholder')"
        style="width: 240px"
        allow-clear
      />
    </div>

    <div class="picker-content">
      <div v-if="images.length > 0" class="image-grid">
        <div
          v-for="image in images"
          :key="image.id"
          class="image-item"
          :class="{ 'image-item--selected': selectedId === image.id }"
          @click="handleSelect(image)"
        >
          <div class="image-item__preview">
            <img :src="image.url" :alt="image.name" loading="lazy" />
          </div>
          <div class="image-item__name" :title="image.name">{{ image.name }}</div>
        </div>
      </div>
      <div v-else-if="!imagesQuery.isPending.value" class="empty-state">
        <a-empty :description="t('images.noImages')" />
      </div>

      <div v-if="totalImages > pageSize" class="pagination-wrapper">
        <a-pagination
          v-model:current="currentPage"
          :total="totalImages"
          :page-size="pageSize"
          size="small"
          @change="selectedId = null"
        />
      </div>
    </div>

    <div v-if="storageUsage" class="storage-usage">
      <div class="storage-usage__info">
        <span>{{ t("images.storageUsage") }}: {{ t("images.storageUsageDetail", { 
          used: formatBytes(storageUsage.used_bytes), 
          total: formatBytes(storageUsage.quota_bytes),
          percent: storageUsage.used_pct
        }) }}</span>
      </div>
      <a-progress 
        :percent="storageUsage.used_pct" 
        :show-info="false" 
        stroke-color="#1677ff"
        size="small"
      />
    </div>
  </div>
</template>

<style scoped>
.image-library-picker {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.picker-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.picker-content {
  flex: 1;
  overflow-y: auto;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.image-item {
  border: 1px solid #f0f0f0;
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.image-item:hover {
  border-color: #1677ff;
}

.image-item--selected {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.1);
  background: #e6f4ff;
}

.image-item__preview {
  aspect-ratio: 1;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-item__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-item__name {
  padding: 6px 8px;
  font-size: 11px;
  color: #4b5563;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-wrapper {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}

.storage-usage {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.storage-usage__info {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}
</style>