refactor: Organize Project Structure (#1211)

* refactor: Organize Project Structure

* fix

* fix

* rm security

* fix

src/views/Profile/dialogs/ExportAvatarsListDialog.vue

@@ -0,0 +1,105 @@
+<template>
+    <el-dialog
+        :before-close="beforeDialogClose"
+        :visible.sync="isVisible"
+        :title="$t('dialog.export_own_avatars.header')"
+        width="650px"
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <el-input
+            v-model="exportAvatarsListCsv"
+            v-loading="loading"
+            type="textarea"
+            size="mini"
+            rows="15"
+            resize="none"
+            readonly
+            style="margin-top: 15px"
+            @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+    </el-dialog>
+</template>
+
+<script>
+    import { avatarRequest } from '../../../api';
+
+    export default {
+        name: 'ExportAvatarsListDialog',
+        inject: ['API', 'beforeDialogClose', 'dialogMouseDown', 'dialogMouseUp'],
+        props: {
+            isExportAvatarsListDialogVisible: Boolean
+        },
+        data() {
+            return {
+                exportAvatarsListCsv: '',
+                loading: false
+            };
+        },
+        computed: {
+            isVisible: {
+                get() {
+                    return this.isExportAvatarsListDialogVisible;
+                },
+                set(value) {
+                    this.$emit('update:is-export-avatars-list-dialog-visible', value);
+                }
+            }
+        },
+        watch: {
+            isExportAvatarsListDialogVisible(value) {
+                if (value) {
+                    this.initExportAvatarsListDialog();
+                }
+            }
+        },
+        methods: {
+            initExportAvatarsListDialog() {
+                this.loading = true;
+                for (const ref of this.API.cachedAvatars.values()) {
+                    if (ref.authorId === this.API.currentUser.id) {
+                        this.API.cachedAvatars.delete(ref.id);
+                    }
+                }
+                const params = {
+                    n: 50,
+                    offset: 0,
+                    sort: 'updated',
+                    order: 'descending',
+                    releaseStatus: 'all',
+                    user: 'me'
+                };
+                const map = new Map();
+                this.API.bulk({
+                    fn: avatarRequest.getAvatars,
+                    N: -1,
+                    params,
+                    handle: (args) => {
+                        for (const json of args.json) {
+                            const $ref = this.API.cachedAvatars.get(json.id);
+                            if (typeof $ref !== 'undefined') {
+                                map.set($ref.id, $ref);
+                            }
+                        }
+                    },
+                    done: () => {
+                        const avatars = Array.from(map.values());
+                        if (Array.isArray(avatars) === false) {
+                            return;
+                        }
+                        const lines = ['AvatarID,AvatarName'];
+                        const _ = function (str) {
+                            if (/[\x00-\x1f,"]/.test(str) === true) {
+                                return `"${str.replace(/"/g, '""')}"`;
+                            }
+                            return str;
+                        };
+                        for (const avatar of avatars) {
+                            lines.push(`${_(avatar.id)},${_(avatar.name)}`);
+                        }
+                        this.exportAvatarsListCsv = lines.join('\n');
+                        this.loading = false;
+                    }
+                });
+            }
+        }
+    };
+</script>

src/views/Profile/dialogs/ExportFriendsListDialog.vue

@@ -0,0 +1,93 @@
+<template>
+    <el-dialog
+        :before-close="beforeDialogClose"
+        :title="$t('dialog.export_friends_list.header')"
+        :visible.sync="isVisible"
+        width="650px"
+        @mousedown.native="dialogMouseDown"
+        @mouseup.native="dialogMouseUp">
+        <el-tabs type="card">
+            <el-tab-pane :label="$t('dialog.export_friends_list.csv')">
+                <el-input
+                    v-model="exportFriendsListCsv"
+                    type="textarea"
+                    size="mini"
+                    rows="15"
+                    resize="none"
+                    readonly
+                    style="margin-top: 15px"
+                    @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+            </el-tab-pane>
+            <el-tab-pane :label="$t('dialog.export_friends_list.json')">
+                <el-input
+                    v-model="exportFriendsListJson"
+                    type="textarea"
+                    size="mini"
+                    rows="15"
+                    resize="none"
+                    readonly
+                    style="margin-top: 15px"
+                    @click.native="$event.target.tagName === 'TEXTAREA' && $event.target.select()" />
+            </el-tab-pane>
+        </el-tabs>
+    </el-dialog>
+</template>
+
+<script>
+    export default {
+        name: 'ExportFriendsListDialog',
+        inject: ['API', 'beforeDialogClose', 'dialogMouseDown', 'dialogMouseUp'],
+        props: {
+            friends: Map,
+            isExportFriendsListDialogVisible: Boolean
+        },
+        data() {
+            return {
+                exportFriendsListCsv: '',
+                exportFriendsListJson: ''
+            };
+        },
+        computed: {
+            isVisible: {
+                get() {
+                    return this.isExportFriendsListDialogVisible;
+                },
+                set(value) {
+                    this.$emit('update:is-export-friends-list-dialog-visible', value);
+                }
+            }
+        },
+        watch: {
+            isExportFriendsListDialogVisible(value) {
+                if (value) {
+                    this.initExportFriendsListDialog();
+                }
+            }
+        },
+        methods: {
+            initExportFriendsListDialog() {
+                const { friends } = this.API.currentUser;
+                if (Array.isArray(friends) === false) {
+                    return;
+                }
+                const lines = ['UserID,DisplayName,Memo'];
+                const _ = function (str) {
+                    if (/[\x00-\x1f,"]/.test(str) === true) {
+                        return `"${str.replace(/"/g, '""')}"`;
+                    }
+                    return str;
+                };
+                const friendsList = [];
+                for (const userId of friends) {
+                    const ref = this.friends.get(userId);
+                    const name = (typeof ref !== 'undefined' && ref.name) || '';
+                    const memo = (typeof ref !== 'undefined' && ref.memo.replace(/\n/g, ' ')) || '';
+                    lines.push(`${_(userId)},${_(name)},${_(memo)}`);
+                    friendsList.push(userId);
+                }
+                this.exportFriendsListJson = JSON.stringify({ friends: friendsList }, null, 4);
+                this.exportFriendsListCsv = lines.join('\n');
+            }
+        }
+    };
+</script>