Add browse source scaffold #244

app/controllers/tasks/sounds/browse_controller.rb

@@ -0,0 +1,4 @@
+class Tasks::Sounds::BrowseController < ApplicationController
+  include TaskControllerConfiguration
+
+end

app/javascript/packs/application.js

@@ -117,3 +117,4 @@ import '../vue/tasks/unify/objects/main.js'
 import '../vue/tasks/images/new_filename_depicting_image/main.js'
 import '../vue/tasks/biological_associations/new/main.js'
 import '../vue/tasks/otus/duplicates/main.js'
+import '../vue/tasks/sounds/browse/main.js'

app/javascript/vue/routes/endpoints/Sound.js

@@ -0,0 +1,12 @@
+import baseCRUD from './base'
+
+const permitParams = {
+  sound: {
+    name: Number,
+    sound_file: String
+  }
+}
+
+export const Sound = {
+  ...baseCRUD('sounds', permitParams)
+}

app/javascript/vue/routes/endpoints/index.js

@@ -58,6 +58,7 @@ export { ProtocolRelationship } from './ProtocolRelationship'
 export { Repository } from './Repository'
 export { Serial } from './Serial'
 export { SoftValidation } from './SoftValidation'
+export { Sound } from './Sound'
 export { Source } from './Source'
 export { SqedDepiction } from './SqedDepiction'
 export { Tag } from './Tag'

app/javascript/vue/tasks/sounds/browse/App.vue

@@ -0,0 +1,31 @@
+<template>
+  <h1>Browse sound</h1>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import { Sound } from '@/routes/endpoints'
+import { getPagination, URLParamsToJSON } from '@/helpers'
+import VPagination from '@/components/pagination.vue'
+
+const per = ref(50)
+const list = ref([])
+const page = ref(1)
+const currentSound = ref(null)
+const pagination = ref(null)
+
+Sound.where({ per: 50 }).then((response) => {
+  pagination.value = response
+})
+
+onBeforeMount(() => {
+  const params = URLParamsToJSON(window.location.href)
+  const soundId = params.sound_id
+
+  if (soundId) {
+    Sound.find(soundId).then(({ body }) => {
+      currentSound.value = body
+    })
+  }
+})
+</script>

app/javascript/vue/tasks/sounds/browse/components/SoundList.vue

@@ -0,0 +1,26 @@
+<template>
+  <table>
+    <thead>
+      <tr>
+        <th></th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="sound in sounds"
+        :key="sound.id"
+      >
+        <td>{{ sound.name }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup>
+const props = defineProps({
+  sounds: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>

app/javascript/vue/tasks/sounds/browse/main.js

@@ -0,0 +1,16 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+function initApp(element) {
+  const app = createApp(App)
+
+  app.mount(element)
+}
+
+document.addEventListener('turbolinks:load', () => {
+  const el = document.querySelector('#vue-browse-sound')
+
+  if (el) {
+    initApp(el)
+  }
+})

app/views/tasks/sounds/browse/index.html.erb

@@ -0,0 +1 @@
+<div id="vue-browse-sound"></div>

config/interface/hub/user_tasks.yml

@@ -1006,3 +1006,10 @@ summarize_projects_controlled_vocabulary_terms_task:
   categories:
   status: prototype
   description: 'Visualize controlled vocabulary terms across the projects you are a member of.'
+browse_sounds_task:
+  hub: true
+  name: 'Browse sounds'
+  related:
+  categories:
+  status: prototype
+  description: 'TODO: Task description'

config/routes/tasks.rb

@@ -1,4 +1,10 @@
 scope :tasks do
+  scope :sounds do
+    scope :browse, controller: 'tasks/sounds/browse' do
+      get '/', action: :index, as: 'browse_sounds_task'
+    end
+  end
+
   scope :controlled_vocabulary_terms do
     scope :projects_summary, controller: 'tasks/controlled_vocabulary_terms/projects_summary' do
       get '/', action: :index, as: 'summarize_projects_controlled_vocabulary_terms_task'