Merge pull request #54 from ScilifelabDataCentre/new-frontend

New frontend

frontend/quasar.config.js

@@ -123,7 +123,10 @@ module.exports = configure(function (/* ctx */) {
 
     // animations: 'all', // --- includes all animations
     // https://v2.quasar.dev/options/animations
-    animations: [],
+    animations: [
+      'fadeIn',
+      'fadeOut',
+    ],
 
     // https://v2.quasar.dev/quasar-cli-vite/quasar-config-js#property-sourcefiles
     // sourceFiles: {

frontend/src/boot/axios.js

@@ -7,7 +7,7 @@ import axios from 'axios'
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
-const api = axios.create({ baseURL: 'https://forms.dckube.scilifelab.se/api/v1' })
+const api = axios.create({ baseURL: '/api/v1' })
 
 export default boot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api

frontend/src/components/DeleteDialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <q-dialog v-model="showDialog">
+    <q-card>
+      <q-card-section class="row items-center">
+        <q-avatar icon="delete" text-color="negative" />
+        <span class="q-ml-sm">Are you sure you want to delete this {{ entryType }}?</span>
+      </q-card-section>
+
+      <q-card-actions align="right">
+        <q-btn
+	  v-close-popup
+	  flat
+          label="Delete"
+          color="negative"
+	  class="confirm-delete"
+          @click="confirmDelete" />
+        <q-btn
+	  v-close-popup
+	  flat
+	  label="Cancel"
+	  color="grey-7" />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'DeleteDialog',
+  
+  props: {
+    modelValue: {  // show
+      type: Boolean,
+      required: true,
+    },
+    entryType: {
+      type: String,
+      default: "form",
+    }
+  },
+
+  emits: ['update:modelValue', 'delete-confirmed'],
+
+  computed: {
+    showDialog: {
+      get () {
+	return this.modelValue
+      },
+      set (newValue) {
+	this.$emit('update:modelValue', newValue)
+      }
+    }
+  },
+
+  methods: {
+    confirmDelete() {
+      this.$emit('delete-confirmed');
+    },
+  },
+})
+</script>

frontend/src/components/FormBrowser.vue

@@ -0,0 +1,173 @@
+<template>
+  <q-table
+    style="max-width: 97% ;min-width: 850px"
+    title="Forms"
+    :rows="entries"
+    :columns="columns"
+    row-key="identifier"
+    :pagination="pagination"
+    :filter="filter"
+    :loading="loading"
+    no-data-label="No entries found"
+    :no-results-label="filter + ' does not match any entries'"
+    >
+    <template #top-right>
+      <q-input
+	v-model="filter"
+	rounded
+	outlined
+	dense
+	debounce="300"
+	placeholder="Search">
+        <template #append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+    </template>
+    <template #body="props">
+      <q-tr :props="props" @click=selectForm(props)>
+        <q-td key="title" :props="props">
+          {{ props.row.title }}
+        </q-td>
+        <q-td key="identifier" :props="props">
+          {{ props.row.identifier }}
+        </q-td>
+        <q-td key="recaptcha" :props="props">
+          <q-icon
+	    :name="props.row.recaptcha ? 'check_circle' : 'cancel'"
+	    :color="props.row.recaptcha ? 'positive' : 'negative'"
+	    size="1.5em">
+          </q-icon>
+        </q-td>
+        <q-td key="sendEmail" :props="props">
+          <q-icon
+	    :name="props.row.email ? 'check_circle' : 'cancel'"
+	    :color="props.row.email ? 'accent' : 'secondary'"
+	    size="1.5em">
+          </q-icon>
+        </q-td>
+        <q-td key="redirect" :props="props">
+          <q-icon
+	    :name="props.row.redirect ? 'check_circle' : 'cancel'"
+	    :color="props.row.redirect ? 'accent' : 'secondary'"
+	    size="1.5em">
+          </q-icon>
+        </q-td>
+      </q-tr>
+    </template>
+  </q-table>
+</template>
+
+<script>
+import { defineComponent } from 'vue'
+
+import StringListEditor from 'components/StringListEditor.vue'
+
+export default defineComponent({
+  name: 'FormBrowser',
+
+  props: {
+    modelValue: {
+      type: String,
+      required: true,
+    },
+    refreshNeeded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['update:modelValue', 'refresh-done'],
+
+  data () {
+    return {
+      entries: [],
+      editData: {},
+      isDeleting: false,
+      toDelete: {},
+      filter: '',
+      loading: false,
+      loadError: false,
+      showEditTemplateDialog: false,
+      showDeleteWarning: false,
+      currrentEditTemplate: {},
+      currrentEditTemplateText: "",
+      currrentEditTemplateType: "",
+      pagination: {
+        rowsPerPage: 20
+      },
+      columns: [
+        {
+          name: 'title',
+          label: 'Title',
+          field: 'title',
+          required: true,
+	  align: 'left',
+          sortable: true
+        },
+        {
+          name: 'identifier',
+          label: 'Identifier',
+          field: 'identifier',
+          required: true,
+          sortable: true,
+        },
+        {
+          name: 'recaptcha',
+          label: 'reCAPTCHA',
+          field: 'recaptcha',
+          required: true,
+          sortable: true,
+        },
+        {
+          name: 'sendEmail',
+          label: 'Send email',
+          field: 'email',
+          required: true,
+          sortable: true,
+        },
+        {
+          name: 'redirect',
+          label: 'Redirect',
+          field: 'redirect',
+          required: true,
+          sortable: true,
+        },
+      ]
+    }
+  },
+
+  watch: {
+    refreshNeeded (newValue) {
+      if (newValue === true) {
+	this.getEntries();
+      }
+    },
+  },
+
+  mounted () {
+    this.getEntries();
+  },
+
+  methods: {
+    getEntries () {
+      this.loading = true;
+      this.$api
+	.get('/form')
+        .then((response) => {
+	  this.entries = response.data['forms']
+	})
+      .catch((err) => {
+	this.loadError = true;
+      })
+	.finally(() => {
+	  this.loading = false
+	  this.$emit('refresh-done')
+	});
+    },
+    selectForm(props) {
+      this.$emit('update:modelValue', props.row.identifier);
+    },
+  },
+})
+</script>