feat(import-export): add settings and excluded dependencies to the export

Author: VChet

src/assets/global.scss

@@ -260,8 +260,8 @@ dialog {
   &.invalid {
     border-color: var(--negative);
   }
-  > * {
-    padding: 1.5rem;
+  > *:not(header) {
+    margin: 1.5rem;
   }
   > header {
     display: flex;

src/components/header/import-export.vue

@@ -18,10 +18,7 @@
         Update app
       </button>
     </div>
-    <div>
-      <import-export :no-data="isEmpty" />
-      <add-repo class="main-header__block-button" />
-    </div>
+    <add-repo class="main-header__block-button" />
   </header>
 </template>
 <script setup lang="ts">
@@ -37,7 +34,6 @@ import AboutModal from "../modals/about-modal.vue";
 import AddRepo from "../modals/add-repo.vue";
 import SettingsModal from "../modals/settings-modal.vue";
 import HeaderSummary from "./header-summary.vue";
-import ImportExport from "./import-export.vue";
 
 const { isEmpty, updateRepositories } = useRepositoriesStore();
 const { updateLatestVersions } = useLatestVersionsStore();

src/components/header/main-header.vue

@@ -0,0 +1,71 @@
+<template>
+  <section class="import-export">
+    <button title="export repositories" type="button" @click="exportSettings">
+      <icon-download />
+      Export settings
+    </button>
+    <button title="import repositories" type="button" @click="importFile()">
+      <icon-upload v-if="!isImporting" />
+      <icon-loader v-else :model-value="true" />
+      Import settings
+    </button>
+  </section>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+import { useFileDialog, whenever } from "@vueuse/core";
+import { IconDownload, IconUpload } from "@tabler/icons-vue";
+import dayjs from "dayjs";
+import { isExportedData, type ExportedData } from "@/helpers/export";
+import { downloadFile, readFile } from "@/helpers/file";
+import { isValidJSON } from "@/helpers/validate";
+import { useExcludedDependenciesStore } from "@/store/excluded-dependencies";
+import { useRepositoriesStore } from "@/store/repositories";
+import { useSettingsStore } from "@/store/settings";
+import IconLoader from "./icon-loader.vue";
+
+const { importRepositories, exportRepositories } = useRepositoriesStore();
+const { settings, importSettings } = useSettingsStore();
+const { excludedDependencies, importExcludedDependencies } = useExcludedDependenciesStore();
+
+// Import
+const isImporting = ref<boolean>(false);
+const { files, open: importFile } = useFileDialog({ multiple: false, reset: true, accept: "application/json" });
+whenever(files, async ({ 0: payload }) => {
+  try {
+    isImporting.value = true;
+
+    const content = await readFile(payload).then(String);
+    if (!isValidJSON(content)) throw new Error("Invalid JSON");
+    const parsedData = JSON.parse(content);
+    if (!isExportedData(parsedData)) throw new Error("Invalid import data");
+
+    importSettings(parsedData.settings);
+    if (parsedData.excludedDependencies.length) { importExcludedDependencies(parsedData.excludedDependencies); }
+    if (parsedData.repositories.length) { await importRepositories(parsedData.repositories); }
+  } finally {
+    isImporting.value = false;
+  }
+});
+
+// Export
+function exportSettings(): void {
+  const fileName = `github-metrics-${dayjs().format("YYYY-MM-DD")}.json`;
+  const payload: ExportedData = {
+    settings: settings.value,
+    excludedDependencies: [...excludedDependencies.value.values()],
+    repositories: exportRepositories()
+  };
+  downloadFile(JSON.stringify(payload), fileName, "application/json");
+}
+</script>
+<style lang="scss">
+.import-export {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+  @media (width <= 600px) {
+    grid-template-columns: 1fr;
+  }
+}
+</style>

src/components/import-export.vue

@@ -11,6 +11,7 @@
           <icon-x />
         </button>
       </header>
+      <import-export />
       <form class="settings__form" @submit.prevent="update">
         <fieldset>
           <legend>Interface</legend>
@@ -66,6 +67,7 @@ import { useDialog } from "@/composable/useDialog";
 import { deepCopy } from "@/helpers/object";
 import { fetchCurrentUser, setAuthToken } from "@/service/octokit";
 import { useSettingsStore } from "@/store/settings";
+import ImportExport from "@/components/import-export.vue";
 import InputSelect from "@/components/input-select.vue";
 
 const themes = [
@@ -80,6 +82,7 @@ const { settings } = useSettingsStore();
 const dialogRef = useTemplateRef("dialogElement");
 const { open, close } = useDialog(dialogRef);
 const form = reactive(deepCopy(settings.value));
+watch(settings, (value) => { Object.assign(form, value); }, { deep: true });
 
 async function getUsername(): Promise<void> {
   const user = await fetchCurrentUser();

src/components/modals/settings-modal.vue

@@ -0,0 +1,18 @@
+import { isObject } from "@vueuse/core";
+import type { Repository } from "@/composable/useRepo";
+import type { SettingsStore } from "@/store/settings";
+
+export interface ExportedData {
+  settings: SettingsStore
+  excludedDependencies: string[]
+  repositories: ExportedRepository[]
+}
+
+export function isExportedData(data: unknown): data is ExportedData {
+  return isObject(data) && "settings" in data && "excludedDependencies" in data && "repositories" in data;
+}
+
+export type ExportedRepository = Pick<Repository, "id" | "full_name" | "integrations">;
+export function isExportedRepository(data: unknown): data is ExportedRepository {
+  return isObject(data) && "id" in data && "full_name" in data && "integrations" in data;
+}

src/helpers/export.ts

@@ -13,8 +13,13 @@ export const useExcludedDependenciesStore = createSharedComposable(() => {
     excludedDependencies.value.delete(dep);
   }
 
+  function importExcludedDependencies(deps: string[]): void {
+    excludedDependencies.value = new Set(deps);
+  }
+
   return {
     excludedDependencies,
+    importExcludedDependencies,
     hideDependency,
     showDependency
   };

src/store/excluded-dependencies.ts

@@ -1,6 +1,7 @@
 import { computed } from "vue";
-import { createSharedComposable, isObject, useLocalStorage } from "@vueuse/core";
+import { createSharedComposable, useLocalStorage } from "@vueuse/core";
 import dayjs from "dayjs";
+import { isExportedRepository, type ExportedRepository } from "@/helpers/export";
 import { fetchRepo, fetchRepositoryFiles, fetchRepositoryPackages, fetchRepositoryWorkflows } from "@/service/octokit";
 import type { Repository } from "@/composable/useRepo";
 
@@ -9,11 +10,6 @@ interface RepositoriesStore {
   data: Repository[]
 };
 
-export type ExportedRepository = Pick<Repository, "id" | "full_name" | "integrations">;
-export function isExportedRepository(data: unknown): data is ExportedRepository {
-  return isObject(data) && "id" in data && "full_name" in data && "integrations" in data;
-}
-
 const DEFAULT_STORE: RepositoriesStore = {
   lastUpdate: dayjs().toISOString(),
   data: []
@@ -49,7 +45,10 @@ export const useRepositoriesStore = createSharedComposable(() => {
     return repositories.value.some(({ id: repoId }) => repoId === id);
   }
 
-  async function addRepository(fullName: Repository["full_name"], integrations: Repository["integrations"] = {}): Promise<void> {
+  async function addRepository(
+    fullName: Repository["full_name"],
+    integrations: Repository["integrations"] = {}
+  ): Promise<void> {
     const repo = await fetchRepo(fullName);
     if (!repo) throw new Error("Repo not found");
     if (isRepoExists(repo.id)) return updateRepository(fullName, integrations);
@@ -65,7 +64,10 @@ export const useRepositoriesStore = createSharedComposable(() => {
     repositories.value = repositories.value.filter((repo) => repo.id !== id);
   }
 
-  async function updateRepository(fullName: Repository["full_name"], integrations: Repository["integrations"]): Promise<void> {
+  async function updateRepository(
+    fullName: Repository["full_name"],
+    integrations: Repository["integrations"]
+  ): Promise<void> {
     const repo = await fetchRepo(fullName);
     if (!repo) throw new Error("Repo not found");
 
@@ -85,17 +87,20 @@ export const useRepositoriesStore = createSharedComposable(() => {
   }
 
   async function importRepositories(payload: ExportedRepository[]): Promise<void> {
-    const fetchPromises = payload.map(({ id, full_name, integrations }) => isRepoExists(id) ?
-      updateRepository(full_name, integrations) :
-      addRepository(full_name, integrations)
-    );
+    const fetchPromises = payload.reduce((acc: Promise<void>[], repo) => {
+      if (isExportedRepository(repo)) {
+        const { id, full_name, integrations } = repo;
+        const request = isRepoExists(id) ?
+          updateRepository(full_name, integrations) :
+          addRepository(full_name, integrations);
+        acc.push(request);
+      }
+      return acc;
+    }, []);
     await Promise.all(fetchPromises);
   }
-  function exportRepositories(): string {
-    const repos: ExportedRepository[] = repositories.value.map(
-      ({ id, full_name, integrations }) => ({ id, full_name, integrations })
-    );
-    return JSON.stringify(repos, null, 2);
+  function exportRepositories(): ExportedRepository[] {
+    return repositories.value.map(({ id, full_name, integrations }) => ({ id, full_name, integrations }));
   }
 
   function updateCheck() {

src/store/repositories.ts

@@ -2,7 +2,7 @@ import { createSharedComposable, useLocalStorage } from "@vueuse/core";
 import { useRegisterSW } from "virtual:pwa-register/vue";
 
 type Theme = "github" | "blue" | "beige" | "green" | "red";
-interface SettingsStore {
+export interface SettingsStore {
   authToken: string
   username: string
   displayOwner: boolean
@@ -23,9 +23,14 @@ export const useSettingsStore = createSharedComposable(() => {
 
   const { needRefresh, updateServiceWorker } = useRegisterSW({ immediate: true });
 
+  function importSettings(newSettings: Partial<SettingsStore>): void {
+    Object.assign(settings.value, newSettings);
+  }
+
   return {
     settings,
     needRefresh,
-    updateServiceWorker
+    updateServiceWorker,
+    importSettings
   };
 });