Skip to content
This repository was archived by the owner on Jul 28, 2025. It is now read-only.

Commit 292aac7

Browse files
RafaelGBRafaelGB
committed
adding metadata controls
1 parent 5c511ee commit 292aac7

File tree

5 files changed

+159
-91
lines changed

5 files changed

+159
-91
lines changed

‎src/components/Cell.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import PopperSelectPortal from "components/portals/PopperSelectPortal";
99
import { CellContext } from "components/contexts/CellContext";
1010
import { c } from "helpers/StylesHelper";
1111
import CalendarPortal from "./portals/CalendarPortal";
12+
import { TableColumn } from "cdm/FolderModel";
1213

1314
/**
1415
* Obtain the path of the file inside cellValue
@@ -141,7 +142,10 @@ export default function DefaultCell(cellProperties: Cell) {
141142
case DataTypes.CALENDAR:
142143
return (
143144
<CellContext.Provider value={{ value, setValue }}>
144-
<CalendarPortal state={(cellProperties as any).initialState} />
145+
<CalendarPortal
146+
intialState={(cellProperties as any).initialState}
147+
column={cellProperties.column as unknown as TableColumn}
148+
/>
145149
</CellContext.Provider>
146150
);
147151
/** Default option */

‎src/components/Header.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import MultiIcon from "components/img/Multi";
55
import HashIcon from "components/img/Hash";
66
import PlusIcon from "components/img/Plus";
77
import HeaderMenu from "components/HeaderMenu";
8+
import CalendarIcon from "components/img/CalendarIcon";
89
import MarkdownObsidian from "components/img/Markdown";
910
import {
1011
ActionTypes,
@@ -56,7 +57,6 @@ export default function Header(headerProps: DatabaseHeaderProps) {
5657
const [expanded, setExpanded] = useState(created || false);
5758
const [domReady, setDomReady] = useState(false);
5859
const [referenceElement, setReferenceElement] = useState(null);
59-
const [isMetadata, setIsMetadata] = useState(headerProps.column.isMetadata);
6060
const [isInline, setIsInline] = useState(headerProps.column.isInline);
6161
const [labelState, setLabelState] = useState(headerProps.column.label);
6262
React.useEffect(() => {
@@ -75,6 +75,9 @@ export default function Header(headerProps: DatabaseHeaderProps) {
7575
setOptionsOfSelectDataType(options, rows, id);
7676
propertyIcon = <MultiIcon />;
7777
break;
78+
case DataTypes.CALENDAR:
79+
propertyIcon = <CalendarIcon />;
80+
break;
7881
case DataTypes.MARKDOWN:
7982
// TODO : add a markdown icon
8083
propertyIcon = <MarkdownObsidian />;
@@ -117,7 +120,7 @@ export default function Header(headerProps: DatabaseHeaderProps) {
117120
{labelState}
118121
{isInline && <span>*</span>}
119122
</div>
120-
{!isMetadata && domReady
123+
{domReady
121124
? ReactDOM.createPortal(
122125
<HeaderMenu
123126
headerProps={headerProps}

‎src/components/HeaderMenu.tsx‎

Lines changed: 103 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,4 @@
1-
import {
2-
DatabaseHeaderProps,
3-
TableColumn,
4-
TableDataType,
5-
} from "cdm/FolderModel";
1+
import { DatabaseHeaderProps } from "cdm/FolderModel";
62
import { ActionTypes, DataTypes, StyleVariables } from "helpers/Constants";
73
import { dbTrim, c } from "helpers/StylesHelper";
84
import ArrowUpIcon from "components/img/ArrowUp";
@@ -13,13 +9,15 @@ import TrashIcon from "components/img/Trash";
139
import TextIcon from "components/img/Text";
1410
import MultiIcon from "components/img/Multi";
1511
import HashIcon from "components/img/Hash";
12+
import CalendarIcon from "components/img/CalendarIcon";
1613
import AdjustmentsIcon from "components/img/AdjustmentsIcon";
1714
import React, { useContext, useEffect, useState } from "react";
18-
import { ActionType, Column } from "react-table";
15+
import { Column } from "react-table";
1916
import { usePopper } from "react-popper";
2017
import { HeaderContext } from "components/contexts/HeaderContext";
18+
import { getColumnWidthStyle } from "components/styles/ColumnWidthStyle";
2119
import { FormControlLabel, FormGroup, Switch } from "@material-ui/core";
22-
import { getColumnWidthStyle } from "./styles/ColumnWidthStyle";
20+
2321
type HeaderMenuProps = {
2422
headerProps: DatabaseHeaderProps;
2523
setSortBy: any;
@@ -140,7 +138,12 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
140138
icon: <ArrowRightIcon />,
141139
label: "Insert right",
142140
},
143-
{
141+
];
142+
/**
143+
* Add extra buttons if column is not a metadata
144+
*/
145+
if (!column.isMetadata) {
146+
buttons.push({
144147
onClick: (e: any) => {
145148
dispatch({
146149
type: ActionTypes.DELETE_COLUMN,
@@ -153,9 +156,8 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
153156
},
154157
icon: <TrashIcon />,
155158
label: "Delete",
156-
},
157-
];
158-
159+
});
160+
}
159161
/**
160162
* Array of type headers available to change the data type of the column
161163
*/
@@ -199,6 +201,19 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
199201
icon: <HashIcon />,
200202
label: DataTypes.NUMBER,
201203
},
204+
{
205+
onClick: (e: any) => {
206+
dispatch({
207+
type: ActionTypes.UPDATE_COLUMN_TYPE,
208+
columnId: column.id,
209+
dataType: DataTypes.CALENDAR,
210+
});
211+
setShowType(false);
212+
setExpanded(false);
213+
},
214+
icon: <CalendarIcon />,
215+
label: DataTypes.CALENDAR,
216+
},
202217
];
203218

204219
const typePopper = usePopper(typeReferenceElement, typePopperElement, {
@@ -315,84 +330,89 @@ const HeaderMenu = (headerMenuProps: HeaderMenuProps) => {
315330
}}
316331
>
317332
{/** Edit header label section */}
318-
<div
319-
style={{
320-
paddingTop: "0.75rem",
321-
paddingLeft: "0.75rem",
322-
paddingRight: "0.75rem",
323-
}}
324-
>
325-
<div className="is-fullwidth" style={{ marginBottom: 12 }}>
326-
<input
327-
className={
328-
labelStateInvalid
329-
? `${c("invalid-form")}`
330-
: `${c("form-input")}`
331-
}
332-
ref={setInputRef}
333-
type="text"
334-
value={labelState}
335-
style={{ width: "100%" }}
336-
onChange={handleChange}
337-
onBlur={handleBlur}
338-
onKeyDown={handleKeyDown}
339-
/>
340-
</div>
341-
<span
342-
className="font-weight-600 font-size-75"
343-
style={{
344-
textTransform: "uppercase",
345-
color: StyleVariables.TEXT_FAINT,
346-
}}
347-
>
348-
Property Type
349-
</span>
350-
</div>
351-
{/** Type of column section */}
352-
<div style={{ padding: "4px 0px" }}>
353-
<div
354-
className="menu-item sort-button"
355-
onMouseEnter={() => setShowType(true)}
356-
onMouseLeave={() => setShowType(false)}
357-
ref={setTypeReferenceElement}
358-
>
359-
<span className="svg-icon svg-text icon-margin">
360-
{propertyIcon}
361-
</span>
362-
<span style={{ textTransform: "capitalize" }}>
363-
{column.dataType}
364-
</span>
365-
</div>
366-
{showType && (
333+
{!column.isMetadata && (
334+
<>
367335
<div
368-
className={`menu ${c("popper")}`}
369-
ref={setTypePopperElement}
370-
onMouseEnter={() => setShowType(true)}
371-
onMouseLeave={() => setShowType(false)}
372-
{...typePopper.attributes.popper}
373336
style={{
374-
...typePopper.styles.popper,
375-
width: 200,
376-
zIndex: 4,
377-
padding: "4px 0px",
337+
paddingTop: "0.75rem",
338+
paddingLeft: "0.75rem",
339+
paddingRight: "0.75rem",
378340
}}
379341
>
380-
{types.map((type) => (
381-
<div key={type.label}>
382-
<div
383-
className="menu-item sort-button"
384-
onClick={type.onClick}
385-
>
386-
<span className="svg-icon svg-text icon-margin">
387-
{type.icon}
388-
</span>
389-
{type.label}
390-
</div>
342+
<div className="is-fullwidth" style={{ marginBottom: 12 }}>
343+
<input
344+
className={
345+
labelStateInvalid
346+
? `${c("invalid-form")}`
347+
: `${c("form-input")}`
348+
}
349+
ref={setInputRef}
350+
type="text"
351+
value={labelState}
352+
style={{ width: "100%" }}
353+
onChange={handleChange}
354+
onBlur={handleBlur}
355+
onKeyDown={handleKeyDown}
356+
/>
357+
</div>
358+
359+
<span
360+
className="font-weight-600 font-size-75"
361+
style={{
362+
textTransform: "uppercase",
363+
color: StyleVariables.TEXT_FAINT,
364+
}}
365+
>
366+
Property Type
367+
</span>
368+
</div>
369+
{/** Type of column section */}
370+
<div style={{ padding: "4px 0px" }}>
371+
<div
372+
className="menu-item sort-button"
373+
onMouseEnter={() => setShowType(true)}
374+
onMouseLeave={() => setShowType(false)}
375+
ref={setTypeReferenceElement}
376+
>
377+
<span className="svg-icon svg-text icon-margin">
378+
{propertyIcon}
379+
</span>
380+
<span style={{ textTransform: "capitalize" }}>
381+
{column.dataType}
382+
</span>
383+
</div>
384+
{showType && (
385+
<div
386+
className={`menu ${c("popper")}`}
387+
ref={setTypePopperElement}
388+
onMouseEnter={() => setShowType(true)}
389+
onMouseLeave={() => setShowType(false)}
390+
{...typePopper.attributes.popper}
391+
style={{
392+
...typePopper.styles.popper,
393+
width: 200,
394+
zIndex: 4,
395+
padding: "4px 0px",
396+
}}
397+
>
398+
{types.map((type) => (
399+
<div key={type.label}>
400+
<div
401+
className="menu-item sort-button"
402+
onClick={type.onClick}
403+
>
404+
<span className="svg-icon svg-text icon-margin">
405+
{type.icon}
406+
</span>
407+
{type.label}
408+
</div>
409+
</div>
410+
))}
391411
</div>
392-
))}
412+
)}
393413
</div>
394-
)}
395-
</div>
414+
</>
415+
)}
396416
{/** Action buttons section */}
397417
<div
398418
style={{

‎src/components/img/CalendarIcon.tsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from "react";
2+
3+
export default function CalendarIcon() {
4+
return (
5+
<svg
6+
width="24"
7+
height="24"
8+
viewBox="0 0 24 24"
9+
strokeWidth="2"
10+
stroke="currentColor"
11+
fill="none"
12+
strokeLinecap="round"
13+
strokeLinejoin="round"
14+
>
15+
<path stroke="none" d="M0 0h24v24H0z" fill="none" />
16+
<rect x="4" y="5" width="16" height="16" rx="2" />
17+
<line x1="16" y1="3" x2="16" y2="7" />
18+
<line x1="8" y1="3" x2="8" y2="7" />
19+
<line x1="4" y1="11" x2="20" y2="11" />
20+
<line x1="11" y1="15" x2="12" y2="15" />
21+
<line x1="12" y1="15" x2="12" y2="18" />
22+
</svg>
23+
);
24+
}

‎src/components/portals/CalendarPortal.tsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
import { TableDataType } from "cdm/FolderModel";
1+
import { TableColumn, TableDataType } from "cdm/FolderModel";
22
import { CellContext } from "components/contexts/CellContext";
33
import { StyleVariables } from "helpers/Constants";
44
import React, { useContext, useState } from "react";
55
import Calendar from "react-calendar";
66
import ReactDOM from "react-dom";
7+
import { DateTime } from "luxon";
78
import { usePopper } from "react-popper";
89

910
type CalendarProps = {
1011
intialState: TableDataType;
12+
column: TableColumn;
1113
};
12-
const CalendarPortal = (calendarProps: any) => {
13-
const [calendarState, setCalendarState] = useState(new Date());
14+
const CalendarPortal = (calendarProps: CalendarProps) => {
15+
const { column } = calendarProps;
1416
const [showCalendar, setShowCalendar] = useState(false);
1517
// Selector reference state
1618
const [calendarRef, setCalendarRef] = useState(null);
@@ -19,10 +21,25 @@ const CalendarPortal = (calendarProps: any) => {
1921
const { styles, attributes } = usePopper(calendarRef, selectPop);
2022
/** state of cell value */
2123
const { value, setValue } = useContext(CellContext);
24+
25+
const [calendarState, setCalendarState] = useState(
26+
DateTime.fromFormat(value.value, "yyyy-MM-dd").toJSDate()
27+
);
2228
function handleCalendarChange(date: Date) {
2329
setCalendarState(date);
2430
setShowCalendar(false);
31+
setValue({
32+
value: DateTime.fromJSDate(date).toFormat("yyyy-MM-dd"),
33+
update: true,
34+
});
35+
}
36+
37+
function handlerOnClick(e: any) {
38+
if (!column.isMetadata) {
39+
setShowCalendar(!showCalendar);
40+
}
2541
}
42+
2643
function renderCalendar() {
2744
return (
2845
<div
@@ -37,6 +54,7 @@ const CalendarPortal = (calendarProps: any) => {
3754
padding: "0.75rem",
3855
background: StyleVariables.BACKGROUND_SECONDARY,
3956
}}
57+
onBlur={() => setShowCalendar(false)}
4058
>
4159
<Calendar onChange={handleCalendarChange} value={calendarState} />
4260
</div>
@@ -47,8 +65,7 @@ const CalendarPortal = (calendarProps: any) => {
4765
<div
4866
className="data-input calendar"
4967
ref={setCalendarRef}
50-
onClick={() => setShowCalendar(!showCalendar)}
51-
onBlur={() => setShowCalendar(false)}
68+
onClick={handlerOnClick}
5269
>
5370
<span>{value.value}</span>
5471
</div>

0 commit comments

Comments
 (0)