Merge pull request #163 from avantifellows/feat/mult-sel

Support for Multiple Selections in Form

src/components/Dropdown.vue

@@ -1,22 +1,44 @@
 <template>
   <div class="" v-if="show">
-    <p class="text-base mb-[10px]">{{ label }}<span v-if="isRequired">*</span></p>
+    <p class="text-base mb-[10px]">
+      {{ label }}<span v-if="isRequired">*</span>
+    </p>
 
-    <FormKit
-      type="select"
-      v-model="value"
-      :options="options"
-      :name="dbKey"
-      :help="helpText"
-      placeholder=" "
-      :input-class="{ 'w-full': true }"
-      :inner-class="{
-        'border py-2 px-2 rounded border-grey overflow-hidden': true,
-      }"
-      :help-class="{
-        'mt-[10px] text-sm text-grey italic': true,
-      }"
-    />
+  <div v-if="multipleSelect" class="space-y-2">
+    <div
+      v-for="(option, index) in options"
+      :key="index"
+      class="flex items-center space-x-2"
+    >
+      <FormKit
+        type="checkbox"
+        :name="dbKey"
+        :value="option.value"
+        :checked="value.includes(option.value)"
+        @input="toggleSelection(option.value)"
+        :input-class="{ 'cursor-pointer': true }"
+      />
+      <span class="text-base">{{ option.label }}</span>
+    </div>
+    <p class="text-sm text-gray-500 italic mb-2">{{ helpText }}</p>
+  </div>
+
+  <FormKit
+    v-else
+    type="select"
+    v-model="value"
+    :options="options"
+    :name="dbKey"
+    :help="helpText"
+    placeholder=" "
+    :input-class="{ 'w-full cursor-pointer': true }"
+    :inner-class="{
+      'border py-2 px-2 rounded border-grey overflow-hidden cursor-pointer': true,
+    }"
+    :help-class="{
+      'mt-[10px] text-sm text-grey italic': true,
+    }"
+  />
   </div>
 </template>
 
@@ -49,17 +71,33 @@ export default {
       type: String,
       default: "",
     },
+    multipleSelect: {
+      type: Boolean,
+      default: false,
+    }
   },
   data() {
     return {
-      value: "",
+      value: this.multipleSelect ? [] : "",
     };
   },
+  methods: {
+    toggleSelection(selectedValue) {
+      // for checkbox
+      if (this.value.includes(selectedValue)) {
+        this.value = this.value.filter((item) => item !== selectedValue);
+      } else {
+        this.value.push(selectedValue);
+      }
+      this.$emit("update", this.value, this.dbKey);
+    },
+  },
   watch: {
     /**
      * Emits 'update' event whenever the dropdown value is changed
      */
     value() {
+      // for dropdown
       this.$emit("update", this.value, this.dbKey);
     },
   },

src/pages/Home.vue

@@ -166,6 +166,11 @@ export default {
     platform_id: {
       default: "",
       type: String,
+    },
+     /** What the signup form ID is, if any. */
+     signup_form_id: {
+      default: "",
+      type: String,
     },
     /** What the external platform link is. */
     platform_link: {
@@ -311,6 +316,13 @@ export default {
       );
     },
 
+    setSignupFormId() {
+      this.$store.dispatch(
+        "setSignupFormId",
+        (this.sessionData && this.sessionData.signup_form_id) || this.signup_form_id
+      );
+    },
+
     /** Returns the external platform link the user should be redirected to. */
     setPlatformLink() {
       this.$store.dispatch(
@@ -562,6 +574,7 @@ export default {
     this.isRedirectionEnabled;
     this.setPlatform;
     this.setPlatformId;
+    this.setSignupFormId;
     this.setPlatformLink;
     this.setAuthGroupImages;
 

src/pages/InformationForm.vue

@@ -15,6 +15,7 @@
         :is="formField.component"
         :label="formField.label[getLocale]"
         :isRequired="formField.required"
+        :multipleSelect="formField.multipleSelect === true"
         :dbKey="formField.key"
         :defaultValue="formField.defaultValue"
         :options="formField.options[getLocale]"
@@ -96,6 +97,8 @@ export default {
           : false;
       this.formSchemaData[field]["required"] =
         this.formSchemaData[field].required == "TRUE" ? true : false;
+        this.formSchemaData[field]["multipleSelect"] =
+        this.formSchemaData[field].multipleSelect == "TRUE" ? true : false;
     });
     this.isUserDataIsComplete();
   },

src/pages/NewSignup.vue

@@ -47,7 +47,7 @@
       />
     </div>
     <div
-      v-if="$store.state.sessionData.type == 'sign-in'"
+      v-if="$store.state.sessionData.type == 'sign-in' || $store.state.platform == 'gurukul'"
       class="mt-[30px] flex w-48 mx-auto justify-between items-center"
     >
       <hr class="w-20 text-grey" />
@@ -56,7 +56,7 @@
     </div>
 
     <button
-      v-if="$store.state.sessionData.type == 'sign-in'"
+      v-if="$store.state.sessionData.type == 'sign-in' || $store.state.platform == 'gurukul'"
       @click="redirectToSignIn"
       class="mt-[20px] mx-auto pt-2 text-primary text-base"
       v-html="signInText"
@@ -74,7 +74,8 @@
       "
       class="bg-primary-hover py-10 rounded-md shadow-sm"
     >
-      <p v-html="idGeneratedText" />
+      <div v-if="userData['already_exists']"><p v-html="idExistsText" /></div>
+      <div v-else><p v-html="idGeneratedText" /></div>
     </div>
 
     <button
@@ -112,9 +113,15 @@ export default {
     };
   },
   async created() {
-    this.formData = await FormSchemaAPI.getFormSchema(
-      this.$store.state.sessionData.signup_form_id
-    );
+    if (this.$store.state.sessionData.signup_form_id) {
+      this.formData = await FormSchemaAPI.getFormSchema(
+        this.$store.state.sessionData.signup_form_id
+      );
+    } else {
+      this.formData = await FormSchemaAPI.getFormSchema(
+        this.$store.state.signup_form_id
+      );
+    }
 
     Object.keys(this.formData.attributes).forEach((field) => {
       this.formData.attributes[field]["component"] =
@@ -152,7 +159,17 @@ export default {
 
     /** Returns button text */
     startSessionText() {
-      return this.getLocale == "en" ? "Start Session" : "सत्र शुरू करें";
+      let resultText = "";
+      if (this.getLocale != "en") resultText = "सत्र शुरू करें";
+      else {
+        if (this.$store.state.platform == "quiz") resultText = "Start Quiz";
+        else if (this.$store.state.platform == "others") resultText = "Start Session";
+        else if (this.$store.state.platform == "gurukul") resultText = "Start Learning on Gurukul!";
+        else if (["youtube", "meet", "zoom"].includes(this.$store.state.platform)) resultText = "Start Class";
+        else if (["AF-plio", "SCERT-plio"].includes(this.$store.state.platform)) resultText = "Start Plio";
+      }
+
+      return resultText;
     },
 
     /** Returns the locale selected by user */
@@ -174,6 +191,12 @@ export default {
         future sessions.`
         : `आपकी आईडी <b> ${this.userData["user_id"]}</b> है|  <br/> कृपया इसे नोट कर लीजिए। भविष्य में साइन-इन करने के लिए इसी आईडी का उपयोग करें।`;
     },
+    /** if ID already exists */
+    idExistsText() {
+      return this.getLocale == "en"
+        ? `You are already registered! Your ID is <b> ${this.userData["user_id"]}.</b>`
+        : `आप पहले से पंजीकृत हैं! आपकी आईडी <b> ${this.userData["user_id"]}</b> है|`;
+    },
     /** returns title for the form */
     formTitle() {
       return this.formData.name;
@@ -270,30 +293,30 @@ export default {
     async signUp() {
       sendSQSMessage(
         "sign-up",
-        this.$store.state.sessionData.purpose["sub-type"],
-        this.$store.state.sessionData.platform,
-        this.$store.state.sessionData.platform_id,
+        this.$store.state.sessionData.purpose?.["sub-type"] ?? "", // ?? for gurukul case
+        this.$store.state.platform,
+        this.$store.state.platform_id,
         this.userData["student_id"],
         "", // list of authentication methods
         this.$store.state.authGroupData.name,
         this.$store.state.authGroupData.input_schema.user_type,
-        this.$store.state.sessionData.session_id,
+        this.$store.state.sessionData.session_id ?? "",
         "", // user IP address. Will be added in a later PR.
         "phone" in this.userData ? this.userData["phone"] : "",
-        this.$store.state.sessionData.meta_data.batch,
+        this.$store.state.sessionData.meta_data?.batch ?? "",
         "date_of_birth" in this.userData ? this.userData["date_of_birth"] : ""
       );
       this.formSubmitted = true;
       this.isLoading = true;
 
-      let createdUserId = await UserAPI.newUserSignup(
+      let createdUser = await UserAPI.newUserSignup(
         this.userData,
         this.$store.state.id_generation,
         this.$store.state.authGroupData.input_schema.user_type,
         this.$store.state.authGroupData.name
       );
 
-      if (createdUserId == "" || createdUserId.error) {
+      if (createdUser == "" || createdUser.error || createdUser == null) {
         this.$router.push({
           name: "Error",
           state: {
@@ -303,14 +326,19 @@ export default {
         });
       }
       this.isLoading = false;
-      this.userData["user_id"] = createdUserId ? createdUserId : "";
-      UserAPI.postUserSessionActivity(
-        this.userData["user_id"],
-        "sign-up",
-        this.$store.state.sessionData.session_id,
-        this.$store.state.authGroupData.input_schema.user_type,
-        this.$store.state.sessionData.session_occurrence_id
-      );
+      this.userData["user_id"] = createdUser?.["user_id"] ?? "";
+      this.userData["already_exists"] = createdUser?.["already_exists"] ?? false;
+
+      if (this.$store.state.platform != "gurukul") {
+        UserAPI.postUserSessionActivity(
+          this.userData["user_id"],
+          "sign-up",
+          this.$store.state.sessionData.session_id,
+          this.$store.state.authGroupData.input_schema.user_type,
+          this.$store.state.sessionData.session_occurrence_id
+        );
+      }
+
     },
 
     /** redirects to destination */
@@ -325,25 +353,28 @@ export default {
           this.$store.state.authGroupData.input_schema.user_type
         )
       ) {
-        postUserSessionActivity(
-          this.userData["student_id"],
-          "attendance-on-sign-up",
-          this.$store.state.sessionData.session_id,
-          this.$store.state.sessionData.session_occurrence_id
-        );
+        if (this.$store.state.platform != "gurukul") {
+          postUserSessionActivity(
+            this.userData["student_id"],
+            "attendance-on-sign-up",
+            this.$store.state.sessionData.session_id,
+            this.$store.state.sessionData.session_occurrence_id
+          );
+        }
+
         sendSQSMessage(
           "attendance-on-sign-up",
-          this.$store.state.sessionData.purpose["sub-type"],
+          this.$store.state.sessionData.purpose?.["sub-type"] ?? "", // ?? for gurukul case
           this.$store.state.platform,
           this.$store.state.platform_id,
           this.userData["user_id"],
           "",
           this.$store.state.authGroupData.name,
           this.$store.state.authGroupData.input_schema.user_type,
-          this.$store.state.sessionData.session_id,
+          this.$store.state.sessionData.session_id ?? "",
           "",
           "phone" in this.userData ? this.userData["phone"] : "",
-          this.$store.state.sessionData.meta_data.batch,
+          this.$store.state.sessionData.meta_data?.batch ?? "", // for gurukul
           "date_of_birth" in this.userData ? this.userData["date_of_birth"] : ""
         );
       }

src/router/index.js

@@ -28,6 +28,7 @@ const allowedQueryParams = [
   "redirection",
   "platform",
   "platform_id",
+  "signup_form_id",
   "type",
   "sub_type",
 ];
@@ -52,6 +53,7 @@ const routes = [
         route.query.platform_id ||
         route.query.redirectId ||
         route.query.redirectID,
+      signup_form_id: route.query.signup_form_id,
     }),
   },
   {

src/services/API/user.js

@@ -88,7 +88,7 @@ export default {
           })
         )
         .then((response) => {
-          resolve(response.data.toString());
+          resolve(response.data);
         })
         .catch((error) => {
           console.log(error);

src/store/index.js

@@ -9,6 +9,7 @@ export default createStore({
     redirection: true,
     platform: "",
     platform_id: "",
+    signup_form_id: "",
     platform_link: "",
     images: [],
   },
@@ -31,6 +32,9 @@ export default createStore({
     setPlatformId({ commit }, platform_id) {
       commit("setPlatformId", platform_id);
     },
+    setSignupFormId({ commit }, signup_form_id) {
+      commit("setSignupFormId", signup_form_id);
+    },
     setPlatformLink({ commit }, platform_link) {
       commit("setPlatformLink", platform_link);
     },
@@ -60,6 +64,9 @@ export default createStore({
     setPlatformId(state, platform_id) {
       state.platform_id = platform_id;
     },
+    setSignupFormId(state, signup_form_id) {
+      state.signup_form_id = signup_form_id;
+    },
     setPlatformLink(state, platform_link) {
       state.platform_link = platform_link;
     },