<commit_before><template>
    <div class="mb-4">
        <input type="hidden" name="file_ids" :value="fileIds.join()" />
        <div class="form-group">
            <label>
                <span v-if="label">{{ label }}</span>
                <span v-else>{{ $t('Files') }}</span>
            </label>
            <p>
                <button class="btn btn-sm btn-secondary mr-2" @click="openFilepicker" type="button">
                    <i class="fa fa-plus text-white-50"></i> {{ $t('Add files') }}
                </button>
            </p>
        </div>

        <draggable class="filemanager" v-model="files" group="files" @start="drag = true" @end="drag = false">
            <div
                class="filemanager-item filemanager-item-with-name filemanager-item-file filemanager-item-removable"
                v-for="file in files"
                :id="'item_' + file.id"
                :key="file.id"
            >
                <div class="filemanager-item-wrapper">
                    <button class="filemanager-item-removable-button" @click="remove(file)" type="button">
                        <svg
                            width="12"
                            height="12"
                            viewBox="0 0 1792 1792"
                            fill="currentColor"
                            xmlns="http://www.w3.org/2000/svg"
                        >
                            <path
                                d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"
                            />
                        </svg>
                    </button>
                    <div class="filemanager-item-icon" v-if="file.type === 'i'">
                        <div class="filemanager-item-image-wrapper">
                            <img
                                class="filemanager-item-image"
                                :src="file.thumb_sm"
                                :alt="file.alt_attribute_translated"
                            />
                        </div>
                    </div>
                    <div class="filemanager-item-icon" :class="'filemanager-item-icon-' + file.type" v-else></div>
                    <div class="filemanager-item-name">{{ file.name }}</div>
                </div>
            </div>
        </draggable>
    </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
    components: {
        draggable,
    },
    props: {
        label: {
            type: String,
        },
        initFiles: {
            type: Array,
            required: true,
        },
    },
    data() {
        return {
            files: this.initFiles,
            loading: false,
        };
    },
    mounted() {
        this.$root.$on('filesAdded', (files) => {
            for (var i = files.length - 1; i >= 0; i--) {
                if (this.files.find(({ id }) => id === files[i].id) === undefined) {
                    this.files.push(files[i]);
                }
            }
        });
    },
    computed: {
        fileIds() {
            let fileIds = [];
            for (var i = 0; i < this.files.length; i++) {
                fileIds.push(this.files[i].id);
            }
            return fileIds;
        },
    },
    methods: {
        openFilepicker() {
            let options = {
                open: true,
                multiple: true,
                overlay: true,
                single: false,
                modal: true,
            };
            this.$root.$emit('openFilepicker', options);
        },
        remove(file) {
            let index = this.files.indexOf(file);
            this.files.splice(index, 1);
        },
    },
};
</script><commit_msg>Update FilesField.vue<commit_after><template>
    <div class="mb-4">
        <div class="form-group">
            <label :for="field">
                <span v-if="label"> {{ label }} </span>
                <span v-else>
                    {{ type === 'document' ? $t('Document') : $t('Image') }}
                </span>
            </label>
            <input type="hidden" :name="field" :id="field" :rel="field" v-model="fileId" />
            <div>
                <div
                    v-if="file !== null"
                    class="filemanager-item filemanager-item-with-name filemanager-item-removable"
                >
                    <div class="filemanager-item-wrapper">
                        <button class="filemanager-item-removable-button" type="button" @click="remove">
                            <svg
                                width="12"
                                height="12"
                                viewBox="0 0 1792 1792"
                                fill="currentColor"
                                xmlns="http://www.w3.org/2000/svg"
                            >
                                <path
                                    d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"
                                />
                            </svg>
                        </button>
                        <div class="filemanager-item-icon" v-if="file.type === 'i'">
                            <div class="filemanager-item-image-wrapper">
                                <img class="filemanager-item-image" :src="file.thumb_sm" :alt="file.alt" />
                            </div>
                        </div>
                        <div class="filemanager-item-icon" :class="'filemanager-item-icon-' + file.type" v-else></div>
                        <div class="filemanager-item-name">{{ file.name }}</div>
                    </div>
                </div>
            </div>
            <div>
                <button v-if="file === null" @click="openFilepicker" class="btn btn-sm btn-secondary" type="button">
                    <span class="fa fa-plus fa-fw text-white-50"></span> {{ $t('Add') }}
                </button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        field: {
            type: String,
            required: true,
        },
        label: {
            type: String,
        },
        type: {
            type: String,
            required: true,
            validator: function (value) {
                // The value must match one of these strings
                return ['image', 'document'].indexOf(value) !== -1;
            },
        },
        initFile: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            file: this.initFile,
            choosingFile: false,
        };
    },
    computed: {
        fileId() {
            if (this.file !== null) {
                return this.file.id;
            }
            return null;
        },
    },
    mounted() {
        this.$root.$on('fileAdded', (file) => {
            if (this.choosingFile === true) {
                this.file = file;
            }
            this.choosingFile = false;
        });
    },
    methods: {
        remove() {
            this.file = null;
        },
        openFilepicker() {
            this.choosingFile = true;
            let options = {
                open: true,
                multiple: false,
                overlay: true,
                single: true,
                modal: true,
            };
            this.$root.$emit('openFilepicker', options);
        },
    },
};
</script>
{'fraction_non_alphanumeric': 0.13871582962492054, 'fraction_numerical': 0.051875397329942785, 'mean_word_length': 1.0870257362695674, 'pattern_counts': {'":': 0, '<': 86, '<?xml version=': 0, '>': 89, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 1, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2262020', 'n_tokens_mistral': 2531, 'n_tokens_neox': 2164, 'n_words': 410}