feature/editor-improvements (#289)

* pin editor buttons on scroll

* scaler scratch

* fix langauge assignment 1st pass

* set lang on navigate

* refactor/breakup router

* unify style for language selectro

* refactor/code-cleanup

* refactor/page specific components to page folder

* Fix time card layout issue

* fix timecard display

* update mobile cards / fix overflow errors

Co-authored-by: hay-kot <hay-kot@pm.me>

frontend/src/components/ImportSummaryDialog/DataTable.vue

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <v-data-table
+      dense
+      :headers="dataHeaders"
+      :items="dataSet"
+      item-key="name"
+      class="elevation-1 mt-2"
+      show-expand
+      :expanded.sync="expanded"
+      :footer-props="{
+        'items-per-page-options': [100, 200, 300, 400, -1],
+      }"
+      :items-per-page="100"
+    >
+      <template v-slot:item.status="{ item }">
+        <div :class="item.status ? 'success--text' : 'error--text'">
+          {{ item.status ? "Imported" : "Failed" }}
+        </div>
+      </template>
+
+      <template v-slot:expanded-item="{ headers, item }">
+        <td :colspan="headers.length">
+          <div class="ma-2">
+            {{ item.exception }}
+          </div>
+        </td>
+      </template>
+    </v-data-table>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    dataSet: Array,
+    dataHeaders: Array,
+  },
+  data: () => ({
+    singleExpand: false,
+    expanded: [],
+  }),
+};
+</script>
+
+<style>
+</style>

frontend/src/components/ImportSummaryDialog/index.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="text-center">
+    <v-dialog v-model="dialog" width="70%">
+      <v-card>
+        <v-app-bar dark color="primary mb-2">
+          <v-icon large left>
+            mdi-import
+          </v-icon>
+          <v-toolbar-title class="headline">
+            Import Summary
+          </v-toolbar-title>
+          <v-spacer></v-spacer>
+        </v-app-bar>
+        <v-card-text class="mb-n4">
+          <v-row>
+            <div v-for="values in allNumbers" :key="values.title">
+              <v-card-text>
+                <div>
+                  <h3>{{ values.title }}</h3>
+                </div>
+                <div class="success--text">Success: {{ values.success }}</div>
+                <div class="error--text">Failed: {{ values.failure }}</div>
+              </v-card-text>
+            </div>
+          </v-row>
+        </v-card-text>
+        <v-tabs v-model="tab">
+          <v-tab>{{ $t("general.recipes") }}</v-tab>
+          <v-tab>{{ $t("general.themes") }}</v-tab>
+          <v-tab>{{ $t("general.settings") }}</v-tab>
+          <v-tab> Pages </v-tab>
+          <v-tab>{{ $t("general.users") }}</v-tab>
+          <v-tab>{{ $t("general.groups") }}</v-tab>
+        </v-tabs>
+        <v-tabs-items v-model="tab">
+          <v-tab-item v-for="(table, index) in allTables" :key="index">
+            <v-card flat>
+              <DataTable :data-headers="importHeaders" :data-set="table" />
+            </v-card>
+          </v-tab-item>
+        </v-tabs-items>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+
+<script>
+import DataTable from "@/components/ImportSummaryDialog";
+export default {
+  components: {
+    DataTable,
+  },
+  data: () => ({
+    tab: null,
+    dialog: false,
+    recipeData: [],
+    themeData: [],
+    settingsData: [],
+    userData: [],
+    groupData: [],
+    pageData: [],
+    importHeaders: [
+      {
+        text: "Status",
+        value: "status",
+      },
+      {
+        text: "Name",
+        align: "start",
+        sortable: true,
+        value: "name",
+      },
+
+      { text: "Exception", value: "data-table-expand", align: "center" },
+    ],
+    allDataTables: [],
+  }),
+
+  computed: {
+    recipeNumbers() {
+      return this.calculateNumbers(this.$t("general.recipes"), this.recipeData);
+    },
+    settingsNumbers() {
+      return this.calculateNumbers(
+        this.$t("general.settings"),
+        this.settingsData
+      );
+    },
+    themeNumbers() {
+      return this.calculateNumbers(this.$t("general.themes"), this.themeData);
+    },
+    userNumbers() {
+      return this.calculateNumbers(this.$t("general.users"), this.userData);
+    },
+    groupNumbers() {
+      return this.calculateNumbers(this.$t("general.groups"), this.groupData);
+    },
+    pageNumbers() {
+      return this.calculateNumbers("Pages", this.pageData);
+    },
+    allNumbers() {
+      return [
+        this.recipeNumbers,
+        this.themeNumbers,
+        this.settingsNumbers,
+        this.pageNumbers,
+        this.userNumbers,
+        this.groupNumbers,
+      ];
+    },
+    allTables() {
+      return [
+        this.recipeData,
+        this.themeData,
+        this.settingsData,
+        this.pageData,
+        this.userData,
+        this.groupData,
+      ];
+    },
+  },
+
+  methods: {
+    calculateNumbers(title, list_array) {
+      if (!list_array) return;
+      let numbers = { title: title, success: 0, failure: 0 };
+      list_array.forEach(element => {
+        if (element.status) {
+          numbers.success++;
+        } else numbers.failure++;
+      });
+      return numbers;
+    },
+    open(importData) {
+      this.recipeData = importData.recipeImports;
+      this.themeData = importData.themeImports;
+      this.settingsData = importData.settingsImports;
+      this.userData = importData.userImports;
+      this.groupData = importData.groupImports;
+      this.pageData = importData.pageImports;
+      this.dialog = true;
+    },
+  },
+};
+</script>
+
+<style>
+</style>