feat: wooooooorking like crazy 🦀

mistweaverco · May 16, 2024 · e363d7a · e363d7a
1 parent 2c8b8c1
commit e363d7a
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 56 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "timetrack.desktop",
   "productName": "timetrack.desktop",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Simple desktop application to track your time spent on different projects.",
   "main": ".vite/build/main.js",
   "scripts": {

diff --git a/src/components/LoadingComponent.tsx b/src/components/LoadingComponent.tsx
@@ -0,0 +1,24 @@
+import React, { FC, useEffect, useRef, useState, ReactNode } from 'react';
+export const LoadingComponent: FC = () => {
+  return <>
+    <div className="skeleton-lines mt-3 mb-3">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    <progress className="progress is-large is-primary" max="100">15%</progress>
+    <div className="skeleton-lines mb-3">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <span className="icon has-text-dark is-large is-align-self-flex-end mr-3">
+        <i className="fas fa-coffee fa-3x"></i>
+      </span>
+    </div>
+  </>;
+}
+
diff --git a/src/components/ModalConfirm.tsx b/src/components/ModalConfirm.tsx
@@ -6,15 +6,15 @@ interface BaseLayoutProps {
   callback?: (status: boolean) => void;
 }
 
-export const ModalConfirm: FC<BaseLayoutProps> = ({ callback, message }) => {
-  const onYesButtonClick = (evt: MouseEvent) => {
+export const ModalConfirm: FC<BaseLayoutProps> = ({ callback, message, children }) => {
+  const onYesButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
     if (callback) {
       callback(true);
     }
   }
 
-  const onNoButtonClick = (evt: MouseEvent) => {
+  const onNoButtonClick = (evt: React.MouseEvent<HTMLButtonElement>) => {
     evt.preventDefault();
     if (callback) {
       callback(false);
@@ -26,7 +26,7 @@ export const ModalConfirm: FC<BaseLayoutProps> = ({ callback, message }) => {
       <div className="modal-background"></div>
       <div className="modal-content">
         <div className="box">
-          <p>{message ? message : "Are you sure?" }</p>
+          {children ? children : <p>{message ? message : "Are you sure?" }</p>}
           <div className="buttons">
             <button className="button is-danger" onClick={onYesButtonClick}>Yes</button>
             <button className="button is-primary" onClick={onNoButtonClick}>No</button>

diff --git a/src/components/Projects.tsx b/src/components/Projects.tsx
@@ -118,9 +118,6 @@ export const Projects: FC = () => {
               <div data-projects-list>
                 {projects.map((project, idx: number) => (
                   <div key={idx} className="panel-block" data-idx={idx} data-name={project.name} onClick={onProjectSelect}>
-                    <span className="panel-icon">
-                      <i className="fas fa-book" aria-hidden="true"></i>
-                    </span>
                     <p data-project-item-header className="bd-notification is-info">{project.name}</p>
                   </div>
                 ))}

diff --git a/src/components/Search.tsx b/src/components/Search.tsx
@@ -1,37 +1,24 @@
-import React, { FC, useEffect, useRef, useState, ReactNode } from 'react';
+import React, { FC, useRef, useState  } from 'react';
 import moment from 'moment';
-import { Datafetcher } from './../lib/Datafetcher';
+import { LoadingComponent } from './LoadingComponent';
+import { ModalConfirm } from './ModalConfirm';
 import { useAppDispatch } from './Store/hooks'
 
 type Props = {
   searchResult: SearchQueryResult
 }
 
-const LoadingComponent: FC = () => {
-  return <>
-    <div className="skeleton-lines mt-3 mb-3">
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-    </div>
-    <progress className="progress is-large is-primary" max="100">15%</progress>
-    <div className="skeleton-lines mb-3">
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <div></div>
-      <span className="icon has-text-dark is-large is-align-self-flex-end mr-3">
-        <i className="fas fa-coffee fa-3x"></i>
-      </span>
-    </div>
-  </>;
-}
-
 const SearchResultsProjectsComponent: FC<Props> = ({ searchResult }) => {
+  const [DeleteProjectConfirmModal, setDeleteProjectConfirmModal] = useState(null);
+  const showDeleteProjectConfirmModal = (evt: React.MouseEvent<HTMLButtonElement>) => {
+    evt.preventDefault();
+    const modal = <ModalConfirm callback={(result) => {console.log(result);}}>
+      <p>Are you sure you want to delete this project?</p>
+    </ModalConfirm>
+    setDeleteProjectConfirmModal(modal);
+  }
   return <>
+    { DeleteProjectConfirmModal }
     { searchResult.projects.length ?
       searchResult.projects.map((project: DBProject, idx: number) =>
         <div key={idx} className="columns panel-block">
@@ -41,8 +28,7 @@ const SearchResultsProjectsComponent: FC<Props> = ({ searchResult }) => {
           <div className="column">
             <div className="field">
               <div className="control">
-                <button className="button is-primary">View</button>
-                <button className="button is-warning">Edit</button>
+                <button className="button is-warning" onClick={showDeleteProjectConfirmModal}>Edit</button>
                 <button className="button is-danger">Delete</button>
               </div>
             </div>
@@ -65,7 +51,6 @@ const SearchResultsTaskDefinitionsComponent: FC<Props> = ({ searchResult }) => {
           <div className="column">
             <div className="field">
               <div className="control">
-                <button className="button is-primary">View</button>
                 <button className="button is-warning">Edit</button>
                 <button className="button is-danger">Delete</button>
               </div>
@@ -91,7 +76,6 @@ const SearchResultsTasksComponent: FC<Props> = ({ searchResult }) => {
           <div className="column">
             <div className="field">
               <div className="control">
-                <button className="button is-primary">View</button>
                 <button className="button is-warning">Edit</button>
                 <button className="button is-danger">Delete</button>
               </div>

diff --git a/src/components/Tasks.tsx b/src/components/Tasks.tsx
@@ -285,24 +285,19 @@ const Component: FC<Props> = ({ selectedProject, activeTasks, tasks }) => {
                   <p className="panel-heading">Today</p>
                   <div data-tasks-list>
                     {tasks.map((task, idx: number) => {
-                      return <div key={idx} data-name={task.name} data-description={task.description} data-seconds={task.seconds} data-project-name={task.project_name} data-date={task.date} onClick={onTaskSelect} className="panel-block">
-                        <span className="panel-icon">
-                          <i className="fas fa-book" aria-hidden="true"></i>
-                        </span>
-                        <div className="grid has-1-cols">
-                          <div className="columns">
-                            <div className="column">
-                              <p data-task-name className="bd-notification is-info">{task.name}</p>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="grid has-2-cols">
-                          <div className="columns">
-                            <div className="column">
-                              <WrappedTimerComponent task={task} />
-                            </div>
-                            <div className="column">
-                              <p data-task-date className="bd-notification is-info">{task.date}</p>
+                      return <div className="p-4 tasklist-item" key={idx} data-name={task.name} data-description={task.description} data-seconds={task.seconds} data-project-name={task.project_name} data-date={task.date} onClick={onTaskSelect}>
+                        <div className="columns">
+                          <div className="column">
+                            <p className="bd-notification">{task.name}</p>
+                            <div className="columns is-mobile">
+                              <div className="column">
+                                <p className="bd-notification">
+                                  <WrappedTimerComponent task={task} />
+                                </p>
+                              </div>
+                              <div className="column">
+                                <p className="bd-notification">{task.date}</p>
+                              </div>
                             </div>
                           </div>
                         </div>

diff --git a/src/index.css b/src/index.css
@@ -28,6 +28,12 @@
   max-width: 100%;
 }
 
+.tasklist-item.is-active {
+  border-left: 5px solid;
+  color: var(--bulma-success-on-scheme);
+  border-left-color: var(--bulma-success-on-scheme) !important;
+}
+
 form.pdf-export-form .field,
 form.search-form .field {
 /* TODO: find a better way to do this

diff --git a/src/lib/Utils.ts b/src/lib/Utils.ts
@@ -28,7 +28,7 @@ const removeActiveClassnameGeneric = (rootQuery: string, itemsQuery: string) =>
 }
 
 export const removeActiveClassnameTasks = () => {
-  removeActiveClassnameGeneric('[data-tasks-list]', '.panel-block');
+  removeActiveClassnameGeneric('[data-tasks-list]', '.tasklist-item');
 }
 
 export const removeActiveClassnameTaskDefinitions = () => {