VRCX/html/src/mixins/tabs/search.pug

mixin searchTab()
    .x-container(v-show="$refs.menu && $refs.menu.activeIndex === 'search'")
        div(style="margin:0 0 10px;display:flex;align-items:center")
            el-input(v-model="searchText" :placeholder="$t('view.search.search_placeholder')" @keyup.native.13="search()" style="flex:1")
            el-tooltip(placement="bottom" :content="$t('view.search.clear_results_tooltip')" :disabled="hideTooltips")
                el-button(type="default" @click="clearSearch()" icon="el-icon-delete" circle style="flex:none;margin-left:10px")
        el-tabs(ref="searchTab" type="card" style="margin-top:15px")
            el-tab-pane(:label="$t('view.search.user.header')" v-loading="isSearchUserLoading" style="min-height:60px")
                .x-friend-list
                    .x-friend-item(v-for="user in searchUserResults" :key="user.id" @click="showUserDialog(user.id)")
                        template(v-once)
                            .avatar
                                img(v-lazy="userImage(user)")
                            .detail
                                span.name(v-text="user.displayName")
                                span.extra(v-if="randomUserColours" v-text="user.$trustLevel" :class="user.$trustClass")
                                span.extra(v-else v-text="user.$trustLevel" :style="{'color':user.$userColour}")
                el-button-group(style="margin-top:15px")
                    el-button(v-if="searchUserParams.offset" @click="moreSearchUser(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
                    el-button(v-if="searchUserResults.length" @click="moreSearchUser(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
            el-tab-pane(:label="$t('view.search.world.header')" v-loading="isSearchWorldLoading" style="min-height:60px")
                el-dropdown(@command="(row) => searchWorld(row)" size="small" trigger="click" style="margin-bottom:15px")
                    el-button(size="small") {{ $t('view.search.world.category') }} #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        el-dropdown-item(v-for="row in API.cachedConfig.dynamicWorldRows" :key="row.index" v-text="row.name" :command="row")
                el-checkbox(v-model="searchWorldLabs" style="margin-left:10px") {{ $t('view.search.world.community_lab') }}
                .x-friend-list
                    .x-friend-item(v-for="world in searchWorldResults" :key="world.id" @click="showWorldDialog(world.id)")
                        template(v-once)
                            .avatar
                                img(v-lazy="world.thumbnailImageUrl")
                            .detail
                                span.name(v-text="world.name")
                                span.extra(v-if="world.occupants") {{ world.authorName }} ({{ world.occupants }})
                                span.extra(v-else v-text="world.authorName")
                el-button-group(style="margin-top:15px")
                    el-button(v-if="searchWorldParams.offset" @click="moreSearchWorld(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
                    el-button(v-if="searchWorldResults.length >= 10" @click="moreSearchWorld(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
            el-tab-pane(:label="$t('view.search.avatar.header')" v-loading="isSearchAvatarLoading" style="min-height:60px")
                el-dropdown(v-if="avatarRemoteDatabaseProviderList.length > 1" trigger="click" @click.native.stop size="mini" style="margin-right:5px")
                    el-button(size="small") {{ $t('view.search.avatar.search_provider') }} #[i.el-icon-arrow-down.el-icon--right]
                    el-dropdown-menu(#default="dropdown")
                        el-dropdown-item(v-for="provider in avatarRemoteDatabaseProviderList" :key="provider" @click.native="setAvatarProvider(provider)") #[i.el-icon-check.el-icon--left(v-if="provider === avatarRemoteDatabaseProvider")] {{ provider }}
                el-tooltip(placement="bottom" :content="$t('view.search.avatar.refresh_tooltip')" :disabled="hideTooltips")
                    el-button(type="default" :loading="userDialog.isAvatarsLoading" @click="refreshUserDialogAvatars()" size="mini" icon="el-icon-refresh" circle)
                span(style="font-size:14px;margin-left:5px;margin-right:5px")  {{ $t("view.search.avatar.result_count", { count: searchAvatarResults.length }) }}
                el-radio-group(v-model="searchAvatarFilter" size="mini" style="margin:5px;display:block" @change="searchAvatar")
                    el-radio(label="all") {{ $t('view.search.avatar.all') }}
                    el-radio(label="public") {{ $t('view.search.avatar.public') }}
                    el-radio(label="private") {{ $t('view.search.avatar.private') }}
                el-radio-group(v-model="searchAvatarFilterRemote" size="mini" style="margin:5px;display:block" @change="searchAvatar")
                    el-radio(label="all") {{ $t('view.search.avatar.all') }}
                    el-radio(label="local") {{ $t('view.search.avatar.local') }}
                    el-radio(label="remote" :disabled="!avatarRemoteDatabase") {{ $t('view.search.avatar.remote') }}
                el-radio-group(:disabled="searchAvatarFilterRemote !== 'local'" v-model="searchAvatarSort" size="mini" style="margin:5px;display:block" @change="searchAvatar")
                    el-radio(label="name") {{ $t('view.search.avatar.sort_name') }}
                    el-radio(label="update") {{ $t('view.search.avatar.sort_update') }}
                    el-radio(label="created") {{ $t('view.search.avatar.sort_created') }}
                .x-friend-list(style="margin-top:20px")
                    .x-friend-item(v-for="avatar in searchAvatarPage" :key="avatar.id" @click="showAvatarDialog(avatar.id)")
                        template(v-once)
                            .avatar
                                img(v-if="avatar.thumbnailImageUrl" v-lazy="avatar.thumbnailImageUrl")
                                img(v-else-if="avatar.imageUrl" v-lazy="avatar.imageUrl")
                            .detail
                                span.name(v-text="avatar.name")
                                span.extra(v-text="avatar.releaseStatus" v-if="avatar.releaseStatus === 'public'" style="color: #67c23a;")
                                span.extra(v-text="avatar.releaseStatus" v-else-if="avatar.releaseStatus === 'private'" style="color: #f56c6c;")
                                span.extra(v-text="avatar.releaseStatus" v-else)
                                span.extra(v-text="avatar.authorName")
                el-button-group(style="margin-top:15px")
                    el-button(v-if="searchAvatarPageNum" @click="moreSearchAvatar(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
                    el-button(v-if="searchAvatarResults.length > 10 && (searchAvatarPageNum + 1) * 10 < searchAvatarResults.length" @click="moreSearchAvatar(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}
            el-tab-pane(:label="$t('view.search.group.header')" v-loading="isSearchGroupLoading" style="min-height:60px")
                .x-friend-list
                    .x-friend-item(v-for="group in searchGroupResults" :key="group.id" @click="showGroupDialog(group.id)")
                        template(v-once)
                            .avatar
                                img(v-lazy="group.iconUrl")
                            .detail
                                span.name
                                    span(v-text="group.name")
                                    span(style="margin-left:5px;font-weight:normal") ({{ group.memberCount }})
                                    span(style="margin-left:5px;color:#909399;font-weight:normal;font-family:monospace;font-size:12px") {{ group.shortCode }}.{{ group.discriminator }}
                                span.extra(v-text="group.description")
                el-button-group(style="margin-top:15px")
                    el-button(v-if="searchGroupParams.offset" @click="moreSearchGroup(-1)" icon="el-icon-back" size="small") {{ $t('view.search.prev_page') }}
                    el-button(v-if="searchGroupResults.length" @click="moreSearchGroup(1)" icon="el-icon-right" size="small") {{ $t('view.search.next_page') }}