Avi - Messages (Angular.js)

by Avi Algaly

HTML

<link rel="stylesheet" href="http://fortawesome.github.com/Font-Awesome/assets/css/font-awesome.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"></script>
<div ng-controller="MessageController">
    <ul class="message-list">
        <li ng-repeat="message in messages" data-id="{{message.Id}}" ng-class="intermediateState(message)"> <a href="#" ng-click="toggleMessageText(message)">
                <i ng-class="iconClassName(message)" title="{{message.TypeTitle}}"></i><span>{{message.Subject}}</span>
            </a>
 <i class="icon-remove-circle remove-message" title="Remove Message"
            ng-click="removeMessage(message)"></i>

            <section ng-show="textVisible(message)">
                <p>{{message.Text}}</p>
                <p class="message-metadata">from <span>{{senderFullName(message)}}</span> on <span>{{messageDate(message)}}</span>
                </p>
            </section>
        </li>
    </ul>
</div>

SCSS

$line-height: 40px;
$text-color: #777;

body {
    font-family: Arial, Sans-Serif;
    font-size: 1em;
    color: $text-color;
}

.intermediate {
    opacity: 0.3;
}

.message-list {
    font-family: Arial, Sans-Serif;
    font-size: 0.9em;
    list-style: none;
    width: 300px;
    
    li {
        border: 1px solid #bbb;
        margin-top: -1px;
        position: relative;
        a {
            color: $text-color;
            text-decoration: none;
            display: block;
            line-height: $line-height;
            padding: 0 10px;
            margin-right: 20px;
            span {
                margin-left: 15px;
            }
        }
        .remove-message {
            position: absolute;
            right: 0;
            top: 0;
            line-height: $line-height;
            cursor: pointer;
        }
        section {
            border-top: 1px solid #ddd;
            background-color: #eee;
                
            p {
                margin: 0;
                padding: 8px;
            }
            
            .message-metadata {
                font-size: 0.8em;
                text-align: right;
                
                span {
                    font-weight: bold;
                }
            }
        }
    }
}

JavaScript

// this is the real raw data returned from the server
var messagesResponseJSON = [{
    "Id": "e85134d4-f8ca-4a1d-ba0e-34677cc5b951",
    "Date": "2013-01-01T00:00:00",
    "Subject": "Please pay the bill",
    "Text": "i think you still own me money",
    "CreatorId": 6,
    "MessageStatus": 1,
    "ReminderDate": "2013-03-04T15:01:31.503",
    "StatusId": 1,
    "TypeId": 1,
    "TypeTitle": "message",
    "Email": "[email protected]",
    "FirstName": "John",
    "LastName": "Doe",
    "Phone": "0215488775"
}, {
    "Id": "e85134d4-f8ca-4a1d-ba0e-34677cc5b954",
    "Date": "2012-11-11T00:00:00",
    "Subject": "SubjectTest",
    "Text": "Message Text",
    "CreatorId": 7,
    "MessageStatus": 1,
    "ReminderDate": "2012-11-13T00:00:00",
    "StatusId": 1,
    "TypeId": 1,
    "TypeTitle": "message",
    "Email": "[email protected]",
    "FirstName": "xxx",
    "LastName": "yyy",
    "Phone": "1700780787"
}, {
    "Id": "f3c3eb47-f1e7-4d63-bd75-fe4fc92261f0",
    "Date": "2012-11-11T00:00:00",
    "Subject": "SubjectTest1",
    "Text": "MsgText1",
    "CreatorId": 7,
    "MessageStatus": 2,
    "ReminderDate": "2012-12-13T00:00:00",
    "StatusId": 2,
    "TypeId": 2,
    "TypeTitle": "payment",
    "Email": "[email protected]",
    "FirstName": "xxx",
    "LastName": "yyy",
    "Phone": "1700780787"
}];

var app = angular.module("myApp", []);
/*
    a small DB-Server for manipulating/fetching server data
*/
app.factory("MessagesDb", function ($timeout) {
    return {
        // loads all the messages from the server
        load: function () {
            var d = $.Deferred();

            // simulating server call
            // $.get("/messages")
            $timeout(function () {
                d.resolve(messagesResponseJSON);
                // for testing failure fetching messages comment previous line and uncomment next
                // d.reject("The messages could not be retrieved");
            }, 1500);

            return d.promise();
        },
        //...