ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Remove Objective Components

This commit is contained in:
Lorenz Padberg 2024-05-02 09:16:10 +02:00
parent e5c1440043
commit 0ca2a00e76
6 changed files with 0 additions and 461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.vue
View File

@ -37,7 +37,6 @@ const EditRoomEntryWizard = defineAsyncComponent(() =>
); );
const NewProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/NewProjectEntryWizard.vue')); const NewProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/NewProjectEntryWizard.vue'));
const EditProjectEntryWizard = defineAsyncComponent(() => import('@/components/portfolio/EditProjectEntryWizard.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 NewNoteWizard = defineAsyncComponent(() => import('@/components/notes/NewNoteWizard.vue'));
const EditNoteWizard = defineAsyncComponent(() => import('@/components/notes/EditNoteWizard.vue')); const EditNoteWizard = defineAsyncComponent(() => import('@/components/notes/EditNoteWizard.vue'));
const EditClassNameWizard = defineAsyncComponent(() => import('@/components/school-class/EditClassNameWizard.vue')); const EditClassNameWizard = defineAsyncComponent(() => import('@/components/school-class/EditClassNameWizard.vue'));
@ -69,7 +68,6 @@ export default {
EditRoomEntryWizard, EditRoomEntryWizard,
NewProjectEntryWizard, NewProjectEntryWizard,
EditProjectEntryWizard, EditProjectEntryWizard,
NewObjectiveWizard,
NewNoteWizard, NewNoteWizard,
EditNoteWizard, EditNoteWizard,
EditClassNameWizard, EditClassNameWizard,

120
client/src/components/objective-groups/NewObjectiveWizard.vue
View File

@ -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>

127
client/src/components/objective-groups/Objective.vue
View File

@ -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>

45
client/src/components/objective-groups/ObjectiveForm.vue
View File

@ -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>

92
client/src/components/objective-groups/ObjectiveGroup.vue
View File

@ -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>

75
client/src/components/objective-groups/ObjectiveGroups.vue
View File

@ -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>