Mercurial > gemma
view client/src/components/map/contextbox/Staging.vue @ 1299:2738a6ae9ad8
fontawesome 4 -> 5
An icon was not displayed on a specific system/environment.
No clue why... good moment to switch to version 5 of fontawesome
author | Markus Kottlaender <markus@intevation.de> |
---|---|
date | Fri, 23 Nov 2018 10:24:29 +0100 |
parents | bcfd038b97a2 |
children | d675e6439aa5 |
line wrap: on
line source
<template> <div class="w-90"> <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center"> <font-awesome-icon icon="clipboard-check" class="mr-2"></font-awesome-icon> Staging Area </h6> <table class="table mb-0"> <thead> <tr> <th>Name</th> <th>Datatype</th> <th>Importdate</th> <th>ImportID</th> <th> </th> <th> </th> </tr> </thead> <tbody v-if="filteredData.length"> <tr v-for="data in filteredData" :key="data.id"> <td> <a @click="zoomTo(data.location)" href="#">{{ data.name }}</a> </td> <td>{{ data.type }}</td> <td>{{ data.date }}</td> <td>{{ data.importID }}</td> <td> <button @click="toggleApproval(data.id, $options.STATES.APPROVED)" :class="{btn:true, 'btn-sm':true, 'btn-outline-success':needsApproval(data) || isRejected(data), 'btn-success':isApproved(data)}" > <font-awesome-icon icon="check"></font-awesome-icon> </button> </td> <td> <button @click="toggleApproval(data.id, $options.STATES.REJECTED)" :class="{btn:true, 'btn-sm':true, 'btn-outline-danger':needsApproval(data) || isApproved(data), 'btn-danger':isRejected(data)}" > <font-awesome-icon icon="times"></font-awesome-icon> </button> </td> </tr> </tbody> <tbody v-else> <tr> <td class="text-center" colspan="6">No results.</td> </tr> </tbody> </table> <div class="p-3" v-if="filteredData.length"> <button class="btn btn-info">Confirm</button> </div> </div> </template> <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): * Thomas Junk <thomas.junk@intevation.de> */ import { mapState } from "vuex"; export default { STATES: { NEEDSAPPROVAL: "NEEDSAPPROVAL", APPROVED: "APPROVED", REJECTED: "REJECTED" }, data() { return { demodata: [ { id: 1, name: "B1", date: "2018-11-19 10:23", location: [16.5364, 48.1471], status: "NEEDSAPPROVAL", importID: "123456789", type: "bottleneck" }, { id: 2, name: "B2", date: "2018-11-19 10:24", location: [16.5364, 48.1472], status: "NEEDSAPPROVAL", importID: "123456789", type: "bottleneck" }, { id: 3, name: "s1", date: "2018-11-13 10:25", location: [16.5364, 48.1473], status: "NEEDSAPPROVAL", importID: "987654321", type: "soundingresult" }, { id: 4, name: "s2", date: "2018-11-13 10:26", location: [16.5364, 48.1474], status: "NEEDSAPPROVAL", importID: "987654321", type: "soundingresult" } ] }; }, computed: { ...mapState("application", ["searchQuery"]), filteredData() { return this.demodata.filter(data => { const nameFound = data.name .toLowerCase() .includes(this.searchQuery.toLowerCase()); const dateFound = data.date .toLowerCase() .includes(this.searchQuery.toLowerCase()); const locationFound = data.location.find(coord => { return coord .toString() .toLowerCase() .includes(this.searchQuery.toLowerCase()); }); const statusFound = data.status .toLowerCase() .includes(this.searchQuery.toLowerCase()); const importIDFound = data.importID .toLowerCase() .includes(this.searchQuery.toLowerCase()); const typeFound = data.type .toLowerCase() .includes(this.searchQuery.toLowerCase()); return ( nameFound || dateFound || locationFound || statusFound || importIDFound || typeFound ); }); } }, methods: { needsApproval(item) { return item.status === this.$options.STATES.NEEDSAPPROVAL; }, isRejected(item) { return item.status === this.$options.STATES.REJECTED; }, isApproved(item) { return item.status === this.$options.STATES.APPROVED; }, zoomTo(coordinates) { this.$store.commit("map/moveMap", { coordinates: coordinates, zoom: 17, preventZoomOut: true }); }, toggleApproval(id, newStatus) { const stagedResult = this.demodata.find(e => { return e.id === id; }); if (stagedResult.status === newStatus) { stagedResult.status = this.$options.STATES.NEEDSAPPROVAL; } else { stagedResult.status = newStatus; } } } }; </script> <style lang="sass" scoped> .table th, td font-size: 0.9rem border-top: 0px !important border-bottom-width: 1px text-align: left padding: 0.5rem !important </style>