Skip to content

Commit

Permalink
Merge pull request #30 from ilong4rennes/refactor/component-files
Browse files Browse the repository at this point in the history 
Refactor/component files
  • Loading branch information
@ilong4rennes
ilong4rennes authored Dec 6, 2024
2 parents b1af1d7 + 2ab7b07 commit 4604cd1
Show file tree
Hide file tree
Showing 6 changed files with 684 additions and 764 deletions.
118 changes: 57 additions & 61 deletions admin/src/Components/CategoryPeriodsInput.js
View file
Original file line number Diff line number Diff line change
@@ -1,69 +1,65 @@
import React from "react";
import React, { useEffect, useState } from "react";
import DatePeriod from "../Models/DatePeriod";
import { utcToday } from "../utils";
import DatePeriodInput from "./DatePeriodInput";
import DatePeriod from "../Models/DatePeriod";

export default class CategoryPeriodsInput extends React.Component {
constructor(props) {
super(props);
this.state = { periods: [] };
}
const CategoryPeriodsInput = ({ categoryPeriods, showHistoric }) => {
const [periods, setPeriods] = useState([]);

componentDidMount() {
const { categoryPeriods } = this.props;
categoryPeriods.subscribe(() => {
this.setState({ periods: categoryPeriods.periods });
useEffect(() => {
const unsubscribe = categoryPeriods.subscribe(() => {
setPeriods(categoryPeriods.periods);
});
}

render() {
const { category } = this.props.categoryPeriods;
const { showHistoric } = this.props;
const { periods } = this.state;

const today = utcToday();
const categoryTitle = {
labaccess: "Labaccess",
special_labaccess: "Access till lokalen (styrelsen etc)",
membership: "Medlemsskap",
return () => {
unsubscribe();
};
}, [categoryPeriods]);

const { category } = categoryPeriods;

const today = utcToday();
const categoryTitle = {
labaccess: "Labaccess",
special_labaccess: "Access till lokalen (styrelsen etc)",
membership: "Medlemsskap",
};

return (
<div>
<h4 className="uk-margin-top">{categoryTitle[category]}</h4>
{periods.map((p) => {
if (!showHistoric && p.end < today) {
return null;
}
return (
<div key={p.id}>
<DatePeriodInput period={p} />
&nbsp;
<a
onClick={() => categoryPeriods.remove(p)}
className="removebutton"
>
<i className="uk-icon-trash" />
</a>
</div>
);
})}
<button
type="button"
style={{ marginTop: "2px" }}
className="uk-button uk-button-small uk-button-success"
onClick={() => {
const period = new DatePeriod();
period.start = utcToday();
period.end = utcToday();
categoryPeriods.add(period);
}}
>
Lägg till period
</button>
</div>
);
};

return (
<div>
<h4 className="uk-margin-top">{categoryTitle[category]}</h4>
{periods.map((p) => {
if (!showHistoric && p.end < today) {
return null;
}
return (
<div key={p.id}>
<DatePeriodInput key={p.id} period={p} />
&nbsp;
<a
onClick={() =>
this.props.categoryPeriods.remove(p)
}
className="removebutton"
>
<i className="uk-icon-trash" />
</a>
</div>
);
})}
<button
type="button"
style={{ marginTop: "2px" }}
className="uk-button uk-button-small uk-button-success"
onClick={() => {
const period = new DatePeriod();
period.start = utcToday();
period.end = utcToday();
this.props.categoryPeriods.add(period);
}}
>
Lägg till period
</button>
</div>
);
}
}
export default CategoryPeriodsInput;
191 changes: 96 additions & 95 deletions admin/src/Components/CollectionTable.js
View file
Original file line number Diff line number Diff line change
@@ -1,32 +1,39 @@
import React from "react";
import React, { useEffect, useState } from "react";
import * as _ from "underscore";
import { confirmModal } from "../message";

export default class CollectionTable extends React.Component {
constructor(props) {
super(props);
this.state = {
sort: { key: null, order: "up" },
items: null,
page: {},
loading: true,
};
}
const CollectionTable = (props) => {
// State variables
const [sort, setSort] = useState({ key: null, order: "up" });
const [items, setItems] = useState(null);
const [page, setPage] = useState({});
const [loading, setLoading] = useState(true);

componentDidMount() {
const { collection } = this.props;
this.unsubscribe = collection.subscribe(({ page, items }) =>
this.setState({ page, items, loading: false }),
);
}
// Destructure props
const {
collection,
rowComponent,
columns,
emptyMessage,
className,
onPageNav,
} = props;

componentWillUnmount() {
this.unsubscribe();
}
// useEffect to handle subscription
useEffect(() => {
const unsubscribe = collection.subscribe(({ page, items }) => {
setPage(page);
setItems(items);
setLoading(false);
});
return () => {
unsubscribe();
};
}, [collection]);

renderHeading(column, i) {
const sortState = this.state.sort;
const { collection } = this.props;
// Functions
const renderHeading = (column, i) => {
const sortState = sort;

if (column.title) {
let title;
Expand All @@ -35,16 +42,17 @@ export default class CollectionTable extends React.Component {
<i className={"uk-icon-angle-" + sortState.order} />
);
const onClick = () => {
const sort = {
const newSort = {
key: column.sort,
order:
sortState.key === column.sort &&
sortState.order === "down"
? "up"
: "down",
};
this.setState({ sort, loading: true });
collection.updateSort(sort);
setSort(newSort);
setLoading(true);
collection.updateSort(newSort);
};
title = (
<a data-sort={column.sort} onClick={onClick}>
Expand All @@ -62,12 +70,10 @@ export default class CollectionTable extends React.Component {
);
}
return <th key={i} />;
}
};

renderPagination() {
const { page } = this.state;
const renderPagination = () => {
const show_count = 2;
const onPageNav = this.props.onPageNav;

if (!page.count) {
page.count = 1;
Expand All @@ -91,7 +97,7 @@ export default class CollectionTable extends React.Component {
<li key={i}>
<a
onClick={() => {
this.setState({ loading: true });
setLoading(true);
if (onPageNav) onPageNav(i);
}}
>
Expand All @@ -106,83 +112,78 @@ export default class CollectionTable extends React.Component {
</li>
);
}
return "";
return null;
})}
</ul>
);
}
};

deleteItem(collection, item) {
const deleteItem = (collection, item) => {
return confirmModal(item.deleteConfirmMessage())
.then(() => item.del())
.then(
() => collection.fetch(),
() => null,
);
}

render() {
const { rowComponent, columns, collection, emptyMessage, className } =
this.props;
const { items, loading } = this.state;
};

let rows = null;
if (items !== null) {
rows = items.map((item, i) => (
<React.Fragment key={i}>
{rowComponent({
item,
deleteItem: () => this.deleteItem(collection, item),
})}
</React.Fragment>
));
if (!rows.length && emptyMessage) {
rows = (
<tr>
<td colSpan={columns.length} className="uk-text-center">
<em>{emptyMessage}</em>
</td>
</tr>
);
}
// Render logic
let rows = null;
if (items !== null) {
rows = items.map((item, i) => (
<React.Fragment key={i}>
{rowComponent({
item,
deleteItem: () => deleteItem(collection, item),
})}
</React.Fragment>
));
if (!rows.length && emptyMessage) {
rows = (
<tr>
<td colSpan={columns.length} className="uk-text-center">
<em>{emptyMessage}</em>
</td>
</tr>
);
}
}

const headers = columns.map((c, i) => this.renderHeading(c, i));
const pagination =
typeof this.state.page !== "undefined" && this.state.page.count > 1
? this.renderPagination()
: null;
const headers = columns.map((c, i) => renderHeading(c, i));
const pagination =
typeof page !== "undefined" && page.count > 1
? renderPagination()
: null;

return (
<div className={className}>
{pagination}
<div style={{ position: "relative", clear: "both" }}>
<table
className={
"uk-table uk-table-condensed uk-table-striped uk-table-hover" +
(loading ? " backboneTableLoading" : "")
}
>
<thead>
<tr>{headers}</tr>
</thead>
<tbody>{rows}</tbody>
</table>
{loading ? (
<div className="loadingOverlay">
<div className="loadingWrapper">
<span>
<i className="uk-icon-refresh uk-icon-spin" />{" "}
Hämtar data...
</span>
</div>
return (
<div className={className}>
{pagination}
<div style={{ position: "relative", clear: "both" }}>
<table
className={
"uk-table uk-table-condensed uk-table-striped uk-table-hover" +
(loading ? " backboneTableLoading" : "")
}
>
<thead>
<tr>{headers}</tr>
</thead>
<tbody>{rows}</tbody>
</table>
{loading ? (
<div className="loadingOverlay">
<div className="loadingWrapper">
<span>
<i className="uk-icon-refresh uk-icon-spin" />{" "}
Hämtar data...
</span>
</div>
) : (
""
)}
</div>
{pagination}
</div>
) : null}
</div>
);
}
}
{pagination}
</div>
);
};

export default CollectionTable;
Loading

0 comments on commit 4604cd1

Please sign in to comment.