status-desktop/storybook/pages/ProfileSocialLinksPanelPage.qml

import QtQuick 2.14
import QtQuick.Controls 2.14

import StatusQ.Core 0.1
import StatusQ.Core.Utils 0.1 as CoreUtils

import mainui 1.0
import AppLayouts.Profile.panels 1.0

import utils 1.0

import Storybook 1.0

SplitView {
    id: root

    Logs { id: logs }

    orientation: Qt.Vertical

    Popups {
        popupParent: root
        rootStore: QtObject {}
    }

    ListModel {
        id: linksModel
        ListElement {
            uuid: "0001"
            text: "__github"
            url: "https://github.com/caybro"
            linkType: 3 // Constants.socialLinkType.github
            icon: "github"
        }
        ListElement {
            uuid: "0002"
            text: "__twitter"
            url: "https://twitter.com/caybro"
            linkType: 1 // Constants.socialLinkType.twitter
            icon: "twitter"
        }
        ListElement {
            uuid: "0003"
            text: "__personal_site"
            url: "https://status.im"
            linkType: 2 // Constants.socialLinkType.personalSite
            icon: "language"
        }
        ListElement {
            uuid: "0004"
            text: "__youtube"
            url: "https://www.youtube.com/@LukasTinkl"
            linkType: 4 // Constants.socialLinkType.youtube
            icon: "youtube"
        }
        ListElement { // NB: empty on purpose, for testing
            uuid: ""
            text: ""
            url: ""
            linkType: -1
            icon: ""
        }
        ListElement {
            uuid: "0005"
            text: "Figma design very long URL link text that should elide"
            url: "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=1223%3A124882&t=qvYeJ8grsZLyUS0V-0"
            linkType: 0 // Constants.socialLinkType.custom
            icon: "link"
        }
        ListElement {
            uuid: "0006"
            text: "__telegram"
            url: "https://t.me/ltinkl"
            linkType: 6 // Constants.socialLinkType.telegram
            icon: "telegram"
        }
    }

    Connections {
        target: Global
        function onOpenLink(link) {
            logs.logEvent("Global::openLink", ["link"], [link])
        }
    }

    StatusScrollView { // wrapped in a ScrollView on purpose; to simulate SettingsContentBase.qml
        SplitView.fillWidth: true
        SplitView.preferredHeight: 300
        ProfileSocialLinksPanel {
            width: 500
            profileStore: QtObject {
                function createLink(text, url, linkType, icon) {
                    logs.logEvent("ProfileStore::createLink", ["text", "url", "linkType", "icon"], arguments)
                    linksModel.append({text, url, linkType, icon})
                }

                function removeLink(uuid) {
                    logs.logEvent("ProfileStore::removeLink", ["uuid"], arguments)
                    const idx = CoreUtils.ModelUtils.indexOf(linksModel, "uuid", uuid)
                    if (idx === -1)
                        return
                    linksModel.remove(idx, 1)
                }

                function updateLink(uuid, text, url) {
                    logs.logEvent("ProfileStore::updateLink", ["uuid", "text", "url"], arguments)
                    const idx = CoreUtils.ModelUtils.indexOf(linksModel, "uuid", uuid)
                    if (idx === -1)
                        return
                    if (!!text)
                        linksModel.setProperty(idx, "text", text)
                    if (!!url)
                        linksModel.setProperty(idx, "url", url)
                }

                function moveLink(fromRow, toRow, count) {
                    logs.logEvent("ProfileStore::moveLink", ["fromRow", "toRow", "count"], arguments)
                    linksModel.move(fromRow, toRow, 1)
                }

                function resetSocialLinks() {
                    logs.logEvent("ProfileStore::resetSocialLinks")
                }

                function saveSocialLinks(silent = false) {
                    logs.logEvent("ProfileStore::saveSocialLinks", ["silent"], arguments)
                }
            }

            socialLinksModel: linksModel
        }
    }

    LogsAndControlsPanel {
        id: logsAndControlsPanel

        SplitView.minimumHeight: 100
        SplitView.preferredHeight: 200

        logsView.logText: logs.logText
    }
}

// category: Panels

// https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?node-id=14588%3A308727&t=cwFGbBHsAGOP0T5R-0