Skip to content

Commit 70a3e7c

Browse files
acebergaceberg
committed
Filter by Group Tabs
1 parent 0605ded commit 70a3e7c

File tree

14 files changed

+158
-32
lines changed

14 files changed

+158
-32
lines changed

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,6 @@ All notable changes to this project will be documented in this file.
66
## [0.1.0] - 2025-01-03
77
### Added
88
- First binary release with `goreleaser`
9+
10+
### Fixed
11+
- Edit item bug

‎backend/internal/models/models.go‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ type Item struct {
1818
Group string `yaml:"group"`
1919
Name string `yaml:"name"`
2020
Type string `yaml:"type"`
21+
Link string `yaml:"link,omitempty"`
2122
Exec string `yaml:"-"`
2223
State string `yaml:"-"`
2324
}

‎backend/internal/web/public/assets/index.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎backend/internal/web/public/assets/index.js‎

Lines changed: 18 additions & 18 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/src/App.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,24 @@
66
.shade-hover:hover {
77
background-color: #00000015;
88
cursor: pointer;
9+
}
10+
11+
/* TABS */
12+
.btn-tab, .btn-tab-main {
13+
background-color: #00000000;
14+
border-width: thin;
15+
border-color: var(--bs-primary);
16+
border-style: solid;
17+
align-content: center;
18+
padding-inline: 10%;
19+
white-space: nowrap;
20+
/* margin-inline: 0.1px; */
21+
}
22+
.btn-tab:hover {
23+
background-color: #00000015;
24+
}
25+
26+
.btn-tab-main {
27+
border-bottom-color: #00000000;
28+
border-bottom-width: thick;
929
}

‎frontend/src/components/Body.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,20 @@
11
import { useEffect, useState } from "react"
2-
import { getItems, Item, ToFilter } from "../functions/api"
2+
import { getItems, Item } from "../functions/api"
33
import ItemShow from "./ItemShow";
4-
import { filterItems, sortItems } from "../functions/sortitems";
5-
import BodyHeader from "./BodyHeader";
4+
import { filterItems, getGroupsList, sortItems } from "../functions/sortitems";
5+
import BodyTabs from "./BodyTabs";
66

77
let sortField:keyof Item = "Exec";
88
let sortWay:boolean = true;
9+
let filterField:keyof Item = "Exec";
10+
let filterOption:string = "";
911

1012
function Body() {
1113

1214
const [items, setItems] = useState<Item[]>([]);
15+
const [grList, setGrList] = useState<string[]>([]);
1316
const [updBody, setUpdBody] = useState<boolean>(false);
1417
const [sortTrigger, setSortTrigger] = useState<boolean>(false);
15-
const [filterRes, setFilterRes] = useState<ToFilter>({Field: "Exec", Option: ""});
1618

1719
const handleSort = (sortby:keyof Item) => {
1820
setSortTrigger(!sortTrigger);
@@ -30,10 +32,15 @@ function Body() {
3032
sortField = str1 as keyof Item;
3133
const str = localStorage.getItem('sort_way');
3234
sortWay = str === "true";
35+
const str2 = localStorage.getItem('filter_field');
36+
filterField = str2 as keyof Item;
37+
const str3 = localStorage.getItem('filter_option');
38+
filterOption = str3 as string;
3339

3440
let tmpItems:Item[] = await getItems();
35-
if (filterRes.Option !== "") {
36-
tmpItems = filterItems(tmpItems, filterRes.Field, filterRes.Option);
41+
setGrList(getGroupsList(tmpItems));
42+
if (filterOption !== "") {
43+
tmpItems = filterItems(tmpItems, filterField, filterOption);
3744
}
3845

3946
setItems(sortItems(tmpItems, sortField, sortWay, sortTrigger));
@@ -55,7 +62,7 @@ function Body() {
5562
<div className="container-lg mt-2">
5663
<div className="card border-primary">
5764
<div className="card-header">
58-
<BodyHeader items={items} setFilterRes={setFilterRes} setUpdBody={setUpdBody}></BodyHeader>
65+
<BodyTabs grList={grList} setUpdBody={setUpdBody}></BodyTabs>
5966
</div>
6067
<div className="card-body table-responsive">
6168
<table className="table table-striped">
@@ -69,6 +76,7 @@ function Body() {
6976
<th>&nbsp;&nbsp;Action</th>
7077
<th>Logs</th>
7178
<th>Edit</th>
79+
<th style={{ width: "1%" }}>Link</th>
7280
</tr>
7381
</thead>
7482
<tbody>

‎frontend/src/components/BodyAddItem.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ function BodyAddItem(_props: any) {
88
Group: "",
99
Name: "",
1010
Type: "",
11+
Link: "",
1112
State: "",
1213
Exec: ""
1314
};

‎frontend/src/components/BodyTabs.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { useEffect } from "react";
2+
import BodyAddItem from "./BodyAddItem";
3+
4+
let filterOption:string = "";
5+
6+
function BodyTabs(_props: any) {
7+
8+
const grList = _props.grList;
9+
10+
const handleFilter = (key: string) => {
11+
filterOption = key;
12+
localStorage.setItem('filter_field', "Group");
13+
localStorage.setItem('filter_option', filterOption);
14+
_props.setUpdBody(true);
15+
setMainTab(filterOption);
16+
};
17+
18+
const handleAny = () => {
19+
filterOption = "";
20+
localStorage.setItem('filter_field', "Exec");
21+
localStorage.setItem('filter_option', filterOption);
22+
_props.setUpdBody(true);
23+
setMainTab(filterOption);
24+
};
25+
26+
const setMainTab = (key: string) => {
27+
28+
document.getElementById("g1s52lVbKscc")?.classList.remove("btn-tab-main");
29+
for (let i=0; i<grList.length; i++) {
30+
document.getElementById(grList[i])?.classList.remove("btn-tab-main");
31+
}
32+
key === "" ? key = "g1s52lVbKscc" : key = key;
33+
document.getElementById(key)?.classList.add("btn-tab-main");
34+
}
35+
36+
useEffect(() => {
37+
filterOption = localStorage.getItem('filter_option') as string;
38+
setMainTab(filterOption);
39+
}, [filterOption]);
40+
41+
return (
42+
<div className='d-flex justify-content-between'>
43+
<div className="d-flex justify-content-left">
44+
<button className="btn-tab rounded-top-3" onClick={handleAny} id="g1s52lVbKscc" title="All Groups">
45+
<i className="bi bi-three-dots"></i>
46+
</button>
47+
{grList?.map((key: string) => (
48+
<button key={key} onClick={() => handleFilter(key)} className="btn-tab rounded-top-3" id={key}>{key}</button>
49+
))}
50+
</div>
51+
<BodyAddItem setUpdBody={_props.setUpdBody}></BodyAddItem>
52+
</div>
53+
)
54+
}
55+
56+
export default BodyTabs

‎frontend/src/components/EditItem.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ function EditItem(_props: any) {
88
Group: _props.item.Group,
99
Name: _props.item.Name,
1010
Type: _props.item.Type,
11+
Link: _props.item.Link,
1112
Exec: "",
1213
State: ""
1314
};
@@ -24,6 +25,7 @@ function EditItem(_props: any) {
2425
};
2526

2627
const handleEdit = () => {
28+
setFormData(item);
2729
setModalOpen(true);
2830
}
2931

@@ -34,7 +36,8 @@ function EditItem(_props: any) {
3436
const saveChanges = async () => {
3537
if (JSON.stringify(formData) !== JSON.stringify(item)) {
3638
await apiSaveItem(item, formData);
37-
console.log("SAVE:", formData);
39+
console.log("SAVE (before):", item);
40+
console.log("SAVE (after):", formData);
3841
_props.setUpdBody(true);
3942
}
4043
}
@@ -67,6 +70,8 @@ function EditItem(_props: any) {
6770
<input className="form-control mb-3" defaultValue={item.Name} id="nid" name="Name" onChange={handleChange}></input>
6871
<label htmlFor="tid" className="form-label text-primary">Type</label>
6972
<input className="form-control mb-3" defaultValue={item.Type} id="tid" name="Type" onChange={handleChange}></input>
73+
<label htmlFor="lid" className="form-label text-primary">Link</label>
74+
<input className="form-control mb-3" defaultValue={item.Link} id="lid" name="Link" onChange={handleChange}></input>
7075
<hr></hr>
7176
<div className='d-flex justify-content-between'>
7277
<button className="btn btn-danger" type="button" onClick={handleDel}>Delete</button>

‎frontend/src/components/ItemShow.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,14 @@ function ItemShow(_props: any) {
3737
btnContent={<i className="bi bi-three-dots-vertical shade-hover fs-5" title="Edit"></i>}>
3838
</EditItem>
3939
</td>
40+
<td>
41+
{_props.item.Link
42+
? <a href={_props.item.Link} target="_blank">
43+
<i className="bi bi-box-arrow-up-right shade-hover fs-5"></i>
44+
</a>
45+
: <></>
46+
}
47+
</td>
4048
</>
4149
)
4250
}

0 commit comments

Comments
 (0)