Expand financial administrations views.

resources/assets/v2/api/v2/model/user-group/post.js

@@ -0,0 +1,28 @@
+/*
+ * post.js
+ * Copyright (c) 2024 james@firefly-iii.org.
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+import {api} from "../../../../boot/axios";
+
+export default class Post {
+    post(submission) {
+        let url = './api/v2/user-groups';
+        return api.post(url, submission);
+    }
+}

resources/assets/v2/pages/administrations/create.js

@@ -0,0 +1,110 @@
+/*
+ * template.js
+ * Copyright (c) 2024 james@firefly-iii.org.
+ *
+ * This file is part of Firefly III (https://github.com/firefly-iii).
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero 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 Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see https://www.gnu.org/licenses/.
+ */
+
+import '../../boot/bootstrap.js';
+import dates from "../shared/dates.js";
+import Post from "../../api/v2/model/user-group/post.js";
+import i18next from "i18next";
+
+
+let administrations = function () {
+    return {
+        title: '',
+        errors: {
+            title: []
+        },
+
+        // notifications
+        notifications: {
+            error: {
+                show: false, text: '', url: '',
+            }, success: {
+                show: false, text: '', url: '',
+            }, wait: {
+                show: false, text: '',
+
+            }
+        },
+        // state of the form is stored in formState:
+        formStates: {
+            isSubmitting: false,
+            returnHereButton: false,
+            saveAsNewButton: false, // edit form only
+            resetButton: false,
+        },
+
+        // form behaviour
+        formBehaviour: {
+            formType: 'create', // or 'update'
+        },
+        changedTitle() {
+
+        },
+
+        pageProperties: {},
+        submitForm() {
+            (new Post()).post({title: this.title}).then(response => {
+                if (this.formStates.returnHereButton) {
+                    this.notifications.success.show = true;
+                    this.notifications.success.text = i18next.t('firefly.new_administration_created', {title: response.data.data.attributes.title});
+                    this.notifications.success.url = './administrations';
+                }
+                if (this.formStates.resetButton) {
+                    this.title = '';
+                }
+                if (!this.formStates.returnHereButton) {
+                    window.location.href = './administrations?user_group_id=' + parseInt(response.data.data.id) + '&message=created';
+                }
+            }).catch(error => {
+                console.error(error);
+            });
+
+        },
+        cancelForm() {
+            window.location.href = './administrations';
+        },
+        init() {
+
+        }
+    }
+}
+
+
+let comps = {administrations, dates};
+
+function loadPage() {
+    Object.keys(comps).forEach(comp => {
+        console.log(`Loading page component "${comp}"`);
+        let data = comps[comp]();
+        Alpine.data(comp, () => data);
+    });
+    Alpine.start();
+}
+
+// wait for load until bootstrapped event is received.
+document.addEventListener('firefly-iii-bootstrapped', () => {
+    console.log('Loaded through event listener.');
+    loadPage();
+});
+// or is bootstrapped before event is triggered.
+if (window.bootstrapped) {
+    console.log('Loaded through window variable.');
+    loadPage();
+}

resources/assets/v2/pages/template.js

@@ -24,6 +24,33 @@ import dates from "./shared/dates.js";
 
 let somethings = function() {
     return {
+        // notifications
+        // TODO duplicate code
+        notifications: {
+            error: {
+                show: false, text: '', url: '',
+            }, success: {
+                show: false, text: '', url: '',
+            }, wait: {
+                show: false, text: '',
+
+            }
+        },
+        // state of the form is stored in formState:
+        // TODO duplicate code
+        formStates: {
+            isSubmitting: false,
+            returnHereButton: false,
+            saveAsNewButton: false, // edit form only
+            resetButton: false,
+        },
+
+        // form behaviour
+        // TODO duplicate code
+        formBehaviour: {
+            formType: 'create', // or 'update'
+        },
+
         pageProperties: {},
         functionName() {
 

resources/assets/v2/pages/transactions/create.js

@@ -73,7 +73,8 @@ let transactions = function () {
 
         // form behaviour during transaction
         formBehaviour: {
-            formType: 'create', foreignCurrencyEnabled: true,
+            formType: 'create',
+            foreignCurrencyEnabled: true,
         },
 
         // form data (except transactions) is stored in formData

resources/lang/en_US/firefly.php

@@ -1390,6 +1390,9 @@ return [
     'administration_owner'                                => 'Administration owner: {{email}}',
     'administration_you'                                  => 'Your role: {{role}}',
     'other_users_in_admin'                                => 'Other users in this administration',
+    'administrations_create_breadcrumb' => 'Create new financial administration',
+    'basic_administration_information' => 'Basic administration information',
+    'new_administration_created' => 'New financial administration "{{title}}" has been created',
 
     // roles
     'administration_role_owner'                           => 'Owner',

resources/views/v2/administrations/create.blade.php

@@ -0,0 +1,57 @@
+@extends('layout.v2')
+@section('scripts')
+    @vite(['resources/assets/v2/pages/administrations/create.js'])
+@endsection
+@section('content')
+    <div class="app-content">
+        <!--begin::Container-->
+        <div class="container-fluid" x-data="administrations" id="form">
+            <x-messages></x-messages>
+            <div class="row mb-3">
+                <div class="col-xl-6 col-lg-6 col-md-12 col-xs-12">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title"
+                            >{{ __('firefly.basic_administration_information') }}</h3>
+                        </div>
+                        <div class="card-body">
+                            <!-- TITLE -->
+                            @include('partials.form.title')
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-3">
+                <div class="col-xl-6 col-lg-6 col-md-12 col-xs-12">
+                    <div class="card">
+                        <div class="card-header">
+                            <h3 class="card-title">
+                                {{ __('firefly.submission_options') }}
+                            </h3>
+                        </div>
+                        <div class="card-body">
+                            @include('partials.form.submission-options')
+                        </div>
+                        <div class="card-footer">
+                            <div class="row">
+                                <div class="col text-end">
+                                    <div class="btn-group">
+                                        <button @click="cancelForm()" class="btn btn-danger text-white"
+                                                :disabled="formStates.isSubmitting">
+                                            <em class="fa-solid fa-arrow-left"></em>
+                                            {{ __('firefly.cancel')  }}</button>
+                                        <button class="btn btn-primary text-white" :disabled="formStates.isSubmitting"
+                                                @click="submitForm()">
+                                            <em class="fa-regular fa-circle-check"></em>
+                                            {{ __('firefly.submit') }}</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+@endsection

resources/views/v2/administrations/index.blade.php

@@ -16,7 +16,7 @@
             </div>
             <div class="row mb-3">
                 <template x-for="(group, index) in userGroups" :key="index">
-                    <div class="col-xl-4 col-lg-4 col-sm-6 col-xs-12">
+                    <div class="col-xl-4 col-lg-4 col-sm-6 col-xs-12 mb-3">
                         <div class="card">
                             <div class="card-header">
                                 <h3 class="card-title">Administration "<span x-text="group.title"></span>"</h3>

resources/views/v2/partials/form/submission-options.blade.php

@@ -0,0 +1,29 @@
+<!-- RETURN HERE AFTER CREATE -->
+<template x-if="'create' === formBehaviour.formType">
+    <div class="form-check">
+        <input class="form-check-input" x-model="formStates.returnHereButton" type="checkbox" id="returnButton">
+        <label class="form-check-label" for="returnButton"><em class="fa-solid fa-arrow-rotate-left"></em> {{ __('firefly.create_another') }}</label>
+    </div>
+</template>
+
+<!-- RESET AFTER -->
+<template x-if="'create' === formBehaviour.formType">
+    <div class="form-check">
+        <input class="form-check-input" x-model="formStates.resetButton" type="checkbox" id="resetButton" :disabled="!formStates.returnHereButton">
+        <label class="form-check-label" for="resetButton"><em class="fa-regular fa-file"></em> {{ __('firefly.reset_after') }}</label>
+    </div>
+</template>
+<!-- RETURN HERE AFTER UPDATE -->
+<template x-if="'update' === formBehaviour.formType">
+    <div class="form-check">
+        <input class="form-check-input" x-model="formStates.returnHereButton" type="checkbox" id="returnButton">
+        <label class="form-check-label" for="returnButton"><em class="fa-solid fa-arrow-rotate-left"></em> {{ __('firefly.after_update_create_another') }}</label>
+    </div>
+</template>
+<!-- CLONE INSTEAD OF UPDATE -->
+<template x-if="'update' === formBehaviour.formType">
+    <div class="form-check">
+        <input class="form-check-input" x-model="formStates.saveAsNewButton" type="checkbox" id="saveAsNewButton">
+        <label class="form-check-label" for="saveAsNewButton">{{ __('firefly.store_as_new') }}</label>
+    </div>
+</template>

resources/views/v2/partials/form/title.blade.php

@@ -0,0 +1,19 @@
+<div class="row mb-3">
+    <label for="title" class="col-sm-1 col-form-label d-none d-sm-block">
+        <em title="{{ __('firefly.title') }}" class="fa-solid fa-font"></em>
+    </label>
+    <div class="col-sm-10">
+        <input type="text" class="form-control ac-title"
+               id="title"
+               @change="changedTitle"
+               @keyup.enter="submitForm()"
+               x-model="title"
+               :class="{'is-invalid': errors.title.length > 0, 'form-control': true}"
+               placeholder="{{ __('form.title')  }}">
+        <template x-if="errors.title.length > 0">
+            <div class="invalid-feedback"
+                 x-text="errors.title[0]">
+            </div>
+        </template>
+    </div>
+</div>