Remove Objective Components
This commit is contained in:
Lorenz Padberg
parent
e5c1440043
commit
0ca2a00e76
|
|
@ -37,7 +37,6 @@ const EditRoomEntryWizard = defineAsyncComponent(() =>
|
|||
);
|
||||
const NewProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/NewProjectEntryWizard.vue'));
|
||||
const EditProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/EditProjectEntryWizard.vue'));
|
||||
const NewObjectiveWizard = defineAsyncComponent(() => import('@/components/objective-groups/NewObjectiveWizard.vue'));
|
||||
const NewNoteWizard = defineAsyncComponent(() => import('@/components/notes/NewNoteWizard.vue'));
|
||||
const EditNoteWizard = defineAsyncComponent(() => import('@/components/notes/EditNoteWizard.vue'));
|
||||
const EditClassNameWizard = defineAsyncComponent(() => import('@/components/school-class/EditClassNameWizard.vue'));
|
||||
|
|
@ -69,7 +68,6 @@ export default {
|
|||
EditRoomEntryWizard,
|
||||
NewProjectEntryWizard,
|
||||
EditProjectEntryWizard,
|
||||
NewObjectiveWizard,
|
||||
NewNoteWizard,
|
||||
EditNoteWizard,
|
||||
EditClassNameWizard,
|
||||
|
|
|
|||
|
|
@ -1,120 +0,0 @@
|
|||
<template>
|
||||
<modal
|
||||
:hide-header="true"
|
||||
:small="true"
|
||||
>
|
||||
<modal-input
|
||||
:placeholder="'Lernziel'"
|
||||
:value="text"
|
||||
@input="text = $event"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<div>
|
||||
<a
|
||||
:class="{ 'button--disabled': disableSave }"
|
||||
class="button button--primary"
|
||||
data-cy="modal-save-button"
|
||||
@click="save(text)"
|
||||
>Speichern</a
|
||||
>
|
||||
<a
|
||||
class="button"
|
||||
@click="hide()"
|
||||
>Abbrechen</a
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Modal from '@/components/Modal.vue';
|
||||
import ModalInput from '@/components/ModalInput.vue';
|
||||
|
||||
import NEW_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/addObjective.gql';
|
||||
import OBJECTIVE_GROUP_QUERY from '@/graphql/gql/queries/objectiveGroupQuery.gql';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Modal,
|
||||
ModalInput,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
text: '',
|
||||
saving: false,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
objectiveGroup() {
|
||||
return this.$modal.state.payload.parent;
|
||||
},
|
||||
disableSave() {
|
||||
return this.saving;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
save(entry) {
|
||||
this.saving = true;
|
||||
this.$apollo
|
||||
.mutate({
|
||||
mutation: NEW_OBJECTIVE_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
objective: Object.assign(
|
||||
{},
|
||||
{
|
||||
objectiveGroup: this.objectiveGroup,
|
||||
text: entry,
|
||||
}
|
||||
),
|
||||
},
|
||||
},
|
||||
update: (
|
||||
store,
|
||||
{
|
||||
data: {
|
||||
addObjective: { objective },
|
||||
},
|
||||
}
|
||||
) => {
|
||||
try {
|
||||
const query = OBJECTIVE_GROUP_QUERY;
|
||||
const variables = { id: this.objectiveGroup };
|
||||
const { objectiveGroup } = store.readQuery({ query, variables });
|
||||
if (objectiveGroup && objectiveGroup.objectives) {
|
||||
const objectives = [
|
||||
...objectiveGroup.objectives,
|
||||
{
|
||||
...objective,
|
||||
__typename: 'ObjectiveNode',
|
||||
},
|
||||
];
|
||||
const data = {
|
||||
objectiveGroup: {
|
||||
...objectiveGroup,
|
||||
objectives,
|
||||
},
|
||||
};
|
||||
store.writeQuery({ query, variables, data });
|
||||
}
|
||||
} catch (e) {
|
||||
// Query did not exist in the cache, and apollo throws a generic Error. Do nothing
|
||||
}
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
this.saving = false;
|
||||
this.$modal.confirm();
|
||||
});
|
||||
},
|
||||
hide() {
|
||||
this.$modal.cancel();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
<template>
|
||||
<li
|
||||
:class="{ 'hideable-element--greyed-out': hidden }"
|
||||
class="objective hideable-element"
|
||||
v-if="editMode || !hidden"
|
||||
>
|
||||
<visibility-action
|
||||
:block="objective"
|
||||
:type="type"
|
||||
v-if="editMode"
|
||||
/>
|
||||
<div
|
||||
class="block-actions"
|
||||
v-if="editMode && canEdit"
|
||||
>
|
||||
<user-widget
|
||||
v-bind="me"
|
||||
class="block-actions__user-widget objective__user-widget"
|
||||
/>
|
||||
<more-options-widget>
|
||||
<div class="popover-links__link">
|
||||
<a @click="deleteObjective(objective)">Löschen</a>
|
||||
</div>
|
||||
</more-options-widget>
|
||||
</div>
|
||||
<div>
|
||||
{{ objective.text }}
|
||||
</div>
|
||||
</li>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
|
||||
import UserWidget from '@/components/UserWidget.vue';
|
||||
import MoreOptionsWidget from '@/components/MoreOptionsWidget.vue';
|
||||
|
||||
import DELETE_OBJECTIVE_MUTATION from '@/graphql/gql/mutations/deleteObjective.gql';
|
||||
import MODULE_DETAILS_QUERY from '@/graphql/gql/queries/modules/moduleDetailsQuery.gql';
|
||||
import { hidden } from '@/helpers/visibility';
|
||||
import { OBJECTIVE_TYPE } from '@/consts/types';
|
||||
|
||||
import me from '@/mixins/me';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
objective: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
editMode: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
mixins: [me],
|
||||
|
||||
components: {
|
||||
MoreOptionsWidget,
|
||||
VisibilityAction,
|
||||
UserWidget,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
type: OBJECTIVE_TYPE,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
hidden() {
|
||||
return hidden({
|
||||
block: this.objective,
|
||||
schoolClass: this.schoolClass,
|
||||
type: this.type,
|
||||
});
|
||||
},
|
||||
canEdit() {
|
||||
return this.objective.mine;
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
deleteObjective(objective) {
|
||||
this.$apollo.mutate({
|
||||
mutation: DELETE_OBJECTIVE_MUTATION,
|
||||
variables: {
|
||||
input: {
|
||||
id: objective.id,
|
||||
},
|
||||
},
|
||||
refetchQueries: [
|
||||
{
|
||||
query: MODULE_DETAILS_QUERY,
|
||||
variables: {
|
||||
slug: this.$route.params.slug,
|
||||
},
|
||||
},
|
||||
],
|
||||
// todo: make update work here also
|
||||
// update(store, {data: {deleteObjective: {success}}}) {
|
||||
// if (success) {
|
||||
// const query = MODULE_DETAILS_QUERY;
|
||||
// const variables = {slug: this.$route.params.slug};
|
||||
// const data = store.readQuery({query, variables});
|
||||
// if (data) {
|
||||
// data.module.objectiveGroups.edges.
|
||||
// data.rooms.edges.splice(data.rooms.edges.findIndex(edge => edge.node.id === theId), 1);
|
||||
// store.writeQuery({query, variables, data});
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.objective {
|
||||
min-height: 50px;
|
||||
|
||||
&__user-widget {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
<template>
|
||||
<div class="objective-form">
|
||||
<modal-input
|
||||
:value="objective.text"
|
||||
class="objective-form__input"
|
||||
placeholder="Lernziel erfassen..."
|
||||
@input="$emit('input', $event)"
|
||||
/>
|
||||
<a
|
||||
class="icon-button"
|
||||
@click="$emit('delete')"
|
||||
>
|
||||
<trash-icon class="icon-button__icon icon-button__icon--subtle" />
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ModalInput from '@/components/ModalInput.vue';
|
||||
import { defineAsyncComponent } from 'vue';
|
||||
const TrashIcon = defineAsyncComponent(() => import('@/components/icons/TrashIcon.vue'));
|
||||
|
||||
export default {
|
||||
props: ['objective'],
|
||||
|
||||
components: {
|
||||
ModalInput,
|
||||
TrashIcon,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/_variables.scss';
|
||||
|
||||
.objective-form {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 50px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
&__input {
|
||||
width: $modal-input-width;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
<template>
|
||||
<div
|
||||
:class="{ 'hideable-element--greyed-out': hidden }"
|
||||
class="objective-group hideable-element"
|
||||
v-if="editMode || !hidden"
|
||||
>
|
||||
<visibility-action
|
||||
:block="group"
|
||||
:type="type"
|
||||
v-if="editMode"
|
||||
/>
|
||||
|
||||
<h4>{{ group.displayTitle }}</h4>
|
||||
|
||||
<ul class="objective-group__objective-list">
|
||||
<objective
|
||||
:objective="objective"
|
||||
class="objective-group__objective"
|
||||
:edit-mode="editMode"
|
||||
v-for="objective in group.objectives"
|
||||
:key="objective.id"
|
||||
/>
|
||||
</ul>
|
||||
<add-content-button
|
||||
:parent="group"
|
||||
:where="{ parent: group }"
|
||||
v-if="editMode"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Objective from '@/components/objective-groups/Objective.vue';
|
||||
import VisibilityAction from '@/components/visibility/VisibilityAction.vue';
|
||||
import AddContentButton from '@/components/AddContentButton.vue';
|
||||
|
||||
import me from '@/mixins/me';
|
||||
|
||||
import { OBJECTIVE_GROUP_TYPE } from '@/consts/types';
|
||||
import { hidden } from '@/helpers/visibility';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
group: {
|
||||
required: true,
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
|
||||
mixins: [me],
|
||||
|
||||
components: {
|
||||
AddContentButton,
|
||||
Objective,
|
||||
VisibilityAction,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
type: OBJECTIVE_GROUP_TYPE,
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
editMode() {
|
||||
return this.group.module?.inEditMode || false;
|
||||
},
|
||||
hidden() {
|
||||
return hidden({
|
||||
block: this.group,
|
||||
schoolClass: this.schoolClass,
|
||||
type: this.type,
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'styles/helpers';
|
||||
|
||||
.objective-group {
|
||||
position: relative;
|
||||
|
||||
&__actions {
|
||||
position: absolute;
|
||||
left: -70px;
|
||||
top: -4px;
|
||||
display: grid;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
<template>
|
||||
<div class="objective-groups">
|
||||
<template v-for="group in filteredObjectiveGroups">
|
||||
<objective-group
|
||||
:group="group"
|
||||
v-if="group.objectives.length"
|
||||
:key="group.id"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ObjectiveGroup from '@/components/objective-groups/ObjectiveGroup.vue';
|
||||
import { meQuery } from '@/graphql/queries';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
groups: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
},
|
||||
|
||||
components: {
|
||||
ObjectiveGroup,
|
||||
},
|
||||
|
||||
apollo: {
|
||||
me: meQuery,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
me: {},
|
||||
};
|
||||
},
|
||||
|
||||
computed: {
|
||||
filteredObjectiveGroups() {
|
||||
return this.objectiveGroups.filter((g) => !g.hidden);
|
||||
},
|
||||
objectiveGroups() {
|
||||
/*
|
||||
a teacher should get multiple blocks, so he can manage the visibility for his students.
|
||||
students don't care about the blocks, so they should get just one block that contains all the objectives
|
||||
*/
|
||||
if (this.me.isTeacher || !this.groups.length) {
|
||||
return this.groups;
|
||||
} else {
|
||||
// todo: maybe this can be done a bit more elegantly
|
||||
let groups = this.groups;
|
||||
const objectives = groups.map((g) => g.objectives).flat(); // get all objectives in one array
|
||||
const firstGroup = Object.assign({}, groups[0], { objectives });
|
||||
|
||||
return [firstGroup];
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import 'styles/helpers';
|
||||
|
||||
.objective-groups {
|
||||
margin-bottom: $large-spacing;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue