Skip to content
Snippets Groups Projects
Verified Commit 76a6db6b authored by Hangzhi Yu's avatar Hangzhi Yu Committed by magicfelix
Browse files

Migrate PersonalNotes vue component to .vue file format

parent c1c1e394
No related branches found
No related tags found
1 merge request!284Draft: Redesign entering of lesson documentation
Hide whitespace changes
Inline Side-by-side
aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
+ 1
− 1
View file @ 76a6db6b
import PersonalNotes from "./PersonalNotes.js"; import PersonalNotes from "./PersonalNotes.vue";
export default { export default {
components: { components: {
......
aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.js → aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.vue
+ 117
− 114
View file @ 76a6db6b
<template>
<v-dialog
v-model="dialog"
max-width="600px"
@click:outside="cancelDialog"
>
<template v-slot:activator="{ on, attrs }">
<div>
<template v-for="personalNote in personalNotes">
<v-chip class="ma-1" close @click="editPersonalNote(personalNote.person.id)"
@click:close="removePersonalNote(personalNote.person.id)" v-if="personalNoteString(personalNote)">
{{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
</v-chip>
</template>
</div>
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
class="ma-1"
color="primary"
icon
outlined
v-bind="attrs"
v-on="on"
@click="createPersonalNote"
>
<v-icon>
mdi-plus
</v-icon>
</v-btn>
</template>
<span v-text="$root.django.gettext('Add personal note')"></span>
</v-tooltip>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Personal Note</span>
</v-card-title>
<v-card-text>
<v-container>
<v-select
item-text="fullName"
item-value="id"
:items="persons"
label="Student"
v-model="editedPersonID"
@input="updatePersonalNote"
></v-select>
<v-text-field
label="Tardiness"
suffix="min" type="number"
min="0"
:disabled="editedPersonID === ID_NO_PERSON"
v-model="editedTardiness"
></v-text-field>
<v-checkbox
label="Absent"
v-model="editedAbsent"
:disabled="editedPersonID === ID_NO_PERSON"
@change="editedExcused = false; editedExcuseType = null"
></v-checkbox>
<v-checkbox
label="Excused"
v-model="editedExcused"
:disabled="editedPersonID === ID_NO_PERSON || !editedAbsent"
@change="editedExcuseType = null"
></v-checkbox>
<v-select
label="Excuse Type"
v-model="editedExcuseType"
:items="excuseTypes"
item-text="name"
item-value="shortName"
:disabled="editedPersonID === ID_NO_PERSON || !editedAbsent || !editedExcused"
></v-select>
<!-- FIXME: get extra mark itself as value -->
<v-select
label="Extra Marks"
v-model="editedExtraMarks"
:items="extraMarks"
item-text="name"
item-value="valueOf"
:disabled="editedPersonID === ID_NO_PERSON"
multiple
chips
></v-select>
<v-text-field
label="Remarks"
v-model="editedRemarks"
:disabled="editedPersonID === ID_NO_PERSON"
></v-text-field>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="error"
outlined
@click="cancelDialog"
>
Cancel
</v-btn>
<v-btn
color="success"
@click="saveDialog"
:disabled="editedPersonID === ID_NO_PERSON"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
import gql from 'graphql-tag'; import gql from 'graphql-tag';
const ID_NO_PERSON = null; const ID_NO_PERSON = null;
...@@ -236,118 +351,6 @@ export default { ...@@ -236,118 +351,6 @@ export default {
} }
).flat(2); ).flat(2);
} }
}, }
template: `
<v-dialog
v-model="dialog"
max-width="600px"
@click:outside="cancelDialog"
>
<template v-slot:activator="{ on, attrs }">
<div>
<template v-for="personalNote in personalNotes">
<v-chip class="ma-1" close @click="editPersonalNote(personalNote.person.id)"
@click:close="removePersonalNote(personalNote.person.id)" v-if="personalNoteString(personalNote)">
{{ personalNote.person.fullName }}: {{ personalNoteString(personalNote) }}
</v-chip>
</template>
</div>
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
class="ma-1"
color="primary"
icon
outlined
v-bind="attrs"
v-on="on"
@click="createPersonalNote"
>
<v-icon>
mdi-plus
</v-icon>
</v-btn>
</template>
<span v-text="$root.django.gettext('Add personal note')"></span>
</v-tooltip>
</template>
<v-card>
<v-card-title>
<span class="text-h5">Personal Note</span>
</v-card-title>
<v-card-text>
<v-container>
<v-select
item-text="fullName"
item-value="id"
:items="persons"
label="Student"
v-model="editedPersonID"
@input="updatePersonalNote"
></v-select>
<v-text-field
label="Tardiness"
suffix="min" type="number"
min="0"
:disabled="editedPersonID === ID_NO_PERSON"
v-model="editedTardiness"
></v-text-field>
<v-checkbox
label="Absent"
v-model="editedAbsent"
:disabled="editedPersonID === ID_NO_PERSON"
@change="editedExcused = false; editedExcuseType = null"
></v-checkbox>
<v-checkbox
label="Excused"
v-model="editedExcused"
:disabled="editedPersonID === ID_NO_PERSON || !editedAbsent"
@change="editedExcuseType = null"
></v-checkbox>
<v-select
label="Excuse Type"
v-model="editedExcuseType"
:items="excuseTypes"
item-text="name"
item-value="shortName"
:disabled="editedPersonID === ID_NO_PERSON || !editedAbsent || !editedExcused"
></v-select>
<!-- FIXME: get extra mark itself as value -->
<v-select
label="Extra Marks"
v-model="editedExtraMarks"
:items="extraMarks"
item-text="name"
item-value="valueOf"
:disabled="editedPersonID === ID_NO_PERSON"
multiple
chips
></v-select>
<v-text-field
label="Remarks"
v-model="editedRemarks"
:disabled="editedPersonID === ID_NO_PERSON"
></v-text-field>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="error"
outlined
@click="cancelDialog"
>
Cancel
</v-btn>
<v-btn
color="success"
@click="saveDialog"
:disabled="editedPersonID === ID_NO_PERSON"
>
Save
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
`
} }
</script>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment