forked from DebaucheryLibrarian/traxxx
Experimenting using GraphQL in favor of REST.
This commit is contained in:
@@ -3,7 +3,8 @@
|
||||
<Header />
|
||||
|
||||
<div class="content">
|
||||
<router-view />
|
||||
<!-- key forces rerender when new and old path use same component -->
|
||||
<router-view :key="$route.fullPath" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -108,6 +108,22 @@
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="release.scenes && release.scenes.length > 0">
|
||||
<h3>Scenes</h3>
|
||||
|
||||
<Releases
|
||||
v-if="release.scenes && release.scenes.length > 0"
|
||||
:releases="release.scenes"
|
||||
class="row"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="release.movie">
|
||||
<h3>Movie</h3>
|
||||
|
||||
<Release :release="release.movie" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="release.tags.length > 0"
|
||||
class="row"
|
||||
@@ -196,8 +212,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Actor from '../tile/actor.vue';
|
||||
import Banner from './banner.vue';
|
||||
import Actor from '../tile/actor.vue';
|
||||
import Release from '../tile/release.vue';
|
||||
import Releases from './releases.vue';
|
||||
|
||||
function pageTitle() {
|
||||
return this.release && this.release.title;
|
||||
@@ -211,6 +229,8 @@ export default {
|
||||
components: {
|
||||
Actor,
|
||||
Banner,
|
||||
Releases,
|
||||
Release,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -56,6 +56,7 @@ export default {
|
||||
}
|
||||
|
||||
.tiles {
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(20rem, .33fr));
|
||||
grid-gap: 1rem;
|
||||
|
||||
@@ -35,9 +35,9 @@
|
||||
|
||||
<span
|
||||
v-if="actor.ageThen && actor.ageThen < actor.age"
|
||||
v-tooltip="'Age at scene date'"
|
||||
v-tooltip="`${actor.ageThen} years old on release date`"
|
||||
class="age-then"
|
||||
>@ {{ actor.ageThen }}</span>
|
||||
>{{ actor.ageThen }}</span>
|
||||
</span>
|
||||
<span
|
||||
v-if="actor.origin"
|
||||
@@ -114,6 +114,7 @@ export default {
|
||||
color: $text-contrast;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: .5rem;
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
<template>
|
||||
<div class="tile">
|
||||
<div
|
||||
class="tile"
|
||||
:class="{ movie: release.type === 'movie' }"
|
||||
>
|
||||
<span class="banner">
|
||||
<span class="details">
|
||||
<router-link
|
||||
@@ -39,7 +42,7 @@
|
||||
</span>
|
||||
|
||||
<router-link
|
||||
:to="`/scene/${release.id}`"
|
||||
:to="`/${release.type || 'scene'}/${release.id}`"
|
||||
class="link"
|
||||
>
|
||||
<img
|
||||
@@ -66,14 +69,19 @@
|
||||
|
||||
<div class="info">
|
||||
<router-link
|
||||
:to="`/scene/${release.id}`"
|
||||
:to="`/${release.type || 'scene'}/${release.id}`"
|
||||
class="row link"
|
||||
>
|
||||
<h3
|
||||
v-tooltip.top="release.title"
|
||||
:title="release.title"
|
||||
class="title"
|
||||
>{{ release.title }}</h3>
|
||||
>
|
||||
<Icon
|
||||
v-if="release.type === 'movie'"
|
||||
icon="film"
|
||||
/>{{ release.title }}
|
||||
</h3>
|
||||
</router-link>
|
||||
|
||||
<span class="row">
|
||||
@@ -212,13 +220,19 @@ export default {
|
||||
}
|
||||
|
||||
.title {
|
||||
color: $text;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0 .25rem .25rem 0;
|
||||
color: $text;
|
||||
font-size: 1rem;
|
||||
max-height: 3rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
.icon {
|
||||
margin: 0 .25rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.network {
|
||||
|
||||
5
assets/img/film.svg
Normal file
5
assets/img/film.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>film</title>
|
||||
<path d="M0 0v16h16v-16h-16zM10 1h2v2h-2v-2zM7 1h2v2h-2v-2zM4 1h2v2h-2v-2zM1 1h2v2h-2v-2zM1 4h6v8h-6v-8zM3 15h-2v-2h2v2zM6 15h-2v-2h2v2zM9 15h-2v-2h2v2zM12 15h-2v-2h2v2zM15 15h-2v-2h2v2zM15 12h-7v-8h7v8zM15 3h-2v-2h2v2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 387 B |
5
assets/img/film2.svg
Normal file
5
assets/img/film2.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>film2</title>
|
||||
<path d="M0 1v14h16v-14h-16zM3 14h-2v-2h2v2zM3 11h-2v-2h2v2zM3 7h-2v-2h2v2zM3 4h-2v-2h2v2zM12 14h-8v-5h8v5zM12 7h-8v-5h8v5zM15 14h-2v-2h2v2zM15 11h-2v-2h2v2zM15 7h-2v-2h2v2zM15 4h-2v-2h2v2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 358 B |
5
assets/img/film3.svg
Normal file
5
assets/img/film3.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<!-- Generated by IcoMoon.io -->
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<title>film3</title>
|
||||
<path d="M0 2v12h16v-12h-16zM3 13h-2v-2h2v2zM3 9h-2v-2h2v2zM3 5h-2v-2h2v2zM12 13h-8v-10h8v10zM15 13h-2v-2h2v2zM15 9h-2v-2h2v2zM15 5h-2v-2h2v2z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 311 B |
@@ -21,7 +21,7 @@ async function get(endpoint, query = {}) {
|
||||
|
||||
async function post(endpoint, data) {
|
||||
const res = await fetch(`${config.api.url}${endpoint}`, {
|
||||
method: 'GET',
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
@@ -39,4 +39,34 @@ async function post(endpoint, data) {
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
|
||||
export { get, post };
|
||||
async function graphql(operationName, query, variables = null) {
|
||||
const res = await fetch('/graphql', {
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
credentials: 'same-origin',
|
||||
body: JSON.stringify({
|
||||
operationName,
|
||||
query,
|
||||
variables,
|
||||
}),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const { data } = await res.json();
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
const errorMsg = await res.text();
|
||||
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
|
||||
export {
|
||||
get,
|
||||
post,
|
||||
graphql,
|
||||
};
|
||||
|
||||
@@ -1,14 +1,97 @@
|
||||
import { get } from '../api';
|
||||
import { get, graphql } from '../api';
|
||||
|
||||
function initReleasesActions(store, _router) {
|
||||
function initReleasesActions(_store, _router) {
|
||||
async function fetchReleases({ _commit }) {
|
||||
/*
|
||||
const releases = await get('/releases', {
|
||||
filter: store.state.ui.filter,
|
||||
after: store.getters.after,
|
||||
before: store.getters.before,
|
||||
});
|
||||
*/
|
||||
|
||||
return releases;
|
||||
const { releases } = await graphql('MyQuery', `
|
||||
query MyQuery {
|
||||
releases(orderBy: DATE_DESC) {
|
||||
id
|
||||
title
|
||||
description
|
||||
date
|
||||
duration
|
||||
createdAt
|
||||
shootId
|
||||
url
|
||||
actors: actorsAssociateds {
|
||||
actor {
|
||||
id
|
||||
name
|
||||
slug
|
||||
origin: countryByBirthCountryAlpha2 {
|
||||
alpha2
|
||||
name
|
||||
}
|
||||
avatar: actorsMediasByTargetId(condition: { role: "avatar" }) {
|
||||
id
|
||||
thumbnail
|
||||
path
|
||||
mime
|
||||
}
|
||||
}
|
||||
}
|
||||
poster: releasesMediasByTargetId(condition: { role: "poster" }) {
|
||||
mime
|
||||
id
|
||||
index
|
||||
path
|
||||
thumbnail
|
||||
role
|
||||
}
|
||||
photos: releasesMediasByTargetId(condition: { role: "photos" }) {
|
||||
mime
|
||||
id
|
||||
index
|
||||
path
|
||||
thumbnail
|
||||
role
|
||||
}
|
||||
tags: releasesTagsByTargetId {
|
||||
tag {
|
||||
name
|
||||
priority
|
||||
slug
|
||||
id
|
||||
}
|
||||
}
|
||||
site {
|
||||
id
|
||||
name
|
||||
slug
|
||||
url
|
||||
network {
|
||||
id
|
||||
name
|
||||
slug
|
||||
url
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
const curatedReleases = releases.map(release => ({
|
||||
...release,
|
||||
actors: release.actors.map(({ actor }) => ({
|
||||
...actor,
|
||||
avatar: actor.avatar[0],
|
||||
})),
|
||||
poster: release.poster[0],
|
||||
network: release.site.network,
|
||||
tags: release.tags.map(({ tag }) => tag),
|
||||
}));
|
||||
|
||||
console.log(curatedReleases);
|
||||
|
||||
return curatedReleases;
|
||||
}
|
||||
|
||||
async function fetchReleaseById({ _commit }, releaseId) {
|
||||
|
||||
Reference in New Issue
Block a user