support always showing transaction pictures in transaction edit page for mobile version

src/views/mobile/settings/PageSettingsPage.vue

@@ -61,10 +61,16 @@
                                            v-model="autoSaveTransactionDraft">
                 </list-item-selection-popup>
             </f7-list-item>
+
             <f7-list-item>
                 <span>{{ tt('Automatically Add Geolocation') }}</span>
                 <f7-toggle :checked="isAutoGetCurrentGeoLocation" @toggle:change="isAutoGetCurrentGeoLocation = $event"></f7-toggle>
             </f7-list-item>
+
+            <f7-list-item>
+                <span>{{ tt('Always Show Transaction Pictures') }}</span>
+                <f7-toggle :checked="alwaysShowTransactionPicturesInMobileTransactionEditPage" @toggle:change="alwaysShowTransactionPicturesInMobileTransactionEditPage = $event"></f7-toggle>
+            </f7-list-item>
         </f7-list>
 
         <f7-block-title>{{ tt('Exchange Rates Data Page') }}</f7-block-title>
@@ -92,11 +98,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 import { useAppSettingPageBase } from '@/views/base/settings/AppSettingsPageBase.ts';
 
+import { useSettingsStore } from '@/stores/setting.ts';
+
+import { findNameByValue, findDisplayNameByType } from '@/lib/common.ts';
+
 const { tt } = useI18n();
 const {
     allTimezoneTypesUsedForStatistics,
@@ -111,9 +121,14 @@ const {
     currencySortByInExchangeRatesPage
 } = useAppSettingPageBase();
 
-import { findNameByValue, findDisplayNameByType } from '@/lib/common.ts';
+const settingsStore = useSettingsStore();
 
 const showTimezoneUsedForStatisticsInHomePagePopup = ref<boolean>(false);
 const showAutoSaveTransactionDraftPopup = ref<boolean>(false);
 const showCurrencySortByInExchangeRatesPagePopup = ref<boolean>(false);
+
+const alwaysShowTransactionPicturesInMobileTransactionEditPage = computed<boolean>({
+    get: () => settingsStore.appSettings.alwaysShowTransactionPicturesInMobileTransactionEditPage,
+    set: (value) => settingsStore.setAlwaysShowTransactionPicturesInMobileTransactionEditPage(value)
+});
 </script>

src/views/mobile/transactions/EditPage.vue

@@ -620,7 +620,9 @@ const showScheduledStartDateSheet = ref<boolean>(false);
 const showScheduledEndDateSheet = ref<boolean>(false);
 const showGeoLocationMapSheet = ref<boolean>(false);
 const showTransactionTagSheet = ref<boolean>(false);
-const showTransactionPictures = ref<boolean>(false);
+const showTransactionPictures = ref<boolean>(pageTypeAndMode?.type === TransactionEditPageType.Transaction
+    && (pageTypeAndMode?.mode === TransactionEditPageMode.Add || pageTypeAndMode?.mode === TransactionEditPageMode.Edit)
+    && settingsStore.appSettings.alwaysShowTransactionPicturesInMobileTransactionEditPage);
 
 const isDarkMode = computed<boolean>(() => environmentsStore.framework7DarkMode || false);