Enhance audience management features with new components and API integrations

- Added `AssignCoursesModal`, `AudienceMemberRow`, `AudienceTable`, and related components for improved audience management UI. - Implemented audience invite actions including resend and revoke functionality. - Updated audience API to support importing members and assigning courses. - Refactored audience data handling to include status and invite management. - Improved overall user experience with pagination and selection features in the audience table.
2026-03-22 18:42:23 +01:00
parent e9c4082f89
commit 3919ff6c2f
157 changed files with 13183 additions and 872 deletions
@@ -0,0 +1,102 @@
+<script lang="ts">
+  import * as Dialog from '@cio/ui/base/dialog';
+  import { Button } from '@cio/ui/base/button';
+  import { CheckboxField, MultiSelectList } from '@cio/ui';
+  import { t } from '$lib/utils/functions/translations';
+  import { orgApi } from '$features/org/api/org.svelte';
+  import { snackbar } from '$features/ui/snackbar/store';
+  import { SvelteSet } from 'svelte/reactivity';
+
+  interface Course {
+    id: string;
+    title: string;
+  }
+
+  interface Props {
+    open: boolean;
+    selectedProfileIds: string[];
+    courses: Course[];
+    onclose: () => void;
+    onassigned: () => void;
+  }
+
+  let { open = $bindable(), selectedProfileIds, courses, onclose, onassigned }: Props = $props();
+
+  let fields = $state({
+    selectedCourseIds: new SvelteSet<string>(),
+    sendEmail: true
+  });
+  let isSubmitting = $state(false);
+
+  function toggleCourse(courseId: string) {
+    if (fields.selectedCourseIds.has(courseId)) {
+      fields.selectedCourseIds.delete(courseId);
+    } else {
+      fields.selectedCourseIds.add(courseId);
+    }
+  }
+
+  function handleClose() {
+    fields.selectedCourseIds.clear();
+    fields.sendEmail = true;
+    onclose();
+  }
+
+  async function handleSubmit() {
+    if (fields.selectedCourseIds.size === 0) {
+      snackbar.error('audience.assign.snackbar_no_courses');
+      return;
+    }
+
+    isSubmitting = true;
+
+    try {
+      await orgApi.assignAudienceToCourses({
+        profileIds: selectedProfileIds,
+        courseIds: [...fields.selectedCourseIds],
+        sendEmail: fields.sendEmail
+      });
+
+      fields.selectedCourseIds.clear();
+      fields.sendEmail = true;
+      onassigned();
+    } catch {
+      snackbar.error('audience.assign.snackbar_failed');
+    } finally {
+      isSubmitting = false;
+    }
+  }
+</script>
+
+<Dialog.Root bind:open onOpenChange={(v) => !v && handleClose()}>
+  <Dialog.Content class="sm:max-w-md">
+    <Dialog.Header>
+      <Dialog.Title>{$t('audience.assign.title')}</Dialog.Title>
+      <Dialog.Description>{$t('audience.assign.description')}</Dialog.Description>
+    </Dialog.Header>
+
+    <MultiSelectList
+      heading={$t('audience.assign.select_courses')}
+      emptyMessage={$t('audience.assign.select_courses_placeholder')}
+      items={courses.map((c) => ({ id: c.id, label: c.title || c.id }))}
+      isSelected={(id) => fields.selectedCourseIds.has(id)}
+      onToggle={toggleCourse}
+      namePrefix="assign-course"
+    />
+
+    <CheckboxField name="assign-send-email" label={$t('audience.assign.send_email')} bind:checked={fields.sendEmail} />
+
+    <Dialog.Footer class="mt-4">
+      <Button variant="outline" onclick={handleClose}>
+        {$t('audience.assign.cancel')}
+      </Button>
+      <Button
+        onclick={handleSubmit}
+        loading={isSubmitting}
+        disabled={isSubmitting || fields.selectedCourseIds.size === 0}
+      >
+        {$t('audience.assign.submit')}
+      </Button>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>