Skip to content

Commit c17533a

Browse files
xav-carxav-car
committed
tech(orga): use new PixTable on campaign list
1 parent 05edafb commit c17533a

File tree

6 files changed

+156
-152
lines changed

6 files changed

+156
-152
lines changed

‎orga/app/components/campaign/list.gjs

+140-129
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import PixButton from '@1024pix/pix-ui/components/pix-button';
22
import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
33
import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
4+
import PixTable from '@1024pix/pix-ui/components/pix-table';
5+
import PixTableColumn from '@1024pix/pix-ui/components/pix-table-column';
46
import { fn, uniqueId } from '@ember/helper';
57
import { on } from '@ember/modifier';
68
import { action } from '@ember/object';
@@ -10,11 +12,10 @@ import Component from '@glimmer/component';
1012
import { tracked } from '@glimmer/tracking';
1113
import dayjsFormat from 'ember-dayjs/helpers/dayjs-format';
1214
import { t } from 'ember-intl';
13-
import { eq, not } from 'ember-truth-helpers';
15+
import { not } from 'ember-truth-helpers';
1416

1517
import InElement from '../in-element';
1618
import SelectableList from '../selectable-list';
17-
import TableHeader from '../table/header';
1819
import UiActionBar from '../ui/action-bar';
1920
import UiDeletionModal from '../ui/deletion-modal';
2021
import CampaignType from './detail/type';
@@ -67,98 +68,151 @@ export default class List extends Component {
6768

6869
<template>
6970
{{#let (uniqueId) (uniqueId) (uniqueId) (uniqueId) as |actionBarId paginationId headerId filtersId|}}
70-
<section class="campaign-list">
71-
<div id={{filtersId}} />
72-
73-
<div class="panel">
74-
<table class="table content-text content-text--small">
75-
<caption class="screen-reader-only">{{@caption}}</caption>
76-
<thead id={{headerId}} />
77-
78-
<tbody>
79-
<SelectableList @items={{@campaigns}}>
80-
<:manager as |allSelected someSelected toggleAll selectedCampaigns reset|>
81-
<InElement @destinationId={{filtersId}}>
82-
<CampaignFilters
83-
@ownerNameFilter={{@ownerNameFilter}}
84-
@nameFilter={{@nameFilter}}
85-
@statusFilter={{@statusFilter}}
86-
@onFilter={{fn withFunction @onFilter reset}}
87-
@onClearFilters={{fn withFunction @onClear reset}}
88-
@numResults={{@campaigns.meta.rowCount}}
89-
@canDelete={{this.canDelete}}
90-
@listOnlyCampaignsOfCurrentUser={{@hideCampaignOwnerFilter}}
91-
/>
92-
</InElement>
93-
<Headers @destinationId={{headerId}} @showCampaignOwner={{@showCampaignOwner}}>
94-
{{#if this.canDelete}}
95-
<TableHeader @size="small">
96-
<PixCheckbox
97-
@screenReaderOnly={{true}}
98-
@checked={{someSelected}}
99-
@isIndeterminate={{not allSelected}}
100-
disabled={{not @campaigns.length}}
101-
{{on "click" toggleAll}}
102-
><:label>{{t "pages.campaigns-list.table.column.mainCheckbox"}}</:label></PixCheckbox>
103-
</TableHeader>
104-
{{/if}}
105-
</Headers>
106-
{{#if someSelected}}
107-
<ActionBar
108-
@destinationId={{actionBarId}}
109-
@count={{selectedCampaigns.length}}
110-
@openDeletionModal={{this.toggleDeletionModal}}
111-
/>
112-
<DeletionModal
113-
@showModal={{this.showDeletionModal}}
114-
@onCloseModal={{this.toggleDeletionModal}}
115-
@count={{selectedCampaigns.length}}
116-
@deleteCampaigns={{fn (fn withFunction this.deleteCampaigns reset) selectedCampaigns}}
117-
/>
118-
{{/if}}
119-
<PixPaginationControl
120-
@destinationId={{paginationId}}
121-
@onChange={{reset}}
122-
@pagination={{@campaigns.meta}}
123-
/>
124-
</:manager>
125-
<:item as |campaign toggleCampaign isCampaignSelected|>
126-
<Row
127-
@campaign={{campaign}}
128-
@showCampaignOwner={{@showCampaignOwner}}
129-
@labels={{this.labels}}
130-
@onClickCampaign={{@onClickCampaign}}
71+
<div id={{filtersId}} />
72+
<SelectableList
73+
@items={{@campaigns}}
74+
as |toggleCampaign isCampaignSelected allSelected someSelected toggleAll selectedCampaigns reset|
75+
>
76+
<PixTable @variant="orga" @caption={{@caption}} @data={{@campaigns}} class="campaign-table">
77+
<:columns as |campaign context|>
78+
{{#if this.canDelete}}
79+
<PixTableColumn @context={{context}}>
80+
<:header>
81+
<PixCheckbox
82+
@screenReaderOnly={{true}}
83+
@checked={{someSelected}}
84+
@isIndeterminate={{not allSelected}}
85+
disabled={{not @campaigns.length}}
86+
{{on "click" toggleAll}}
13187
>
132-
{{#if this.canDelete}}
133-
<td {{on "click" (fn withFunction toggleCampaign stopPropagation)}}>
134-
<PixCheckbox
135-
{{on "click" (fn withFunction toggleCampaign stopPropagation)}}
136-
@checked={{isCampaignSelected}}
137-
/>
138-
</td>
139-
{{/if}}
140-
</Row>
141-
</:item>
142-
</SelectableList>
143-
</tbody>
144-
</table>
145-
{{#if (eq @campaigns.length 0)}}
146-
<p class="table__empty content-text">
147-
{{t "pages.campaigns-list.table.empty"}}
148-
</p>
149-
{{/if}}
150-
</div>
151-
152-
<div id={{paginationId}} />
153-
</section>
88+
<:label>{{t "pages.campaigns-list.table.column.mainCheckbox"}}</:label>
89+
</PixCheckbox>
90+
</:header>
91+
<:cell>
92+
<span {{on "click" (fn withFunction (fn toggleCampaign campaign) stopPropagation)}}>
93+
<PixCheckbox
94+
{{on "click" (fn withFunction (fn toggleCampaign campaign) stopPropagation)}}
95+
@checked={{isCampaignSelected campaign}}
96+
/>
97+
</span>
98+
</:cell>
99+
</PixTableColumn>
100+
{{/if}}
101+
102+
<PixTableColumn @context={{context}}>
103+
<:header>
104+
{{t "pages.campaigns-list.table.column.name"}}
105+
</:header>
106+
<:cell>
107+
<span class="campaign-table__link-cell">
108+
<CampaignType @labels={{this.labels}} @campaignType={{campaign.type}} @hideLabel={{true}} />
109+
<LinkTo @route="authenticated.campaigns.campaign" @model={{campaign.id}}>
110+
{{campaign.name}}
111+
</LinkTo>
112+
</span>
113+
</:cell>
114+
</PixTableColumn>
115+
116+
<PixTableColumn @context={{context}}>
117+
<:header>
118+
{{t "pages.campaigns-list.table.column.code"}}
119+
</:header>
120+
<:cell>
121+
<span {{on "click" stopPropagation}}>{{campaign.code}}</span>
122+
</:cell>
123+
</PixTableColumn>
124+
125+
<PixTableColumn @context={{context}}>
126+
<:header>
127+
{{t "pages.campaigns-list.table.column.created-by"}}
128+
</:header>
129+
<:cell>
130+
{{campaign.ownerFullName}}
131+
</:cell>
132+
</PixTableColumn>
133+
134+
<PixTableColumn @context={{context}}>
135+
<:header>
136+
{{t "pages.campaigns-list.table.column.created-on"}}
137+
</:header>
138+
<:cell>
139+
{{dayjsFormat campaign.createdAt "DD/MM/YYYY" allow-empty=true}}
140+
</:cell>
141+
</PixTableColumn>
142+
143+
<PixTableColumn @context={{context}}>
144+
<:header>
145+
{{t "pages.campaigns-list.table.column.participants"}}
146+
</:header>
147+
<:cell>
148+
{{campaign.participationsCount}}
149+
</:cell>
150+
</PixTableColumn>
151+
152+
<PixTableColumn @context={{context}}>
153+
<:header>
154+
{{t "pages.campaigns-list.table.column.results"}}
155+
</:header>
156+
<:cell>
157+
{{campaign.sharedParticipationsCount}}
158+
</:cell>
159+
</PixTableColumn>
160+
</:columns>
161+
</PixTable>
162+
163+
{{#if someSelected}}
164+
<ActionBar
165+
@destinationId={{actionBarId}}
166+
@count={{selectedCampaigns.length}}
167+
@openDeletionModal={{this.toggleDeletionModal}}
168+
/>
169+
170+
<DeletionModal
171+
@showModal={{this.showDeletionModal}}
172+
@onCloseModal={{this.toggleDeletionModal}}
173+
@count={{selectedCampaigns.length}}
174+
@deleteCampaigns={{fn (fn withFunction this.deleteCampaigns reset) selectedCampaigns}}
175+
/>
176+
{{/if}}
177+
<PixPaginationControl @destinationId={{paginationId}} @onChange={{reset}} @pagination={{@campaigns.meta}} />
178+
<Filters
179+
@destinationId={{filtersId}}
180+
@reset={{reset}}
181+
@ownerNameFilter={{@ownerNameFilter}}
182+
@nameFilter={{@nameFilter}}
183+
@statusFilter={{@statusFilter}}
184+
@onFilter={{@onFilter}}
185+
@onClearFilters={{@onClear}}
186+
@numResults={{@campaigns.meta.rowCount}}
187+
@hideCampaignOwnerFilter={{@hideCampaignOwnerFilter}}
188+
/>
189+
</SelectableList>
190+
<div id={{paginationId}} />
154191
<div id={{actionBarId}} />
155192
{{/let}}
156193
</template>
157194
}
158195

196+
const Filters = <template>
197+
<InElement @destinationId={{@destinationId}}>
198+
<CampaignFilters
199+
@ownerNameFilter={{@ownerNameFilter}}
200+
@nameFilter={{@nameFilter}}
201+
@statusFilter={{@statusFilter}}
202+
@onFilter={{fn withFunction @onFilter @reset}}
203+
@onClearFilters={{fn withFunction @onClearFilters @reset}}
204+
@numResults={{@numResults}}
205+
@canDelete={{this.canDelete}}
206+
@listOnlyCampaignsOfCurrentUser={{@hideCampaignOwnerFilter}}
207+
/>
208+
</InElement>
209+
</template>;
210+
159211
const PixPaginationControl = <template>
160212
<InElement @destinationId={{@destinationId}} @waitForElement={{true}}>
161-
<PixPagination @pagination={{@pagination}} @onChange={{@onChange}} @locale={{this.intl.primaryLocale}} />
213+
<div class="campaign-table__pagination">
214+
<PixPagination @pagination={{@pagination}} @onChange={{@onChange}} @locale={{this.intl.primaryLocale}} />
215+
</div>
162216
</InElement>
163217
</template>;
164218

@@ -192,46 +246,3 @@ const DeletionModal = <template>
192246
</:content>
193247
</UiDeletionModal>
194248
</template>;
195-
196-
const Headers = <template>
197-
<InElement @destinationId={{@destinationId}}>
198-
<tr>
199-
{{yield}}
200-
<TableHeader @size="wide">{{t "pages.campaigns-list.table.column.name"}}</TableHeader>
201-
<TableHeader @size="medium">{{t "pages.campaigns-list.table.column.code"}}</TableHeader>
202-
{{#if @showCampaignOwner}}
203-
<TableHeader @size="medium" class="hide-on-mobile">{{t
204-
"pages.campaigns-list.table.column.created-by"
205-
}}</TableHeader>
206-
{{/if}}
207-
<TableHeader @size="medium" class="hide-on-mobile">{{t
208-
"pages.campaigns-list.table.column.created-on"
209-
}}</TableHeader>
210-
<TableHeader @size="medium" class="hide-on-mobile">{{t
211-
"pages.campaigns-list.table.column.participants"
212-
}}</TableHeader>
213-
<TableHeader @size="medium" class="hide-on-mobile">{{t "pages.campaigns-list.table.column.results"}}</TableHeader>
214-
</tr>
215-
</InElement>
216-
</template>;
217-
218-
const Row = <template>
219-
<tr {{on "click" (fn @onClickCampaign @campaign.id)}} class="tr--clickable">
220-
{{yield}}
221-
<td>
222-
<span class="campaign-list__campaign-link-cell">
223-
<CampaignType @campaignType={{@campaign.type}} @hideLabel={{true}} />
224-
<LinkTo @route="authenticated.campaigns.campaign" @model={{@campaign.id}}>
225-
{{@campaign.name}}
226-
</LinkTo>
227-
</span>
228-
</td>
229-
<td {{on "click" stopPropagation}}>{{@campaign.code}}</td>
230-
{{#if @showCampaignOwner}}
231-
<td class="hide-on-mobile">{{@campaign.ownerFullName}}</td>
232-
{{/if}}
233-
<td class="hide-on-mobile">{{dayjsFormat @campaign.createdAt "DD/MM/YYYY" allow-empty=true}}</td>
234-
<td class="hide-on-mobile">{{@campaign.participationsCount}}</td>
235-
<td class="hide-on-mobile">{{@campaign.sharedParticipationsCount}}</td>
236-
</tr>
237-
</template>;

‎orga/app/components/selectable-list.gjs

+10
Original file line numberDiff line numberDiff line change
@@ -49,5 +49,15 @@ export default class SelectableList extends Component {
4949
{{yield item (fn this.toggle item) (this.isSelected item) index to="item"}}
5050
{{/each}}
5151
{{yield this.allSelected this.someSelected this.toggleAll this.selectedItems this.reset to="manager"}}
52+
53+
{{yield
54+
this.toggle
55+
this.isSelected
56+
this.allSelected
57+
this.someSelected
58+
this.toggleAll
59+
this.selectedItems
60+
this.reset
61+
}}
5262
</template>
5363
}

‎orga/app/styles/app.scss

-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,6 @@
6060
@use 'pages/authenticated/campaigns/campaign' as *;
6161
@use 'pages/authenticated/campaigns/create-form' as *;
6262
@use 'pages/authenticated/campaigns/new-item' as *;
63-
@use 'pages/authenticated/campaigns/list' as *;
6463
@use 'pages/authenticated/campaigns/update' as *;
6564
@use 'pages/authenticated/campaigns/details/activity' as *;
6665
@use 'pages/authenticated/campaigns/details/analysis' as *;

‎orga/app/styles/components/campaign/list.scss

+5-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,12 @@
1-
@use 'pix-design-tokens/shadows';
2-
3-
.campaign-list {
4-
padding: 0;
1+
.campaign-table {
2+
&__pagination {
3+
margin-top: var(--pix-spacing-4x);
4+
}
55

6-
&__campaign-link-cell {
6+
&__link-cell {
77
display: flex;
88
gap: var(--pix-spacing-2x);
99
align-items: center;
1010
word-break: break-all;
1111
}
12-
13-
&__item {
14-
margin-bottom: 18px;
15-
}
16-
17-
&__table-header-background {
18-
@extend %pix-shadow-xs;
19-
20-
background: var(--pix-neutral-20);
21-
}
2212
}

‎orga/app/styles/globals/tables.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
table {
44
box-sizing: border-box;
55
width: 100%;
6-
table-layout: fixed;
6+
table-layout: auto;
77
border-collapse: collapse;
88
border-spacing: 0;
99

‎orga/app/styles/pages/authenticated/campaigns/list.scss

-6
This file was deleted.

0 commit comments

Comments
 (0)