[#31420] Edit Vocabulary

app/Http/Controllers/API/ConceptController.php

@@ -8,6 +8,7 @@
 use App\Models\Concept;
 use App\Models\Term;
 use Illuminate\Http\Request;
+use Illuminate\Http\Response;
 use Illuminate\Support\Facades\DB;
 
 class ConceptController extends Controller
@@ -130,9 +131,25 @@ public function show($id)
      * @param  int  $id
      * @return \Illuminate\Http\Response
      */
-    public function update(Request $request, $id)
+    public function update(Request $request, int $id)
     {
-        //
+        $concept = Concept::findOrFail($id);
+        $attributes = $request->all();
+
+        // Sync concept categories
+        if (array_key_exists('conceptCategories', $attributes)) {
+            $category_ids = array_map(function ($category) {
+                return $category['id'];
+            }, $attributes['conceptCategories']);
+
+            $concept->conceptCategories()->sync($category_ids);
+
+            unset($attributes['conceptCategories']);
+        }
+
+        $concept->update($attributes);
+
+        return new Response($concept);
     }
 
     /**

resources/js/api/ConceptService.js

@@ -39,6 +39,15 @@ export default {
     }
   },
 
+  async updateConcept(conceptId, conceptData) {
+    try {
+      const { data } = await apiClient.patch(`/${conceptId}`, conceptData);
+      return [null, data];
+    } catch (error) {
+      return [error];
+    }
+  },
+
   async deleteConcept(conceptId) {
     try {
       const { data } = await apiClient.delete(`/${conceptId}`);

resources/js/api/ConceptSourceService.js

@@ -41,7 +41,7 @@ export default {
 
   async updateConceptSource(conceptSourceId, conceptSourceData) {
     try {
-      const { data } = await apiClient.post(
+      const { data } = await apiClient.patch(
         `/${conceptSourceId}`,
         conceptSourceData,
       );

resources/js/app.js

@@ -35,7 +35,7 @@ import 'bootstrap-vue/dist/bootstrap-vue.css';
 Vue.component('concept', require('./components/Concept.vue').default);
 Vue.component('concept-list', require('./components/Concept/List.vue').default);
 Vue.component('concept', require('./components/Concept/Default.vue').default);
-Vue.component('concept-edit', require('./components/Concept/Edit.vue').default);
+Vue.component('concept-edit', require('./components/Concept/LegacyEdit.vue').default);
 Vue.component(
   'concept-category',
   require('./components/ConceptCategory.vue').default,
@@ -44,23 +44,11 @@ Vue.component(
   'concept-create',
   require('./components/Concept/Create.vue').default,
 );
-Vue.component(
-  'concept-source',
-  require('./components/Source/Default.vue').default,
-);
-Vue.component(
-  'concept-source-edit',
-  require('./components/Source/Edit.vue').default,
-);
 Vue.component(
   'concept-search',
   require('./components/ConceptSearch.vue').default,
 );
 Vue.component('term-list', require('./components/Term/List.vue').default);
-Vue.component(
-  'category-list',
-  require('./components/Category/List.vue').default,
-);
 Vue.component('term-item', require('./components/TermItem.vue').default);
 Vue.component('cpf-form', require('./components/CPFForm.vue').default);
 Vue.component('b-table', BTable);

resources/js/components/CPFForm.vue

@@ -626,7 +626,7 @@
 </template>
 
 <script>
-import { categories } from '../config/catgegories';
+import { categories } from '../config/categories';
 
 export default {
   props: {
@@ -654,7 +654,7 @@ export default {
       relationType: '',
       propertyEditMode: true,
       categories,
-      isVocabularyEditor: this.canEditVocabulary === true,
+      isVocabularyEditor: this.canEditVocabulary === 'true',
       baseURL: '',
     };
   },

resources/js/components/Category/Editable.vue

@@ -1,103 +1,174 @@
 <template>
-  <BInputGroup>
-    <BFormSelect
-      v-model="originalId"
-      @input="updateCategory"
-      :options="getCategories"
-      :class="{ 'alert-info': isDirty }"
-    ></BFormSelect>
+  <div>
+    <BInputGroup>
+      <div
+        v-if="originalId"
+        class="category-item custom-select"
+        :class="{ 'font-weight-bold': isPrimary }"
+      >
+        {{ selectedValue }}
+      </div>
+      <BFormSelect
+        v-else
+        v-model="selectedId"
+        @change="trackChanges"
+        :options="getCategories"
+        :class="{ 'alert-info': isDirty() }"
+        aria-placeholder="Select a category"
+        placeholder="Select a category"
+      ></BFormSelect>
 
-    <BInputGroupAppend>
-      <BButton
-        @click="emitSaveCategory"
-        class="btn btn-info"
-        title="Save"
-        v-show="isDirty"
-      ><i class="fa fa-floppy-o"></i
-      ></BButton>
-      <BButton
-        @click="emitMakeCategoryPrimary"
-        v-if="!isPrimary"
-        class="btn btn-primary"
-        title="Make Primary"
-      ><i class="fa fa-check-square-o"></i
-      ></BButton>
-      <BButton
-        @click="emitDeleteCategory"
-        v-if="!isPrimary"
-        class="btn btn-danger"
-        title="Delete"
-      ><i class="fa fa-trash"></i
-      ></BButton>
-    </BInputGroupAppend>
-  </BInputGroup>
+      <BInputGroupAppend>
+        <BButton
+          @click="emitSaveCategory"
+          class="btn btn-info"
+          title="Save"
+          v-show="!originalId && isDirty()"
+          ><i class="fa fa-floppy-o"></i
+        ></BButton>
+        <BButton @click="showDeleteModal" class="btn btn-danger" title="Delete"
+          ><i class="fa fa-trash"></i
+        ></BButton>
+      </BInputGroupAppend>
+    </BInputGroup>
+
+    <BModal
+      id="delete-confirmation-modal"
+      ref="deleteModal"
+      title="Confirm Deletion"
+      @hide="resetCategory"
+      @shown="focusConfirmDeleteButton"
+      hide-footer
+    >
+      <div class="d-block text-center">
+        <p>Are you sure you want to delete this category?</p>
+        <BButton variant="danger" ref="confirmDeleteButton" @click="confirmDelete">Yes, delete</BButton>
+        <BButton variant="secondary" @click="hideDeleteModal">Cancel</BButton>
+      </div>
+    </BModal>
+  </div>
 </template>
 
 <script>
 import {
   BButton,
+  BFormInput,
   BFormSelect,
   BInputGroup,
   BInputGroupAppend,
+  BModal,
 } from 'bootstrap-vue';
+import { categories } from '../../config/categories';
 
 export default {
   data() {
     return {
-      originalId: this.category.id,
-      originalValue: this.category.value,
-      selectedId: this.category.id,
+      selectedId: this.categoryId,
+      originalId: this.categoryId,
+      selectedValue: this.categoryValue,
+      previous: null,
+      categories,
     };
   },
   model: {
-    prop: 'category',
     event: 'input',
   },
   props: {
-    category: Object,
-    isPrimary: Boolean,
+    categoryId: {
+      type: Number,
+      default: null,
+    },
+    isPrimary: {
+      type: Boolean,
+      default: false,
+    },
+    categoryValue: {
+      type: String,
+      default: null,
+    },
+    categoryIndex: {
+      type: Number,
+      default: null,
+    },
+    selectedCategories: {
+      type: Array,
+      default: () => [],
+    },
   },
   components: {
+    BFormInput,
     BInputGroup,
     BInputGroupAppend,
     BFormSelect,
     BButton,
   },
   computed: {
     getCategories() {
-      return this.$parent.getCategories(this.getCategory.id);
-    },
-    isDirty() {
-      if(!this.category.value) {
-        return !!this.category.id;
+      const filtered = this.categories.filter((cat) => {
+        return (
+          this.selectedCategories.filter((currentCat) => {
+            return currentCat === parseInt(cat.value);
+          }).length === 0 || this.categoryId === parseInt(cat.value)
+        );
+      });
+
+      if (!this.selectedId && filtered.length) {
+        filtered.unshift({
+          value: null,
+          text: 'Select a category',
+          disabled: true,
+        });
       }
-      return parseInt(this.originalId) !== this.category.id;
-    },
-    getCategory() {
-      return this.category;
-    },
-    resetCategory() {
-      this.originalId = this.getCategory.id;
-      this.originalValue = this.getCategory.value;
+
+      return filtered;
     },
   },
   methods: {
-    updateCategory(categoryId) {
-      this.selectedId = parseInt(categoryId);
-      this.$emit('change', { ...this.getCategory, category: this.selectedId, dirty: this.isDirty });
+    trackChanges() {
+      const selectedId = parseInt(this.selectedId);
+
+      this.$emit('change', {
+        id: selectedId,
+        dirty: this.isDirty(),
+        previous: this.previous,
+      });
+      this.previous = selectedId;
     },
     emitSaveCategory() {
-      console.log('newId',categoryId);
-      console.log('oldId',this.category.id);
-
-      this.$emit('save-category', this.selectedId, this.category.id);
+      const selectedId = parseInt(this.selectedId);
+      this.$emit('save-category', selectedId, this.categoryIndex);
+      this.originalId = selectedId;
+      this.selectedValue = this.categories.find(
+        (cat) => parseInt(cat.value) === this.originalId,
+      ).text;
+    },
+    showDeleteModal() {
+      this.$refs.deleteModal.show();
+    },
+    focusConfirmDeleteButton() {
+      this.$refs.confirmDeleteButton.focus();
     },
-    emitMakeCategoryPrimary() {
-      this.$emit('make-category-primary', this.getCategory);
+    hideDeleteModal() {
+      this.$refs.deleteModal.hide();
     },
-    emitDeleteCategory() {
-      this.$emit('delete-category', this.getCategory);
+    confirmDelete() {
+      this.$emit('delete-category', this.categoryId, this.categoryIndex);
+      this.hideDeleteModal();
+    },
+    isDirty() {
+      if (!this.selectedId) {
+        return !!this.categoryId;
+      }
+      return this.originalId !== parseInt(this.selectedId);
+    },
+    resetCategory() {
+      this.selectedId = this.categoryId;
     },
   },
 };
 </script>
+<style>
+.category-item.custom-select {
+  background-image: none;
+}
+</style>