-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Contentful query feature ideas page * Create feature ideas page component * Refactor feature cards to a separate FeaureIdeas component * Add vote button to feature ideas * Update logic to expected api handling * Move card style overrides to component * Add no feature ideas error message * Fix stylelint * Add feature ideas link to hamburger menu * Handle unpublished feature ideas * Adjust spacing feature ideas error message * Add unit tests * Increase size limit * Fix unit test * Add feature toggle for feature ideas link sidebar navigation * Add FeatureIdeas component to the styleguide * chore: use i18n.tc for likes count; rename lang file key * chore: linting --------- Co-authored-by: Richard Doe <[email protected]>
- Loading branch information
1 parent
7a122f4
commit aa50071
Showing
19 changed files
with
1,230 additions
and
134 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
251 changes: 251 additions & 0 deletions
251
packages/portal/src/components/generic/FeatureIdeas.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,251 @@ | ||
| <template> | ||
| <div> | ||
| <ErrorMessage | ||
| v-if="$fetchState.error" | ||
| :error="$fetchState.error" | ||
| :full-height="false" | ||
| :show-message="false" | ||
| title-tag="h2" | ||
| data-qa="error message" | ||
| class="feature-ideas-error-container" | ||
| /> | ||
| <template v-else> | ||
| <ContentCard | ||
| v-for="(feature, index) in features" | ||
| :key="index" | ||
| :title="feature.name" | ||
| :texts="[feature.text]" | ||
| :image-url="feature.image?.image.url" | ||
| :image-content-type="feature.image?.image.contentType" | ||
| :image-width="feature.image?.image.width" | ||
| :image-height="feature.image?.image.height" | ||
| variant="list" | ||
| data-qa="feature idea card" | ||
| > | ||
| <template #footer> | ||
| <b-button | ||
| class="vote-button d-inline-flex align-items-center text-uppercase mt-auto mr-auto" | ||
| :class="{ voted: hasVotedOnFeature(feature.sys.id) }" | ||
| variant="light-flat" | ||
| :aria-label="$t('actions.vote')" | ||
| @click="voteOnFeature(feature.sys.id)" | ||
| > | ||
| <span | ||
| class="mr-1" | ||
| :class="feature.voted ? 'icon-thumbsup' : 'icon-thumbsup-outlined'" | ||
| /> | ||
| {{ $tc('likes.count', voteCountOnFeature(feature.sys.id)) }} | ||
| </b-button> | ||
| </template> | ||
| </ContentCard> | ||
| </template> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import keycloakMixin from '@/mixins/keycloak'; | ||
| import ContentCard from '@/components/content/ContentCard'; | ||
| export default { | ||
| name: 'FeatureIdeas', | ||
| components: { | ||
| ContentCard, | ||
| ErrorMessage: () => import('@/components/error/ErrorMessage') | ||
| }, | ||
| mixins: [keycloakMixin], | ||
| props: { | ||
| features: { | ||
| type: Array, | ||
| default: () => [] | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| votesOnFeatures: {} | ||
| }; | ||
| }, | ||
| fetch() { | ||
| if (this.features.length < 1) { | ||
| const error = new Error('No feature ideas'); | ||
| error.code = 'noFeatureIdeas'; | ||
| this.$error(error); | ||
| } | ||
| // TODO: fetch the votes for each feature and remove mock functionality | ||
| // const featureIds = this.features.map((feature) => feature.sys.id).join(','); | ||
| // this.votesOnFeatures = await this.$axios.$get(`/api/votes/${featureIds}`); | ||
| for (const feature of this.features) { | ||
| const featureVotes = { count: Math.floor(Math.random() * 99), currentlyVotedOn: false }; | ||
| this.votesOnFeatures[feature.sys.id] = featureVotes; | ||
| } | ||
| }, | ||
| computed: { | ||
| userId() { | ||
| return this.$auth.user?.sub; | ||
| } | ||
| }, | ||
| methods: { | ||
| voteOnFeature(featureId) { | ||
| // TODO: Implement voting on feature and remove mock functionality | ||
| // await this.$axios.$post(`/api/vote/${featureId}`); | ||
| console.log('Voting on feature', featureId); | ||
| if (this.$auth.loggedIn) { | ||
| if (this.hasVotedOnFeature(featureId)) { | ||
| this.votesOnFeatures[featureId].count = (this.votesOnFeatures[featureId]?.count || 0) - 1; | ||
| this.votesOnFeatures[featureId].currentlyVotedOn = false; | ||
| } else { | ||
| this.votesOnFeatures[featureId].count = (this.votesOnFeatures[featureId]?.count || 0) + 1; | ||
| this.votesOnFeatures[featureId].currentlyVotedOn = true; | ||
| } | ||
| } else { | ||
| this.keycloakLogin(); | ||
| } | ||
| }, | ||
| voteCountOnFeature(featureId) { | ||
| return this.votesOnFeatures[featureId]?.count; | ||
| }, | ||
| hasVotedOnFeature(featureId) { | ||
| return this.votesOnFeatures[featureId]?.currentlyVotedOn; | ||
| } | ||
| } | ||
| }; | ||
| </script> | ||
| <style lang="scss" scoped> | ||
| @import '@europeana/style/scss/variables'; | ||
| .feature-ideas-error-container { | ||
| ::v-deep .error-explanation { | ||
| flex-direction: column; | ||
| padding-top: 1rem; | ||
| padding-bottom: 1rem; | ||
| section { | ||
| width: 100%; | ||
| } | ||
| img { | ||
| max-width: 250px; | ||
| @media (min-width: $bp-4k) { | ||
| max-width: calc(1.5 * 250px); | ||
| } | ||
| } | ||
| .title { | ||
| color: $greyblack; | ||
| font-size: $font-size-medium; | ||
| font-weight: 600; | ||
| margin-bottom: 1rem !important; | ||
| @media (min-width: $bp-small) { | ||
| font-size: $font-size-large; | ||
| } | ||
| @media (min-width: $bp-4k) { | ||
| font-size: $font-size-large-4k; | ||
| } | ||
| } | ||
| p { | ||
| margin-bottom: 1rem; | ||
| } | ||
| } | ||
| } | ||
| ::v-deep .content-card.list-card { | ||
| max-width: none; | ||
| .card-img { | ||
| background-color: $bodygrey; | ||
| img { | ||
| width: 80px; | ||
| height: auto; | ||
| margin: 0 auto; | ||
| @media (min-width: $bp-4k) { | ||
| width: 120px; | ||
| } | ||
| } | ||
| } | ||
| .card-wrapper { | ||
| &:hover { | ||
| box-shadow: none; | ||
| } | ||
| .title-texts-wrapper { | ||
| max-height: none; | ||
| margin-bottom: 0.5rem; | ||
| } | ||
| .card-text p { | ||
| display: inline; | ||
| -webkit-line-clamp: none; | ||
| } | ||
| } | ||
| } | ||
| .vote-button { | ||
| &:hover, | ||
| &.voted { | ||
| .icon-thumbsup-outlined::before { | ||
| content: '\e921'; | ||
| } | ||
| } | ||
| &.voted { | ||
| color: $blue; | ||
| } | ||
| .icon-thumbsup-outlined, | ||
| .icon-thumbsup { | ||
| font-size: 1.125rem; | ||
| @media (min-width: $bp-4k) { | ||
| font-size: 1.5rem; | ||
| } | ||
| } | ||
| } | ||
| ::v-deep .container.error-container { | ||
| max-width: none; | ||
| } | ||
| </style> | ||
| <docs lang="md"> | ||
| ```jsx | ||
| <FeatureIdeas :features="[ | ||
| { name: 'Feature 1', | ||
| text: 'Feature 1 description. Description of the feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', | ||
| image: { | ||
| image: { | ||
| url: illustrations.search, | ||
| contentType: 'image/svg+xml', | ||
| } | ||
| }, | ||
| sys: { id: '1' } | ||
| }, | ||
| { name: 'Feature 2', | ||
| text: 'Feature 2 description. Description of the feature. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.', | ||
| image: { | ||
| image: { | ||
| url: illustrations.search, | ||
| contentType: 'image/svg+xml', | ||
| } | ||
| }, | ||
| sys: { id: '2' } | ||
| } | ||
| ]" /> | ||
| ``` | ||
| </docs> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.