Merge pull request #155 from citation-file-format/116-keywords

Keywords screen

Author: sverhoeven

src/components/KeywordEditCard.vue

@@ -0,0 +1,39 @@
+<template>
+    <div class="q-gutter-md row items-between no-wrap">
+        <div class="col-11">
+            <q-input
+                bg-color="white"
+                outlined
+                dense
+                v-bind:model-value="keyword"
+                placeholder="Type a keyword"
+                v-on:update:modelValue="
+                    $emit('update', $event)
+                "
+            />
+        </div><div class="col-1">
+            <q-btn
+                icon="delete"
+                color="negative"
+                title="Remove"
+                dense
+                v-on:click="$emit('removePressed')"
+            />
+        </div>
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'KeywordEditCard',
+    props: {
+        keyword: {
+            type: String,
+            default: ''
+        }
+    },
+    emits: ['removePressed', 'update']
+})
+</script>

src/pages/Keywords.vue

@@ -6,26 +6,68 @@
             <p class="q-mt-xl page-title">
                 Keywords
             </p>
+
+            <p class="question">
+                What keywords describe the work?
+            </p>
+
+            <div
+                v-for="(keyword, index) in keywords"
+                v-bind:key="index"
+            >
+                <KeywordEditCard
+                    v-bind:keyword="keyword"
+                    v-on:update="setKeyword(index, $event)"
+                    v-on:removePressed="removeKeyword(index)"
+                />
+            </div>
+
+            <q-btn v-on:click="addKeyword">
+                Add keyword
+            </q-btn>
         </div>
     </div>
     <StepperActions />
 </template>
 
 <script lang="ts">
 import StepperActions from 'components/StepperActions.vue'
+import KeywordEditCard from 'components/KeywordEditCard.vue'
 import { defineComponent } from 'vue'
 import { useCff } from '../store/cff'
 
 export default defineComponent({
     name: 'Keywords',
     components: {
-        StepperActions
+        StepperActions,
+        KeywordEditCard
     },
     setup () {
         const { keywords, setKeywords } = useCff()
+
+        function addKeyword () {
+            const newKeyword = ''
+            const newKeywords = [...keywords.value, newKeyword]
+            console.log(newKeywords)
+            setKeywords(newKeywords)
+        }
+
+        function removeKeyword (index: number) {
+            const newKeywords = [...keywords.value]
+            newKeywords.splice(index, 1)
+            setKeywords(newKeywords)
+        }
+
+        function setKeyword (index: number, newKeyword: string) {
+            const newKeywords = [...keywords.value]
+            newKeywords[index] = newKeyword
+            setKeywords(newKeywords)
+        }
         return {
             keywords,
-            setKeywords
+            addKeyword,
+            removeKeyword,
+            setKeyword
         }
     }
 })
@@ -41,5 +83,4 @@ export default defineComponent({
     max-width: 700px;
     min-width: 300px;
 }
-
 </style>

src/types/index.ts

@@ -29,8 +29,8 @@ export type CffType = {
     cffVersion?: string,
     commit?: string,
     dateReleased?: string,
+    keywords: KeywordsType,
     identifiers: IdentifiersType,
-    keywords?: KeywordsType,
     license?: string,
     message?: string,
     repository?: string,