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

Fix some bugs with the click outside directive

This commit is contained in:
Ramon Wenger 2021-10-10 21:19:56 +02:00
parent 66883ed6d0
commit 74234b45c3
3 changed files with 112 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/cypress/integration/frontend/portfolio/project-page.spec.js
View File

@ -25,7 +25,7 @@ describe('Project Page', () => {
firstName: 'Rachel',
lastName: 'Green',
id: 'VXNlck5vZGU6NQ==',
avatarUrl: ''
avatarUrl: '',
},
entriesCount: 2,
},
@ -60,9 +60,9 @@ describe('Project Page', () => {
AddProjectEntry: variables => ({
addProjectEntry: {
projectEntry: Object.assign({}, variables.input.projectEntry, {
created: createdLater
created: createdLater,
}),
errors: null
errors: null,
},
}),
UpdateProjectEntry: variables => ({
@ -96,6 +96,14 @@ describe('Project Page', () => {
});
});
it('uses the menu', () => {
cy.visit('/portfolio/groot');
cy.getByDataCy('project-actions').click();
cy.getByDataCy('delete-project').should('exist');
cy.getByDataCy('edit-project').should('exist');
cy.getByDataCy('share-project').should('exist');
});
describe('Project Entry', () => {
it('should create a new project entry', () => {
cy.visit('/portfolio');

2
client/src/components/MoreOptionsWidget.vue
View File

@ -3,7 +3,7 @@
<a
class="more-options__more-link"
data-cy="more-options-link"
@click="showMenu = !showMenu">
@click.stop="showMenu = !showMenu">
<ellipses class="more-options__ellipses"/>
</a>
<widget-popover

188
client/src/components/portfolio/ProjectActions.vue
View File

@ -4,21 +4,33 @@
data-cy="project-actions">
<a
class="project-actions__more-link"
@click="toggleMenu">
@click.stop="toggleMenu">
<ellipses/>
</a>
<widget-popover
class="project-actions__popover"
v-if="showMenu"
@hide-me="showMenu = false">
<li class="popover-links__link"><a @click="deleteProject(id)">Projekt löschen</a></li>
<li class="popover-links__link"><a @click="editProject(id)">Projekt bearbeiten</a></li>
<li class="popover-links__link">
<a
data-cy="delete-project"
@click="deleteProject(id)">Projekt löschen</a>
</li>
<li class="popover-links__link">
<a
data-cy="edit-project"
@click="editProject(id)">Projekt bearbeiten</a>
</li>
<li
class="popover-links__link"
v-if="!final"><a @click="updateShareState(id, true)">Projekt teilen</a></li>
v-if="!final"><a
data-cy="share-project"
@click="updateShareState(id, true)">Projekt teilen</a></li>
<li
class="popover-links__link"
v-if="final"><a @click="updateShareState(id, false)">Projekt nicht mehr teilen</a>
v-if="final"><a
data-cy="unshare-project"
@click="updateShareState(id, false)">Projekt nicht mehr teilen</a>
</li>
</widget-popover>
</div>
@ -26,106 +38,106 @@
</template>
<script>
import Ellipses from '@/components/icons/Ellipses.vue';
import WidgetPopover from '@/components/ui/WidgetPopover';
import Ellipses from '@/components/icons/Ellipses.vue';
import WidgetPopover from '@/components/ui/WidgetPopover';
import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
import DELETE_PROJECT_MUTATION from '@/graphql/gql/mutations/deleteProject.gql';
import PROJECT_QUERY from '@/graphql/gql/queries/projectQuery.gql';
import PROJECTS_QUERY from '@/graphql/gql/queries/allProjects.gql';
import UPDATE_PROJECT_SHARED_STATE_MUTATION from '@/graphql/gql/mutations/updateProjectSharedState.gql';
export default {
props: ['id', 'final'],
export default {
props: ['id', 'final'],
components: {
Ellipses,
WidgetPopover
components: {
Ellipses,
WidgetPopover,
},
data() {
return {
showMenu: false,
};
},
methods: {
toggleMenu: function () {
this.showMenu = !this.showMenu;
},
data() {
return {
showMenu: false
};
editProject(id) {
this.$router.push({name: 'edit-project', params: {id}});
},
methods: {
toggleMenu: function () {
this.showMenu = !this.showMenu;
},
editProject(id) {
this.$router.push({name: 'edit-project', params: {id}});
},
deleteProject(id) {
this.$apollo.mutate({
mutation: DELETE_PROJECT_MUTATION,
variables: {
input: {
id
}
deleteProject(id) {
this.$apollo.mutate({
mutation: DELETE_PROJECT_MUTATION,
variables: {
input: {
id,
},
update(store, {data: {deleteProject: {success}}}) {
if (success) {
const data = store.readQuery({query: PROJECTS_QUERY});
},
update(store, {data: {deleteProject: {success}}}) {
if (success) {
const data = store.readQuery({query: PROJECTS_QUERY});
if (data) {
data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
store.writeQuery({query: PROJECTS_QUERY, data});
}
if (data) {
data.projects.edges.splice(data.projects.edges.findIndex(edge => edge.node.id === id), 1);
store.writeQuery({query: PROJECTS_QUERY, data});
}
}
}).then(() => {
this.$router.push('/portfolio');
});
},
updateShareState(id, state) {
const project = this;
this.$apollo.mutate({
mutation: UPDATE_PROJECT_SHARED_STATE_MUTATION,
variables: {
input: {
id: this.id,
shared: state
}
},
}).then(() => {
this.$router.push('/portfolio');
});
},
updateShareState(id, state) {
const project = this;
this.$apollo.mutate({
mutation: UPDATE_PROJECT_SHARED_STATE_MUTATION,
variables: {
input: {
id: this.id,
shared: state,
},
update(store, {data: {updateProjectSharedState: {shared, errors}}}) {
if (!errors) {
const query = PROJECT_QUERY;
const variables = {
id: project.id
};
const data = store.readQuery({query, variables});
},
update(store, {data: {updateProjectSharedState: {shared, errors}}}) {
if (!errors) {
const query = PROJECT_QUERY;
const variables = {
id: project.id,
};
const data = store.readQuery({query, variables});
if (data) {
data.project.final = shared;
store.writeQuery({query, variables, data});
}
if (data) {
data.project.final = shared;
store.writeQuery({query, variables, data});
}
}
});
}
}
};
},
});
},
},
};
</script>
<style scoped lang="scss">
@import "~styles/_helpers.scss";
@import "~styles/_helpers.scss";
.project-actions {
position: relative;
.project-actions {
position: relative;
&__more-link {
cursor: pointer;
}
&__popover {
@include popover-defaults();
min-width: 200px;
}
svg {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
}
&__more-link {
cursor: pointer;
}
&__popover {
@include popover-defaults();
min-width: 200px;
}
svg {
width: 30px;
fill: $color-charcoal-dark;
margin-right: 15px;
}
}
</style>