src/views/components/topology/topo-group/group-item.vue

/**
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

<template>
  <div class="group-wrapper">
    <div class="group-item ell" :class="{ active: active }" @click="$emit('select', data.id)">
      <RkButton icon="close" size="sm" class="mr-5" :ghost="true" @click="$emit('delete')" />
      <span class="mr-5">{{ data.name }}</span>
    </div>
    <div class="group-services">
      <div class="ell mb-10" v-for="i in servicesMap" :key="i.key">
        <input
          type="checkbox"
          @click="
            (e) => {
              !e.target.checked
                ? DELETE_GROUP_SERVICE({ id: data.id, service: i })
                : ADD_GROUP_SERVICE({ id: data.id, service: i });
            }
          "
          :checked="data.services.some((service) => service.label === i.label)"
        />
        <span>{{ i.label }}</span>
      </div>
      <RkButton size="sm" class="mr-5" @click="$emit('select', data.id)">Render</RkButton>
    </div>
  </div>
</template>
<script lang="ts">
  import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
  import { Action, Getter, Mutation, State } from 'vuex-class';
  import { State as TopoGroupState } from '@/store/modules/topology/group';
  @Component
  export default class TopoGroupItem extends Vue {
    @Prop() private active!: boolean;
    @Prop() private data!: any;
    @Prop() private servicesMap!: any;
    @Mutation('rocketTopoGroup/ADD_GROUP_SERVICE') private ADD_GROUP_SERVICE: any;
    @Mutation('rocketTopoGroup/DELETE_GROUP_SERVICE') private DELETE_GROUP_SERVICE: any;
  }
</script>
<style lang="scss">
  .topo-group {
    .group-wrapper {
      position: relative;
      margin-bottom: 5px;
      &:hover {
        .group-services {
          display: block;
        }
      }
    }
    .group-services {
      display: none;
      position: absolute;
      background-color: #252a2f;
      padding: 10px;
      left: 110px;
      bottom: 0;
      color: #ccc;
      border-radius: 4px;
    }
    .group-item {
      position: relative;
      user-select: none;
      cursor: pointer;
      background: #252a2f66;
      color: #ccc;
      height: 26px;
      width: 110px;
      line-height: 26px;
      padding-right: 10px;
      border-radius: 4px;
      &:hover,
      &.active {
        color: #fff;
        background-color: #252a2f;
      }
      &.default {
        padding-left: 10px;
      }
    }
  }
</style>