Skip to content

Commit

Permalink
Bind editor controls to graphql response (#557)
Browse files Browse the repository at this point in the history
  • Loading branch information
@tobiasdiez
tobiasdiez authored Oct 21, 2021
1 parent b96ff68 commit e719dd1
Show file tree
Hide file tree
Showing 5 changed files with 315 additions and 171 deletions.
168 changes: 5 additions & 163 deletions components/DetailPane.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,185 +50,27 @@
<FontAwesomeIcon icon="times" />
</t-button>
<slot>
<div class="flex flex-col overflow-y-auto pr-3">
<div>
<t-select
:options="{
Article: 'Journal Article',
PhDThesis: 'PhD Thesis',
}"
variant="plaincaps"
>
<template slot="arrow" slot-scope="{ className }">
<FontAwesomeIcon
icon="chevron-down"
size="xs"
:class="className"
/>
</template>
</t-select>
</div>
<div class="z-10 grid -mt-2">
<!-- Auto-grow textarea, taken from https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/ -->
<!-- prettier-ignore -->
<div
class="
whitespace-pre-wrap
text-xl
row-span-1
col-span-1 col-start-1
row-start-1
py-2
px-3
invisible
"
>{{ title + ' ' }}</div>
<t-textarea
v-model="title"
variant="plain"
class="
text-xl
resize-none
overflow-hidden
row-span-1
col-span-1 col-start-1
row-start-1
"
></t-textarea>
</div>
<div class="-mt-3">
<Tags
v-model="authors"
placeholder="Add author"
:delimiters="null"
:whitelist="authorSuggestions"
/>
</div>
<div>
<editor-input v-model="date"></editor-input>
<span class="text-gray-400">|</span>
<editor-input v-model="journal"></editor-input>
</div>
<div class="-mt-1">
<span class="pl-3">
Volume:
<editor-input v-model="volume"></editor-input>
</span>
<span class="text-gray-400 pr-3">|</span>
<span>
Issue:
<editor-input v-model="issue"></editor-input>
</span>
<span class="text-gray-400 pr-3">|</span>
<span>
pp.
<editor-input v-model="pages"></editor-input>
</span>
</div>
<div>
<editor-header
heading="Abstract"
class="mt-4 -mb-1"
></editor-header>
<t-textarea
v-model="abstract"
variant="plain"
rows="5"
></t-textarea>
</div>
<div>
<editor-header heading="Keywords" class="mt-4"></editor-header>
<Tags
v-model="keywords"
placeholder="Add keyword"
:delimiters="null"
:whitelist="keywordSuggestions"
tag-class="border rounded-md"
/>
</div>
<div>
<editor-header heading="Groups" class="mt-4"></editor-header>
<Tags
v-model="groups"
placeholder="Add group"
:delimiters="null"
:whitelist="groupSuggestions"
tag-class="bg-highlight-50 rounded-md"
/>
</div>
<div>
<editor-header
heading="External"
class="mt-4 mb-1"
></editor-header>
<t-table
:data="external"
variant="plain"
class="text-sm"
></t-table>
</div>
</div>
<Editor :document-id="selectedDocumentId"></Editor>
</slot>
</div>
</transition>
</div>
</template>
<script lang="ts">
import { defineComponent, computed } from '@nuxtjs/composition-api'
import Tags from './tagify.vue'
import { computed, defineComponent } from '@nuxtjs/composition-api'
import { useUiStore } from './../store'
import EditorInput from './EditorInput.vue'
import EditorHeader from './EditorHeader.vue'
import Editor from './Editor.vue'
export default defineComponent({
components: {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
Tags,
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
EditorInput,
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
EditorHeader,
Editor,
},
setup() {
const ui = useUiStore()
const authors = [{ value: 'Tobias Diez' }, { value: 'Gerd Rudolph' }]
const authorSuggestions = [{ value: 'Linus' }]
const keywords = [
{ value: 'Symplectic Geometry' },
{ value: 'Yang-Mills Theory' },
]
const keywordSuggestions = [{ value: 'Differential Geometry' }]
const groups = [{ value: 'Chocolate Making' }, { value: 'Consumption' }]
const groupSuggestions = [{ value: 'Grinding' }]
const external = [
{ name: 'DOI', value: '10.1063/1.5085764' },
{ name: 'ArXiv', value: '1812.04695' },
{ name: 'MathSciNet', value: 'MR3997558' },
]
return {
selectedDocumentId: computed(() => ui.selectedDocumentId),
isDetailsOpen: computed(() => ui.isDetailsOpen),
closePane: () => (ui.isDetailsOpen = false),
title:
'Clebsch-Lagrange variational principle and geometric constraint analysis of relativistic field theories',
authors,
authorSuggestions,
date: '2019 / 12',
journal: 'Journal of Mathematical Physics',
volume: '300',
issue: '3',
pages: '567-589',
abstract:
'Inspired by the Clebsch optimal control problem, we introduce a new variational principle that is suitable for capturing the geometry of relativistic field theories with constraints related to a gauge symmetry. Its special feature is that the Lagrange multipliers couple to the configuration variables via the symmetry group action. The resulting constraints are formulated as a condition on the momentum map of the gauge group action on the phase space of the system. We discuss the Hamiltonian picture and the reduction of the gauge symmetry by stages in this geometric setting. We show that the Yang-Mills-Higgs action and the Einstein--Hilbert action fit into this new framework after a (1+3)-splitting. Moreover, we recover the Gauß constraint of Yang-Mills-Higgs theory and the diffeomorphism constraint of general relativity as momentum map constraints.',
keywords,
keywordSuggestions,
groups,
groupSuggestions,
external,
}
},
})
Expand Down
2 changes: 1 addition & 1 deletion components/DocumentView.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ export default defineComponent({
const ui = useUiStore()
function displayDocumentDetails() {
ui.displayDocumentDetails()
ui.displayDocumentDetails(document.value.id)
}
return {
Expand Down
Loading

0 comments on commit e719dd1

Please sign in to comment.