Added simple page transition.
This commit is contained in:
Abdulmhsen B. A. A.
@@ -1,205 +1,208 @@
|
||||
<template>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<NuxtLink to="/backends" v-text="'Backends'"/>
|
||||
-
|
||||
<NuxtLink :to="'/backend/' + backend" v-text="backend"/>
|
||||
: Search
|
||||
</span>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-info" @click="searchContent(true)" :disabled="isLoading || !searchField || !query"
|
||||
:class="{'is-loading':isLoading}">
|
||||
<span class="icon"><i class="fas fa-sync"></i></span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle">This page search the remote backend data not the locally stored data.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<form @submit.prevent="searchContent(false)">
|
||||
<div class="field">
|
||||
<div class="field-body">
|
||||
<div class="field is-grouped-tablet">
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="searchField" class="is-capitalized" :disabled="isLoading">
|
||||
<option value="" disabled>Select Field</option>
|
||||
<option v-for="field in searchable" :key="'search-' + field" :value="field">
|
||||
{{ field }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-left">
|
||||
<i class="fas fa-folder-tree"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="limit" :disabled="isLoading">
|
||||
<option value="" disabled>Select Limit</option>
|
||||
<option v-for="limiter in limits" :key="'search-' + limiter" :value="limiter">
|
||||
{{ limiter }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-left">
|
||||
<i class="fas fa-sitemap"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control is-expanded has-icons-left">
|
||||
<input class="input" type="search" placeholder="Search..." v-model="query"
|
||||
:disabled="'' === searchField || isLoading">
|
||||
<div class="icon is-left">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-primary" type="submit" :disabled="!query || '' === searchField || isLoading"
|
||||
:class="{'is-loading':isLoading}">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-search"></i></span>
|
||||
<span>Search</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-warning" type="button" @click="clearSearch" :disabled="isLoading">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-cancel"></i></span>
|
||||
<span>Reset</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div>
|
||||
<div class="columns is-multiline">
|
||||
<div class="column is-12 is-clearfix is-unselectable">
|
||||
<span class="title is-4">
|
||||
<NuxtLink to="/backends" v-text="'Backends'"/>
|
||||
-
|
||||
<NuxtLink :to="'/backend/' + backend" v-text="backend"/>
|
||||
: Search
|
||||
</span>
|
||||
<div class="is-pulled-right">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<button class="button is-info" @click="searchContent(true)"
|
||||
:disabled="isLoading || !searchField || !query"
|
||||
:class="{'is-loading':isLoading}">
|
||||
<span class="icon"><i class="fas fa-sync"></i></span>
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="is-hidden-mobile">
|
||||
<span class="subtitle">This page search the remote backend data not the locally stored data.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="items?.length<1 && hasSearched">
|
||||
<Message v-if="isLoading" message_class="is-background-info-90 has-text-dark" icon="fas fa-spinner fa-spin"
|
||||
title="Loading" message="Loading data please wait..."/>
|
||||
<Message v-else class="has-background-warning-80 has-text-dark" title="Warning"
|
||||
icon="fas fa-exclamation-triangle" :use-close="true" @close="clearSearch">
|
||||
<span v-if="error?.message" v-text="error.message"></span>
|
||||
<template v-else>
|
||||
<span>No items found.</span>
|
||||
<span v-if="query">
|
||||
Search query <code><strong>{{ searchField }}</strong> : <strong>{{ query }}</strong></code>
|
||||
</span>
|
||||
</template>
|
||||
</Message>
|
||||
</div>
|
||||
<div class="column is-12">
|
||||
<form @submit.prevent="searchContent(false)">
|
||||
<div class="field">
|
||||
<div class="field-body">
|
||||
<div class="field is-grouped-tablet">
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="searchField" class="is-capitalized" :disabled="isLoading">
|
||||
<option value="" disabled>Select Field</option>
|
||||
<option v-for="field in searchable" :key="'search-' + field" :value="field">
|
||||
{{ field }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-left">
|
||||
<i class="fas fa-folder-tree"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="control has-icons-left">
|
||||
<div class="select is-fullwidth">
|
||||
<select v-model="limit" :disabled="isLoading">
|
||||
<option value="" disabled>Select Limit</option>
|
||||
<option v-for="limiter in limits" :key="'search-' + limiter" :value="limiter">
|
||||
{{ limiter }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="icon is-left">
|
||||
<i class="fas fa-sitemap"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<div class="columns is-multiline" v-if="items?.length>0">
|
||||
<div class="column is-6-tablet" v-for="item in items" :key="item.id">
|
||||
<div class="card" :class="{ 'is-success': item.watched }">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title is-text-overflow">
|
||||
<NuxtLink :to="item.webUrl" v-text="makeName(item)" target="_blank"/>
|
||||
</p>
|
||||
<span class="card-header-icon">
|
||||
<span class="icon">
|
||||
<i class="fas"
|
||||
:class="{'fa-folder': 'show' === item.type, 'fa-tv': 'episode' === item.type, 'fa-film': 'movie' === item.type}"></i>
|
||||
<div class="control is-expanded has-icons-left">
|
||||
<input class="input" type="search" placeholder="Search..." v-model="query"
|
||||
:disabled="'' === searchField || isLoading">
|
||||
<div class="icon is-left">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-primary" type="submit" :disabled="!query || '' === searchField || isLoading"
|
||||
:class="{'is-loading':isLoading}">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-search"></i></span>
|
||||
<span>Search</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<button class="button is-warning" type="button" @click="clearSearch" :disabled="isLoading">
|
||||
<span class="icon-text">
|
||||
<span class="icon"><i class="fas fa-cancel"></i></span>
|
||||
<span>Reset</span>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="column is-12" v-if="items?.length<1 && hasSearched">
|
||||
<Message v-if="isLoading" message_class="is-background-info-90 has-text-dark" icon="fas fa-spinner fa-spin"
|
||||
title="Loading" message="Loading data please wait..."/>
|
||||
<Message v-else class="has-background-warning-80 has-text-dark" title="Warning"
|
||||
icon="fas fa-exclamation-triangle" :use-close="true" @close="clearSearch">
|
||||
<span v-if="error?.message" v-text="error.message"></span>
|
||||
<template v-else>
|
||||
<span>No items found.</span>
|
||||
<span v-if="query">
|
||||
Search query <code><strong>{{ searchField }}</strong> : <strong>{{ query }}</strong></code>
|
||||
</span>
|
||||
</template>
|
||||
</Message>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<div class="columns is-multiline" v-if="items?.length>0">
|
||||
<div class="column is-6-tablet" v-for="item in items" :key="item.id">
|
||||
<div class="card" :class="{ 'is-success': item.watched }">
|
||||
<header class="card-header">
|
||||
<p class="card-header-title is-text-overflow">
|
||||
<NuxtLink :to="item.webUrl" v-text="makeName(item)" target="_blank"/>
|
||||
</p>
|
||||
<span class="card-header-icon">
|
||||
<span class="icon">
|
||||
<i class="fas"
|
||||
:class="{'fa-folder': 'show' === item.type, 'fa-tv': 'episode' === item.type, 'fa-film': 'movie' === item.type}"></i>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline is-mobile has-text-centered">
|
||||
<div class="column is-12 has-text-left" v-if="item?.title">
|
||||
<div class="is-text-overflow is-clickable"
|
||||
@click="(e) => e.target.classList.toggle('is-text-overflow')">
|
||||
</header>
|
||||
<div class="card-content">
|
||||
<div class="columns is-multiline is-mobile has-text-centered">
|
||||
<div class="column is-12 has-text-left" v-if="item?.title">
|
||||
<div class="is-text-overflow is-clickable"
|
||||
@click="(e) => e.target.classList.toggle('is-text-overflow')">
|
||||
<div class="is-text-overflow">
|
||||
<span class="icon"><i class="fas fa-heading"></i> </span>
|
||||
<NuxtLink :to="makeSearchLink('title',item.title)" v-text="item.title"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12 is-clickable has-text-left" v-if="item?.content_path"
|
||||
@click="(e) => e.target.firstChild?.classList?.toggle('is-text-overflow')">
|
||||
<div class="is-text-overflow">
|
||||
<span class="icon"><i class="fas fa-heading"></i> </span>
|
||||
<NuxtLink :to="makeSearchLink('title',item.title)" v-text="item.title"/>
|
||||
<span class="icon"><i class="fas fa-file"></i></span>
|
||||
<NuxtLink :to="makeSearchLink('path',item.content_path)" v-text="item.content_path"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-12 is-clickable has-text-left" v-if="item?.content_path"
|
||||
@click="(e) => e.target.firstChild?.classList?.toggle('is-text-overflow')">
|
||||
<div class="is-text-overflow">
|
||||
<span class="icon"><i class="fas fa-file"></i></span>
|
||||
<NuxtLink :to="makeSearchLink('path',item.content_path)" v-text="item.content_path"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-calendar"></i> </span>
|
||||
<span class="has-tooltip"
|
||||
v-tooltip="moment.unix(item.updated_at ?? item.updated).format(TOOLTIP_DATE_FORMAT)">
|
||||
{{ moment.unix(item.updated_at ?? item.updated).fromNow() }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon">
|
||||
<i class="fas"
|
||||
:class="{'fa-folder': 'show' === item.type, 'fa-tv': 'episode' === item.type, 'fa-film': 'movie' === item.type}"></i>
|
||||
|
||||
</span>
|
||||
<span class="is-capitalized">{{ item.type }}</span>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-database"></i> </span>
|
||||
<span>
|
||||
<NuxtLink
|
||||
:to="makeSearchLink(`metadata`,`${item.via}.show://${ag(item,`metadata.${item.via}.id`)}`)"
|
||||
v-if="'show' === item.type">
|
||||
View linked items
|
||||
</NuxtLink>
|
||||
<NuxtLink :to="`/history/${item.id}`" v-else-if="item.id">
|
||||
View local item
|
||||
</NuxtLink>
|
||||
<span v-else class="has-text-danger">
|
||||
Not imported
|
||||
<div class="card-footer">
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-calendar"></i> </span>
|
||||
<span class="has-tooltip"
|
||||
v-tooltip="moment.unix(item.updated_at ?? item.updated).format(TOOLTIP_DATE_FORMAT)">
|
||||
{{ moment.unix(item.updated_at ?? item.updated).fromNow() }}
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon">
|
||||
<i class="fas"
|
||||
:class="{'fa-folder': 'show' === item.type, 'fa-tv': 'episode' === item.type, 'fa-film': 'movie' === item.type}"></i>
|
||||
|
||||
</span>
|
||||
<span class="is-capitalized">{{ item.type }}</span>
|
||||
</div>
|
||||
<div class="card-footer-item">
|
||||
<span class="icon"><i class="fas fa-database"></i> </span>
|
||||
<span>
|
||||
<NuxtLink
|
||||
:to="makeSearchLink(`metadata`,`${item.via}.show://${ag(item,`metadata.${item.via}.id`)}`)"
|
||||
v-if="'show' === item.type">
|
||||
View linked items
|
||||
</NuxtLink>
|
||||
<NuxtLink :to="`/history/${item.id}`" v-else-if="item.id">
|
||||
View local item
|
||||
</NuxtLink>
|
||||
<span v-else class="has-text-danger">
|
||||
Not imported
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-info-90 has-text-dark" title="Tips" icon="fas fa-info-circle"
|
||||
:toggle="show_page_tips" @toggle="show_page_tips = !show_page_tips" :use-toggle="true">
|
||||
<ul>
|
||||
<li>
|
||||
items with <code>Not imported</code> text are items not yet imported to local database.
|
||||
</li>
|
||||
<li>
|
||||
The items shown here are from the remote backend data queried directly.
|
||||
</li>
|
||||
<li>Clicking directly on the <code>item title</code> will take you to the page associated with that link in
|
||||
the backend.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
<div class="column is-12">
|
||||
<Message message_class="has-background-info-90 has-text-dark" title="Tips" icon="fas fa-info-circle"
|
||||
:toggle="show_page_tips" @toggle="show_page_tips = !show_page_tips" :use-toggle="true">
|
||||
<ul>
|
||||
<li>
|
||||
items with <code>Not imported</code> text are items not yet imported to local database.
|
||||
</li>
|
||||
<li>
|
||||
The items shown here are from the remote backend data queried directly.
|
||||
</li>
|
||||
<li>Clicking directly on the <code>item title</code> will take you to the page associated with that link in
|
||||
the backend.
|
||||
</li>
|
||||
</ul>
|
||||
</Message>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import request from '~/utils/request.js'
|
||||
import request from '~/utils/request'
|
||||
import moment from 'moment'
|
||||
import {makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index.js'
|
||||
import Message from "~/components/Message.vue";
|
||||
import {useStorage} from "@vueuse/core";
|
||||
import {makeName, makeSearchLink, notification, TOOLTIP_DATE_FORMAT} from '~/utils/index'
|
||||
import Message from '~/components/Message'
|
||||
import {useStorage} from '@vueuse/core'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
Reference in New Issue
Block a user