Attendance: Improve attendance tool with Vue & Symfony integration - refs #6048

assets/vue/components/attendance/AttendanceCalendarForm.vue

@@ -0,0 +1,156 @@
+<template>
+  <form class="flex flex-col gap-6 mt-6">
+    <!-- Start Date -->
+    <BaseCalendar
+      v-model="formData.startDate"
+      :label="t('Start Date')"
+      :show-time="true"
+      required
+    />
+
+    <!-- Repeat Date -->
+    <BaseCheckbox
+      v-model="formData.repeatDate"
+      :label="t('Repeat Date')"
+      @change="toggleRepeatOptions"
+    />
+
+    <div v-if="formData.repeatDate">
+      <!-- Repeat Type -->
+      <BaseSelect
+        v-model="formData.repeatType"
+        :label="t('Repeat Type')"
+        :options="repeatTypeOptions"
+        option-label="label"
+        option-value="value"
+        required
+      />
+
+      <!-- Number of Days for Every X Days -->
+      <div v-if="formData.repeatType === 'every-x-days'">
+        <BaseInputNumber
+          v-model="formData.repeatDays"
+          :label="t('Number of days')"
+          type="number"
+          min="1"
+          required
+        />
+      </div>
+
+      <!-- Repeat End Date -->
+      <BaseCalendar
+        v-model="formData.repeatEndDate"
+        :label="t('Repeat End Date')"
+        :show-time="true"
+        required
+      />
+    </div>
+
+    <!-- Group -->
+    <BaseSelect
+      v-model="formData.group"
+      :label="t('Group')"
+      :options="groupOptions"
+      option-label="label"
+      option-value="value"
+      required
+    />
+
+    <!-- Buttons -->
+    <LayoutFormButtons>
+      <BaseButton
+        :label="t('Back')"
+        icon="arrow-left"
+        type="black"
+        @click="$emit('back-pressed')"
+      />
+      <BaseButton
+        :label="t('Save')"
+        icon="check"
+        type="success"
+        @click="submitForm"
+      />
+    </LayoutFormButtons>
+  </form>
+</template>
+<script setup>
+import { onMounted, reactive, ref } from "vue"
+import { useI18n } from "vue-i18n"
+import attendanceService from "../../services/attendanceService"
+import BaseCalendar from "../../components/basecomponents/BaseCalendar.vue"
+import BaseCheckbox from "../../components/basecomponents/BaseCheckbox.vue"
+import BaseSelect from "../../components/basecomponents/BaseSelect.vue"
+import LayoutFormButtons from "../../components/layout/LayoutFormButtons.vue"
+import BaseButton from "../../components/basecomponents/BaseButton.vue"
+import { useRoute } from "vue-router"
+import BaseInputNumber from "../basecomponents/BaseInputNumber.vue"
+
+const { t } = useI18n()
+const emit = defineEmits(["back-pressed"])
+const route = useRoute()
+const parentResourceNodeId = ref(Number(route.params.node))
+
+const formData = reactive({
+  startDate: "",
+  repeatDate: false,
+  repeatType: "",
+  repeatEndDate: "",
+  repeatDays: 0,
+  group: "",
+})
+
+const repeatTypeOptions = [
+  { label: t("Daily"), value: "daily" },
+  { label: t("Weekly"), value: "weekly" },
+  { label: t("Bi-Weekly"), value: "bi-weekly" },
+  { label: t("Every X Days"), value: "every-x-days" },
+  { label: t("Monthly by Date"), value: "monthly-by-date" },
+]
+
+const groupOptions = ref([])
+
+const toggleRepeatOptions = () => {
+  if (!formData.repeatDate) {
+    formData.repeatType = ""
+    formData.repeatEndDate = ""
+    formData.repeatDays = 0
+  }
+}
+
+const submitForm = async () => {
+  if (!formData.startDate) {
+    return
+  }
+
+  if (formData.repeatDate && (!formData.repeatType || !formData.repeatEndDate)) {
+    return
+  }
+
+  const payload = {
+    startDate: formData.startDate,
+    repeatDate: formData.repeatDate,
+    repeatType: formData.repeatType,
+    repeatEndDate: formData.repeatEndDate,
+    repeatDays: formData.repeatType === "every-x-days" ? formData.repeatDays : null,
+    group: formData.group ? parseInt(formData.group) : null,
+  }
+
+  try {
+    await attendanceService.addAttendanceCalendar(route.params.id, payload)
+    emit("back-pressed")
+  } catch (error) {
+    console.error("Error adding attendance calendar entry:", error)
+  }
+}
+
+
+const loadGroups = async () => {
+  try {
+    groupOptions.value = await attendanceService.fetchGroups(parentResourceNodeId.value)
+  } catch (error) {
+    console.error("Error loading groups:", error)
+  }
+}
+
+onMounted(loadGroups)
+</script>

assets/vue/components/attendance/AttendanceForm.vue

@@ -0,0 +1,205 @@
+<template>
+  <form
+    @submit.prevent="submitForm"
+    class="flex flex-col gap-6 mt-6"
+  >
+    <!-- Title -->
+    <BaseInputTextWithVuelidate
+      v-model="formData.title"
+      :label="t('Title')"
+      :vuelidate-property="v$.title"
+      required
+    />
+
+    <!-- Description -->
+    <BaseTinyEditor
+      v-model="formData.description"
+      :title="t('Description')"
+      editor-id="attendance_description"
+    />
+
+    <!-- Advanced Settings (only in creation mode) -->
+    <BaseAdvancedSettingsButton
+      v-if="!isEditMode"
+      v-model="showAdvancedSettings"
+    >
+      <div class="flex flex-row mb-4">
+        <label class="font-semibold w-28">{{ t("Gradebook Options") }}:</label>
+        <BaseCheckbox
+          id="attendance_qualify_gradebook"
+          v-model="formData.qualifyGradebook"
+          :label="t('Qualify Attendance Gradebook')"
+          name="attendance_qualify_gradebook"
+          @change="toggleGradebookOptions"
+        />
+      </div>
+
+      <div
+        v-if="formData.qualifyGradebook"
+        class="ml-6"
+      >
+        <BaseSelect
+          v-model="formData.gradebookOption"
+          :label="t('Select Gradebook Option')"
+          :options="gradebookOptions"
+          option-label="label"
+          option-value="value"
+        />
+
+        <BaseInputText
+          v-model="formData.gradebookTitle"
+          :label="t('Gradebook Column Title')"
+        />
+
+        <BaseInputNumber
+          v-model="formData.gradeWeight"
+          :label="t('Grade Weight')"
+          :min="0"
+          :step="0.01"
+        />
+      </div>
+    </BaseAdvancedSettingsButton>
+
+    <!-- Buttons -->
+    <LayoutFormButtons>
+      <BaseButton
+        :label="t('Back')"
+        icon="back"
+        type="black"
+        @click="emit('backPressed', route.query)"
+      />
+      <BaseButton
+        :label="t('Save Attendance')"
+        icon="save"
+        type="success"
+        @click="submitForm"
+      />
+    </LayoutFormButtons>
+  </form>
+</template>
+<script setup>
+import { computed, onMounted, ref, reactive, watch } from "vue"
+import { useI18n } from "vue-i18n"
+import { required } from "@vuelidate/validators"
+import useVuelidate from "@vuelidate/core"
+import attendanceService from "../../services/attendanceService"
+import BaseInputTextWithVuelidate from "../../components/basecomponents/BaseInputTextWithVuelidate.vue"
+import BaseTinyEditor from "../../components/basecomponents/BaseTinyEditor.vue"
+import BaseCheckbox from "../../components/basecomponents/BaseCheckbox.vue"
+import BaseSelect from "../../components/basecomponents/BaseSelect.vue"
+import BaseInputNumber from "../../components/basecomponents/BaseInputNumber.vue"
+import LayoutFormButtons from "../../components/layout/LayoutFormButtons.vue"
+import BaseButton from "../../components/basecomponents/BaseButton.vue"
+import BaseAdvancedSettingsButton from "../../components/basecomponents/BaseAdvancedSettingsButton.vue"
+import BaseInputText from "../basecomponents/BaseInputText.vue"
+import { useRoute } from "vue-router"
+import { RESOURCE_LINK_PUBLISHED } from "../../constants/entity/resourcelink"
+import { useCidReq } from "../../composables/cidReq"
+import gradebookService from "../../services/gradebookService"
+
+const { t } = useI18n()
+const route = useRoute()
+const { sid, cid } = useCidReq()
+const emit = defineEmits(["backPressed"])
+const props = defineProps({
+  initialData: {
+    type: Object,
+    default: () => ({}),
+  },
+})
+
+const parentResourceNodeId = ref(Number(route.params.node))
+const resourceLinkList = ref([
+  {
+    sid,
+    cid,
+    visibility: RESOURCE_LINK_PUBLISHED,
+  },
+])
+
+const formData = reactive({
+  id: null,
+  title: "",
+  description: "",
+  qualifyGradebook: false,
+  gradebookOption: null,
+  gradebookTitle: "",
+  gradeWeight: 0.0,
+})
+
+const gradebookOptions = ref([])
+
+const rules = {
+  title: { required },
+  description: {},
+  qualifyGradebook: {},
+  gradebookOption: {},
+  gradebookTitle: {},
+  gradeWeight: {},
+}
+
+const v$ = useVuelidate(rules, formData)
+
+const showAdvancedSettings = ref(false)
+
+const isEditMode = computed(() => !!props.initialData?.id)
+
+onMounted(async () => {
+  if (!isEditMode.value) {
+    try {
+      const categories = await gradebookService.getCategories(cid, sid)
+      gradebookOptions.value = categories.map((cat) => ({
+        label: cat.title,
+        value: cat.id,
+      }))
+    } catch (error) {
+      console.error("Error loading gradebook categories:", error)
+    }
+  }
+})
+
+const toggleGradebookOptions = () => {
+  if (!formData.qualifyGradebook) {
+    formData.gradebookOption = null
+    formData.gradebookTitle = ""
+    formData.gradeWeight = 0.0
+  }
+}
+
+watch(
+  () => props.initialData,
+  (newData) => {
+    Object.assign(formData, newData || {})
+  },
+  { immediate: true },
+)
+
+const submitForm = async () => {
+  v$.value.$touch()
+  if (v$.value.$invalid) {
+    return
+  }
+
+  const postData = {
+    title: formData.title,
+    description: formData.description,
+    parentResourceNodeId: parentResourceNodeId.value,
+    resourceLinkList: resourceLinkList.value,
+    sid: route.query.sid || null,
+    cid: route.query.cid || null,
+    attendanceQualifyTitle: formData.gradebookTitle,
+    attendanceWeight: formData.gradeWeight,
+  }
+
+  try {
+    if (props.initialData?.id) {
+      await attendanceService.updateAttendance(props.initialData.id, postData)
+    } else {
+      await attendanceService.createAttendance(postData)
+    }
+    emit("backPressed", route.query)
+  } catch (error) {
+    console.error("Error submitting attendance:", error)
+  }
+}
+</script>