Merge pull request #1252 from NicoPennec/feat/export-settings

[admin] Export studio configurations to CSV

src/components/pages/AssetTypes.vue

@@ -3,6 +3,8 @@
     <list-page-header
       :title="$t('asset_types.title')"
       :new-entry-label="$t('asset_types.new_asset_type')"
+      :is-exportable="isActiveTab"
+      @export-clicked="onExportClicked"
       @new-clicked="onNewClicked"
     />
 
@@ -45,6 +47,10 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+
+import csv from '@/lib/csv'
+import stringHelpers from '@/lib/string'
+
 import AssetTypeList from '@/components/lists/AssetTypeList'
 import DeleteModal from '@/components/modals/DeleteModal'
 import EditAssetTypeModal from '@/components/modals/EditAssetTypeModal'
@@ -100,12 +106,19 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['assetTypes', 'archivedAssetTypes', 'getAssetType']),
+    ...mapGetters([
+      'assetTypes',
+      'archivedAssetTypes',
+      'getAssetType',
+      'taskTypeMap'
+    ]),
 
-    assetTypesList() {
+    isActiveTab() {
       return this.activeTab === 'active'
-        ? this.assetTypes
-        : this.archivedAssetTypes
+    },
+
+    assetTypesList() {
+      return this.isActiveTab ? this.assetTypes : this.archivedAssetTypes
     },
 
     deleteText() {
@@ -162,6 +175,27 @@ export default {
         })
     },
 
+    onExportClicked() {
+      const name = stringHelpers.slugify(this.$t('asset_types.title'))
+      const headers = [
+        this.$t('main.type'),
+        this.$t('asset_types.fields.name'),
+        this.$t('asset_types.fields.task_types')
+      ]
+      const entries = [headers].concat(
+        this.assetTypes.map(assetType => [
+          assetType.type,
+          assetType.name,
+          assetType.task_types.length
+            ? assetType.task_types
+                .map(taskTypeId => this.taskTypeMap.get(taskTypeId)?.name)
+                .join(', ')
+            : this.$t('asset_types.include_all')
+        ])
+      )
+      csv.buildCsvFile(name, entries)
+    },
+
     onNewClicked() {
       this.assetTypeToEdit = {}
       this.errors.edit = false
@@ -183,7 +217,7 @@ export default {
 
   watch: {
     $route() {
-      this.activeTab = this.$route.query.tab
+      this.activeTab = this.$route.query.tab || 'active'
     }
   },
 
@@ -197,6 +231,6 @@ export default {
 
 <style lang="scss" scoped>
 .asset-type-list {
-  margin-top: 0rem;
+  margin-top: 0;
 }
 </style>

src/components/pages/Backgrounds.vue

@@ -3,6 +3,7 @@
     <list-page-header
       :title="$t('backgrounds.title')"
       :new-entry-label="$t('backgrounds.new_background')"
+      :is-exportable="false"
       @new-clicked="onNewClicked"
     />
 

src/components/pages/CustomActions.vue

@@ -3,6 +3,7 @@
     <list-page-header
       :title="$t('custom_actions.title')"
       :new-entry-label="$t('custom_actions.new_custom_action')"
+      @export-clicked="onExportClicked"
       @new-clicked="onNewClicked"
     />
 
@@ -37,6 +38,10 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+
+import csv from '@/lib/csv'
+import stringHelpers from '@/lib/string'
+
 import CustomActionList from '@/components/lists/CustomActionList'
 import DeleteModal from '@/components/modals/DeleteModal'
 import EditCustomActionModal from '@/components/modals/EditCustomActionModal'
@@ -143,6 +148,27 @@ export default {
         })
     },
 
+    onExportClicked() {
+      const name = stringHelpers.slugify(this.$t('custom_actions.title'))
+      const headers = [
+        this.$t('main.type'),
+        this.$t('custom_actions.fields.name'),
+        this.$t('custom_actions.fields.url'),
+        this.$t('custom_actions.fields.entity_type'),
+        this.$t('custom_actions.fields.is_ajax')
+      ]
+      const entries = [headers].concat(
+        this.customActions.map(customAction => [
+          customAction.type,
+          customAction.name,
+          customAction.url,
+          customAction.entity_type,
+          customAction.is_ajax
+        ])
+      )
+      csv.buildCsvFile(name, entries)
+    },
+
     onNewClicked() {
       this.customActionToEdit = {}
       this.errors.edit = false
@@ -175,5 +201,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped></style>

src/components/pages/Departments.vue

@@ -3,6 +3,8 @@
     <list-page-header
       :title="$t('departments.title')"
       :new-entry-label="$t('departments.new_departments')"
+      :is-exportable="isActiveTab"
+      @export-clicked="onExportClicked"
       @new-clicked="onNewClicked"
     />
 
@@ -45,6 +47,10 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+
+import csv from '@/lib/csv'
+import stringHelpers from '@/lib/string'
+
 import DeleteModal from '@/components/modals/DeleteModal'
 import DepartmentList from '@/components/lists/DepartmentList.vue'
 import EditDepartmentsModal from '@/components/modals/EditDepartmentsModal'
@@ -53,6 +59,7 @@ import RouteTabs from '@/components/widgets/RouteTabs'
 
 export default {
   name: 'departments',
+
   components: {
     DeleteModal,
     DepartmentList,
@@ -61,8 +68,6 @@ export default {
     RouteTabs
   },
 
-  props: {},
-
   data() {
     return {
       activeTab: 'active',
@@ -113,12 +118,12 @@ export default {
   computed: {
     ...mapGetters(['departments', 'archivedDepartments']),
 
+    isActiveTab() {
+      return this.activeTab === 'active'
+    },
+
     departmentList() {
-      if (this.activeTab === 'active') {
-        return this.departments
-      } else {
-        return this.archivedDepartments
-      }
+      return this.isActiveTab ? this.departments : this.archivedDepartments
     },
 
     deleteText() {
@@ -135,6 +140,23 @@ export default {
   methods: {
     ...mapActions(['deleteDepartment', 'loadDepartments', 'newDepartement']),
 
+    onExportClicked() {
+      const name = stringHelpers.slugify(this.$t('departments.title'))
+      const headers = [
+        this.$t('main.type'),
+        this.$t('departments.fields.name'),
+        this.$t('departments.fields.color')
+      ]
+      const entries = [headers].concat(
+        this.departments.map(department => [
+          department.type,
+          department.name,
+          department.color
+        ])
+      )
+      csv.buildCsvFile(name, entries)
+    },
+
     onNewClicked() {
       this.departmentToEdit = { name: '', color: '#999999' }
       this.modals.edit = true
@@ -189,12 +211,18 @@ export default {
     $route() {
       this.activeTab = this.$route.query.tab
     }
+  },
+
+  metaInfo() {
+    return {
+      title: `${this.$t('departments.title')} - Kitsu`
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .department-list {
-  margin-top: 0rem;
+  margin-top: 0;
 }
 </style>

src/components/pages/StatusAutomations.vue

@@ -3,6 +3,8 @@
     <list-page-header
       :title="$t('status_automations.title')"
       :new-entry-label="$t('status_automations.new_status_automation')"
+      :is-exportable="isActiveTab"
+      @export-clicked="onExportClicked"
       @new-clicked="onNewClicked"
     />
 
@@ -46,6 +48,10 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex'
+
+import csv from '@/lib/csv'
+import stringHelpers from '@/lib/string'
+
 import DeleteModal from '@/components/modals/DeleteModal'
 import EditStatusAutomationModal from '@/components/modals/EditStatusAutomationModal'
 import ListPageHeader from '@/components/widgets/ListPageHeader'
@@ -96,14 +102,21 @@ export default {
   },
 
   computed: {
-    ...mapGetters(['statusAutomations', 'archivedStatusAutomations']),
+    ...mapGetters([
+      'statusAutomations',
+      'archivedStatusAutomations',
+      'taskStatusMap',
+      'taskTypeMap'
+    ]),
+
+    isActiveTab() {
+      return this.activeTab === 'active'
+    },
 
     statusAutomationsList() {
-      if (this.activeTab === 'active') {
-        return this.statusAutomations
-      } else {
-        return this.archivedStatusAutomations
-      }
+      return this.isActiveTab
+        ? this.statusAutomations
+        : this.archivedStatusAutomations
     },
 
     deleteText() {
@@ -175,6 +188,37 @@ export default {
         })
     },
 
+    onExportClicked() {
+      const name = stringHelpers.slugify(this.$t('status_automations.title'))
+      const headers = [
+        this.$t('main.type'),
+        this.$t('status_automations.fields.entity_type'),
+        this.$t('status_automations.fields.in_task_type'),
+        this.$t('status_automations.fields.in_task_status'),
+        this.$t('status_automations.fields.out_field_type'),
+        this.$t('status_automations.fields.out_task_type'),
+        this.$t('status_automations.fields.out_task_status')
+      ]
+      const entries = [headers].concat(
+        this.statusAutomations.map(statusAutomation => [
+          statusAutomation.type,
+          statusAutomation.entity_type,
+          this.taskTypeMap.get(statusAutomation.in_task_type_id)?.name,
+          this.taskStatusMap.get(statusAutomation.in_task_status_id)
+            ?.short_name,
+          statusAutomation.out_field_type === 'ready_for'
+            ? this.$t('status_automations.change_ready_for')
+            : this.$t('status_automations.change_status'),
+          this.taskTypeMap.get(statusAutomation.out_task_type_id)?.name,
+          statusAutomation.out_field_type === 'status'
+            ? this.taskStatusMap.get(statusAutomation.out_task_status_id)
+                ?.short_name
+            : undefined
+        ])
+      )
+      csv.buildCsvFile(name, entries)
+    },
+
     onNewClicked() {
       this.statusAutomationToEdit = {}
       this.errors.edit = false
@@ -196,8 +240,7 @@ export default {
 
   watch: {
     $route() {
-      this.handleModalsDisplay()
-      this.activeTab = this.$route.query.tab
+      this.activeTab = this.$route.query.tab || 'active'
     }
   },
 
@@ -211,6 +254,6 @@ export default {
 
 <style lang="scss" scoped>
 .status-automation-list {
-  margin-top: 0rem;
+  margin-top: 0;
 }
 </style>