Update task mode UI details

2026-01-21 10:19:34 +01:00
parent 1c5412e82c
commit 246e54f970
4 changed files with 62 additions and 41 deletions
--- a/resources/js/admin/i18n/locales/de/management.json
+++ b/resources/js/admin/i18n/locales/de/management.json
@@ -537,13 +537,13 @@
      "disabledTitle": "Fotoaufgaben-Modus ist für dieses Event aus",
      "disabledBody": "Gäste sehen nur den Fotofeed. Aktiviere Fotoaufgaben in den Event-Einstellungen, um sie wieder anzuzeigen.",
      "toggle": {
-        "title": "Fotoaufgaben für dieses Event",
-        "description": "Gib Gästen optionale Fotoaufgaben und kleine Foto-Ideen.",
+        "title": "Fotoaufgaben-Modus",
+        "description": "Steuere, ob Gäste Mission Cards und Fotoideen sehen.",
        "active": "AKTIV",
        "inactive": "INAKTIV",
-        "onLabel": "Gäste sehen Fotoaufgaben",
-        "offLabel": "Gäste sehen nur Fotos",
-        "switchLabel": "Fotoaufgaben aktiv",
+        "onLabel": "Mission Cards aktiv",
+        "offLabel": "Nur Fotofeed",
+        "switchLabel": "Fotoaufgaben für Gäste",
        "enabled": "Fotoaufgaben aktiviert",
        "disabled": "Fotoaufgaben deaktiviert",
        "permissionHint": "Du hast keine Berechtigung, Fotoaufgaben zu ändern."
@@ -561,6 +561,7 @@
      "limitReached": "Fotoaufgaben-Limit erreicht.",
      "limitReachedHint": "Dieses Event erlaubt maximal {{count}} Fotoaufgaben.",
      "limitRemaining": "{{count}} von {{total}} Fotoaufgaben verfügbar.",
+      "remainingIndicator": "{{count}} / {{total}} übrig",
      "limitSkipped": "{{count}} Fotoaufgaben wegen Limit übersprungen.",
      "created": "Fotoaufgabe gespeichert",
      "removed": "Fotoaufgabe entfernt",
--- a/resources/js/admin/i18n/locales/en/management.json
+++ b/resources/js/admin/i18n/locales/en/management.json
@@ -533,13 +533,13 @@
      "disabledTitle": "Photo tasks mode is off for this event",
      "disabledBody": "Guests only see the photo feed. Enable photo tasks in the event settings to show them again.",
      "toggle": {
-        "title": "Photo tasks for this event",
-        "description": "Give guests optional photo tasks and prompts.",
+        "title": "Photo task mode",
+        "description": "Control whether guests see mission cards and prompts.",
        "active": "ACTIVE",
        "inactive": "INACTIVE",
-        "onLabel": "Guests see photo tasks",
-        "offLabel": "Guest app shows photos only",
-        "switchLabel": "Photo tasks enabled",
+        "onLabel": "Mission cards active",
+        "offLabel": "Photo feed only",
+        "switchLabel": "Photo tasks for guests",
        "enabled": "Photo tasks activated",
        "disabled": "Photo tasks disabled",
        "permissionHint": "You do not have permission to change photo tasks."
@@ -557,6 +557,7 @@
      "limitReached": "Photo task limit reached.",
      "limitReachedHint": "This event allows up to {{count}} photo tasks.",
      "limitRemaining": "{{count}} of {{total}} photo tasks remaining.",
+      "remainingIndicator": "{{count}} / {{total}} tasks remaining",
      "limitSkipped": "Skipped {{count}} tasks due to limit.",
      "created": "Photo task saved",
      "removed": "Photo task removed",
--- a/resources/js/admin/mobile/EventTasksPage.tsx
+++ b/resources/js/admin/mobile/EventTasksPage.tsx
@@ -206,11 +206,15 @@ export default function MobileEventTasksPage() {
    return typeof limit === 'number' && Number.isFinite(limit) ? limit : null;
  }, [eventRecord?.limits?.tasks?.limit]);
  const remainingTasks = React.useMemo(() => {
+    const remaining = eventRecord?.limits?.tasks?.remaining;
+    if (typeof remaining === 'number' && Number.isFinite(remaining)) {
+      return Math.max(0, remaining);
+    }
    if (maxTasks === null) {
      return null;
    }
    return Math.max(0, maxTasks - assignedTasks.length);
-  }, [assignedTasks.length, maxTasks]);
+  }, [assignedTasks.length, eventRecord?.limits?.tasks?.remaining, maxTasks]);
  const canAddTasks = maxTasks === null || (remainingTasks ?? 0) > 0;
  const limitReachedMessage = t('events.tasks.limitReached', 'Photo task limit reached.');
  const limitReachedHint =
@@ -781,9 +785,19 @@ export default function MobileEventTasksPage() {
  ) : (
    <YStack space="$2">
      <YStack ref={assignedRef} />
-      <Text fontSize="$sm" color={muted}>
-        {t('events.tasks.count', '{{count}} photo tasks', { count: filteredTasks.length })}
-      </Text>
+      <XStack alignItems="center" flexWrap="wrap" space="$2">
+        <Text fontSize="$sm" color={muted}>
+          {t('events.tasks.count', '{{count}} photo tasks', { count: filteredTasks.length })}
+        </Text>
+        {typeof remainingTasks === 'number' && typeof maxTasks === 'number' ? (
+          <Tag
+            label={t('events.tasks.remainingIndicator', '{{count}} / {{total}} tasks remaining', {
+              count: remainingTasks,
+              total: maxTasks,
+            })}
+          />
+        ) : null}
+      </XStack>
      {selectionMode ? (
        <MobileCard padding="$2.5" space="$2">
          <Text fontSize={12} fontWeight="700" color={text}>
@@ -977,7 +991,7 @@ export default function MobileEventTasksPage() {
            <YStack space="$1" flex={1} minWidth={180}>
              <XStack alignItems="center" space="$2" flexWrap="wrap">
                <Text fontSize="$sm" fontWeight="800" color={text}>
-                  {t('events.tasks.toggle.title', 'Photo tasks for this event')}
+                  {t('events.tasks.toggle.title', 'Photo task mode')}
                </Text>
                <PillBadge tone={tasksEnabled ? 'success' : 'warning'}>
                  {tasksEnabled
@@ -985,21 +999,13 @@ export default function MobileEventTasksPage() {
                    : t('events.tasks.toggle.inactive', 'INACTIVE')}
                </PillBadge>
              </XStack>
-              {showTaskDetails ? (
-                <Text fontSize="$xs" color={muted}>
-                  {t(
-                    'events.tasks.toggle.description',
-                    'Give guests optional photo tasks and prompts.'
-                  )}
-                </Text>
-              ) : null}
            </YStack>
            <XStack alignItems="center" space="$2">
              <Pressable
                onPress={() => setShowTaskDetails((prev) => !prev)}
                aria-label={t(
                  'events.tasks.toggle.description',
-                  'Give guests optional photo tasks and prompts.'
+                  'Control whether guests see mission cards and prompts.'
                )}
              >
                <XStack
@@ -1015,23 +1021,36 @@ export default function MobileEventTasksPage() {
                  <Info size={14} color={showTaskDetails ? primary : muted} />
                </XStack>
              </Pressable>
-              <Switch
-                size="$4"
-                checked={tasksEnabled}
-                onCheckedChange={handleTasksToggle}
-                aria-label={t('events.tasks.toggle.switchLabel', 'Photo tasks enabled')}
-                disabled={!canManageTasks || tasksToggleBusy}
-              >
-                <Switch.Thumb />
-              </Switch>
            </XStack>
          </XStack>
          {showTaskDetails ? (
-            <Text fontSize="$xs" color={muted}>
-              {tasksEnabled
-                ? t('events.tasks.toggle.onLabel', 'Guests see photo tasks')
-                : t('events.tasks.toggle.offLabel', 'Guest app shows photos only')}
-            </Text>
+            <YStack space="$2">
+              <Text fontSize="$xs" color={muted}>
+                {t(
+                  'events.tasks.toggle.description',
+                  'Control whether guests see mission cards and prompts.'
+                )}
+              </Text>
+              <XStack alignItems="center" justifyContent="space-between" space="$2">
+                <Text fontSize="$sm" fontWeight="700" color={text}>
+                  {t('events.tasks.toggle.switchLabel', 'Photo tasks for guests')}
+                </Text>
+                <Switch
+                  size="$4"
+                  checked={tasksEnabled}
+                  onCheckedChange={handleTasksToggle}
+                  aria-label={t('events.tasks.toggle.switchLabel', 'Photo tasks for guests')}
+                  disabled={!canManageTasks || tasksToggleBusy}
+                >
+                  <Switch.Thumb />
+                </Switch>
+              </XStack>
+              <Text fontSize="$xs" color={muted}>
+                {tasksEnabled
+                  ? t('events.tasks.toggle.onLabel', 'Mission cards active')
+                  : t('events.tasks.toggle.offLabel', 'Photo feed only')}
+              </Text>
+            </YStack>
          ) : null}
          {isMember && !canManageTasks ? (
            <Text fontSize="$xs" color={muted}>
--- a/resources/js/admin/mobile/tests/EventTasksPage.test.tsx
+++ b/resources/js/admin/mobile/tests/EventTasksPage.test.tsx
@@ -275,7 +275,7 @@ describe('MobileEventTasksPage', () => {
  it('renders the quick jump chips and photo task header', async () => {
    render(<MobileEventTasksPage />);

-    expect(await screen.findByText('Photo tasks for this event')).toBeInTheDocument();
+    expect(await screen.findByText('Photo task mode')).toBeInTheDocument();
    expect(screen.getByText('Quick jump')).toBeInTheDocument();
    expect(screen.getByText('assigned')).toBeInTheDocument();
    expect(screen.getByPlaceholderText('Search photo tasks')).toBeInTheDocument();
@@ -289,8 +289,8 @@ describe('MobileEventTasksPage', () => {
  it('toggles task details in the hero section', async () => {
    render(<MobileEventTasksPage />);

-    const detailsLabel = 'Give guests optional photo tasks and prompts.';
-    expect(await screen.findByText('Photo tasks for this event')).toBeInTheDocument();
+    const detailsLabel = 'Control whether guests see mission cards and prompts.';
+    expect(await screen.findByText('Photo task mode')).toBeInTheDocument();
    expect(screen.queryByText(detailsLabel)).not.toBeInTheDocument();

    fireEvent.click(screen.getByLabelText(detailsLabel));