Skip to content

Commit

Permalink
Merge pull request #622 from Neovici/feat/minitable-settings-hidden
Browse files Browse the repository at this point in the history 
feat/minitable settings hidden
  • Loading branch information
@megheaiulian
megheaiulian authored Jul 17, 2024
2 parents dc87695 + 9fc4b01 commit 0d77700
Show file tree
Hide file tree
Showing 5 changed files with 310 additions and 232 deletions.
4 changes: 4 additions & 0 deletions cosmoz-omnitable-styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -578,4 +578,8 @@ export default css`
:host([mini]) .tableContent-scroller::-webkit-scrollbar-button:increment {
width: 0px;
}
:host([mini]) cosmoz-omnitable-settings::part(columns) {
display:none;
}
`;
269 changes: 143 additions & 126 deletions lib/settings/cosmoz-omnitable-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,113 +8,117 @@ import style, { dropdown as dropdownStyle } from './style.css';
import useSettingsUi from './use-settings-ui';
import { close, pull, arrow } from '../icons';
import { when } from 'lit-html/directives/when.js';
import { sheet } from '@neovici/cosmoz-utils';

/* eslint-disable max-lines-per-function */
const placement = ['bottom-right', ...defaultPlacement],
renderItem =
({
onDragStart,
onDragEnter,
onDragOver,
onDragLeave,
onDrop,
onDown,
onToggle,
collapsed,
filters,
}) =>
(column, i) => {
const indeterminate = !!collapsed?.find((c) => c.name === column.name),
checked = !column.disabled && !indeterminate;
return html` <div
class="item"
data-index=${i}
@mousedown=${onDown}
draggable="true"
@dragstart=${onDragStart}
@dragenter=${onDragEnter}
@dragover=${onDragOver}
@dragleave=${onDragLeave}
@drop=${onDrop}
const placement = ['bottom-right', ...defaultPlacement];

const renderItem =
({
onDragStart,
onDragEnter,
onDragOver,
onDragLeave,
onDrop,
onDown,
onToggle,
collapsed,
filters,
}) =>
(column, i) => {
const indeterminate = !!collapsed?.find((c) => c.name === column.name),
checked = !column.disabled && !indeterminate;
return html` <div
class="item"
data-index=${i}
@mousedown=${onDown}
draggable="true"
@dragstart=${onDragStart}
@dragenter=${onDragEnter}
@dragover=${onDragOver}
@dragleave=${onDragLeave}
@drop=${onDrop}
>
<button class="pull">${pull}</button>
<label class="title" ?has-filter=${!isEmpty(filters[column.name]?.filter)}
>${column.title}</label
>
<button class="pull">${pull}</button>
<label
class="title"
?has-filter=${!isEmpty(filters[column.name]?.filter)}
>${column.title}</label
>
<input
class="checkbox"
type="checkbox"
.checked=${checked}
@click=${onToggle}
.indeterminate=${indeterminate}
/>
</div>`;
},
SettingsUI = (host) => {
const {
settings,
settingsId,
onSave,
onReset,
hasChanges,
opened,
setOpened,
...thru
} = useSettingsUi(host);
return [
html`
<style>
${style}
</style>
<div class="headline">
${_('Sort and filter')}
<button
class="close"
@click=${(e) => {
const tg = e.currentTarget;
tg?.focus();
tg?.blur();
}}
>
${close}
</button>
</div>
<div class="contents">
<div
class="heading"
?data-opened=${opened.columns}
@click=${() => setOpened((c) => ({ ...c, columns: !c.columns }))}
>
${_('Columns')} ${arrow}
</div>
<cosmoz-collapse ?opened=${opened.columns}>
<div class="list">${settings.columns?.map(renderItem(thru))}</div>
</cosmoz-collapse>
<input
class="checkbox"
type="checkbox"
.checked=${checked}
@click=${onToggle}
.indeterminate=${indeterminate}
/>
</div>`;
};

<div
class="heading"
?data-opened=${opened.sort}
@click=${() => setOpened((c) => ({ ...c, sort: !c.sort }))}
>
${_('Sort on')} ${arrow}
</div>
<cosmoz-collapse ?opened=${opened.sort}> ${sort()} </cosmoz-collapse>
const SettingsUI = (host) => {
const {
settings,
settingsId,
onSave,
onReset,
hasChanges,
opened,
setOpened,
...thru
} = useSettingsUi(host);
return html` <div class="headline">
${_('Sort and filter')}
<button
class="close"
@click=${(e) => {
const tg = e.currentTarget;
tg?.focus();
tg?.blur();
}}
>
${close}
</button>
</div>
<div
class="heading"
?data-opened=${opened.group}
@click=${() => setOpened((c) => ({ ...c, group: !c.group }))}
>
${_('Group on')} ${arrow}
</div>
<cosmoz-collapse ?opened=${opened.group}>
${group()}
</cosmoz-collapse>
</div>
`,
settingsId &&
<div class="contents">
<div
class="heading"
?data-opened=${opened.columns}
@click=${() => setOpened((c) => ({ ...c, columns: !c.columns }))}
part="columns columns-heading"
>
${_('Columns')} ${arrow}
</div>
<cosmoz-collapse
?opened="${opened.columns}"
part="columns columns-content"
>
<div class="list">${settings.columns?.map(renderItem(thru))}</div>
</cosmoz-collapse>
<div
class="heading"
?data-opened=${opened.sort}
@click=${() => setOpened((c) => ({ ...c, sort: !c.sort }))}
>
${_('Sort on')} ${arrow}
</div>
<cosmoz-collapse ?opened=${opened.sort}> ${sort()} </cosmoz-collapse>
<div
class="heading"
?data-opened=${opened.group}
@click=${() => setOpened((c) => ({ ...c, group: !c.group }))}
part="groups groups-heading"
>
${_('Group on')} ${arrow}
</div>
<cosmoz-collapse ?opened=${opened.group} part="groups groups-heading"
>${group()}</cosmoz-collapse
>
</div>
${when(
settingsId,
() =>
html`<div class="buttons">
<button
class="button reset"
Expand All @@ -127,29 +131,42 @@ const placement = ['bottom-right', ...defaultPlacement],
${_('Save')}
</button>
</div>`,
].filter(Boolean);
},
Settings = ({ config, newLayout }) => html`
<style>
${dropdownStyle}
</style>
<cosmoz-dropdown
.render=${() => html`<cosmoz-omnitable-settings-ui
.config=${config}
></cosmoz-omnitable-settings-ui>`}
.placement=${newLayout ? ['bottom-left', ...defaultPlacement] : placement}
>
${newLayout ?
html`<div class="headerDots" slot="button">...</div>` :
html`
<svg viewBox="0 0 24 24" width="24" slot="button" fill="currentColor">
)}`;
};

customElements.define(
'cosmoz-omnitable-settings-ui',
component(SettingsUI, { styleSheets: [sheet(style)] }),
);

const Settings = ({ config, newLayout }) => html`
<cosmoz-dropdown
.placement="${newLayout ? ['bottom-left', ...defaultPlacement] : placement}"
>
${when(
newLayout,
() => html`<div class="headerDots" slot="button">...</div>`,
() =>
html` <svg
viewBox="0 0 24 24"
width="24"
slot="button"
fill="currentColor"
>
<circle cx="10" cy="18" r="2"></circle>
<circle cx="10" cy="12" r="2"></circle>
<circle cx="10" cy="6" r="2"></circle></svg>`
}
<circle cx="10" cy="12" r="2"></circle>
<circle cx="10" cy="6" r="2"></circle>
</svg>`,
)}
${when(config?.badge, () => html`<div class="badge" slot="button"></div>`)}
<cosmoz-omnitable-settings-ui
exportparts="columns, groups"
.config=${config}
></cosmoz-omnitable-settings-ui>
</cosmoz-dropdown>
`;

${when(config?.badge, () => html`<div class="badge" slot="button"></div>`)}
</cosmoz-dropdown>
`;
customElements.define('cosmoz-omnitable-settings', component(Settings));
customElements.define('cosmoz-omnitable-settings-ui', component(SettingsUI));
customElements.define(
'cosmoz-omnitable-settings',
component(Settings, { styleSheets: [sheet(dropdownStyle)] }),
);
14 changes: 7 additions & 7 deletions lib/settings/use-settings-ui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export default (host) => {
...cfg,
columns,
})),
[setSettings]
[setSettings],
),
});

Expand All @@ -33,7 +33,7 @@ export default (host) => {

meta.handle = e.currentTarget;
},
[meta]
[meta],
),

onDragStart: useCallback(
Expand All @@ -53,10 +53,10 @@ export default (host) => {
target.addEventListener(
'dragend',
(e) => e.target.classList.remove('drag'),
{ once: true }
{ once: true },
);
},
[meta]
[meta],
),

onDragEnter: useCallback((e) => {
Expand Down Expand Up @@ -97,11 +97,11 @@ export default (host) => {
newSettings.splice(
to + (from >= to ? 0 : -1),
0,
newSettings.splice(from, 1)[0]
newSettings.splice(from, 1)[0],
);
setSettings(newSettings);
},
[meta]
[meta],
),

onToggle: useCallback(
Expand All @@ -124,7 +124,7 @@ export default (host) => {
});
setSettings(newSettings);
},
[meta]
[meta],
),
};
};
Loading

0 comments on commit 0d77700

Please sign in to comment.