feat: exercise form and submission list
This commit is contained in:
Jannat Patel
@@ -343,6 +343,22 @@ const addAssignments = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const addProgrammingExercises = () => {
|
||||
if (isInstructor.value || isModerator.value) {
|
||||
sidebarLinks.value.push({
|
||||
label: 'Programming Exercises',
|
||||
icon: 'Code',
|
||||
to: 'ProgrammingExercises',
|
||||
activeFor: [
|
||||
'ProgrammingExercises',
|
||||
'ProgrammingExerciseForm',
|
||||
'ProgrammingExerciseSubmissionList',
|
||||
'ProgrammingExerciseSubmission',
|
||||
],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const addPrograms = () => {
|
||||
let activeFor = ['Programs', 'ProgramForm']
|
||||
let index = 1
|
||||
@@ -628,6 +644,7 @@ watch(userResource, () => {
|
||||
addPrograms()
|
||||
addQuizzes()
|
||||
addAssignments()
|
||||
addProgrammingExercises()
|
||||
setUpOnboarding()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -2,17 +2,24 @@
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title:
|
||||
type == 'quiz'
|
||||
? __('Add a quiz to your lesson')
|
||||
: __('Add an assignment to your lesson'),
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: __('Save'),
|
||||
variant: 'solid',
|
||||
onClick: () => {
|
||||
addAssessment()
|
||||
},
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body>
|
||||
<div class="p-5 space-y-4">
|
||||
<div v-if="type == 'quiz'" class="text-lg font-semibold">
|
||||
{{ __('Add a quiz to your lesson') }}
|
||||
</div>
|
||||
<div v-else class="text-lg font-semibold">
|
||||
{{ __('Add an assignment to your lesson') }}
|
||||
</div>
|
||||
<template #body-content>
|
||||
<div class="">
|
||||
<div>
|
||||
<Link
|
||||
v-if="type == 'quiz'"
|
||||
@@ -29,17 +36,12 @@
|
||||
:onCreate="(value, close) => redirectToForm()"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex justify-end space-x-2">
|
||||
<Button variant="solid" @click="addAssessment()">
|
||||
{{ __('Save') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup>
|
||||
import { Dialog, Button } from 'frappe-ui'
|
||||
import { Dialog } from 'frappe-ui'
|
||||
import { onMounted, ref, nextTick } from 'vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
|
||||
|
||||
140
frontend/src/components/Controls/ChildTable.vue
Normal file
140
frontend/src/components/Controls/ChildTable.vue
Normal file
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="overflow-x-auto border rounded-md">
|
||||
<!-- Header Row -->
|
||||
<div
|
||||
class="grid items-center space-x-4 p-2 border-b"
|
||||
:style="{ gridTemplateColumns: getGridTemplateColumns() }"
|
||||
>
|
||||
<div
|
||||
v-for="(column, index) in columns"
|
||||
:key="index"
|
||||
class="text-sm text-ink-gray-5"
|
||||
>
|
||||
{{ column }}
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
<!-- Data Rows -->
|
||||
<div
|
||||
v-for="(row, rowIndex) in rows"
|
||||
:key="rowIndex"
|
||||
class="grid items-center space-x-4 p-2"
|
||||
:style="{ gridTemplateColumns: getGridTemplateColumns() }"
|
||||
>
|
||||
<template v-for="key in Object.keys(row)" :key="key">
|
||||
<input
|
||||
v-if="showKey(key)"
|
||||
v-model="row[key]"
|
||||
class="py-1.5 px-2 border-none focus:ring-0 focus:border focus:border-gray-300 focus:bg-surface-gray-2 rounded-sm text-sm focus:outline-none"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div class="relative" ref="menuRef">
|
||||
<Button variant="ghost">
|
||||
<template #icon>
|
||||
<Ellipsis
|
||||
class="size-4 text-ink-gray-7 stroke-1.5 cursor-pointer"
|
||||
@click="toggleMenu(rowIndex)"
|
||||
/>
|
||||
</template>
|
||||
</Button>
|
||||
|
||||
<div
|
||||
v-if="menuOpenIndex === rowIndex"
|
||||
class="absolute right-0 z-10 mt-1 w-32 bg-white border border-outline-gray-1 rounded-md shadow-sm"
|
||||
>
|
||||
<button
|
||||
@click="deleteRow(rowIndex)"
|
||||
class="flex items-center space-x-2 w-full text-left px-3 py-2 text-sm text-ink-red-3"
|
||||
>
|
||||
<Trash2 class="size-4 stroke-1.5" />
|
||||
<span>
|
||||
{{ __('Delete') }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Row Button -->
|
||||
<div class="mt-2">
|
||||
<Button @click="addRow">
|
||||
<template #prefix>
|
||||
<Plus class="size-4 text-ink-gray-7" />
|
||||
</template>
|
||||
{{ __('Add Row') }}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { Button } from 'frappe-ui'
|
||||
import { Ellipsis, Plus, Trash2 } from 'lucide-vue-next'
|
||||
import { onClickOutside } from '@vueuse/core'
|
||||
|
||||
const rows = defineModel<Cell[][]>()
|
||||
const menuOpenIndex = ref<number | null>(null)
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: Cell[][]): void
|
||||
}>()
|
||||
|
||||
type Cell = {
|
||||
value: string
|
||||
editable?: boolean
|
||||
}
|
||||
|
||||
// Props
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
modelValue?: Cell[][]
|
||||
columns?: string[]
|
||||
}>(),
|
||||
{
|
||||
columns: [],
|
||||
}
|
||||
)
|
||||
|
||||
const columns = ref(props.columns)
|
||||
|
||||
const addRow = () => {
|
||||
if (!rows.value) {
|
||||
rows.value = []
|
||||
}
|
||||
let newRow: { [key: string]: string } = {}
|
||||
columns.value.forEach((column: any) => {
|
||||
newRow[column.toLowerCase().split(' ').join('_')] = ''
|
||||
})
|
||||
rows.value.push(newRow)
|
||||
emit('update:modelValue', rows.value)
|
||||
}
|
||||
|
||||
const deleteRow = (index: number) => {
|
||||
rows.value.splice(index, 1)
|
||||
emit('update:modelValue', rows.value)
|
||||
}
|
||||
|
||||
const getGridTemplateColumns = () => {
|
||||
return [...Array(columns.value.length).fill('1fr'), '0.25fr'].join(' ')
|
||||
}
|
||||
|
||||
const toggleMenu = (index: number) => {
|
||||
menuOpenIndex.value = menuOpenIndex.value === index ? null : index
|
||||
}
|
||||
|
||||
// Optional: Close menu when clicking outside
|
||||
const menuRef = ref(null)
|
||||
onClickOutside(menuRef, () => {
|
||||
menuOpenIndex.value = null
|
||||
})
|
||||
|
||||
const showKey = (key: string) => {
|
||||
let columnsLower = columns.value.map((col) =>
|
||||
col.toLowerCase().split(' ').join('_')
|
||||
)
|
||||
return columnsLower.includes(key)
|
||||
}
|
||||
</script>
|
||||
@@ -59,7 +59,6 @@ const code = ref<string>('')
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newVal) => {
|
||||
console.log('newVal', newVal)
|
||||
code.value =
|
||||
typeof newVal === 'string' ? newVal : JSON.stringify(newVal, null, 2)
|
||||
},
|
||||
|
||||
@@ -138,6 +138,7 @@ watch(userResource, () => {
|
||||
) {
|
||||
addQuizzes()
|
||||
addAssignments()
|
||||
addProgrammingExercises()
|
||||
}
|
||||
})
|
||||
|
||||
@@ -157,6 +158,14 @@ const addAssignments = () => {
|
||||
})
|
||||
}
|
||||
|
||||
const addProgrammingExercises = () => {
|
||||
otherLinks.value.push({
|
||||
label: 'Programming Exercises',
|
||||
icon: 'Code',
|
||||
to: 'ProgrammingExercises',
|
||||
})
|
||||
}
|
||||
|
||||
let isActive = (tab) => {
|
||||
return tab.activeFor?.includes(router.currentRoute.value.name)
|
||||
}
|
||||
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<Dialog
|
||||
v-model="show"
|
||||
:options="{
|
||||
title: __('Add a programming exercise to your lesson'),
|
||||
size: 'xl',
|
||||
actions: [
|
||||
{
|
||||
label: __('Save'),
|
||||
variant: 'solid',
|
||||
onClick: () => {
|
||||
saveExercise()
|
||||
},
|
||||
},
|
||||
],
|
||||
}"
|
||||
>
|
||||
<template #body-content>
|
||||
<div class="text-base">
|
||||
<Link
|
||||
v-model="exercise"
|
||||
doctype="LMS Exercise"
|
||||
:label="__('Programming Exercise')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { Dialog } from 'frappe-ui'
|
||||
import { onMounted, nextTick, ref } from 'vue'
|
||||
import Link from '@/components/Controls/Link.vue'
|
||||
|
||||
const show = ref(false)
|
||||
const exercise = ref(null)
|
||||
|
||||
const props = defineProps({
|
||||
onSave: {
|
||||
type: Function,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
onMounted(async () => {
|
||||
await nextTick()
|
||||
show.value = true
|
||||
})
|
||||
|
||||
const saveExercise = () => {
|
||||
props.onSave(exercise.value)
|
||||
show.value = false
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user