Calendar: Refactor with Base* components - refs BT#20903

assets/vue/components/ccalendarevent/Form.vue

@@ -1,24 +1,11 @@
 <template>
   <form>
-    <div class="field">
-      <div class="p-float-label">
-        <InputText
-          id="item_title"
+    <BaseInputText
       v-model="v$.item.title.$model"
-          :class="{ 'p-invalid': v$.item.title.$invalid }"
-          type="text"
-        />
-        <label
-          v-t="'Title'"
-          for="item_title"
+      :error-text="v$.item.title.$errors.map((error) => error.$message).join('<br>')"
+      :is-invalid="v$.item.title.$error"
+      :label="t('Title')"
     />
-      </div>
-      <small
-        v-if="v$.item.title.$invalid || v$.item.title.$pending.$response"
-        v-t="v$.item.title.required.$message"
-        class="p-error"
-      />
-    </div>
 
     <div class="flex flex-col md:flex-row gap-x-5">
       <div class="md:w-1/2 flex flex-col">
@@ -102,19 +89,14 @@
           show-share-with-user
         />
 
-        <div class="field-checkbox">
-          <Checkbox
+        <BaseCheckbox
           id="is_collective"
           v-model="item.collective"
-            :binary="true"
-          />
-          <label
-            v-t="'Is it editable by the invitees?'"
-            for="is_collective"
+          :label="t('Is it editable by the invitees?')"
+          name="is_collective"
         />
       </div>
     </div>
-    </div>
 
     <slot />
   </form>
@@ -125,13 +107,16 @@ import { computed, ref } from "vue"
 import { useStore } from "vuex"
 import { useVuelidate } from "@vuelidate/core"
 import { required } from "@vuelidate/validators"
-import InputText from "primevue/inputtext"
+import BaseInputText from "../basecomponents/BaseInputText.vue"
 import Calendar from "primevue/calendar"
 import EditLinks from "../resource_links/EditLinks.vue"
-import Checkbox from "primevue/checkbox"
+import BaseCheckbox from "../basecomponents/BaseCheckbox.vue"
+import { useI18n } from "vue-i18n"
 
 const store = useStore()
 
+const { t } = useI18n()
+
 // eslint-disable-next-line no-undef
 const props = defineProps({
   values: {

assets/vue/views/ccalendarevent/List.vue

@@ -19,15 +19,15 @@
         :values="item"
       />
       <template #footer>
-        <Button
+        <BaseButton
           :label="t('Cancel')"
-          class="p-button-outlined p-button-plain"
-          icon="pi pi-times"
+          icon="close"
+          type="black"
           @click="dialog = false"
         />
-        <Button
+        <BaseButton
           :label="item['@id'] ? t('Edit') : t('Add')"
-          class="p-button-secondary"
+          type="secondary"
           @click="onCreateEventForm"
         />
       </template>
@@ -42,22 +42,22 @@
       <CCalendarEventInfo :event="item" />
 
       <template #footer>
-        <Button
+        <BaseButton
           :label="t('Cancel')"
-          class="p-button-outlined p-button-plain"
-          icon="pi pi-times"
+          icon="close"
+          type="black"
           @click="dialogShow = false"
         />
-        <Button
+        <BaseButton
           :label="t('Delete')"
-          class="p-button-outlined p-button-danger"
-          icon="pi pi-trash"
+          icon="delete"
+          type="danger"
           @click="confirmDelete"
         />
-        <Button
+        <BaseButton
           v-if="isEventEditable"
           :label="t('Edit')"
-          class="p-button-secondary"
+          type="secondary"
           @click="dialog = true"
         />
       </template>
@@ -70,7 +70,7 @@
       :modal="true"
     >
       <div class="flex flex-col gap-4">
-        <h5>{{ sessionState.sessionAsEvent.title }}</h5>
+        <h5 v-text="sessionState.sessionAsEvent.title" />
         <p
           v-if="sessionState.sessionAsEvent.start"
           v-t="{
@@ -105,9 +105,7 @@
 <script setup>
 import { computed, reactive, ref, watch } from "vue"
 import { useStore } from "vuex"
-import { useRoute } from "vue-router"
 import { useI18n } from "vue-i18n"
-import axios from "axios"
 import { useConfirm } from "primevue/useconfirm"
 import { useAbbreviatedDatetime } from "../../composables/formatDate.js"
 import { usePlatformConfig } from "../../store/platformConfig"
@@ -119,14 +117,11 @@ import interactionPlugin from "@fullcalendar/interaction"
 import timeGridPlugin from "@fullcalendar/timegrid"
 import CCalendarEventForm from "../../components/ccalendarevent/Form.vue"
 import CCalendarEventInfo from "../../components/ccalendarevent/Info"
-import { ENTRYPOINT } from "../../config/entrypoint"
 import allLocales from "@fullcalendar/core/locales-all"
-import toInteger from "lodash/toInteger"
-import Button from "primevue/button"
+import BaseButton from "../../components/basecomponents/BaseButton.vue"
 import { useToast } from "primevue/usetoast"
 
 const store = useStore()
-const route = useRoute()
 const confirm = useConfirm()
 const platformConfigStore = usePlatformConfig()