radiocampus: style update

radiocampus/assets/src/components/ASelectFile.vue

@@ -0,0 +1,167 @@
+<template>
+    <a-modal ref="modal" :title="title">
+        <template #bar>
+            <button type="button" class="button small mr-3" v-if="panel == LIST"
+                    @click="showPanel(UPLOAD)">
+                <span class="icon">
+                    <i class="fa fa-upload"></i>
+                </span>
+                <span>{{ labels.upload }}</span>
+            </button>
+
+            <button type="button" class="button small mr-3" v-else
+                    @click="showPanel(LIST)">
+                <span class="icon">
+                    <i class="fa fa-list"></i>
+                </span>
+                <span>{{ labels.list }}</span>
+            </button>
+        </template>
+        <template #default>
+            <a-file-upload ref="upload" v-if="panel == UPLOAD"
+                    :url="uploadUrl"
+                    :label="uploadLabel" :field-name="uploadFieldName"
+                    @load="uploadDone">
+                <template #form="data">
+                    <slot name="upload-form" v-bind="data"></slot>
+                </template>
+                <template #preview="data">
+                    <slot name="upload-preview" v-bind="data"></slot>
+                </template>
+            </a-file-upload>
+            <div class="a-select-file" v-else>
+                <div ref="list"
+                        :class="['a-select-file-list', listClass]">
+                    <!-- tiles -->
+                    <div v-if="prevUrl">
+                        <a href="#" @click="load(prevUrl)">
+                            {{ labels.show_previous }}
+                        </a>
+                    </div>
+
+                    <template v-for="item in items" v-bind:key="item.id">
+                        <div :class="['file-preview', this.item && item.id == this.item.id && 'active']" @click="select(item)">
+                            <slot :item="item" :load="load" :lastUrl="lastUrl"></slot>
+                            <a-action-button v-if="deleteUrl"
+                                class="has-text-danger small float-right"
+                                icon="fa fa-trash"
+                                :confirm="labels.confirm_delete"
+                                method="DELETE"
+                                :url="deleteUrl.replace('123', item.id)"
+                                @done="load(lastUrl)">
+                            </a-action-button>
+                        </div>
+                    </template>
+
+                    <div v-if="nextUrl">
+                        <a href="#" @click="load(nextUrl)">
+                            {{ labels.show_next }}
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </template>
+        <template #footer>
+            <slot name="footer" :item="item">
+                <span class="mr-3" v-if="item">{{ item.name }}</span>
+            </slot>
+            <button type="button" v-if="panel == LIST" class="button align-right"
+                @click="selected">
+                {{ labels.select_file }}
+            </button>
+        </template>
+    </a-modal>
+</template>
+<script>
+import AModal from "./AModal"
+import AActionButton from "./AActionButton"
+import AFileUpload from "./AFileUpload"
+
+export default {
+    emit: ["select"],
+
+    components: {AActionButton, AFileUpload, AModal},
+
+    props: {
+        title: { type: String },
+        labels: Object,
+        listClass: {type: String, default: ""},
+
+        // List url
+        listUrl: { type: String },
+
+        // URL to delete an item, where "123" is replaced by
+        // the item id.
+        deleteUrl: {type: String },
+
+        uploadUrl: { type: String },
+        uploadFieldName: { type: String, default: "file" },
+        uploadLabel: { type: String, default: "Upload a file" },
+    },
+
+    data() {
+        return {
+            LIST: 0,
+            UPLOAD: 1,
+
+            panel: 0,
+            item: null,
+            items: [],
+            nextUrl: "",
+            prevUrl: "",
+            lastUrl: "",
+        }
+    },
+
+    methods: {
+        open() {
+            this.$refs.modal.open()
+        },
+
+        close() {
+            this.$refs.modal.close()
+        },
+
+        showPanel(panel) {
+            this.panel = panel
+        },
+
+        load(url) {
+            return fetch(url || this.listUrl).then(
+                response => response.ok ? response.json() : Promise.reject(response)
+            ).then(data => {
+                this.lastUrl = url
+                this.nextUrl = data.next
+                this.prevUrl = data.previous
+                this.items = data.results
+                this.showPanel(this.LIST)
+
+                this.$forceUpdate()
+                this.$refs.list.scroll(0, 0)
+                return this.items
+            })
+        },
+
+        //! Select an item
+        select(item) {
+            this.item = item;
+        },
+
+        //! User click on select button (confirm selection)
+        selected() {
+            this.$emit("select", this.item)
+            this.close()
+        },
+
+        uploadDone(reload=false) {
+            reload && this.load().then(items => {
+                this.item = items[0]
+            })
+        },
+    },
+
+    mounted() {
+        this.load()
+    },
+}
+</script>