Skip to content
Snippets Groups Projects
Commit d72351e4 authored by Hangzhi Yu's avatar Hangzhi Yu
Browse files

Migrate PersonalNotes vue component to .vue file format

parent 16091561
No related branches found
No related tags found
No related merge requests found
Pipeline #81543 failed
Stage: prepare
Stage: test
Stage: build
Stage: publish
Stage: docker
Hide whitespace changes
Inline Side-by-side
aleksis/apps/alsijil/assets/components/alsijil/LessonDocumentation.js
+ 1
− 1
View file @ d72351e4
import PersonalNotes from "./PersonalNotes.js";
import PersonalNotes from "./PersonalNotes.vue";
export default {
components: {
......
aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.js → aleksis/apps/alsijil/assets/components/alsijil/PersonalNotes.vue
+ 117
− 114
View file @ d72351e4
<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';
const ID_NO_PERSON = null;
......@@ -236,118 +351,6 @@ export default {
}
).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