feat(client): improve page versions

Author: gustavotoyota

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/VersionHistory.vue

@@ -21,63 +21,84 @@
         </q-item-section>
       </q-item>
 
-      <div
+      <q-item
         v-for="snapshotInfo of snapshotInfos"
         :key="snapshotInfo.id"
-        class="snapshot"
+        clickable
+        @click.capture="
+          (event) => selectSnapshot(snapshotInfo.id, event as any)
+        "
       >
-        <q-item
-          clickable
-          @click="restoreVersion(snapshotInfo.id)"
+        <q-item-section
+          avatar
+          style="padding-right: 4px"
         >
-          <q-item-section>
-            <q-item-label>{{
-              Intl.DateTimeFormat('en', {
-                dateStyle: 'medium',
-                timeStyle: 'short',
-              }).format(snapshotInfo.creationDate)
-            }}</q-item-label>
-
-            <q-item-label
-              caption
-              style="display: flex"
-            >
-              <div style="flex: 1">
-                {{
-                  groupMemberNames()(
-                    `${page.react.groupId}:${snapshotInfo.authorId}`,
-                  ).get().text
-                }}
-              </div>
-
-              <Gap style="width: 20px" />
-
-              <div>{{ capitalize(snapshotInfo.type) }}</div>
-            </q-item-label>
-          </q-item-section>
-        </q-item>
-
-        <DeepBtn
-          class="delete-btn"
-          size="12px"
-          icon="mdi-close"
-          round
-          flat
-          title="Delete page version"
-          @click="deleteSnapshot(snapshotInfo.id)"
-        />
-      </div>
+          <Checkbox
+            :model-value="finalSelectedSnapshotIds.includes(snapshotInfo.id)"
+          />
+        </q-item-section>
+
+        <q-item-section>
+          <q-item-label>{{
+            Intl.DateTimeFormat('en', {
+              dateStyle: 'medium',
+              timeStyle: 'short',
+            }).format(snapshotInfo.creationDate)
+          }}</q-item-label>
+
+          <q-item-label
+            caption
+            style="display: flex"
+          >
+            <div style="flex: 1">
+              {{
+                groupMemberNames()(
+                  `${page.react.groupId}:${snapshotInfo.authorId}`,
+                ).get().text
+              }}
+            </div>
+
+            <Gap style="width: 20px" />
+
+            <div>{{ capitalize(snapshotInfo.type) }}</div>
+          </q-item-label>
+        </q-item-section>
+      </q-item>
     </q-list>
 
     <Gap style="height: 16px" />
 
+    <DeepBtn
+      label="Restore selected version"
+      icon="mdi-restore"
+      color="secondary"
+      :disable="page.react.readOnly || finalSelectedSnapshotIds.length !== 1"
+      title="Backup the current version of the page manually"
+      @click="() => restoreSnapshot(finalSelectedSnapshotIds[0])"
+    />
+
+    <Gap style="height: 12px" />
+
+    <DeepBtn
+      :label="`Delete selected version${
+        finalSelectedSnapshotIds.length > 1 ? 's' : ''
+      }`"
+      icon="mdi-trash-can"
+      color="negative"
+      :disable="page.react.readOnly || finalSelectedSnapshotIds.length === 0"
+      title="Backup the current version of the page manually"
+      @click="deleteSelectedSnapshots"
+    />
+
+    <Gap style="height: 12px" />
+
     <DeepBtn
       label="Save current version"
       icon="mdi-content-save"
       color="secondary"
       :disable="page.react.readOnly"
       title="Backup the current version of the page manually"
-      @click="saveVersion"
+      @click="saveCurrentSnapshot"
     />
   </div>
 </template>
@@ -100,7 +121,58 @@ const snapshotInfos = computed(
     page.value.realtimeCtx.hget('page-snapshots', page.value.id, 'infos') ?? [],
 );
 
-async function restoreVersion(snapshotId: string) {
+let lastSelectedSnapshotId: string;
+
+const baseSelectedSnapshotIds = ref(new Set<string>());
+
+const finalSelectedSnapshotIds = computed(() =>
+  snapshotInfos.value
+    .filter((snapshotInfo) =>
+      baseSelectedSnapshotIds.value.has(snapshotInfo.id),
+    )
+    .map((snapshotInfo) => snapshotInfo.id),
+);
+
+function selectSnapshot(snapshotId: string, event: MouseEvent) {
+  if (event.shiftKey || internals.mobileAltKey) {
+    const snapshotIds = snapshotInfos.value.map((snapshot) => snapshot.id);
+
+    const sourceSnapshotIndex = snapshotIds.indexOf(lastSelectedSnapshotId);
+    const targetSnapshotIndex = snapshotIds.indexOf(snapshotId);
+
+    if (
+      sourceSnapshotIndex >= 0 &&
+      targetSnapshotIndex >= 0 &&
+      sourceSnapshotIndex !== targetSnapshotIndex
+    ) {
+      const sign = Math.sign(targetSnapshotIndex - sourceSnapshotIndex);
+
+      const add = !baseSelectedSnapshotIds.value.has(snapshotId);
+
+      for (
+        let i = sourceSnapshotIndex;
+        i !== targetSnapshotIndex + sign;
+        i += sign
+      ) {
+        if (add) {
+          baseSelectedSnapshotIds.value.add(snapshotIds[i]);
+        } else {
+          baseSelectedSnapshotIds.value.delete(snapshotIds[i]);
+        }
+      }
+    }
+  } else {
+    if (baseSelectedSnapshotIds.value.has(snapshotId)) {
+      baseSelectedSnapshotIds.value.delete(snapshotId);
+    } else {
+      baseSelectedSnapshotIds.value.add(snapshotId);
+    }
+  }
+
+  lastSelectedSnapshotId = snapshotId;
+}
+
+async function restoreSnapshot(snapshotId: string) {
   try {
     await asyncDialog({
       title: 'Restore version',
@@ -128,7 +200,7 @@ async function restoreVersion(snapshotId: string) {
   }
 }
 
-async function saveVersion() {
+async function saveCurrentSnapshot() {
   try {
     await asyncDialog({
       title: 'Save version',
@@ -156,50 +228,43 @@ async function saveVersion() {
 }
 
 async function deleteSnapshot(snapshotId: string) {
-  try {
-    await asyncDialog({
-      title: 'Delete version',
-      message: 'Are you sure you want to delete this version?',
+  await asyncDialog({
+    title: 'Delete version',
+    message: 'Are you sure you want to delete this version?',
 
-      focus: 'cancel',
+    focus: 'cancel',
 
-      cancel: { label: 'No', flat: true, color: 'primary' },
-      ok: { label: 'Yes', flat: true, color: 'negative' },
-    });
+    cancel: { label: 'No', flat: true, color: 'primary' },
+    ok: { label: 'Yes', flat: true, color: 'negative' },
+  });
 
-    await deletePageSnapshot(page.value.id, snapshotId);
+  await deletePageSnapshot(page.value.id, snapshotId);
+}
 
-    $quasar().notify({
-      message: 'Version deleted successfully.',
-      color: 'positive',
-    });
+async function deleteSelectedSnapshots() {
+  try {
+    for (const selectedSnapshotId of finalSelectedSnapshotIds.value) {
+      await deleteSnapshot(selectedSnapshotId);
+    }
   } catch (error: any) {
     handleError(error);
   }
 }
 </script>
 
 <style scoped lang="scss">
-.snapshot {
-  position: relative;
-
-  > .delete-btn {
-    position: absolute;
-
-    top: 4px;
-    right: 10px;
+.delete-btn {
+  position: absolute;
 
-    opacity: 0;
-    transition: opacity 0.2s;
+  top: 4px;
+  right: 10px;
 
-    min-width: 24px;
-    min-height: 24px;
-    width: 24px;
-    height: 24px;
-  }
-}
+  opacity: 0;
+  transition: opacity 0.2s;
 
-.snapshot:hover > .delete-btn {
-  opacity: 1;
+  min-width: 24px;
+  min-height: 24px;
+  width: 24px;
+  height: 24px;
 }
 </style>