geo/apps/admin-web/src/views/FreeCreateView.vue

<script setup lang="ts">
import {
  DeleteOutlined,
  EditOutlined,
  SendOutlined,
  PlusOutlined,
  LoadingOutlined,
} from "@ant-design/icons-vue";
import { useMutation, useQuery, useQueryClient } from "@tanstack/vue-query";
import { message } from "ant-design-vue";
import type { ArticleListItem, ArticleListParams } from "@geo/shared-types";
import type { TableColumnsType } from "ant-design-vue";
import type { Dayjs } from "dayjs";
import { computed, onBeforeUnmount, reactive, ref, watch } from "vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

import PublishArticleModal from "@/components/PublishArticleModal.vue";
import { articlesApi } from "@/lib/api";
import { formatError } from "@/lib/errors";
import {
  formatDateTime,
  getGenerateStatusMeta,
  getPublishStatusMeta,
  getSourceTypeLabel,
} from "@/lib/display";

const queryClient = useQueryClient();
const router = useRouter();
const { t } = useI18n();

const publishModalOpen = ref(false);
const selectedPublishArticleId = ref<number | null>(null);
const page = ref(1);
const pageSize = ref(10);
const createdRange = ref<[Dayjs, Dayjs] | null>(null);

const draftFilters = reactive<{
  publish_status?: string;
  keyword?: string;
  created_from?: string;
  created_to?: string;
}>({
  keyword: "",
});

const appliedFilters = reactive<{
  publish_status?: string;
  keyword?: string;
  created_from?: string;
  created_to?: string;
}>({
  keyword: "",
});

const articleParams = computed<ArticleListParams>(() => {
  const params: ArticleListParams = {
    page: page.value,
    page_size: pageSize.value,
    source_type: "free_create",
  };

  if (appliedFilters.publish_status) {
    params.publish_status = appliedFilters.publish_status;
  }
  if (appliedFilters.keyword?.trim()) {
    params.keyword = appliedFilters.keyword.trim();
  }
  if (appliedFilters.created_from) {
    params.created_from = appliedFilters.created_from;
  }
  if (appliedFilters.created_to) {
    params.created_to = appliedFilters.created_to;
  }

  return params;
});

const articleListQuery = useQuery({
  queryKey: computed(() => ["articles", "list", articleParams.value]),
  queryFn: () => articlesApi.list(articleParams.value),
});

const deleteMutation = useMutation({
  mutationFn: (articleId: number) => articlesApi.remove(articleId),
  onSuccess: async () => {
    message.success(t("freeCreate.list.deleteSuccess"));
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["articles"] }),
      queryClient.invalidateQueries({ queryKey: ["workspace"] }),
    ]);
  },
  onError: (error) => {
    message.error(formatError(error) || t("freeCreate.list.deleteError"));
  },
});

const createMutation = useMutation({
  mutationFn: () => articlesApi.create({}),
  onSuccess: (data) => {
    void router.push({ name: "article-editor", params: { id: String(data.id) } });
  },
  onError: (error) => {
    message.error(formatError(error) || t("freeCreate.createError"));
  },
});

const publishStatusOptions = computed(() => [
  { label: getPublishStatusMeta("unpublished").label, value: "unpublished" },
  { label: getPublishStatusMeta("publishing").label, value: "publishing" },
  { label: getPublishStatusMeta("success").label, value: "success" },
  { label: getPublishStatusMeta("partial_success").label, value: "partial_success" },
  { label: getPublishStatusMeta("failed").label, value: "failed" },
  { label: getPublishStatusMeta("pending_review").label, value: "pending_review" },
]);

const articleColumns = computed<TableColumnsType<ArticleListItem>>(() => [
  {
    title: t("common.title"),
    dataIndex: "title",
    key: "title",
  },
  {
    title: t("common.publishStatus"),
    dataIndex: "publish_status",
    key: "publish_status",
    width: 128,
  },
  {
    title: t("common.wordCount"),
    dataIndex: "word_count",
    key: "word_count",
    width: 100,
  },
  {
    title: t("common.actions"),
    key: "actions",
    width: 156,
    align: "right",
  },
]);

function applyFilters(): void {
  page.value = 1;
  appliedFilters.publish_status = draftFilters.publish_status;
  appliedFilters.keyword = draftFilters.keyword?.trim() || "";
  appliedFilters.created_from = createdRange.value?.[0]?.toISOString();
  appliedFilters.created_to = createdRange.value?.[1]?.toISOString();
}

function resetFilters(): void {
  draftFilters.publish_status = undefined;
  draftFilters.keyword = "";
  createdRange.value = null;
  applyFilters();
}

function openEditor(article: ArticleListItem): void {
  void router.push({ name: "article-editor", params: { id: String(article.id) } });
}

function openPublish(article: ArticleListItem): void {
  selectedPublishArticleId.value = article.id;
  publishModalOpen.value = true;
}

function canPublishArticle(status: string): boolean {
  return status === "completed";
}

function handleTableChange(nextPage: number, nextPageSize: number): void {
  page.value = nextPage;
  pageSize.value = nextPageSize;
}

async function handleDelete(articleId: number): Promise<void> {
  await deleteMutation.mutateAsync(articleId);
}

function handleCreate(): void {
  createMutation.mutate();
}
</script>

<template>
  <div class="free-create-view">
    <section class="free-create-view__top-card">
      <div class="free-create-view__header">
        <div class="free-create-view__header-title">
          <h2>{{ t('route.freeCreate.title') }}</h2>
          <p>{{ t('route.freeCreate.description') }}</p>
        </div>
        <div class="free-create-view__header-actions">
          <a-button type="primary" :loading="createMutation.isPending.value" @click="handleCreate">
            <template #icon><PlusOutlined /></template>
            {{ t("freeCreate.actions.create") }}
          </a-button>
        </div>
      </div>

      <a-divider style="margin: 0; border-color: #f0f0f0;" />

      <div class="free-create-view__filters">
        <div class="free-create-view__filters-inline">
          <div class="free-create-view__filter-item">
            <label>{{ t("freeCreate.filters.publishStatus") }}:</label>
            <a-select
              v-model:value="draftFilters.publish_status"
              allow-clear
              :options="publishStatusOptions"
              :placeholder="t('common.selectPlease')"
              @change="applyFilters"
            />
          </div>

          <div class="free-create-view__filter-item">
            <label>{{ t("freeCreate.filters.createdTime") }}:</label>
            <a-range-picker
              v-model:value="createdRange"
              allow-clear
              show-time
              format="YYYY-MM-DD HH:mm"
              :placeholder="[
                t('freeCreate.filters.createdTimeStart'),
                t('freeCreate.filters.createdTimeEnd'),
              ]"
              @change="applyFilters"
            />
          </div>

          <div class="free-create-view__filter-item">
            <label>{{ t("freeCreate.filters.keyword") }}:</label>
            <a-input-search
              v-model:value="draftFilters.keyword"
              :placeholder="t('freeCreate.filters.keywordPlaceholder')"
              @search="applyFilters"
              @pressEnter="applyFilters"
            />
          </div>

          <a-button @click="resetFilters" class="free-create-view__reset-btn">{{ t("common.reset") }}</a-button>
        </div>
      </div>
    </section>

    <section class="free-create-view__table-card">
      <div class="free-create-view__table-head">
        <div>
          <p class="eyebrow">{{ t("freeCreate.list.eyebrow") }}</p>
          <h3>{{ t("freeCreate.list.count", { count: articleListQuery.data.value?.total ?? 0 }) }}</h3>
        </div>
        <a-button type="link" @click="articleListQuery.refetch()">
          {{ t("common.refresh") }}
        </a-button>
      </div>

      <a-table
        :columns="articleColumns"
        :data-source="articleListQuery.data.value?.items || []"
        :loading="articleListQuery.isPending.value"
        row-key="id"
        :pagination="{
          current: page,
          pageSize,
          total: articleListQuery.data.value?.total || 0,
          showSizeChanger: true,
          onChange: handleTableChange,
          onShowSizeChange: handleTableChange,
        }"
      >
        <template #emptyText>{{ t("freeCreate.list.empty") }}</template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'title'">
            <div class="free-create-view__title-cell">
              <strong>{{ record.title || t("article.untitled") }}</strong>
              <span>
                {{ getSourceTypeLabel(record.source_type) }} · {{ formatDateTime(record.created_at) }}
              </span>
            </div>
          </template>

          <template v-else-if="column.key === 'publish_status'">
            <a-tag :color="getPublishStatusMeta(record.publish_status).color">
              {{ getPublishStatusMeta(record.publish_status).label }}
            </a-tag>
          </template>

          <template v-else-if="column.key === 'word_count'">
            {{ record.word_count || "--" }}
          </template>

          <template v-else-if="column.key === 'actions'">
            <div class="table-actions-row">
              <a-tooltip
                :title="canPublishArticle(record.generate_status) ? t('media.publish.title') : t('templates.list.publishDisabled')"
              >
                <span>
                  <a-button
                    type="text"
                    shape="circle"
                    size="small"
                    class="action-btn action-publish"
                    :disabled="!canPublishArticle(record.generate_status)"
                    @click="openPublish(record)"
                  >
                    <SendOutlined />
                  </a-button>
                </span>
              </a-tooltip>
              <a-tooltip :title="t('freeCreate.list.edit')">
                <span>
                  <a-button
                    type="text"
                    shape="circle"
                    size="small"
                    class="action-btn action-edit"
                    @click="openEditor(record)"
                  >
                    <EditOutlined />
                  </a-button>
                </span>
              </a-tooltip>
              <a-popconfirm
                :title="t('freeCreate.list.deleteConfirm')"
                @confirm="handleDelete(record.id)"
              >
                <a-button
                  type="text"
                  shape="circle"
                  size="small"
                  class="action-btn action-delete"
                  :loading="deleteMutation.isPending.value"
                  :title="t('common.delete')"
                >
                  <DeleteOutlined />
                </a-button>
              </a-popconfirm>
            </div>
          </template>
        </template>
      </a-table>
    </section>

    <PublishArticleModal
      v-model:open="publishModalOpen"
      :article-id="selectedPublishArticleId"
    />
  </div>
</template>

<style scoped>
.free-create-view {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.free-create-view__top-card {
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
  overflow: hidden;
}

.free-create-view__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 24px;
}

.free-create-view__header-title h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}

.free-create-view__header-title p {
  margin: 6px 0 0 0;
  font-size: 13px;
  color: #8c8c8c;
}

.free-create-view__header-actions {
  display: flex;
  gap: 12px;
}

.free-create-view__filters {
  padding: 20px 24px;
}

.free-create-view__table-card {
  padding: 24px;
  background: #fff;
  border: 1px solid #e6edf5;
  border-radius: 12px;
}

.free-create-view__filters-inline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 24px;
}

.free-create-view__reset-btn {
  flex-shrink: 0;
  margin-left: auto;
}

.free-create-view__filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.free-create-view__filter-item label {
  color: #101828;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.free-create-view__filter-item :deep(.ant-select) {
  min-width: 140px;
}

.free-create-view__filter-item :deep(.ant-picker) {
  width: 320px;
}

.free-create-view__filter-item :deep(.ant-input-affix-wrapper),
.free-create-view__filter-item :deep(.ant-input-search) {
  width: 240px;
}

.free-create-view__table-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.free-create-view__table-head h3 {
  margin: 6px 0 0;
  font-size: 24px;
}

.free-create-view__title-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.free-create-view__title-cell span {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 1200px) {
  .free-create-view__filter-item :deep(.ant-picker) {
    width: 280px;
  }
}

@media (max-width: 720px) {
  .free-create-view__table-head {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>