JENA-2282: Fuseki2 Query Store

jena-fuseki2/jena-fuseki-ui/package.json

@@ -30,9 +30,12 @@
     "follow-redirects": "^1.15.2",
     "mitt": "^3.0.0",
     "nanoid": "^4.0.0",
+    "uuid": "^3.4.0",
     "vue": "^3.2.39",
     "vue-router": "^4.1.5",
-    "vue-upload-component": "^3.1.2"
+    "vue-upload-component": "^3.1.2",
+    "vuex": "^4.1.0",
+    "vuex-persist": "^3.1.3"
   },
   "devDependencies": {
     "@babel/eslint-parser": "^7.19.1",

jena-fuseki2/jena-fuseki-ui/src/components/dataset/EditQueryModal.vue

@@ -0,0 +1,76 @@
+<template>
+  <b-modal title="Edit SPARQL query" size="lg" :id="id" v-model="show" @hide="$emit('editQueryModalHide')">
+    <b-form-group label="Name">
+      <b-form-input v-model="editQuery.name" type="text" placeholder="Query name"></b-form-input>
+    </b-form-group>
+    <b-spinner v-if="loading"></b-spinner>
+    <div id="edit-yasqe"></div>
+    <template #modal-footer>
+      <b-button variant="outline-secondary" @click="show = false">
+        Cancel
+      </b-button>
+      <b-button variant="primary" @click="saveQuery" :disabled="!validName">
+        Save
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import Yasqe from '@triply/yasqe'
+
+export default {
+  name: 'EditQueryModal',
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    editId: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      show: false,
+      editQuery: {
+        name: '',
+        query: ''
+      },
+      yasqe: null,
+      loading: true
+    }
+  },
+  computed: {
+    validName () {
+      return this.editQuery.name.length > 0
+    }
+  },
+  methods: {
+    saveQuery () {
+      this.$store.dispatch('queryLibrary/editSavedQuery', this.editQuery)
+      this.show = false
+    }
+  },
+  mounted () {
+    this.editQuery = this.$store.getters['queryLibrary/getSavedQuery'](this.editId)
+    this.$bvModal.show(this.id)
+    this.$nextTick(() => {
+      setTimeout(() => {
+        const vm = this
+        vm.yasqe = new Yasqe(document.getElementById('edit-yasqe'), {
+          showQueryButton: false,
+          queryingDisabled: true,
+          resizeable: false,
+          createShareableLink: null,
+          persistenceId: null
+        })
+        vm.yasqe.setValue(this.editQuery.query)
+        this.loading = false
+        vm.yasqe.on('change', (yasqe) => { this.editQuery.query = yasqe.getValue() })
+      }, 300)
+    })
+  }
+}
+</script>

jena-fuseki2/jena-fuseki-ui/src/components/dataset/QueryLibraryModal.vue

@@ -0,0 +1,79 @@
+<template>
+  <b-modal title="SPARQL Query Library" size="lg" :id="id" v-model="show" @hide="$emit('queryLibraryModalHide')">
+    <b-list-group>
+      <b-list-group-item
+        class="d-flex justify-content-between align-items-center"
+        button
+        v-for="item in $store.getters['queryLibrary/listSavedQueries']"
+        :key="item.id"
+        @click="handleLoad(item.id)"
+      >
+        {{ item.name }}
+        <div>
+          <b-button variant="outline-warning" size="sm" class="mr-2" @click.stop="handleEdit(item.id)">
+            <FontAwesomeIcon icon="pen-to-square" />
+          </b-button>
+          <b-button variant="outline-danger" size="sm" @click.stop="handleDelete(item.id)">
+            <FontAwesomeIcon icon="trash" />
+          </b-button>
+        </div>
+      </b-list-group-item>
+    </b-list-group>
+    <EditQueryModal v-if="editQueryModal" id="query-library" @editQueryModalHide="editQueryModal=false" :editId="editId"/>
+    <template #modal-footer>
+      <b-button variant="secondary" @click="show = false">
+        Close
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<script>
+import EditQueryModal from '@/components/dataset/EditQueryModal'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faTrash, faPenToSquare } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+library.add(faTrash, faPenToSquare)
+
+export default {
+  name: 'QueryLibraryModal',
+  components: {
+    EditQueryModal,
+    FontAwesomeIcon
+  },
+  props: {
+    id: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      show: false,
+      editQueryModal: false,
+      editId: ''
+    }
+  },
+  mounted () {
+    this.$bvModal.show(this.id)
+  },
+  methods: {
+    handleLoad (id) {
+      const query = this.$store.getters['queryLibrary/getSavedQuery'](id)
+      this.$emit('loadSavedQuery', query.query)
+      this.show = false
+    },
+    handleEdit (id) {
+      this.editId = id
+      this.editQueryModal = true
+    },
+    handleDelete (id) {
+      const query = this.$store.getters['queryLibrary/getSavedQuery'](id)
+      if (confirm(`Are you sure you want to delete "${query.name}"?`)) {
+        this.$store.dispatch('queryLibrary/deleteSavedQuery', id)
+      }
+    }
+  }
+}
+</script>

jena-fuseki2/jena-fuseki-ui/src/components/dataset/SaveQueryModal.vue

@@ -0,0 +1,89 @@
+<template>
+  <b-modal title="Save SPARQL query" size="lg" :id="id" v-model="show" @hide="$emit('saveQueryModalHide')">
+    <b-form-group label="Name">
+      <b-form-input v-model="name" type="text" placeholder="Query name"></b-form-input>
+    </b-form-group>
+    <b-spinner v-if="loading"></b-spinner>
+    <div id="save-yasqe"></div>
+    <template #modal-footer>
+      <b-button
+        variant="outline-secondary"
+        @click="show=false"
+      >
+        Cancel
+      </b-button>
+      <b-button
+        variant="primary"
+        @click="saveQuery"
+        :disabled="!validName"
+      >
+        Save
+      </b-button>
+    </template>
+  </b-modal>
+</template>
+
+<style lang="scss">
+#save-yasqe {
+  opacity: 0.6;
+}
+</style>
+
+<script>
+import { v4 as uuidv4 } from 'uuid'
+import Yasqe from '@triply/yasqe'
+
+export default {
+  name: 'SaveQueryModal',
+  props: {
+    id: {
+      type: String,
+      required: true
+    },
+    query: {
+      type: String,
+      required: true
+    }
+  },
+  data () {
+    return {
+      show: false,
+      name: '',
+      loading: true
+    }
+  },
+  computed: {
+    validName () {
+      return this.name.length > 0
+    }
+  },
+  methods: {
+    saveQuery () {
+      this.$store.dispatch('queryLibrary/addSavedQuery', {
+        id: uuidv4(),
+        name: this.name,
+        query: this.query
+      })
+      this.show = false
+    }
+  },
+  mounted () {
+    this.$bvModal.show(this.id)
+    this.$nextTick(() => {
+      setTimeout(() => {
+        const vm = this
+        vm.yasqe = new Yasqe(document.getElementById('save-yasqe'), {
+          showQueryButton: false,
+          queryingDisabled: true,
+          resizeable: false,
+          createShareableLink: null,
+          persistenceId: null,
+          readOnly: 'nocursor'
+        })
+        vm.yasqe.setValue(this.query)
+        this.loading = false
+      }, 300)
+    })
+  }
+}
+</script>

jena-fuseki2/jena-fuseki-ui/src/main.js

@@ -18,12 +18,14 @@
 import { createApp, h } from 'vue'
 import App from './App.vue'
 import router from './router'
+import store from './store'
 import 'bootstrap/dist/js/bootstrap.bundle.min'
 import { FusekiServicePlugin, ToastPlugin } from '@/plugins/index'
 
 const app = createApp(App)
 
 app.use(router)
+app.use(store)
 
 // Create the global Fuseki Service instance.
 app.use(FusekiServicePlugin)

jena-fuseki2/jena-fuseki-ui/src/store/index.js

@@ -0,0 +1,13 @@
+import { createStore } from 'vuex'
+import VuexPersistence from 'vuex-persist'
+import { queryLibraryStore } from './queryLibraryStore'
+
+export default createStore({
+  modules: {
+    queryLibrary: queryLibraryStore
+  },
+  plugins: [new VuexPersistence({
+    storage: window.localStorage,
+    modules: ['queryLibrary']
+  }).plugin]
+})

jena-fuseki2/jena-fuseki-ui/src/store/queryLibraryStore.js

@@ -0,0 +1,55 @@
+const getWithId = (array, id) => {
+  const idx = array.map(x => x.id).indexOf(id)
+  const idMatch = array[idx]
+  return [idMatch, idx]
+}
+
+export const queryLibraryStore = {
+  namespaced: true,
+  state: () => ({
+    savedQueries: [] // [{ id: '', name: '', query: ''}, ...]
+  }),
+  getters: {
+    listSavedQueries (state) {
+      return state.savedQueries.sort((a, b) => a.name.localeCompare(b.name))
+    },
+    getSavedQuery: (state) => (payload) => {
+      const query = getWithId(state.savedQueries, payload)[0]
+      return query
+    }
+  },
+  mutations: {
+    addSavedQuery (state, payload) {
+      const tempSavedQueries = [...state.savedQueries]
+      tempSavedQueries.push(payload)
+      state.savedQueries = tempSavedQueries
+    },
+    editSavedQuery (state, payload) {
+      const tempSavedQueries = [...state.savedQueries]
+      const index = getWithId(tempSavedQueries, payload.id)[1]
+      if (index !== -1) {
+        tempSavedQueries[index] = payload
+        state.savedQueries = tempSavedQueries
+      }
+    },
+    deleteSavedQuery (state, payload) {
+      const tempSavedQueries = [...state.savedQueries]
+      const index = getWithId(tempSavedQueries, payload)[1]
+      if (index !== -1) {
+        tempSavedQueries.splice(index, 1)
+        state.savedQueries = tempSavedQueries
+      }
+    }
+  },
+  actions: {
+    addSavedQuery ({ commit }, payload) {
+      commit('addSavedQuery', payload)
+    },
+    editSavedQuery ({ commit }, payload) {
+      commit('editSavedQuery', payload)
+    },
+    deleteSavedQuery ({ commit }, payload) {
+      commit('deleteSavedQuery', payload)
+    }
+  }
+}