radiocampus: style update

radiocampus/assets/src/components/AManyToManyEdit.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="a-m2m-edit">
+        <table class="table is-fullwidth">
+            <thead>
+                <tr>
+                    <th>
+                        <slot name="items-title"></slot>
+                    </th>
+                    <th style="width: 1rem">
+                        <span class="icon">
+                            <i class="fa fa-trash"/>
+                        </span>
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                <template v-for="item of items" :key="item.id">
+                    <tr :class="[item.created && 'has-text-info', item.deleted && 'has-text-danger']">
+                        <td>
+                            <slot name="item" :item="item">
+                                {{ item.data }}
+                            </slot>
+                        </td>
+                        <td class="align-center">
+                            <input type="checkbox" class="checkbox" @change="item.deleted = $event.target.checked">
+                        </td>
+                    </tr>
+                </template>
+            </tbody>
+        </table>
+        <div>
+            <label>
+                <span class="icon">
+                    <i class="fa fa-plus"/>
+                </span>
+                Add
+            </label>
+            <a-autocomplete ref="autocomplete" v-bind="autocomplete"
+                @select="onSelect">
+                <template #item="{item}">
+                    <slot name="autocomplete-item" :item="item">{{ item }}</slot>
+                </template>
+            </a-autocomplete>
+        </div>
+    </div>
+</template>
+<script>
+import Model, { Set } from "../model.js"
+import AAutocomplete from "./AAutocomplete.vue"
+
+export default {
+    components: {AAutocomplete},
+    props: {
+        model: {type: Function, default: Model },
+        // List url
+        url: String,
+        // POST url
+        commitUrl: String,
+        // v-bind to autocomplete search box
+        autocomplete: {type: Object },
+
+        source_id: Number,
+        source_field: String,
+        target_field: String,
+    },
+
+    data() {
+        return {
+            set: new Set(this.model, {url: this.url, unique: true}),
+        }
+    },
+
+    computed: {
+        items() { return this.set?.items || [] },
+        initials() {
+            let obj = {}
+            obj[this.source_id_attr] = this.source_id
+            return obj
+        },
+
+        source_id_attr() { return this.source_field + "_id" },
+        target_id_attr() { return this.target_field + "_id" },
+        target_ids() { return this.set?.items.map(i => i.data[this.target_id_attr]) },
+    },
+
+    methods: {
+        onSelect(index, item, value) {
+            if(this.target_ids.indexOf(item.id) != -1)
+                return
+
+            let obj = {...this.initials}
+            obj[this.target_field] = {...item}
+            obj[this.target_id_attr] = item.id
+            this.set.push(obj)
+            this.$refs.autocomplete.reset()
+        },
+
+        save() {
+            this.set.commit(this.commitUrl, {
+                fields: [...Object.keys(this.initials), this.target_id_attr]
+            })
+        },
+    },
+
+    mounted() {
+        this.set.fetch()
+    },
+}
+</script>