mapping functionality from "master" to "vue3"

Author: omalk98

frontend/src/components/prompts/Info.vue

@@ -38,43 +38,61 @@
 
       <template v-if="!dir">
         <p>
-          <strong>MD5: </strong><code><a
+          <strong>MD5: </strong
+          ><code
+            ><a
               @click="checksum($event, 'md5')"
               @keypress.enter="checksum($event, 'md5')"
               tabindex="2"
               >{{ $t("prompts.show") }}</a
-            ></code>
+            ></code
+          >
         </p>
         <p>
-          <strong>SHA1: </strong><code><a
+          <strong>SHA1: </strong
+          ><code
+            ><a
               @click="checksum($event, 'sha1')"
               @keypress.enter="checksum($event, 'sha1')"
               tabindex="3"
               >{{ $t("prompts.show") }}</a
-            ></code>
+            ></code
+          >
         </p>
         <p>
-          <strong>SHA256: </strong><code><a
+          <strong>SHA256: </strong
+          ><code
+            ><a
               @click="checksum($event, 'sha256')"
               @keypress.enter="checksum($event, 'sha256')"
               tabindex="4"
               >{{ $t("prompts.show") }}</a
-            ></code>
+            ></code
+          >
         </p>
         <p>
-          <strong>SHA512: </strong><code><a
+          <strong>SHA512: </strong
+          ><code
+            ><a
               @click="checksum($event, 'sha512')"
               @keypress.enter="checksum($event, 'sha512')"
               tabindex="5"
               >{{ $t("prompts.show") }}</a
-            ></code>
+            ></code
+          >
         </p>
       </template>
     </div>
 
     <div class="card-action">
-      <button id="focus-prompt" type="submit" @click="closeHovers" class="button button--flat"
-        :aria-label="$t('buttons.ok')" :title="$t('buttons.ok')">
+      <button
+        id="focus-prompt"
+        type="submit"
+        @click="closeHovers"
+        class="button button--flat"
+        :aria-label="$t('buttons.ok')"
+        :title="$t('buttons.ok')"
+      >
         {{ $t("buttons.ok") }}
       </button>
     </div>

frontend/src/i18n/ar.json

@@ -40,7 +40,8 @@
     "toggleSidebar": "تبديل الشريط الجانبي",
     "update": "تحديث",
     "upload": "رفع",
-    "openFile": "فتح الملف"
+    "openFile": "فتح الملف",
+    "discardChanges": "إلغاء التغييرات"
   },
   "download": {
     "downloadFile": "تحميل الملف",
@@ -164,7 +165,8 @@
     "uploadFiles": "يتم رفع {files} ملفات.",
     "uploadMessage": "إختر الملفات التي تريد رفعها.",
     "optionalPassword": "كلمة مرور إختيارية",
-    "resolution": "الدقة"
+    "resolution": "الدقة",
+    "discardEditorChanges": "هل تريد بالتأكيد إلغاء التغييرات؟"
   },
   "search": {
     "images": "الصور",

frontend/src/views/files/FileListing.vue

@@ -205,10 +205,10 @@
           </div>
         </div>
 
-        <h2 v-if="fileStore.req?.numDirs ?? 0 > 0">
+        <h2 v-if="fileStore.req?.numDirs ?? false">
           {{ t("files.folders") }}
         </h2>
-        <div v-if="fileStore.req?.numDirs ?? 0 > 0">
+        <div v-if="fileStore.req?.numDirs ?? false">
           <item
             v-for="item in dirs"
             :key="base64(item.name)"
@@ -224,8 +224,8 @@
           </item>
         </div>
 
-        <h2 v-if="fileStore.req?.numFiles ?? 0 > 0">{{ t("files.files") }}</h2>
-        <div v-if="fileStore.req?.numFiles ?? 0 > 0">
+        <h2 v-if="fileStore.req?.numFiles ?? false">{{ t("files.files") }}</h2>
+        <div v-if="fileStore.req?.numFiles ?? false">
           <item
             v-for="item in files"
             :key="base64(item.name)"
@@ -433,16 +433,25 @@ const isMobile = computed(() => {
 
 watch(req, () => {
   // Reset the show value
-  showLimit.value = 50;
+  if (
+    window.sessionStorage.getItem("listFrozen") !== "true" &&
+    window.sessionStorage.getItem("modified") !== "true"
+  ) {
+    showLimit.value = 50;
 
-  nextTick(() => {
-    // Ensures that the listing is displayed
-    // How much every listing item affects the window height
-    setItemWeight();
+    nextTick(() => {
+      // Ensures that the listing is displayed
+      // How much every listing item affects the window height
+      setItemWeight();
 
-    // Fill and fit the window with listing items
-    fillWindow(true);
-  });
+      // Fill and fit the window with listing items
+      fillWindow(true);
+    });
+  }
+  if (req.value?.isDir) {
+    window.sessionStorage.setItem("listFrozen", "false");
+    window.sessionStorage.setItem("modified", "false");
+  }
 });
 
 onMounted(() => {