Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

1586: Szybsze i wygodniejsze wybieranie #1763

Open
wants to merge 20 commits into
base: master-dev
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
1586: wersja robocza
Dodano komponent StudentFilter (bazujący na MultiSelectFilter) w odpowiednim miejscu w formularzu dot. pracy dyplomowej
Acors24 committed Nov 6, 2024
commit c991e7ccd9f15ac466b5d1dcad662c56cf5e8bba
Original file line number Diff line number Diff line change
@@ -133,6 +133,10 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
}
});
},
addToSelection(option: Option) {
console.log("adding", option);
this.selected = [...this.selected, option];
},
},
computed: {
selectionDescription(): string {
@@ -163,6 +167,8 @@ export default defineComponent<Props, any, Data, Computed, Methods>({
k: this.filterKey,
f: new ExactFilter(selectedIds, this.property),
});

this.$emit("select", selectedIds);
},
},
});
84 changes: 84 additions & 0 deletions zapisy/apps/theses/assets/components/StudentFilter.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
<script lang="ts">
import Vue from "vue";

import MultiSelectFilter from "@/enrollment/timetable/assets/components/filters/MultiSelectFilter.vue";
import {
MultiselectFilterData, MultiselectFilterDataItem,
} from "@/enrollment/timetable/assets/models";

export default Vue.extend({
components: {
MultiSelectFilter,
},
data: function () {
return {
students: [] as MultiselectFilterData<number>,
};
},
// created: function () {
// const students = [
// { value: 1, label: "Jan Kowalski (1234567)" },
// { value: 2, label: "Anna Nowak (2345678)" },
// { value: 3, label: "Piotr Wiśniewski (3456789)" },
// ];
// this.students = cloneDeep(students);
// },
mounted: function () {
const djangoField = document.getElementById("id_students");
if (djangoField === null) {
return;
}

const options = djangoField.querySelectorAll("option");
this.students = Array.from(options).map((option) => ({
value: Number(option.value),
label: option.text,
} as MultiselectFilterDataItem<number>));

const selectedOptions = Array.from(options).filter((option) => option.selected);
const multiselectOptions = selectedOptions.map((option) => ({
value: Number(option.value),
label: option.text,
}));
console.log(multiselectOptions);
multiselectOptions.forEach((option) => this.$refs["student-filter"].addToSelection(option));
console.log(this.$refs["student-filter"]);
},
methods: {
updateDjangoField: function(selectedIds: number[]) {
const djangoField = document.getElementById("id_students");
if (djangoField === null) {
return;
}

console.log(this.$refs["student-filter"]);

const options = djangoField.querySelectorAll("option");
options.forEach((option) => {
option.selected = selectedIds.includes(Number(option.value));
});
}
},
});
</script>

<template>
<div class="bg-light filters-card">
<MultiSelectFilter
filterKey="student-filter"
property="student"
:options="students"
title="Przypisani studenci"
placeholder="Szukaj po imieniu, nazwisku, numerze indeksu..."
ref="student-filter"
@select="updateDjangoField"
/>
</div>
</template>

<style lang="scss" scoped>
.filters-card {
transform: scale(1);
z-index: 2;
}
</style>
22 changes: 22 additions & 0 deletions zapisy/apps/theses/assets/student-filter.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import Vue from "vue";
import Vuex from "vuex";

import StudentFilter from "./components/StudentFilter.vue";
import filters from "@/enrollment/timetable/assets/store/filters";

Vue.use(Vuex);

const store = new Vuex.Store({
modules: {
filters,
},
});

const djangoField = document.getElementById("id_students");
const multiselectPlaceholder = document.getElementById("student-filter");
djangoField.before(multiselectPlaceholder);
// element.style.display = "none";
// const data = djangoField.children;//.map(({ value, text }) => { value, text })
// console.log(data);

new Vue({ el: "#student-filter", render: (h) => h(StudentFilter), store });
2 changes: 2 additions & 0 deletions zapisy/apps/theses/templates/theses/thesis_form.html
Original file line number Diff line number Diff line change
@@ -45,6 +45,8 @@ <h1 class="d-inline-block">
<form method="POST" id="confirm-submit" class="post-form">
{% csrf_token %}
{% crispy thesis_form %}
<div id="student-filter"></div>
{% render_bundle 'theses-student-filter' %}
</form>
{% if confirm_changes %}
{{ old_instance|json_script:"old_instance" }}
1 change: 1 addition & 0 deletions zapisy/webpack_resources/asset-defs.js
Original file line number Diff line number Diff line change
@@ -101,6 +101,7 @@ const AssetDefs = {

"theses-theses-widget": [path.resolve("apps/theses/assets/theses-widget.js")],
"theses-theses-change": [path.resolve("apps/theses/assets/theses-change.js")],
"theses-student-filter": [path.resolve("apps/theses/assets/student-filter.js")],

// User app