aboutsummaryrefslogtreecommitdiff
path: root/src/components/tables
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/tables')
-rw-r--r--src/components/tables/brand-table.js54
-rw-r--r--src/components/tables/client-table.js4
-rw-r--r--src/components/tables/scss/_colors.scss16
-rw-r--r--src/components/tables/scss/brand-table.scss37
-rw-r--r--src/components/tables/scss/client-table.scss14
5 files changed, 110 insertions, 15 deletions
diff --git a/src/components/tables/brand-table.js b/src/components/tables/brand-table.js
new file mode 100644
index 0000000..4b361a1
--- /dev/null
+++ b/src/components/tables/brand-table.js
@@ -0,0 +1,54 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import './scss/brand-table.scss';
+import { deleteBrand } from './../../classes/brand';
+
+const BrandTable = (props) => {
+ const handleEdit = (i) => {
+ alert("editing coming soon")
+ }
+
+ const handleDelete = (b) => {
+ // TODO: add confirmation prompt
+ deleteBrand(b.Id, handleDelSuccess, handleDelFail);
+ }
+
+ const handleDelSuccess = () => {
+ props.refresh();
+ }
+
+ const handleDelFail = () => {
+ alert("fail")
+ }
+
+ return (
+ <div className={"brand-table"}>
+ {props.brands && props.brands.map(i =>
+ <div className={"brand"}>
+ <p className={"brand-name"}>{i.Name}</p>
+ <div className={"buttons"}>
+ <input type="button" value="Edit" onClick={() => handleEdit(i)}/>
+ <input type="button" value="Delete" onClick={() => handleDelete(i)}/>
+ </div>
+ </div>
+ )}
+ </div>
+ );
+}
+
+export default BrandTable;
diff --git a/src/components/tables/client-table.js b/src/components/tables/client-table.js
index 0060184..466316a 100644
--- a/src/components/tables/client-table.js
+++ b/src/components/tables/client-table.js
@@ -23,9 +23,9 @@ const ClientTable = (props) => {
alert("editing coming soon")
}
- const handleDelete = (i) => {
+ const handleDelete = (c) => {
// TODO: add confirmation prompt
- deleteClient(i.Id, handleDelSuccess, handleDelFail);
+ deleteClient(c.Id, handleDelSuccess, handleDelFail);
}
const handleDelSuccess = () => {
diff --git a/src/components/tables/scss/_colors.scss b/src/components/tables/scss/_colors.scss
index 98634bb..a4a8ba4 100644
--- a/src/components/tables/scss/_colors.scss
+++ b/src/components/tables/scss/_colors.scss
@@ -27,3 +27,19 @@ $fgColorDisabled: lightgray;
$inputBackgroundColor: #00000000;
$warningColor: #ed4683;
+
+@mixin button {
+ input[type=button] {
+ padding: 0.2rem 0;
+ width: 4rem;
+ background-color: $inputBackgroundColor;
+ border: 1px solid $primaryAccentColor;
+ color: $fgColor;
+ border-radius: 4px;
+ transition: background-color 0.4s, color 0.4s;
+ }
+ input[type=button]:hover {
+ background-color: $primaryAccentColor;
+ color: $fgColorAlt;
+ }
+}
diff --git a/src/components/tables/scss/brand-table.scss b/src/components/tables/scss/brand-table.scss
new file mode 100644
index 0000000..ba994c4
--- /dev/null
+++ b/src/components/tables/scss/brand-table.scss
@@ -0,0 +1,37 @@
+/* OpenBills-web - Web based libre billing software
+ * Copyright (C) 2022 Vidhu Kant Sharma <vidhukant@vidhukant.xyz>
+
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+@import "colors";
+
+.brand-table {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ .brand {
+ display: flex;
+ min-width: 22rem;
+ justify-content: space-between;
+ border-bottom: 1px dashed $primaryAccentColor;
+ }
+ .buttons {
+ display: flex;
+ justify-content: space-between;
+ width: 8.5rem;
+ @include button;
+ margin: auto 0;
+ }
+}
diff --git a/src/components/tables/scss/client-table.scss b/src/components/tables/scss/client-table.scss
index 68b7e39..fc8f22c 100644
--- a/src/components/tables/scss/client-table.scss
+++ b/src/components/tables/scss/client-table.scss
@@ -46,19 +46,7 @@
display: flex;
justify-content: space-between;
width: 8.7rem;
- input {
- padding: 0.2rem 0;
- width: 4rem;
- background-color: $inputBackgroundColor;
- border: 1px solid $primaryAccentColor;
- color: $fgColor;
- border-radius: 4px;
- transition: background-color 0.4s, color 0.4s;
- }
- input:hover {
- background-color: $primaryAccentColor;
- color: $fgColorAlt;
- }
+ @include button;
bottom: 2rem;
right: 2rem;
margin: auto;