Align x:Application list layout with Domains: Description first, Enabled second
This commit is contained in:
@@ -361,10 +361,26 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
return { obj, schema: schem, list };
|
return { obj, schema: schem, list };
|
||||||
}, [schema, viewName]);
|
}, [schema, viewName]);
|
||||||
|
|
||||||
|
const objectName = resolved?.obj.objectName;
|
||||||
|
const isWebApplications = objectName === 'x:Application';
|
||||||
|
|
||||||
const displayColumns = useMemo(() => {
|
const displayColumns = useMemo(() => {
|
||||||
const columns = resolved?.list?.columns ?? [];
|
const columns = resolved?.list?.columns ?? [];
|
||||||
return columns;
|
if (!isWebApplications) return columns;
|
||||||
}, [resolved?.list?.columns]);
|
|
||||||
|
// For Web Applications, present Description first and Enabled second
|
||||||
|
// to match the layout of other tables such as Domains.
|
||||||
|
const ordered = ['description', 'enabled'];
|
||||||
|
const rest = columns.filter((c) => !ordered.includes(c.name));
|
||||||
|
const descriptionCol = columns.find((c) => c.name === 'description');
|
||||||
|
const enabledCol = columns.find((c) => c.name === 'enabled');
|
||||||
|
|
||||||
|
const result = [];
|
||||||
|
if (descriptionCol) result.push(descriptionCol);
|
||||||
|
if (enabledCol) result.push(enabledCol);
|
||||||
|
result.push(...rest);
|
||||||
|
return result;
|
||||||
|
}, [resolved?.list?.columns, isWebApplications]);
|
||||||
|
|
||||||
const [items, setItems] = useState<Record<string, unknown>[]>([]);
|
const [items, setItems] = useState<Record<string, unknown>[]>([]);
|
||||||
const [total, setTotal] = useState<number | null>(null);
|
const [total, setTotal] = useState<number | null>(null);
|
||||||
@@ -392,9 +408,6 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
|
const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);
|
||||||
const [activeWebApp, setActiveWebApp] = useState<Record<string, unknown> | null>(null);
|
const [activeWebApp, setActiveWebApp] = useState<Record<string, unknown> | null>(null);
|
||||||
|
|
||||||
const objectName = resolved?.obj.objectName;
|
|
||||||
const isWebApplications = objectName === 'x:Application';
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!isWebApplications || !schema) return;
|
if (!isWebApplications || !schema) return;
|
||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
@@ -1291,11 +1304,6 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
/>
|
/>
|
||||||
</th>
|
</th>
|
||||||
)}
|
)}
|
||||||
{isWebApplications && (
|
|
||||||
<th className="w-16 px-3 py-3 text-left font-medium text-muted-foreground">
|
|
||||||
{t('list.active', 'Active')}
|
|
||||||
</th>
|
|
||||||
)}
|
|
||||||
{displayColumns.map((col) => (
|
{displayColumns.map((col) => (
|
||||||
<th key={col.name} className="px-3 py-3 text-left font-medium text-muted-foreground">
|
<th key={col.name} className="px-3 py-3 text-left font-medium text-muted-foreground">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
@@ -1315,7 +1323,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
{loading && items.length === 0 ? (
|
{loading && items.length === 0 ? (
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<td
|
||||||
colSpan={displayColumns.length + (hasMassActions ? 1 : 0) + (hasItemActions ? 1 : 0) + (isWebApplications ? 1 : 0)}
|
colSpan={displayColumns.length + (hasMassActions ? 1 : 0) + (hasItemActions ? 1 : 0)}
|
||||||
className="px-3 py-12 text-center"
|
className="px-3 py-12 text-center"
|
||||||
>
|
>
|
||||||
<Loader2 className="mx-auto h-6 w-6 animate-spin" />
|
<Loader2 className="mx-auto h-6 w-6 animate-spin" />
|
||||||
@@ -1324,7 +1332,7 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
) : items.length === 0 ? (
|
) : items.length === 0 ? (
|
||||||
<tr>
|
<tr>
|
||||||
<td
|
<td
|
||||||
colSpan={displayColumns.length + (hasMassActions ? 1 : 0) + (hasItemActions ? 1 : 0) + (isWebApplications ? 1 : 0)}
|
colSpan={displayColumns.length + (hasMassActions ? 1 : 0) + (hasItemActions ? 1 : 0)}
|
||||||
className="px-3 py-12 text-center text-muted-foreground"
|
className="px-3 py-12 text-center text-muted-foreground"
|
||||||
>
|
>
|
||||||
{t('list.noResults', 'No results found')}
|
{t('list.noResults', 'No results found')}
|
||||||
@@ -1348,15 +1356,6 @@ export function DynamicList({ viewName }: DynamicListProps) {
|
|||||||
/>
|
/>
|
||||||
</td>
|
</td>
|
||||||
)}
|
)}
|
||||||
{isWebApplications && (
|
|
||||||
<td className="px-3 py-2">
|
|
||||||
{activeWebApp?.id === item.id ? (
|
|
||||||
<Badge variant="default">{t('list.active', 'Active')}</Badge>
|
|
||||||
) : (
|
|
||||||
<span className="text-muted-foreground">-</span>
|
|
||||||
)}
|
|
||||||
</td>
|
|
||||||
)}
|
|
||||||
{displayColumns.map((col) => (
|
{displayColumns.map((col) => (
|
||||||
<td key={col.name} className="px-3 py-2">
|
<td key={col.name} className="px-3 py-2">
|
||||||
{renderCellValue(
|
{renderCellValue(
|
||||||
|
|||||||
+1
-2
@@ -309,8 +309,7 @@
|
|||||||
"showing": "Showing {{from}}-{{to}} of {{total}} {{name}}",
|
"showing": "Showing {{from}}-{{to}} of {{total}} {{name}}",
|
||||||
"showingItems": "Showing {{count}} items",
|
"showingItems": "Showing {{count}} items",
|
||||||
"sort": "Sort",
|
"sort": "Sort",
|
||||||
"unknownError": "Unknown error",
|
"unknownError": "Unknown error"
|
||||||
"active": "Active"
|
|
||||||
},
|
},
|
||||||
"login": {
|
"login": {
|
||||||
"continue": "Continue",
|
"continue": "Continue",
|
||||||
|
|||||||
Reference in New Issue
Block a user