Display: Remove BaseDropdown component in favor of BaseSelect

Author: AngelFQC

assets/vue/components/admin/ColorThemePreview.vue

@@ -5,7 +5,7 @@ import BaseCalendar from "../basecomponents/BaseCalendar.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
 import BaseMenu from "../basecomponents/BaseMenu.vue"
 import BaseDialogConfirmCancel from "../basecomponents/BaseDialogConfirmCancel.vue"
-import BaseDropdown from "../basecomponents/BaseDropdown.vue"
+import BaseSelect from "../basecomponents/BaseSelect.vue"
 import BaseRadioButtons from "../basecomponents/BaseRadioButtons.vue"
 import BaseCheckbox from "../basecomponents/BaseCheckbox.vue"
 import BaseInputText from "../basecomponents/BaseInputText.vue"
@@ -136,24 +136,7 @@ provide("isCustomizing", isCustomizing)
           ref="menu"
           :model="menuItems"
         />
-        <BaseDropdown
-          v-model="dropdown"
-          :label="t('Dropdown')"
-          :options="[
-            {
-              label: t('Option 1'),
-              value: 'option_1',
-            },
-            {
-              label: t('Option 2'),
-              value: 'option_2',
-            },
-            {
-              label: t('Option 3'),
-              value: 'option_3',
-            },
-          ]"
-          class="w-36"
+        <BaseSelect
           input-id="dropdown"
           name="dropdown"
           option-label="label"

assets/vue/components/assignments/AssignmentsForm.vue

@@ -30,7 +30,7 @@
       />
 
       <div v-if="chkAddToGradebook">
-        <BaseDropdrown
+        <BaseSelect
           v-model="v$.gradebookId.$model"
           :error-text="v$.gradebookId.$errors.map((error) => error.$message).join('<br>')"
           :is-invalid="v$.gradebookId.$error"
@@ -92,7 +92,7 @@
         name="add_to_calendar"
       />
 
-      <BaseDropdrown
+      <BaseSelect
         v-model="v$.allowTextAssignment.$model"
         :error-text="v$.allowTextAssignment.$errors.map((error) => error.$message).join('<br>')"
         :is-invalid="v$.allowTextAssignment.$error"
@@ -122,7 +122,7 @@ import BaseInputText from "../basecomponents/BaseInputText.vue"
 import BaseAdvancedSettingsButton from "../basecomponents/BaseAdvancedSettingsButton.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
 import BaseCheckbox from "../basecomponents/BaseCheckbox.vue"
-import BaseDropdrown from "../basecomponents/BaseDropdown.vue"
+import BaseSelect from "../basecomponents/BaseSelect.vue"
 import BaseInputNumber from "../basecomponents/BaseInputNumber.vue"
 import useVuelidate from "@vuelidate/core"
 import { computed, reactive, ref, watchEffect } from "vue"

assets/vue/components/attendance/AttendanceCalendarForm.vue

@@ -22,8 +22,6 @@
         v-model="formData.repeatType"
         :label="t('Repeat Type')"
         :options="repeatTypeOptions"
-        option-label="label"
-        option-value="value"
         required
       />
 
@@ -61,8 +59,6 @@
       v-model="formData.group"
       :label="t('Group')"
       :options="groupOptions"
-      option-label="label"
-      option-value="value"
       required
     />
 

assets/vue/components/attendance/AttendanceForm.vue

@@ -42,8 +42,6 @@
           v-model="formData.gradebookOption"
           :label="t('Select Gradebook Option')"
           :options="gradebookOptions"
-          option-label="label"
-          option-value="value"
         />
 
         <BaseInputText

assets/vue/components/basecomponents/BaseDropdown.vue

@@ -1,64 +1,83 @@
 <template>
   <div class="field">
-    <FloatLabel>
+    <FloatLabel variant="on">
       <Dropdown
-        :id="id"
+        v-model="modelValue"
         :disabled="disabled"
+        :input-id="id"
+        :invalid="isInvalid"
         :loading="isLoading"
-        :model-value="modelValue"
+        :name="name"
         :option-label="optionLabel"
         :option-value="optionValue"
         :options="realOptions"
+        :placeholder="placeholder"
         :show-clear="allowClear"
         @change="emit('change', $event)"
-        @update:model-value="emit('update:modelValue', $event)"
       >
         <template #emptyfilter>--</template>
         <template #empty>
-          <p class="pt-2 px-2">{{ t("No available options") }}</p>
+          {{ t("No available options") }}
         </template>
       </Dropdown>
       <label
-        v-t="label"
         :for="id"
+        v-text="label"
       />
     </FloatLabel>
+    <Message
+      v-if="isInvalid || messageText"
+      size="small"
+      :severity="isInvalid ? 'error' : 'contrast'"
+      variant="simple"
+    >
+      {{ messageText }}
+    </Message>
   </div>
 </template>
 
 <script setup>
 import { useI18n } from "vue-i18n"
 import { computed } from "vue"
 import FloatLabel from "primevue/floatlabel"
+import Dropdown from "primevue/select"
+import Message from "primevue/message"
 
 const { t } = useI18n()
 
+const modelValue = defineModel({
+  type: [String, Number, Object],
+})
+
 const props = defineProps({
   id: {
     type: String,
     require: true,
     default: "",
   },
+  name: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
   label: {
     type: String,
     required: true,
     default: "",
   },
-  modelValue: {
-    type: [String, Number, null],
-    required: true,
-  },
   options: {
     type: Array,
     required: true,
   },
   optionLabel: {
     type: String,
-    required: true,
+    required: false,
+    default: "label",
   },
   optionValue: {
     type: String,
-    required: true,
+    required: false,
+    default: "value",
   },
   isInvalid: {
     type: Boolean,
@@ -82,9 +101,19 @@ const props = defineProps({
     required: false,
     type: Boolean,
   },
+  placeholder: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  messageText: {
+    type: [String, null],
+    required: false,
+    default: null,
+  },
 })
 
-const emit = defineEmits(["update:modelValue", "change"])
+const emit = defineEmits(["change"])
 
 const realOptions = computed(() => {
   if (props.hastEmptyValue) {

assets/vue/components/basecomponents/BaseSelect.vue

@@ -117,8 +117,6 @@ const maxSubscriptionsDisabled = computed(() => 0 === subscriptionVisibilitySele
       v-model="subscriptionVisibilitySelected"
       :label="t('Allow subscriptions')"
       :options="subscriptionVisibilityList"
-      option-label="label"
-      option-value="value"
     />
     <BaseAutocomplete
       id="subscription_item"

assets/vue/components/ccalendarevent/CalendarInvitations.vue

@@ -33,14 +33,14 @@
         :maxlength="40"
         validation-message="Only letters (a-z) and numbers (0-9) are allowed."
       />
-      <BaseDropdown
+      <BaseSelect
         v-model="courseLanguage"
         :label="t('Language')"
         :options="languageOptions"
-        :placeholder="t('Select Language')"
-        input-id="language-dropdown"
+        input-id="language-dropdowns"
         name="language"
         option-label="name"
+        option-value="id"
       />
       <BaseCheckbox
         id="demo-content"
@@ -78,7 +78,7 @@
 import { onMounted, ref } from "vue"
 import BaseInputText from "../basecomponents/BaseInputText.vue"
 import BaseAdvancedSettingsButton from "../basecomponents/BaseAdvancedSettingsButton.vue"
-import BaseDropdown from "../basecomponents/BaseDropdown.vue"
+import BaseSelect from "../basecomponents/BaseSelect.vue"
 import BaseCheckbox from "../basecomponents/BaseCheckbox.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
 import { useRouter } from "vue-router"

assets/vue/components/course/Form.vue

@@ -5,8 +5,6 @@
       v-model="selectedFormat"
       :label="t('Export format')"
       :options="formats"
-      option-label="label"
-      option-value="value"
     />
 
     <LayoutFormButtons>

assets/vue/components/glossary/GlossaryExportForm.vue

@@ -7,9 +7,9 @@
     />
     <SectionHeader :title="t('Step 1 - Installation Language')" />
 
-    <BaseDropdown
+    <BaseSelect
       v-model="installerData.langIso"
-      :help-text="
+      :message-text="
         t('Cannot find your language in the list? Contact us at {0} to contribute as a translator.', [
           '[email protected]',
         ])
@@ -78,7 +78,7 @@ import { inject } from "vue"
 import { useI18n } from "vue-i18n"
 
 import Message from "primevue/message"
-import BaseDropdown from "../basecomponents/BaseDropdown.vue"
+import BaseSelect from "../basecomponents/BaseSelect.vue"
 import BaseButton from "../basecomponents/BaseButton.vue"
 import SectionHeader from "../layout/SectionHeader.vue"