-
Notifications
You must be signed in to change notification settings - Fork 377
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Unify record-level actions for all tasks (Validate, Clear, and …
…Discard) (#2280) # Description This PR aligns record-level actions for all tasks (Validate, Clear, and Discard) and include the new design Closes #2266 See #2264 **Type of change** (Please delete options that are not relevant. Remember to title the PR according to the type of change) - [x] New feature (non-breaking change which adds functionality) **How Has This Been Tested** (Please describe the tests that you ran to verify your changes. And ideally, reference `tests`) - [x] test for RecordActionButtons - [x] update snapshot **Checklist** - [x] I have merged the original branch into my forked branch - [x] follows the style guidelines of this project - [x] I did a self-review of my code - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works
- Loading branch information
Showing
18 changed files
with
454 additions
and
244 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /* | ||
| * coding=utf-8 | ||
| * Copyright 2021-present, the Recognai S.L. team. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| /* eslint-disable */ | ||
| var icon = require('vue-svgicon') | ||
| icon.register({ | ||
| 'clear': { | ||
| width: 18, | ||
| height: 18, | ||
| viewBox: '0 0 18 18', | ||
| data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M1.02 9.845a1.878 1.878 0 000 2.655l3.622 3.622H1.569a.939.939 0 000 1.878h15.023a.939.939 0 000-1.878H8.02l8.933-8.933a1.878 1.878 0 000-2.656L12.97.55a1.878 1.878 0 00-2.656 0L1.019 9.845zm4.06-1.406l-2.733 2.733 3.984 3.984 2.733-2.734-3.983-3.983zM6.41 7.11l3.983 3.983 5.233-5.233-3.983-3.983L6.409 7.11z" _fill="#52A3ED"/>' | ||
| } | ||
| }) |
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,27 @@ | ||
| /* | ||
| * coding=utf-8 | ||
| * Copyright 2021-present, the Recognai S.L. team. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| /* eslint-disable */ | ||
| var icon = require('vue-svgicon') | ||
| icon.register({ | ||
| 'discard': { | ||
| width: 30, | ||
| height: 30, | ||
| viewBox: '0 0 30 30', | ||
| data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M4.393 4.393c-5.857 5.858-5.857 15.356 0 21.214 5.858 5.858 15.356 5.858 21.214 0 5.858-5.858 5.858-15.356 0-21.214-5.858-5.857-15.356-5.857-21.214 0zm3.62 19.951L24.343 8.012c3.427 4.57 3.062 11.082-1.094 15.238-4.156 4.156-10.668 4.52-15.238 1.095zM6.75 6.75c-4.156 4.156-4.52 10.668-1.095 15.238L21.988 5.655C17.418 2.23 10.906 2.595 6.75 6.75z" _fill="#000"/>' | ||
| } | ||
| }) |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| /* | ||
| * coding=utf-8 | ||
| * Copyright 2021-present, the Recognai S.L. team. | ||
| * | ||
| * Licensed under the Apache License, Version 2.0 (the "License"); | ||
| * you may not use this file except in compliance with the License. | ||
| * You may obtain a copy of the License at | ||
| * | ||
| * http://www.apache.org/licenses/LICENSE-2.0 | ||
| * | ||
| * Unless required by applicable law or agreed to in writing, software | ||
| * distributed under the License is distributed on an "AS IS" BASIS, | ||
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| * See the License for the specific language governing permissions and | ||
| * limitations under the License. | ||
| */ | ||
|
|
||
| /* eslint-disable */ | ||
| var icon = require('vue-svgicon') | ||
| icon.register({ | ||
| 'validate': { | ||
| width: 31, | ||
| height: 31, | ||
| viewBox: '0 0 31 31', | ||
| data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M15.75.75c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15 8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15zm-11.826 15c0-6.531 5.295-11.826 11.826-11.826 6.531 0 11.826 5.295 11.826 11.826 0 6.531-5.295 11.826-11.826 11.826-6.531 0-11.826-5.295-11.826-11.826zm19.3-3.698L20.98 9.807l-7.587 7.587-3.794-3.793-2.244 2.244 6.038 6.039 9.832-9.832z" _fill="#000"/>' | ||
| } | ||
| }) |
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
69 changes: 69 additions & 0 deletions
69
frontend/components/commons/results/RecordActionButtons.spec.js
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,69 @@ | ||
| import { shallowMount } from "@vue/test-utils"; | ||
| import RecordActionButtons from "./RecordActionButtons"; | ||
| import BaseButton from "@/components/base/BaseButton"; | ||
|
|
||
| let wrapper = null; | ||
| const options = { | ||
| stubs: { | ||
| "base-button": BaseButton, | ||
| }, | ||
| propsData: { | ||
| actions: [ | ||
| { | ||
| id: "validate", | ||
| name: "Validate", | ||
| active: true, | ||
| }, | ||
| { | ||
| id: "discard", | ||
| name: "Discard", | ||
| active: true, | ||
| }, | ||
| { | ||
| id: "clear", | ||
| name: "Clear", | ||
| active: false, | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
| beforeEach(() => { | ||
| wrapper = shallowMount(RecordActionButtons, options); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| wrapper.destroy(); | ||
| }); | ||
|
|
||
| describe("RecordActionButtonsComponent", () => { | ||
| it("render the component", () => { | ||
| expect(wrapper.is(RecordActionButtons)).toBe(true); | ||
| }); | ||
| it("expect to show validate button active", async () => { | ||
| testIfButtonIsDisabled("validate", undefined); | ||
| }); | ||
| it("expect to show discard button active", async () => { | ||
| testIfButtonIsDisabled("discard", undefined); | ||
| }); | ||
| it("expect to show clear button disabled", async () => { | ||
| testIfButtonIsDisabled("clear", "disabled"); | ||
| }); | ||
| it("expect to emit validate on click validate button", async () => { | ||
| testIfEmittedIsCorrect("validate"); | ||
| }); | ||
| it("expect to emit discard on click discard button", async () => { | ||
| testIfEmittedIsCorrect("discard"); | ||
| }); | ||
| it("expect to emit clear on click clear button", async () => { | ||
| testIfEmittedIsCorrect("clear"); | ||
| }); | ||
| }); | ||
|
|
||
| const testIfButtonIsDisabled = async (button, disabled) => { | ||
| const actionButton = wrapper.find(`.record__actions-button--${button}`); | ||
| expect(actionButton.attributes().disabled).toBe(disabled); | ||
| }; | ||
| const testIfEmittedIsCorrect = async (button) => { | ||
| wrapper.find(`.record__actions-button--${button}`).vm.$emit("click"); | ||
| expect(wrapper.emitted()).toHaveProperty(button); | ||
| }; |
80 changes: 80 additions & 0 deletions
80
frontend/components/commons/results/RecordActionButtons.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,80 @@ | ||
| <template> | ||
| <div class="record__actions-buttons"> | ||
| <base-button | ||
| v-for="{ id, name, active } in actions" | ||
| :key="id" | ||
| :class="`record__actions-button--${id}`" | ||
| :disabled="!active" | ||
| @click="onAction(id)" | ||
| > | ||
| <svgicon :name="id" width="22" height="22" /> | ||
| {{ name }} | ||
| </base-button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| import "assets/icons/validate"; | ||
| import "assets/icons/discard"; | ||
| import "assets/icons/clear"; | ||
| export default { | ||
| props: { | ||
| actions: { | ||
| type: Array, | ||
| required: true, | ||
| validator(actions) { | ||
| return actions.map((action) => | ||
| ["validate", "discard", "clear"].includes(action.id) | ||
| ); | ||
| }, | ||
| }, | ||
| }, | ||
| methods: { | ||
| onAction(id) { | ||
| this.$emit(id); | ||
| }, | ||
| }, | ||
| }; | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| $recordActions: ( | ||
| validate: palette(green), | ||
| discard: palette(grey, 400), | ||
| clear: palette(blue, 100), | ||
| ); | ||
| .record { | ||
| &__actions-buttons { | ||
| display: flex; | ||
| gap: $base-space * 4; | ||
| margin-top: 1.5em; | ||
| } | ||
| @each $action, $color in $recordActions { | ||
| &__actions-button--#{$action} { | ||
| padding: 0; | ||
| color: $color; | ||
| @include font-size(14px); | ||
| &:hover { | ||
| color: darken($color, 10%); | ||
| } | ||
| &:active .svg-icon { | ||
| animation: zoom-in-out 0.2s linear; | ||
| } | ||
| &[disabled] { | ||
| opacity: 30%; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| @keyframes zoom-in-out { | ||
| 0% { | ||
| transform: scale(1); | ||
| } | ||
| 30% { | ||
| transform: scale(0.8); | ||
| } | ||
| 100% { | ||
| transform: scale(1); | ||
| } | ||
| } | ||
| </style> |
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.