2033: Sync worklogs from invoice entry

CHANGELOG.md

@@ -10,6 +10,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 * [PR-148](https://github.com/itk-dev/economics/pull/148)
   2031: Project overview standard settings.
+* [PR-147](https://github.com/itk-dev/economics/pull/147)
+  2033: Sync worklogs from invoice entry.
 * [PR-146](https://github.com/itk-dev/economics/pull/146)
   2034: Invoice date select continuity.
 * [PR-145](https://github.com/itk-dev/economics/pull/145)

assets/controllers/action-button_controller.js

@@ -0,0 +1,88 @@
+import { Controller } from "@hotwired/stimulus";
+import { postRequestHandler } from "../helpers/postRequestHandler";
+
+const states = {
+    default: "default",
+    loading: "loading",
+    success: "success",
+    error: "error"
+};
+
+export default class extends Controller {
+
+    static targets = ["actionDefault", "actionLoading", "actionSuccess", "actionError"];
+
+    action(e) {
+        const targets = {
+            default: this.actionDefaultTarget,
+            loading: this.actionLoadingTarget,
+            success: this.actionSuccessTarget,
+            error: this.actionErrorTarget,
+            parent: e.target,
+        };
+        const data = e.target.dataset;
+        const url = data.url;
+        const reload = data.reload;
+
+        triggerState(states.loading, targets);
+        postRequestHandler(url)
+            .then(result => {
+                if (result.success) {
+                    triggerState(states.success, targets);
+                    setTimeout(()=>{
+                        reload && window.location.reload();
+                        triggerState(states.default, targets);
+                        }, 2000)
+                } else {
+                    triggerState(states.error, targets);
+                    alert(result.error);
+                }
+            });
+    }
+}
+
+/**
+ * Applies a state to the provided targets based on the given state value.
+ *
+ * @param {string} state - The state value to apply.
+ * @param {object} targets - The targets to apply the state to.
+ */
+function triggerState(state, targets) {
+    resetState(targets);
+
+    switch (state) {
+        case states.default:
+            targets.default.classList.remove('hidden');
+            break;
+        case states.loading:
+            targets.loading.classList.remove("hidden");
+            break;
+        case states.success:
+            targets.success.classList.remove("hidden");
+            targets.parent.classList.add('btn-success');
+            break;
+        case states.error:
+            targets.error.classList.remove("hidden");
+            targets.parent.classList.add('btn-error');
+            break;
+        default:
+            console.log("State not recognized");
+    }
+}
+
+/**
+ * Resets the state of the targets.
+ *
+ * @param {object} targets - The targets to reset.
+ * @return {void}
+ */
+function resetState(targets)
+{
+    Object.entries(targets).forEach(([type, target]) => {
+        target.classList.remove('btn-error', 'btn-success');
+        if (type === "parent") {
+            return;
+        }
+       target.classList.add('hidden');
+    });
+}

assets/helpers/postRequestHandler.js

@@ -0,0 +1,35 @@
+export const postRequestHandler = async (updateUrl) => {
+    let result = {
+        success: false,
+        status: null,
+        data: null,
+        error: null
+    };
+
+    try {
+        const response = await fetch(updateUrl, {
+            method: "POST",
+            mode: "same-origin",
+            cache: "no-cache",
+            credentials: "same-origin",
+            headers: { "Content-Type": "application/json" },
+            redirect: "follow",
+            referrerPolicy: "no-referrer"
+        });
+
+        result.status = response.status;
+
+        if (!response.ok) {
+            const errorData = await response.json();
+            throw new Error(errorData.message);
+        } else {
+            result.success = true;
+            result.data = await response.json();
+        }
+    } catch (error) {
+        console.error(error.message);
+        result.error = error.message;
+    }
+
+    return result;
+};

assets/styles/app.css

@@ -163,6 +163,19 @@
     .worklogs-filter-form {
         @apply grid gap-3 mb-6 md:grid-cols-4;
     }
+    .action-button > span:not(.hidden) > svg {
+        margin: auto;
+        animation: spin 2s linear infinite
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
 
     .choices__list--dropdown .choices__item--selectable {
         padding: 1em !important;

templates/account/index.html.twig

@@ -6,6 +6,7 @@
 
     {% include 'components/page-header.html.twig' with {
         'title': 'account.title'|trans,
+        'type': 'link',
         'link_text': 'accounts.action_create_new'|trans,
         'link_url': 'app_account_new'
     } %}

templates/client/index.html.twig

@@ -6,6 +6,7 @@
 
     {% include 'components/page-header.html.twig' with {
         'title': 'client.title'|trans,
+        'type': 'link',
         'link_text': 'clients.action_create_new'|trans,
         'link_url': 'app_client_new'
     } %}

templates/components/action-button.html.twig

@@ -0,0 +1,32 @@
+{#
+This Twig template represents a stylized button component with different states that could be managed by a StumilusJS Controller.
+
+Parameters:
+- url (string, optional):
+    An URL which can be accessed when the button is clicked. Defaults to an empty string.
+- reload (boolean, optional):
+    If set to true, triggers a page reload when the button is clicked. Defaults to false.
+- default_text (string, optional):
+    The default text displayed on the button. Defaults to 'default'.
+- loader_text (string, optional):
+    The text displayed when the button is in the state of loading. Should be defined together with link_text variable.
+- success_text (string, optional):
+    The text displayed when an action related to the button is successfully finished. Defaults to 'success'.
+- error_text (string, optional):
+    The text displayed when an action related to the button has failed. Defaults to 'error'.
+#}
+
+<button class="action-button button w-48 h-16"  data-url="{{ url|default("") }}" data-reload="{{ reload|default(false) }}" {{ stimulus_controller('action-button') }}  {{ stimulus_action('action-button', 'action') }}>
+  <span
+      class="action-default pointer-events-none"{{ stimulus_target('action-button', 'actionDefault') }}> {{ default_text|default('default') }}
+  </span>
+  <span
+      class="action-loading hidden pointer-events-none" {{ stimulus_target('action-button', 'actionLoading') }}> {{ loader_text is defined ? loader_text : include('components/icons.html.twig', {icon: 'spinner', class: 'w-6 h-6'}) }}
+  </span>
+  <span
+      class="action-success hidden pointer-events-none" {{ stimulus_target('action-button', 'actionSuccess') }}>{{ success_text|default('success') }}
+  </span>
+  <span
+      class="action-error hidden pointer-events-none" {{ stimulus_target('action-button', 'actionError') }}>{{ error_text|default('error') }}
+  </span>
+</button>

templates/components/icons.html.twig

@@ -49,4 +49,8 @@
     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
         <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
     </svg>
+    {% elseif icon == 'spinner' %}
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ class }}">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99" />
+    </svg>
 {% endif %}

templates/components/page-header.html.twig

@@ -1,6 +1,12 @@
 <header class="w-full flex justify-between items-center">
     <h1 class="page-title">{{ title }}</h1>
-    {% if link_url|default(false) %}
-        <a class="link border border-blue-600 rounded px-3 py-2 no-underline hover:bg-blue-50" href="{{ path(link_url) }}">{{ link_text }}</a>
+    {% if type is defined %}
+        {% if type == 'link' %}
+            <a class="link border border-blue-600 rounded px-3 py-2 no-underline hover:bg-blue-50" href="{{ path(link_url) }}">{{ link_text }}</a>
+        {% endif %}
+        {% if type == 'action' %}
+            {% include 'components/action-button.html.twig' %}
+        {% endif %}
     {% endif %}
+
 </header>

templates/invoice_entry/worklogs.html.twig

@@ -3,13 +3,21 @@
 {% block title %}{{ 'worklog.title'|trans }}{% endblock %}
 
 {% block content %}
-    <h1 class="page-title">{{ 'worklog.title'|trans }}</h1>
+    {% include 'components/page-header.html.twig' with {
+        'title': 'invoices.title'|trans,
+        'type': 'action',
+        'default_text': 'worklog.sync_worklogs'|trans,
+        'success_text': 'worklog.sync_worklogs_success'|trans,
+        'url': path('app_project_sync', {'id': invoice.project.id}),
+        'reload': true,
+    } %}
 
     {{ form_start(form) }}
     <div class="worklogs-filter-form selections" {{ stimulus_controller('choices') }}>
         {{ form_rest(form) }}
         <button class="button m-5">{{ 'invoices.search'|trans }}</button>
     </div>
+
     {{ form_end(form) }}
 
     <div {{ stimulus_controller('entry-select') }} data-submit-endpoint="{{ submitEndpoint }}">

templates/invoices/index.html.twig

@@ -6,6 +6,7 @@
 
     {% include 'components/page-header.html.twig' with {
         'title': 'invoices.title'|trans,
+        'type': 'link',
         'link_text': 'invoices.action_create_new'|trans,
         'link_url': 'app_invoices_new'
     } %}

templates/project_billing/index.html.twig

@@ -6,6 +6,7 @@
 
     {% include 'components/page-header.html.twig' with {
         'title': 'project_billing.title'|trans,
+        'type': 'link',
         'link_text': 'project_billing.action_create_new'|trans,
         'link_url': 'app_project_billing_new'
     } %}

translations/messages.da.yaml

@@ -351,6 +351,8 @@ worklog:
     only_available: "Kun \"frie\" worklogs"
     only_available_helptext: "Worklogs der ikke er i en anden fakturalinje."
     title_show: "Worklogs"
+    sync_worklogs: "Synkroniser worklogs"
+    sync_worklogs_success: "Succes - siden opdateres.."
 
 invoice_entry:
     amount: "Antal enheder"