Mercurial > gemma
view client/src/components/Popup.vue @ 5721:0500d76e074b uploadwg
Fixed eraseObsoleteGaugesSQL by reintroducing matching on users CC.
The condition was removed when introducing file upload, but that leads
to too many gauges being removed.
author | Sascha Wilde <wilde@sha-bang.de> |
---|---|
date | Fri, 19 Apr 2024 16:52:14 +0200 |
parents | 84d01a536bec |
children |
line wrap: on
line source
<template> <transition name="fade"> <div class="overlay d-flex justify-content-center align-items-center" v-if="popup" > <div class="popup"> <UIBoxHeader :icon="popup.icon" :title="popup.title" :closeCallback="close" /> <div :class="{ 'p-3': popup.padding !== false }" v-html="popup.content" ></div> <div v-if="popup.dateSelection" class="dateselection d-flex flex-column mx-2" > <div class="d-flex flex-column text-left"> <small class="my-auto text-muted"> <translate>From</translate> </small> <input type="date" v-model="from" /> </div> <div class="text-left d-flex flex-column"> <small class="my-auto text-muted"> <translate>To</translate> </small> <input type="date" v-model="to" /> </div> </div> <div class="popup-footer" v-if="popup.cancel || popup.confirm"> <button class="btn btn-sm btn-warning" @click="cancel" v-if="popup.cancel" > <font-awesome-icon :icon="popup.cancel.icon" class="fa-fw" v-if="popup.cancel.icon" /> <span v-if="popup.cancel.label">{{ popup.cancel.label }}</span> <translate v-else>Cancel</translate> </button> <span /> <button class="btn btn-sm btn-info" @click="confirm" v-if="popup.confirm" > <font-awesome-icon :icon="popup.confirm.icon" class="fa-fw" v-if="popup.confirm.icon" /> <span v-if="popup.confirm.label">{{ popup.confirm.label }}</span> <translate v-else>Confirm</translate> </button> </div> </div> </div> </transition> </template> <style scoped> .dateselection { width: 250px; } .overlay { position: fixed; z-index: 9; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.3); } .overlay .popup { display: flex; flex-direction: column; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); background-color: #fff; border-radius: 0.25rem; max-width: 320px; } .overlay .popup .popup-header { display: flex; justify-content: space-between; align-items: center; padding-left: 0.5rem; border-bottom: 1px solid #dee2e6; color: var(--color-info); margin-bottom: 0; padding: 0.25rem; font-weight: bold; } .overlay .popup .popup-header .popup-title { padding-left: 0.25rem; } .overlay .popup .popup-header .popup-title .popup-icon { margin-right: 0.25rem; } .overlay .popup .popup-header .popup-close { color: #aaa; padding: 3px 5px; border-radius: 0.25rem; cursor: pointer; transition: background-color 0.3s, color 0.3s; } .overlay .popup .popup-header .popup-close:hover { color: #888; background-color: #eee; } .overlay .popup .popup-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #dee2e6; padding: 0.25rem; } </style> <script> /* This is Free Software under GNU Affero General Public License v >= 3.0 * without warranty, see README.md and license for details. * * SPDX-License-Identifier: AGPL-3.0-or-later * License-Filename: LICENSES/AGPL-3.0.txt * * Copyright (C) 2018 by via donau * – Österreichische Wasserstraßen-Gesellschaft mbH * Software engineering by Intevation GmbH * * Author(s): * Markus Kottländer <markus.kottlaender@intevation.de> */ import { mapState } from "vuex"; import { format, subMonths } from "date-fns"; const isoFormat = date => { return format(date, "YYYY-MM-DD"); }; export default { name: "popup", data() { return { from: isoFormat(subMonths(new Date(), 1)), to: isoFormat(new Date()) }; }, computed: { ...mapState("application", ["popup"]) }, methods: { confirm() { if (this.popup.confirm && this.popup.confirm.callback) this.popup.confirm.callback({ from: this.from, to: this.to }); this.close(); }, cancel() { if (this.popup.cancel && this.popup.cancel.callback) this.popup.cancel.callback(); this.close(); }, close() { this.$store.commit("application/popup", null); } } }; </script>