Fix issue LayoutGrid return error when layout is empty

Fix issue LayoutGrid and Improve UX of Save sub-layout.

assets/vendor/manager/src/components/helpers/LayoutGrid.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { onMounted, ref } from 'vue';
 const emit = defineEmits(['update:closeElement', 'update:saveElement']);
 const props = defineProps(['element']);
 const grids = [
@@ -15,6 +16,13 @@ const grids = [
     [2, 2, 2, 2, 2, 2]
 ]
 
+const id = ref(null)
+onMounted(() => {
+    if (typeof props.element !== 'undefined') {
+        id.value = props.element.id;
+    }
+})
+
 function chooseGrid(grid) {
     if (grid[0] === 0) {
         let resp = window.prompt("Please enter custom grid size (eg. 2+3+6+1)");
@@ -25,12 +33,12 @@ function chooseGrid(grid) {
 }
 </script>
 <template>
-    <div class="astroid-modal modal d-block" tabindex="-1" @click.self="emit('update:closeElement', props.element.id)">
+    <div class="astroid-modal modal d-block" tabindex="-1" @click.self="emit('update:closeElement', id)">
         <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
             <div class="modal-content">
                 <div class="modal-header">
                     <h5 class="modal-title">Select a Grid Layout</h5>
-                    <button type="button" class="btn-close" aria-label="Close" @click="emit('update:closeElement', props.element.id)"></button>
+                    <button type="button" class="btn-close" aria-label="Close" @click="emit('update:closeElement', id)"></button>
                 </div>
 
                 <div class="modal-body">

assets/vendor/manager/src/components/helpers/SubLayouts.vue

@@ -103,7 +103,12 @@ function onFileChange(e) {
 
 function saveLayout(action = 'save') {
     if (formInfo.title === '') {
-        document.getElementById(props.field.input.id+`_saveLayout_opendialog`).click();
+        if (action === 'save_dialog') {
+            alert('You have to input the Title')
+            _formTitle.value.focus();
+        } else {
+            document.getElementById(props.field.input.id+`_saveLayout_opendialog`).click();
+        }
         return true;
     }
     let url = constant.site_url+"administrator/index.php?option=com_ajax&astroid=savelayout&ts="+Date.now();
@@ -137,7 +142,7 @@ function saveLayout(action = 'save') {
             toast_msg.body = 'You can use it to contribute to your layout builder.';
             toast_msg.color = 'green';
             save_disabled.value = false;
-            if (action === 'save') {
+            if (action !== 'apply') {
                 editItem.value = false;
                 resetValues();
                 callAjax();
@@ -230,7 +235,7 @@ function callAjax() {
         console.log(error);
     });
 }
-
+const _formTitle = ref(null);
 const checkAll = ref(false);
 function checkAllList() {
     checklist.value = [];
@@ -245,17 +250,15 @@ function checkAllList() {
     <div>
         <div class="as-sublayouts" v-if="editItem === false">
             <div v-if="items.length === 0">
-                <div class="alert alert-info" role="alert">
-                    There are no layouts in this template.
-                </div>
+                <div class="alert alert-info" role="alert">{{ language.TPL_ASTROID_NO_LAYOUT_INFO }}</div>
             </div>
             <table v-else class="table table-hover">
                 <thead>
                     <tr>
                         <th scope="col" width="1%"><input class="form-check-input" type="checkbox" value="" v-model="checkAll" @click="checkAllList"></th>
-                        <th scope="col">Title</th>
-                        <th scope="col">Description</th>
-                        <th scope="col" width="180">Thumbnail</th>
+                        <th scope="col">{{ language.JGLOBAL_TITLE }}</th>
+                        <th scope="col">{{ language.JGLOBAL_DESCRIPTION }}</th>
+                        <th scope="col" width="180">{{ language.TPL_ASTROID_THUMBNAIL }}</th>
                     </tr>
                 </thead>
                 <tbody>
@@ -268,8 +271,8 @@ function checkAllList() {
                 </tbody>
             </table>
             <div class="as-sublayout-bottom-toolbox sticky-bottom bg-body-tertiary px-4 py-3 border border-bottom-0 rounded-top-3 mt-5">
-                <a href="#" @click.prevent="editLayout()" class="btn btn-sm btn-as btn-as-primary me-2">New Layout</a>
-                <a href="#" @click.prevent="deleteLayout()" class="btn btn-sm btn-as btn-outline-danger">Delete Layout</a>
+                <a href="#" @click.prevent="editLayout()" class="btn btn-sm btn-as btn-as-primary me-2">{{ language.TPL_ASTROID_NEW_LAYOUT }}</a>
+                <a href="#" @click.prevent="deleteLayout()" class="btn btn-sm btn-as btn-outline-danger">{{ language.TPL_ASTROID_DELETE_LAYOUT }}</a>
             </div>
         </div>
         <div v-else class="astroid-layout px-2">
@@ -285,42 +288,42 @@ function checkAllList() {
                 <div class="modal-dialog modal-dialog-centered">
                     <div class="modal-content">
                         <div class="modal-header">
-                            <h3 class="modal-title fs-5" :id="props.field.input.id+`_saveLayoutLabel`">Layout Information</h3>
+                            <h3 class="modal-title fs-5" :id="props.field.input.id+`_saveLayoutLabel`">{{ language.TPL_ASTROID_LAYOUT_INFO }}</h3>
                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" :id="props.field.input.id+`_saveLayout_close`"></button>
                         </div>
                         <div class="modal-body">
                             <div>
                                 <div class="mb-3">
-                                    <label :for="props.field.input.id+`_saveLayout_title`" class="form-label">Title</label>
-                                    <input type="text" v-model="formInfo.title" class="form-control" :id="props.field.input.id+`_saveLayout_title`" placeholder="Title" required>
+                                    <label :for="props.field.input.id+`_saveLayout_title`" class="form-label">{{ language.JGLOBAL_TITLE }}</label>
+                                    <input type="text" v-model="formInfo.title" class="form-control" :id="props.field.input.id+`_saveLayout_title`" ref="_formTitle" placeholder="Title" required>
                                 </div>
                                 <div class="mb-3">
-                                    <label :for="props.field.input.id+`_saveLayout_desc`" class="form-label">Description</label>
+                                    <label :for="props.field.input.id+`_saveLayout_desc`" class="form-label">{{ language.JGLOBAL_DESCRIPTION }}</label>
                                     <textarea class="form-control" v-model="formInfo.desc" :id="props.field.input.id+`_saveLayout_desc`" rows="3"></textarea>
                                 </div>
                                 <div v-if="formInfo.thumbnail !== ``" class="mb-3">
                                     <img class="img-thumbnail" :src="constant.site_url + `/media/templates/site/` + constant.tpl_template_name + `/images/layouts/` + formInfo.thumbnail" :alt="formInfo.title">
                                 </div>
                                 <div class="mb-3">
-                                    <label :for="props.field.input.id+`_saveLayout_thumbnail`" class="form-label">Select your thumbnail</label>
+                                    <label :for="props.field.input.id+`_saveLayout_thumbnail`" class="form-label">{{ language.TPL_ASTROID_SELECT_YOUR_THUMBNAIL }}</label>
                                     <input class="form-control" type="file" @change="onFileChange" :id="props.field.input.id+`_saveLayout_thumbnail`">
                                 </div>
                             </div>
                         </div>
                         <div class="modal-footer">
                             <button v-if="formInfo.name !== ``" type="button" class="btn btn-sm btn-as btn-primary btn-as-primary" data-bs-dismiss="modal" aria-label="Close" :disabled="save_disabled" v-html="language.JAPPLY"></button>
                             <button v-if="formInfo.name === ``" type="button" class="btn btn-sm btn-as btn-as-light" data-bs-dismiss="modal" aria-label="Close" :disabled="save_disabled">{{ language.ASTROID_BACK }}</button>
-                            <button v-if="formInfo.name === ``" type="button" class="btn btn-sm btn-as btn-primary btn-as-primary" @click.prevent="saveLayout()" :disabled="save_disabled" v-html="language.JSAVE"></button>
+                            <button v-if="formInfo.name === ``" type="button" class="btn btn-sm btn-as btn-primary btn-as-primary" @click.prevent="saveLayout('save_dialog')" :disabled="save_disabled" v-html="language.JSAVE"></button>
                         </div>
                     </div>
                 </div>
             </div>
             <div class="as-sublayout-bottom-toolbox sticky-bottom bg-body-tertiary px-4 py-3 border border-bottom-0 rounded-top-3 mt-5">
                 <button :id="props.field.input.id+`_saveLayout_opendialog`" class="d-none" type="button" data-bs-toggle="modal" :data-bs-target="`#`+props.field.input.id+`_saveLayout`">Open Dialog</button>
                 <a v-if="formInfo.name !== ``" href="#" @click.prevent="saveLayout('apply')" class="btn btn-sm btn-as btn-as-primary me-2" :disabled="save_disabled">{{ language.JAPPLY }}</a>
-                <a href="#" @click.prevent="saveLayout()" class="btn btn-sm btn-as btn-primary me-2" :disabled="save_disabled" v-html="language.JSAVE"></a>
-                <a v-if="formInfo.name !== ``" href="#" @click.prevent="" data-bs-toggle="modal" :data-bs-target="`#`+props.field.input.id+`_saveLayout`" class="btn btn-sm btn-as btn-as-light me-2" :disabled="save_disabled">Edit Information</a>
-                <a v-if="props.type === `article_layouts` && formInfo.name !== `default`" href="#" @click.prevent="loadDefault()" class="btn btn-sm btn-as btn-as-light me-2" :disabled="save_disabled">Load Default Settings</a>
+                <a href="#" @click.prevent="saveLayout('save')" class="btn btn-sm btn-as btn-primary me-2" :disabled="save_disabled" v-html="language.JSAVE"></a>
+                <a v-if="formInfo.name !== ``" href="#" @click.prevent="" data-bs-toggle="modal" :data-bs-target="`#`+props.field.input.id+`_saveLayout`" class="btn btn-sm btn-as btn-as-light me-2" :disabled="save_disabled">{{ language.TPL_ASTROID_EDIT_INFO }}</a>
+                <a v-if="props.type === `article_layouts` && formInfo.name !== `default`" href="#" @click.prevent="loadDefault()" class="btn btn-sm btn-as btn-as-light me-2" :disabled="save_disabled">{{ language.TPL_ASTROID_LOAD_DEFAULT_SETTINGS }}</a>
                 <a href="#" @click.prevent="cancelLayout()" class="btn btn-sm btn-as btn-as-light" :disabled="save_disabled">{{ language.JCANCEL }}</a>
             </div>
         </div>

framework/library/astroid/Helper/Constants.php

@@ -92,10 +92,20 @@ public static function manager_configs() : array
         'TPL_ASTROID_BACK_TO_JOOMLA',
         'ASTROID_TEMPLATE_CLOSE',
         'JGLOBAL_CONFIRM_DELETE',
+        'JGLOBAL_TITLE',
+        'JGLOBAL_DESCRIPTION',
         'JAPPLY',
         'JSAVE',
         'JCANCEL',
-        'ASTROID_BACK'
+        'ASTROID_BACK',
+        'TPL_ASTROID_LAYOUT_INFO',
+        'TPL_ASTROID_EDIT_INFO',
+        'TPL_ASTROID_NO_LAYOUT_INFO',
+        'TPL_ASTROID_LOAD_DEFAULT_SETTINGS',
+        'TPL_ASTROID_SELECT_YOUR_THUMBNAIL',
+        'TPL_ASTROID_THUMBNAIL',
+        'TPL_ASTROID_NEW_LAYOUT',
+        'TPL_ASTROID_DELETE_LAYOUT'
     ];
 
     public static $animations = [

language/en-GB/en-GB.astroid.ini

@@ -107,6 +107,14 @@ TPL_ASTROID_PRESET_DROPDOWN="Load Preset"
 TPL_ASTROID_PRESETS_MAIN_TITLE_LABEL="Preset Profiles"
 TPL_ASTROID_PRESETS_LABEL="Preset Profiles"
 TPL_ASTROID_PRESETS_DESC="Choose Preset to load configuration"
+TPL_ASTROID_NO_LAYOUT_INFO="There are no layouts in this template."
+TPL_ASTROID_LAYOUT_INFO="Layout Information"
+TPL_ASTROID_NEW_LAYOUT="New Layout"
+TPL_ASTROID_DELETE_LAYOUT="Delete Layout"
+TPL_ASTROID_EDIT_INFO="Edit Information"
+TPL_ASTROID_LOAD_DEFAULT_SETTINGS="Load Default Settings"
+TPL_ASTROID_SELECT_YOUR_THUMBNAIL="Select your thumbnail"
+TPL_ASTROID_THUMBNAIL="Thumbnail"
 
 ; Tab Headings
 ASTROID_OPTIONS_BASIC="Basic"