Skip to content
This repository was archived by the owner on Jun 2, 2026. It is now read-only.

讓 Project Scope 內的 Template 支援查看、編輯與影響範圍檢視 #53

Merged
5000user5000 merged 1 commit into from
May 28, 2026
Merged

讓 Project Scope 內的 Template 支援查看、編輯與影響範圍檢視 #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions frontend/src/PrototypeUI.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -609,6 +609,9 @@ function PageRouter({
onUpdateProject={onUpdateProject}
onDeleteProject={onDeleteProject}
onUpdateProjectTemplates={onUpdateProjectTemplates}
onUpdateTemplate={onUpdateTemplate}
onDeleteTemplate={onDeleteTemplate}
onFetchTemplateImpact={fetchTemplateImpact}
onAddProjectScope={onAddProjectScope}
onRemoveProjectScope={onRemoveProjectScope}
onCreateOverrideRequest={onCreateOverrideRequest}
Expand Down
185 changes: 181 additions & 4 deletions frontend/src/pages/Projects.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import { fetchProjectScopeConfig } from '../api/projects.js';
import { configRows } from '../data/configs.js';
import { formatConfigContent, formatParsedContent } from '../lib/formatConfigContent.js';
import { overridesAtScope } from '../lib/scope.js';
import { TemplateChangeRequestModal, TemplateDetailModal, TemplateFormModal } from './Templates.jsx';
import scrollbar from '../styles/scrollbar.module.css';

function inheritedAtScope(project) {
Expand Down Expand Up @@ -52,6 +53,9 @@ export function Projects({
onUpdateProject,
onDeleteProject,
onUpdateProjectTemplates,
onUpdateTemplate,
onDeleteTemplate,
onFetchTemplateImpact,
onAddProjectScope,
onRemoveProjectScope,
onCreateOverrideRequest,
Expand All @@ -73,6 +77,14 @@ export function Projects({
const [scopeConfigError, setScopeConfigError] = useState(null);
const [cloneDraft, setCloneDraft] = useState(null);
const [viewingTemplate, setViewingTemplate] = useState(null);
const [templateActiveTab, setTemplateActiveTab] = useState('definition');
const [editingTemplate, setEditingTemplate] = useState(null);
const [templateChangeRequestDraft, setTemplateChangeRequestDraft] = useState(null);
const [templateActionError, setTemplateActionError] = useState(null);
const [deletingTemplateId, setDeletingTemplateId] = useState(null);
const [impactByTemplateId, setImpactByTemplateId] = useState({});
const [impactLoadingId, setImpactLoadingId] = useState(null);
const [impactErrorByTemplateId, setImpactErrorByTemplateId] = useState({});
const [editingProject, setEditingProject] = useState(null);
const [deletingProject, setDeletingProject] = useState(null);
const [editingTemplatesFor, setEditingTemplatesFor] = useState(null);
Expand Down Expand Up @@ -102,6 +114,38 @@ export function Projects({
const selectedScope = factoryScopes.find(
(item) => item.siteName === selectedSiteName && item.environmentName === selectedEnvName,
) ?? null;
const selectedProjectTemplate = viewingTemplate
? normalizeProjectTemplateForModal(viewingTemplate, templates)
: null;

useEffect(() => {
if (!selectedProjectTemplate?.id || templateActiveTab !== 'impact' || !onFetchTemplateImpact) return;
if (impactByTemplateId[selectedProjectTemplate.id]) return;

let cancelled = false;
setImpactLoadingId(selectedProjectTemplate.id);
setImpactErrorByTemplateId((current) => ({ ...current, [selectedProjectTemplate.id]: null }));

onFetchTemplateImpact(selectedProjectTemplate.id, token)
.then((impact) => {
if (cancelled) return;
setImpactByTemplateId((current) => ({ ...current, [selectedProjectTemplate.id]: impact }));
})
.catch((error) => {
if (cancelled) return;
setImpactErrorByTemplateId((current) => ({
...current,
[selectedProjectTemplate.id]: error.message ?? 'Failed to load template impact.',
}));
})
.finally(() => {
if (!cancelled) setImpactLoadingId(null);
});

return () => {
cancelled = true;
};
}, [impactByTemplateId, onFetchTemplateImpact, selectedProjectTemplate?.id, templateActiveTab, token]);

useEffect(() => {
if (selectedProjectName && !projects.some((project) => project.name === selectedProjectName)) {
Expand Down Expand Up @@ -287,6 +331,64 @@ export function Projects({
setShowClone(false);
};

const handleOpenProjectTemplate = (template) => {
setViewingTemplate(template);
setTemplateActiveTab('definition');
setTemplateActionError(null);
};

const handleEditProjectTemplate = () => {
if (!selectedProjectTemplate) return;
setTemplateActionError(null);
setEditingTemplate(selectedProjectTemplate);
};

const handleDeleteProjectTemplate = () => {
if (!selectedProjectTemplate || !onDeleteTemplate || deletingTemplateId) return;
setTemplateActionError(null);
setTemplateChangeRequestDraft({
action: 'delete',
template: selectedProjectTemplate,
payload: null,
});
};

const handleSubmitTemplateEdit = async (templateUpdate) => {
setTemplateActionError(null);
setEditingTemplate(null);
setTemplateChangeRequestDraft({
action: 'update',
template: selectedProjectTemplate,
payload: templateUpdate,
});
return templateUpdate;
};

const submitTemplateChangeRequest = async ({ reason }) => {
if (!templateChangeRequestDraft) return null;
const { action, template, payload } = templateChangeRequestDraft;
setTemplateActionError(null);
if (action === 'delete') {
setDeletingTemplateId(template.id);
}

try {
const result = action === 'delete'
? await onDeleteTemplate(template, reason)
: await onUpdateTemplate({ ...payload, reason });
setTemplateChangeRequestDraft(null);
setViewingTemplate(null);
return result;
} catch (error) {
setTemplateActionError(error.message ?? 'Failed to open template change request.');
throw error;
} finally {
if (action === 'delete') {
setDeletingTemplateId(null);
}
}
};

return (
<div className="space-y-6 relative">
<SectionHeader
Expand Down Expand Up @@ -437,7 +539,7 @@ export function Projects({
loading={scopeConfigLoading}
error={scopeConfigError}
token={token}
onViewTemplate={setViewingTemplate}
onViewTemplate={handleOpenProjectTemplate}
canOverride={canCreateProject}
onCreateOverrideRequest={onCreateOverrideRequest}
/>
Expand All @@ -456,10 +558,44 @@ export function Projects({
</div>

<AnimatePresence>
{viewingTemplate ? (
<ProjectTemplateViewModal
template={viewingTemplate}
{selectedProjectTemplate ? (
<TemplateDetailModal
template={selectedProjectTemplate}
projects={projects}
activeTab={templateActiveTab}
onTabChange={setTemplateActiveTab}
onClose={() => setViewingTemplate(null)}
onEdit={handleEditProjectTemplate}
onDelete={handleDeleteProjectTemplate}
onOpenImpact={onOpenImpact}
onProposeChange={onProposeChange}
canManageTemplate={canCreateProject && Boolean(onUpdateTemplate)}
actionError={templateActionError}
deleting={deletingTemplateId === selectedProjectTemplate.id}
exactImpact={impactByTemplateId[selectedProjectTemplate.id]}
impactLoading={impactLoadingId === selectedProjectTemplate.id}
impactError={impactErrorByTemplateId[selectedProjectTemplate.id]}
/>
) : null}

{editingTemplate && canCreateProject && onUpdateTemplate ? (
<TemplateFormModal
mode="edit"
initialTemplate={editingTemplate}
onClose={() => {
setTemplateActionError(null);
setEditingTemplate(null);
}}
onSubmit={handleSubmitTemplateEdit}
templateTypes={templateTypes}
/>
) : null}

{templateChangeRequestDraft ? (
<TemplateChangeRequestModal
draft={templateChangeRequestDraft}
onClose={() => setTemplateChangeRequestDraft(null)}
onSubmit={submitTemplateChangeRequest}
/>
) : null}

Expand Down Expand Up @@ -1488,6 +1624,47 @@ function parseConfigPath(path) {
));
}

function normalizeProjectTemplateForModal(section, templates = []) {
const templateId = section.templateId ?? section.id;
const sourceTemplate = templates.find((template) => template.id === templateId) ?? {};
const rawKeys = section.keys ?? sourceTemplate.keys ?? (section.keyPaths ?? sourceTemplate.keyPaths ?? []).map((key) => ({
key,
defaultValue: getValueAtPath(section.parsedContent ?? sourceTemplate.parsedContent, key),
}));
const keys = rawKeys.map((item) => ({
key: item.key,
defaultValue: item.effectiveValue ?? item.defaultValue ?? item.baseValue ?? '-',
effectiveValue: item.effectiveValue ?? item.defaultValue ?? item.baseValue ?? '-',
baseValue: item.baseValue ?? getValueAtPath(section.parsedContent ?? sourceTemplate.parsedContent, item.key),
overrideValue: item.overrideValue ?? null,
rawOverrideValue: item.rawOverrideValue,
overridden: Boolean(item.overridden),
overridable: item.overridable ?? true,
}));

return {
...sourceTemplate,
...section,
id: templateId,
name: section.templateName ?? sourceTemplate.name ?? 'Selected template',
templateName: section.templateName ?? sourceTemplate.name,
format: section.format ?? sourceTemplate.format,
status: section.status ?? sourceTemplate.status ?? 'active',
version: section.version ?? sourceTemplate.version ?? 1,
updatedAt: section.updatedAt ?? sourceTemplate.updatedAt,
rawContent: section.rawContent ?? sourceTemplate.rawContent ?? '',
parsedContent: section.parsedContent ?? sourceTemplate.parsedContent ?? {},
keyPaths: section.keyPaths ?? sourceTemplate.keyPaths ?? keys.map((item) => item.key),
keys,
keysCount: keys.length,
templateType: section.templateType ?? sourceTemplate.templateType,
description: sourceTemplate.description ?? [
section.cloneSource ? `Source scope: ${section.cloneSource.siteName} / ${section.cloneSource.environmentName}` : null,
section.priority !== undefined ? `Priority ${section.priority}` : null,
].filter(Boolean).join(' · '),
};
}

function buildTemplateModalKeys(template) {
const baseKeys = template.keys ?? (template.keyPaths ?? []).map((key) => ({
key,
Expand Down
Loading