-
Notifications
You must be signed in to change notification settings - Fork 159
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[full-ci] Extend multiple space selection details (#8230)
* Extend multiple space selection details * Redesign component, fix translation * Implement unittests * Fix unittest * Add PR to changelog * Address PR issues * Add enabled disabled info, fix bug * Update snapshot * Update changelog * Address PR issues
- Loading branch information
Showing
5 changed files
with
212 additions
and
10 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
144 changes: 135 additions & 9 deletions
144
packages/web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.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 |
|---|---|---|
| @@ -1,21 +1,147 @@ | ||
| <template> | ||
| <div class="oc-mt-xl"> | ||
| <div class="oc-flex space-info"> | ||
| <oc-icon name="layout-grid" size="xxlarge" /> | ||
| <p v-translate>Multiple spaces selected</p> | ||
| <div id="oc-spaces-details-multiple-sidebar"> | ||
| <div class="spaces-preview oc-mb"> | ||
| <div class="spaces-preview-body"> | ||
| <oc-icon class="preview-icon" size="xxlarge" variation="passive" name="layout-grid" /> | ||
| <p class="preview-text" v-text="selectedSpacesString" /> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <table class="details-table" :aria-label="detailsTableLabel"> | ||
| <tr> | ||
| <th scope="col" class="oc-pr-s" v-text="$gettext('Total quota:')" /> | ||
| <td v-text="totalSelectedSpaceQuotaTotal" /> | ||
| </tr> | ||
| <tr> | ||
| <th scope="col" class="oc-pr-s" v-text="$gettext('Remaining quota:')" /> | ||
| <td v-text="totalSelectedSpaceQuotaRemaining" /> | ||
| </tr> | ||
| <tr> | ||
| <th scope="col" class="oc-pr-s" v-text="$gettext('Used quota:')" /> | ||
| <td v-text="totalSelectedSpaceQuotaUsed" /> | ||
| </tr> | ||
| <tr> | ||
| <th scope="col" class="oc-pr-s" v-text="$gettext('Enabled:')" /> | ||
| <td v-text="totalEnabledSpaces" /> | ||
| </tr> | ||
| <tr> | ||
| <th scope="col" class="oc-pr-s" v-text="$gettext('Disabled:')" /> | ||
| <td v-text="totalDisabledSpaces" /> | ||
| </tr> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import { formatFileSize } from 'web-pkg/src/helpers' | ||
| import { computed, defineComponent, PropType } from 'vue' | ||
| import { SpaceResource } from 'web-client/src' | ||
| import { useTranslations } from 'web-pkg/src' | ||
| export default defineComponent({ | ||
| name: 'SpaceDetailsMultiple' | ||
| name: 'SpaceDetailsMultiple', | ||
| props: { | ||
| selectedSpaces: { | ||
| type: Array as PropType<Array<SpaceResource>>, | ||
| required: true | ||
| } | ||
| }, | ||
| setup(props) { | ||
| const { $gettext, $ngettext, $gettextInterpolate, $language } = useTranslations() | ||
| const totalSelectedSpaceQuotaTotal = computed(() => { | ||
| let total = 0 | ||
| props.selectedSpaces.forEach((space) => { | ||
| total += space.spaceQuota.total | ||
| }) | ||
| return formatFileSize(total, $language.current) | ||
| }) | ||
| const totalSelectedSpaceQuotaRemaining = computed(() => { | ||
| let remaining = 0 | ||
| props.selectedSpaces.forEach((space) => { | ||
| if (space.disabled) { | ||
| return | ||
| } | ||
| remaining += space.spaceQuota.remaining | ||
| }) | ||
| return formatFileSize(remaining, $language.current) | ||
| }) | ||
| const totalSelectedSpaceQuotaUsed = computed(() => { | ||
| let used = 0 | ||
| props.selectedSpaces.forEach((space) => { | ||
| if (space.disabled) { | ||
| return | ||
| } | ||
| used += space.spaceQuota.used | ||
| }) | ||
| return formatFileSize(used, $language.current) | ||
| }) | ||
| const totalEnabledSpaces = computed(() => { | ||
| return props.selectedSpaces.filter((s) => !s.disabled).length | ||
| }) | ||
| const totalDisabledSpaces = computed(() => { | ||
| return props.selectedSpaces.filter((s) => s.disabled).length | ||
| }) | ||
| const detailsTableLabel = computed(() => { | ||
| return $gettext('Overview of the information about the selected spaces') | ||
| }) | ||
| const selectedSpacesString = computed(() => { | ||
| return $gettextInterpolate( | ||
| $ngettext( | ||
| '%{ itemCount } space selected', | ||
| '%{ itemCount } spaces selected', | ||
| props.selectedSpaces.length | ||
| ), | ||
| { | ||
| itemCount: props.selectedSpaces.length | ||
| } | ||
| ) | ||
| }) | ||
| return { | ||
| detailsTableLabel, | ||
| selectedSpacesString, | ||
| totalSelectedSpaceQuotaTotal, | ||
| totalSelectedSpaceQuotaRemaining, | ||
| totalSelectedSpaceQuotaUsed, | ||
| totalEnabledSpaces, | ||
| totalDisabledSpaces | ||
| } | ||
| } | ||
| }) | ||
| </script> | ||
| <style lang="scss"> | ||
| .space-info { | ||
| align-items: center; | ||
| flex-direction: column; | ||
| .spaces-preview { | ||
| position: relative; | ||
| background-color: var(--oc-color-background-muted); | ||
| border: 10px solid var(--oc-color-background-muted); | ||
| height: 230px; | ||
| text-align: center; | ||
| color: var(--oc-color-swatch-passive-muted); | ||
| &-body { | ||
| margin: 0; | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| -ms-transform: translate(-50%, -50%); | ||
| transform: translate(-50%, -50%); | ||
| .preview-icon { | ||
| display: inline-block; | ||
| } | ||
| .preview-text { | ||
| display: block; | ||
| } | ||
| } | ||
| } | ||
| .details-table { | ||
| text-align: left; | ||
| tr { | ||
| height: 1.5rem; | ||
| } | ||
| th { | ||
| font-weight: 600; | ||
| } | ||
| } | ||
| </style> |
34 changes: 34 additions & 0 deletions
34
packages/web-pkg/tests/unit/components/sidebar/Spaces/Details/SpaceDetailsMultiple.spec.ts
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,34 @@ | ||
| import SpaceDetailsMultiple from 'web-pkg/src/components/sideBar/Spaces/Details/SpaceDetailsMultiple.vue' | ||
| import { defaultPlugins, shallowMount } from 'web-test-helpers' | ||
|
|
||
| const spaceMock = { | ||
| type: 'space', | ||
| name: ' space', | ||
| id: '1', | ||
| mdate: 'Wed, 21 Oct 2015 07:28:00 GMT', | ||
| spaceQuota: { | ||
| used: 100, | ||
| total: 1000, | ||
| remaining: 900 | ||
| } | ||
| } | ||
|
|
||
| describe('Multiple Details SideBar Panel', () => { | ||
| it('displays the details side panel', () => { | ||
| const { wrapper } = createWrapper(spaceMock) | ||
| expect(wrapper.html()).toMatchSnapshot() | ||
| }) | ||
| }) | ||
|
|
||
| function createWrapper(spaceResource) { | ||
| return { | ||
| wrapper: shallowMount(SpaceDetailsMultiple, { | ||
| global: { | ||
| plugins: [...defaultPlugins()] | ||
| }, | ||
| props: { | ||
| selectedSpaces: [spaceResource] | ||
| } | ||
| }) | ||
| } | ||
| } |
38 changes: 38 additions & 0 deletions
38
...ts/unit/components/sidebar/Spaces/Details/__snapshots__/SpaceDetailsMultiple.spec.ts.snap
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,38 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Multiple Details SideBar Panel displays the details side panel 1`] = ` | ||
| <div id="oc-spaces-details-multiple-sidebar"> | ||
| <div class="spaces-preview oc-mb"> | ||
| <div class="spaces-preview-body"> | ||
| <oc-icon-stub accessiblelabel="" class="preview-icon" color="" filltype="fill" name="layout-grid" size="xxlarge" type="span" variation="passive"></oc-icon-stub> | ||
| <p class="preview-text">1 space selected</p> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <table aria-label="Overview of the information about the selected spaces" class="details-table"> | ||
| <tbody> | ||
| <tr> | ||
| <th class="oc-pr-s" scope="col">Total quota:</th> | ||
| <td>1 kB</td> | ||
| </tr> | ||
| <tr> | ||
| <th class="oc-pr-s" scope="col">Remaining quota:</th> | ||
| <td>900 B</td> | ||
| </tr> | ||
| <tr> | ||
| <th class="oc-pr-s" scope="col">Used quota:</th> | ||
| <td>100 B</td> | ||
| </tr> | ||
| <tr> | ||
| <th class="oc-pr-s" scope="col">Enabled:</th> | ||
| <td>1</td> | ||
| </tr> | ||
| <tr> | ||
| <th class="oc-pr-s" scope="col">Disabled:</th> | ||
| <td>0</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| </div> | ||
| `; |