diff --git a/model/client.go b/model/client.go index 4a40b279e8a20f9bd3ac35ad44add8bd30eb5893..07711d777c9fd04b301da34d85b216d6e568d42d 100644 --- a/model/client.go +++ b/model/client.go @@ -16,6 +16,7 @@ type Client struct { PresharedKey string `json:"presharedKey"` AllowedIPs []string `json:"allowedIPs"` Address []string `json:"address"` + Tags []string `json:"tags"` PrivateKey string `json:"privateKey"` PublicKey string `json:"publicKey"` CreatedBy string `json:"createdBy"` diff --git a/ui/src/components/Clients.vue b/ui/src/components/Clients.vue index 16869bcc33bca726db100a2e59b39491c189c9fd..4d3402861d67aafd03c63aef95e6b71e95410f34 100644 --- a/ui/src/components/Clients.vue +++ b/ui/src/components/Clients.vue @@ -44,6 +44,17 @@ {{ ip }} </v-chip> </template> + <template v-slot:item.tags="{ item }"> + <v-chip + v-for="(tag, i) in item.tags" + :key="i" + color="blue-grey" + text-color="white" + > + <v-icon left>mdi-tag</v-icon> + {{ tag }} + </v-chip> + </template> <template v-slot:item.created="{ item }"> <v-row> <p>At {{ item.created | formatDate }} by {{ item.createdBy }}</p> @@ -122,6 +133,17 @@ {{ ip }} </v-chip> </v-card-text> + <v-card-text class="text--primary"> + <v-chip + v-for="(tag, i) in client.tags" + :key="i" + color="blue-grey" + text-color="white" + > + <v-icon left>mdi-tag</v-icon> + {{ tag }} + </v-chip> + </v-card-text> <v-card-actions> <v-tooltip bottom> <template v-slot:activator="{ on }"> @@ -255,7 +277,26 @@ </v-chip> </template> </v-combobox> - + <v-combobox + v-model="client.tags" + chips + hint="Write tag name and hit enter" + label="Tags" + multiple + dark + > + <template v-slot:selection="{ attrs, item, select, selected }"> + <v-chip + v-bind="attrs" + :input-value="selected" + close + @click="select" + @click:close="client.tags.splice(client.tags.indexOf(item), 1)" + > + <strong>{{ item }}</strong> + </v-chip> + </template> + </v-combobox> <v-switch v-model="client.enable" color="red" @@ -360,6 +401,26 @@ </v-chip> </template> </v-combobox> + <v-combobox + v-model="client.tags" + chips + hint="Write tag name and hit enter" + label="Tags" + multiple + dark + > + <template v-slot:selection="{ attrs, item, select, selected }"> + <v-chip + v-bind="attrs" + :input-value="selected" + close + @click="select" + @click:close="client.tags.splice(client.tags.indexOf(item), 1)" + > + <strong>{{ item }}</strong> + </v-chip> + </template> + </v-combobox> <v-switch v-model="client.ignorePersistentKeepalive" color="red" @@ -409,6 +470,7 @@ { text: 'Name', value: 'name', }, { text: 'Email', value: 'email', }, { text: 'IP addresses', value: 'address', }, + { text: 'Tags', value: 'tags', }, { text: 'Created', value: 'created', sortable: false, }, { text: 'Updated', value: 'updated', sortable: false, }, { text: 'Actions', value: 'action', sortable: false, }, @@ -451,6 +513,7 @@ enable: true, allowedIPs: this.server.allowedips, address: this.server.address, + tags: [], } this.dialogCreate = true; },