From 7c6e6bcc781238bdf4c4c20d7cba0d030597ab6f Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Tue, 23 Jun 2026 01:58:08 +0200
Subject: [PATCH 01/10] feat: use same component for both single and bulk
 assignment

---
 frontend/src/components/dashboard/Study.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/dashboard/Study.vue b/frontend/src/components/dashboard/Study.vue
index 7925801db..cca5a1a3d 100644
--- a/frontend/src/components/dashboard/Study.vue
+++ b/frontend/src/components/dashboard/Study.vue
@@ -61,7 +61,7 @@
     <BulkCloseModal v-if="modals.bulkConfirm" ref="bulkConfirmModal" @hide="modals.bulkConfirm = false"/>
     <StudyCloseModal ref="studyCloseModal" />
     <BulkAssignmentsModal v-if="modals.bulkAssignments" ref="bulkAssignmentsModal" @hide="modals.bulkAssignments = false"/>
-    <SingleAssignmentModal v-if="modals.singleAssignment" ref="singleAssignmentModal" @hide="modals.singleAssignment = false"/>
+    <BulkAssignmentsModal v-if="modals.singleAssignment" ref="singleAssignmentModal" :bulk="false" @hide="modals.singleAssignment = false"/>
     <InformationModal v-if="modals.information" ref="informationModal" @hide="modals.information = false"/>
     <SavedTemplatesModal v-if="modals.savedTemplates" ref="savedTemplatesModal" @hide="modals.savedTemplates = false"/>
   </span>
@@ -75,7 +75,6 @@ import StudySessionModal from "@/components/dashboard/study/StudySessionModal.vu
 import BasicButton from "@/basic/Button.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
 import BulkAssignmentsModal from "./study/BulkAssignmentModal.vue";
-import SingleAssignmentModal from "./study/SingleAssignmentModal.vue";
 import InformationModal from "@/basic/modal/InformationModal.vue";
 import BulkCloseModal from "@/components/dashboard/study/BulkCloseModal.vue";
 import StudyCloseModal from "@/components/dashboard/study/StudyCloseModal.vue";
@@ -98,7 +97,6 @@ export default {
     BasicButton,
     ConfirmModal,
     BulkAssignmentsModal,
-    SingleAssignmentModal,
     InformationModal,
     SavedTemplatesModal
   },

From 8162ffdc1b763d09ea65bd63528e63357d6c9224 Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Tue, 23 Jun 2026 02:29:13 +0200
Subject: [PATCH 02/10] refactor: change name of component to serve single and
 multiple assignment

---
 .../dashboard/study/AssignmentModal.vue       |  503 +++++++
 .../dashboard/study/BulkAssignmentModal.vue   | 1237 -----------------
 2 files changed, 503 insertions(+), 1237 deletions(-)
 create mode 100644 frontend/src/components/dashboard/study/AssignmentModal.vue
 delete mode 100644 frontend/src/components/dashboard/study/BulkAssignmentModal.vue

diff --git a/frontend/src/components/dashboard/study/AssignmentModal.vue b/frontend/src/components/dashboard/study/AssignmentModal.vue
new file mode 100644
index 000000000..21d8f02c7
--- /dev/null
+++ b/frontend/src/components/dashboard/study/AssignmentModal.vue
@@ -0,0 +1,503 @@
+<template>
+  <StepperModal
+      ref="assignmentStepper"
+      :steps="steps"
+      :validation="stepValid"
+      size="xl"
+      @submit="bulk ? createBulkAssignments() : createSingleAssignment()">
+    <template #title>
+      <h5 class="modal-title">{{ bulk ? 'Create Bulk Assignment' : 'Create Single Assignment' }}</h5>
+    </template>
+
+    <template v-if="templates.length === 0" #error>
+      <p class="text-center text-danger">There are not study templates available!</p>
+      <p class="text-center">Please create a study template to proceed!</p>
+    </template>
+
+    <!-- ─── Step 1: Template Selection ──────────────────────────────────────── -->
+    <template #step-1>
+      <TemplateSelectionStep
+          :key="`template-step-${stepResetKey}`"
+          ref="templateSelectionStep"
+          :modal-value="templateStepModalValue"
+          @update:modalValue="templateStepModalValue = $event"
+          @update:assignmentType="assignmentType = $event"
+          @update:workflowSteps="workflowSteps = $event"
+          @update:workflowStepsAssignment="workflowStepsAssignment = $event"
+          @update:template="template = $event"
+          @update:workflow="workflow = $event"
+          @update:isValid="templateValid = $event"
+      />
+    </template>
+
+    <!-- ─── Step 2: Workflow Mapping (study_session) | Assignment Selection (doc/sub) ── -->
+    <template #step-2>
+      <WorkflowMappingStep
+          v-if="stepContent[1] === 'workflow-mapping'"
+          :key="`workflow-mapping-step-${stepResetKey}`"
+          ref="workflowMappingStep"
+          :workflow-steps="workflowSteps"
+          :bulk="bulk"
+          :modal-value="workflowMappingStepModalValue"
+          @update:modalValue="workflowMappingStepModalValue = $event"
+          @update:isWorkflowMappingComplete="isWorkflowMappingComplete = $event"
+          @update:isValid="workflowMappingValid = $event"
+      />
+      <AssignmentSelectionStep
+          v-else
+          :key="`assignment-step2-${stepResetKey}`"
+          ref="assignmentSelectionStep2"
+          :modalValue="assignmentModalValue"
+          @update:modalValue="assignmentModalValue = $event"
+          @update:selectedAssignmentUserIds="selectedAssignmentUserIds = $event"
+          @update:isValid="assignmentSelectionValid = $event"
+      />
+    </template>
+
+    <!-- ─── Step 3: Session Selection (study_session) | Reviewer Selection (doc/sub) ─── -->
+    <template #step-3>
+      <AssignmentSelectionStep
+          v-if="stepContent[2] === 'session-selection'"
+          :key="`assignment-step3-${stepResetKey}`"
+          ref="assignmentSelectionStep3"
+          :modalValue="assignmentModalValue"
+          @update:modalValue="assignmentModalValue = $event"
+          @update:selectedAssignmentUserIds="selectedAssignmentUserIds = $event"
+          @update:isValid="assignmentSelectionValid = $event"
+      />
+      <ReviewerSelectionStep
+          v-else
+          :key="`reviewer-step3-${stepResetKey}`"
+          ref="reviewerSelectionStep3"
+          :selected-assignment-user-ids="selectedAssignmentUserIds"
+          :bulk="bulk"
+          :modalValue="selectedReviewer"
+          @update:selectedReviewer="selectedReviewer = $event"
+          @update:selectedReviewerRoles="selectedReviewerRoles = $event"
+          @update:isValid="reviewerSelectionValid = $event"
+      />
+    </template>
+
+    <!-- ─── Step 4: Reviewer Selection (session) | Distribution (non-session bulk) | Confirmation (non-session single) ─── -->
+    <template #step-4>
+      <ReviewerSelectionStep
+          v-if="stepContent[3] === 'reviewer-selection'"
+          :key="`reviewer-step4-${stepResetKey}`"
+          ref="reviewerSelectionStep4"
+          :selected-assignment-user-ids="selectedAssignmentUserIds"
+          :bulk="bulk"
+          :modalValue="selectedReviewer"
+          @update:selectedReviewer="selectedReviewer = $event"
+          @update:selectedReviewerRoles="selectedReviewerRoles = $event"
+          @update:isValid="reviewerSelectionValid = $event"
+      />
+      <DistributionStep
+          v-else-if="stepContent[3] === 'distribution'"
+          :key="`distribution-step4-${stepResetKey}`"
+          ref="distributionStep4"
+          :modal-value="distributionModalValue"
+          @update:reviewerSelectionMode="reviewerSelectionMode = $event"
+          @update:roleSelection="roleSelection = $event"
+          @update:reviewerSelection="reviewerSelection = $event"
+          @update:selectionValid="selectionValid = $event"
+          @update:numberOfReviews="numberOfReviews = $event"
+          @update:isValid="distributionValid = $event"
+      />
+      <ConfirmationStep
+          v-else
+          variant="doc-sub-single"
+      />
+    </template>
+
+    <!-- ─── Step 5: Distribution (session bulk) | Confirmation (session single or non-session bulk) ─── -->
+    <template #step-5>
+      <DistributionStep
+          v-if="stepContent[4] === 'distribution'"
+          :key="`distribution-step5-${stepResetKey}`"
+          ref="distributionStep5"
+          :modal-value="distributionModalValue"
+          @update:reviewerSelectionMode="reviewerSelectionMode = $event"
+          @update:roleSelection="roleSelection = $event"
+          @update:reviewerSelection="reviewerSelection = $event"
+          @update:selectionValid="selectionValid = $event"
+          @update:numberOfReviews="numberOfReviews = $event"
+          @update:isValid="distributionValid = $event"
+      />
+      <ConfirmationStep
+          v-else-if="assignmentType === 'study_session'"
+          variant="session-single"
+      />
+      <ConfirmationStep
+          v-else
+          variant="doc-sub-bulk"
+      />
+    </template>
+
+    <!-- ─── Step 6: Bulk confirmation for session+bulk (only rendered for 6-step flow) ─── -->
+    <template #step-6>
+      <ConfirmationStep variant="session-bulk" />
+    </template>
+  </StepperModal>
+</template>
+
+<script>
+import StepperModal from "@/basic/modal/StepperModal.vue";
+import { downloadObjectsAs } from "@/assets/utils";
+import { computed } from "vue";
+import TemplateSelectionStep from "./bulk-assignment/TemplateSelectionStep.vue";
+import WorkflowMappingStep from "./bulk-assignment/WorkflowMappingStep.vue";
+import AssignmentSelectionStep from "./bulk-assignment/AssignmentSelectionStep.vue";
+import ReviewerSelectionStep from "./bulk-assignment/ReviewerSelectionStep.vue";
+import DistributionStep from "./bulk-assignment/DistributionStep.vue";
+import ConfirmationStep from "./bulk-assignment/ConfirmationStep.vue";
+
+/**
+ * Modal for bulk creating assignments
+ * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang
+ */
+export default {
+  name: "ImportModal",
+  components: {
+    StepperModal,
+    TemplateSelectionStep,
+    WorkflowMappingStep,
+    AssignmentSelectionStep,
+    ReviewerSelectionStep,
+    DistributionStep,
+    ConfirmationStep,
+  },
+  props: {
+    bulk: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  subscribeTable: [
+    { table: "document", filter: [{ key: "readyForReview", value: true }] },
+    { table: "user" },
+    { table: "study", filter: [{ key: "template", value: true }] },
+    "submission",
+    { table: "template" },
+  ],
+  provide() {
+    return {
+      bulk: computed(() => this.bulk),
+      template: computed(() => this.template),
+      workflow: computed(() => this.workflow),
+      assignmentType: computed(() => this.assignmentType),
+      targetWorkflowId: computed(() => this.workflowMappingStepModalValue?.targetWorkflowId ?? null),
+      newStudyOwner: computed(() => this.workflowMappingStepModalValue?.newStudyOwner ?? 'session_owner'),
+      selectedAssignments: computed(() => this.assignmentModalValue),
+      selectedReviewer: computed(() => this.selectedReviewer),
+      reviewerSelectionMode: computed(() => this.reviewerSelectionMode),
+      workflowStepsAssignments: computed(() => this.workflowStepsAssignments),
+      numberOfReviews: computed(() => this.numberOfReviews),
+      reviewerSelectionModeFields: computed(() => this.reviewerSelectionModeFields),
+      reviewer: computed(() => this.reviewer),
+      documents: computed(() => this.documents),
+      roles: computed(() => this.roles),
+      roleSelection: computed(() => this.roleSelection),
+      reviewerSelection: computed(() => this.reviewerSelection),
+    };
+  },
+  data() {
+    return {
+
+      // Incremented on each reset to force step components to remount cleanly
+      stepResetKey: 0,
+
+      // ── Values emitted up from step components ──────────────────────────────
+
+      // Step 1: TemplateSelectionStep
+      assignmentType: 'document',
+      workflowSteps: [],
+      workflowStepsAssignment: [],
+      template: null,
+      workflow: null,
+      templateStepModalValue: {},
+
+      // Step 2: WorkflowMappingStep
+      workflowMappingStepModalValue: {},
+      isWorkflowMappingComplete: false,
+
+      // Step 2/3: AssignmentSelectionStep
+      assignmentModalValue: [],
+      selectedAssignmentUserIds: [],
+
+      // Step 3/4: ReviewerSelectionStep
+      selectedReviewer: [],
+      selectedReviewerRoles: [],
+
+      // Step 4/5: DistributionStep
+      reviewerSelectionMode: {},
+      roleSelection: {},
+      reviewerSelection: {},
+      selectionValid: false,
+      numberOfReviews: 0,
+
+      // Step validity (emitted from children)
+      templateValid: false,
+      workflowMappingValid: false,
+      assignmentSelectionValid: false,
+      reviewerSelectionValid: false,
+      distributionValid: false,
+    };
+  },
+  computed: {
+    // Store lookups used by parent (passed as props to ConfirmationStep and DistributionStep)
+    templates() {
+      return this.$store.getters["table/study/getFiltered"](item => item.template === true);
+    },
+    reviewer() {
+      return this.$store.getters["table/user/getAll"];
+    },
+    documents() {
+      return this.$store.getters["table/document/getFiltered"](d => d.readyForReview);
+    },
+    roles() {
+      return this.$store.getters["admin/getSystemRoles"] || [];
+    },
+    reviewerSelectionModeFields() {
+      const baseOptions = [
+        {
+          name: "Role-based selection (the number of documents that should be reviewed by each user of the selected roles)",
+          value: "role",
+        },
+        {
+          name: "Reviewer-based selection (distribute document between the selected reviewers)",
+          value: "reviewer",
+        },
+      ];
+      if (this.assignmentType === 'study_session') {
+        baseOptions.push({
+          name: "Session user-based selection (assign each study session to its original user)",
+          value: "session_user",
+        });
+      }
+      return [
+        {
+          key: "mode",
+          label: "Reviewer Selection Mode",
+          type: "select",
+          options: baseOptions,
+          required: true,
+        },
+      ];
+    },
+    stepContent() {
+      const isSession = this.assignmentType === 'study_session';
+      if (isSession) {
+        return this.bulk
+          ? ['template', 'workflow-mapping', 'session-selection', 'reviewer-selection', 'distribution', 'confirmation']
+          : ['template', 'workflow-mapping', 'session-selection', 'reviewer-selection', 'confirmation'];
+      }
+      return this.bulk
+        ? ['template', 'assignment-selection', 'reviewer-selection', 'distribution', 'confirmation']
+        : ['template', 'assignment-selection', 'reviewer-selection', 'confirmation'];
+    },
+    stepValid() {
+      return this.stepContent.map(panel => {
+        switch (panel) {
+          case 'template': return this.templateValid;
+          case 'workflow-mapping': return this.workflowMappingValid;
+          case 'assignment-selection': return this.assignmentSelectionValid;
+          case 'session-selection': return this.assignmentSelectionValid;
+          case 'reviewer-selection': return this.reviewerSelectionValid;
+          case 'distribution': return this.distributionValid;
+          case 'confirmation': return true;
+          default: return true;
+        }
+      });
+    },
+    steps() {
+      const isSession = this.assignmentType === 'study_session';
+      if (isSession) {
+        return [
+          { title: "Template Selection" },
+          { title: "Workflow Mapping" },
+          { title: "Study Session Selection" },
+          { title: "Reviewer Selection" },
+          ...(this.bulk ? [{ title: "Distribution" }] : []),
+          { title: "Confirmation" },
+        ];
+      }
+      const selectionTitle = this.assignmentType === 'submission' ? "Submission Selection" : "Document Selection";
+      return [
+        { title: "Template Selection" },
+        { title: selectionTitle },
+        { title: "Reviewer Selection" },
+        ...(this.bulk ? [{ title: "Distribution" }] : []),
+        { title: "Confirmation" },
+      ];
+    },
+    distributionModalValue() {
+      return {
+        reviewerSelectionMode: this.reviewerSelectionMode,
+        roleSelection: this.roleSelection,
+        reviewerSelection: this.reviewerSelection,
+      };
+    },
+    workflowStepsAssignments() {
+      if (this.assignmentType === 'submission') {
+        return this.assignmentModalValue.map(submission => {
+          return this.workflowSteps.map((c, index) => {
+            if (index === 0) {
+              const primaryDocId = this.getPrimaryDocumentId(submission.id);
+              return { documentId: primaryDocId, workflowStepId: c.id };
+            }
+            return { documentId: null, workflowStepId: c.id };
+          });
+        });
+      }
+      return this.assignmentModalValue.map(document => {
+        return this.workflowSteps.map((c, index) => ({
+          documentId: index === 0 ? document.id : null,
+          workflowStepId: c.id,
+        }));
+      });
+    },
+  },
+  methods: {
+    getPrimaryDocumentId(submissionId) {
+      const submission = this.$store.getters["table/submission/get"](submissionId);
+      const configuration = this.$store.getters["table/configuration/get"](submission.validationConfigurationId);
+      const docs = this.$store.getters["table/document/getFiltered"](
+          d => d.submissionId === submissionId && !d.deleted && d.type === 0
+      );
+      if (!docs || docs.length === 0) return null;
+      if (configuration && configuration.primaryDocument) {
+        const primaryDoc = docs.find(d => d.id === configuration.primaryDocument);
+        if (primaryDoc) return primaryDoc.id;
+      }
+      return docs[0].id;
+    },
+    open() {
+      this.reset();
+      this.$refs.assignmentStepper.open();
+    },
+    reset() {
+      this.stepResetKey++;
+
+      this.assignmentType = 'document';
+      this.workflowSteps = [];
+      this.workflowStepsAssignment = [];
+      this.template = null;
+      this.workflow = null;
+      this.templateStepModalValue = {};
+      this.workflowMappingStepModalValue = {};
+      this.isWorkflowMappingComplete = false;
+      this.assignmentModalValue = [];
+      this.selectedAssignmentUserIds = [];
+      this.selectedReviewer = [];
+      this.selectedReviewerRoles = [];
+      this.reviewerSelectionMode = {};
+      this.roleSelection = {};
+      this.reviewerSelection = {};
+      this.selectionValid = false;
+      this.numberOfReviews = 0;
+      this.templateValid = false;
+      this.workflowMappingValid = false;
+      this.assignmentSelectionValid = false;
+      this.reviewerSelectionValid = false;
+      this.distributionValid = false;
+    },
+    onSuccess() {
+      this.$refs.assignmentStepper.close();
+      this.eventBus.emit("toast", {
+        title: "Assignment created",
+        message: "The assignment has been created successfully",
+        variant: "success",
+      });
+    },
+    onError(res) {
+      this.$refs.assignmentStepper.stopProgress();
+      this.eventBus.emit("toast", {
+        title: "Failed to create assignment",
+        message: res.message,
+        variant: "danger",
+      });
+    },
+    createSingleAssignment() {
+      this.$refs.assignmentStepper.startProgress();
+
+      const socketData = {
+        template: this.template,
+        selectedAssignments: this.assignmentModalValue,
+        reviewer: this.selectedReviewer,
+        assignmentType: this.assignmentType,
+        enableEmailNotification: this.templateStepModalValue?.enableEmailNotification ?? false,
+      };
+
+      if (this.assignmentType === 'study_session') {
+        socketData.workflowMapping = this.workflowMappingStepModalValue?.workflowMapping;
+      } else {
+        socketData.documents = this.workflowStepsAssignments[0];
+      }
+
+      this.$socket.emit("assignmentCreateSingle", socketData, (res) => {
+        this.$refs.assignmentStepper.stopProgress();
+        if (res.success) {
+          this.onSuccess();
+        } else {
+          this.onError(res);
+        }
+      });
+    },
+    createBulkAssignments() {
+      const progressId = this.$refs.assignmentStepper.startProgress();
+
+      const socketData = {
+        template: this.template,
+        selectedReviewer: this.selectedReviewer,
+        selectedAssignments: this.assignmentModalValue,
+        reviewerSelection: this.reviewerSelection,
+        roleSelection: this.roleSelection,
+        mode: this.reviewerSelectionMode.mode,
+        roles: this.roles,
+        assignmentType: this.assignmentType,
+        enableEmailNotification: this.templateStepModalValue?.enableEmailNotification ?? false,
+        progressId: progressId,
+      };
+
+      if (this.assignmentType === 'study_session') {
+        socketData.targetWorkflowId = this.workflowMappingStepModalValue?.targetWorkflowId;
+        socketData.workflowMapping = this.workflowMappingStepModalValue?.workflowMapping;
+      } else {
+        socketData.documents = this.workflowStepsAssignments;
+      }
+
+      this.$socket.emit("assignmentCreateBulk", socketData, (res) => {
+        this.$refs.assignmentStepper.stopProgress();
+        if (res.success) {
+          if (this.reviewerSelectionMode.mode === 'role') {
+            const filename = "assignments";
+            const allUsers = this.reviewer;
+            const returnData = Object.keys(res.data).map(assignmentId => {
+              const assignmentUser = allUsers.find(u => u.id === Number(assignmentId));
+              if (!assignmentUser) {
+                console.error(`Assignment with ID ${assignmentId} not found.`);
+                return null;
+              }
+              const csv = {
+                assignedToName: `${assignmentUser.firstName} ${assignmentUser.lastName}`,
+                assignedToFirstName: assignmentUser.firstName,
+                assignedToLastName: assignmentUser.lastName,
+              };
+              res.data[assignmentId].forEach((reviewerId, index) => {
+                const reviewerUser = allUsers.find(u => u.id === Number(reviewerId));
+                csv[`reviewer_${index + 1}`] = reviewerUser
+                  ? `${reviewerUser.firstName} ${reviewerUser.lastName}` : '';
+              });
+              return csv;
+            });
+            downloadObjectsAs(returnData, filename, "csv");
+          }
+          this.onSuccess();
+        } else {
+          this.onError(res);
+        }
+      });
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/dashboard/study/BulkAssignmentModal.vue b/frontend/src/components/dashboard/study/BulkAssignmentModal.vue
deleted file mode 100644
index be3267575..000000000
--- a/frontend/src/components/dashboard/study/BulkAssignmentModal.vue
+++ /dev/null
@@ -1,1237 +0,0 @@
-<template>
-  <StepperModal
-      ref="assignmentStepper"
-      :steps="steps"
-      :validation="stepValid"
-      size="xl"
-      @submit="createAssignments">
-    <template #title>
-      <h5 class="modal-title">Create bulk assignment</h5>
-    </template>
-
-    <template v-if="templates.length === 0" #error>
-      <p class="text-center text-danger">There are not study templates available!</p>
-      <p class="text-center">Please create a study template to proceed!</p>
-    </template>
-
-    <template #step-1>
-      <BasicForm
-          ref="templateSelectionForm"
-          v-model="templateSelection"
-          :fields="templateSelectionFields"
-      />
-      <div class="mt-3"><strong>Workflow Steps:</strong></div>
-      <ul class="list-group">
-        <li
-            v-for="(workflowStep, index) in workflowSteps"
-            :key="workflowStep.id" class="list-group-item"
-            :class="(workflowStep.workflowStepDocument !== null) ? 'disabled': 'list-group-item-primary'">
-          Workflow Step {{ index + 1 }}:
-          {{ (workflowStep.stepType === 1) ? "Annotator" : (workflowStep.stepType === 2) ? "Editor" : "Unknown" }}
-        </li>
-      </ul>
-      <div class="mt-3">
-        <label class="form-label"><strong>Assignment should be based on:</strong></label>
-        <FormSelect
-            v-model="assignmentTypeSelection.type"
-            :options="assignmentTypeFields"
-        />
-      </div>
-      <div class="mt-3">
-        <div class="form-check">
-          <input
-            id="emailNotifyCheck"
-            v-model="enableEmailNotification"
-            type="checkbox"
-            class="form-check-input"
-          />
-          <label class="form-check-label" for="emailNotifyCheck">
-            <strong>Send email notification to reviewer</strong>
-          </label>
-        </div>
-      </div>
-    </template>
-
-    <template #step-2>
-      <div v-if="assignmentType === 'study_session'">
-        <h6 class="text-secondary">Target Workflow Selection</h6>
-        <div class="mb-3">
-          <label class="form-label"><strong>Select Target Workflow:</strong></label>
-          <FormSelect
-              v-model="targetWorkflowId"
-              :options="workflowOptions"
-          />
-        </div>
-
-        <div v-if="targetWorkflowId && targetWorkflowSteps.length > 0">
-          <h6 class="text-secondary mt-4">Workflow Step Mapping</h6>
-          <p class="text-muted">Map each source workflow step (from template) to a target workflow step:</p>
-
-          <div
-              v-for="(templateStep, index) in workflowSteps"
-              :key="templateStep.id"
-              class="mb-3"
-          >
-            <label class="form-label">
-              <strong>Source Step {{ index + 1 }} ({{ getStepTypeName(templateStep.stepType) }}) → Target Step:</strong>
-            </label>
-            <FormSelect
-                v-model="workflowMapping[templateStep.id]"
-                :options="{ options: getTargetStepOptions(templateStep.stepType, templateStep.id) }"
-            />
-          </div>
-        </div>
-
-
-        <div>
-          <h6 class="text-secondary mt-4">New Study Owner</h6>
-          <div class="form-check">
-            <input
-                id="owner-session"
-                v-model="newStudyOwner"
-                type="radio"
-                class="form-check-input"
-                value="session_owner"
-            />
-            <label class="form-check-label" for="owner-session">
-              User of the study session
-            </label>
-          </div>
-
-          <div class="form-check">
-            <input
-                id="owner-current-user"
-                v-model="newStudyOwner"
-                type="radio"
-                class="form-check-input"
-                value="study_owner"
-            />
-            <label class="form-check-label" for="owner-current-user">
-              Owner of the study
-            </label>
-          </div>
-        </div>
-      </div>
-      <div v-else>
-        <BasicTable
-            v-model="selectedAssignments"
-            :columns="currentTableColumns"
-            :data="currentTableData"
-            :options="documentTableOptions"
-            :max-table-height="400"
-        />
-      </div>
-    </template>
-
-    <template #step-3>
-      <div v-if="assignmentType === 'study_session'">
-        <BasicTable
-            v-model="selectedAssignments"
-            :columns="currentTableColumns"
-            :data="currentTableData"
-            :options="documentTableOptions"
-            :max-table-height="400"
-        />
-      </div>
-      <div v-else>
-        <div class="form-check">
-          <input id="filterHasDocumentsCheckbox" v-model="filterHasDocuments" class="form-check-input" type="checkbox">
-          <label class="form-check-label" for="filterHasDocumentsCheckbox">
-            Filter only users with documents
-          </label>
-          <br>
-          <input
-              id="filterSelectedDocumentsCheckbox" v-model="filterSelectedDocuments" class="form-check-input"
-              type="checkbox">
-          <label class="form-check-label" for="filterSelectedDocumentsCheckbox">
-            Filter only users from previous selected documents
-          </label>
-        </div>
-        <BasicTable
-            v-model="selectedReviewer"
-            :columns="reviewerTableColumns"
-            :data="reviewerTable"
-            :options="reviewerTableOptions"
-            :max-table-height="400"
-        />
-      </div>
-    </template>
-
-    <template #step-4>
-      <div v-if="assignmentType === 'study_session'">
-        <div class="form-check">
-          <input id="filterHasDocumentsCheckbox4" v-model="filterHasDocuments" class="form-check-input" type="checkbox">
-          <label class="form-check-label" for="filterHasDocumentsCheckbox4">
-            Filter only users with documents
-          </label>
-          <br>
-          <input
-              id="filterSelectedDocumentsCheckbox4" v-model="filterSelectedDocuments" class="form-check-input"
-              type="checkbox">
-          <label class="form-check-label" for="filterSelectedDocumentsCheckbox4">
-            Filter only users from previous selected documents
-          </label>
-        </div>
-        <BasicTable
-            v-model="selectedReviewer"
-            :columns="reviewerTableColumns"
-            :data="reviewerTable"
-            :options="reviewerTableOptions"
-            :max-table-height="400"
-        />
-      </div>
-      <div v-else>
-        <BasicForm
-            ref="selectionModeForm"
-            v-model="reviewerSelectionMode"
-            :fields="reviewerSelectionModeFields"
-        />
-
-        <div v-if="reviewerSelectionMode['mode'] === 'role'">
-          <div class="mt-2">
-            Define the number of reviews that each user of the role should perform:
-          </div>
-          <BasicForm
-              v-if="roleSelectionFields.length > 0"
-              ref="roleBasedSelectionForm"
-              v-model="roleSelection"
-              class="mt-4"
-              :fields="roleSelectionFields"
-          />
-          <div v-else>
-            <p class="text-center text-danger mt-4">There are no roles available!</p>
-            <p class="text-center">Please select reviewers with roles or change selection mode!</p>
-          </div>
-        </div>
-        <div v-else-if="reviewerSelectionMode['mode'] === 'reviewer'">
-          <div class="mt-2">
-            Distribute the documents between the selected reviewers:
-          </div>
-          <div class="mb-4">
-            Remaining Assignments: <strong>{{ remainingAssignments }}</strong>
-          </div>
-
-          <BasicForm
-              ref="reviewerBasedSelectionForm"
-              v-model="reviewerSelection"
-              :fields="reviewerSelectionFields"
-          />
-        </div>
-        <div v-else>
-          Please select a reviewer selection mode
-        </div>
-      </div>
-    </template>
-
-    <template #step-5>
-      <div v-if="assignmentType === 'study_session'">
-        <BasicForm
-            ref="selectionModeForm"
-            v-model="reviewerSelectionMode"
-            :fields="reviewerSelectionModeFields"
-        />
-
-        <div v-if="reviewerSelectionMode['mode'] === 'role'">
-          <div class="mt-2">
-            Define the number of reviews that each user of the role should perform:
-          </div>
-          <BasicForm
-              v-if="roleSelectionFields.length > 0"
-              ref="roleBasedSelectionForm"
-              v-model="roleSelection"
-              class="mt-4"
-              :fields="roleSelectionFields"
-          />
-          <div v-else>
-            <p class="text-center text-danger mt-4">There are no roles available!</p>
-            <p class="text-center">Please select reviewers with roles or change selection mode!</p>
-          </div>
-        </div>
-        <div v-else-if="reviewerSelectionMode['mode'] === 'reviewer'">
-          <div class="mt-2">
-            Distribute the documents between the selected reviewers:
-          </div>
-          <div class="mb-4">
-            Remaining Assignments: <strong>{{ remainingAssignments }}</strong>
-          </div>
-
-          <BasicForm
-              ref="reviewerBasedSelectionForm"
-              v-model="reviewerSelection"
-              :fields="reviewerSelectionFields"
-          />
-        </div>
-        <div v-else>
-          Please select a reviewer selection mode
-        </div>
-      </div>
-      <div v-else>
-        <p>
-          Are you sure you want to create the assignment with the following details?
-        </p>
-        <p v-if="reviewerSelectionMode.mode !== 'session_user'" class="text-danger">
-          <strong>Warning:</strong> The assignment process will make sure that a reviewer does not review their own
-          document.
-          <br>
-          This could lead to a failure in the assignment process, <br>
-          so make sure that the values are set correctly for a successful assignment.
-        </p>
-        <p v-else class="text-warning">
-          <strong>Warning:</strong> In session user-based selection mode, each selected reviewer must have a
-          corresponding study session.
-          <br>
-          <span v-if="unmatchedReviewersForSessions.length > 0" class="text-danger">
-            The following reviewers do not have matching study sessions:
-            <ul>
-              <li v-for="unmatchedReviewer in unmatchedReviewersForSessions" :key="unmatchedReviewer.id">
-                {{ unmatchedReviewer.firstName }} {{ unmatchedReviewer.lastName }} (ID: {{ unmatchedReviewer.id }})
-              </li>
-            </ul>
-          </span>
-          <span v-else>
-            All selected reviewers have matching study sessions.
-          </span>
-        </p>
-
-        <div class="container">
-          <div class="row mb-2">
-            <div class="col-2"><strong>Template:</strong></div>
-            <div class="col-8">{{ template.name }}</div>
-          </div>
-          <div class="row mb-2">
-            <div class="col-2"><strong>Workflow:</strong></div>
-            <div class="col-8">{{ workflow.name }}</div>
-          </div>
-          <div class="row mb-2">
-            <div class="col-2"><strong>Documents:</strong></div>
-            <div class="col-8">{{ selectedAssignments.length }}</div>
-          </div>
-          <div class="row mb-2">
-            <div class="col-2"><strong>Reviewers:</strong></div>
-            <div class="col-8">{{ selectedReviewer.length }}</div>
-          </div>
-          <div class="row mb-2">
-            <div class="col-2"><strong>Reviews to create:</strong></div>
-            <div class="col-8">{{ numberOfReviews }}</div>
-          </div>
-          <div class="row mb-2">
-            <div class="col-2"><strong>Selection Mode:</strong></div>
-            <div class="col-8">
-              {{
-                reviewerSelectionModeFields[0].options.find(field => field.value === reviewerSelectionMode.mode).name
-              }}
-            </div>
-          </div>
-          <div v-if="reviewerSelectionMode.mode === 'role'">
-            <div class="row mb-2">
-              <div class="col-2"><strong>Roles:</strong></div>
-              <div class="col-8">
-                <ul>
-                  <li v-for="(value, key) in listOfSelectedRoles" :key="key">
-                    - {{ value.role }}: {{ value.value }}
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-          <div v-if="reviewerSelectionMode.mode === 'reviewer'">
-            <div class="row mb-2">
-              <div class="col-2"><strong>Reviewers:</strong></div>
-              <div class="col-8">
-                <ul>
-                  <li v-for="(value, key) in listOfSelectedReviewers" :key="key">
-                    - {{ value.reviewer }}: {{ value.value }}
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-
-    <template #step-6>
-      <p>
-        Are you sure you want to create the assignment with the following details?
-      </p>
-      <p v-if="reviewerSelectionMode.mode !== 'session_user'" class="text-danger">
-        <strong>Warning:</strong> The assignment process will make sure that a reviewer does not review their own
-        document.
-        <br>
-        This could lead to a failure in the assignment process, <br>
-        so make sure that the values are set correctly for a successful assignment.
-      </p>
-      <p v-else class="text-warning">
-        <strong>Warning:</strong> In session user-based selection mode, each selected reviewer must have a corresponding
-        study session.
-        <br>
-        <span v-if="unmatchedReviewersForSessions.length > 0" class="text-danger">
-          The following reviewers do not have matching study sessions:
-          <ul>
-            <li v-for="unmatchedReviewer in unmatchedReviewersForSessions" :key="unmatchedReviewer.id">
-              {{ unmatchedReviewer.firstName }} {{ unmatchedReviewer.lastName }} (ID: {{ unmatchedReviewer.id }})
-            </li>
-          </ul>
-        </span>
-        <span v-else>
-          All selected reviewers have matching study sessions.
-        </span>
-      </p>
-
-      <div class="container">
-        <div class="row mb-2">
-          <div class="col-2"><strong>Template:</strong></div>
-          <div class="col-8">{{ template.name }}</div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-2"><strong>Workflow:</strong></div>
-          <div class="col-8">{{ workflow.name }}</div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-2"><strong>Documents:</strong></div>
-          <div class="col-8">{{ selectedAssignments.length }}</div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-2"><strong>Reviewers:</strong></div>
-          <div class="col-8">{{ selectedReviewer.length }}</div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-2"><strong>Reviews to create:</strong></div>
-          <div class="col-8">{{ numberOfReviews }}</div>
-        </div>
-        <div class="row mb-2">
-          <div class="col-2"><strong>Selection Mode:</strong></div>
-          <div class="col-8">
-            {{ reviewerSelectionModeFields[0].options.find(field => field.value === reviewerSelectionMode.mode).name }}
-          </div>
-        </div>
-        <div v-if="reviewerSelectionMode.mode === 'role'">
-          <div class="row mb-2">
-            <div class="col-2"><strong>Roles:</strong></div>
-            <div class="col-8">
-              <ul>
-                <li v-for="(value, key) in listOfSelectedRoles" :key="key">
-                  - {{ value.role }}: {{ value.value }}
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <div v-if="reviewerSelectionMode.mode === 'reviewer'">
-          <div class="row mb-2">
-            <div class="col-2"><strong>Reviewers:</strong></div>
-            <div class="col-8">
-              <ul>
-                <li v-for="(value, key) in listOfSelectedReviewers" :key="key">
-                  - {{ value.reviewer }}: {{ value.value }}
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </StepperModal>
-</template>
-
-<script>
-import BasicTable from "@/basic/Table.vue";
-import BasicForm from "@/basic/Form.vue";
-import StepperModal from "@/basic/modal/StepperModal.vue";
-import FormSelect from "@/basic/form/Select.vue";
-import {downloadObjectsAs} from "@/assets/utils";
-
-/**
- * Modal for bulk creating assignments
- * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang
- */
-export default {
-  name: "ImportModal",
-  subscribeTable: [{
-    table: "document",
-    filter: [{
-      key: "readyForReview",
-      value: true
-    }],
-  }, {
-    table: "user",
-  }, {
-    table: "study",
-    filter: [{
-      key: "template",
-      value: true
-    }]
-  },
-    "submission",
-    {
-      table: "template",
-    }
-  ],
-  components: {StepperModal, BasicTable, BasicForm, FormSelect},
-  data() {
-    return {
-      selectedReviewer: [],
-      reviewerSelectionMode: {},
-      roleSelection: {},
-      templateSelection: {},
-      assignmentTypeSelection: {},
-      selectedAssignments: [],
-      reviewerSelection: {},
-      targetWorkflowId: null,
-      workflowMapping: {},
-      filterHasDocuments: false,
-      filterSelectedDocuments: false,
-      enableEmailNotification: false,
-      newStudyOwner: 'session_owner',
-      documentTableOptions: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        selectableRows: true,
-        scrollY: true,
-        scrollX: true,
-        onlyOneRowSelectable: false,
-        search: true,
-        pagination: 10,
-      },
-      reviewerTableOptions: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        selectableRows: true,
-        scrollY: true,
-        scrollX: true,
-        onlyOneRowSelectable: false,
-        search: true,
-        pagination: 10,
-      },
-    };
-  },
-  computed: {
-    assignmentType() {
-      return this.assignmentTypeSelection.type || 'document';
-    },
-    stepValid() {
-      if (this.assignmentType === 'study_session') {
-        return [
-          this.workflowStepsAssignment.length !== 0 && !!this.assignmentType,
-          !!this.targetWorkflowId && this.isWorkflowMappingComplete,
-          this.selectedAssignments.length > 0,
-          this.selectedReviewer.length > 0,
-          this.selectionValid,
-          this.unmatchedReviewersForSessions.length === 0
-        ];
-      }
-      return [
-        this.workflowStepsAssignment.length !== 0 && !!this.assignmentType,
-        this.selectedAssignments.length > 0,
-        this.selectedReviewer.length > 0,
-        this.selectionValid,
-        true
-      ];
-    },
-    isWorkflowMappingComplete() {
-      if (!this.targetWorkflowId) return false;
-      return this.workflowSteps.every((step) => {
-        return this.workflowMapping[step.id] !== undefined && this.workflowMapping[step.id] !== null;
-      });
-    },
-    selectionValid() {
-      if (this.reviewerSelectionMode && this.reviewerSelectionMode.mode === 'reviewer') {
-        return this.remainingAssignments === 0;
-      } else if (this.reviewerSelectionMode && this.reviewerSelectionMode.mode === 'role') {
-        return Object.values(this.roleSelection).map((value) => parseInt(value, 0)).reduce((a, b) => a + b, 0) > 0;
-      } else if (this.reviewerSelectionMode && this.reviewerSelectionMode.mode === 'session_user') {
-        // For session_user mode, no additional validation needed
-        return true;
-      }
-      return false;
-    },
-    templates() {
-      return this.$store.getters["table/study/getFiltered"](item => item.template === true);
-    },
-    template() {
-      return this.$store.getters["table/study/get"](this.templateSelection.template);
-    },
-    workflow() {
-      return this.$store.getters["table/workflow/get"](this.template.workflowId);
-    },
-    workflowSteps() {
-      if (!this.template) return [];
-      return this.$store.getters["table/workflow_step/getFiltered"](item => item.workflowId === this.template.workflowId);
-    },
-    workflowStepsAssignment() {
-      return this.workflowSteps.filter(step => step.stepType === 1 && step.workflowStepDocument === null);
-    },
-    workflowStepsAssignments() {
-      if (this.assignmentType === 'submission') {
-        return this.selectedAssignments.map((submission) => {
-          return this.workflowSteps.map((c, index) => {
-            if (index === 0) {
-              const primaryDocId = this.getPrimaryDocumentId(submission.id);
-              return {
-                documentId: primaryDocId,
-                workflowStepId: c.id
-              };
-            }
-            return {
-              documentId: null,
-              workflowStepId: c.id
-            };
-          });
-        });
-      } else {
-        return this.selectedAssignments.map((document) => {
-          return this.workflowSteps.map((c, index) => {
-            return {
-              documentId: (index === 0) ? document.id : null,
-              workflowStepId: c.id
-            }
-          });
-        });
-      }
-    },
-    numberOfReviews() {
-      if (this.reviewerSelectionMode.mode === 'role') {
-        return Object.values(this.roleSelection).map((value) => parseInt(value, 0)).reduce((a, b) => a + b, 0) * this.selectedAssignments.length
-      } else {
-        return Object.values(this.reviewerSelection).map((value) => parseInt(value, 0)).reduce((a, b) => a + b, 0)
-      }
-    },
-    documents() {
-      return this.$store.getters["table/document/getFiltered"]((d) => d.readyForReview);
-    },
-    submissions() {
-      return this.$store.getters["table/submission/getAll"];
-    },
-    currentTableData() {
-      if (this.assignmentType === 'submission') return this.submissionsTable;
-      if (this.assignmentType === 'study_session') return this.studySessionsTable;
-      return this.documentsTable;
-    },
-    currentTableColumns() {
-      if (this.assignmentType === 'submission') return this.submissionColumns;
-      if (this.assignmentType === 'study_session') return this.studySessionsTableColumns;
-      return this.documentsTableColumns;
-    },
-    studySessionsTable() {
-      if (!this.targetWorkflowId) return [];
-
-      const sessions = this.$store.getters["table/study_session/getAll"] || [];
-      return sessions
-          .filter(session => {
-            const study = this.$store.getters["table/study/get"](session.studyId);
-            return study && study.workflowId === this.targetWorkflowId;
-          })
-          .map(session => {
-            const study = this.$store.getters["table/study/get"](session.studyId);
-            const user = this.$store.getters["table/user/get"](session.userId);
-            const studyOwner = this.$store.getters["table/user/get"](study.userId);
-            const submission = this.getSubmission(session.studyId);
-            return {
-              id: session.id,
-              studyId: session.studyId,
-              userId: this.newStudyOwner === 'session_owner' ? user.id : studyOwner.id,
-              completeUserName: user ? `${user.firstName} ${user.lastName}` : 'Unknown User',
-              firstName: user ? user.firstName : 'Unknown',
-              lastName: user ? user.lastName : 'Unknown',
-              studyCompleteUserName: studyOwner ? `${studyOwner.firstName} ${studyOwner.lastName}` : 'Unknown User',
-              studyUserId: studyOwner.userId,
-              studyFirstName: studyOwner ? studyOwner.firstName : 'Unknown',
-              studyLastName: studyOwner ? studyOwner.lastName : 'Unknown',
-              workflowType: this.getWorkflowType(study.workflowId),
-              submissionGroup: submission && submission.group ? submission.group : 'N/A',
-              status: session.end === null ? "Running" : "Finished",
-              createdAt: new Date(session.createdAt).toLocaleString(),
-            };
-          });
-    },
-    studySessionsTableColumns() {
-      return [
-        {name: "ID", key: "id"},
-        {name: "Session User Name", key: "completeUserName", sortable: true},
-        {name: "Study Owner User Name", key: "studyCompleteUserName", sortable: true},
-        {name: "Workflow Type", key: "workflowType", sortable: true},
-        {name: "Created At", key: "createdAt", sortable: true},
-        {name: "Submission Group", key: "submissionGroup", sortable: true, filter: this.groupFilterOptions},
-        {
-          name: "Status",
-          key: "status",
-          type: "badge",
-          sortable: true,
-          typeOptions: {
-            keyMapping: {
-              Running: "Running",
-              Finished: "Finished",
-            },
-            classMapping: {
-              Running: "bg-primary",
-              Finished: "bg-success",
-            }
-          }
-        },
-      ];
-    },
-    documentsTable() {
-      return this.documents.filter((d) => d.type === 0).map((d) => {
-        let newD = {...d};
-        newD.type = d.type === 0 ? "PDF" : "HTML";
-        const user = this.$store.getters["table/user/get"](d.userId)
-        newD.firstName = (user) ? user.firstName : "Unknown";
-        newD.lastName = (user) ? user.lastName : "Unknown";
-        return newD;
-      })
-    },
-    documentsTableColumns() {
-      return [
-        {name: "ID", key: "id"},
-        {name: "Document", key: "name"},
-        {name: "First Name", key: "firstName"},
-        {name: "Last Name", key: "lastName"},
-      ]
-    },
-    submissionsTable() {
-      return this.submissions.map((s) => {
-        let newS = {...s};
-        const user = this.$store.getters["table/user/get"](s.userId);
-        newS.name = s.name || `Submission ${s.id}`;
-        newS.userName = user ? user.userName : "N/A";
-        newS.firstName = user ? user.firstName : "Unknown";
-        newS.lastName = user ? user.lastName : "Unknown";
-        newS.group = (s.group !== null && s.group !== undefined && s.group !== '') ? s.group : '';
-        return newS;
-      });
-    },
-    submissionColumns() {
-      return [
-        {name: "ID", key: "id"},
-        {name: "User Name", key: "userName"},
-        {name: "First Name", key: "firstName"},
-        {name: "Last Name", key: "lastName"},
-        {name: "Group ID", key: "group", filter: this.groupFilterOptions},
-        {name: "Created At", key: "createdAt"},
-      ]
-    },
-    reviewerTable() {
-      return this.reviewer.map((r) => {
-        let newR = {...r};
-        newR.studySessions = this.userStudySessions(r.id).filter((s) => this.isStudyClosed(s.studyId)).length;
-        newR.documents = this.documents.filter((d) => d.userId === r.id).length;
-        newR.rolesNames = (r.roles || [])
-            .map((role) => {
-              const foundRole = (this.roles || []).find((roleObj) => roleObj.id === role);
-              return foundRole ? foundRole.name : null;
-            })
-            .filter(name => name !== null)
-            .join(", ");
-        return newR;
-      })
-          .filter((reviewer) => {
-            if (!this.filterHasDocuments && !this.filterSelectedDocuments) {
-              return true;
-            }
-            if (this.filterHasDocuments && reviewer.documents < 1) {
-              return false;
-            }
-            return !(this.filterSelectedDocuments && !this.selectedAssignmentUserIds.includes(reviewer.id));
-          })
-    },
-    selectedAssignmentUserIds() {
-      if (this.newStudyOwner !== 'study_owner') {
-        return this.selectedAssignments.map((assignment) => {
-          const study = this.$store.getters["table/study/get"](assignment.studyId);
-          return study ? study.userId : null;
-        }).filter(userId => userId !== null);
-      } else {
-        return this.selectedAssignments.map((assignment) => assignment.userId);
-      }
-    },
-    roles() {
-      return this.$store.getters["admin/getSystemRoles"] || [];
-    },
-    reviewerRoles() { // unique roles of all possible reviewers
-      return [...new Set(this.reviewerTable.flatMap(obj => {
-        return obj.rolesNames.split(/,\s*/).filter(n => n !== "");
-      }))];
-    },
-    selectedReviewerRoles() { // unique roles assigned to reviewers
-      return [...new Set(this.selectedReviewer.flatMap(obj => obj.roles))];
-    },
-    reviewerTableColumns() {
-      return [
-        {name: "ID", key: "id"},
-        {name: "extId", key: "extId"},
-        {name: "First Name", key: "firstName"},
-        {name: "Last Name", key: "lastName"},
-        {name: "Number of Assignments", key: "studySessions"},
-        {
-          name: "Documents",
-          key: "documents",
-          filter: {
-            type: "numeric",
-            defaultOperator: "gte",
-            defaultValue: 0,
-          },
-        },
-        {
-          name: "Roles",
-          key: "rolesNames",
-          filter: this.reviewerRoles.map(r => ({key: r, name: r})),
-        },
-      ]
-    },
-    groupFilterOptions() {
-      const groups = new Set();
-      let hasEmptyGroups = false;
-
-      (this.submissionsTable || []).forEach((s) => {
-        if (s && s.group !== null && s.group !== undefined && s.group !== '') {
-          groups.add(String(s.group));
-        } else {
-          hasEmptyGroups = true;
-        }
-      });
-
-      const options = Array.from(groups)
-          .sort((a, b) => {
-            const na = Number(a);
-            const nb = Number(b);
-            if (!Number.isNaN(na) && !Number.isNaN(nb)) return na - nb;
-            return a.localeCompare(b);
-          })
-          .map((g) => ({key: g, name: g}));
-
-      if (hasEmptyGroups) {
-        options.unshift({key: '', name: 'No GroupID'});
-      }
-
-      return options;
-    },
-    reviewer() {
-      return this.$store.getters["table/user/getAll"];
-    },
-    steps() {
-      if (this.assignmentType === 'study_session') {
-        return [
-          {title: "Template Selection"},
-          {title: "Workflow Mapping"},
-          {title: "Study Session Selection"},
-          {title: "Reviewer Selection"},
-          {title: "Distribution"},
-          {title: "Confirmation"}
-        ];
-      }
-      return [
-        {title: "Template Selection"},
-        {title: "Document Selection"},
-        {title: "Reviewer Selection"},
-        {title: "Distribution"},
-        {title: "Confirmation"}
-      ];
-    },
-    workflowOptions() {
-      return {
-        options: this.$store.getters["table/workflow/getAll"].map(workflow => ({
-          name: workflow.name,
-          value: workflow.id,
-        }))
-      };
-    },
-    targetWorkflowSteps() {
-      if (!this.targetWorkflowId) return [];
-      return this.$store.getters["table/workflow_step/getFiltered"](
-          item => item.workflowId === this.targetWorkflowId
-      ) || [];
-    },
-    reviewerNumberOfAssignments() {
-      return Object.values(this.reviewerSelection).map((value) => parseInt(value, 0)).reduce((a, b) => a + b, 0)
-    },
-    remainingAssignments() {
-      return this.selectedAssignments.length - this.reviewerNumberOfAssignments;
-    },
-    listOfSelectedRoles() {
-      return Object.keys(this.roleSelection).map((key) => {
-        return {
-          role: this.roles.find((role) => role.id === parseInt(key)).name,
-          value: this.roleSelection[key]
-        }
-      })
-    },
-    listOfSelectedReviewers() {
-      return Object.keys(this.reviewerSelection).map((key) => {
-        return {
-          reviewer: this.reviewer.find(reviewer => reviewer.id === parseInt(key)).firstName + " " + this.reviewer.find(reviewer => reviewer.id === parseInt(key)).lastName,
-          value: this.reviewerSelection[key]
-        }
-      })
-    },
-    unmatchedReviewersForSessions() {
-      if (this.assignmentType !== 'study_session' || this.reviewerSelectionMode.mode !== 'session_user') {
-        return [];
-      }
-
-      const selectedSessionUserIds = new Set(
-          this.selectedAssignments.map(session => {
-            const studySession = this.getStudySession(session.id);
-            return studySession ? studySession.userId : null;
-          }).filter(userId => userId !== null)
-      );
-
-      return this.selectedReviewer.filter(reviewer => {
-        return !selectedSessionUserIds.has(reviewer.id);
-      });
-    },
-    templateSelectionFields() {
-      return [
-        {
-          key: "template",
-          label: "Template",
-          type: "select",
-          options: this.templates.map(template => ({
-            name: template.name,
-            value: template.id,
-          })),
-          required: true,
-        },
-      ]
-    },
-    assignmentTypeFields() {
-      return {
-        options: [
-          {value: 'document', name: 'Documents'},
-          {value: 'submission', name: 'Submissions'},
-          {value: 'study_session', name: 'Study Sessions'}
-        ]
-      };
-    },
-    emailTemplates() {
-      const currentUserId = this.$store.getters["auth/getUserId"];
-      return this.$store.getters["table/template/getAll"]
-        .filter(t => t.type === 3 && !t.deleted && t.userId === currentUserId);
-    },
-    emailTemplateOptions() {
-      return {
-        options: [
-          {value: null, name: 'None (no email will be sent)'},
-          ...this.emailTemplates.map(t => ({
-            value: t.id,
-            name: t.name
-          }))
-        ]
-      };
-    },
-    reviewerSelectionModeFields() {
-      const baseOptions = [
-        {
-          name: "Role-based selection (the number of documents that should be reviewed by each user of the selected roles)",
-          value: "role"
-        },
-        {name: "Reviewer-based selection (distribute document between the selected reviewers)", value: "reviewer"},
-      ];
-
-      // Add session_user option only for study_session assignment type
-      if (this.assignmentType === 'study_session') {
-        baseOptions.push({
-          name: "Session user-based selection (assign each study session to its original user)",
-          value: "session_user"
-        });
-      }
-
-      return [
-        {
-          key: "mode",
-          label: "Reviewer Selection Mode",
-          type: "select",
-          options: baseOptions,
-          required: true,
-        },
-      ]
-    },
-    roleSelectionFields() {
-      return this.selectedReviewerRoles.map(roleId => ({
-        key: this.roles.find((role) => role.id === roleId).id,
-        label: "Number of reviews for role: " + this.roles.find((role) => role.id === roleId).name,
-        type: "slider",
-        class: 'custom-slider-class',
-        min: 0,
-        max: 10,
-        step: 1,
-        unit: 'review(s)'
-      }));
-    },
-    reviewerSelectionFields() {
-      return this.selectedReviewer.map(user => ({
-        key: user.id,
-        label: "Number of reviews for user: " + user.firstName + " " + user.lastName,
-        type: "slider",
-        class: 'custom-slider-class',
-        min: 0,
-        max: Number(this.remainingAssignments + Number(this.reviewerSelection[user.id])),
-        step: 1,
-        unit: 'review(s)'
-      }));
-    },
-  },
-  watch: {
-    selectedReviewer: {
-      handler() {
-        this.reviewerSelection = {};
-        this.roleSelection = {};
-      },
-      deep: true
-    },
-    assignmentType(newType, oldType) {
-      if (oldType && newType !== oldType) {
-        this.selectedAssignments = [];
-      }
-    }
-  },
-  methods: {
-    getSubmission(studyId) {
-      const studySteps = this.$store.getters["table/study_step/getFiltered"](
-          (s) => s.studyId === studyId
-      ) || [];
-      for (const step of studySteps) {
-        if (step.stepType === 1 && step.documentId !== null) {
-          let document = this.$store.getters["table/document/get"](step.documentId);
-
-          while (document && document.parentDocumentId !== null) {
-            document = this.$store.getters["table/document/get"](document.parentDocumentId);
-          }
-
-          if (document && document.submissionId) {
-            const submission = this.$store.getters["table/submission/get"](document.submissionId);
-            if (submission) {
-              return submission;
-            }
-          }
-        }
-      }
-
-      return null;
-    },
-    getWorkflowType(workflowId) {
-      const workflow = this.$store.getters["table/workflow/get"](workflowId);
-      return workflow ? workflow.name : "Unknown";
-    },
-    getStepTypeName(stepType) {
-      switch (stepType) {
-        case 1:
-          return 'Annotator';
-        case 2:
-          return 'Editor';
-        default:
-          return 'Unknown';
-      }
-    },
-    getTargetStepOptions(stepType, currentStepId) {
-      // First, order the target workflow steps based on workflowStepPrevious
-      const orderedSteps = [];
-      const stepPositionMap = new Map(); // Maps step.id to its position (1-based)
-      const nextMap = new Map(this.targetWorkflowSteps.map(s => [s.workflowStepPrevious, s]));
-
-      // Find the first step (where workflowStepPrevious is null)
-      let current = this.targetWorkflowSteps.find(s => s.workflowStepPrevious === null);
-
-      // Build ordered list by following the chain and track positions
-      let position = 1;
-      while (current) {
-        orderedSteps.push(current);
-        stepPositionMap.set(current.id, position);
-        current = nextMap.get(current.id);
-        position++;
-      }
-
-      // Filter by stepType and create options with correct step numbers
-      const options = orderedSteps
-          .filter(step => step.stepType === stepType)
-          .map((step) => ({
-            name: `<Workflow> Step ${stepPositionMap.get(step.id)} (${this.getStepTypeName(step.stepType)})`,
-            value: step.id,
-          }));
-
-      // Add "Previous Submission Document" placeholder only if:
-      // 1. Current step is Annotator (type 1), AND
-      // 2. Previous step in SOURCE workflow is also Annotator (type 1)
-      if (stepType === 1 && currentStepId) {
-        const currentSourceStep = this.workflowSteps.find(s => s.id === currentStepId);
-        if (currentSourceStep && currentSourceStep.workflowStepPrevious) {
-          const previousSourceStep = this.workflowSteps.find(
-              s => s.id === currentSourceStep.workflowStepPrevious
-          );
-          if (previousSourceStep && previousSourceStep.stepType === 1) {
-            options.unshift({
-              name: '<Document> Revised Document',
-              value: 'previousSubmission',
-            });
-          }
-        }
-      }
-
-      return options;
-    },
-    userStudySessions(userId) {
-      return this.$store.getters["table/study_session/getFiltered"](
-          (s) => s.userId === userId
-      );
-    },
-    isStudyClosed(studyId) {
-      const study = this.$store.getters["table/study/get"](studyId);
-      if (!study) {
-        return false;
-      }
-      return study.closed === null ? true : false;
-    },
-    getStudySession(sessionId) {
-      return this.$store.getters["table/study_session/get"](sessionId);
-    },
-    getPrimaryDocumentId(submissionId) {
-      const submission = this.$store.getters["table/submission/get"](submissionId);
-      const configuration = this.$store.getters["table/configuration/get"](submission.validationConfigurationId);
-      const docs = this.$store.getters["table/document/getFiltered"](
-          (d) => d.submissionId === submissionId && !d.deleted && d.type === 0
-      );
-
-      if (!docs || docs.length === 0) return null;
-
-      // If configuration specifies a primary document key, try to use it
-      if (configuration && configuration.primaryDocument) {
-        const primaryDoc = docs.find(d => d.id === configuration.primaryDocument);
-        if (primaryDoc) return primaryDoc.id;
-      }
-
-      // Otherwise, return the first PDF document
-      return docs[0].id;
-    },
-    open() {
-      this.reset();
-      this.$refs.assignmentStepper.open();
-    },
-    reset() {
-      this.reviewerSelection = {};
-      this.roleSelection = {};
-      this.selectedReviewer = [];
-      this.selectedAssignments = [];
-      this.assignmentTypeSelection = {};
-      this.emailTemplateSelection = null;
-      this.targetWorkflowId = null;
-      this.workflowMapping = {};
-    },
-    createAssignments() {
-      // Start progress tracking with a unique ID
-      const progressId = this.$refs.assignmentStepper.startProgress();
-
-      const socketData = {
-        template: this.template,
-        selectedReviewer: this.selectedReviewer,
-        selectedAssignments: this.selectedAssignments,
-        reviewerSelection: this.reviewerSelection,
-        roleSelection: this.roleSelection,
-        mode: this.reviewerSelectionMode.mode,
-        roles: this.roles,
-        assignmentType: this.assignmentType,
-        enableEmailNotification: this.enableEmailNotification,
-        progressId: progressId, // Pass progress ID to backend for progress updates
-      };
-
-      // Add workflowMapping for study_session, documents for others
-      if (this.assignmentType === 'study_session') {
-        socketData.targetWorkflowId = this.targetWorkflowId;
-        socketData.workflowMapping = this.workflowMapping;
-      } else {
-        socketData.documents = this.workflowStepsAssignments;
-      }
-
-      this.$socket.emit("assignmentCreateBulk", socketData, (res) => {
-        this.$refs.assignmentStepper.stopProgress();
-        if (res.success) {
-          if (this.reviewerSelectionMode.mode === 'role') {
-
-            const filename = "assignments";
-            const returnData = Object.keys(res.data).map((assignmentId) => {
-              let assignment = null;
-              if (this.assignmentType === 'document') {
-                assignment = this.documentsTable.find((document) => document.id === Number(assignmentId));
-              } else {
-                assignment = this.submissionsTable.find((submission) => submission.id === Number(assignmentId));
-              }
-              if (!assignment) {
-                console.error(`Assignment with ID ${assignmentId} not found.`);
-                return null;
-              }
-
-              const assignmentUser = this.reviewer.find((reviewer) => reviewer.id === assignment.userId);
-              const reviewer = res.data[assignmentId];
-
-              const csv = {
-                "assignedToName": assignmentUser.firstName + " " + assignmentUser.lastName,
-                "assignedToFirstName": assignmentUser.firstName,
-                "assignedToLastName": assignmentUser.lastName,
-              }
-
-              reviewer.forEach((reviewerId, index) => {
-                const reviewerUser = this.reviewer.find((reviewer) => reviewer.id === Number(reviewerId));
-                csv[`reviewer_${index + 1}`] = reviewerUser.firstName + " " + reviewerUser.lastName;
-              });
-
-              return csv;
-            });
-
-            downloadObjectsAs(returnData, filename, "csv");
-          }
-          this.$refs.assignmentStepper.close();
-          this.eventBus.emit("toast", {
-            title: "Assignment created",
-            message: "The assignment has been created successfully",
-            variant: "success",
-          });
-        } else {
-          this.eventBus.emit("toast", {
-            title: "Failed to create assignment",
-            message: res.message,
-            variant: "danger",
-          });
-        }
-      })
-    }
-  },
-
-}
-</script>
-
-<style scoped>
-input {
-  display: block;
-  margin-bottom: 10px;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  margin: 5px 0;
-  cursor: pointer;
-}
-
-li:hover {
-  background-color: #f0f0f0;
-}
-
-button {
-  margin-left: 10px;
-}
-
-.list-group-item {
-  cursor: default;
-}
-
-.list-group-item:hover {
-  background-color: transparent;
-}
-</style>
\ No newline at end of file

From 18fd823aa4b8e31410a48affe4439c45a7f33be0 Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Tue, 23 Jun 2026 02:30:14 +0200
Subject: [PATCH 03/10] refactor: create a step tempale for each step in the
 assignment creation

---
 .../AssignmentSelectionStep.vue               | 275 ++++++++++++++++++
 .../bulk-assignment/ConfirmationStep.vue      | 181 ++++++++++++
 .../bulk-assignment/DistributionStep.vue      | 164 +++++++++++
 .../bulk-assignment/ReviewerSelectionStep.vue | 161 ++++++++++
 .../bulk-assignment/TemplateSelectionStep.vue | 173 +++++++++++
 .../bulk-assignment/WorkflowMappingStep.vue   | 182 ++++++++++++
 6 files changed, 1136 insertions(+)
 create mode 100644 frontend/src/components/dashboard/study/bulk-assignment/AssignmentSelectionStep.vue
 create mode 100644 frontend/src/components/dashboard/study/bulk-assignment/ConfirmationStep.vue
 create mode 100644 frontend/src/components/dashboard/study/bulk-assignment/DistributionStep.vue
 create mode 100644 frontend/src/components/dashboard/study/bulk-assignment/ReviewerSelectionStep.vue
 create mode 100644 frontend/src/components/dashboard/study/bulk-assignment/TemplateSelectionStep.vue
 create mode 100644 frontend/src/components/dashboard/study/bulk-assignment/WorkflowMappingStep.vue

diff --git a/frontend/src/components/dashboard/study/bulk-assignment/AssignmentSelectionStep.vue b/frontend/src/components/dashboard/study/bulk-assignment/AssignmentSelectionStep.vue
new file mode 100644
index 000000000..16b5ef72c
--- /dev/null
+++ b/frontend/src/components/dashboard/study/bulk-assignment/AssignmentSelectionStep.vue
@@ -0,0 +1,275 @@
+<template>
+  <div>
+    <BasicTable
+        v-model="selectedAssignments"
+        :columns="currentTableColumns"
+        :data="currentTableData"
+        :options="documentTableOptions"
+        :max-table-height="400"
+    />
+  </div>
+</template>
+
+<script>
+import BasicTable from "@/basic/Table.vue";
+
+export default {
+  name: "AssignmentSelectionStep",
+  subscribeTable: [
+    { table: "document" },
+    { table: "submission" },
+    { table: "study_session" },
+    { table: "study" },
+    { table: "study_step" },
+  ],
+  components: { BasicTable },
+  inject: {
+    assignmentType: { type: String, required: false, default: 'document' },
+    bulk: { type: Boolean, required: false, default: true },
+    newStudyOwner: { type: String, required: false, default: 'session_owner' },
+    targetWorkflowId: { required: false, default: null },
+  },
+  props: {
+    modalValue: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      selectedAssignments: this.modalValue ? [...this.modalValue] : [],
+    };
+  },
+  computed: {
+    documentTableOptions() {
+      return {
+        striped: true,
+        hover: true,
+        bordered: false,
+        borderless: false,
+        small: false,
+        selectableRows: true,
+        scrollY: true,
+        scrollX: true,
+        onlyOneRowSelectable: !this.bulk,
+        singleSelect: !this.bulk,
+        search: true,
+        pagination: 10,
+      };
+    },
+    documents() {
+      return this.$store.getters["table/document/getFiltered"](d => d.readyForReview);
+    },
+    submissions() {
+      return this.$store.getters["table/submission/getAll"];
+    },
+    groupFilterOptions() {
+      const groups = new Set();
+      let hasEmptyGroups = false;
+      (this.submissionsTable || []).forEach(s => {
+        if (s && s.group !== null && s.group !== undefined && s.group !== '') {
+          groups.add(String(s.group));
+        } else {
+          hasEmptyGroups = true;
+        }
+      });
+      const options = Array.from(groups)
+          .sort((a, b) => {
+            const na = Number(a), nb = Number(b);
+            if (!Number.isNaN(na) && !Number.isNaN(nb)) return na - nb;
+            return a.localeCompare(b);
+          })
+          .map(g => ({ key: g, name: g }));
+      if (hasEmptyGroups) options.unshift({ key: '', name: 'No GroupID' });
+      return options;
+    },
+    documentsTable() {
+      return this.documents.filter(d => d.type === 0).map(d => {
+        let newD = { ...d };
+        newD.type = d.type === 0 ? "PDF" : "HTML";
+        const user = this.$store.getters["table/user/get"](d.userId);
+        newD.firstName = user ? user.firstName : "Unknown";
+        newD.lastName = user ? user.lastName : "Unknown";
+        return newD;
+      });
+    },
+    documentsTableColumns() {
+      return [
+        { name: "ID", key: "id" },
+        { name: "Document", key: "name" },
+        { name: "First Name", key: "firstName" },
+        { name: "Last Name", key: "lastName" },
+      ];
+    },
+    submissionsTable() {
+      return this.submissions.map(s => {
+        let newS = { ...s };
+        const user = this.$store.getters["table/user/get"](s.userId);
+        newS.name = s.name || `Submission ${s.id}`;
+        newS.userName = user ? user.userName : "N/A";
+        newS.firstName = user ? user.firstName : "Unknown";
+        newS.lastName = user ? user.lastName : "Unknown";
+        newS.group = (s.group !== null && s.group !== undefined && s.group !== '') ? s.group : '';
+        return newS;
+      });
+    },
+    submissionColumns() {
+      return [
+        { name: "ID", key: "id" },
+        { name: "User Name", key: "userName" },
+        { name: "First Name", key: "firstName" },
+        { name: "Last Name", key: "lastName" },
+        { name: "Group ID", key: "group", filter: this.groupFilterOptions },
+        { name: "Created At", key: "createdAt" },
+      ];
+    },
+    currentTableData() {
+      if (this.assignmentType === 'submission') return this.submissionsTable;
+      if (this.assignmentType === 'study_session') return this.studySessionsTable;
+      return this.documentsTable;
+    },
+    currentTableColumns() {
+      if (this.assignmentType === 'submission') return this.submissionColumns;
+      if (this.assignmentType === 'study_session') return this.studySessionsTableColumns;
+      return this.documentsTableColumns;
+    },
+    studySessionsTable() {
+      if (!this.targetWorkflowId) return [];
+      const sessions = this.$store.getters["table/study_session/getAll"] || [];
+      return sessions
+          .filter(session => {
+            const study = this.$store.getters["table/study/get"](session.studyId);
+            return study && study.workflowId === this.targetWorkflowId;
+          })
+          .map(session => {
+            const study = this.$store.getters["table/study/get"](session.studyId);
+            const user = this.$store.getters["table/user/get"](session.userId);
+            const studyOwner = this.$store.getters["table/user/get"](study.userId);
+            const submission = this.getSubmission(session.studyId);
+            return {
+              id: session.id,
+              studyId: session.studyId,
+              userId: this.newStudyOwner === 'session_owner' ? user.id : studyOwner.id,
+              completeUserName: user ? `${user.firstName} ${user.lastName}` : 'Unknown User',
+              firstName: user ? user.firstName : 'Unknown',
+              lastName: user ? user.lastName : 'Unknown',
+              studyCompleteUserName: studyOwner ? `${studyOwner.firstName} ${studyOwner.lastName}` : 'Unknown User',
+              studyUserId: studyOwner.userId,
+              studyFirstName: studyOwner ? studyOwner.firstName : 'Unknown',
+              studyLastName: studyOwner ? studyOwner.lastName : 'Unknown',
+              workflowType: this.getWorkflowType(study.workflowId),
+              submissionGroup: submission && submission.group ? submission.group : 'N/A',
+              status: session.end === null ? "Running" : "Finished",
+              createdAt: new Date(session.createdAt).toLocaleString(),
+            };
+          });
+    },
+    studySessionsTableColumns() {
+      return [
+        { name: "ID", key: "id" },
+        { name: "Session User Name", key: "completeUserName", sortable: true },
+        { name: "Study Owner User Name", key: "studyCompleteUserName", sortable: true },
+        { name: "Workflow Type", key: "workflowType", sortable: true },
+        { name: "Created At", key: "createdAt", sortable: true },
+        { name: "Submission Group", key: "submissionGroup", sortable: true, filter: this.sessionGroupFilterOptions },
+        {
+          name: "Status",
+          key: "status",
+          type: "badge",
+          sortable: true,
+          typeOptions: {
+            keyMapping: { Running: "Running", Finished: "Finished" },
+            classMapping: { Running: "bg-primary", Finished: "bg-success" },
+          },
+        },
+      ];
+    },
+    sessionGroupFilterOptions() {
+      const groups = new Set();
+      let hasEmptyGroups = false;
+      (this.studySessionsTable || []).forEach(s => {
+        const submission = this.getSubmission(s.studyId);
+        const group = submission && submission.group ? submission.group : null;
+        if (group !== null && group !== undefined && group !== '') {
+          groups.add(String(group));
+        } else {
+          hasEmptyGroups = true;
+        }
+      });
+      const options = Array.from(groups)
+          .sort((a, b) => {
+            const na = Number(a), nb = Number(b);
+            if (!Number.isNaN(na) && !Number.isNaN(nb)) return na - nb;
+            return a.localeCompare(b);
+          })
+          .map(g => ({ key: g, name: g }));
+      if (hasEmptyGroups) options.unshift({ key: '', name: 'No GroupID' });
+      return options;
+    },
+    selectedAssignmentUserIds() {
+      if (this.newStudyOwner !== 'study_owner') {
+        return this.selectedAssignments.map(assignment => {
+          const study = this.$store.getters["table/study/get"](assignment.studyId);
+          return study ? study.userId : null;
+        }).filter(userId => userId !== null);
+      } else {
+        return this.selectedAssignments.map(assignment => assignment.userId);
+      }
+    },
+    isValid() {
+      return this.bulk ? this.selectedAssignments.length > 0 : this.selectedAssignments.length === 1;
+    },
+  },
+  watch: {
+    selectedAssignments: {
+      handler(val) {
+        console.log('[AssignmentSelectionStep] selectedAssignments changed:', val);
+        this.$emit('update:modalValue', val);
+        this.$emit('update:selectedAssignmentUserIds', this.selectedAssignmentUserIds);
+      },
+      deep: true,
+    },
+    selectedAssignmentUserIds: {
+      handler(val) {
+        this.$emit('update:selectedAssignmentUserIds', val);
+      },
+      deep: true,
+    },
+    isValid(val) {
+      this.$emit('update:isValid', val);
+    },
+  },
+  mounted() {
+    if (this.modalValue && this.modalValue.length > 0) {
+      const ids = new Set(this.modalValue.map(item => item.id));
+      this.selectedAssignments = this.currentTableData.filter(row => ids.has(row.id));
+    }
+    this.$emit('update:isValid', this.isValid);
+    this.$emit('update:selectedAssignmentUserIds', this.selectedAssignmentUserIds);
+  },
+  methods: {
+    getWorkflowType(workflowId) {
+      const workflow = this.$store.getters["table/workflow/get"](workflowId);
+      return workflow ? workflow.name : "Unknown";
+    },
+    getSubmission(studyId) {
+      const studySteps = this.$store.getters["table/study_step/getFiltered"](
+          s => s.studyId === studyId
+      ) || [];
+      for (const step of studySteps) {
+        if (step.stepType === 1 && step.documentId !== null) {
+          let document = this.$store.getters["table/document/get"](step.documentId);
+          while (document && document.parentDocumentId !== null) {
+            document = this.$store.getters["table/document/get"](document.parentDocumentId);
+          }
+          if (document && document.submissionId) {
+            const submission = this.$store.getters["table/submission/get"](document.submissionId);
+            if (submission) return submission;
+          }
+        }
+      }
+      return null;
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/ConfirmationStep.vue b/frontend/src/components/dashboard/study/bulk-assignment/ConfirmationStep.vue
new file mode 100644
index 000000000..4df5f28ce
--- /dev/null
+++ b/frontend/src/components/dashboard/study/bulk-assignment/ConfirmationStep.vue
@@ -0,0 +1,181 @@
+<template>
+  <div>
+    <!-- doc-sub-single -->
+    <template v-if="variant === 'doc-sub-single'">
+      <p>Are you sure you want to create the assignment with the following details?</p>
+      <div><strong>Template:</strong> {{ template && template.name }}</div>
+      <div><strong>Workflow:</strong> {{ workflow && workflow.name }}</div>
+      <div><strong>Assignment Type:</strong> {{ assignmentType === 'document' ? 'Document' : 'Submission' }}</div>
+      <div v-if="assignmentType === 'document'">
+        <strong>Workflow Assignments:</strong>
+        <ul>
+          <li v-for="(stepAssignment, index) in workflowStepsAssignments[0]" :key="stepAssignment.workflowStepId">
+            - Workflow Step {{ index + 1 }}:
+            <span v-if="stepAssignment.documentId && documents.find(doc => doc.id === stepAssignment.documentId)">
+              {{ documents.find(doc => doc.id === stepAssignment.documentId).name }}
+              ({{ reviewer.find(u => u.id === documents.find(doc => doc.id === stepAssignment.documentId).userId)?.firstName }}
+               {{ reviewer.find(u => u.id === documents.find(doc => doc.id === stepAssignment.documentId).userId)?.lastName }})
+            </span>
+            <span v-else>Create new document</span>
+          </li>
+        </ul>
+      </div>
+      <div>
+        <strong>Reviewers:</strong>
+        <ul>
+          <li v-for="rev in selectedReviewer" :key="rev.id">- {{ rev.firstName }} {{ rev.lastName }}</li>
+        </ul>
+      </div>
+    </template>
+
+    <!-- session-single -->
+    <template v-else-if="variant === 'session-single'">
+      <p>Are you sure you want to create the assignment with the following details?</p>
+      <div><strong>Template:</strong> {{ template && template.name }}</div>
+      <div><strong>Workflow:</strong> {{ workflow && workflow.name }}</div>
+      <div><strong>Assignment Type:</strong> Study Session</div>
+      <div><strong>Target Workflow:</strong> {{ targetWorkflowName }}</div>
+      <div>
+        <strong>Selected Study Session:</strong>
+        {{ selectedAssignments.length > 0 ? `Session ${selectedAssignments[0].id}` : 'None' }}
+      </div>
+      <div>
+        <strong>Reviewers:</strong>
+        <ul>
+          <li v-for="rev in selectedReviewer" :key="rev.id">- {{ rev.firstName }} {{ rev.lastName }}</li>
+        </ul>
+      </div>
+    </template>
+
+    <!-- doc-sub-bulk or session-bulk (shared bulk summary layout) -->
+    <template v-else>
+      <p>Are you sure you want to create the assignment with the following details?</p>
+      <p v-if="reviewerSelectionMode.mode !== 'session_user'" class="text-danger">
+        <strong>Warning:</strong> The assignment process will make sure that a reviewer does not review their own document.
+        <br>This could lead to a failure in the assignment process,
+        <br>so make sure that the values are set correctly for a successful assignment.
+      </p>
+      <p v-else class="text-warning">
+        <strong>Warning:</strong> In session user-based selection mode, each selected reviewer must have a corresponding study session.
+        <br>
+        <span v-if="unmatchedReviewersForSessions.length > 0" class="text-danger">
+          The following reviewers do not have matching study sessions:
+          <ul>
+            <li v-for="unmatchedReviewer in unmatchedReviewersForSessions" :key="unmatchedReviewer.id">
+              {{ unmatchedReviewer.firstName }} {{ unmatchedReviewer.lastName }} (ID: {{ unmatchedReviewer.id }})
+            </li>
+          </ul>
+        </span>
+        <span v-else>All selected reviewers have matching study sessions.</span>
+      </p>
+      <div class="container">
+        <div class="row mb-2">
+          <div class="col-2"><strong>Template:</strong></div>
+          <div class="col-8">{{ template && template.name }}</div>
+        </div>
+        <div class="row mb-2">
+          <div class="col-2"><strong>Workflow:</strong></div>
+          <div class="col-8">{{ workflow && workflow.name }}</div>
+        </div>
+        <div class="row mb-2">
+          <div class="col-2"><strong>Documents:</strong></div>
+          <div class="col-8">{{ selectedAssignments.length }}</div>
+        </div>
+        <div class="row mb-2">
+          <div class="col-2"><strong>Reviewers:</strong></div>
+          <div class="col-8">{{ selectedReviewer.length }}</div>
+        </div>
+        <div class="row mb-2">
+          <div class="col-2"><strong>Reviews to create:</strong></div>
+          <div class="col-8">{{ numberOfReviews }}</div>
+        </div>
+        <div class="row mb-2">
+          <div class="col-2"><strong>Selection Mode:</strong></div>
+          <div class="col-8">
+            {{ reviewerSelectionModeFields[0] && reviewerSelectionModeFields[0].options.find(f => f.value === reviewerSelectionMode.mode)?.name }}
+          </div>
+        </div>
+        <div v-if="reviewerSelectionMode.mode === 'role'" class="row mb-2">
+          <div class="col-2"><strong>Roles:</strong></div>
+          <div class="col-8">
+            <ul>
+              <li v-for="(value, key) in listOfSelectedRoles" :key="key">- {{ value.role }}: {{ value.value }}</li>
+            </ul>
+          </div>
+        </div>
+        <div v-if="reviewerSelectionMode.mode === 'reviewer'" class="row mb-2">
+          <div class="col-2"><strong>Reviewers:</strong></div>
+          <div class="col-8">
+            <ul>
+              <li v-for="(value, key) in listOfSelectedReviewers" :key="key">- {{ value.reviewer }}: {{ value.value }}</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ConfirmationStep",
+  props: {
+    variant: {
+      type: String,
+      required: true,
+      validator: v => ['doc-sub-single', 'doc-sub-bulk', 'session-single', 'session-bulk'].includes(v),
+    },
+  },
+  inject: {
+    template: { type: Object, required: false, default: null },
+    workflow: { type: Object, required: false, default: null },
+    assignmentType: { type: String, required: false, default: 'document' },
+    targetWorkflowId: { type: Number, required: false, default: null },
+    selectedAssignments: { type: Array, required: false, default: () => [] },
+    selectedReviewer: { type: Array, required: false, default: () => [] },
+    reviewerSelectionMode: { type: Object, required: false, default: () => ({}) },
+    workflowStepsAssignments: { type: Array, required: false, default: () => [] },
+    numberOfReviews: { type: Number, required: false, default: 0 },
+    reviewerSelectionModeFields: { type: Array, required: false, default: () => [] },
+    reviewer: { type: Array, required: false, default: () => [] },
+    documents: { type: Array, required: false, default: () => [] },
+    roles: { type: Array, required: false, default: () => [] },
+    roleSelection: { type: Object, required: false, default: () => ({}) },
+    reviewerSelection: { type: Object, required: false, default: () => ({}) },
+  },
+  computed: {
+    targetWorkflowName() {
+      if (!this.targetWorkflowId) return 'Unknown';
+      const workflow = this.$store.getters["table/workflow/get"](this.targetWorkflowId);
+      return workflow ? workflow.name : "Unknown";
+    },
+    listOfSelectedRoles() {
+      return Object.keys(this.roleSelection).map(key => {
+        const role = this.roles.find(r => r.id === parseInt(key));
+        return { role: role ? role.name : key, value: this.roleSelection[key] };
+      });
+    },
+    listOfSelectedReviewers() {
+      return Object.keys(this.reviewerSelection).map(key => {
+        const user = this.reviewer.find(r => r.id === parseInt(key));
+        return {
+          reviewer: user ? `${user.firstName} ${user.lastName}` : key,
+          value: this.reviewerSelection[key],
+        };
+      });
+    },
+    unmatchedReviewersForSessions() {
+      if (this.assignmentType !== 'study_session' || this.reviewerSelectionMode.mode !== 'session_user') {
+        return [];
+      }
+      const selectedSessionUserIds = new Set(
+          this.selectedAssignments.map(session => {
+            const studySession = this.$store.getters["table/study_session/get"](session.id);
+            return studySession ? studySession.userId : null;
+          }).filter(userId => userId !== null)
+      );
+      return this.selectedReviewer.filter(rev => !selectedSessionUserIds.has(rev.id));
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/DistributionStep.vue b/frontend/src/components/dashboard/study/bulk-assignment/DistributionStep.vue
new file mode 100644
index 000000000..7453fbef7
--- /dev/null
+++ b/frontend/src/components/dashboard/study/bulk-assignment/DistributionStep.vue
@@ -0,0 +1,164 @@
+<template>
+  <div>
+    <BasicForm ref="selectionModeForm" v-model="reviewerSelectionMode" :fields="reviewerSelectionModeFields" />
+    <div v-if="reviewerSelectionMode.mode === 'role'">
+      <p class="mt-2">Define the number of reviews that each user of the role should perform:</p>
+      <BasicForm v-if="roleSelectionFields.length > 0" ref="roleBasedSelectionForm" v-model="roleSelection" class="mt-4" :fields="roleSelectionFields" />
+      <div v-else>
+        <p class="text-center text-danger mt-4">There are no roles available!</p>
+        <p class="text-center">Please select reviewers with roles or change selection mode!</p>
+      </div>
+    </div>
+    <div v-else-if="reviewerSelectionMode.mode === 'reviewer'">
+      <p class="mt-2">Distribute the documents between the selected reviewers:</p>
+      <p class="mb-4">Remaining Assignments: <strong>{{ remainingAssignments }}</strong></p>
+      <BasicForm ref="reviewerBasedSelectionForm" v-model="reviewerSelection" :fields="reviewerSelectionFields" />
+    </div>
+    <p v-else>Please select a reviewer selection mode</p>
+  </div>
+</template>
+
+<script>
+import BasicForm from "@/basic/Form.vue";
+
+export default {
+  name: "DistributionStep",
+  components: { BasicForm },
+  props: {
+    modalValue: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  inject: {
+    selectedReviewer: { type: Array, required: false, default: () => [] },
+    selectedAssignments: { type: Array, required: false, default: () => [] },
+    assignmentType: { type: String, required: false, default: 'document' },
+    roles: { type: Array, required: false, default: () => [] },
+    reviewerSelectionModeFields: { type: Array, required: false, default: () => [] },
+  },
+  data() {
+    return {
+      reviewerSelectionMode: this.modalValue?.reviewerSelectionMode ? { ...this.modalValue.reviewerSelectionMode } : {},
+      roleSelection: this.modalValue?.roleSelection ? { ...this.modalValue.roleSelection } : {},
+      reviewerSelection: this.modalValue?.reviewerSelection ? { ...this.modalValue.reviewerSelection } : {},
+    };
+  },
+  computed: {
+    selectedReviewerRoles() {
+      return [...new Set(this.selectedReviewer.flatMap(obj => obj.roles))];
+    },
+    roleSelectionFields() {
+      return this.selectedReviewerRoles.map(roleId => ({
+        key: this.roles.find(role => role.id === roleId).id,
+        label: "Number of reviews for role: " + this.roles.find(role => role.id === roleId).name,
+        type: "slider",
+        class: 'custom-slider-class',
+        min: 0,
+        max: 10,
+        step: 1,
+        unit: 'review(s)',
+      }));
+    },
+    reviewerNumberOfAssignments() {
+      return Object.values(this.reviewerSelection)
+          .map(value => parseInt(value, 0))
+          .reduce((a, b) => a + b, 0);
+    },
+    remainingAssignments() {
+      return this.selectedAssignments.length - this.reviewerNumberOfAssignments;
+    },
+    reviewerSelectionFields() {
+      return this.selectedReviewer.map(user => ({
+        key: user.id,
+        label: "Number of reviews for user: " + user.firstName + " " + user.lastName,
+        type: "slider",
+        class: 'custom-slider-class',
+        min: 0,
+        max: Number(this.remainingAssignments + Number(this.reviewerSelection[user.id])),
+        step: 1,
+        unit: 'review(s)',
+      }));
+    },
+    selectionValid() {
+      if (this.reviewerSelectionMode.mode === 'reviewer') {
+        return this.remainingAssignments === 0;
+      } else if (this.reviewerSelectionMode.mode === 'role') {
+        return Object.values(this.roleSelection)
+            .map(value => parseInt(value, 0))
+            .reduce((a, b) => a + b, 0) > 0;
+      } else if (this.reviewerSelectionMode.mode === 'session_user') {
+        return true;
+      }
+      return false;
+    },
+    isValid() {
+      return this.selectionValid;
+    },
+    numberOfReviews() {
+      if (this.reviewerSelectionMode.mode === 'role') {
+        return Object.values(this.roleSelection)
+            .map(value => parseInt(value, 0))
+            .reduce((a, b) => a + b, 0) * this.selectedAssignments.length;
+      } else {
+        return Object.values(this.reviewerSelection)
+            .map(value => parseInt(value, 0))
+            .reduce((a, b) => a + b, 0);
+      }
+    },
+  },
+  watch: {
+    selectedReviewer: {
+      handler() {
+        this.reviewerSelection = {};
+        this.roleSelection = {};
+      },
+      deep: true,
+    },
+    reviewerSelectionMode: {
+      handler(val) {
+        this.$emit('update:reviewerSelectionMode', val);
+      },
+      deep: true,
+    },
+    roleSelection: {
+      handler(val) {
+        this.$emit('update:roleSelection', val);
+        this.$emit('update:selectionValid', this.selectionValid);
+        this.$emit('update:numberOfReviews', this.numberOfReviews);
+      },
+      deep: true,
+    },
+    reviewerSelection: {
+      handler(val) {
+        this.$emit('update:reviewerSelection', val);
+        this.$emit('update:selectionValid', this.selectionValid);
+        this.$emit('update:numberOfReviews', this.numberOfReviews);
+      },
+      deep: true,
+    },
+    selectionValid: {
+      handler(val) {
+        this.$emit('update:selectionValid', val);
+      },
+      deep: true,
+    },
+    numberOfReviews: {
+      handler(val) {
+        this.$emit('update:numberOfReviews', val);
+      },
+      deep: true,
+    },
+    isValid(val) {
+      this.$emit('update:isValid', val);
+    },
+  },
+  methods: {
+    reset() {
+      this.reviewerSelectionMode = {};
+      this.roleSelection = {};
+      this.reviewerSelection = {};
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/ReviewerSelectionStep.vue b/frontend/src/components/dashboard/study/bulk-assignment/ReviewerSelectionStep.vue
new file mode 100644
index 000000000..c633b11bb
--- /dev/null
+++ b/frontend/src/components/dashboard/study/bulk-assignment/ReviewerSelectionStep.vue
@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <div v-if="bulk" class="form-check">
+      <input id="filterHasDocumentsCheckbox" v-model="filterHasDocuments" class="form-check-input" type="checkbox">
+      <label class="form-check-label" for="filterHasDocumentsCheckbox">Filter only users with documents</label>
+      <br>
+      <input id="filterSelectedDocumentsCheckbox" v-model="filterSelectedDocuments" class="form-check-input" type="checkbox">
+      <label class="form-check-label" for="filterSelectedDocumentsCheckbox">Filter only users from previous selected documents</label>
+    </div>
+    <BasicTable
+        v-model="selectedReviewer"
+        :columns="reviewerTableColumns"
+        :data="reviewerTable"
+        :options="reviewerTableOptions"
+        :max-table-height="400"
+    />
+  </div>
+</template>
+
+<script>
+import BasicTable from "@/basic/Table.vue";
+
+export default {
+  name: "ReviewerSelectionStep",
+  components: { BasicTable },
+  props: {
+    selectedAssignmentUserIds: {
+      type: Array,
+      default: () => [],
+    },
+    bulk: {
+      type: Boolean,
+      default: true,
+    },
+    modalValue: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      filterHasDocuments: false,
+      filterSelectedDocuments: false,
+      selectedReviewer: [...(this.modalValue || [])],
+      reviewerTableOptions: {
+        striped: true,
+        hover: true,
+        bordered: false,
+        borderless: false,
+        small: false,
+        selectableRows: true,
+        scrollY: true,
+        scrollX: true,
+        onlyOneRowSelectable: false,
+        search: true,
+        pagination: 10,
+      },
+    };
+  },
+  computed: {
+    roles() {
+      return this.$store.getters["admin/getSystemRoles"] || [];
+    },
+    documents() {
+      return this.$store.getters["table/document/getFiltered"](d => d.readyForReview);
+    },
+    allUsers() {
+      return this.$store.getters["table/user/getAll"];
+    },
+    reviewerRoles() {
+      return [...new Set(this.reviewerTable.flatMap(obj => {
+        return obj.rolesNames.split(/,\s*/).filter(n => n !== "");
+      }))];
+    },
+    selectedReviewerRoles() {
+      return [...new Set(this.selectedReviewer.flatMap(obj => obj.roles))];
+    },
+    reviewerTable() {
+      return this.allUsers.map(r => {
+        let newR = { ...r };
+        newR.studySessions = this.userStudySessions(r.id).filter(s => this.isStudyClosed(s.studyId)).length;
+        newR.documents = this.documents.filter(d => d.userId === r.id).length;
+        newR.rolesNames = (r.roles || [])
+            .map(role => {
+              const foundRole = (this.roles || []).find(roleObj => roleObj.id === role);
+              return foundRole ? foundRole.name : null;
+            })
+            .filter(name => name !== null)
+            .join(", ");
+        return newR;
+      }).filter(reviewer => {
+        if (!this.filterHasDocuments && !this.filterSelectedDocuments) return true;
+        if (this.filterHasDocuments && reviewer.documents < 1) return false;
+        return !(this.filterSelectedDocuments && !this.selectedAssignmentUserIds.includes(reviewer.id));
+      });
+    },
+    reviewerTableColumns() {
+      return [
+        { name: "ID", key: "id" },
+        { name: "extId", key: "extId" },
+        { name: "First Name", key: "firstName" },
+        { name: "Last Name", key: "lastName" },
+        { name: "Number of Assignments", key: "studySessions" },
+        {
+          name: "Documents",
+          key: "documents",
+          filter: { type: "numeric", defaultOperator: "gte", defaultValue: 0 },
+        },
+        {
+          name: "Roles",
+          key: "rolesNames",
+          filter: this.reviewerRoles.map(r => ({ key: r, name: r })),
+        },
+      ];
+    },
+    isValid() {
+      return this.selectedReviewer.length > 0;
+    },
+  },
+  watch: {
+    selectedReviewer: {
+      handler(val) {
+        console.log('[ReviewerSelectionStep] selectedReviewer changed:', val);
+        this.$emit('update:selectedReviewer', val);
+        this.$emit('update:selectedReviewerRoles', this.selectedReviewerRoles);
+      },
+      deep: true,
+    },
+    selectedReviewerRoles(val) {
+      this.$emit('update:selectedReviewerRoles', val);
+    },
+    isValid(val) {
+      console.log('[ReviewerSelectionStep] isValid emit:', val);
+      this.$emit('update:isValid', val);
+    },
+  },
+  mounted() {
+    console.log('[ReviewerSelectionStep] mounted isValid:', this.isValid);
+    this.$emit('update:isValid', this.isValid);
+    if (this.selectedReviewer.length > 0) {
+      this.$emit('update:selectedReviewer', this.selectedReviewer);
+      this.$emit('update:selectedReviewerRoles', this.selectedReviewerRoles);
+    }
+  },
+  methods: {
+    userStudySessions(userId) {
+      return this.$store.getters["table/study_session/getFiltered"](s => s.userId === userId);
+    },
+    isStudyClosed(studyId) {
+      const study = this.$store.getters["table/study/get"](studyId);
+      if (!study) return false;
+      return study.closed === null;
+    },
+    reset() {
+      this.filterHasDocuments = false;
+      this.filterSelectedDocuments = false;
+      this.selectedReviewer = [];
+    },
+  },
+};
+</script>
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/TemplateSelectionStep.vue b/frontend/src/components/dashboard/study/bulk-assignment/TemplateSelectionStep.vue
new file mode 100644
index 000000000..412721d2e
--- /dev/null
+++ b/frontend/src/components/dashboard/study/bulk-assignment/TemplateSelectionStep.vue
@@ -0,0 +1,173 @@
+<template>
+  <div>
+    <BasicForm
+        ref="templateSelectionForm"
+        v-model="templateSelection"
+        :fields="templateSelectionFields"
+    />
+    <div class="mt-3"><strong>Workflow Steps:</strong></div>
+    <ul class="list-group">
+      <li
+          v-for="(workflowStep, index) in workflowSteps"
+          :key="workflowStep.id"
+          class="list-group-item"
+          :class="workflowStep.workflowStepDocument !== null ? 'disabled' : 'list-group-item-primary'">
+        Workflow Step {{ index + 1 }}:
+        {{ workflowStep.stepType === 1 ? 'Annotator' : workflowStep.stepType === 2 ? 'Editor' : 'Unknown' }}
+      </li>
+    </ul>
+    <div class="mt-3">
+      <label class="form-label"><strong>Assignment should be based on:</strong></label>
+      <FormSelect v-model="assignmentTypeSelection.type" :options="assignmentTypeFields" />
+    </div>
+    <div class="mt-3">
+      <div class="form-check">
+        <input id="emailNotifyCheck" v-model="enableEmailNotification" type="checkbox" class="form-check-input" />
+        <label class="form-check-label" for="emailNotifyCheck">
+          <strong>Send email notification to reviewer</strong>
+        </label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import BasicForm from "@/basic/Form.vue";
+import FormSelect from "@/basic/form/Select.vue";
+
+export default {
+  name: "TemplateSelectionStep",
+  components: { BasicForm, FormSelect },
+  subscribeTable: [
+    { filter: [{ key: "template", value: true }], table: "study" },
+    {table: "workflow"},
+    { table: "workflow_step" }
+  ],
+  props: {
+    modalValue: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      templateSelection: {},
+      assignmentTypeSelection: {},
+      enableEmailNotification: false,
+    };
+  },
+  computed: {
+    templates() {
+      return this.$store.getters["table/study/getFiltered"](item => item.template === true);
+    },
+    template() {
+      if (!this.templateSelection.template) return null;
+      return this.$store.getters["table/study/get"](this.templateSelection.template);
+    },
+    workflow() {
+      if (!this.template) return null;
+      return this.$store.getters["table/workflow/get"](this.template.workflowId);
+    },
+    workflowSteps() {
+      if (!this.template) return [];
+      return this.$store.getters["table/workflow_step/getFiltered"](
+          item => item.workflowId === this.template.workflowId
+      );
+    },
+    workflowStepsAssignment() {
+      return this.workflowSteps.filter(
+          step => step.stepType === 1 && step.workflowStepDocument === null
+      );
+    },
+    assignmentType() {
+      return this.assignmentTypeSelection.type || 'document';
+    },
+    templateSelectionFields() {
+      return [
+        {
+          key: "template",
+          label: "Template",
+          type: "select",
+          options: this.templates.map(template => ({
+            name: template.name,
+            value: template.id,
+          })),
+          required: true,
+        },
+      ];
+    },
+    assignmentTypeFields() {
+      return {
+        options: [
+          { value: 'document', name: 'Documents' },
+          { value: 'submission', name: 'Submissions' },
+          { value: 'study_session', name: 'Study Sessions' },
+        ],
+      };
+    },
+    isValid() {
+      return this.workflowStepsAssignment.length > 0 && !!this.assignmentType;
+    },
+  },
+  watch: {
+
+    templateSelection: {
+      handler(val) {
+        this.$emit('update:modalValue', { templateSelection: val, assignmentTypeSelection: this.assignmentTypeSelection, enableEmailNotification: this.enableEmailNotification });
+      },
+      deep: true,
+    },
+    assignmentTypeSelection: {
+      handler(val) {
+        this.$emit('update:modalValue', { templateSelection: this.templateSelection, assignmentTypeSelection: val, enableEmailNotification: this.enableEmailNotification });
+      },
+      deep: true,
+    },
+    assignmentType(val) {
+      this.$emit('update:assignmentType', val);
+    },
+    workflowSteps(val) {
+      this.$emit('update:workflowSteps', val);
+    },
+    workflowStepsAssignment(val) {
+      this.$emit('update:workflowStepsAssignment', val);
+    },
+    template(val) {
+      this.$emit('update:template', val);
+    },
+    workflow(val) {
+      this.$emit('update:workflow', val);
+    },
+    enableEmailNotification(val) {
+      this.$emit('update:modalValue', { templateSelection: this.templateSelection, assignmentTypeSelection: this.assignmentTypeSelection, enableEmailNotification: val });
+    },
+    isValid(val) {
+      this.$emit('update:isValid', val);
+    },
+  },
+  mounted() {
+    if (this.modalValue) {
+      if (this.modalValue.templateSelection) this.templateSelection = { ...this.modalValue.templateSelection };
+      if (this.modalValue.assignmentTypeSelection) this.assignmentTypeSelection = { ...this.modalValue.assignmentTypeSelection };
+      if (this.modalValue.enableEmailNotification !== undefined) this.enableEmailNotification = this.modalValue.enableEmailNotification;
+    }
+  },
+  methods: {
+    reset() {
+      this.templateSelection = {};
+      this.assignmentTypeSelection = {};
+      this.enableEmailNotification = false;
+    },
+  },
+};
+</script>
+
+<style scoped>
+.list-group-item {
+  cursor: default;
+}
+
+.list-group-item:hover {
+  background-color: transparent;
+}
+</style>
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/WorkflowMappingStep.vue b/frontend/src/components/dashboard/study/bulk-assignment/WorkflowMappingStep.vue
new file mode 100644
index 000000000..51714f092
--- /dev/null
+++ b/frontend/src/components/dashboard/study/bulk-assignment/WorkflowMappingStep.vue
@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <h6 class="text-secondary">Target Workflow Selection</h6>
+    <div class="mb-3">
+      <label class="form-label"><strong>Select Target Workflow:</strong></label>
+      <FormSelect v-model="targetWorkflowId" :options="workflowOptions" />
+    </div>
+    <div v-if="targetWorkflowId && targetWorkflowSteps.length > 0">
+      <h6 class="text-secondary mt-4">Workflow Step Mapping</h6>
+      <p class="text-muted">Map each source workflow step (from template) to a target workflow step:</p>
+      <div v-for="(templateStep, index) in workflowSteps" :key="templateStep.id" class="mb-3">
+        <label class="form-label">
+          <strong>Source Step {{ index + 1 }} ({{ getStepTypeName(templateStep.stepType) }}) → Target Step:</strong>
+        </label>
+        <FormSelect
+            v-model="workflowMapping[templateStep.id]"
+            :options="{ options: getTargetStepOptions(templateStep.stepType, templateStep.id) }"
+        />
+      </div>
+    </div>
+    <div v-if="bulk" class="mt-4">
+      <h6 class="text-secondary">New Study Owner</h6>
+      <div class="form-check">
+        <input id="owner-session" v-model="newStudyOwner" type="radio" class="form-check-input" value="session_owner" />
+        <label class="form-check-label" for="owner-session">User of the study session</label>
+      </div>
+      <div class="form-check">
+        <input id="owner-current-user" v-model="newStudyOwner" type="radio" class="form-check-input" value="study_owner" />
+        <label class="form-check-label" for="owner-current-user">Owner of the study</label>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import FormSelect from "@/basic/form/Select.vue";
+
+export default {
+  name: "WorkflowMappingStep",
+  components: { FormSelect },
+  props: {
+    workflowSteps: {
+      type: Array,
+      default: () => [],
+    },
+    bulk: {
+      type: Boolean,
+      default: true,
+    },
+    modalValue: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      targetWorkflowId: null,
+      workflowMapping: {},
+      newStudyOwner: 'session_owner',
+    };
+  },
+  computed: {
+    workflowOptions() {
+      return {
+        options: this.$store.getters["table/workflow/getAll"].map(workflow => ({
+          name: workflow.name,
+          value: workflow.id,
+        })),
+      };
+    },
+    targetWorkflowSteps() {
+      if (!this.targetWorkflowId) return [];
+      return this.$store.getters["table/workflow_step/getFiltered"](
+          item => item.workflowId === this.targetWorkflowId
+      ) || [];
+    },
+    isWorkflowMappingComplete() {
+      if (!this.targetWorkflowId) return false;
+      return this.workflowSteps.every(step => {
+        return this.workflowMapping[step.id] !== undefined && this.workflowMapping[step.id] !== null;
+      });
+    },
+    isValid() {
+      return !!this.targetWorkflowId && this.isWorkflowMappingComplete;
+    },
+  },
+  watch: {
+    targetWorkflowId(val) {
+      this.$emit('update:modalValue', { targetWorkflowId: val, workflowMapping: this.workflowMapping, newStudyOwner: this.newStudyOwner });
+    },
+    workflowMapping: {
+      handler(val) {
+        this.$emit('update:modalValue', { targetWorkflowId: this.targetWorkflowId, workflowMapping: val, newStudyOwner: this.newStudyOwner });
+        this.$emit('update:isWorkflowMappingComplete', this.isWorkflowMappingComplete);
+      },
+      deep: true,
+    },
+    newStudyOwner(val) {
+      this.$emit('update:modalValue', { targetWorkflowId: this.targetWorkflowId, workflowMapping: this.workflowMapping, newStudyOwner: val });
+    },
+    isWorkflowMappingComplete(val) {
+      this.$emit('update:isWorkflowMappingComplete', val);
+    },
+    isValid(val) {
+      console.log('[WorkflowMappingStep] isValid emit:', val);
+      this.$emit('update:isValid', val);
+    },
+  },
+  mounted() {
+    if (this.modalValue) {
+      if (this.modalValue.targetWorkflowId !== undefined) this.targetWorkflowId = this.modalValue.targetWorkflowId;
+      if (this.modalValue.workflowMapping) this.workflowMapping = { ...this.modalValue.workflowMapping };
+      if (this.modalValue.newStudyOwner) this.newStudyOwner = this.modalValue.newStudyOwner;
+    }
+    console.log('[WorkflowMappingStep] mounted isValid:', this.isValid);
+    this.$emit('update:isValid', this.isValid);
+  },
+  methods: {
+    getStepTypeName(stepType) {
+      switch (stepType) {
+        case 1: return 'Annotator';
+        case 2: return 'Editor';
+        default: return 'Unknown';
+      }
+    },
+    getTargetStepOptions(stepType, currentStepId) {
+      const orderedSteps = [];
+      const stepPositionMap = new Map();
+      const nextMap = new Map(this.targetWorkflowSteps.map(s => [s.workflowStepPrevious, s]));
+      let current = this.targetWorkflowSteps.find(s => s.workflowStepPrevious === null);
+      let position = 1;
+      while (current) {
+        orderedSteps.push(current);
+        stepPositionMap.set(current.id, position);
+        current = nextMap.get(current.id);
+        position++;
+      }
+      const options = orderedSteps
+          .filter(step => step.stepType === stepType)
+          .map(step => ({
+            name: `<Workflow> Step ${stepPositionMap.get(step.id)} (${this.getStepTypeName(step.stepType)})`,
+            value: step.id,
+          }));
+      if (stepType === 1 && currentStepId) {
+        const currentSourceStep = this.workflowSteps.find(s => s.id === currentStepId);
+        if (currentSourceStep && currentSourceStep.workflowStepPrevious) {
+          const previousSourceStep = this.workflowSteps.find(
+              s => s.id === currentSourceStep.workflowStepPrevious
+          );
+          if (previousSourceStep && previousSourceStep.stepType === 1) {
+            options.unshift({ name: '<Document> Revised Document', value: 'previousSubmission' });
+          }
+        }
+      }
+      return options;
+    },
+    getSubmission(studyId) {
+      const studySteps = this.$store.getters["table/study_step/getFiltered"](
+          s => s.studyId === studyId
+      ) || [];
+      for (const step of studySteps) {
+        if (step.stepType === 1 && step.documentId !== null) {
+          let document = this.$store.getters["table/document/get"](step.documentId);
+          while (document && document.parentDocumentId !== null) {
+            document = this.$store.getters["table/document/get"](document.parentDocumentId);
+          }
+          if (document && document.submissionId) {
+            const submission = this.$store.getters["table/submission/get"](document.submissionId);
+            if (submission) return submission;
+          }
+        }
+      }
+      return null;
+    },
+    reset() {
+      this.targetWorkflowId = null;
+      this.workflowMapping = {};
+      this.newStudyOwner = 'session_owner';
+    },
+  },
+};
+</script>

From b0e2c1068922577108a92eb82294ae1f66737115 Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Tue, 23 Jun 2026 02:47:30 +0200
Subject: [PATCH 04/10] refactor: rename modal

---
 frontend/src/components/dashboard/Study.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/dashboard/Study.vue b/frontend/src/components/dashboard/Study.vue
index 7d61f61f1..1d5213aff 100644
--- a/frontend/src/components/dashboard/Study.vue
+++ b/frontend/src/components/dashboard/Study.vue
@@ -67,8 +67,8 @@
     <ConfirmModal v-if="modals.confirm" ref="confirmModal" @hide="modals.confirm = false"/>
     <BulkCloseModal v-if="modals.bulkConfirm" ref="bulkConfirmModal" @hide="modals.bulkConfirm = false"/>
     <StudyCloseModal ref="studyCloseModal" />
-    <BulkAssignmentsModal v-if="modals.bulkAssignments" ref="bulkAssignmentsModal" @hide="modals.bulkAssignments = false"/>
-    <BulkAssignmentsModal v-if="modals.singleAssignment" ref="singleAssignmentModal" :bulk="false" @hide="modals.singleAssignment = false"/>
+    <AssignmentModal v-if="modals.bulkAssignments" ref="bulkAssignmentsModal" @hide="modals.bulkAssignments = false"/>
+    <AssignmentModal v-if="modals.singleAssignment" ref="singleAssignmentModal" :bulk="false" @hide="modals.singleAssignment = false"/>
     <PublishAssessmentModal ref="publishAssessmentModal"/>
     <InformationModal v-if="modals.information" ref="informationModal" @hide="modals.information = false"/>
     <SavedTemplatesModal v-if="modals.savedTemplates" ref="savedTemplatesModal" @hide="modals.savedTemplates = false"/>
@@ -82,7 +82,7 @@ import StudyModal from "@/components/dashboard/coordinator/Study.vue";
 import StudySessionModal from "@/components/dashboard/study/StudySessionModal.vue";
 import BasicButton from "@/basic/Button.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
-import BulkAssignmentsModal from "./study/BulkAssignmentModal.vue";
+import AssignmentModal from "@/components/dashboard/study/AssignmentModal.vue";
 import InformationModal from "@/basic/modal/InformationModal.vue";
 import BulkCloseModal from "@/components/dashboard/study/BulkCloseModal.vue";
 import StudyCloseModal from "@/components/dashboard/study/StudyCloseModal.vue";
@@ -104,7 +104,7 @@ export default {
     StudySessionModal,
     BasicButton,
     ConfirmModal,
-    BulkAssignmentsModal,
+    AssignmentModal,
     InformationModal,
     SavedTemplatesModal
   },

From 8ddc7cf4d66f672299ac6ce48c71a632298b9621 Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Tue, 23 Jun 2026 02:48:27 +0200
Subject: [PATCH 05/10] refactor: rename folder name

---
 .../components/dashboard/study/AssignmentModal.vue | 14 +++++++-------
 .../AssignmentSelectionStep.vue                    |  7 +++++++
 .../ConfirmationStep.vue                           |  8 ++++++++
 .../DistributionStep.vue                           |  8 ++++++++
 .../ReviewerSelectionStep.vue                      |  7 +++++++
 .../TemplateSelectionStep.vue                      |  7 +++++++
 .../WorkflowMappingStep.vue                        |  8 ++++++++
 7 files changed, 52 insertions(+), 7 deletions(-)
 rename frontend/src/components/dashboard/study/{bulk-assignment => assignment}/AssignmentSelectionStep.vue (96%)
 rename frontend/src/components/dashboard/study/{bulk-assignment => assignment}/ConfirmationStep.vue (95%)
 rename frontend/src/components/dashboard/study/{bulk-assignment => assignment}/DistributionStep.vue (93%)
 rename frontend/src/components/dashboard/study/{bulk-assignment => assignment}/ReviewerSelectionStep.vue (93%)
 rename frontend/src/components/dashboard/study/{bulk-assignment => assignment}/TemplateSelectionStep.vue (93%)
 rename frontend/src/components/dashboard/study/{bulk-assignment => assignment}/WorkflowMappingStep.vue (94%)

diff --git a/frontend/src/components/dashboard/study/AssignmentModal.vue b/frontend/src/components/dashboard/study/AssignmentModal.vue
index 21d8f02c7..40e0a0cf9 100644
--- a/frontend/src/components/dashboard/study/AssignmentModal.vue
+++ b/frontend/src/components/dashboard/study/AssignmentModal.vue
@@ -144,16 +144,16 @@
 import StepperModal from "@/basic/modal/StepperModal.vue";
 import { downloadObjectsAs } from "@/assets/utils";
 import { computed } from "vue";
-import TemplateSelectionStep from "./bulk-assignment/TemplateSelectionStep.vue";
-import WorkflowMappingStep from "./bulk-assignment/WorkflowMappingStep.vue";
-import AssignmentSelectionStep from "./bulk-assignment/AssignmentSelectionStep.vue";
-import ReviewerSelectionStep from "./bulk-assignment/ReviewerSelectionStep.vue";
-import DistributionStep from "./bulk-assignment/DistributionStep.vue";
-import ConfirmationStep from "./bulk-assignment/ConfirmationStep.vue";
+import TemplateSelectionStep from "./assignment/TemplateSelectionStep.vue";
+import WorkflowMappingStep from "./assignment/WorkflowMappingStep.vue";
+import AssignmentSelectionStep from "./assignment/AssignmentSelectionStep.vue";
+import ReviewerSelectionStep from "./assignment/ReviewerSelectionStep.vue";
+import DistributionStep from "./assignment/DistributionStep.vue";
+import ConfirmationStep from "./assignment/ConfirmationStep.vue";
 
 /**
  * Modal for bulk creating assignments
- * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang
+ * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang, Karim Ouf
  */
 export default {
   name: "ImportModal",
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/AssignmentSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
similarity index 96%
rename from frontend/src/components/dashboard/study/bulk-assignment/AssignmentSelectionStep.vue
rename to frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
index 16b5ef72c..fe08dbbc6 100644
--- a/frontend/src/components/dashboard/study/bulk-assignment/AssignmentSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
@@ -13,6 +13,13 @@
 <script>
 import BasicTable from "@/basic/Table.vue";
 
+/**
+ * Step component for selecting the items to be assigned in the bulk assignment wizard.
+ * Renders a selectable table of documents, submissions, or study sessions depending
+ * on the assignment type chosen in the template step. Supports both single-select
+ * (for single assignment flow) and multi-select (for bulk flow).
+ * @author karim ouf
+ */
 export default {
   name: "AssignmentSelectionStep",
   subscribeTable: [
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/ConfirmationStep.vue b/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
similarity index 95%
rename from frontend/src/components/dashboard/study/bulk-assignment/ConfirmationStep.vue
rename to frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
index 4df5f28ce..83861b117 100644
--- a/frontend/src/components/dashboard/study/bulk-assignment/ConfirmationStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
@@ -117,6 +117,14 @@
 </template>
 
 <script>
+/**
+ * Final confirmation step of the bulk assignment wizard. Displays a read-only summary
+ * of all choices made in previous steps before the user submits the assignment.
+ * Supports four variants: doc-sub-single, doc-sub-bulk, session-single, and session-bulk,
+ * each rendering an appropriate summary layout. Also warns when reviewers lack matching
+ * study sessions in session_user mode.
+ * @author karim ouf
+ */
 export default {
   name: "ConfirmationStep",
   props: {
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/DistributionStep.vue b/frontend/src/components/dashboard/study/assignment/DistributionStep.vue
similarity index 93%
rename from frontend/src/components/dashboard/study/bulk-assignment/DistributionStep.vue
rename to frontend/src/components/dashboard/study/assignment/DistributionStep.vue
index 7453fbef7..1c3339943 100644
--- a/frontend/src/components/dashboard/study/bulk-assignment/DistributionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/DistributionStep.vue
@@ -21,6 +21,14 @@
 <script>
 import BasicForm from "@/basic/Form.vue";
 
+/**
+ * Step component for configuring how assignments are distributed across reviewers.
+ * Supports three modes: role-based (each role gets N reviews), reviewer-based
+ * (documents split manually between selected reviewers), and session-user-based
+ * (each study session is assigned to its original user).
+ * State is persisted via modalValue so navigating back restores the user's choices.
+ * @author karim ouf
+ */
 export default {
   name: "DistributionStep",
   components: { BasicForm },
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/ReviewerSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
similarity index 93%
rename from frontend/src/components/dashboard/study/bulk-assignment/ReviewerSelectionStep.vue
rename to frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
index c633b11bb..56bb5e112 100644
--- a/frontend/src/components/dashboard/study/bulk-assignment/ReviewerSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
@@ -20,6 +20,13 @@
 <script>
 import BasicTable from "@/basic/Table.vue";
 
+/**
+ * Step component for selecting which users will act as reviewers in the assignment.
+ * Displays a filterable, selectable table of all users with optional filters to
+ * show only users who have documents or users from previously selected assignments.
+ * State is persisted via modalValue so navigating back restores the selection.
+ * @author karim ouf
+ */
 export default {
   name: "ReviewerSelectionStep",
   components: { BasicTable },
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/TemplateSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
similarity index 93%
rename from frontend/src/components/dashboard/study/bulk-assignment/TemplateSelectionStep.vue
rename to frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
index 412721d2e..adf026b85 100644
--- a/frontend/src/components/dashboard/study/bulk-assignment/TemplateSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
@@ -35,6 +35,13 @@
 import BasicForm from "@/basic/Form.vue";
 import FormSelect from "@/basic/form/Select.vue";
 
+/**
+ * First step of the bulk assignment wizard. Allows the user to pick a study template,
+ * choose whether assignments are based on documents, submissions, or study sessions,
+ * and opt in to email notifications for reviewers. Emits template and workflow data
+ * to the parent so downstream steps can filter and map workflow steps accordingly.
+ * @author karim ouf
+ */
 export default {
   name: "TemplateSelectionStep",
   components: { BasicForm, FormSelect },
diff --git a/frontend/src/components/dashboard/study/bulk-assignment/WorkflowMappingStep.vue b/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
similarity index 94%
rename from frontend/src/components/dashboard/study/bulk-assignment/WorkflowMappingStep.vue
rename to frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
index 51714f092..12b961e6b 100644
--- a/frontend/src/components/dashboard/study/bulk-assignment/WorkflowMappingStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
@@ -35,6 +35,14 @@
 <script>
 import FormSelect from "@/basic/form/Select.vue";
 
+/**
+ * Step component for mapping source workflow steps (from the template) to steps in a
+ * target workflow. Only shown in the study_session assignment flow. The user selects a
+ * target workflow and then maps each annotator/editor step from the template to a
+ * corresponding step in the target. Also allows choosing the new study owner (session
+ * user vs. study owner) when creating bulk assignments.
+ * @author karim ouf
+ */
 export default {
   name: "WorkflowMappingStep",
   components: { FormSelect },

From c2bf54c3df45188bdbfedc38a4ce365c335a3512 Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Sat, 11 Jul 2026 14:11:36 +0200
Subject: [PATCH 06/10] refactor: add bulk true for better readability

---
 frontend/src/components/dashboard/Study.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/dashboard/Study.vue b/frontend/src/components/dashboard/Study.vue
index 7fbdcd239..17eb061cc 100644
--- a/frontend/src/components/dashboard/Study.vue
+++ b/frontend/src/components/dashboard/Study.vue
@@ -67,7 +67,7 @@
     <ConfirmModal v-if="modals.confirm" ref="confirmModal" @hide="modals.confirm = false"/>
     <BulkCloseModal v-if="modals.bulkConfirm" ref="bulkConfirmModal" @hide="modals.bulkConfirm = false"/>
     <StudyCloseModal ref="studyCloseModal" />
-    <AssignmentModal v-if="modals.bulkAssignments" ref="bulkAssignmentsModal" @hide="modals.bulkAssignments = false"/>
+    <AssignmentModal v-if="modals.bulkAssignments" ref="bulkAssignmentsModal" :bulk="true" @hide="modals.bulkAssignments = false"/>
     <AssignmentModal v-if="modals.singleAssignment" ref="singleAssignmentModal" :bulk="false" @hide="modals.singleAssignment = false"/>
     <PublishAssessmentModal ref="publishAssessmentModal"/>
     <InformationModal v-if="modals.information" ref="informationModal" @hide="modals.information = false"/>

From 272800adac1b127f2a81e69cf8d2840b1247352b Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Sat, 11 Jul 2026 14:47:23 +0200
Subject: [PATCH 07/10] refactor: clean code and remove unwanted code

---
 .../dashboard/study/AssignmentModal.vue       |   2 +-
 .../dashboard/study/SingleAssignmentModal.vue | 891 ------------------
 .../assignment/AssignmentSelectionStep.vue    |   1 -
 .../study/assignment/ConfirmationStep.vue     |  31 +-
 .../study/assignment/DistributionStep.vue     |  23 +-
 .../assignment/TemplateSelectionStep.vue      |   1 +
 .../study/assignment/WorkflowMappingStep.vue  |  19 -
 7 files changed, 35 insertions(+), 933 deletions(-)
 delete mode 100644 frontend/src/components/dashboard/study/SingleAssignmentModal.vue

diff --git a/frontend/src/components/dashboard/study/AssignmentModal.vue b/frontend/src/components/dashboard/study/AssignmentModal.vue
index 40e0a0cf9..b4a5a50a6 100644
--- a/frontend/src/components/dashboard/study/AssignmentModal.vue
+++ b/frontend/src/components/dashboard/study/AssignmentModal.vue
@@ -20,7 +20,7 @@
           :key="`template-step-${stepResetKey}`"
           ref="templateSelectionStep"
           :modal-value="templateStepModalValue"
-          @update:modalValue="templateStepModalValue = $event"
+          @update:modal-value="templateStepModalValue = $event"
           @update:assignmentType="assignmentType = $event"
           @update:workflowSteps="workflowSteps = $event"
           @update:workflowStepsAssignment="workflowStepsAssignment = $event"
diff --git a/frontend/src/components/dashboard/study/SingleAssignmentModal.vue b/frontend/src/components/dashboard/study/SingleAssignmentModal.vue
deleted file mode 100644
index 218c62076..000000000
--- a/frontend/src/components/dashboard/study/SingleAssignmentModal.vue
+++ /dev/null
@@ -1,891 +0,0 @@
-<template>
-  <StepperModal
-      ref="assignmentStepper"
-      :steps="steps"
-      :validation="stepValid"
-      size="xl"
-      @submit="createAssignment"
-    >
-    <template #title>
-      <h5 class="modal-title">Create Assignment</h5>
-    </template>
-
-    <template v-if="templates.length === 0" #error>
-      <p class="text-center text-danger">There are not study templates available!</p>
-      <p class="text-center">Please create a study template to proceed!</p>
-    </template>
-    <template #step-1>
-      <BasicForm
-          ref="templateSelectionForm"
-          v-model="templateSelection"
-          :fields="templateSelectionFields"
-      />
-      <div class="mt-3"><strong>Workflow Steps:</strong></div>
-      <ul class="list-group">
-        <li
-            v-for="(workflowStep, index) in workflowSteps"
-            :key="workflowStep.id" class="list-group-item"
-            :class="(workflowStep.workflowStepDocument !== null) ? 'disabled': 'list-group-item-primary'">
-          Workflow Step {{ index + 1 }}:
-          {{ (workflowStep.stepType === 1) ? "Annotator" : (workflowStep.stepType === 2) ? "Editor" : "Unknown" }}
-        </li>
-      </ul>
-      <div class="mt-3">
-        <label class="form-label"><strong>Assignment should be based on:</strong></label>
-        <FormSelect
-            v-model="assignmentTypeSelection.type"
-            :options="assignmentTypeFields"
-        />
-      </div>
-      <div class="mt-3">
-        <div class="form-check">
-          <input
-            id="emailNotifyCheck"
-            v-model="enableEmailNotification"
-            type="checkbox"
-            class="form-check-input"
-          />
-          <label class="form-check-label" for="emailNotifyCheck">
-            <strong>Send email notification to reviewer</strong>
-          </label>
-        </div>
-      </div>
-    </template>
-    <template #step-2>
-      <div v-if="assignmentType === 'study_session'">
-        <h6 class="text-secondary">Target Workflow Selection</h6>
-        <div class="mb-3">
-          <label class="form-label"><strong>Select Target Workflow:</strong></label>
-          <FormSelect
-              v-model="targetWorkflowId"
-              :options="workflowOptions"
-          />
-        </div>
-
-        <div v-if="targetWorkflowId && targetWorkflowSteps.length > 0">
-          <h6 class="text-secondary mt-4">Workflow Step Mapping</h6>
-          <p class="text-muted">Map each source workflow step (from template) to a target workflow step:</p>
-          
-          <div
-              v-for="(workflowStep, index) in workflowSteps"
-              :key="workflowStep.id"
-              class="mb-3"
-          >
-            <label class="form-label">
-              <strong>Source Step {{ index + 1 }}: {{ getStepTypeName(workflowStep.stepType) }}</strong> → Target Step:
-            </label>
-            <FormSelect
-                v-model="workflowMapping[workflowStep.id]"
-                :options="getTargetStepOptions(workflowStep.stepType, workflowStep.id)"
-            />
-          </div>
-        </div>
-      </div>
-      <div v-else>
-        <BasicTable
-          v-model="selectedAssignment"
-          :columns="currentTableColumns"
-          :data="currentTableData"
-          :options="documentTableOptions"
-          :max-table-height="400"
-        />
-      </div>
-    </template>
-    <template #step-3>
-      <div v-if="assignmentType === 'study_session'">
-        <BasicTable
-          v-model="selectedAssignment"
-          :columns="currentTableColumns"
-          :data="currentTableData"
-          :options="documentTableOptions"
-          :max-table-height="400"
-        />
-      </div>
-      <div v-else>
-        <BasicTable
-          v-model="selectedReviewer"
-          :columns="reviewerTableColumns"
-          :data="reviewerTable"
-          :options="reviewerTableOptions"
-          :max-table-height="400"
-        />
-      </div>
-    </template>
-    <template #step-4>
-      <div v-if="assignmentType === 'study_session'">
-        <BasicTable
-          v-model="selectedReviewer"
-          :columns="reviewerTableColumns"
-          :data="reviewerTable"
-          :options="reviewerTableOptions"
-          :max-table-height="400"
-        />
-      </div>
-      <div v-else>
-        <p>
-          Are you sure you want to create the assignment with the following details?
-        </p>
-        <div>
-          <strong>Template:</strong> {{ template.name }}
-        </div>
-        <div>
-          <strong>Workflow:</strong> {{ workflow.name }}
-        </div>
-        <div>
-          <strong>Assignment Type:</strong> {{ assignmentType === 'document' ? 'Document' : 'Submission' }}
-        </div>
-        <div v-if="assignmentType === 'document'">
-          <strong>Workflow Assignments:</strong>
-          <ul>
-            <li
-                v-for="(stepAssignment, index) in workflowStepsAssignments"
-                :key="stepAssignment.id"
-            >
-              - Workflow Step {{ index + 1 }}:
-              <span v-if="stepAssignment.documentId && documents.find(doc => doc.id === stepAssignment.documentId)">
-                      {{ documents.find(doc => doc.id === stepAssignment.documentId).name }}
-                      ({{
-                  reviewers.find(user => user.id === documents.find(doc => doc.id === stepAssignment.documentId).userId).firstName
-                }}
-                       {{
-                  reviewers.find(user => user.id === documents.find(doc => doc.id === stepAssignment.documentId).userId).lastName
-                }})
-                    </span>
-              <span v-else>
-                      Create new document
-                    </span>
-            </li>
-          </ul>
-        </div>
-        <div>
-          <strong>Reviewers:</strong>
-          <ul>
-            <li
-                v-for="reviewer in selectedReviewer"
-                :key="reviewer.id">
-              - {{ reviewer.firstName }} {{ reviewer.lastName }}
-            </li>
-          </ul>
-        </div>
-      </div>
-    </template>
-    <template #step-5>
-      <div>
-        <p>
-          Are you sure you want to create the assignment with the following details?
-        </p>
-        <div>
-          <strong>Template:</strong> {{ template.name }}
-        </div>
-        <div>
-          <strong>Workflow:</strong> {{ workflow.name }}
-        </div>
-        <div>
-          <strong>Assignment Type:</strong> Study Session
-        </div>
-        <div>
-          <strong>Target Workflow:</strong> {{ getWorkflowType(targetWorkflowId) }}
-        </div>
-        <div>
-          <strong>Selected Study Session:</strong> 
-          {{ selectedAssignment.length > 0 ? `Session ${selectedAssignment[0].id}` : 'None' }}
-        </div>
-        <div>
-          <strong>Reviewers:</strong>
-          <ul>
-            <li
-                v-for="reviewer in selectedReviewer"
-                :key="reviewer.id">
-              - {{ reviewer.firstName }} {{ reviewer.lastName }}
-            </li>
-          </ul>
-        </div>
-      </div>
-    </template>
-  </StepperModal>
-</template>
-
-<script>
-import BasicTable from "@/basic/Table.vue";
-import BasicForm from "@/basic/Form.vue";
-import StepperModal from "@/basic/modal/StepperModal.vue";
-import FormSelect from "@/basic/form/Select.vue";
-
-/**
- * Modal for bulk creating assignments
- * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang
- */
-export default {
-  name: "ImportModal",
-  subscribeTable: [{
-    table: "document",
-    filter: [{
-      key: "readyForReview",
-      value: true
-    }],
-  },
-    {
-      table: "user",
-    },
-    {
-      table: "study",
-      filter: [{
-        key: "template",
-        value: true
-      }]
-    },
-    "submission",
-    {
-      table: "template",
-    },
-    {
-      table: "configuration",
-      filter: [{key: "type", value: 1}]
-    }],
-  components: {StepperModal, BasicTable, BasicForm, FormSelect},
-  data() {
-    return {
-      templateSelection: {},
-      assignmentTypeSelection: {},
-      selectedAssignment: [],
-      selectedReviewer: [],
-      enableEmailNotification: false,
-      studySessionSelections: [[]],
-      targetWorkflowId: null,
-      workflowMapping: {},
-      studyStepsTableColumns: [
-        { name: "Step Type", key: "stepTypeName", sortable: true },
-        { name: "First Name", key: "firstName", sortable: true },
-        { name: "Last Name", key: "lastName", sortable: true },
-        { name: "Study Name", key: "studyName", sortable: true },
-        { name: "Workflow Type", key: "workflowType", sortable: true },
-      ],
-    };
-  },
-  computed: {
-    assignmentType() {
-      return this.assignmentTypeSelection.type || 'document';
-    },
-    isWorkflowMappingComplete() {
-      if (!this.targetWorkflowId) return false;
-      return this.workflowSteps.every((step) => {
-        return this.workflowMapping[step.id] !== undefined && this.workflowMapping[step.id] !== null;
-      });
-    },
-    stepValid() {
-      const step1Valid = this.workflowStepsAssignment.length !== 0 && !!this.assignmentType;
-      let step2Valid;
-      let step3Valid;
-      let step4Valid;
-      
-      if (this.assignmentType === 'study_session') {
-        // For study sessions, check that workflow mapping is complete
-        step2Valid = !!this.targetWorkflowId && this.isWorkflowMappingComplete;
-        step3Valid = this.selectedAssignment.length === 1;
-        step4Valid = this.selectedReviewer.length > 0;
-        return [step1Valid, step2Valid, step3Valid, step4Valid, true];
-      } else {
-        step2Valid = this.selectedAssignment.length === 1;
-        step3Valid = this.selectedReviewer.length > 0;
-        return [step1Valid, step2Valid, step3Valid, true];
-      }
-    },
-    documentTableOptions() {
-      return {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        selectableRows: true,
-        scrollY: true,
-        scrollX: true,
-        singleSelect: true,
-        search: true,
-        pagination: 10,
-      }
-    },
-    reviewerTableOptions() {
-      return {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        selectableRows: true,
-        scrollY: true,
-        scrollX: true,
-        search: true,
-        pagination: 10,
-      }
-    },
-    templateSelectionFields() {
-      return [
-        {
-          key: "template",
-          label: "Template",
-          type: "select",
-          options: this.templates.map(template => ({
-            name: template.name,
-            value: template.id,
-          })),
-          required: true,
-        },
-      ]
-    },
-    assignmentTypeFields() {
-      return {
-        options: [
-          {value: 'document', name: 'Documents'},
-          {value: 'submission', name: 'Submissions'},
-          {value: "study_session", name: "Study Sessions"}
-        ]
-      };
-    },
-    emailTemplates() {
-      const currentUserId = this.$store.getters["auth/getUserId"];
-      return this.$store.getters["table/template/getAll"]
-        .filter(t => t.type === 3 && !t.deleted && t.userId === currentUserId);
-    },
-    emailTemplateOptions() {
-      return {
-        options: [
-          {value: null, name: 'None (no email will be sent)'},
-          ...this.emailTemplates.map(t => ({
-            value: t.id,
-            name: t.name
-          }))
-        ]
-      };
-    },
-    templates() {
-      return this.$store.getters["table/study/getFiltered"](item => item.template === true);
-    },
-    template() {
-      return this.$store.getters["table/study/get"](this.templateSelection.template);
-    },
-    workflow() {
-      return this.$store.getters["table/workflow/get"](this.template.workflowId);
-    },
-    workflowSteps() {
-      if (!this.template) return [];
-      return this.$store.getters["table/workflow_step/getFiltered"](item => item.workflowId === this.template.workflowId);
-    },
-    workflowStepsAssignment() {
-      return this.workflowSteps.filter(step => step.stepType === 1 && step.workflowStepDocument === null);
-    },
-    workflowStepsAssignments() {
-      if (this.assignmentType === 'submission') {
-        return this.workflowSteps.map((c, index) => {
-          if (index === 0 && this.selectedAssignment.length > 0) {
-            const primaryDocId = this.getPrimaryDocumentId(this.selectedAssignment[0].id);
-            return {
-              documentId: primaryDocId,
-              workflowStepId: c.id
-            };
-          }
-          return {
-            documentId: null,
-            workflowStepId: c.id
-          };
-        });
-      } else if (this.assignmentType === 'document') {
-        return this.workflowSteps.map((c, index) => {
-          return {
-            documentId: (index === 0) ? this.selectedAssignment[0].id : null,
-            workflowStepId: c.id
-          }
-        });
-      }
-      return [];
-    },
-    documents() {
-      return this.$store.getters["table/document/getFiltered"]((d) => d.readyForReview);
-    },
-    submissions() {
-      return this.$store.getters["table/submission/getAll"];
-    },
-    currentTableData() {
-      switch (this.assignmentType) {
-        case 'submission':
-          return this.submissionsTable;
-        case 'document':
-          return this.documentsTable;
-        case 'study_session':
-          return this.studySessionsTable;
-        default:
-          return [];
-      }
-    },
-    currentTableColumns() {
-      switch (this.assignmentType) {
-        case 'submission':
-          return this.submissionColumns;
-        case 'document':
-          return this.documentsTableColumns;
-        case 'study_session':
-          return this.studySessionsTableColumns;
-        default:
-          return [];
-      }
-    },
-    documentsTable() {
-      return this.documents.filter((d) => d.type === 0).map((d) => {
-        let newD = {...d};
-        newD.type = d.type === 0 ? "PDF" : "HTML";
-        const user = this.$store.getters["table/user/get"](d.userId)
-        newD.firstName = (user) ? user.firstName : "Unknown";
-        newD.lastName = (user) ? user.lastName : "Unknown";
-        return newD;
-      })
-    },
-    documentsTableColumns() {
-      return [
-        {name: "ID", key: "id"},
-        {name: "Document", key: "name"},
-        {name: "First Name", key: "firstName"},
-        {name: "Last Name", key: "lastName"},
-      ]
-    },
-    submissionsTable() {
-      return this.submissions.map((s) => {
-        let newS = {...s};
-        const user = this.$store.getters["table/user/get"](s.userId);
-        newS.name = s.name || `Submission ${s.id}`;
-        newS.userName = user ? user.userName : "N/A";
-        newS.firstName = user ? user.firstName : "Unknown";
-        newS.lastName = user ? user.lastName : "Unknown";
-        newS.group = (s.group !== null && s.group !== undefined && s.group !== '') ? s.group : '';
-        return newS;
-      });
-    },
-    submissionColumns() {
-      return [
-        {name: "ID", key: "id"},
-        {name: "Submission Name", key: "name"},
-        {name: "User Name", key: "userName"},
-        {name: "First Name", key: "firstName"},
-        {name: "Last Name", key: "lastName"},
-        {name: "Group ID", key: "group", filter: this.groupFilterOptions},
-        {name: "Created At", key: "createdAt"},
-      ]
-    },
-     studySessionsTable() {
-      if (!this.targetWorkflowId) return [];
-      
-      const sessions = this.$store.getters["table/study_session/getAll"] || [];
-      return sessions
-        .filter(session => {
-          const study = this.$store.getters["table/study/get"](session.studyId);
-          return study && study.workflowId === this.targetWorkflowId;
-        })
-        .map(session => {
-          const study = this.$store.getters["table/study/get"](session.studyId);
-          const user = this.$store.getters["table/user/get"](session.userId);
-          const submission = this.getSubmission(session.studyId);
-          return {
-            id: session.id,
-            studyId: session.studyId,
-            userId: session.userId,
-            firstName: user ? user.firstName : 'Unknown',
-            lastName: user ? user.lastName : 'Unknown',
-            workflowType: this.getWorkflowType(study.workflowId),
-            submissionGroup: submission && submission.group ? submission.group : 'N/A',
-            status: session.end === null ? "Running" : "Finished",
-            createdAt: new Date(session.createdAt).toLocaleString(),
-          };
-        });
-    },
-    studySessionsTableColumns() {
-      return [
-        { name: "ID", key: "id" },
-        { name: "First Name", key: "firstName", sortable: true },
-        { name: "Last Name", key: "lastName", sortable: true },
-        { name: "Workflow Type", key: "workflowType", sortable: true },
-        { name: "Created At", key: "createdAt", sortable: true },
-        { name: "Submission Group", key: "submissionGroup", sortable: true, filter: this.groupFilterOptions},
-        {
-          name: "Status",
-          key: "status",
-          type: "badge",
-          sortable: true,
-          typeOptions: {
-            keyMapping: {
-              Running: "Running",
-              Finished: "Finished",
-            },
-            classMapping: {
-              Running: "bg-primary",
-              Finished: "bg-success",
-            }
-          }
-        },
-      ];
-    },
-    studyStepsTable() {
-      const sessions = this.$store.getters["table/study_session/getAll"] || [];
-      const data = [];
-      
-      sessions.forEach((session) => {
-        const study = this.$store.getters["table/study/get"](session.studyId);
-        const studySteps = this.$store.getters["table/study_step/getFiltered"](
-          (s) => s.studyId === session.studyId && !s.deleted
-        ) || [];
-        
-        studySteps.forEach((step) => {
-          if (step.workflowStepId === null) {
-            return;
-          }
-          
-          const user = this.$store.getters["table/user/get"](session.userId);
-          
-          data.push({
-            id: step.id,
-            sessionId: session.id,
-            studyId: step.studyId,
-            workflowStepId: step.workflowStepId,
-            stepType: step.stepType,
-            stepTypeName: this.getStepTypeName(step.stepType),
-            documentId: step.documentId,
-            studyStepPrevious: step.studyStepPrevious,
-            studyName: study ? study.name : 'Unknown',
-            workflowType: `${this.getWorkflowType(study ? study.workflowId : null)}`,
-            userId: session.userId,
-            firstName: user ? user.firstName : 'Unknown',
-            lastName: user ? user.lastName : 'Unknown',
-            sessionStart: session.start ? new Date(session.start).toLocaleString() : 'N/A',
-            sessionEnd: session.end ? new Date(session.end).toLocaleString() : 'N/A',
-            status: session.end === null ? "Running" : "Finished",
-          });
-        });
-      });
-      
-      return data;
-    },
-    reviewers() {
-      return this.$store.getters["table/user/getAll"];
-    },
-    roles() {
-      return this.$store.getters["admin/getSystemRoles"] || [];
-    },
-    reviewerTable() {
-      return this.reviewers.map((r) => {
-        let newR = {...r};
-        newR.studySessions = this.userStudySessions(r.id).filter((s) => this.isStudyClosed(s.studyId)).length;
-        newR.documents = this.documents.filter((d) => d.userId === r.id).length;
-        newR.rolesNames = (r.roles || [])
-            .map((role) => {
-              const foundRole = (this.roles || []).find((roleObj) => roleObj.id === role);
-              return foundRole ? foundRole.name : null;
-            })
-            .filter(name => name !== null)
-            .join(", ");
-        return newR;
-      });
-    },
-    reviewerTableColumns() {
-      return [
-        {name: "ID", key: "id"},
-        {name: "extId", key: "extId"},
-        {name: "First Name", key: "firstName"},
-        {name: "Last Name", key: "lastName"},
-        {name: "Number of Assignments", key: "studySessions"},
-        {name: "Documents", key: "documents"},
-        {
-          name: "Roles",
-          key: "rolesNames",
-        }
-      ]
-    },
-    groupFilterOptions() {
-      const groups = new Set();
-      let hasEmptyGroups = false;
-
-      (this.submissionsTable || []).forEach((s) => {
-        if (s && s.group !== null && s.group !== undefined && s.group !== '') {
-          groups.add(String(s.group));
-        } else {
-          hasEmptyGroups = true;
-        }
-      });
-
-      const options = Array.from(groups)
-          .sort((a, b) => {
-            const na = Number(a);
-            const nb = Number(b);
-            if (!Number.isNaN(na) && !Number.isNaN(nb)) return na - nb;
-            return a.localeCompare(b);
-          })
-          .map((g) => ({key: g, name: g}));
-
-      if (hasEmptyGroups) {
-        options.unshift({key: '', name: 'No GroupID'});
-      }
-
-      return options;
-    },
-    steps() {
-      if (this.assignmentType === 'study_session') {
-        return [
-          {title: "Template Selection"},
-          {title: "Workflow Mapping"},
-          {title: "Study Session Selection"},
-          {title: "Reviewer Selection"},
-          {title: "Confirmation"}
-        ];
-      }
-      return [
-        {title: "Template Selection"},
-        {title: "Assignment Selection"},
-        {title: "Reviewer Selection"},
-        {title: "Confirmation"}
-      ];
-    },
-    workflowOptions() {
-      return {
-        options: this.$store.getters["table/workflow/getAll"].map(workflow => ({
-          name: workflow.name,
-          value: workflow.id,
-        }))
-      };
-    },
-    targetWorkflowSteps() {
-      if (!this.targetWorkflowId) return [];
-      return this.$store.getters["table/workflow_step/getFiltered"](
-        item => item.workflowId === this.targetWorkflowId
-      ) || [];
-    },
-  },
-  watch: {
-    assignmentType(newType, oldType) {
-      if (oldType && newType !== oldType) {
-        this.selectedAssignment = [];
-        this.studySessionSelections = [];
-        this.targetWorkflowId = null;
-        this.workflowMapping = {};
-        this.baseFileSelections = {};
-        this.inputGroupValid = false;
-        this.validationConfigurationNames = {};
-      }
-    },
-    workflowSteps: {
-      handler(newSteps) {
-        if (this.assignmentType === 'study_session' && newSteps.length > 0) {
-          // Initialize studySessionSelections as array of arrays
-          this.studySessionSelections = newSteps.map(() => []);
-        }
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    getSubmission(studyId) {  
-      const studySteps = this.$store.getters["table/study_step/getFiltered"](
-        (s) => s.studyId === studyId
-      ) || []; 
-      for (const step of studySteps) {
-        if (step.stepType === 1 && step.documentId !== null) {
-          let document = this.$store.getters["table/document/get"](step.documentId);
-          
-          while(document && document.parentDocumentId !== null) {
-            document = this.$store.getters["table/document/get"](document.parentDocumentId);
-          }
-          
-          if (document && document.submissionId) {
-            const submission = this.$store.getters["table/submission/get"](document.submissionId);
-            if (submission) {
-              return submission;
-            }
-          }
-        }
-      }
-      
-      return null;
-    }, 
-
-    getStepTypeName(stepType) {
-      switch (stepType) {
-        case 1: return 'Annotator';
-        case 2: return 'Editor';
-        default: return 'Unknown';
-      }
-    },
-    getTargetStepOptions(stepType, currentStepId) {
-      // First, order the target workflow steps based on workflowStepPrevious
-      const orderedSteps = [];
-      const stepPositionMap = new Map(); // Maps step.id to its position (1-based)
-      const nextMap = new Map(this.targetWorkflowSteps.map(s => [s.workflowStepPrevious, s]));
-      
-      // Find the first step (where workflowStepPrevious is null)
-      let current = this.targetWorkflowSteps.find(s => s.workflowStepPrevious === null);
-      
-      // Build ordered list by following the chain and track positions
-      let position = 1;
-      while (current) {
-        orderedSteps.push(current);
-        stepPositionMap.set(current.id, position);
-        current = nextMap.get(current.id);
-        position++;
-      }
-      
-      // Filter by stepType and create options with correct step numbers
-      const options = orderedSteps
-        .filter(step => step.stepType === stepType)
-        .map((step) => ({
-          name: `Step ${stepPositionMap.get(step.id)}: ${this.getStepTypeName(step.stepType)}`,
-          value: step.id,
-        }));
-      
-      // Add "Previous Submission Document" placeholder only if:
-      // 1. Current step is Annotator (type 1), AND
-      // 2. Previous step in SOURCE workflow is also Annotator (type 1)
-      if (stepType === 1 && currentStepId) {
-        const currentSourceStep = this.workflowSteps.find(s => s.id === currentStepId);
-        if (currentSourceStep && currentSourceStep.workflowStepPrevious) {
-          const previousSourceStep = this.workflowSteps.find(
-            s => s.id === currentSourceStep.workflowStepPrevious
-          );
-          if (previousSourceStep && previousSourceStep.stepType === 1) {
-            options.unshift({
-              name: '<Document> Revised Document',
-              value: 'previousSubmission',
-            });
-          }
-        }
-      }
-      
-      return {
-        options: options
-      };
-    },
-    getWorkflowType(workflowId) {
-        const workflow = this.$store.getters["table/workflow/get"](workflowId);
-        return workflow ? workflow.name : "Unknown";
-    },
-    getUserName(userId) {
-      const user = this.$store.getters["table/user/get"](userId);
-      if (user) {
-        return {
-          firstName: user.firstName,
-          lastName: user.lastName,
-        };
-      }
-      return {
-        firstName: "Unknown",
-        lastName: "Unknown",
-      };
-    },
-    userStudySessions(userId) {
-      return this.$store.getters["table/study_session/getFiltered"](
-          (s) => s.userId === userId
-      );
-    },
-    isStudyClosed(studyId) {
-      const study = this.$store.getters["table/study/get"](studyId);
-      if (!study) {
-        return false;
-      }
-      return study.closed === null ? true : false;
-    },
-    getPrimaryDocumentId(submissionId) {
-      const submission = this.$store.getters["table/submission/get"](submissionId);
-      const configuration = this.$store.getters["table/configuration/get"](submission.validationConfigurationId);
-      const docs = this.$store.getters["table/document/getFiltered"](
-          (d) => d.submissionId === submissionId && !d.deleted && d.type === 0
-      );
-      
-      if (!docs || docs.length === 0) return null;
-      
-      // If configuration specifies a primary document key, try to use it
-      if (configuration && configuration.primaryDocument) {
-        const primaryDoc = docs.find(d => d.id === configuration.primaryDocument);
-        if (primaryDoc) return primaryDoc.id;
-      }
-      
-      // Otherwise, return the first PDF document
-      return docs[0].id;
-    },
-    open() {
-      this.reset();
-      this.$refs.assignmentStepper.open();
-    },
-    reset() {
-      this.selectedAssignment = [];
-      this.selectedReviewer = [];
-      this.assignmentTypeSelection = {};
-      this.studySessionSelections = [];
-      this.targetWorkflowId = null;
-      this.workflowMapping = {};
-      this.baseFileSelections = {};
-      this.inputGroupValid = false;
-      this.validationConfigurationNames = {};
-      this.enableEmailNotification = false;
-    },
-    createAssignment() {
-      this.$refs.assignmentStepper.setWaiting(true);
-      
-      const assignmentData = {
-        template: this.template,
-        assignmentType: this.assignmentType,
-        reviewer: this.selectedReviewer,
-        assignment: this.selectedAssignment[0],
-        documents: this.workflowStepsAssignments,
-        enableEmailNotification: this.enableEmailNotification,
-        selectedAssignments: this.selectedAssignment,
-      };
-      
-      // Add workflowMapping for study_session, documents for others
-      if (this.assignmentType === 'study_session') {
-        assignmentData.targetWorkflowId = this.targetWorkflowId;
-        assignmentData.workflowMapping = this.workflowMapping;
-      } else {
-        assignmentData.documents = this.workflowStepsAssignments;
-      }
-      this.$socket.emit("assignmentCreateSingle", assignmentData, (res) => {
-        this.$refs.assignmentStepper.setWaiting(false);
-        if (res.success) {
-          this.$refs.assignmentStepper.close();
-          this.eventBus.emit("toast", {
-            title: "Assignment created",
-            message: "The assignment has been created successfully",
-            variant: "success",
-          });
-        } else {
-          this.eventBus.emit("toast", {
-            title: "Failed to create assignment",
-            message: res.message,
-            variant: "danger",
-          });
-        }
-      });
-    },
-  },
-
-};
-</script>
-
-<style scoped>
-input {
-  display: block;
-  margin-bottom: 10px;
-}
-
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-
-li {
-  margin: 5px 0;
-  cursor: pointer;
-}
-
-li:hover {
-  background-color: #f0f0f0;
-}
-
-button {
-  margin-left: 10px;
-}
-
-</style>
diff --git a/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
index fe08dbbc6..ddb671dc2 100644
--- a/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
@@ -230,7 +230,6 @@ export default {
   watch: {
     selectedAssignments: {
       handler(val) {
-        console.log('[AssignmentSelectionStep] selectedAssignments changed:', val);
         this.$emit('update:modalValue', val);
         this.$emit('update:selectedAssignmentUserIds', this.selectedAssignmentUserIds);
       },
diff --git a/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue b/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
index 83861b117..3fd0cd999 100644
--- a/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
@@ -11,10 +11,9 @@
         <ul>
           <li v-for="(stepAssignment, index) in workflowStepsAssignments[0]" :key="stepAssignment.workflowStepId">
             - Workflow Step {{ index + 1 }}:
-            <span v-if="stepAssignment.documentId && documents.find(doc => doc.id === stepAssignment.documentId)">
-              {{ documents.find(doc => doc.id === stepAssignment.documentId).name }}
-              ({{ reviewer.find(u => u.id === documents.find(doc => doc.id === stepAssignment.documentId).userId)?.firstName }}
-               {{ reviewer.find(u => u.id === documents.find(doc => doc.id === stepAssignment.documentId).userId)?.lastName }})
+            <span v-if="stepAssignment.documentId && getDoc(stepAssignment.documentId)">
+              {{ getDoc(stepAssignment.documentId).name }}
+              ({{ getDocReviewerName(stepAssignment) }})
             </span>
             <span v-else>Create new document</span>
           </li>
@@ -127,13 +126,6 @@
  */
 export default {
   name: "ConfirmationStep",
-  props: {
-    variant: {
-      type: String,
-      required: true,
-      validator: v => ['doc-sub-single', 'doc-sub-bulk', 'session-single', 'session-bulk'].includes(v),
-    },
-  },
   inject: {
     template: { type: Object, required: false, default: null },
     workflow: { type: Object, required: false, default: null },
@@ -151,6 +143,13 @@ export default {
     roleSelection: { type: Object, required: false, default: () => ({}) },
     reviewerSelection: { type: Object, required: false, default: () => ({}) },
   },
+  props: {
+    variant: {
+      type: String,
+      required: true,
+      validator: v => ['doc-sub-single', 'doc-sub-bulk', 'session-single', 'session-bulk'].includes(v),
+    },
+  },
   computed: {
     targetWorkflowName() {
       if (!this.targetWorkflowId) return 'Unknown';
@@ -185,5 +184,15 @@ export default {
       return this.selectedReviewer.filter(rev => !selectedSessionUserIds.has(rev.id));
     },
   },
+  methods: {
+    getDoc(documentId) {
+      return this.documents.find(doc => doc.id === documentId);
+    },
+    getDocReviewerName(stepAssignment) {
+      const doc = this.getDoc(stepAssignment.documentId);
+      const user = doc ? this.reviewer.find(u => u.id === doc.userId) : null;
+      return user ? `${user.firstName} ${user.lastName}` : '';
+    },
+  },
 };
 </script>
diff --git a/frontend/src/components/dashboard/study/assignment/DistributionStep.vue b/frontend/src/components/dashboard/study/assignment/DistributionStep.vue
index 1c3339943..5c0f8179e 100644
--- a/frontend/src/components/dashboard/study/assignment/DistributionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/DistributionStep.vue
@@ -57,16 +57,19 @@ export default {
       return [...new Set(this.selectedReviewer.flatMap(obj => obj.roles))];
     },
     roleSelectionFields() {
-      return this.selectedReviewerRoles.map(roleId => ({
-        key: this.roles.find(role => role.id === roleId).id,
-        label: "Number of reviews for role: " + this.roles.find(role => role.id === roleId).name,
-        type: "slider",
-        class: 'custom-slider-class',
-        min: 0,
-        max: 10,
-        step: 1,
-        unit: 'review(s)',
-      }));
+      return this.selectedReviewerRoles.map(roleId => {
+        const role = this.roles.find(r => r.id === roleId);
+        return {
+          key: role.id,
+          label: "Number of reviews for role: " + role.name,
+          type: "slider",
+          class: 'custom-slider-class',
+          min: 0,
+          max: 10,
+          step: 1,
+          unit: 'review(s)',
+        };
+      });
     },
     reviewerNumberOfAssignments() {
       return Object.values(this.reviewerSelection)
diff --git a/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
index adf026b85..748132a1a 100644
--- a/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
@@ -45,6 +45,7 @@ import FormSelect from "@/basic/form/Select.vue";
 export default {
   name: "TemplateSelectionStep",
   components: { BasicForm, FormSelect },
+  emits: ['update:modalValue', 'update:assignmentType', 'update:workflowSteps', 'update:workflowStepsAssignment', 'update:template', 'update:workflow', 'update:isValid'],
   subscribeTable: [
     { filter: [{ key: "template", value: true }], table: "study" },
     {table: "workflow"},
diff --git a/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue b/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
index 12b961e6b..5934a9aac 100644
--- a/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
@@ -120,7 +120,6 @@ export default {
       if (this.modalValue.workflowMapping) this.workflowMapping = { ...this.modalValue.workflowMapping };
       if (this.modalValue.newStudyOwner) this.newStudyOwner = this.modalValue.newStudyOwner;
     }
-    console.log('[WorkflowMappingStep] mounted isValid:', this.isValid);
     this.$emit('update:isValid', this.isValid);
   },
   methods: {
@@ -162,24 +161,6 @@ export default {
       }
       return options;
     },
-    getSubmission(studyId) {
-      const studySteps = this.$store.getters["table/study_step/getFiltered"](
-          s => s.studyId === studyId
-      ) || [];
-      for (const step of studySteps) {
-        if (step.stepType === 1 && step.documentId !== null) {
-          let document = this.$store.getters["table/document/get"](step.documentId);
-          while (document && document.parentDocumentId !== null) {
-            document = this.$store.getters["table/document/get"](document.parentDocumentId);
-          }
-          if (document && document.submissionId) {
-            const submission = this.$store.getters["table/submission/get"](document.submissionId);
-            if (submission) return submission;
-          }
-        }
-      }
-      return null;
-    },
     reset() {
       this.targetWorkflowId = null;
       this.workflowMapping = {};

From 4c5d4808ffbb2d362824b00c197aaa9d332dd79a Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Sat, 11 Jul 2026 15:02:26 +0200
Subject: [PATCH 08/10] refactor: remove console logs

---
 .../dashboard/study/assignment/ReviewerSelectionStep.vue       | 3 ---
 .../dashboard/study/assignment/WorkflowMappingStep.vue         | 1 -
 2 files changed, 4 deletions(-)

diff --git a/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
index 56bb5e112..f5ec9299e 100644
--- a/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
@@ -127,7 +127,6 @@ export default {
   watch: {
     selectedReviewer: {
       handler(val) {
-        console.log('[ReviewerSelectionStep] selectedReviewer changed:', val);
         this.$emit('update:selectedReviewer', val);
         this.$emit('update:selectedReviewerRoles', this.selectedReviewerRoles);
       },
@@ -137,12 +136,10 @@ export default {
       this.$emit('update:selectedReviewerRoles', val);
     },
     isValid(val) {
-      console.log('[ReviewerSelectionStep] isValid emit:', val);
       this.$emit('update:isValid', val);
     },
   },
   mounted() {
-    console.log('[ReviewerSelectionStep] mounted isValid:', this.isValid);
     this.$emit('update:isValid', this.isValid);
     if (this.selectedReviewer.length > 0) {
       this.$emit('update:selectedReviewer', this.selectedReviewer);
diff --git a/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue b/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
index 5934a9aac..4738a650d 100644
--- a/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
@@ -110,7 +110,6 @@ export default {
       this.$emit('update:isWorkflowMappingComplete', val);
     },
     isValid(val) {
-      console.log('[WorkflowMappingStep] isValid emit:', val);
       this.$emit('update:isValid', val);
     },
   },

From 46e383e303fc9f36b333ce21b353fc70e0d6c323 Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Wed, 22 Jul 2026 20:36:32 +0300
Subject: [PATCH 09/10] fix: add author names

---
 .../dashboard/study/assignment/AssignmentSelectionStep.vue      | 2 +-
 .../components/dashboard/study/assignment/ConfirmationStep.vue  | 2 +-
 .../components/dashboard/study/assignment/DistributionStep.vue  | 2 +-
 .../dashboard/study/assignment/ReviewerSelectionStep.vue        | 2 +-
 .../dashboard/study/assignment/TemplateSelectionStep.vue        | 2 +-
 .../dashboard/study/assignment/WorkflowMappingStep.vue          | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
index ddb671dc2..8e0aa63f2 100644
--- a/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/AssignmentSelectionStep.vue
@@ -18,7 +18,7 @@ import BasicTable from "@/basic/Table.vue";
  * Renders a selectable table of documents, submissions, or study sessions depending
  * on the assignment type chosen in the template step. Supports both single-select
  * (for single assignment flow) and multi-select (for bulk flow).
- * @author karim ouf
+ * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang, Karim Ouf
  */
 export default {
   name: "AssignmentSelectionStep",
diff --git a/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue b/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
index 3fd0cd999..253b5be51 100644
--- a/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/ConfirmationStep.vue
@@ -122,7 +122,7 @@
  * Supports four variants: doc-sub-single, doc-sub-bulk, session-single, and session-bulk,
  * each rendering an appropriate summary layout. Also warns when reviewers lack matching
  * study sessions in session_user mode.
- * @author karim ouf
+ * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang, Karim Ouf
  */
 export default {
   name: "ConfirmationStep",
diff --git a/frontend/src/components/dashboard/study/assignment/DistributionStep.vue b/frontend/src/components/dashboard/study/assignment/DistributionStep.vue
index 5c0f8179e..ef5d990b3 100644
--- a/frontend/src/components/dashboard/study/assignment/DistributionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/DistributionStep.vue
@@ -27,7 +27,7 @@ import BasicForm from "@/basic/Form.vue";
  * (documents split manually between selected reviewers), and session-user-based
  * (each study session is assigned to its original user).
  * State is persisted via modalValue so navigating back restores the user's choices.
- * @author karim ouf
+ * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang, Karim Ouf
  */
 export default {
   name: "DistributionStep",
diff --git a/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
index f5ec9299e..d94848ab2 100644
--- a/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/ReviewerSelectionStep.vue
@@ -25,7 +25,7 @@ import BasicTable from "@/basic/Table.vue";
  * Displays a filterable, selectable table of all users with optional filters to
  * show only users who have documents or users from previously selected assignments.
  * State is persisted via modalValue so navigating back restores the selection.
- * @author karim ouf
+ * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang, Karim Ouf
  */
 export default {
   name: "ReviewerSelectionStep",
diff --git a/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue b/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
index 748132a1a..1727d8bc7 100644
--- a/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/TemplateSelectionStep.vue
@@ -40,7 +40,7 @@ import FormSelect from "@/basic/form/Select.vue";
  * choose whether assignments are based on documents, submissions, or study sessions,
  * and opt in to email notifications for reviewers. Emits template and workflow data
  * to the parent so downstream steps can filter and map workflow steps accordingly.
- * @author karim ouf
+ * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang, Karim Ouf
  */
 export default {
   name: "TemplateSelectionStep",
diff --git a/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue b/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
index 4738a650d..07222da70 100644
--- a/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
+++ b/frontend/src/components/dashboard/study/assignment/WorkflowMappingStep.vue
@@ -41,7 +41,7 @@ import FormSelect from "@/basic/form/Select.vue";
  * target workflow and then maps each annotator/editor step from the template to a
  * corresponding step in the target. Also allows choosing the new study owner (session
  * user vs. study owner) when creating bulk assignments.
- * @author karim ouf
+ * @author: Dennis Zyska, Alexander Bürkle, Linyin Huang, Karim Ouf
  */
 export default {
   name: "WorkflowMappingStep",

From af8931ac955500b8b9237f4c677611156a0cd5d6 Mon Sep 17 00:00:00 2001
From: karimouf <karimouf00@gmail.com>
Date: Wed, 22 Jul 2026 20:40:30 +0300
Subject: [PATCH 10/10] refactor: control assignment type using open function

---
 frontend/src/components/dashboard/Study.vue        | 14 ++++++--------
 .../components/dashboard/study/AssignmentModal.vue | 12 +++++-------
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/dashboard/Study.vue b/frontend/src/components/dashboard/Study.vue
index 5fee58109..99eaf8186 100644
--- a/frontend/src/components/dashboard/Study.vue
+++ b/frontend/src/components/dashboard/Study.vue
@@ -67,8 +67,7 @@
     <ConfirmModal v-if="modals.confirm" ref="confirmModal" @hide="modals.confirm = false"/>
     <ManageStudiesModal v-if="modals.bulkConfirm" ref="bulkConfirmModal" @hide="modals.bulkConfirm = false"/>
     <StudyCloseModal ref="studyCloseModal" />
-    <AssignmentModal v-if="modals.bulkAssignments" ref="bulkAssignmentsModal" :bulk="true" @hide="modals.bulkAssignments = false"/>
-    <AssignmentModal v-if="modals.singleAssignment" ref="singleAssignmentModal" :bulk="false" @hide="modals.singleAssignment = false"/>
+    <AssignmentModal v-if="modals.assignment" ref="assignmentModal" @hide="modals.assignment = false"/>
     <PublishAssessmentModal ref="publishAssessmentModal"/>
     <InformationModal v-if="modals.information" ref="informationModal" @hide="modals.information = false"/>
     <SavedTemplatesModal v-if="modals.savedTemplates" ref="savedTemplatesModal" @hide="modals.savedTemplates = false"/>
@@ -134,8 +133,7 @@ export default {
         deleteConf: false,
         confirm: false,
         bulkConfirm: false,
-        bulkAssignments: false,
-        singleAssignment: false,
+        assignment: false,
         information: false,
         savedTemplates: false,
       },
@@ -470,12 +468,12 @@ export default {
       this.$nextTick(() => this.$refs.bulkConfirmModal?.open());
     },
     openBulkAssignmentsModal() {
-      this.modals.bulkAssignments = true;
-      this.$nextTick(() => this.$refs.bulkAssignmentsModal?.open());
+      this.modals.assignment = true;
+      this.$nextTick(() => this.$refs.assignmentModal?.open(true));
     },
     openSingleAssignmentModal() {
-      this.modals.singleAssignment = true;
-      this.$nextTick(() => this.$refs.singleAssignmentModal?.open());
+      this.modals.assignment = true;
+      this.$nextTick(() => this.$refs.assignmentModal?.open(false));
     },
     openInformationModal(params) {
       this.modals.information = true;
diff --git a/frontend/src/components/dashboard/study/AssignmentModal.vue b/frontend/src/components/dashboard/study/AssignmentModal.vue
index b4a5a50a6..8d6c1474f 100644
--- a/frontend/src/components/dashboard/study/AssignmentModal.vue
+++ b/frontend/src/components/dashboard/study/AssignmentModal.vue
@@ -166,12 +166,6 @@ export default {
     DistributionStep,
     ConfirmationStep,
   },
-  props: {
-    bulk: {
-      type: Boolean,
-      default: true,
-    },
-  },
   subscribeTable: [
     { table: "document", filter: [{ key: "readyForReview", value: true }] },
     { table: "user" },
@@ -203,6 +197,9 @@ export default {
   data() {
     return {
 
+      // Whether the modal is creating a bulk or single assignment, set via open(bulk)
+      bulk: true,
+
       // Incremented on each reset to force step components to remount cleanly
       stepResetKey: 0,
 
@@ -371,7 +368,8 @@ export default {
       }
       return docs[0].id;
     },
-    open() {
+    open(bulk = true) {
+      this.bulk = bulk;
       this.reset();
       this.$refs.assignmentStepper.open();
     },